Merge pull request #194 from ralder/fix-command-box-css

[webui] fix command-list css

web/react/components/command_list.jsx

@@ -20,12 +20,7 @@ module.exports = React.createClass({
     },
     getSuggestedCommands: function(cmd) {
 
-        if (cmd == "") {
+        if (!cmd || cmd.charAt(0) != '/') {
-            this.setState({ suggestions: [ ], cmd: "" });
-            return;
-        }
-
-        if (cmd.indexOf("/") != 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 (<div/>);
 
-        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 (
-            <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions*37)+2}}>
+            <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*37)+2}}>
                 { suggestions }
             </div>
         );

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();
+    var error = ErrorStore.getLastError();
-  if (error && error.message !== "There appears to be a problem with your internet connection") {
+    if (error && error.message !== "There appears to be a problem with your internet connection") {
-      return { message: error.message };
+        return { message: error.message };
-  } else {
+    } else {
-     return { message: null };
+        return { message: null };
-  }
+    }
 }
 
 module.exports = React.createClass({
+    displayName: 'ErrorBar',
+
     componentDidMount: function() {
         ErrorStore.addChangeListener(this._onChange);
-        $('body').css('padding-top', $('#error_bar').outerHeight());
+        $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
-        $(window).resize(function(){
+        $(window).resize(function() {
-            $('body').css('padding-top', $('#error_bar').outerHeight());
+            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(this.handleClose, 10000);
-                setTimeout(function(){self.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(this.handleClose, 10000);
-            setTimeout(function(){self.handleClose();}, 10000);
         }
         return state;
     },
     render: function() {
-        var message = this.state.message;
+        if (this.state.message) {
-        if (message) {
             return (
                 <div className="error-bar">
-                    <span className="error-text">{message}</span>
+                    <span>{this.state.message}</span>
-                    <a href="#" className="error-close pull-right" onClick={this.handleClose}>×</a>
+                    <a href="#" className="error-bar__close" onClick={this.handleClose}>&times;</a>
                 </div>
             );
         } else {
             return <div/>;
         }
     }
-});
+});

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 ?
                     <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} />
                     :
-                    <div />
+                    null
                     }
                     <div className="header__info">
                         <div className="user__name">{ '@' + me.username}</div>
-                        <div className="team__name">{ teamDisplayName }</div>
+                        <div className="team__name">{ this.props.teamDisplayName }</div>
                     </div>
                 </a>
                 <NavbarDropdown teamType={this.props.teamType} />

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;
-

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;
-  }
-}

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;
+}

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;
+        }
+    }
+}

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%;

web/sass-files/sass/partials/_responsive.scss

@@ -464,20 +464,10 @@
                     color: rgba(#fff, 0.6);
                 }
             }
-            ::-webkit-input-placeholder {
+            input[type=text] {
-                color: #fff;
+                    @include input-placeholder {
-            }
+                    color: #fff;
-
+                }
-            :-moz-placeholder { /* Firefox 18- */
-                color: #fff;
-            }
-
-            ::-moz-placeholder {  /* Firefox 19+ */
-                color: #fff;
-            }
-
-            :-ms-input-placeholder {
-                color: #fff;
             }
         }
     }

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;
+$border-gray: 1px solid #ddd;
+
+%popover-box-shadow {
+	@include box-shadow(rgba(black, 0.175) 1px -3px 12px);
+}

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