Merge pull request #123 from asaadmahmoodspin/mm-1426

MM-1426 - Updating UI

web/react/components/channel_notifications.jsx

@@ -97,7 +97,7 @@ module.exports = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="radio">
                         <label>
                             <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleRadioClick("all")}}>For all activity</input>
@@ -158,7 +158,7 @@ module.exports = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="btn-group" data-toggle="buttons-radio">
                         <button className={"btn btn-default "+quietActive[0]} onClick={function(){self.handleQuietToggle(true)}}>On</button>
                         <button className={"btn btn-default "+quietActive[1]} onClick={function(){self.handleQuietToggle(false)}}>Off</button>
@@ -167,7 +167,7 @@ module.exports = React.createClass({
             );
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <br/>
                     Enabling quiet mode will turn off desktop notifications and only mark the channel as unread if you have been mentioned.
                 </div>

web/react/components/post.jsx

@@ -6,13 +6,14 @@ var PostBody = require('./post_body.jsx');
 var PostInfo = require('./post_info.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
+var UserStore = require('../stores/user_store.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 module.exports = React.createClass({
     componentDidMount: function() {
-        $('.edit-modal').on('show.bs.modal', function () {
-            $('.edit-modal .edit-modal-body').css('overflow-y', 'auto');
-            $('.edit-modal .edit-modal-body').css('max-height', $(window).height() * 0.7);
+        $('.modal').on('show.bs.modal', function () {
+            $('.modal-body').css('overflow-y', 'auto');
+            $('.modal-body').css('max-height', $(window).height() * 0.7);
         });
     },
     handleCommentClick: function(e) {
@@ -56,7 +57,7 @@ module.exports = React.createClass({
 
         var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null;
 
-        if(this.props.sameRoot){
+        if (this.props.sameRoot){
             rootUser = "same--root";
         }
         else {
@@ -64,13 +65,18 @@ module.exports = React.createClass({
         }
 
         var postType = "";
-        if(type != "Post"){
+        if (type != "Post"){
             postType = "post--comment";
         }
 
+        var currentUserCss = "";
+        if (UserStore.getCurrentId() === post.user_id) {
+            currentUserCss = "current--user";
+        }
+
         return (
             <div>
-                <div id={post.id} className={"post " + this.props.sameUser + " " + rootUser + " " + postType}>
+                <div id={post.id} className={"post " + this.props.sameUser + " " + rootUser + " " + postType + " " + currentUserCss}>
                     { !this.props.hideProfilePic ?
                     <div className="post-profile-img__container">
                         <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image"} height="36" width="36" />

web/react/components/post_right.jsx

@@ -68,9 +68,14 @@ RootPost = React.createClass({
         var filenames = this.props.post.filenames;
         var isOwner = UserStore.getCurrentId() == this.props.post.user_id;
 
-        var type = "Post"
+        var type = "Post";
         if (this.props.post.root_id.length > 0) {
-            type = "Comment"
+            type = "Comment";
+        }
+
+        var currentUserCss = "";
+        if (UserStore.getCurrentId() === this.props.post.user_id) {
+            currentUserCss = "current--user";
         }
 
         if (filenames) {
@@ -84,7 +89,7 @@ RootPost = React.createClass({
                 if (fileSplit.length < 2) continue;
 
                 var ext = fileSplit[fileSplit.length-1];
-                fileSplit.splice(fileSplit.length-1,1)
+                fileSplit.splice(fileSplit.length-1,1);
                 var filePath = fileSplit.join('.');
                 var filename = filePath.split('/')[filePath.split('/').length-1];
 
@@ -111,7 +116,7 @@ RootPost = React.createClass({
         }
 
         return (
-            <div className="post post--root">
+            <div className={"post post--root " + currentUserCss}>
                 <div className="post-profile-img__container">
                     <img className="post-profile-img" src={"/api/v1/users/" + this.props.post.user_id + "/image"} height="36" width="36" />
                 </div>
@@ -170,6 +175,11 @@ CommentPost = React.createClass({
 
         var commentClass = "post";
 
+        var currentUserCss = "";
+        if (UserStore.getCurrentId() === this.props.post.user_id) {
+            currentUserCss = "current--user";
+        }
+
         var postImageModalId = "rhs_comment_view_image_modal_" + this.props.post.id;
         var filenames = this.props.post.filenames;
         var isOwner = UserStore.getCurrentId() == this.props.post.user_id;
@@ -219,7 +229,7 @@ CommentPost = React.createClass({
         var message = utils.textToJsx(this.props.post.message);
 
         return (
-            <div className={commentClass}>
+            <div className={commentClass + " " + currentUserCss}>
                 <div className="post-profile-img__container">
                     <img className="post-profile-img" src={"/api/v1/users/" + this.props.post.user_id + "/image"} height="36" width="36" />
                 </div>