From 8476062d214230e2370af87a9495457c7a5a2a6d Mon Sep 17 00:00:00 2001 From: ralder Date: Wed, 8 Jul 2015 12:51:43 -0700 Subject: [webui] fix command-list css --- web/react/components/command_list.jsx | 17 ++++---- web/react/components/error_bar.jsx | 42 +++++++++++--------- web/react/components/sidebar_header.jsx | 10 ++--- web/react/stores/user_store.jsx | 4 +- web/sass-files/sass/partials/_base.scss | 54 +------------------------- web/sass-files/sass/partials/_command-box.scss | 25 ++++++++++++ web/sass-files/sass/partials/_error-bar.scss | 25 ++++++++++++ web/sass-files/sass/partials/_mentions.scss | 1 + web/sass-files/sass/partials/_responsive.scss | 18 ++------- web/sass-files/sass/partials/_variables.scss | 6 ++- web/sass-files/sass/styles.scss | 2 + 11 files changed, 101 insertions(+), 103 deletions(-) create mode 100644 web/sass-files/sass/partials/_command-box.scss create mode 100644 web/sass-files/sass/partials/_error-bar.scss diff --git a/web/react/components/command_list.jsx b/web/react/components/command_list.jsx index 023f5f760..5efe98dc6 100644 --- a/web/react/components/command_list.jsx +++ b/web/react/components/command_list.jsx @@ -20,12 +20,7 @@ module.exports = React.createClass({ }, getSuggestedCommands: function(cmd) { - if (cmd == "") { - this.setState({ suggestions: [ ], cmd: "" }); - return; - } - - if (cmd.indexOf("/") != 0) { + if (!cmd || cmd.charAt(0) != '/') { this.setState({ suggestions: [ ], cmd: "" }); return; } @@ -35,17 +30,19 @@ module.exports = React.createClass({ cmd, true, function(data) { - if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) data.suggestions = []; + if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) { + data.suggestions = []; + } this.setState({ suggestions: data.suggestions, cmd: cmd }); }.bind(this), function(err){ - }.bind(this) + } ); }, render: function() { if (this.state.suggestions.length == 0) return (
); - var suggestions = [] + var suggestions = []; for (var i = 0; i < this.state.suggestions.length; i++) { if (this.state.suggestions[i].suggestion != this.state.cmd) { @@ -59,7 +56,7 @@ module.exports = React.createClass({ } return ( -
+
{ suggestions }
); diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index d9d91ef51..f7514a009 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -8,21 +8,25 @@ var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; function getStateFromStores() { - var error = ErrorStore.getLastError(); - if (error && error.message !== "There appears to be a problem with your internet connection") { - return { message: error.message }; - } else { - return { message: null }; - } + var error = ErrorStore.getLastError(); + if (error && error.message !== "There appears to be a problem with your internet connection") { + return { message: error.message }; + } else { + return { message: null }; + } } module.exports = React.createClass({ + displayName: 'ErrorBar', + componentDidMount: function() { ErrorStore.addChangeListener(this._onChange); - $('body').css('padding-top', $('#error_bar').outerHeight()); - $(window).resize(function(){ - $('body').css('padding-top', $('#error_bar').outerHeight()); - }); + $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); + $(window).resize(function() { + if (this.state.message) { + $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); + } + }.bind(this)); }, componentWillUnmount: function() { ErrorStore.removeChangeListener(this._onChange); @@ -31,39 +35,39 @@ module.exports = React.createClass({ var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { if (newState.message) { - var self = this; - setTimeout(function(){self.handleClose();}, 10000); + setTimeout(this.handleClose, 10000); } + this.setState(newState); } }, handleClose: function(e) { if (e) e.preventDefault(); + AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_ERROR, err: null }); + $('body').css('padding-top', '0'); }, getInitialState: function() { var state = getStateFromStores(); if (state.message) { - var self = this; - setTimeout(function(){self.handleClose();}, 10000); + setTimeout(this.handleClose, 10000); } return state; }, render: function() { - var message = this.state.message; - if (message) { + if (this.state.message) { return (
- {message} - × + {this.state.message} + ×
); } else { return
; } } -}); +}); \ No newline at end of file diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 7a7e92854..859e425a6 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -101,13 +101,13 @@ module.exports = React.createClass({ getDefaultProps: function() { return { - teamName: config.SiteName + teamDisplayName: config.SiteName }; }, render: function() { - var teamDisplayName = this.props.teamDisplayName ? this.props.teamDisplayName : config.SiteName; - var me = UserStore.getCurrentUser() + var me = UserStore.getCurrentUser(); + if (!me) { return null; } @@ -118,11 +118,11 @@ module.exports = React.createClass({ { me.last_picture_update ?
{ '@' + me.username}
-
{ teamDisplayName }
+
{ this.props.teamDisplayName }
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx index d03016c5d..001162f47 100644 --- a/web/react/stores/user_store.jsx +++ b/web/react/stores/user_store.jsx @@ -183,6 +183,9 @@ var UserStore = assign({}, EventEmitter.prototype, { var keys = []; + if (!user) + return keys; + if (user.notify_props && user.notify_props.mention_keys) keys = keys.concat(user.notify_props.mention_keys.split(',')); if (user.first_name && user.notify_props.first_name === "true") keys.push(user.first_name); if (user.notify_props.all === "true") keys.push('@all'); @@ -258,4 +261,3 @@ UserStore.dispatchToken = AppDispatcher.register(function(payload) { UserStore.setMaxListeners(0); global.window.UserStore = UserStore; module.exports = UserStore; - diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 1fb970075..52659521d 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -5,7 +5,7 @@ html, body { body { font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; - background: #e9e9e9; + background: $body-bg; position: relative; height: 100%; &.white { @@ -96,32 +96,6 @@ div.theme { position:relative; } -.command-box { - position:absolute; - background-color:#fff; - width:100%; - border:1px solid #ddd; - bottom: 38; -} - -.command-name { - position: relative; - width: 100%; - background-color: #fff; - height: 37px; - line-height: 37px; - padding: 2px 10px 2px 5px; - z-index: 101; -} - -.command-name:hover { - background-color:#e8eaed; -} - -.command-desc { - color: #a7a8ab; -} - @-webkit-keyframes spin2 { from { -webkit-transform: rotate(0deg);} to { -webkit-transform: rotate(360deg);} @@ -139,29 +113,3 @@ div.theme { .black-bg { background-color: black !important; } - -#error_bar { - background-color: #0099FF; - text-align:center; - position: relative; - color: #fff; - position: fixed; - top: 0; - width: 100%; - z-index: 9999; - - .error-bar { - padding: 5px 30px; - } - - .error-close { - position: absolute; - right: 0; - top: 0; - color: #FFF; - font-size: 20px; - font-weight: 600; - text-decoration: none; - padding: 0 10px; - } -} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_command-box.scss b/web/sass-files/sass/partials/_command-box.scss new file mode 100644 index 000000000..44eb9b8df --- /dev/null +++ b/web/sass-files/sass/partials/_command-box.scss @@ -0,0 +1,25 @@ +.command-box { + position: absolute; + background-color: #fff; + width: 100%; + border: $border-gray; + bottom: 38px; + @extend %popover-box-shadow; +} + +.command-name { + position: relative; + width: 100%; + background-color: #fff; + height: 37px; + line-height: 37px; + padding: 2px 10px 2px 5px; + z-index: 101; + &:hover { + background-color: #e8eaed; + } +} + +.command-desc { + color: #a7a8ab; +} \ No newline at end of file diff --git a/web/sass-files/sass/partials/_error-bar.scss b/web/sass-files/sass/partials/_error-bar.scss new file mode 100644 index 000000000..2e3d3c87e --- /dev/null +++ b/web/sass-files/sass/partials/_error-bar.scss @@ -0,0 +1,25 @@ +.error-bar { + background-color: #0099FF; + text-align:center; + position: relative; + color: #fff; + position: fixed; + top: 0; + width: 100%; + z-index: 9999; + padding: 5px 30px; + &__close { + position: absolute; + right: 0; + top: 0; + color: #FFF; + font-size: 20px; + font-weight: 600; + text-decoration: none; + padding: 0 10px; + &:hover { + color: #FFF; + text-decoration: none; + } + } +} diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index 1396f21a1..a8c4dec26 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -10,6 +10,7 @@ .mentions--top { position: absolute; z-index: 1060; + @extend %popover-box-shadow; .mentions-box { width: 100%; height: 100%; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index d8a8fd982..b4e4fa1df 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -462,20 +462,10 @@ color: rgba(#fff, 0.6); } } - ::-webkit-input-placeholder { - color: #fff; - } - - :-moz-placeholder { /* Firefox 18- */ - color: #fff; - } - - ::-moz-placeholder { /* Firefox 19+ */ - color: #fff; - } - - :-ms-input-placeholder { - color: #fff; + input[type=text] { + @include input-placeholder { + color: #fff; + } } } } diff --git a/web/sass-files/sass/partials/_variables.scss b/web/sass-files/sass/partials/_variables.scss index 5d883ab44..78952abb5 100644 --- a/web/sass-files/sass/partials/_variables.scss +++ b/web/sass-files/sass/partials/_variables.scss @@ -7,4 +7,8 @@ $primary-color: #2389D7; $primary-color--hover: darken(#2389D7, 5%); $body-bg: #e9e9e9; $header-bg: #f9f9f9; -$border-gray: 1px solid #ddd; \ No newline at end of file +$border-gray: 1px solid #ddd; + +%popover-box-shadow { + @include box-shadow(rgba(black, 0.175) 1px -3px 12px); +} diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 294f6122a..ffd1f42b8 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -29,7 +29,9 @@ @import "partials/settings"; @import "partials/modal"; @import "partials/mentions"; +@import "partials/command-box"; @import "partials/error"; +@import "partials/error-bar"; @import "partials/loading"; // Responsive Css -- cgit v1.2.3-1-g7c22