Merge pull request #2556 from asaadmahmoodspin/ui-improvements

Multiple UI improvements
2025-02-25 18:55:24 -06:00 · 2016-03-29 12:09:22 -04:00
parent 442376c40a 68fe7a9753
commit 9c36210edd
20 changed files with 74 additions and 31 deletions
--- a/webapp/components/channel_notifications_modal.jsx
+++ b/webapp/components/channel_notifications_modal.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

+import $ from 'jquery';
 import {Modal} from 'react-bootstrap';
 import SettingItemMin from './setting_item_min.jsx';
 import SettingItemMax from './setting_item_max.jsx';
@@ -33,6 +34,7 @@ export default class ChannelNotificationsModal extends React.Component {
        };
    }
    updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        this.setState({activeSection: section});
    }
    componentWillReceiveProps(nextProps) {
--- a/webapp/components/post_info.jsx
+++ b/webapp/components/post_info.jsx
@@ -22,7 +22,7 @@ export default class PostInfo extends React.Component {
    }
    dropdownPosition(e) {
        var position = $('#post-list').height() - $(e.target).offset().top;
-        var dropdown = $(e.target).next('.dropdown-menu');
+        var dropdown = $(e.target).closest('.col__reply').find('.dropdown-menu');
        if (position < dropdown.height()) {
            dropdown.addClass('bottom');
        }
--- a/webapp/components/posts_view.jsx
+++ b/webapp/components/posts_view.jsx
@@ -570,7 +570,9 @@ function FloatingTimestamp({isScrolling, post}) {

    return (
        <div className={className}>
-            <span>{dateString}</span>
+            <div>
+                <span>{dateString}</span>
+            </div>
        </div>
    );
 }
--- a/webapp/components/team_general_tab.jsx
+++ b/webapp/components/team_general_tab.jsx
@@ -84,6 +84,7 @@ class GeneralTab extends React.Component {
    }

    updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        this.setState(this.setupInitialState(this.props));
        this.props.updateSection(section);
    }
--- a/webapp/components/team_settings_modal.jsx
+++ b/webapp/components/team_settings_modal.jsx
@@ -62,6 +62,7 @@ class TeamSettingsModal extends React.Component {
        }
    }
    updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        this.setState({activeSection: section});
    }
    render() {
--- a/webapp/components/textbox.jsx
+++ b/webapp/components/textbox.jsx
@@ -131,7 +131,7 @@ export default class Textbox extends React.Component {
        const helpText = (
            <div
                style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.5' : '0'}}
-                className='help_format_text'
+                className='help__format-text'
            >
                <b>
                    <FormattedMessage
@@ -208,8 +208,8 @@ export default class Textbox extends React.Component {
                    dangerouslySetInnerHTML={{__html: this.state.preview ? TextFormatting.formatText(this.props.messageText) : ''}}
                >
                </div>
-                {helpText}
                <div className='help__text'>
+                    {helpText}
                    {previewLink}
                    <a
                        target='_blank'
--- a/webapp/components/user_settings/premade_theme_chooser.jsx
+++ b/webapp/components/user_settings/premade_theme_chooser.jsx
@@ -7,6 +7,8 @@ import Constants from 'utils/constants.jsx';

 import React from 'react';

+import {FormattedMessage} from 'react-intl';
+
 export default class PremadeThemeChooser extends React.Component {
    constructor(props) {
        super(props);
@@ -50,6 +52,17 @@ export default class PremadeThemeChooser extends React.Component {
        return (
            <div className='row appearance-section'>
                {premadeThemes}
+                <div className='col-sm-12 padding-bottom x2'>
+                    <a
+                        href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-themes'
+                        target='_blank'
+                    >
+                        <FormattedMessage
+                            id='user.settings.display.theme.otherThemes'
+                            defaultMessage='See other themes'
+                        />
+                    </a>
+                </div>
            </div>
        );
    }
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

+import $ from 'jquery';
 import * as AsyncClient from 'utils/async_client.jsx';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
@@ -151,6 +152,7 @@ class AdvancedSettingsDisplay extends React.Component {
    }

    updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        this.props.updateSection(section);
    }

--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

+import $ from 'jquery';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import ManageLanguages from './manage_languages.jsx';
@@ -83,6 +84,7 @@ export default class UserSettingsDisplay extends React.Component {
        this.setState({selectedFont});
    }
    updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        this.updateState();
        this.props.updateSection(section);
    }
--- a/webapp/components/user_settings/user_settings_general.jsx
+++ b/webapp/components/user_settings/user_settings_general.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

+import $ from 'jquery';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import SettingPicture from '../setting_picture.jsx';
@@ -286,6 +287,7 @@ class UserSettingsGeneralTab extends React.Component {
        }
    }
    updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        const emailChangeInProgress = this.state.emailChangeInProgress;
        this.setState(Object.assign({}, this.setupInitialState(this.props), {emailChangeInProgress, clientError: '', serverError: '', emailError: ''}));
        this.submitActive = false;
--- a/webapp/components/user_settings/user_settings_integrations.jsx
+++ b/webapp/components/user_settings/user_settings_integrations.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

+import $ from 'jquery';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import ManageIncomingHooks from './manage_incoming_hooks.jsx';
@@ -47,6 +48,7 @@ class UserSettingsIntegrationsTab extends React.Component {
        this.state = {};
    }
    updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
        this.props.updateSection(section);
    }
    render() {
--- a/webapp/components/user_settings/user_settings_notifications.jsx
+++ b/webapp/components/user_settings/user_settings_notifications.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

+import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
@@ -162,6 +163,7 @@ class NotificationsTab extends React.Component {
        this.updateState();
        this.props.updateSection('');
        e.preventDefault();
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
    }
    updateSection(section) {
        this.updateState();
--- a/webapp/components/user_settings/user_settings_security.jsx
+++ b/webapp/components/user_settings/user_settings_security.jsx
@@ -204,6 +204,7 @@ class SecurityTab extends React.Component {
                this.props.updateSection('');
                this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null});
                e.preventDefault();
+                $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
            }.bind(this);

            return (
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1238,6 +1238,7 @@
  "user.settings.display.theme.customTheme": "Custom Theme",
  "user.settings.display.theme.describe": "Open to manage your theme",
  "user.settings.display.theme.import": "Import theme colors from Slack",
+  "user.settings.display.theme.otherThemes": "See other themes",
  "user.settings.display.theme.themeColors": "Theme Colors",
  "user.settings.display.theme.title": "Theme",
  "user.settings.display.title": "Display Settings",
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -66,6 +66,7 @@ body.ios {
        font-size: 13px;
        position: absolute;
        right: 0;
+        text-align: right;
        z-index: 3;
    }

@@ -74,16 +75,14 @@ body.ios {
    }
 }

-.help_format_text {
+.help__format-text {
    @include opacity(0);
    @include single-transition(all .2s ease);
-    bottom: -23px;
-    display: none !important;
+    display: inline-block;
    font-size: .85em;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    text-overflow: ellipsis;
+    margin-right: 10px;
+    vertical-align: bottom;
+    white-space: nowrap;

    b,
    i,
@@ -275,39 +274,36 @@ body.ios {
        outline: none;
        text-align: center;
    }
-
-    .beginning-messages-text {
-        color: grey;
-        display: block;
-        margin-bottom: 5px;
-        margin-top: 2px;
-        text-align: center;
-    }
 }

 .post-list__timestamp {
-    @include border-radius(3px);
    @include opacity(0);
    @include single-transition(all, .6s, ease);
    @include translateY(-45px);
-    @include font-smoothing(initial);
-    background: $primary-color;
-    color: $white;
    display: none;
-    font-size: 12px;
-    left: 50%;
-    line-height: 25px;
-    margin-left: -60px;
+    left: 0;
    position: absolute;
    text-align: center;
    top: 8px;
-    width: 120px;
+    width: 100%;
    z-index: 50;

    &.scrolling {
        @include translateY(0);
        @include opacity(.8);
    }
+
+    > div {
+        @include border-radius(3px);
+        @include font-smoothing(initial);
+        background: $primary-color;
+        color: $white;
+        display: inline-block;
+        font-size: 12px;
+        line-height: 25px;
+        padding: 0 8px;
+        text-align: center;
+    }
 }

 .post-list__arrows {
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -25,6 +25,10 @@
        }
    }

+    .help__format-text {
+        display: none;
+    }
+
    .sidebar--right__content {
        @include display-flex;
        @include flex-direction(column);
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -17,6 +17,14 @@
 }

@media screen and (max-width: 1440px) {
+    .inner-wrap {
+        &.move--left {
+            .help__format-text {
+                display: none;
+            }
+        }
+    }
+
    .date-separator,
    .new-separator {
        &.hovered--comment {
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -15,6 +15,10 @@
        }
    }

+    .help__format-text {
+        display: none;
+    }
+
    .inner-wrap {
        &.move--left {
            margin-right: 0;
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -200,7 +200,7 @@
            display: block;
            height: 40px;
            line-height: 34px;
-            margin: 1em 1rem;
+            margin: 1em 0;
            min-width: 200px;
            padding: 0 1em;
            width: 200px;
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -651,7 +651,7 @@ export function applyTheme(theme) {
    }

    if (theme.sidebarHeaderBg) {
-        changeCss('.sidebar--left .team__header, .sidebar--menu .team__header, .post-list__timestamp', 'background:' + theme.sidebarHeaderBg, 1);
+        changeCss('.sidebar--left .team__header, .sidebar--menu .team__header, .post-list__timestamp > div', 'background:' + theme.sidebarHeaderBg, 1);
        changeCss('.modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1);
        changeCss('#navbar .navbar-default', 'background:' + theme.sidebarHeaderBg, 1);
        changeCss('@media(max-width: 768px){.search-bar__container', 'background:' + theme.sidebarHeaderBg, 1);
@@ -659,7 +659,7 @@ export function applyTheme(theme) {
    }

    if (theme.sidebarHeaderTextColor) {
-        changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info, .post-list__timestamp', 'color:' + theme.sidebarHeaderTextColor, 1);
+        changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info, .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor, 1);
        changeCss('.sidebar--left .team__header .navbar-right .dropdown__icon, .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1);
        changeCss('.sidebar--left .team__header .user__name, .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1);
        changeCss('.sidebar--left .team__header:hover .user__name, .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1);