From 3f06d763e807a315e2c6329300bd068bea40f28c Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 23 Jul 2015 12:06:56 +0500 Subject: UI Fixes --- web/react/components/navbar.jsx | 2 +- web/sass-files/sass/partials/_headers.scss | 2 +- web/sass-files/sass/partials/_navbar.scss | 3 ++- web/sass-files/sass/partials/_search.scss | 3 ++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 500fabb0e..fe0d498bb 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -191,7 +191,7 @@ module.exports = React.createClass({ ; var right_sidebar_collapse_button= currentId == null ? null : ; diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 4351e167b..92b24daaa 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -119,7 +119,7 @@ } .header__info { color: #fff; - padding-left: 3px + padding-left: 6px; } .team__name, .user__name { display: block; diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss index 6d8f11ce3..e5e67a9e0 100644 --- a/web/sass-files/sass/partials/_navbar.scss +++ b/web/sass-files/sass/partials/_navbar.scss @@ -24,9 +24,10 @@ border-radius: 0; margin: 0; padding: 0 10px; - line-height: 50px; + line-height: 53px; height: 50px; z-index: 5; + fill: #fff; .icon-bar { background: #fff; width: 21px; diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index d4a4da243..794358320 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -5,9 +5,10 @@ width: auto; height: auto; position: absolute; - top: 17px; + top: 1px; right: 15px; cursor: pointer; + padding: 1em 0; z-index: 5; display: none; } -- cgit v1.2.3-1-g7c22 From 67ee23e4948491e311e09129aef4fea0329cd54d Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 23 Jul 2015 14:59:43 +0500 Subject: Placing SVGs into constants.jsx --- web/react/components/channel_header.jsx | 2 +- web/react/components/navbar.jsx | 2 +- web/react/components/post_info.jsx | 4 +++- web/react/components/sidebar_header.jsx | 4 +++- web/react/utils/constants.jsx | 4 +++- 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 30435dc08..7a129f200 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -205,7 +205,7 @@ module.exports = React.createClass({
- "}} /> + diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index fe0d498bb..6d23c0d9b 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -191,7 +191,7 @@ module.exports = React.createClass({ ; var right_sidebar_collapse_button= currentId == null ? null : ; diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index d6422fe3a..8eaaf4e8c 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -4,6 +4,8 @@ var UserStore = require('../stores/user_store.jsx'); var utils = require('../utils/utils.jsx'); +var Constants = require('../utils/constants.jsx'); + module.exports = React.createClass({ getInitialState: function() { return { }; @@ -21,7 +23,7 @@ module.exports = React.createClass({ var comments = ""; var lastCommentClass = this.props.isLastComment ? " comment-icon__container__show" : " comment-icon__container__hide"; if (this.props.commentCount >= 1) { - comments = "}} />{this.props.commentCount}; + comments = {this.props.commentCount}; } return ( diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 859e425a6..5b442aeac 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -6,6 +6,8 @@ var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); +var Constants = require('../utils/constants.jsx'); + function getStateFromStores() { return { teams: UserStore.getTeams() }; } @@ -75,7 +77,7 @@ var NavbarDropdown = React.createClass({
    • Account Settings
      • diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 2249da0d3..77ce19530 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -82,5 +82,7 @@ module.exports = { MONTHS: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], MAX_DMS: 10, ONLINE_ICON_SVG: "", - OFFLINE_ICON_SVG: "" + OFFLINE_ICON_SVG: "", + MENU_ICON: " ", + COMMENT_ICON: " " }; -- cgit v1.2.3-1-g7c22 From d57ee9c689e6c0641f55185126aeb4d8e4d9d596 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 23 Jul 2015 21:49:54 +0500 Subject: Adding hover effect for LHS menu icon --- web/sass-files/sass/partials/_headers.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 92b24daaa..e39626d05 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -96,6 +96,10 @@ right: 22px; .dropdown-toggle { padding: 10px; + @include opacity(0.8); + &:hover { + @include opacity(1); + } } .dropdown-menu { li a { @@ -119,7 +123,7 @@ } .header__info { color: #fff; - padding-left: 6px; + padding-left: 6px; } .team__name, .user__name { display: block; -- cgit v1.2.3-1-g7c22 From e03c88262cd694d14e671fd9d01245e1a0c4a6f3 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 23 Jul 2015 21:52:51 +0500 Subject: Adjusting padding for LHS header info --- web/sass-files/sass/partials/_headers.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index e39626d05..687e330a6 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -123,7 +123,7 @@ } .header__info { color: #fff; - padding-left: 6px; + padding-left: 4px; } .team__name, .user__name { display: block; -- cgit v1.2.3-1-g7c22 From 6d7f23915fd2852716a6014470acc0df2c8520fd Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 23 Jul 2015 22:05:42 +0500 Subject: UI changes for search bar in the RHS for Mobile Web --- web/sass-files/sass/partials/_responsive.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 3a2768a47..2d78cf242 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -459,14 +459,15 @@ border-radius: 0; padding: 0; border-bottom: 1px solid #FFF; - border-bottom: 1px solid rgba(#fff, 0.6); - @include input-placeholder { - color: rgba(#fff, 0.6); + border-bottom: 1px solid rgba(#fff, 0.4); + &:focus { + border-bottom: 1px solid rgba(#fff, 0.8); } } input[type=text] { @include input-placeholder { color: #fff; + color: rgba(#fff, 0.6); } } } -- cgit v1.2.3-1-g7c22