From f51cc73aaf0da4973e13821a5201cd0e05e1e552 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 6 Jul 2015 23:18:23 +0500 Subject: MM-1461 - Updating Mattermost UI --- web/react/components/post_list.jsx | 2 +- web/react/components/view_image.jsx | 2 +- web/sass-files/sass/partials/_modal.scss | 6 +- web/sass-files/sass/partials/_post.scss | 41 ++++++++---- web/sass-files/sass/partials/_post_right.scss | 4 +- web/sass-files/sass/partials/_responsive.scss | 76 ++++++++++++++--------- web/sass-files/sass/partials/_sidebar--right.scss | 4 ++ 7 files changed, 92 insertions(+), 43 deletions(-) diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 169efc766..fc5157ce6 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -123,7 +123,7 @@ module.exports = React.createClass({ $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); - $('body').on('mouseenter mouseleave', '.post', function(ev){ + $('body').on('mouseenter mouseleave', '.post:not(.post--comment.same--root)', function(ev){ if(ev.type === 'mouseenter'){ $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before'); diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index c573e9dbb..38f439946 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -161,7 +161,7 @@ module.exports = React.createClass({
{ config.AllowPublicLink ?
- Get Public Link + Get Public Link |
: "" } diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 971ed0935..637f908ca 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -2,6 +2,7 @@ padding: 20px 15px; } .modal { + width: 100%; &.image_modal { .modal-backdrop.in { @include opacity(0.7); @@ -148,7 +149,7 @@ .image-wrapper { background: #FFF; position: relative; - max-width: 80%; + max-width: 90%; min-width: 280px; @include border-radius(3px); display: table; @@ -261,6 +262,9 @@ color:white; margin-left:5px; } + .public-link { + margin-right: 5px; + } } } } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 769cb1091..e35979b64 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -166,7 +166,7 @@ body.ios { color: #999; @include single-transition(all, 0.15s); font-size: 16px; - padding: 9px; + padding: 7px 9px 6px; &:hover, &:active { color: #444; box-shadow: none; @@ -192,7 +192,7 @@ body.ios { .post { word-wrap: break-word; - padding: 0.4em 1em; + padding: 8px 1em; position: relative; max-width: 100%; @include legacy-pie-clearfix; @@ -204,19 +204,37 @@ body.ios { } background: #f6f6f6; } + &.current--user { + .post-body { + @include border-radius(4px); + background: #f5f5f5; + } + &:hover { + .post-body { + background: #fff; + } + } + } &.post--comment { &.other--root { .post-comment { border-left: 4px solid #EEE; - margin-left: 30px; - padding: 2px 0 2px 10px; + padding: 4px 0 6px 10px; + background: #F5F5F5; + margin: 0 0 0 30px; + @include border-radius(0 4px 4px 0); + } + .post-body { + background: transparent; + margin: 0; + padding: 1px 0px; + } + &:hover { + background: #f5f5f5; + .post-comment { + background: #fff; + } } - } - } - &.current--user { - .post-body { - @include border-radius(0 4px 4px 0); - background: #f5f5f5; } } &.same--root { @@ -224,6 +242,7 @@ body.ios { @include opacity(0); } div.post-profile-img__container { + height: 1px; .post-profile-img { visibility: hidden; } @@ -260,6 +279,7 @@ body.ios { white-space: pre-wrap; } .comment-icon__container { + margin-left: 7px; fill: $primary-color; .comment-icon { display: inline-block; @@ -346,7 +366,6 @@ body.ios { } .dropdown { min-width: 18px; - margin-right: 7px; display: inline-block; @include opacity(0); } diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 972aef29b..0d3e75689 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -11,7 +11,8 @@ .post { &.post--root { - padding: 1em; + padding: 1em 1em 0; + margin: 1em 0; hr { border-color: #DDD; margin: 1em 0 0 0; @@ -20,6 +21,7 @@ } .post-create__container { + margin-top: 1em; .custom-textarea { min-height: 100px; } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 0037879cf..e2c89a6f2 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -2,13 +2,6 @@ .inner__wrap { &.move--left { .post { - &.post--comment { - &.other--root { - .post-comment { - margin-left: -7px; - } - } - } &.same--root { margin-left: 60px; padding-left: 10px; @@ -24,13 +17,24 @@ .post-body { width: 736px; border: none; - margin: 0; + margin: 3px 0 0; + } + } + &.post--comment { + &.other--root { + .post-comment { + margin-left: 0; + } + } + &.same--root { + margin-top: 10px; + margin-bottom: 10px; } } .post-body { float: none; width: 750px; - margin: 0; + margin: 3px 0 0; } .post__content { width: 920px; @@ -79,18 +83,10 @@ } } .post { - &.post--comment { - &.other--root { - .post-comment { - margin-left: -7px; - } - } - } &.same--root { margin-left: 60px; padding-left: 10px; border-left: 4px solid #EEE; - margin-bottom: 10px; div.post-profile-img__container { .post-profile-img { display: none; @@ -102,7 +98,18 @@ .post-body { width: 736px; border: none; - margin: 0; + margin: 3px 0 0; + } + } + &.post--comment { + &.other--root { + .post-comment { + margin-left: 0; + } + } + &.same--root { + margin-top: 5px; + margin-bottom: 5px; } } .post__content { @@ -137,7 +144,7 @@ } } .post-body { - margin: 0; + margin: 3px 0 0; float: none; width: 750px; } @@ -166,16 +173,9 @@ @media screen and (max-width: 960px) { .post { - &:hover { - .post-header .post-header-col.post-header__reply { - .comment-icon__container__hide { - @include opacity(0); - } - } - } .post-header .post-header-col.post-header__reply { .comment-icon__container__hide { - @include opacity(0); + display: none; } .dropdown { @include opacity(1); @@ -208,7 +208,7 @@ @media screen and (max-width: 768px) { #post-list { - .date-seperator { + .date-seperator, .new-separator { &.hovered--after { background: none; } @@ -224,6 +224,26 @@ &:hover { background: none; } + &.current--user { + &:hover { + .post-body { + background: #f5f5f5; + } + } + } + &.post--comment { + &.other--root { + &:hover { + background: none; + .post-body { + background: none; + .post-comment { + background: #f5f5f5; + } + } + } + } + } } .signup-team__container { padding: 30px 0; diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index d6000a515..7a91caec9 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -23,8 +23,12 @@ } } } + .post-body { + margin: 3px 0 0; + } } .post-create__container { + margin-top: 10px; .post-create-footer { padding-top: 10px; } -- cgit v1.2.3-1-g7c22