From f68a8c8de3bbaf0179023e12da89c6f22f5b21a7 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 18 Aug 2015 11:58:15 +0500 Subject: Multiple UI changes --- web/react/components/get_link_modal.jsx | 2 +- web/react/components/post_list.jsx | 3 +++ web/react/components/sidebar.jsx | 2 +- web/react/utils/utils.jsx | 14 ++++++++++++++ web/sass-files/sass/partials/_files.scss | 7 ++++++- web/sass-files/sass/partials/_get-link.scss | 8 ++++---- web/sass-files/sass/partials/_mentions.scss | 2 +- web/sass-files/sass/partials/_post.scss | 6 +++--- web/sass-files/sass/partials/_post_right.scss | 4 ++-- web/sass-files/sass/partials/_sidebar--left.scss | 7 ++++++- 10 files changed, 41 insertions(+), 14 deletions(-) diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index ea22ad0f3..a01b57b26 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -34,7 +34,7 @@ module.exports = React.createClass({ var copyLinkConfirm = null; if (this.state.copiedLink) { - copyLinkConfirm =

Link copied to clipboard.

; + copyLinkConfirm =

Link copied to clipboard.

; } if (currentUser != null) { diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 83f806b79..35d43314b 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -42,6 +42,9 @@ module.exports = React.createClass({ utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';'); utils.changeCss('.mention', 'background: ' + user.props.theme+';'); utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); + utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); + utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); + utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) +';'); utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}'); } if (user.props.theme != '#000000' && user.props.theme != '#585858') { diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 80e3632c7..cf6da7984 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -363,8 +363,8 @@ module.exports = React.createClass({
  • {status} - {badge} {channel.display_name} + {badge}
    • ); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 7591c138f..0de40b40c 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -855,6 +855,20 @@ module.exports.changeColor =function(col, amt) { return (usePound?"#":"") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6); }; +module.exports.changeOpacity = function(oldColor, opacity) { + + var col = oldColor; + if (col[0] === '#') { + col = col.slice(1); + } + + var r = parseInt(col.substring(0, 2), 16); + var g = parseInt(col.substring(2, 4), 16); + var b = parseInt(col.substring(4, 6), 16); + + return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')'; +}; + module.exports.getFullName = function(user) { if (user.first_name && user.last_name) { return user.first_name + " " + user.last_name; diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index ca06d7def..71535d939 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -10,7 +10,7 @@ display: inline-block; width: 120px; height: 100px; - margin: 7px 10px 0 0; + margin: 7px 0 0 5px; vertical-align: top; position: relative; border: 1px solid #DDD; @@ -18,6 +18,9 @@ &:hover .remove-preview:after { @include opacity(1); } + &:first-child { + margin-left: 0; + } .spinner { position:absolute; top:50%; @@ -58,6 +61,8 @@ cursor: pointer; z-index: 5; opacity: inherit; + text-shadow: 0 0px 3px #444; + text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7); } } } diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss index c84befd6a..a723a4c1f 100644 --- a/web/sass-files/sass/partials/_get-link.scss +++ b/web/sass-files/sass/partials/_get-link.scss @@ -1,6 +1,6 @@ .copy-link-confirm { - position: fixed; - color: rgb(153, 230, 153); - top: 84%; - left: 130px; + display: inline-block; + float: left; + padding: 4px 10px; + margin: 3px 0 0 10px; } \ No newline at end of file diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index a8c4dec26..aa893c535 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -55,7 +55,7 @@ font-size: 20px; text-align: center; color: #555; - @include border-radius(3px); + @include border-radius(32px); } .mention-fullname { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 98b17120d..e5fccb930 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -214,9 +214,6 @@ body.ios { .dropdown, .comment-icon__container { @include opacity(1); } - .dropdown-toggle:after { - content: '[...]'; - } } background: #f5f5f5; } @@ -383,6 +380,9 @@ body.ios { display: inline-block; @include opacity(0); } + .dropdown-toggle:after { + content: '[...]'; + } } } .post-profile-time { diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 4cf3e32a1..da5bcbad2 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -11,8 +11,8 @@ .post { &.post--root { - padding: 0 1em 0; - margin: 1em 0; + padding: 1em 1em 0; + margin: 0 0 1em; hr { border-color: #DDD; margin: 1em 0 0 0; diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 5d866715e..74f373aaf 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -26,7 +26,9 @@ .status { position:relative; top:1px; - margin-right: 3px; + margin-right: 6px; + width: 12px; + display: inline-block; .online--icon { fill: #7DBE00; } @@ -79,6 +81,9 @@ line-height: 1.5; border-radius: 0; color: #999; + &.nav-more { + text-decoration: underline; + } &.unread-title { color: #333; font-weight: 600; -- cgit v1.2.3-1-g7c22