⚡ airmail style for notifications about direct messages

app/javascript/mastodon/components/status.js

@@ -607,15 +607,15 @@ class Status extends ImmutablePureComponent {
                 />
               </button >
             )}
-            <div className='well'>
+            {/*<div className='well'>*/}
 
-              {status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) &&
-              <p > oui je cause tout seul, c'est un thread</p >
-              }
-              {this.props.threadsCompile &&
-              <p > les threads sont en mode compilés</p >
-              }
-            </div >
+            {/*  {status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) &&*/}
+            {/*  <p > oui je cause tout seul, c'est un thread</p >*/}
+            {/*  }*/}
+            {/*  {this.props.threadsCompile &&*/}
+            {/*  <p > les threads sont en mode compilés</p >*/}
+            {/*  }*/}
+            {/*</div >*/}
             <StatusActionBar
               status={status}
               account={account} {...other}

app/javascript/mastodon/features/direct_timeline/components/conversation.js

@@ -150,7 +150,7 @@ class Conversation extends ImmutablePureComponent {
 
     menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
 
-    const names = accounts.map(a => <Permalink
+    const names = accounts.map(a => (<Permalink
       to={`/accounts/${a.get('id')}`}
       href={a.get('url')}
       key={a.get('id')}
@@ -160,7 +160,7 @@ class Conversation extends ImmutablePureComponent {
         className='display-name__html'
         dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
       /></bdi >
-    </Permalink >).reduce((prev, cur) => [prev, ', ', cur]);
+    </Permalink >)).reduce((prev, cur) => [prev, ', ', cur]);
 
     const handlers = {
       reply       : this.handleReply,
@@ -221,23 +221,22 @@ class Conversation extends ImmutablePureComponent {
             )}
 
             <div className='status__action-bar'>
-              <IconButton
-                className='status__action-bar-button'
-                title={intl.formatMessage(messages.reply)}
-                icon='reply'
-                onClick={this.handleReply}
-              />
-
               <div className='status__action-bar-dropdown'>
                 <DropdownMenuContainer
                   status={lastStatus}
                   items={menu}
                   icon='ellipsis-h'
-                  size={18}
                   direction='right'
                   title={intl.formatMessage(messages.more)}
                 />
               </div >
+              <IconButton
+                className='status__action-bar-button conversation_reply'
+                title={intl.formatMessage(messages.reply)}
+                icon='reply'
+                size='15em'
+                onClick={this.handleReply}
+              />
             </div >
           </div >
         </div >

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import ContactsList from './contacts-list';
-import Conversation from './conversations';
 
 export default class Messaging extends React.PureComponent {
 
@@ -48,13 +47,12 @@ export default class Messaging extends React.PureComponent {
   // }
 
   render() {
-    // const contactlist = null;
     return (
       <div >
         messagerie todo
 
         <ContactsList />
-        <Conversation />
+        {/*<Conversation />*/}
       </div >
     );
   }

app/javascript/styles/bliss/forms.scss

@@ -7,16 +7,20 @@ table{
       background: $ui-highlight-color;
     }
   }
+
   td, th {
     padding: 1rem;
   }
+
   a {
     @extend .text-btn
   }
 }
+
 .table-responsive {
   width: 100%;
 }
+
 .table-striped {
   margin: 1rem 0;
 
@@ -27,9 +31,11 @@ table{
     }
   }
 }
+
 .group-form {
 
 }
+
 code {
   font-family: $font-monospace, monospace;
   font-weight: 400;
@@ -114,6 +120,7 @@ code {
         position: absolute;
         margin: 0 4px;
         margin-top: -2px;
+        background: $ui-highlight-color;
       }
     }
   }

app/javascript/styles/bliss/messaging.scss

@@ -8,6 +8,18 @@ $messagingBoxHeight: 20em;
   bottom: 0;
 }
 
+.airmail-border {
+  border: 0.25em solid transparent;
+  border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em,
+    #58a 0, #58a 3em, white 0, white 4em);
+
+}
+
+.status-direct,
+.item-list .conversation {
+  @extend .airmail-border;
+}
+
 .messaging-box {
   @extend .fixed-box;
 
@@ -20,6 +32,35 @@ $messagingBoxHeight: 20em;
   }
 }
 
+.conversation {
+  &.focusable {
+    &:hover {
+      background: mix($ui-base-color, $ui-secondary-color);
+    }
+
+  }
+
+  .conversation_reply {
+    display: inline-block;
+    padding: 1em;
+    width: 15em;
+
+    &:hover {
+      color: $ui-highlight-color;
+    }
+  }
+
+  .status__action-bar-dropdown {
+    display: inline-block;
+    padding: 1em;
+    width: 10em;
+
+    &:hover {
+      color: $ui-highlight-color;
+    }
+  }
+}
+
 .conversations_list {
   right: 1em;
   position: absolute;

app/views/settings/profiles/show.html.haml

@@ -21,7 +21,7 @@
   %hr.spacer/
 
   .fields-group
-    = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
+    = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked'), recommended: true
 
   .fields-group
     = f.input :bot, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.bot')