Merge pull request #7380 from svbergerem/refactor-mentions-css

Refactor mentions-input-box css

app/assets/stylesheets/_application.scss

@@ -9,7 +9,6 @@
 @import 'media-box';
 @import 'entypo';
 @import 'icons';
-@import 'mentions';
 @import 'animations';
 @import 'flash_messages';
 @import 'sprites';

app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

@@ -7,7 +7,6 @@ body {
   }
 
   .publisher {
-    .mentions-input-box { background-color: $gray; }
     form {
       #publisher_textarea_wrapper { background-color: $gray; }
       .btn.btn-link.question_mark:hover .entypo-cog { color: $gray-light; }

app/assets/stylesheets/mentions.scss

@@ -1,85 +0,0 @@
-.mentions-input-box {
-  border-radius: 3px;
-
-  background: #fff;
-  position: relative;
-
-  textarea {
-    display: block;
-    background: transparent;
-    border: 1px solid #dcdcdc;
-    border-radius: 3px;
-    outline: 0;
-    overflow: hidden;
-    position: relative;
-    resize: none;
-    width: 100%;
-
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-
-  .form-control[disabled] { background-color: transparent; }
-
-  .mentions-autocomplete-list {
-    background: white;
-    display: none;
-    left: 0;
-    margin-left: -1px;
-    position: absolute;
-    right: 0;
-    z-index: 10000;
-
-    ul {
-      border: 1px solid $border-dark-grey;
-      margin: 0;
-      padding: 0;
-
-      border-radius: 0px 0px 5px 5px;
-
-      li {
-        color: #444;
-        background: white;
-        border-bottom: 1px solid #ccc;
-        cursor: pointer;
-        font-size: 15px;
-        height: 26px;
-        line-height: 26px;
-        list-style: none;
-        margin: 0;
-        overflow: hidden;
-        padding: 5px;
-        white-space: nowrap;
-
-        &:hover, &.active { background: $background-grey; }
-        &:last-child { border-radius: 0px 0px 5px 5px; }
-
-        img, div.icon {
-          float: left;
-          height: 25px;
-          margin-right: 5px;
-          width: 25px;
-        }
-      }
-    }
-  }
-}
-
-.typeahead-mention-box-wrap .twitter-typeahead {
-  left: -1px;
-  width: calc(100% + 2px);
-
-  .tt-menu {
-    // Override inline rule of Typeahead
-    // If this is not overridden (`position: absolute` by default in Typeahead) then
-    // the box is cut when opened because of the `overflow: hidden` from parent classes of comment form styles. By
-    // having `position: relative` here we make it visible by inserting it in the flow.
-    // This has a side effect of "Comment" button move down when box is open, but it feels like the least evil.
-    // scss-lint:disable ImportantRule
-    position: relative !important;
-    // scss-lint:enable ImportantRule
-
-    width: 100%;
-  }
-}

app/assets/stylesheets/publisher.scss

@@ -76,11 +76,12 @@
       }
 
       textarea {
+        background: transparent;
         border: 0 solid $light-grey;
-        margin: 0;
         box-shadow: none;
-        resize: none;
         height: 50px;
+        margin: 0;
+        resize: none;
       }
 
       &.active textarea {
@@ -195,6 +196,8 @@
 }
 
 .publisher-textarea-wrapper {
+  position: relative;
+
   &:not(.with-location) .location-container,
   &.markdown-preview .location-container,
   &:not(.with-poll) .poll-creator-container,

app/assets/stylesheets/typeahead.scss

@@ -43,3 +43,21 @@
     }
   }
 }
+
+.typeahead-mention-box-wrap .twitter-typeahead {
+  left: -1px;
+  width: calc(100% + 2px);
+
+  .tt-menu {
+    // Override inline rule of Typeahead
+    // If this is not overridden (`position: absolute` by default in Typeahead) then
+    // the box is cut when opened because of the `overflow: hidden` from parent classes of comment form styles. By
+    // having `position: relative` here we make it visible by inserting it in the flow.
+    // This has a side effect of "Comment" button move down when box is open, but it feels like the least evil.
+    // scss-lint:disable ImportantRule
+    position: relative !important;
+    // scss-lint:enable ImportantRule
+
+    width: 100%;
+  }
+}

app/views/publisher/_publisher.html.haml

@@ -4,19 +4,18 @@
       = status.error_messages
       %params
         .publisher-textarea-wrapper#publisher_textarea_wrapper
-          .mentions-input-box
+          - if current_user.getting_started?
-            - if current_user.getting_started?
+            = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
-              = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
+              :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
-                :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
+              "data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")),
-                "data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")),
+              "data-content" => t("shared.public_explain.new_user_welcome_message"),
-                "data-content" => t("shared.public_explain.new_user_welcome_message"),
+              "class" => "form-control mention-textarea"
-                "class" => "form-control mention-textarea"
+          - else
-            - else
+            = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
-              = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
+              :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
-                :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
+              "class" => "form-control mention-textarea"
-                "class" => "form-control mention-textarea"
+          .typeahead-mention-box-wrap
-            .typeahead-mention-box-wrap
+            %input.typeahead-mention-box.hidden{type: "text"}
-              %input.typeahead-mention-box.hidden{type: "text"}
 
           .container-fluid.photodropzone-container#photodropzone_container
             %ul#photodropzone