diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/admin_console/multiselect_settings.jsx | 5 | ||||
-rw-r--r-- | webapp/components/analytics/statistic_count.jsx | 2 | ||||
-rw-r--r-- | webapp/components/change_url_modal.jsx | 16 | ||||
-rw-r--r-- | webapp/components/form_error.jsx | 12 | ||||
-rw-r--r-- | webapp/components/tutorial/tutorial_intro_screens.jsx | 57 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_notifications.jsx | 2 | ||||
-rw-r--r-- | webapp/sass/components/_tutorial.scss | 9 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 17 | ||||
-rw-r--r-- | webapp/sass/routes/_admin-console.scss | 7 | ||||
-rw-r--r-- | webapp/sass/routes/_backstage.scss | 6 | ||||
-rw-r--r-- | webapp/sass/routes/_settings.scss | 9 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 4 |
12 files changed, 88 insertions, 58 deletions
diff --git a/webapp/components/admin_console/multiselect_settings.jsx b/webapp/components/admin_console/multiselect_settings.jsx index 8aad5d6eb..3120e03a8 100644 --- a/webapp/components/admin_console/multiselect_settings.jsx +++ b/webapp/components/admin_console/multiselect_settings.jsx @@ -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> ); } diff --git a/webapp/components/analytics/statistic_count.jsx b/webapp/components/analytics/statistic_count.jsx index 89e0cc8df..a4ca66476 100644 --- a/webapp/components/analytics/statistic_count.jsx +++ b/webapp/components/analytics/statistic_count.jsx @@ -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} diff --git a/webapp/components/change_url_modal.jsx b/webapp/components/change_url_modal.jsx index daba16827..73bcfdb95 100644 --- a/webapp/components/change_url_modal.jsx +++ b/webapp/components/change_url_modal.jsx @@ -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' diff --git a/webapp/components/form_error.jsx b/webapp/components/form_error.jsx index b7d1de16a..395adfaab 100644 --- a/webapp/components/form_error.jsx +++ b/webapp/components/form_error.jsx @@ -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'> diff --git a/webapp/components/tutorial/tutorial_intro_screens.jsx b/webapp/components/tutorial/tutorial_intro_screens.jsx index 277ff967f..af1ac4760 100644 --- a/webapp/components/tutorial/tutorial_intro_screens.jsx +++ b/webapp/components/tutorial/tutorial_intro_screens.jsx @@ -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> diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx index 1b5e78eb2..26d960d46 100644 --- a/webapp/components/user_settings/user_settings_notifications.jsx +++ b/webapp/components/user_settings/user_settings_notifications.jsx @@ -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' diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss index e735ba3f3..e4aff1785 100644 --- a/webapp/sass/components/_tutorial.scss +++ b/webapp/sass/components/_tutorial.scss @@ -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 { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index a3c354f89..baca9a127 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -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; } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 676264ab2..2a10fc486 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -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; diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index f9754f16d..244aad043 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -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 { diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 376cf611e..5b8c36c5c 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -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 { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index d2fd2efbf..003f6025d 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -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); |