Multiple Ui improvements (#3678)

* Adding permalink back to mobile

* Improving reply flow and fixing colorpicker on mobile

* Hiding colorpicker on click only for mobile size screens

webapp/components/post_view/components/post_info.jsx

@@ -74,24 +74,22 @@ export default class PostInfo extends React.Component {
              );
         }
 
-        if (!Utils.isMobile()) {
+        dropdownContents.push(
-            dropdownContents.push(
+            <li
-                <li
+                key='copyLink'
-                    key='copyLink'
+                role='presentation'
-                    role='presentation'
+            >
+                <a
+                    href='#'
+                    onClick={this.handlePermalink}
                 >
-                    <a
+                    <FormattedMessage
-                        href='#'
+                        id='post_info.permalink'
-                        onClick={this.handlePermalink}
+                        defaultMessage='Permalink'
-                    >
+                    />
-                        <FormattedMessage
+                </a>
-                            id='post_info.permalink'
+            </li>
-                            defaultMessage='Permalink'
+        );
-                        />
-                    </a>
-                </li>
-            );
-        }
 
         if (isOwner || isAdmin) {
             dropdownContents.push(

webapp/components/rhs_comment.jsx

@@ -66,24 +66,22 @@ export default class RhsComment extends React.Component {
 
         var dropdownContents = [];
 
-        if (!Utils.isMobile()) {
+        dropdownContents.push(
-            dropdownContents.push(
+            <li
-                <li
+                key='rhs-root-permalink'
-                    key='rhs-root-permalink'
+                role='presentation'
-                    role='presentation'
+            >
+                <a
+                    href='#'
+                    onClick={this.handlePermalink}
                 >
-                    <a
+                    <FormattedMessage
-                        href='#'
+                        id='rhs_comment.permalink'
-                        onClick={this.handlePermalink}
+                        defaultMessage='Permalink'
-                    >
+                    />
-                        <FormattedMessage
+                </a>
-                            id='rhs_comment.permalink'
+            </li>
-                            defaultMessage='Permalink'
+        );
-                        />
-                    </a>
-                </li>
-            );
-        }
 
         if (isOwner && !isSystemMessage) {
             dropdownContents.push(

webapp/components/rhs_root_post.jsx

@@ -91,24 +91,22 @@ export default class RhsRootPost extends React.Component {
 
         var dropdownContents = [];
 
-        if (!Utils.isMobile()) {
+        dropdownContents.push(
-            dropdownContents.push(
+            <li
-                <li
+                key='rhs-root-permalink'
-                    key='rhs-root-permalink'
+                role='presentation'
-                    role='presentation'
+            >
+                <a
+                    href='#'
+                    onClick={this.handlePermalink}
                 >
-                    <a
+                    <FormattedMessage
-                        href='#'
+                        id='rhs_root.permalink'
-                        onClick={this.handlePermalink}
+                        defaultMessage='Permalink'
-                    >
+                    />
-                        <FormattedMessage
+                </a>
-                            id='rhs_root.permalink'
+            </li>
-                            defaultMessage='Permalink'
+        );
-                        />
-                    </a>
-                </li>
-            );
-        }
 
         if (isOwner && !isSystemMessage) {
             dropdownContents.push(

webapp/components/search_bar.jsx

@@ -141,6 +141,8 @@ export default class SearchBar extends React.Component {
     handleSubmit(e) {
         e.preventDefault();
         this.performSearch(this.state.searchTerm.trim());
+        $(ReactDOM.findDOMNode(this.refs.search)).find('input').blur();
+        this.clearFocus();
     }
 
     render() {

webapp/components/user_settings/custom_theme_chooser.jsx

@@ -119,11 +119,13 @@ class CustomThemeChooser extends React.Component {
         });
         $('.color-picker').on('changeColor', this.onPickerChange);
         $('.group--code').on('change', this.onCodeThemeChange);
+        document.addEventListener('click', this.closeColorpicker);
     }
 
     componentWillUnmount() {
         $('.color-picker').off('changeColor', this.onPickerChange);
         $('.group--code').off('change', this.onCodeThemeChange);
+        document.removeEventListener('click', this.closeColorpicker);
     }
 
     componentDidUpdate() {
@@ -136,6 +138,12 @@ class CustomThemeChooser extends React.Component {
         });
     }
 
+    closeColorpicker(e) {
+        if (!$(e.target).closest('.color-picker').length && Utils.isMobile()) {
+            $('.color-picker').colorpicker('hide');
+        }
+    }
+
     onPickerChange(e) {
         const inputBox = e.target.childNodes[0];
         if (document.activeElement === inputBox && inputBox.value.length !== HEX_CODE_LENGTH) {

webapp/sass/components/_dropdown.scss

@@ -4,6 +4,7 @@
     border-radius: $border-rad;
 
     &.colorpicker {
+        min-width: 125px;
         z-index: 2500;
     }
 

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,10 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .scrollbar--view {
+        margin-right: 0 !important;
+    }
+
     #post-list {
         .post-list-holder-by-time {
             .modal-open & {
@@ -64,11 +68,11 @@
     .post {
         .post__dropdown {
             display: inline-block;
-            height: 20px;
+            height: 28px;
-            line-height: 9px;
+            line-height: 21px;
             text-align: center;
             text-decoration: none;
-            width: 20px;
+            width: 28px;
 
             &:after {
                 content: '...';
@@ -393,6 +397,18 @@
                         display: block;
 
                         .settings-content {
+                            .appearance-section {
+                                .theme-elements {
+                                    .element {
+                                        margin-right: 10px;
+
+                                        &:nth-child(2n) {
+                                            margin-right: 10px;
+                                        }
+                                    }
+                                }
+                            }
+
                             &.minimize-settings {
                                 display: block;
                             }

webapp/sass/routes/_admin-console.scss

@@ -266,6 +266,7 @@
     z-index: 5;
 
     .dropdown-menu {
+        max-width: 200px;
         min-width: 200px;
     }