From 1fd26d25f291cae2d93bb5aac3448e76a3200646 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 20 Aug 2015 19:22:56 +0500 Subject: Multiple UI Improvements --- web/react/components/channel_header.jsx | 2 +- web/react/components/channel_info_modal.jsx | 2 +- web/react/components/channel_invite_modal.jsx | 2 +- web/react/components/channel_members.jsx | 2 +- web/react/components/channel_notifications.jsx | 2 +- web/react/components/post_list.jsx | 13 +++++++------ web/react/components/removed_from_channel_modal.jsx | 2 +- web/react/components/view_image.jsx | 20 ++++++++++++++++++-- web/sass-files/sass/partials/_modal.scss | 7 +++++++ web/sass-files/sass/partials/_popover.scss | 8 +++++++- web/sass-files/sass/partials/_sidebar--left.scss | 13 +++++++------ 11 files changed, 52 insertions(+), 21 deletions(-) (limited to 'web') diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 90a776791..0254d0e82 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -105,7 +105,7 @@ module.exports = React.createClass({ if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } - $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); + $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover click', html: true, delay: {show: 500, hide: 500}}); }, onSocketChange: function(msg) { if (msg.action === 'new_user') { diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx index 18addb52f..6d999870a 100644 --- a/web/react/components/channel_info_modal.jsx +++ b/web/react/components/channel_info_modal.jsx @@ -32,7 +32,7 @@ module.exports = React.createClass({
-

{channel.display_name}

+

{channel.display_name}

diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index 1b8fe4199..b9ac2bd26 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -114,7 +114,7 @@ module.exports = React.createClass({
-

Add New Members to {this.state.channel_name}

+

Add New Members to {this.state.channel_name}

{ invite_error } diff --git a/web/react/components/channel_members.jsx b/web/react/components/channel_members.jsx index cfb8ed41c..db4bec400 100644 --- a/web/react/components/channel_members.jsx +++ b/web/react/components/channel_members.jsx @@ -126,7 +126,7 @@ module.exports = React.createClass({
-

{this.state.channel_name + " Members"}

+

{this.state.channel_name} Members

Add New Members
diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 38bc91682..56ae7ae4d 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -209,7 +209,7 @@ module.exports = React.createClass({ Close -

{"Notification Preferences for " + this.state.title}

+

Notification Preferences for {this.state.title}

diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 8b60f0251..67a69985f 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -75,6 +75,7 @@ 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 + ';}'); utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); + utils.changeCss('.nav-pills__unread-indicator', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); } if (user.props.theme !== '#000000' && user.props.theme !== '#585858') { @@ -377,8 +378,8 @@ module.exports = React.createClass({

- {'This is the start of your private message history with ' + teammateName + '.'}
- {'Private messages and files shared here are not shown to people outside this area.'} + This is the start of your private message history with {teammateName}.
+ Private messages and files shared here are not shown to people outside this area.

Set a description
@@ -416,9 +417,9 @@ module.exports = React.createClass({

Beginning of {uiName}

- Welcome to {uiName}! + Welcome to {uiName}!

- {'This is the first channel ' + strings.Team + 'mates see when they'} + This is the first channel {strings.Team} mates see when they
sign up - use it for posting updates everyone needs to know.

@@ -434,7 +435,7 @@ module.exports = React.createClass({

Beginning of {uiName}

- {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'} + This is the start of {uiName}, a channel for non-work-related conversations.

Set a description @@ -453,7 +454,7 @@ module.exports = React.createClass({ var createMessage; if (creatorName !== '') { - createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + creatorName + ' on ' + utils.displayDate(channel.create_at) + '.'; + createMessage = (This is the start of the {uiName} {uiType} created by {creatorName} on {utils.displayDate(channel.create_at)}); } else { createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.'; } diff --git a/web/react/components/removed_from_channel_modal.jsx b/web/react/components/removed_from_channel_modal.jsx index a8889a92a..867456734 100644 --- a/web/react/components/removed_from_channel_modal.jsx +++ b/web/react/components/removed_from_channel_modal.jsx @@ -45,7 +45,7 @@ module.exports = React.createClass({
-

Removed from {channelName}

+

Removed from {channelName}

{remover} removed you from {channelName}

diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 2b7f64030..70b0aea71 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -109,6 +109,22 @@ module.exports = React.createClass({ } ); + $(this.refs.previewArrowLeft.getDOMNode()).hover( + function onModalHover() { + $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); + }, function offModalHover() { + $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show'); + } + ); + + $(this.refs.previewArrowRight.getDOMNode()).hover( + function onModalHover() { + $(self.refs.imageFooter.getDOMNode()).addClass('footer--show'); + }, function offModalHover() { + $(self.refs.imageFooter.getDOMNode()).removeClass('footer--show'); + } + ); + $(window).on('keyup', this.handleKeyPress); // keep track of whether or not this component is mounted so we can safely set the state asynchronously @@ -252,13 +268,13 @@ module.exports = React.createClass({ var rightArrow = ''; if (this.props.filenames.length > 1) { leftArrow = ( - + ); rightArrow = ( - + ); diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 014f834ed..8462701c9 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -50,6 +50,13 @@ @include clearfix; .modal-title { float: left; + font-size: 16px; + line-height: 27px; + color: #f4f4f4; + .name { + font-weight: 600; + color: #fff; + } } .modal-action { padding: 0; diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index 5008331b4..126d239ec 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -1,3 +1,8 @@ +.channel-header__info .popover-content { + max-height: 250px; + overflow: auto; +} + .user-popover { cursor: pointer; display: inline-block; @@ -13,4 +18,5 @@ overflow: hidden; text-overflow: ellipsis; display: block; -} \ No newline at end of file +} + diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 6d9f2ad8b..22b7426b1 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -38,24 +38,25 @@ height: 100%; position: relative; overflow: auto; - } .nav-pills__unread-indicator { position: absolute; left: 0; right: 0; - width: 70%; - background-color: darken($primary-color, 5%); - color: white; + width: 72%; + color: #777; + background: #DCF0FF; + @include border-radius(50px); margin: 0 auto; - padding: 2px; + padding: 3px 0 4px; + font-size: 13.5px; text-align: center; z-index: 1; } .nav-pills__unread-indicator-top { - top: 56px; + top: 66px; } .nav-pills__unread-indicator-bottom { bottom: 0px; -- cgit v1.2.3-1-g7c22