From 77f52da25512dc6ab80635efaa6c22a2887cd5e2 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 4 Aug 2015 19:12:20 +0500 Subject: UI Improvements --- web/react/components/channel_header.jsx | 2 +- web/react/components/mention_list.jsx | 12 ++++-- web/react/components/post_list.jsx | 14 +++++- web/react/components/user_profile.jsx | 2 +- web/sass-files/sass/partials/_base.scss | 4 ++ web/sass-files/sass/partials/_files.scss | 61 ++++++++++++++------------- web/sass-files/sass/partials/_headers.scss | 14 ++++++ web/sass-files/sass/partials/_modal.scss | 9 ++-- web/sass-files/sass/partials/_navbar.scss | 1 + web/sass-files/sass/partials/_popover.scss | 7 +++ web/sass-files/sass/partials/_responsive.scss | 10 +++++ web/templates/channel.html | 4 +- 12 files changed, 99 insertions(+), 41 deletions(-) (limited to 'web') diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 76dbe370b..1702175d6 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -59,7 +59,7 @@ var PopoverListMembers = React.createClass({ return (
-
+
{count}
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 71a6083d2..829462456 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -20,6 +20,10 @@ module.exports = React.createClass({ PostStore.addMentionDataChangeListener(this._onChange); var self = this; + $('.post-right__scroll').scroll(function(){ + self.forceUpdate(); + }); + $('body').on('keydown.mentionlist', '#'+this.props.id, function(e) { if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { @@ -32,7 +36,7 @@ module.exports = React.createClass({ e.preventDefault(); var tempSelectedMention = -1; - if (e.which === 38) { + if (e.which === 38) { if (self.getSelection(self.state.selectedMention - 1)) self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username }); else { @@ -106,13 +110,13 @@ module.exports = React.createClass({ this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username }); }, getSelection: function(listId) { - if (!this.refs['mention' + listId]) + if (!this.refs['mention' + listId]) return false; else return true; }, addCurrentMention: function() { - if (!this.getSelection(this.state.selectedMention)) + if (!this.getSelection(this.state.selectedMention)) this.addFirstMention(); else this.refs['mention' + this.state.selectedMention].handleClick(); @@ -132,7 +136,7 @@ module.exports = React.createClass({ scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom else if (direction === "down" && this.state.selectedMention === 0) scrollAmount = 0; - else if (direction === "up") + else if (direction === "up") scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5); else if (direction === "down") scrollAmount = "+=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 3f59d5843..0b19d774c 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -37,15 +37,25 @@ module.exports = React.createClass({ componentDidMount: function() { var user = UserStore.getCurrentUser(); if (user.props && user.props.theme) { - utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;'); utils.changeCss('div.theme', 'background-color:'+user.props.theme+';'); utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';'); - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';'); 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('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}'); } + if (user.props.theme != "#000000" && user.props.theme != "#585858"){ + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';'); + utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;'); + } + else if (user.props.theme == "#000000"){ + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';'); + $('.team__header').addClass('theme--black'); + } + else if (user.props.theme == "#585858"){ + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';'); + $('.team__header').addClass('theme--gray'); + } PostStore.addChangeListener(this._onChange); ChannelStore.addChangeListener(this._onChange); diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index 65f025919..f7e1a6257 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -57,7 +57,7 @@ module.exports = React.createClass({ if (!config.ShowEmail) { data_content += "
Email not shared
"; } else { - data_content += "
" + this.state.profile.email + "
"; + data_content += "
"; } return ( diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 52659521d..11a04964d 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -61,6 +61,10 @@ div.theme { } } +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + cursor: auto; +} + .form-group { &.form-group--small { margin-bottom: 10px; diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index ddc5e98bb..6b27753bd 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -4,7 +4,8 @@ max-height: 110px; height: 110px; white-space: nowrap; - overflow: auto; + overflow-x: auto; + overflow-y: hidden; .preview-div { display: inline-block; width: 120px; @@ -28,9 +29,9 @@ } } .preview-img { - display: block; - height: auto; - max-width: 100%; + display: block; + height: auto; + max-width: 100%; } .remove-preview { position: absolute; @@ -130,15 +131,17 @@ background-color: #FFF; background-repeat: no-repeat; &.small { - background-position: center; + background-position: center; } &.normal { - background-position: top left; + background-position: top left; } } .post-image__thumbnail { width: 50%; height: 100%; + cursor: zoom-in; + cursor: -webkit-zoom-in; } .post-image__details { width: 50%; @@ -165,34 +168,34 @@ } .file-details__container { - @include display-flex; - display: -ms-flexbox; + @include display-flex; + display: -ms-flexbox; - .file-details { - width: 320px; - height: 270px; - padding: 14px; - text-align: left; - vertical-align: top; + .file-details { + width: 320px; + height: 270px; + padding: 14px; + text-align: left; + vertical-align: top; - .file-details__name { - font-size: 16px; - } - .file-details__info { - color: grey; - } + .file-details__name { + font-size: 16px; } - .file-details__preview { - width: 320px; - height: 270px; - border-right: 1px solid #ddd; - vertical-align: center; + .file-details__info { + color: grey; + } + } + .file-details__preview { + width: 320px; + height: 270px; + border-right: 1px solid #ddd; + vertical-align: center; // helper to center the image icon in the preview window .file-details__preview-helper { - height: 100%; - display: inline-block; - vertical-align: middle; + height: 100%; + display: inline-block; + vertical-align: middle; } + } } -} diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index fb37c43eb..da648a170 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -110,6 +110,20 @@ } } } + &.theme--black { + &:hover { + &:before { + background: rgba(white, 0.2); + } + } + } + &.theme--gray { + &:hover { + &:before { + background: rgba(white, 0.1); + } + } + } a { color: #fff; } diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index f359037c5..014f834ed 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -15,10 +15,13 @@ } .remove__member { float: right; - color: #E56565; + color: #999; font-size: 20px; line-height: 0; padding: 6px; + &:hover { + color: #E56565; + } } .modal-dialog { max-width: 95%; @@ -151,10 +154,9 @@ height: 100%; margin: 0 auto; .image-wrapper { - background: #FFF; position: relative; max-width: 90%; - min-height: 50px; + min-height: 100px; min-width: 320px; @include border-radius(3px); display: table; @@ -182,6 +184,7 @@ z-index: 9999; } > a { + background: #FFF; display: table-cell; vertical-align: middle; } diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss index 905907d84..2e78a8728 100644 --- a/web/sass-files/sass/partials/_navbar.scss +++ b/web/sass-files/sass/partials/_navbar.scss @@ -19,6 +19,7 @@ } } .navbar-toggle { + width: 43px; float: left; border-color: transparent; border-radius: 0; diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index fa1b44841..5008331b4 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -6,4 +6,11 @@ .user-popover__image { margin: 0 0 10px; @include border-radius(128px); +} + +.user-popover__email { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + display: block; } \ No newline at end of file diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index e3f140413..47b2b6bd7 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -229,6 +229,16 @@ } } +@media screen and (max-height: 640px) { + .signup-team__container { + padding: 30px 0; + margin-bottom: 30px; + font-size: 0.9em; + .signup-team__name { + font-size: 2em; + } + } +} @media screen and (max-width: 768px) { .date-separator, .new-separator { &.hovered--after { diff --git a/web/templates/channel.html b/web/templates/channel.html index 6325069ee..da6fed97d 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -49,7 +49,9 @@
-- cgit v1.2.3-1-g7c22 From fe75f1c61c2cfc0484108f984ad39e1b1dc38bec Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 4 Aug 2015 19:15:55 +0500 Subject: Adding bootstrap tooltip for channel members --- web/react/components/channel_header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 1702175d6..dc26be9d4 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -59,7 +59,7 @@ var PopoverListMembers = React.createClass({ return (
-
+
{count}
-- cgit v1.2.3-1-g7c22 From ca7eb5d53c55b788e381983ca76aebdfc6c039ae Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 4 Aug 2015 22:11:11 +0500 Subject: Fixing scrolling of mention box in RHS --- web/react/components/mention_list.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 829462456..09313bbbd 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -21,7 +21,9 @@ module.exports = React.createClass({ var self = this; $('.post-right__scroll').scroll(function(){ - self.forceUpdate(); + if($('.mentions--top').length){ + $('#reply_mention_tab .mentions--top').css({ bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top }); + } }); $('body').on('keydown.mentionlist', '#'+this.props.id, -- cgit v1.2.3-1-g7c22 From 2d5a181c7d64097df8014a8290be40cddb81ab16 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 4 Aug 2015 23:05:34 +0500 Subject: Updating channel header tooltip placement --- web/react/components/channel_header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index b6182cfa5..a79d3547f 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -67,7 +67,7 @@ var PopoverListMembers = React.createClass({ return (
-
+
{count}
-- cgit v1.2.3-1-g7c22 From d151d430179a6ddf1cfec1261bc6b134dd3aab9e Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 5 Aug 2015 15:56:08 +0500 Subject: Fixing mentions scroll again due to merge conflict --- web/react/components/mention_list.jsx | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index a0f68df98..16c1994e1 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -20,6 +20,13 @@ module.exports = React.createClass({ PostStore.addMentionDataChangeListener(this.onListenerChange); var self = this; + $('.post-right__scroll').scroll(function(){ + console.log('sad'); + if($('.mentions--top').length){ + $('#reply_mention_tab .mentions--top').css({ bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top }); + } + }); + $('body').on('keydown.mentionlist', '#' + this.props.id, function(e) { if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) { -- cgit v1.2.3-1-g7c22 From 9699401d5b1856b3dfa380f468e808a41dbe8b3a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 5 Aug 2015 16:02:53 +0500 Subject: Removing console.log --- web/react/components/mention_list.jsx | 1 - 1 file changed, 1 deletion(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 16c1994e1..5f1bb6d0e 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -21,7 +21,6 @@ module.exports = React.createClass({ var self = this; $('.post-right__scroll').scroll(function(){ - console.log('sad'); if($('.mentions--top').length){ $('#reply_mention_tab .mentions--top').css({ bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top }); } -- cgit v1.2.3-1-g7c22 From 140faa6bb66b3c61771c2cca738a47234ebff0c8 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 5 Aug 2015 21:32:41 +0500 Subject: Fixing style guide stuff in post_list --- web/react/components/post_list.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'web') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 0b19d774c..90a02e791 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -44,15 +44,13 @@ module.exports = React.createClass({ utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}'); } - if (user.props.theme != "#000000" && user.props.theme != "#585858"){ + if (user.props.theme != '#000000' && user.props.theme != '#585858') { utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';'); utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;'); - } - else if (user.props.theme == "#000000"){ + } else if (user.props.theme == '#000000') { utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';'); $('.team__header').addClass('theme--black'); - } - else if (user.props.theme == "#585858"){ + } else if (user.props.theme == '#585858') { utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';'); $('.team__header').addClass('theme--gray'); } -- cgit v1.2.3-1-g7c22 From 331ab2acfc16d5dcfe8ea1be94e5015506b9186b Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 5 Aug 2015 22:29:44 +0500 Subject: Adding tooltip to email in user popover --- web/react/components/user_profile.jsx | 1 + web/sass-files/sass/partials/_base.scss | 6 ++++++ 2 files changed, 7 insertions(+) (limited to 'web') diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index f7e1a6257..5c4d26a23 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -28,6 +28,7 @@ module.exports = React.createClass({ componentDidMount: function() { UserStore.addChangeListener(this._onChange); $("#profile_" + this.uniqueId).popover({placement : 'right', container: 'body', trigger: 'hover', html: true, delay: { "show": 200, "hide": 100 }}); + $('body').tooltip( {selector: '[data-toggle=tooltip]', trigger: 'hover click'} ); }, componentWillUnmount: function() { UserStore.removeChangeListener(this._onChange); diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 11a04964d..78006ff18 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -49,6 +49,12 @@ div.theme { background-color: $primary-color; } +.tooltip { + .tooltip-inner { + word-break: break-word; + } +} + .nopadding { padding: 0; margin: 0; -- cgit v1.2.3-1-g7c22