From a1199ac219a04f8f22a0ebeca2ee61984ddb6837 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Tue, 21 Mar 2017 14:28:59 +0100 Subject: [PATCH] Remove mentions-input-box --- app/assets/stylesheets/_application.scss | 1 - .../_color_theme_override_dark.scss | 1 - app/assets/stylesheets/mentions.scss | 21 ---------------- app/assets/stylesheets/publisher.scss | 2 ++ app/assets/stylesheets/typeahead.scss | 18 +++++++++++++ app/views/publisher/_publisher.html.haml | 25 +++++++++---------- 6 files changed, 32 insertions(+), 36 deletions(-) delete mode 100644 app/assets/stylesheets/mentions.scss diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 8bd3810d0..169bf1e1c 100644 --- a/app/assets/stylesheets/_application.scss +++ b/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'; diff --git a/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss b/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss index 74c305068..dd52eec0c 100644 --- a/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss +++ b/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; } diff --git a/app/assets/stylesheets/mentions.scss b/app/assets/stylesheets/mentions.scss deleted file mode 100644 index e06076ca7..000000000 --- a/app/assets/stylesheets/mentions.scss +++ /dev/null @@ -1,21 +0,0 @@ -.mentions-input-box { - position: relative; -} - -.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%; - } -} diff --git a/app/assets/stylesheets/publisher.scss b/app/assets/stylesheets/publisher.scss index 1c9419d66..83be3b015 100644 --- a/app/assets/stylesheets/publisher.scss +++ b/app/assets/stylesheets/publisher.scss @@ -196,6 +196,8 @@ } .publisher-textarea-wrapper { + position: relative; + &:not(.with-location) .location-container, &.markdown-preview .location-container, &:not(.with-poll) .poll-creator-container, diff --git a/app/assets/stylesheets/typeahead.scss b/app/assets/stylesheets/typeahead.scss index af635352b..89e1ef8fd 100644 --- a/app/assets/stylesheets/typeahead.scss +++ b/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%; + } +} diff --git a/app/views/publisher/_publisher.html.haml b/app/views/publisher/_publisher.html.haml index eda80f468..7eb8e3319 100644 --- a/app/views/publisher/_publisher.html.haml +++ b/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? - = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text), - :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", - "data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")), - "data-content" => t("shared.public_explain.new_user_welcome_message"), - "class" => "form-control mention-textarea" - - else - = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text), - :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", - "class" => "form-control mention-textarea" - .typeahead-mention-box-wrap - %input.typeahead-mention-box.hidden{type: "text"} + - if current_user.getting_started? + = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text), + :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", + "data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")), + "data-content" => t("shared.public_explain.new_user_welcome_message"), + "class" => "form-control mention-textarea" + - else + = status.text_area :text, :rows => 2, :value => h(publisher_formatted_text), + :tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...", + "class" => "form-control mention-textarea" + .typeahead-mention-box-wrap + %input.typeahead-mention-box.hidden{type: "text"} .container-fluid.photodropzone-container#photodropzone_container %ul#photodropzone