diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2015-10-14 09:02:05 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2015-10-14 09:02:05 -0400 |
commit | 962a5d8beb8b0eb634b1bff9258b209142041dc9 (patch) | |
tree | 64e636b204f2845349893d659c29117c762d8b16 /web | |
parent | cdbe6342bb018e16d6eb3f04c0c6c8457805e61a (diff) | |
parent | 99f243b44443babe3fd332538d2b102218834462 (diff) | |
download | chat-962a5d8beb8b0eb634b1bff9258b209142041dc9.tar.gz chat-962a5d8beb8b0eb634b1bff9258b209142041dc9.tar.bz2 chat-962a5d8beb8b0eb634b1bff9258b209142041dc9.zip |
Merge pull request #1046 from asaadmahmoodspin/ui-improvements
Multiple UI Improvements
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/create_post.jsx | 5 | ||||
-rw-r--r-- | web/react/components/error_bar.jsx | 21 | ||||
-rw-r--r-- | web/react/components/post_info.jsx | 1 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 26 | ||||
-rw-r--r-- | web/react/components/user_profile.jsx | 2 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 6 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_base.scss | 7 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_content.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_error-bar.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_forms.scss | 1 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 7 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_navbar.scss | 6 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 8 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--left.scss | 18 |
15 files changed, 74 insertions, 42 deletions
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index ed265ab02..f35079383 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -192,9 +192,12 @@ export default class CreatePost extends React.Component { PostStore.storeCurrentDraft(draft); } resizePostHolder() { - const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - $('#error_bar').outerHeight() - 50; + const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - 50; $('.post-list-holder-by-time').css('height', `${height}px`); $(window).trigger('resize'); + if ($(window).width() > 960) { + $('#post_textbox').focus(); + } } handleUploadStart(clientIds, channelId) { const draft = PostStore.getDraft(channelId); diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index b100fd337..6311d9460 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -9,7 +9,6 @@ export default class ErrorBar extends React.Component { this.onErrorChange = this.onErrorChange.bind(this); this.handleClose = this.handleClose.bind(this); - this.resize = this.resize.bind(this); this.prevTimer = null; this.state = ErrorStore.getLastError(); @@ -46,34 +45,14 @@ export default class ErrorBar extends React.Component { return false; } - resize() { - if (this.isValidError(this.state)) { - var height = $(React.findDOMNode(this)).outerHeight(); - height = height < 30 ? 30 : height; - $('body').css('padding-top', height + 'px'); - } else { - $('body').css('padding-top', '0'); - } - } - componentDidMount() { ErrorStore.addChangeListener(this.onErrorChange); - - $(window).resize(() => { - this.resize(); - }); - - this.resize(); } componentWillUnmount() { ErrorStore.removeChangeListener(this.onErrorChange); } - componentDidUpdate() { - this.resize(); - } - onErrorChange() { var newState = ErrorStore.getLastError(); diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 7addd825f..a95095ff6 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -150,6 +150,7 @@ export default class PostInfo extends React.Component { <ul className='post-header post-info'> <li className='post-header-col'> <OverlayTrigger + delayShow='500' container={this} placement='top' overlay={tooltip} diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index a1a5b64ba..814b2e264 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -15,6 +15,8 @@ const TeamStore = require('../stores/team_store.jsx'); const UnreadChannelIndicator = require('./unread_channel_indicator.jsx'); const UserStore = require('../stores/user_store.jsx'); const Utils = require('../utils/utils.jsx'); +const Tooltip = ReactBootstrap.Tooltip; +const OverlayTrigger = ReactBootstrap.OverlayTrigger; export default class Sidebar extends React.Component { constructor(props) { @@ -455,14 +457,21 @@ export default class Sidebar extends React.Component { } let closeButton = null; + const removeTooltip = <Tooltip>{'Remove from list'}</Tooltip>; if (handleClose && !badge) { closeButton = ( + <OverlayTrigger + delayShow='1000' + placement='top' + overlay={removeTooltip} + > <span - className='close-btn pull-right small' + className='btn-close' data-close='true' > {'×'} </span> + </OverlayTrigger> ); rowClass = ' has-close'; @@ -545,6 +554,9 @@ export default class Sidebar extends React.Component { showChannelModal = true; } + const createChannelTootlip = <Tooltip>{'Create new channel'}</Tooltip>; + const createGroupTootlip = <Tooltip>{'Create new group'}</Tooltip>; + return ( <div> <NewChannelFlow @@ -579,6 +591,11 @@ export default class Sidebar extends React.Component { <li> <h4> {'Channels'} + <OverlayTrigger + delayShow='500' + placement='top' + overlay={createChannelTootlip} + > <a className='add-channel-btn' href='#' @@ -586,6 +603,7 @@ export default class Sidebar extends React.Component { > {'+'} </a> + </OverlayTrigger> </h4> </li> {publicChannelItems} @@ -606,6 +624,11 @@ export default class Sidebar extends React.Component { <li> <h4> {'Private Groups'} + <OverlayTrigger + delayShow='500' + placement='top' + overlay={createGroupTootlip} + > <a className='add-channel-btn' href='#' @@ -613,6 +636,7 @@ export default class Sidebar extends React.Component { > {'+'} </a> + </OverlayTrigger> </h4> </li> {privateChannelItems} diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index 948f06444..cc6165c1b 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -32,7 +32,7 @@ export default class UserProfile extends React.Component { componentDidMount() { UserStore.addChangeListener(this.onChange); if (!this.props.disablePopover) { - $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'hover', html: true, delay: {show: 200, hide: 100}}); + $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'click hover', html: true, delay: {show: 200, hide: 100}}); $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); } } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 91502352e..8f697a9c5 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -473,6 +473,8 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name', 'color:' + theme.centerChannelColor, 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); + changeCss('.channel-header__links a', 'fill:' + changeOpacity(theme.centerChannelColor, 0.7), 1); + changeCss('.channel-header__links a:hover, .channel-header__links a:active', 'fill:' + theme.centerChannelColor, 2); changeCss('.mentions--top, .command-box', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); changeCss('.mentions--top, .command-box', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2); changeCss('.mentions--top, .command-box', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1); @@ -485,6 +487,10 @@ export function applyTheme(theme) { changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .command-box, .modal .modal-content, .settings-modal .settings-table .settings-content .divider-light, .dropdown-menu, .modal .modal-header, .popover, .mentions--top .mentions-box', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); + changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); + changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); + changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.dropdown-menu .divider', 'background:' + theme.centerChannelColor, 1); changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1); diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 470db16dc..44a474213 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -45,9 +45,9 @@ img { .popover { color: #333; - &.bottom { + &.bottom, &.right, &.top, &.left { >.arrow:after { - border-bottom-color: rgba(white, 0.5); + border-color: transparent; } } .popover-title { @@ -83,6 +83,9 @@ a:focus, a:hover { .tooltip { .tooltip-inner { word-break: break-word; + font-size: 13px; + padding: 3px 10px 4px; + font-weight: 500; } } diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss index 64d253283..49b3916a9 100644 --- a/web/sass-files/sass/partials/_content.scss +++ b/web/sass-files/sass/partials/_content.scss @@ -28,7 +28,7 @@ bottom: 0; left: 0; width: 100%; - z-index: 6; + z-index: 3; } .post-list { .new-messages-hr { diff --git a/web/sass-files/sass/partials/_error-bar.scss b/web/sass-files/sass/partials/_error-bar.scss index 2e3d3c87e..8b7432bbb 100644 --- a/web/sass-files/sass/partials/_error-bar.scss +++ b/web/sass-files/sass/partials/_error-bar.scss @@ -3,7 +3,7 @@ text-align:center; position: relative; color: #fff; - position: fixed; + position: absolute; top: 0; width: 100%; z-index: 9999; diff --git a/web/sass-files/sass/partials/_forms.scss b/web/sass-files/sass/partials/_forms.scss index a797dfba6..2d7b6cd26 100644 --- a/web/sass-files/sass/partials/_forms.scss +++ b/web/sass-files/sass/partials/_forms.scss @@ -40,5 +40,6 @@ .help-block { font-size: 0.95em; + margin: 10px 0 0; color: #999; } diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index feaa5acfb..8bf163f90 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -291,11 +291,6 @@ display: inline-block; width: 15px; margin: 9px 6px 3px 0; - &:hover { - svg { - fill: #777; - } - } a { height: 100%; display: block; @@ -303,6 +298,6 @@ svg { vertical-align: top; margin-top: 8px; - fill: #aaa; + fill: inherit; } } diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss index a8c3c0da2..2e78a8728 100644 --- a/web/sass-files/sass/partials/_navbar.scss +++ b/web/sass-files/sass/partials/_navbar.scss @@ -95,12 +95,6 @@ } } -.close-btn { - position: absolute; - right: 10px; - top: 5px; -} - .badge-notify { background:red; position: absolute; diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index b457d0dd2..0f3cc0ef6 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -408,7 +408,7 @@ body.ios { } .post-body { position: relative; - z-index: 5; + z-index: 1; max-width: 100%; width: 600px; float: left; @@ -439,7 +439,7 @@ body.ios { padding-left: 0px; &.post-header-post { position: relative; - z-index: 5; + z-index: 1; width: 200px; text-align: right; float: left; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 447f47d87..dbe6029ec 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -48,6 +48,7 @@ } .post-header { &.post-header-post { + z-index: inherit; width: auto; float: none; text-align: left; @@ -138,6 +139,7 @@ } .post-header { &.post-header-post { + z-index: inherit; width: auto; float: none; text-align: left; @@ -624,6 +626,12 @@ &:hover, &:focus { background: transparent; } + &.has-close { + .btn-close { + display: block; + @include opacity(0.5); + } + } } } } diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 7cb530d2c..24aaef059 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -100,6 +100,24 @@ } &.has-close { padding-right: 30px; + &:hover { + .btn-close { + display: block; + @include opacity(0.8); + } + } + .btn-close { + position: absolute; + right: 15px; + top: -1px; + font-size: 20px; + font-weight: 600; + @include opacity(0); + display: none; + &:hover { + @include opacity(1); + } + } } &.nav-more { text-decoration: underline; |