Add expand support to Connect (#428)

* Make adjustments and fixes to DEV Conncect

* Make various small changes and add settings icon

* Add expand support to Connect

app/assets/stylesheets/chat.scss

@@ -1,6 +1,23 @@
 @import 'variables';
 
-// High level class
+// High level classes
+.chat-page-wrapper{
+  height: calc(100vh - 121px);
+  margin: 100px auto;
+  width: 96%;
+  max-width: 1240px;
+  height: calc(100vh - 155px);
+  @media screen and ( min-width: 375px ){
+    height: calc(100vh - 121px);
+  }
+}
+.live-chat{
+  height: calc(100vh - 155px);
+  overflow-y: hidden;
+  @media screen and ( min-width: 375px ){
+    height: calc(100vh - 121px);
+  }
+}
 .chat-page-header{
   background: $green;
   text-align: center;
@@ -12,9 +29,15 @@
   font-weight: bold;
 }
 
+
+//chat
 .chat {
   display: flex;
-  height: inherit;
+  height: calc(100vh - 162px);
+  padding-right: 3px;
+  @media screen and ( min-width: 375px ){
+    height: calc(100vh - 128px);
+  }
 }
 
 .chat__notificationsbutton{
@@ -35,20 +58,36 @@
 }
 
 .chat__channels {
-  width: 80px;
+  width: 45px;
   height: inherit;
   position: relative;
-  @media screen and ( min-width: 550px ){
-    width: 160px;
+}
+
+.chat__channels--expanded{
+  width: 180px;
+}
+
+.chat__channelstogglebutt{
+  width: 26px;
+  height: 38px;
+  background: transparent;
+  border: 0px;
+  -webkit-appearance: none;
+  font-size: 18px;
+  font-weight: bold;
+  img{
+    width: 100%;
   }
 }
 
 .chat__channels input {
-  width: 96%;
+  width: calc(100% - 37px);
   border-radius: 3px;
   border: 1px solid $light-medium-gray;
   box-sizing: border-box;
-  padding: 5px;
+  padding: 8px;
+  margin-left: 2px;
+  font-size: 14px;
 }
 
 .chat_chatconfig{
@@ -277,6 +316,7 @@
   color: $medium-gray;
   padding: 10px;
   opacity:0.8;
+  padding-bottom: 70px;
 }
 
 .chatchannels__config{
@@ -304,6 +344,7 @@
   position: absolute;
   bottom: 42px;
   padding: 12px 10px;
+  min-width: 150px;
   left: 0;
   right: 0;
   background: $lightest-gray;

app/javascript/chat/actions.js

@@ -85,8 +85,6 @@ export function getChannels(query,retrievalID, props, successCb, failureCb) {
   console.log(query)
     let channels = content.hits
     if (retrievalID === null || content.hits.filter(e => e.id === retrievalID).length === 1) {
-      console.log("third-1")
-      console.log(query)
       successCb(channels, query)
     } else {
       index.getObjects([`${retrievalID}`], function(err, content) {

app/javascript/chat/channels.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import ConfigImage from 'images/three-dots.svg';
 
-const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel }) => {
+const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel, expanded }) => {
   const channels = chatChannels.map(channel => {
     const isActive = parseInt(activeChannelId, 10) === channel.id
     const lastOpened = channel.last_opened_at ? channel.last_opened_at : channel.channel_users[window.currentUser.username].last_opened_at
@@ -22,6 +22,35 @@ const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel }) => {
     } else if ( isActive ) {
       channelColor = '#4e57ef'
     }
+
+    let content = ''
+
+    if (expanded) {
+      content = <span>
+                  <span 
+                    data-channel-slug={modififedSlug}
+                    className={"chatchanneltabindicator chatchanneltabindicator--" + newMessagesIndicatorClass}
+                    data-channel-id={channel.id}
+                    data-channel-slug={modififedSlug}>
+                    {indicatorPic}
+                  </span>
+                  {name}
+                </span>
+    } else {
+      if (channel.channel_type === "direct") {
+
+        content = <span 
+                    data-channel-slug={modififedSlug}
+                    className={"chatchanneltabindicator chatchanneltabindicator--" + newMessagesIndicatorClass}
+                    data-channel-id={channel.id}
+                    data-channel-slug={modififedSlug}>
+                    {indicatorPic}
+                  </span>
+      } else {
+        content = name
+      }
+    }
+
     return (
       <button
         className='chatchanneltabbutton'
@@ -34,6 +63,8 @@ const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel }) => {
           data-channel-slug={modififedSlug}
           style={{border:`1px solid ${channelColor}`, boxShadow: `3px 3px 0px ${channelColor}`}}
         >
+          {content}
+=======
           <span 
             data-channel-slug={modififedSlug}
             className={"chatchanneltabindicator chatchanneltabindicator--" + newMessagesIndicatorClass}
@@ -50,7 +81,6 @@ const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel }) => {
   if (channels.length === 30) {
     channelsListFooter = <div className="chatchannels__channelslistfooter">You may connect devs you mutually follow. Use the filter to discover all your channels.</div>
   }
-  console.log(ConfigImage)
   return (
     <div className="chatchannels">
       <div className="chatchannels__channelslist">
@@ -72,6 +102,7 @@ Channels.propTypes = {
   activeChannelId: PropTypes.number.isRequired,
   chatChannels: PropTypes.array.isRequired,
   handleSwitchChannel: PropTypes.func.isRequired,
+  expanded: PropTypes.bool.isRequired,
 };
 
 export default Channels;

app/javascript/chat/chat.jsx

@@ -31,6 +31,7 @@ export default class Chat extends Component {
       showTimestamp: chatOptions.showTimestamp,
       notificationsPermission: null,
       activeContent: null,
+      expanded: window.innerWidth > 600,
       isMobileDevice: typeof window.orientation !== "undefined",
     };
   }
@@ -385,6 +386,10 @@ export default class Chat extends Component {
       getChannels(e.target.value, null, this.props, this.loadChannels);
   }
 
+  toggleExpand = () => {
+    this.setState({expanded: !this.state.expanded})
+  }
+
   renderChatChannels = () => {
     if (this.state.showChannelsList) {
       const notificationsPermission = this.state.notificationsPermission;
@@ -397,18 +402,40 @@ export default class Chat extends Component {
       } else if (notificationsPermission === "denied") {
         notificationsState = <div class="chat_chatconfig chat_chatconfig--off">Notificatins Off</div>
       }
-      return (
-        <div className="chat__channels">
-          {notificationsButton}
-          <input placeholder='Filter' onKeyUp={this.triggerChannelFilter} />
-          <Channels
-            activeChannelId={this.state.activeChannelId}
-            chatChannels={this.state.chatChannels}
-            handleSwitchChannel={this.handleSwitchChannel}
-          />
-          {notificationsState}
-        </div>
-      );
+      if (this.state.expanded) {
+        return (
+          <div className="chat__channels chat__channels--expanded">
+            {notificationsButton}
+            <button class="chat__channelstogglebutt" onClick={this.toggleExpand}>{"<"}</button>
+            <input placeholder='Filter' onKeyUp={this.triggerChannelFilter} />
+            <Channels
+              activeChannelId={this.state.activeChannelId}
+              chatChannels={this.state.chatChannels}
+              handleSwitchChannel={this.handleSwitchChannel}
+              expanded={this.state.expanded}
+            />
+            {notificationsState}
+          </div>
+        )
+      } else {
+        return (
+          <div className="chat__channels">
+            {notificationsButton}
+            <button
+              class="chat__channelstogglebutt"
+              onClick={this.toggleExpand}
+              style={{width: "100%"}}
+              >{">"}</button>
+            <Channels
+              activeChannelId={this.state.activeChannelId}
+              chatChannels={this.state.chatChannels}
+              handleSwitchChannel={this.handleSwitchChannel}
+              expanded={this.state.expanded}
+            />
+            {notificationsState}
+          </div>
+        )
+      }
     }
     return '';
   };

app/views/chat_channels/index.html.erb

@@ -9,19 +9,7 @@
 
 <% if user_signed_in? %>
   <%= javascript_pack_tag 'chat', defer: true %>
-  <style>
-  .inner-content {
-    height: calc(100vh - 121px);
-    margin: 100px auto;
-    width: 96%;
-    max-width: 1240px;
-  }
-
-    .live-chat {
-      height: calc(100vh - 121px);
-    }
-  </style>
-  <div class="inner-content">
+  <div class="chat-page-wrapper">
     <div class="chat-page-header">DEV Connect is Beta (Work in Progress ❤️)</div>
     <div
       id="chat"