⚡ demo structure for message stream

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -248,27 +248,12 @@ class ComposeForm extends ImmutablePureComponent {
         </div>
 
         <div className='compose-form__publish'>
-          <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit}
-                                                                        disabled={disabledButton} block/></div>
+          <div className='compose-form__publish-button-wrapper'><Button
+            text={publishText} onClick={this.handleSubmit}
+            disabled={disabledButton} block
+          /></div>
         </div>
-        <div className="messaging-box">
-          Messaging box
-          <div className="user-list">
-            <h2>User list</h2>
-            <ul>
-              <li>
-                someone is logged in, click on me
-              </li>
-              <li>
-                wulfila is here, click on me
-              </li>
-              <li>
-                chuck norris is here, click on me
-              </li>
-            </ul>
-          </div>
 
-        </div>
       </div>
     );
   }

app/javascript/mastodon/features/ui/components/navigation_panel.js

@@ -8,28 +8,163 @@ import FollowRequestsNavLink from './follow_requests_nav_link';
 import ListPanel from './list_panel';
 import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
 
+import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
+
 const NavigationPanel = () => (
   <div className='navigation-panel'>
-    <NavLink className='column-link column-link--transparent' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon className='column-link__icon' id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
-    <NavLink className='column-link column-link--transparent' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon className='column-link__icon' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
-    <FollowRequestsNavLink />
-    <NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
-    <NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
-    <NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' id='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
-    <NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' id='star' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
-    <NavLink className='column-link column-link--transparent' to='/bookmarks'><Icon className='column-link__icon' id='bookmark' fixedWidth /><FormattedMessage id='navigation_bar.bookmarks' defaultMessage='Bookmarks' /></NavLink>
-    <NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' id='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>
-    {profile_directory && <NavLink className='column-link column-link--transparent' to='/directory'><Icon className='column-link__icon' id='address-book-o' fixedWidth /><FormattedMessage id='getting_started.directory' defaultMessage='Profile directory' /></NavLink>}
 
-    <ListPanel />
+    <NavLink
+      className='column-link column-link--transparent' to='/timelines/home' data-preview-title-id='column.home'
+      data-preview-icon='home'
+    ><Icon className='column-link__icon' id='home' fixedWidth/><FormattedMessage
+      id='tabs_bar.home' defaultMessage='Home'
+    /></NavLink>
+    <NavLink
+      className='column-link column-link--transparent' to='/notifications'
+      data-preview-title-id='column.notifications' data-preview-icon='bell'
+    ><NotificationsCounterIcon
+      className='column-link__icon'
+    /><FormattedMessage
+      id='tabs_bar.notifications'
+      defaultMessage='Notifications'
+    /></NavLink>
+    <FollowRequestsNavLink/>
+    <NavLink
+      className='column-link column-link--transparent' to='/timelines/public/local'
+      data-preview-title-id='column.community' data-preview-icon='users'
+    ><Icon
+      className='column-link__icon'
+      id='users'
+      fixedWidth
+    /><FormattedMessage
+      id='tabs_bar.local_timeline' defaultMessage='Local'
+    /></NavLink>
+    <NavLink
+      className='column-link column-link--transparent' exact to='/timelines/public'
+      data-preview-title-id='column.public' data-preview-icon='globe'
+    ><Icon
+      className='column-link__icon'
+      id='globe'
+      fixedWidth
+    /><FormattedMessage
+      id='tabs_bar.federated_timeline' defaultMessage='Federated'
+    /></NavLink>
+    <NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon
+      className='column-link__icon'
+      id='envelope'
+      fixedWidth
+    /><FormattedMessage
+      id='navigation_bar.direct' defaultMessage='Direct messages'
+    /></NavLink>
+    <NavLink className='column-link column-link--transparent' to='/favourites'><Icon
+      className='column-link__icon'
+      id='star'
+      fixedWidth
+    /><FormattedMessage
+      id='navigation_bar.favourites' defaultMessage='Favourites'
+    /></NavLink>
+    <NavLink className='column-link column-link--transparent' to='/bookmarks'><Icon
+      className='column-link__icon'
+      id='bookmark'
+      fixedWidth
+    /><FormattedMessage
+      id='navigation_bar.bookmarks' defaultMessage='Bookmarks'
+    /></NavLink>
+    <NavLink className='column-link column-link--transparent' to='/lists'><Icon
+      className='column-link__icon'
+      id='list-ul'
+      fixedWidth
+    /><FormattedMessage
+      id='navigation_bar.lists' defaultMessage='Lists'
+    /></NavLink>
+    {profile_directory &&
+    <NavLink className='column-link column-link--transparent' to='/directory'><Icon
+      className='column-link__icon'
+      id='address-book-o'
+      fixedWidth
+    /><FormattedMessage
+      id='getting_started.directory' defaultMessage='Profile directory'
+    /></NavLink>}
 
-    <hr />
+    <ListPanel/>
 
-    <a className='column-link column-link--transparent' href='/settings/preferences'><Icon className='column-link__icon' id='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>
-    <a className='column-link column-link--transparent' href='/relationships'><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers' /></a>
+    <hr/>
 
-    {showTrends && <div className='flex-spacer' />}
-    {showTrends && <TrendsContainer />}
+    <a className='column-link column-link--transparent' href='/settings/preferences'><Icon
+      className='column-link__icon'
+      id='cog'
+      fixedWidth
+    /><FormattedMessage
+      id='navigation_bar.preferences' defaultMessage='Preferences'
+    /></a>
+    <a className='column-link column-link--transparent' href='/relationships'><Icon
+      className='column-link__icon'
+      id='users'
+      fixedWidth
+    /><FormattedMessage
+      id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers'
+    /></a>
+
+    {showTrends && <div className='flex-spacer'/>}
+    {showTrends && <TrendsContainer/>}
+
+    <div className='messaging-box'>
+      <div className='title'>
+        <i role='img' className='fa fa-envelope column-header__icon fa-fw'/>
+        Messaging box
+      </div>
+      <div className='user-list column-header'>
+        <h2 className='title'>User list</h2>
+        <ul>
+          <li>
+            someone is logged in, click on me
+          </li>
+          <li>
+            wulfila is here, click on me
+          </li>
+          <li>
+            chuck norris is here, click on me
+          </li>
+        </ul>
+      </div>
+
+    </div>
+    <div className='conversations_list'>
+      <ul>
+        <li className='conversations_item has-new-message'>
+          <div className='title'>
+
+            <i role='img' className='fa fa-envelope column-header__icon fa-fw'/>
+            Un Gens
+            <span className='new-message-counter'>
+          (3)</span>
+            <button className='btn-small'>
+              <i role='img' className='fa fa-caret-down column-header__icon fa-fw'/>
+            </button>
+          </div>
+          <div className='conversation_stream'>
+            <div className='message theirs'>
+              <p>oh hello there! 😋 </p>
+            </div>
+            <div className='message mine'>
+              <p>General Emoji</p>
+            </div>
+            <div className='message theirs'>
+              <p>we just achieved comedy</p>
+            </div>
+          </div>
+          <div className='conversation_input'>
+            {/*<form action="#" onSubmit={submitCompose()}>*/}
+
+            {/*  <input type='text' name='compose'/>*/}
+            {/*  <input type='submit' name='submit'/>*/}
+            {/*</form>*/}
+            <ComposeFormContainer singleColumn/>
+          </div>
+          {/*<ConversationSmall></ConversationSmall>*/}
+        </li>
+      </ul>
+    </div>
   </div>
 );
 

