Merge pull request #123 from asaadmahmoodspin/mm-1426

MM-1426 - Updating UI
2015-07-02 11:16:22 -08:00
--- a/api/templates/error.html
+++ b/api/templates/error.html
@@ -5,7 +5,7 @@
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
-	<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" href="/static/css/styles.css">
 </head>
 <body class="white error">
--- a/web/react/components/channel_notifications.jsx
+++ b/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>
--- a/web/react/components/post.jsx
+++ b/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" />
--- a/web/react/components/post_right.jsx
+++ b/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>
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -3,7 +3,7 @@ html, body {
 }

 body {
-  font-family: 'Lato', sans-serif;
+  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #e9e9e9;
  position: relative;
@@ -30,6 +30,10 @@ body {
  }
 }

+b, strong {
+  font-weight: 600;
+}
+
 a {
  word-break: break-word;
 }
@@ -146,7 +150,7 @@ div.theme {
    top: 0;
    color: #FFF;
    font-size: 20px;
-    font-weight: bold;
+    font-weight: 600;
    text-decoration: none;
    padding: 0 10px;
  }
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -65,7 +65,7 @@
 		float:left;
 	}
 	.channel-intro-title {
-		font-weight:bold;
+		font-weight:600;
 	}
 	.channel-intro-text {
 		margin-top:35px;
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -8,7 +8,7 @@
 		}
 	}
 	.info__label {
-		font-weight: bold;
+		font-weight: 600;
 		text-align: right;
 		padding-right: 0;
 	}
@@ -21,7 +21,6 @@
 		margin-right: auto;
 	}
 	.modal-body {
-		max-height: 75%;
 		overflow: auto;
 	}
 	.modal-push-down {
@@ -66,7 +65,6 @@
 			}
 		}
 		.btn {
-			margin-right: 10px;
 			&.btn-primary {
 				float: right;
 				margin-top: -4px;
@@ -120,7 +118,7 @@
 		}
 		.more-channel-name {
 			color: #444;
-			font-weight: bold;
+			font-weight: 600;
 			font-size: 0.95em;
 		}
 		tbody {
@@ -145,6 +143,7 @@
 	.modal-image {
 		position:relative;
 		width:100%;
+		height: 100%;
 		margin: 0 auto;
 		.image-wrapper {
 			background: #FFF;
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -86,10 +86,11 @@ body.ios {
 			background: #FFF;
 			display: inline-block;
 			padding: 0 1em;
-			font-weight: 900;
+			font-weight: 700;
 			@include border-radius(50px);
 			position: relative;
 			z-index: 5;
+			font-size: 13px;
 		}
 	}
 	.new-separator {
@@ -212,6 +213,12 @@ body.ios {
 			}
 		}
 	}
+	&.current--user {
+		.post-body {
+			@include border-radius(0 4px 4px 0);
+			background: #f5f5f5;
+		}
+	}
 	&.same--root {
 		.comment-icon__container {
 			@include opacity(0);
@@ -269,7 +276,7 @@ body.ios {
 			float: left;
 			.post-profile-img {
 				margin-right: 10px;
-				@include border-radius(3px);
+				@include border-radius(50px);
 			}
 		}
 		&.post__content {
@@ -290,6 +297,8 @@ body.ios {
 		width: 600px;
 		float: left;
 		word-wrap: break-word;
+		padding: 0.3em 0.5em 0.1em;
+		margin: -0.3em 0 0;
 		.post-link {
 			@include clearfix;
 			text-overflow: ellipsis;
@@ -359,7 +368,7 @@ body.ios {
 		.embed-title {
 			margin: 3px 0 1px;
 			color: #555;
-			font-weight: bold;
+			font-weight: 600;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -22,11 +22,16 @@
                        width: 825px;
                    }
                    .post-body {
-                        padding-left: 0;
+                        width: 736px;
                        border: none;
                        margin: 0;
                    }
                }
+                .post-body {
+                    float: none;
+                    width: 750px;
+                    margin: 0;
+                }
                .post__content {
                    width: 920px;
                }
@@ -63,10 +68,6 @@
                        }
                    }
                }
-                .post-body {
-                    float: none;
-                    width: 750px;
-                }
            }
        }
    }
@@ -89,6 +90,7 @@
            margin-left: 60px;
            padding-left: 10px;
            border-left: 4px solid #EEE;
+            margin-bottom: 10px;
            div.post-profile-img__container {
                .post-profile-img {
                    display: none;
@@ -98,7 +100,7 @@
                width: 825px;
            }
            .post-body {
-                padding-left: 0;
+                width: 736px;
                border: none;
                margin: 0;
            }
@@ -135,6 +137,7 @@
            }
        }
        .post-body {
+            margin: 0;
            float: none;
            width: 750px;
        }
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -77,7 +77,7 @@
 		border: none;
 	}
 	.search-channel__name {
-		font-weight: bold;
+		font-weight: 600;
 		margin: 0 0 10px 0;
 	}
 }
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -56,7 +56,7 @@

            .section-title {
                margin-bottom: 5px;
-                font-weight: bold;
+                font-weight: 600;
            }

            .section-edit {
@@ -172,7 +172,7 @@
        border-top:1px solid lightgrey;
    }
    .post-profile-img {
-        @include border-radius(3px);
+        @include border-radius(50px);
        margin-right: 8px;
    }
    .member-name {
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -59,7 +59,7 @@
                color: #999;
                &.unread-title {
                    color: #333;
-                    font-weight: bold;
+                    font-weight: 600;
                }
                &:hover, &:focus {
                    background: #e6f2fa;
@@ -70,6 +70,7 @@
                    color: #111;
                    background-color: #e1e1e1;
                    border-radius: 0;
+                    font-weight: 600;
                }
            }
        }
--- a/web/templates/head.html
+++ b/web/templates/head.html
@@ -14,7 +14,7 @@

    <link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
-    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/static/css/styles.css">

    <script src="/static/js/min/perfect-scrollbar.min.js"></script>