summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorCorey Hulen <corey@hulen.com>2015-07-02 11:16:22 -0800
committerCorey Hulen <corey@hulen.com>2015-07-02 11:16:22 -0800
commita3db8e83f68f4341b473e77986dc7ca93f97c2d0 (patch)
treef2d5178c4555acd1f231bdf50d4fc25312d8a519
parente233d0d2d20bcb12540e39829a2bce754caa185c (diff)
parent97c112c42707f92279b8a85f1f0ad8517fa59f18 (diff)
downloadchat-a3db8e83f68f4341b473e77986dc7ca93f97c2d0.tar.gz
chat-a3db8e83f68f4341b473e77986dc7ca93f97c2d0.tar.bz2
chat-a3db8e83f68f4341b473e77986dc7ca93f97c2d0.zip
Merge pull request #123 from asaadmahmoodspin/mm-1426
MM-1426 - Updating UI
Diffstat
-rw-r--r--api/templates/error.html2
-rw-r--r--web/react/components/channel_notifications.jsx6
-rw-r--r--web/react/components/post.jsx18
-rw-r--r--web/react/components/post_right.jsx20
-rw-r--r--web/sass-files/sass/partials/_base.scss8
-rw-r--r--web/sass-files/sass/partials/_headers.scss2
-rw-r--r--web/sass-files/sass/partials/_modal.scss7
-rw-r--r--web/sass-files/sass/partials/_post.scss15
-rw-r--r--web/sass-files/sass/partials/_responsive.scss15
-rw-r--r--web/sass-files/sass/partials/_search.scss2
-rw-r--r--web/sass-files/sass/partials/_settings.scss4
-rw-r--r--web/sass-files/sass/partials/_sidebar--left.scss3
-rw-r--r--web/templates/head.html2
13 files changed, 68 insertions, 36 deletions
diff --git a/api/templates/error.html b/api/templates/error.html
index ab4d91378..f38bb81a1 100644
--- 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">
diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index fa9ab42ae..638d16576 100644
--- 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>
diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx
index afe978495..04b5ba082 100644
--- 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" />
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 43be60afa..2c28c5d9f 100644
--- 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>
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 4fb918bd1..cf28e44e8 100644
--- 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;
}
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 89bbaef2b..e240d5151 100644
--- 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;
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 4427cb7dd..971ed0935 100644
--- 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;
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 745d50173..72b527311 100644
--- 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;
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 25533c770..5497e2c6c 100644
--- 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;
}
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index ca5d25720..8d51d00c0 100644
--- 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;
}
}
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index dbaab8b58..af759c650 100644
--- 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 {
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index b1dd470d2..46b328d43 100644
--- 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;
}
}
}
diff --git a/web/templates/head.html b/web/templates/head.html
index 5eb7a7333..9c025d1f9 100644
--- 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>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-16 19:49:23 +0000