app/javascript/styles/bliss/messaging.scss

@@ -1,8 +1,57 @@
-.messaging-box {
+$messagingBoxWidth: 15em;
+$messagingBoxHeight: 20em;
+
+.fixed-box {
   border: solid 1px white;
   padding: 1em;
   position: fixed;
   bottom: 0;
-  right: 1em;
-  background: grey;
+}
+
+.messaging-box {
+  @extend .fixed-box;
+
+  right: 1em;
+  width: $messagingBoxWidth;
+  background: $ui-base-color;
+}
+
+.conversations_list {
+  @extend .fixed-box;
+  width: $messagingBoxWidth;
+  right: $messagingBoxWidth + 5em;
+  background: $ui-secondary-color;
+}
+
+.conversation-item {
+  &.has-new-message {
+    background: $ui-highlight-color;
+    color: $classic-primary-color;
+  }
+}
+
+.conversation_stream {
+  padding-top: 1em;
+  height: $messagingBoxHeight;
+  overflow: auto;
+  background: $ui-secondary-color;
+
+  .message {
+    -webkit-border-radius: 0.5rem;
+    -moz-border-radius: 0.5rem;
+    border-radius: 0.5rem;
+    margin-bottom: 0.5em;
+    padding: 0.5em 1em;
+
+  }
+
+  .mine {
+    text-align: right;
+    background: $classic-primary-color;
+  }
+
+  .theirs {
+    text-align: left;
+    background: $ui-highlight-color;
+  }
 }

app/javascript/styles/custom.scss

@@ -22,7 +22,7 @@ $media-modal-media-max-height: 80%;
 // fix
 
 .media-gallery {
-  margin-left: -2em;
+  margin-left: 0;
 }
 
 // then we import the rest of the world