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

Merge pull request #420 from asaadmahmoodspin/ui-changes

Просмотр исходного кода 
Multiple UI Improvements
Этот коммит содержится в:
Joram Wilander
2015-08-21 09:24:42 -04:00
родитель 4a022752fa 332a4d1628
Коммит ddcdcc3e2c
12 изменённых файлов: 76 добавлений и 30 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@@ -105,7 +105,7 @@ module.exports = React.createClass({
if (!utils.areStatesEqual(newState, this.state)) { if (!utils.areStatesEqual(newState, this.state)) {
this.setState(newState); this.setState(newState);
} }
$('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}}); $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover click', html: true, delay: {show: 500, hide: 500}});
}, },
onSocketChange: function(msg) { onSocketChange: function(msg) {
if (msg.action === 'new_user') { if (msg.action === 'new_user') {

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

@@ -32,7 +32,7 @@ module.exports = React.createClass({
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 className="modal-title" id="myModalLabel">{channel.display_name}</h4> <h4 className="modal-title" id="myModalLabel"><span className="name">{channel.display_name}</span></h4>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="row form-group"> <div className="row form-group">

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

@@ -138,7 +138,7 @@ export default class ChannelInviteModal extends React.Component {
<div className='modal-content'> <div className='modal-content'>
<div className='modal-header'> <div className='modal-header'>
<button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button> <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
<h4 className='modal-title'>Add New Members to {this.state.channelName}</h4> <h4 className='modal-title'>Add New Members to <span className='name'>{this.state.channel_name}</span></h4>
</div> </div>
<div className='modal-body'> <div className='modal-body'>
{inviteError} {inviteError}

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

@@ -126,7 +126,7 @@ module.exports = React.createClass({
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title">{this.state.channel_name + " Members"}</h4> <h4 className="modal-title"><span className="name">{this.state.channel_name}</span> Members</h4>
<a className="btn btn-md btn-primary" data-toggle="modal" data-target="#channel_invite"><i className="glyphicon glyphicon-envelope"/> Add New Members</a> <a className="btn btn-md btn-primary" data-toggle="modal" data-target="#channel_invite"><i className="glyphicon glyphicon-envelope"/> Add New Members</a>
</div> </div>
<div ref="modalBody" className="modal-body"> <div ref="modalBody" className="modal-body">

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

@@ -300,7 +300,7 @@ export default class ChannelNotifications extends React.Component {
<span aria-hidden='true'>&times;</span> <span aria-hidden='true'>&times;</span>
<span className='sr-only'>Close</span> <span className='sr-only'>Close</span>
</button> </button>
<h4 className='modal-title'>{'Notification Preferences for ' + this.state.title}</h4> <h4 className='modal-title'>Notification Preferences for <span className='name'>{this.state.title}</span></h4>
</div> </div>
<div className='modal-body'> <div className='modal-body'>
<div className='settings-table'> <div className='settings-table'>

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

@@ -75,6 +75,7 @@ module.exports = React.createClass({
utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';'); utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';');
utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}'); utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}');
utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';');
utils.changeCss('.nav-pills__unread-indicator', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';');
} }
if (user.props.theme !== '#000000' && user.props.theme !== '#585858') { if (user.props.theme !== '#000000' && user.props.theme !== '#585858') {
@@ -377,8 +378,8 @@ module.exports = React.createClass({
<strong><UserProfile userId={teammate.id} /></strong> <strong><UserProfile userId={teammate.id} /></strong>
</div> </div>
<p className='channel-intro-text'> <p className='channel-intro-text'>
{'This is the start of your private message history with ' + teammateName + '.'}<br/> This is the start of your private message history with <strong>{teammateName}</strong>.<br/>
{'Private messages and files shared here are not shown to people outside this area.'} Private messages and files shared here are not shown to people outside this area.
</p> </p>
<a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
</div> </div>
@@ -416,9 +417,9 @@ module.exports = React.createClass({
<div className='channel-intro'> <div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {uiName}</h4> <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
<p className='channel-intro__content'> <p className='channel-intro__content'>
Welcome to {uiName}! Welcome to <strong>{uiName}</strong>!
<br/><br/> <br/><br/>
{'This is the first channel ' + strings.Team + 'mates see when they'} This is the first channel {strings.Team}mates see when they
<br/> <br/>
sign up - use it for posting updates everyone needs to know. sign up - use it for posting updates everyone needs to know.
<br/><br/> <br/><br/>
@@ -434,7 +435,7 @@ module.exports = React.createClass({
<div className='channel-intro'> <div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {uiName}</h4> <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
<p className='channel-intro__content'> <p className='channel-intro__content'>
{'This is the start of ' + uiName + ', a channel for non-work-related conversations.'} This is the start of <strong>{uiName}</strong>, a channel for non-work-related conversations.
<br/> <br/>
</p> </p>
<a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
@@ -453,7 +454,7 @@ module.exports = React.createClass({
var createMessage; var createMessage;
if (creatorName !== '') { if (creatorName !== '') {
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + creatorName + ' on ' + utils.displayDate(channel.create_at) + '.'; createMessage = (<span>This is the start of the <strong>{uiName}</strong> {uiType}, created by <strong>{creatorName}</strong> on <strong>{utils.displayDate(channel.create_at)}</strong></span>);
} else { } else {
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.'; createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.';
} }

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

@@ -20,7 +20,7 @@ module.exports = React.createClass({
var townSquare = ChannelStore.getByName("town-square"); var townSquare = ChannelStore.getByName("town-square");
utils.switchChannel(townSquare); utils.switchChannel(townSquare);
this.setState({channelName: "", remover: ""}) this.setState({channelName: "", remover: ""});
}, },
componentDidMount: function() { componentDidMount: function() {
$(this.getDOMNode()).on('show.bs.modal',this.handleShow); $(this.getDOMNode()).on('show.bs.modal',this.handleShow);
@@ -40,18 +40,18 @@ module.exports = React.createClass({
if (currentUser != null) { if (currentUser != null) {
return ( return (
<div className="modal fade" ref="modal" id="removed_from_channel" tabIndex="-1" role="dialog" aria-hidden="true"> <div className='modal fade' ref='modal' id='removed_from_channel' tabIndex='-1' role='dialog' aria-hidden='true'>
<div className="modal-dialog"> <div className='modal-dialog'>
<div className="modal-content"> <div className='modal-content'>
<div className="modal-header"> <div className='modal-header'>
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
<h4 className="modal-title">Removed from {channelName}</h4> <h4 className='modal-title'>Removed from <span className='name'>{channelName}</span></h4>
</div> </div>
<div className="modal-body"> <div className='modal-body'>
<p>{remover} removed you from {channelName}</p> <p>{remover} removed you from {channelName}</p>
</div> </div>
<div className="modal-footer"> <div className='modal-footer'>
<button type="button" className="btn btn-primary" data-dismiss="modal">Okay</button> <button type='button' className='btn btn-primary' data-dismiss='modal'>Okay</button>
</div> </div>
</div> </div>
</div> </div>

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

@@ -109,6 +109,26 @@ module.exports = React.createClass({
} }
); );
if (this.refs.previewArrowLeft) {
$(this.refs.previewArrowLeft.getDOMNode()).hover(
function onModalHover() {
$(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
}, function offModalHover() {
$(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
}
);
}
if (this.refs.previewArrowRight) {
$(this.refs.previewArrowRight.getDOMNode()).hover(
function onModalHover() {
$(self.refs.imageFooter.getDOMNode()).addClass('footer--show');
}, function offModalHover() {
$(self.refs.imageFooter.getDOMNode()).removeClass('footer--show');
}
);
}
$(window).on('keyup', this.handleKeyPress); $(window).on('keyup', this.handleKeyPress);
// keep track of whether or not this component is mounted so we can safely set the state asynchronously // keep track of whether or not this component is mounted so we can safely set the state asynchronously
@@ -252,13 +272,21 @@ module.exports = React.createClass({
var rightArrow = ''; var rightArrow = '';
if (this.props.filenames.length > 1) { if (this.props.filenames.length > 1) {
leftArrow = ( leftArrow = (
<a className='modal-prev-bar' href='#' onClick={this.handlePrev}> <a
ref='previewArrowLeft'
className='modal-prev-bar'
href='#'
onClick={this.handlePrev}>
<i className='image-control image-prev'/> <i className='image-control image-prev'/>
</a> </a>
); );
rightArrow = ( rightArrow = (
<a className='modal-next-bar' href='#' onClick={this.handleNext}> <a
ref='previewArrowRight'
className='modal-next-bar'
href='#'
onClick={this.handleNext}>
<i className='image-control image-next'/> <i className='image-control image-next'/>
</a> </a>
); );

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

@@ -65,6 +65,9 @@
} }
.channel-intro-img { .channel-intro-img {
float:left; float:left;
img {
@include border-radius(100px);
}
} }
.channel-intro__title { .channel-intro__title {
font-weight:600; font-weight:600;

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

@@ -50,6 +50,13 @@
@include clearfix; @include clearfix;
.modal-title { .modal-title {
float: left; float: left;
font-size: 17px;
line-height: 27px;
color: #f4f4f4;
.name {
font-weight: 600;
color: #fff;
}
} }
.modal-action { .modal-action {
padding: 0; padding: 0;

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

@@ -1,3 +1,8 @@
.channel-header__info .popover-content {
max-height: 250px;
overflow: auto;
}
.user-popover { .user-popover {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@@ -14,3 +19,4 @@
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; display: block;
} }

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

@@ -38,24 +38,25 @@
height: 100%; height: 100%;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
.nav-pills__unread-indicator { .nav-pills__unread-indicator {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
width: 70%; width: 72%;
background-color: darken($primary-color, 5%); color: #777;
color: white; background: #DCF0FF;
@include border-radius(50px);
margin: 0 auto; margin: 0 auto;
padding: 2px; padding: 3px 0 4px;
font-size: 13.5px;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
} }
.nav-pills__unread-indicator-top { .nav-pills__unread-indicator-top {
top: 56px; top: 66px;
} }
.nav-pills__unread-indicator-bottom { .nav-pills__unread-indicator-bottom {
bottom: 0px; bottom: 0px;