Multiple UI fixes (#3357)
* Multiple UI fixes * Removing utils from tutorial file
Этот коммит содержится в:
коммит произвёл
Corey Hulen
родитель
ca138883ab
Коммит
b130a32eac
@@ -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);
|
||||
|
||||
Ссылка в новой задаче
Block a user