Revert "Multiple UI Improvements"

This commit is contained in:
Joram Wilander
2015-08-20 11:58:50 -04:00
parent 4fafac5225
commit 343ff54a32
11 changed files with 21 additions and 52 deletions

View File

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

View File

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

View File

@@ -114,7 +114,7 @@ module.exports = React.createClass({
<div className="modal-content">
<div className="modal-header">
<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 <span className="name">{this.state.channel_name}</span></h4>
<h4 className="modal-title">Add New Members to {this.state.channel_name}</h4>
</div>
<div className="modal-body">
{ invite_error }

View File

@@ -126,7 +126,7 @@ module.exports = React.createClass({
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title"><span className="name">{this.state.channel_name}</span> Members</h4>
<h4 className="modal-title">{this.state.channel_name + " 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>
</div>
<div ref="modalBody" className="modal-body">

View File

@@ -209,7 +209,7 @@ module.exports = React.createClass({
<span aria-hidden="true">&times;</span>
<span className="sr-only">Close</span>
</button>
<h4 className="modal-title">Notification Preferences for <span className="name">{this.state.title}</span></h4>
<h4 className="modal-title">{"Notification Preferences for " + this.state.title}</h4>
</div>
<div className="modal-body">
<div className="settings-table">

View File

@@ -75,7 +75,6 @@ module.exports = React.createClass({
utils.changeCss('.mention-link', 'color: ' + 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('.nav-pills__unread-indicator', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';');
}
if (user.props.theme !== '#000000' && user.props.theme !== '#585858') {
@@ -378,8 +377,8 @@ module.exports = React.createClass({
<strong><UserProfile userId={teammate.id} /></strong>
</div>
<p className='channel-intro-text'>
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.
{'This is the start of your private message history with ' + teammateName + '.'}<br/>
{'Private messages and files shared here are not shown to people outside this area.'}
</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>
</div>
@@ -417,9 +416,9 @@ module.exports = React.createClass({
<div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {uiName}</h4>
<p className='channel-intro__content'>
Welcome to <strong>{uiName}</strong>!
Welcome to {uiName}!
<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/>
sign up - use it for posting updates everyone needs to know.
<br/><br/>
@@ -435,7 +434,7 @@ module.exports = React.createClass({
<div className='channel-intro'>
<h4 className='channel-intro__title'>Beginning of {uiName}</h4>
<p className='channel-intro__content'>
This is the start of <strong>{uiName}</strong>, a channel for non-work-related conversations.
{'This is the start of ' + uiName + ', a channel for non-work-related conversations.'}
<br/>
</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>
@@ -454,7 +453,7 @@ module.exports = React.createClass({
var createMessage;
if (creatorName !== '') {
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>);
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + creatorName + ' on ' + utils.displayDate(channel.create_at) + '.';
} else {
createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.';
}

View File

@@ -45,7 +45,7 @@ module.exports = React.createClass({
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 className="modal-title">Removed from <span className="name">{channelName}</span></h4>
<h4 className="modal-title">Removed from {channelName}</h4>
</div>
<div className="modal-body">
<p>{remover} removed you from {channelName}</p>

View File

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

View File

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

View File

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

View File

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