* Multiple UI fixes

* Removing utils from tutorial file
Этот коммит содержится в:
Asaad Mahmood
2016-06-16 22:20:43 +05:00
коммит произвёл Corey Hulen
родитель ca138883ab
Коммит b130a32eac
12 изменённых файлов: 88 добавлений и 58 удалений

Просмотреть файл

@@ -54,7 +54,10 @@ export default class MultiSelectSetting extends React.Component {
onChange={this.handleChange}
value={this.props.selected}
/>
<FormError error={this.state.error}/>
<FormError
noMargin={true}
error={this.state.error}
/>
</Setting>
);
}

Просмотреть файл

@@ -15,7 +15,7 @@ export default class StatisticCount extends React.Component {
);
return (
<div className='col-sm-3'>
<div className='col-md-3 col-sm-6'>
<div className='total-count'>
<div className='title'>
{this.props.title}

Просмотреть файл

@@ -2,7 +2,7 @@
// See License.txt for license information.
import ReactDOM from 'react-dom';
import {Modal} from 'react-bootstrap';
import {Modal, Tooltip, OverlayTrigger} from 'react-bootstrap';
import * as Utils from 'utils/utils.jsx';
import {FormattedMessage} from 'react-intl';
@@ -131,6 +131,9 @@ export default class ChangeUrlModal extends React.Component {
const fullTeamUrl = Utils.getTeamURLFromAddressBar();
const teamURL = Utils.getShortenedTeamURL();
const urlTooltip = (
<Tooltip id='urlTooltip'>{fullTeamUrl}</Tooltip>
);
return (
<Modal
@@ -150,13 +153,12 @@ export default class ChangeUrlModal extends React.Component {
<label className='col-sm-2 form__label control-label'>{this.props.urlLabel}</label>
<div className='col-sm-10'>
<div className={urlClass}>
<span
data-toggle='tooltip'
title={fullTeamUrl}
className='input-group-addon'
<OverlayTrigger
placement='top'
overlay={urlTooltip}
>
{teamURL}
</span>
<span className='input-group-addon'>{teamURL}</span>
</OverlayTrigger>
<input
type='text'
ref='urlinput'

Просмотреть файл

@@ -8,6 +8,7 @@ export default class FormError extends React.Component {
// accepts either a single error or an array of errors
return {
error: React.PropTypes.node,
noMargin: React.PropTypes.node,
errors: React.PropTypes.arrayOf(React.PropTypes.node)
};
}
@@ -26,6 +27,7 @@ export default class FormError extends React.Component {
// look for the first truthy error to display
let message = this.props.error;
const noMargin = this.props.noMargin;
if (!message) {
for (const error of this.props.errors) {
@@ -39,6 +41,16 @@ export default class FormError extends React.Component {
return null;
}
if (noMargin) {
return (
<div className='has-error'>
<label className='control-label'>
{message}
</label>
</div>
);
}
return (
<div className='form-group has-error'>
<label className='control-label'>

Просмотреть файл

@@ -4,7 +4,6 @@
import UserStore from 'stores/user_store.jsx';
import TeamStore from 'stores/team_store.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
import * as Utils from 'utils/utils.jsx';
import * as AsyncClient from 'utils/async_client.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
@@ -218,40 +217,34 @@ export default class TutorialIntroScreens extends React.Component {
);
}
render() {
const height = Utils.windowHeight() - 100;
const screen = this.createScreen();
return (
<div
className='tutorials__scroll'
style={{height}}
>
<div className='tutorial-steps__container'>
<div className='tutorial__content'>
<div className='tutorial__steps'>
{screen}
<div className='tutorial__footer'>
<button
className='btn btn-primary'
tabIndex='1'
onClick={this.handleNext}
>
<FormattedMessage
id='tutorial_intro.next'
defaultMessage='Next'
/>
</button>
<a
className='tutorial-skip'
href='#'
onClick={this.skipTutorial}
>
<FormattedMessage
id='tutorial_intro.skip'
defaultMessage='Skip tutorial'
/>
</a>
</div>
<div className='tutorial-steps__container'>
<div className='tutorial__content'>
<div className='tutorial__steps'>
{screen}
<div className='tutorial__footer'>
<button
className='btn btn-primary'
tabIndex='1'
onClick={this.handleNext}
>
<FormattedMessage
id='tutorial_intro.next'
defaultMessage='Next'
/>
</button>
<a
className='tutorial-skip'
href='#'
onClick={this.skipTutorial}
>
<FormattedMessage
id='tutorial_intro.skip'
defaultMessage='Skip tutorial'
/>
</a>
</div>
</div>
</div>

Просмотреть файл

@@ -320,7 +320,7 @@ class NotificationsTab extends React.Component {
inputs.push(
<div
key='oauthEmailInfo'
className='form-group'
className='padding-top'
>
<FormattedMessage
id='user.settings.push_notification.disabled_long'

Просмотреть файл

@@ -66,11 +66,11 @@
margin-top: -10px;
.arrow {
border-top-width: 0;
border-bottom-color: $white;
top: -10px;
border-top-width: 0;
left: 50%;
margin-left: -10px;
top: -10px;
}
}
@@ -168,12 +168,15 @@
.tutorial-steps__container {
display: table;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
.tutorial__content {
display: table-cell;
padding: 20px 40px 40px;
padding: 20px 40px 80px;
vertical-align: middle;
.tutorial__steps {

Просмотреть файл

@@ -534,9 +534,8 @@ body.ios {
ol,
ul {
display: inline-block;
margin-top: 1px;
padding-left: 30px;
clear: both;
padding-left: 20px;
}
}
@@ -911,14 +910,18 @@ body.ios {
ul,
ol {
margin-bottom: .4em;
padding-left: 20px;
p {
margin-bottom: 0;
}
li ul,
li ol {
padding: 10px 0 0 20px;
li {
ul,
ol {
margin: 0;
padding: 0 0 0 20px;
}
}
li.list-item--task-list ul,
@@ -991,7 +994,7 @@ body.ios {
margin: 0 0 10px;
text-rendering: auto;
&.pull-left{
&.pull-left {
margin: 5px 5px 0 0;
}

Просмотреть файл

@@ -82,6 +82,12 @@
text-align: left;
}
.has-error {
.control-label {
font-weight: normal;
}
}
.form-group {
margin-bottom: 25px;
}
@@ -321,7 +327,6 @@
.sidebar-section-title,
.sidebar-subsection-title {
@include clearfix;
color: alpha-color($white, .5);
display: block;
font-size: 13px;

Просмотреть файл

@@ -303,14 +303,14 @@ body {
border: 1px solid $light-gray;
display: inline-block;
height: 210px;
margin: 0 0 20px 30px;
margin: 0 30px 30px 0;
padding: 20px;
text-align: center;
vertical-align: top;
width: 250px;
&:first-child {
margin-left: 0;
&:last-child {
margin-right: 0;
}
&:hover {

Просмотреть файл

@@ -269,6 +269,7 @@
display: none;
font-size: 12px;
margin-right: 5px;
&.fa-chevron-down {
margin-right: 0;
position: relative;
@@ -290,6 +291,14 @@
.divider-light {
border-bottom: 1px solid lightgrey;
& + .divider-light {
display: none;
}
& + .divider-dark {
display: none;
}
}
.setting-list {

Просмотреть файл

@@ -607,7 +607,7 @@ export function applyTheme(theme) {
if (theme.centerChannelColor) {
changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1);
changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1);
changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1);
changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2);
@@ -638,7 +638,7 @@ export function applyTheme(theme) {
changeCss('.app__body .input-group-addon, .app__body .search-bar__container .search__form, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
changeCss('.app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor, 2);
changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1);