better placement for popups

Gemfile.lock

@@ -808,4 +808,4 @@ RUBY VERSION
    ruby 2.6.5p114
 
 BUNDLED WITH
-   1.17.3
+   2.1.4

app/javascript/mastodon/features/ui/components/messaging/conversation-item.js

@@ -51,9 +51,10 @@ export default class ConversationItem extends React.PureComponent {
   render() {
     const hasNewClass = this.state.newMessages ? 'has-new-message' : 'nothing-new';
     const isVisible = this.state.displayed ? 'displayed' : 'hidden';
+    const isReduced = this.state.displayed ? 'full' : 'reduced';
     const isFocused = this.state.isFocused ? 'isFocused' : 'not-focused';
     const list = (
-      <li className={'conversation-item ' + hasNewClass + ' ' + isVisible + ' ' + isFocused}>
+      <li className={`conversation-item ${hasNewClass} ${isReduced} ${isFocused}`}>
         <div className='top-title'>
           <i
             role='img'
@@ -78,31 +79,35 @@ export default class ConversationItem extends React.PureComponent {
             />
           </button >
         </div >
-        <ConversationStream messages={this.props.messages} />
-        <div className='conversation_input'>
-          <form
-            action='#'
-            onSubmit={this.submitCompose}
-          >
-            <textarea
-              name='messager'
-              id=''
-              cols='15'
-              rows='3'
-              className='messager-textarea'
-              placeholder='allez dis nous tout'
-              onFocusCapture={this.toggleFocused}
-              onBlurCapture={this.toggleFocused}
-              onChange={this.handleChange}
+        <div className={`body ${isVisible} `} >
 
-            />
-            <input
-              type='submit'
-              name='submit'
-              value='Send'
-            />
-          </form >
-        </div >
+          <ConversationStream messages={this.props.messages} />
+          <div className='conversation_input'>
+            <form
+              action='#'
+              onSubmit={this.submitCompose}
+            >
+              <textarea
+                name='messager'
+                id=''
+                cols='15'
+                rows='3'
+                className='messager-textarea'
+                placeholder='allez dis nous tout'
+                onFocusCapture={this.toggleFocused}
+                onBlurCapture={this.toggleFocused}
+                onChange={this.handleChange}
+
+              />
+              <input
+                className='messager-send'
+                type='submit'
+                name='submit'
+                value='>'
+              />
+            </form >
+          </div >
+        </div>
       </li >
     );
     return (

app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js

@@ -33,6 +33,7 @@ export default class ConversationStream extends React.PureComponent {
       <div className='conversation-stream'>
         <div className='messages'>
           {messagesLists}
+          <hr className='marker'/>
         </div >
       </div >
     );

app/javascript/styles/bliss.scss

@@ -31,3 +31,4 @@
 @import 'bliss/dashboard';
 @import 'bliss/rtl';
 @import 'bliss/accessibility';
+@import 'bliss/responsive';

app/javascript/styles/bliss/responsive.scss

@@ -0,0 +1,7 @@
+
+@media screen and (min-width: 740px) {
+  .sidebar__toggle{
+    display: none;
+  }
+
+}

app/javascript/styles/mastodon/admin.scss

@@ -878,3 +878,12 @@ a.name-tag,
     color: $primary-text-color;
   }
 }
+// control panel
+
+.simple_form .edit_user{
+  button[type=submit]{
+    position: fixed;
+    bottom: 3px;
+    right: 3px;
+  }
+}

app/javascript/styles/mastodon/messaging/contacts.scss

@@ -12,5 +12,9 @@
 
   .contact {
     margin-bottom: 0.5rem;
+    img{
+      max-width: 3em;
+      max-height: 3em;
+    }
   }
 }

app/javascript/styles/mastodon/messaging/messaging-conversation.scss

@@ -1,8 +1,10 @@
+$textareaHeight : 60px;
+$conversationMargin: 1em;
+$conversationWidth: 20em;
+
 .main-instant-messaging {
 
   .conversation {
-
-
     .conversation__content {
       padding-right: 0;
     }
@@ -30,22 +32,26 @@
     @extend .fixed-box;
     right: $messagingBoxWidth + 2em;
     bottom: 0;
-    width: 100%;
+    width: 50%;
     padding: 0.5em;
     overflow-x: auto;
     border: 0;
+    z-index: 2;
   }
 
+  /**
+  block containing one stream, in line at the bottom of the screen
+   */
   .conversation-item {
     float: right;
-    width: 20em;
-    margin-left: 2em;
-    padding: 1em;
+    width: $conversationWidth;
+    margin-left: $conversationMargin;
+
     border-radius: 15px;
-    border: 3px solid $classic-primary-color;
-    -moz-border-radius-bottomleft: 0;
-    -moz-border-radius-bottomright: 0;
-    background: $classic-base-color;
+    border: 3px solid white;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    background: $classic-primary-color;
 
 
     &.has-new-message {
@@ -56,11 +62,35 @@
     &.is-focused {
       border-color: $ui-base-color;
     }
+    &.reduced{
+
+    }
 
+    .top-title {
+      padding: 1em;
+      background: $classic-base-color;
+      border-top-left-radius: 1em;
+      border-top-right-radius: 1em;
+
+      button, .btn{
+        background: transparent;
+        color: white;
+        float:right;
+        border: 0;
+      }
+    }
+    .body{
+      height: 17.7em;
+      &.reduced{
+        display:none;
+      }
+    }
     .username {
       font-weight: bold;
     }
-
+    .conversation-stream{
+      width: $conversationWidth - 2em;
+    }
     .conversation-stream,
     .conversation_input {
       height: 100%;
@@ -73,14 +103,38 @@
         display: none;
       }
     }
-
-    .btn {
-      background: $classic-base-color;
-      color: $ui-base-color;
+    .messager-send {
+      background: #282c37;
+      color: white;
       float: right;
       padding: 0 1em;
       margin-left: 1em;
       border: 0;
+      margin-top: -$textareaHeight;
+      height:$textareaHeight;
+      width: 3em;
+    }
+
+    .messager-textarea{
+      box-sizing: border-box;
+      padding: 1rem;
+      padding-right: 4em;
+      background: $ui-base-color;
+      color: white;
+      border: 0;
+      width: 100%;
+      display: block;
+      height: $textareaHeight;
+      overflow: auto;
+    }
+    button[type=submit]{
+      background: $classic-base-color;
+      color: white;
+      padding: 0.5rem;
+      -webkit-border-radius: 3px;
+      -moz-border-radius: 3px;
+      border-radius: 3px;
+      border: 0;
     }
   }
 

app/javascript/styles/mastodon/messaging/messaging-stream.scss

@@ -1,13 +1,40 @@
 
 .conversation-stream {
+  display: block;
   padding-top: 1em;
-  height: 5em;
+  padding-left: 1em;
+  padding-right: 1em;
+  height: 10em;
   overflow: auto;
-  width: 100%;
+  width: $messagingBoxWidth;
+  padding-bottom: 4em;
 
 
   .message {
+    background: #6b7f9b;
     clear: both;
+    margin-bottom: 2rem;
+    &.ours {
+      text-align: right;
+      background: #6b7f9b;
+      float: right;
+
+      .arrow-down {
+        border-top-color: #6b7f9b;
+        left: 75%;
+      }
+    }
+
+    &.theirs {
+      text-align: left;
+      background: $ui-highlight-color;
+      float: left;
+
+      .arrow-down {
+        border-top-color: $ui-highlight-color;
+        right: 1em;
+      }
+    }
   }
 
   .messages >
@@ -16,38 +43,19 @@
     -moz-border-radius: 0.5rem;
     border-radius: 0.5rem;
     margin-bottom: 0.5em;
+    margin-right: 0.5em;
     padding: 0.5em 1em;
     display: block;
   }
 
-  .ours {
-    text-align: right;
-    background: $light-text-color;
-    float: right;
-
-    .arrow-down {
-      border-top-color: $light-text-color;
-      left: 100%;
-    }
-  }
-
-  .theirs {
-    text-align: left;
-    background: $ui-highlight-color;
-    float: left;
 
-    .arrow-down {
-      border-top-color: $ui-highlight-color;
-      right: 1em;
-    }
-  }
 
   .arrow-down {
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 20px solid transparent;
-    border-top: 20px solid $classic-primary-color;
+    border-top: 20px solid $ui-highlight-color;
     position: relative;
     bottom: -1em;
 

app/javascript/styles/mastodon/messaging/messaging.scss

@@ -1,19 +1,10 @@
 
-.status-direct,
-.item-list .conversation {
-  @extend .airmail-border;
-}
-
-.main-instant-messaging {
-
-  .column-header__icon {
-    color: white;
-  }
-}
-
+/**
+conteneur de contacts latéral
+ */
 .messaging-box {
   @extend .fixed-box;
-
+ box-sizing: border-box;
   right: 1em;
   width: $messagingBoxWidth;
   background: $ui-base-color;
@@ -33,6 +24,16 @@
     color: white;
   }
 
+  .account__display-name{
+    float: left;
+    margin-right: 1em;
+  }
+
+  .card-title{
+    height: 2rem;
+    padding-left: 0;
+    font-size: 1.3rem;
+  }
 }
 
 
@@ -52,3 +53,15 @@
 .conversation_created-at {
   margin-right: 1em;
 }
+
+.status-direct,
+.item-list .conversation {
+  @extend .airmail-border;
+}
+
+.main-instant-messaging {
+
+  .column-header__icon {
+    color: white;
+  }
+}