mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Merge pull request #123 from asaadmahmoodspin/mm-1426

Просмотр исходного кода 
MM-1426 - Updating UI
Этот коммит содержится в:
Corey Hulen
2015-07-02 11:16:22 -08:00
родитель e233d0d2d2 97c112c427
Коммит a3db8e83f6
13 изменённых файлов: 68 добавлений и 36 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
api/templates/error.html
Просмотреть файл

@@ -5,7 +5,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <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://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> <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"> <link rel="stylesheet" href="/static/css/styles.css">
</head> </head>
<body class="white error"> <body class="white error">

6
web/react/components/channel_notifications.jsx
Просмотреть файл

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

18
web/react/components/post.jsx
Просмотреть файл

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

20
web/react/components/post_right.jsx
Просмотреть файл

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

8
web/sass-files/sass/partials/_base.scss
Просмотреть файл

@@ -3,7 +3,7 @@ html, body {
} }
body { body {
font-family: 'Lato', sans-serif; font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background: #e9e9e9; background: #e9e9e9;
position: relative; position: relative;
@@ -30,6 +30,10 @@ body {
} }
} }
b, strong {
font-weight: 600;
}
a { a {
word-break: break-word; word-break: break-word;
} }
@@ -146,7 +150,7 @@ div.theme {
top: 0; top: 0;
color: #FFF; color: #FFF;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: 600;
text-decoration: none; text-decoration: none;
padding: 0 10px; padding: 0 10px;
} }

2
web/sass-files/sass/partials/_headers.scss
Просмотреть файл

@@ -65,7 +65,7 @@
float:left; float:left;
} }
.channel-intro-title { .channel-intro-title {
font-weight:bold; font-weight:600;
} }
.channel-intro-text { .channel-intro-text {
margin-top:35px; margin-top:35px;

7
web/sass-files/sass/partials/_modal.scss
Просмотреть файл

@@ -8,7 +8,7 @@
} }
} }
.info__label { .info__label {
font-weight: bold; font-weight: 600;
text-align: right; text-align: right;
padding-right: 0; padding-right: 0;
} }
@@ -21,7 +21,6 @@
margin-right: auto; margin-right: auto;
} }
.modal-body { .modal-body {
max-height: 75%;
overflow: auto; overflow: auto;
} }
.modal-push-down { .modal-push-down {
@@ -66,7 +65,6 @@
} }
} }
.btn { .btn {
margin-right: 10px;
&.btn-primary { &.btn-primary {
float: right; float: right;
margin-top: -4px; margin-top: -4px;
@@ -120,7 +118,7 @@
} }
.more-channel-name { .more-channel-name {
color: #444; color: #444;
font-weight: bold; font-weight: 600;
font-size: 0.95em; font-size: 0.95em;
} }
tbody { tbody {
@@ -145,6 +143,7 @@
.modal-image { .modal-image {
position:relative; position:relative;
width:100%; width:100%;
height: 100%;
margin: 0 auto; margin: 0 auto;
.image-wrapper { .image-wrapper {
background: #FFF; background: #FFF;

15
web/sass-files/sass/partials/_post.scss
Просмотреть файл

@@ -86,10 +86,11 @@ body.ios {
background: #FFF; background: #FFF;
display: inline-block; display: inline-block;
padding: 0 1em; padding: 0 1em;
font-weight: 900; font-weight: 700;
@include border-radius(50px); @include border-radius(50px);
position: relative; position: relative;
z-index: 5; z-index: 5;
font-size: 13px;
} }
} }
.new-separator { .new-separator {
@@ -212,6 +213,12 @@ body.ios {
} }
} }
} }
&.current--user {
.post-body {
@include border-radius(0 4px 4px 0);
background: #f5f5f5;
}
}
&.same--root { &.same--root {
.comment-icon__container { .comment-icon__container {
@include opacity(0); @include opacity(0);
@@ -269,7 +276,7 @@ body.ios {
float: left; float: left;
.post-profile-img { .post-profile-img {
margin-right: 10px; margin-right: 10px;
@include border-radius(3px); @include border-radius(50px);
} }
} }
&.post__content { &.post__content {
@@ -290,6 +297,8 @@ body.ios {
width: 600px; width: 600px;
float: left; float: left;
word-wrap: break-word; word-wrap: break-word;
padding: 0.3em 0.5em 0.1em;
margin: -0.3em 0 0;
.post-link { .post-link {
@include clearfix; @include clearfix;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -359,7 +368,7 @@ body.ios {
.embed-title { .embed-title {
margin: 3px 0 1px; margin: 3px 0 1px;
color: #555; color: #555;
font-weight: bold; font-weight: 600;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;

15
web/sass-files/sass/partials/_responsive.scss
Просмотреть файл

@@ -22,11 +22,16 @@
width: 825px; width: 825px;
} }
.post-body { .post-body {
padding-left: 0; width: 736px;
border: none; border: none;
margin: 0; margin: 0;
} }
} }
.post-body {
float: none;
width: 750px;
margin: 0;
}
.post__content { .post__content {
width: 920px; width: 920px;
} }
@@ -63,10 +68,6 @@
} }
} }
} }
.post-body {
float: none;
width: 750px;
}
} }
} }
} }
@@ -89,6 +90,7 @@
margin-left: 60px; margin-left: 60px;
padding-left: 10px; padding-left: 10px;
border-left: 4px solid #EEE; border-left: 4px solid #EEE;
margin-bottom: 10px;
div.post-profile-img__container { div.post-profile-img__container {
.post-profile-img { .post-profile-img {
display: none; display: none;
@@ -98,7 +100,7 @@
width: 825px; width: 825px;
} }
.post-body { .post-body {
padding-left: 0; width: 736px;
border: none; border: none;
margin: 0; margin: 0;
} }
@@ -135,6 +137,7 @@
} }
} }
.post-body { .post-body {
margin: 0;
float: none; float: none;
width: 750px; width: 750px;
} }

2
web/sass-files/sass/partials/_search.scss
Просмотреть файл

@@ -77,7 +77,7 @@
border: none; border: none;
} }
.search-channel__name { .search-channel__name {
font-weight: bold; font-weight: 600;
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
} }

4
web/sass-files/sass/partials/_settings.scss
Просмотреть файл

@@ -56,7 +56,7 @@
.section-title { .section-title {
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: 600;
} }
.section-edit { .section-edit {
@@ -172,7 +172,7 @@
border-top:1px solid lightgrey; border-top:1px solid lightgrey;
} }
.post-profile-img { .post-profile-img {
@include border-radius(3px); @include border-radius(50px);
margin-right: 8px; margin-right: 8px;
} }
.member-name { .member-name {

3
web/sass-files/sass/partials/_sidebar--left.scss
Просмотреть файл

@@ -59,7 +59,7 @@
color: #999; color: #999;
&.unread-title { &.unread-title {
color: #333; color: #333;
font-weight: bold; font-weight: 600;
} }
&:hover, &:focus { &:hover, &:focus {
background: #e6f2fa; background: #e6f2fa;
@@ -70,6 +70,7 @@
color: #111; color: #111;
background-color: #e1e1e1; background-color: #e1e1e1;
border-radius: 0; border-radius: 0;
font-weight: 600;
} }
} }
} }

2
web/templates/head.html
Просмотреть файл

@@ -14,7 +14,7 @@
<link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon"> <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 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"> <link rel="stylesheet" href="/static/css/styles.css">
<script src="/static/js/min/perfect-scrollbar.min.js"></script> <script src="/static/js/min/perfect-scrollbar.min.js"></script>