Add reaction picker (#5904)

2017-04-01 17:00:30 -04:00
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,5 +1,16 @@
@charset "UTF-8";

+.reacticon {
+    display: inline-block;
+    fill: inherit;
+    opacity: .7;
+    position: relative;
+    top: 2px;
+    vertical-align: middle;
+    visibility: hidden;
+
+}
+
 .emoticon {
    background-position: 50% 50%;
    background-repeat: no-repeat;
@@ -45,6 +56,51 @@
    }
 }

+.emoji-picker-react-rhs-comment {
+    position: absolute;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+    top: 21px;
+    right:59px;
+    z-index: 100;
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}
+
+.emoji-picker-react {
+    position: absolute;
+    width: 278px;
+    border: 1px solid;
+    min-height: 298px;
+    border-radius: 3px;
+    top: 42px;
+    right:59px;
+    z-index: 100;
+    .emoji-picker__search-container {
+        position: relative;
+
+        .emoji-picker__search-icon {
+            padding-left: 6px;
+            padding-top: 6px;
+            position: absolute;
+            font-size: 13px;
+        }
+
+
+    }
+}


 .emoji-picker-bottom {
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -64,14 +64,15 @@

        .btn {
            margin-bottom: 10px;
-            
+
            &.disabled {
                background: grey !important;
                border-color: transparent !important;
            }
        }

-        .custom-textarea {
+        .custom-textarea,
+        .custom-textarea-emoji {
            min-height: 100px;
        }

@@ -150,8 +151,8 @@
    overflow: auto;
    position: relative;
    padding-top: 10px;
-    min-height: 429px;
-    
+    min-height: 700px;
+
    .file-preview__container {
        margin-top: 5px;
    }
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -360,233 +360,271 @@

 .post-create__container {
    label {
-       font-weight: normal;
-    }
-    .custom-textarea {
-        overflow: hidden;
-    }
+     font-weight: normal;
+ }
+ .custom-textarea {
+    overflow: hidden;
+}

-    form {
-        margin: 0 auto;
-        padding: .5em 15px 0;
-        width: 100%;
-    }
-    #reply_textbox.custom-textarea-emoji{
-        bottom: 0;
-        max-height: 162px !important;
-        padding-right: 60px;
-        padding-top: 6px;
-        resize: none;
+form {
+    margin: 0 auto;
+    padding: .5em 15px 0;
+    width: 100%;
+}
+#reply_textbox.custom-textarea-emoji{
+    bottom: 0;
+    max-height: 162px !important;
+    padding-right: 60px;
+    padding-top: 6px;
+    resize: none;


-    }
-    .center {
-        max-width: 1028px;
-    }

-    .post-create {
-        &.scroll {
-            .btn-file {
-                right: 10px;
-            }
+}
+.center {
+    max-width: 1028px;
+}

-            .custom-textarea {
-                -ms-overflow-style: auto;
-                overflow: auto;
-                padding-right: 43px;
-                resize: none;
-            }
-
-            #post_textbox-reference.custom-textarea-emoji {
-                padding-right: 43px;
-                resize: none;
-            }
-
-
-            #reply_textbox.custom-textarea-emoji {
-                padding-right: 60px;
-                resize: none;
-
-            }
-
-            #post_textbox.custom-textarea-emoji {
-                padding-right: 60px;
-                resize: none;
-
-            }
-        }
-    }
-
-    .post-create-body {
-        padding: 0 0 2px;
-        position: relative;
-
-        .post-body__cell {
-            position: relative;
-            vertical-align: top;
-        }
-
-        .send-button {
-            @include single-transition(all, .15s);
-            cursor: pointer;
-            display: none;
-            font-size: 18px;
-            height: 37px;
-            line-height: 37px;
-            padding-right: 4px;
-            text-align: center;
-            vertical-align: bottom;
-            width: 45px;
-
-            &:active {
-                @include opacity(.75);
-            }
-
-            &.disabled {
-                color: grey;
-            }
+.post-create {
+    &.scroll {
+        .btn-file {
+            right: 10px;
        }

        .custom-textarea {
-            bottom: 0;
-            max-height: 162px !important;
-            padding-right: 35px;
-            padding-top: 8px;
+            -ms-overflow-style: auto;
+            overflow: auto;
+            padding-right: 43px;
            resize: none;
-
        }

        #post_textbox-reference.custom-textarea-emoji {
-            bottom: 0;
-            max-height: 162px !important;
-            padding-right: 35px;
-            padding-top: 8px;
+            padding-right: 43px;
            resize: none;
-
        }


+
        #post_textbox.custom-textarea-emoji {
-            bottom: 0;
-            max-height: 162px !important;
            padding-right: 60px;
-            padding-top: 8px;
            resize: none;

        }
-        .textarea-div {
-            line-height: 1.5;
-            max-height: 163px !important;
-            overflow: auto;
-            padding-right: 30px;
-            padding-top: 8px;
+    }
+}
+
+.post-create-body {
+    padding: 0 0 2px;
+    position: relative;
+
+    .post-body__cell {
+        position: relative;
+        vertical-align: top;
+    }
+
+    .send-button {
+        @include single-transition(all, .15s);
+        cursor: pointer;
+        display: none;
+        font-size: 18px;
+        height: 37px;
+        line-height: 37px;
+        padding-right: 4px;
+        text-align: center;
+        vertical-align: bottom;
+        width: 45px;
+
+        &:active {
+            @include opacity(.75);
        }

-        .btn-file {
-            @include single-transition(all, .15s);
-            font-size: 16px;
-            padding: 8px 9px 4px;
-            position: absolute;
-            right: 0;
-            top: 0;
-            z-index: 5;
+        &.disabled {
+            color: grey;
+        }
+    }

-            svg {
-                height: 18px;
-                width: 18px;
-            }
+    .custom-textarea {
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 35px;
+        padding-top: 8px;
+        resize: none;
+
+    }
+
+    #post_textbox-reference.custom-textarea-emoji {
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 35px;
+        padding-top: 8px;
+        resize: none;
+
+    }
+
+
+    #post_textbox.custom-textarea-emoji {
+        bottom: 0;
+        max-height: 162px !important;
+        padding-right: 60px;
+        padding-top: 8px;
+        resize: none;
+
+    }
+    .textarea-div {
+        line-height: 1.5;
+        max-height: 163px !important;
+        overflow: auto;
+        padding-right: 30px;
+        padding-top: 8px;
+    }
+
+    .btn-file {
+        @include single-transition(all, .15s);
+        font-size: 16px;
+        padding: 8px 9px 4px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 5;
+
+        svg {
+            height: 18px;
+            width: 18px;
+        }
+
+        &:hover,
+        &:active {
+            box-shadow: none;
+        }
+
+        &.btn-file__disabled {
+            @include opacity(.1);

            &:hover,
            &:active {
-                box-shadow: none;
-            }
-
-            &.btn-file__disabled {
                @include opacity(.1);
-
-                &:hover,
-                &:active {
-                    @include opacity(.1);
-                }
-            }
-
-            .icon--attachment {
-                @include opacity(.5);
-                display: inline-block;
-                position: relative;
-                vertical-align: top;
-
-                input {
-                    cursor: pointer;
-                    direction: ltr;
-                    filter: alpha(opacity=0);
-                    font-size: 23px;
-                    height: 100%;
-                    margin: 0;
-                    opacity: 0;
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                    width: 100%;
-                }
-
-                &:hover {
-                    @include opacity(.9);
-                }
            }
        }

-
-        .icon--emoji-picker {
+        .icon--attachment {
            @include opacity(.5);
-            @include single-transition(all, .15s);
-            cursor: pointer;
-            font-size: 19px;
-            margin-left: 7px;
+            display: inline-block;
            position: relative;
            vertical-align: top;

-            &:hover,
-            &:active {
+            input {
+                cursor: pointer;
+                direction: ltr;
+                filter: alpha(opacity=0);
+                font-size: 23px;
+                height: 100%;
+                margin: 0;
+                opacity: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100%;
+            }
+
+            &:hover {
                @include opacity(.9);
-                box-shadow: none;
            }
        }
+    }

-        textarea {
+
+    .icon--emoji-picker {
+        @include opacity(.5);
+        @include single-transition(all, .15s);
+        cursor: pointer;
+        font-size: 19px;
+        margin-left: 7px;
+        position: relative;
+        vertical-align: top;
+
+        &:hover,
+        &:active {
+            @include opacity(.9);
+            box-shadow: none;
+        }
+
+        .icon--attachment {
+            @include opacity(.5);
+            display: inline-block;
+            position: relative;
+            vertical-align: top;
+
+            input {
+                cursor: pointer;
+                direction: ltr;
+                filter: alpha(opacity=0);
+                font-size: 23px;
+                height: 100%;
+                margin: 0;
+                opacity: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100%;
+            }
+
+            &:hover {
+                @include opacity(.9);
+            }
+        }
+    }
+
+
+    .icon--emoji-picker {
+        @include opacity(.5);
+        @include single-transition(all, .15s);
+        cursor: pointer;
+        font-size: 19px;
+        margin-left: 7px;
+        position: relative;
+        vertical-align: top;
+
+        &:hover,
+        &:active {
+            @include opacity(.9);
            box-shadow: none;
        }
    }

-    .post-create-footer {
-        @include clearfix;
-        font-size: 13px;
-        padding: 3px 0 0;
-        position: relative;
-
-        .post-error {
-            @include opacity(.55);
-            display: inline-block;
-            font-size: .85em;
-            font-weight: normal;
-            margin-bottom: 0;
-            position: absolute;
-            top: 4px;
-        }
+    textarea {
+        box-shadow: none;
    }
+}

-    .msg-typing {
-        @include opacity(.7);
-        display: block;
-        font-size: .95em;
-        height: 20px;
-        margin-bottom: 5px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+.post-create-footer {
+    @include clearfix;
+    font-size: 13px;
+    padding: 3px 0 0;
+    position: relative;
+
+    .post-error {
+        @include opacity(.55);
+        display: inline-block;
+        font-size: .85em;
+        font-weight: normal;
+        margin-bottom: 0;
+        position: absolute;
+        top: 4px;
    }
 }

+.msg-typing {
+    @include opacity(.7);
+    display: block;
+    font-size: .95em;
+    height: 20px;
+    margin-bottom: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+}
+
 .post-list__table {
    display: table;
    height: 100%;
@@ -619,16 +657,14 @@
            .col__reply {
                min-width: 0;
            }
-
-            .dropdown {
-                margin-right: 0;
-            }
        }
    }

    &:hover {
        .dropdown,
        .comment-icon__container,
+        .reacticon,
+        .reacticon__container,
        .flag-icon__container,
        .post__reply,
        .post__remove {
@@ -1100,8 +1136,8 @@

    .dropdown {
        display: inline-block;
-        margin-right: 5px;
        top: -1px;
+        vertical-align: middle;
        visibility: hidden;

        .dropdown-menu {
@@ -1122,6 +1158,8 @@
    }

    .post__dropdown {
+        vertical-align: middle;
+
        &:after {
            content: '[...]';
            position: relative;
@@ -1249,6 +1287,10 @@

        .post-reaction-list {
            min-height: 30px;
+
+            &:empty {
+                display: none;
+            }
        }

        .post-reaction {
@@ -1381,6 +1423,8 @@
    .comment-icon__container {
        display: inline-block;
        fill: $primary-color;
+        position: relative;
+        top: 1px;
        visibility: hidden;

        &:focus {
@@ -1396,12 +1440,17 @@
            width: 17px;
        }

+        .comment-count {
+            margin-left: 2px;
+        }
+
        .comment-icon {
            display: inline-block;
            fill: inherit;
-            margin-right: 3px;
+            margin: 0 1px 0 5px;
            position: relative;
-            top: 2px;
+            top: 1px;
+            vertical-align: top;
        }

        path {
@@ -1409,6 +1458,15 @@
        }
    }

+    .reacticon__container {
+        display: inline-block;
+        fill: $primary-color;
+        font-size: 16px;
+        margin-left: 5px;
+        vertical-align: top;
+        visibility: hidden;
+    }
+
    .flag-icon__container {
        display: inline-block;
        font-size: 12px;
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -236,6 +236,10 @@
            }
        }

+        .reacticon__container {
+            display: none;
+        }
+
        .post__dropdown {
            display: inline-block;
            height: 28px;