From 4c28726760836d7d25164cd1b6488819be18c38c Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 29 Mar 2016 17:03:46 +0500 Subject: [PATCH 1/6] Multiple UI Improvements --- webapp/components/channel_notifications_modal.jsx | 2 ++ webapp/components/team_general_tab.jsx | 1 + webapp/components/team_settings_modal.jsx | 1 + .../user_settings/premade_theme_chooser.jsx | 12 ++++++++++++ .../user_settings/user_settings_advanced.jsx | 2 ++ .../user_settings/user_settings_display.jsx | 2 ++ .../user_settings/user_settings_general.jsx | 2 ++ .../user_settings/user_settings_integrations.jsx | 2 ++ .../user_settings/user_settings_notifications.jsx | 2 ++ .../user_settings/user_settings_security.jsx | 1 + webapp/i18n/en.json | 1 + webapp/i18n/es.json | 1 + webapp/i18n/fr.json | 1 + webapp/i18n/pt.json | 1 + 14 files changed, 31 insertions(+) diff --git a/webapp/components/channel_notifications_modal.jsx b/webapp/components/channel_notifications_modal.jsx index cc1162b773..564776876e 100644 --- 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) { diff --git a/webapp/components/team_general_tab.jsx b/webapp/components/team_general_tab.jsx index 776c84b48f..c27e8ca591 100644 --- 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); } diff --git a/webapp/components/team_settings_modal.jsx b/webapp/components/team_settings_modal.jsx index c197879933..6576433675 100644 --- 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() { diff --git a/webapp/components/user_settings/premade_theme_chooser.jsx b/webapp/components/user_settings/premade_theme_chooser.jsx index c35748b41d..61e876d400 100644 --- 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,16 @@ export default class PremadeThemeChooser extends React.Component { return (
{premadeThemes} + + +
); } diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx index 4fcdc9a419..61e0e1dadf 100644 --- 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); } diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index e56156049e..d815bd3710 100644 --- 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); } diff --git a/webapp/components/user_settings/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general.jsx index 2129847aa8..87cce9dc0f 100644 --- 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; diff --git a/webapp/components/user_settings/user_settings_integrations.jsx b/webapp/components/user_settings/user_settings_integrations.jsx index 94fc184bd4..9061e34dfb 100644 --- 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() { diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx index fe2db67278..b119c42f95 100644 --- 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(); diff --git a/webapp/components/user_settings/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security.jsx index f937844ec2..b34fa8582b 100644 --- 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 ( diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 00f4f333d8..11dfdf1ed0 100644 --- 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", diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json index 20b79fc847..c2b56e1cc5 100644 --- a/webapp/i18n/es.json +++ b/webapp/i18n/es.json @@ -1238,6 +1238,7 @@ "user.settings.display.theme.customTheme": "Tema Personalizado", "user.settings.display.theme.describe": "Abrir para administrar tu tema", "user.settings.display.theme.import": "Importar colores del tema desde Slack", + "user.settings.display.theme.otherThemes": "Ver otros temas", "user.settings.display.theme.themeColors": "Colores del Tema", "user.settings.display.theme.title": "Tema", "user.settings.display.title": "Configuración de Visualización", diff --git a/webapp/i18n/fr.json b/webapp/i18n/fr.json index 3270b88478..41e9fd3c60 100644 --- a/webapp/i18n/fr.json +++ b/webapp/i18n/fr.json @@ -1239,6 +1239,7 @@ "user.settings.display.theme.customTheme": "Thème personnalisé", "user.settings.display.theme.describe": "Ouvrez pour gérer votre thème", "user.settings.display.theme.import": "Importer des couleurs de thème depuis Slack", + "user.settings.display.theme.otherThemes": "Voir d'autres thèmes", "user.settings.display.theme.themeColors": "Couleurs de thème", "user.settings.display.theme.title": "Thème", "user.settings.display.title": "Paramètres d'affichage", diff --git a/webapp/i18n/pt.json b/webapp/i18n/pt.json index b758dd0b2a..0b515fb069 100644 --- a/webapp/i18n/pt.json +++ b/webapp/i18n/pt.json @@ -1238,6 +1238,7 @@ "user.settings.display.theme.customTheme": "Tema Customizado", "user.settings.display.theme.describe": "Abrir para gerenciar seu tema", "user.settings.display.theme.import": "Importar tema de cores do Slack", + "user.settings.display.theme.otherThemes": "Veja outros temas", "user.settings.display.theme.themeColors": "Tema de Cores", "user.settings.display.theme.title": "Tema", "user.settings.display.title": "Configurações de Exibição", From 501eef0385065d8630e5ddc299f8693a507e3a29 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 29 Mar 2016 17:55:30 +0500 Subject: [PATCH 2/6] Additional UI improvements --- webapp/components/posts_view.jsx | 4 ++- webapp/components/textbox.jsx | 4 +-- webapp/sass/layout/_post.scss | 44 ++++++++++++-------------- webapp/sass/layout/_sidebar-right.scss | 4 +++ webapp/sass/responsive/_desktop.scss | 8 +++++ webapp/sass/responsive/_tablet.scss | 4 +++ webapp/sass/routes/_signup.scss | 2 +- webapp/utils/utils.jsx | 4 +-- 8 files changed, 44 insertions(+), 30 deletions(-) diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx index 8b4b0c6623..e034a592e6 100644 --- a/webapp/components/posts_view.jsx +++ b/webapp/components/posts_view.jsx @@ -570,7 +570,9 @@ function FloatingTimestamp({isScrolling, post}) { return (
- {dateString} +
+ {dateString} +
); } diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index 371c581e52..63d5486a44 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -131,7 +131,7 @@ export default class Textbox extends React.Component { const helpText = (
- {helpText}
+ {helpText} {previewLink} 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 { diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index a7b631047c..062c3bde13 100644 --- 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); diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index ccd6f02263..1ae4b6b701 100644 --- 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 { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 0a725a5588..6863e660ba 100644 --- 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; diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index 09f8e41856..61bb93daf2 100644 --- 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; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index ac12edb827..04044746b3 100644 --- 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); From 128e6c9d97420f35e4b9ddb8ca6cc218c85a65c6 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 29 Mar 2016 17:59:25 +0500 Subject: [PATCH 3/6] Fixing see other themes link --- .../user_settings/premade_theme_chooser.jsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/webapp/components/user_settings/premade_theme_chooser.jsx b/webapp/components/user_settings/premade_theme_chooser.jsx index 61e876d400..326120957f 100644 --- a/webapp/components/user_settings/premade_theme_chooser.jsx +++ b/webapp/components/user_settings/premade_theme_chooser.jsx @@ -52,16 +52,17 @@ export default class PremadeThemeChooser extends React.Component { return (
{premadeThemes} - - - +
+ + + +
); } From ab6ab3a967bbb1ff5ce2cef12b2fddd196913014 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 29 Mar 2016 18:22:23 +0500 Subject: [PATCH 4/6] Fixing dropdown for posts on mobile --- webapp/components/post_info.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/components/post_info.jsx b/webapp/components/post_info.jsx index 0aa71edd77..2d41b0e540 100644 --- 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'); } From eea2031b8b8c871a0f3f8bb034c6739b422d188e Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 29 Mar 2016 19:07:59 +0500 Subject: [PATCH 5/6] Removing other theme translations --- webapp/i18n/es.json | 2 +- webapp/i18n/fr.json | 2 +- webapp/i18n/pt.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json index c2b56e1cc5..0d98ca866b 100644 --- a/webapp/i18n/es.json +++ b/webapp/i18n/es.json @@ -1238,7 +1238,7 @@ "user.settings.display.theme.customTheme": "Tema Personalizado", "user.settings.display.theme.describe": "Abrir para administrar tu tema", "user.settings.display.theme.import": "Importar colores del tema desde Slack", - "user.settings.display.theme.otherThemes": "Ver otros temas", + "user.settings.display.theme.otherThemes": "", "user.settings.display.theme.themeColors": "Colores del Tema", "user.settings.display.theme.title": "Tema", "user.settings.display.title": "Configuración de Visualización", diff --git a/webapp/i18n/fr.json b/webapp/i18n/fr.json index 41e9fd3c60..f8eadae854 100644 --- a/webapp/i18n/fr.json +++ b/webapp/i18n/fr.json @@ -1239,7 +1239,7 @@ "user.settings.display.theme.customTheme": "Thème personnalisé", "user.settings.display.theme.describe": "Ouvrez pour gérer votre thème", "user.settings.display.theme.import": "Importer des couleurs de thème depuis Slack", - "user.settings.display.theme.otherThemes": "Voir d'autres thèmes", + "user.settings.display.theme.otherThemes": "", "user.settings.display.theme.themeColors": "Couleurs de thème", "user.settings.display.theme.title": "Thème", "user.settings.display.title": "Paramètres d'affichage", diff --git a/webapp/i18n/pt.json b/webapp/i18n/pt.json index 0b515fb069..390dc97a30 100644 --- a/webapp/i18n/pt.json +++ b/webapp/i18n/pt.json @@ -1238,7 +1238,7 @@ "user.settings.display.theme.customTheme": "Tema Customizado", "user.settings.display.theme.describe": "Abrir para gerenciar seu tema", "user.settings.display.theme.import": "Importar tema de cores do Slack", - "user.settings.display.theme.otherThemes": "Veja outros temas", + "user.settings.display.theme.otherThemes": "", "user.settings.display.theme.themeColors": "Tema de Cores", "user.settings.display.theme.title": "Tema", "user.settings.display.title": "Configurações de Exibição", From 68fe7a9753b678f4101f9b072975c1058d3d6813 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 29 Mar 2016 20:09:43 +0500 Subject: [PATCH 6/6] Removing translated lines --- webapp/i18n/es.json | 1 - webapp/i18n/fr.json | 1 - webapp/i18n/pt.json | 1 - 3 files changed, 3 deletions(-) diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json index 0d98ca866b..20b79fc847 100644 --- a/webapp/i18n/es.json +++ b/webapp/i18n/es.json @@ -1238,7 +1238,6 @@ "user.settings.display.theme.customTheme": "Tema Personalizado", "user.settings.display.theme.describe": "Abrir para administrar tu tema", "user.settings.display.theme.import": "Importar colores del tema desde Slack", - "user.settings.display.theme.otherThemes": "", "user.settings.display.theme.themeColors": "Colores del Tema", "user.settings.display.theme.title": "Tema", "user.settings.display.title": "Configuración de Visualización", diff --git a/webapp/i18n/fr.json b/webapp/i18n/fr.json index f8eadae854..3270b88478 100644 --- a/webapp/i18n/fr.json +++ b/webapp/i18n/fr.json @@ -1239,7 +1239,6 @@ "user.settings.display.theme.customTheme": "Thème personnalisé", "user.settings.display.theme.describe": "Ouvrez pour gérer votre thème", "user.settings.display.theme.import": "Importer des couleurs de thème depuis Slack", - "user.settings.display.theme.otherThemes": "", "user.settings.display.theme.themeColors": "Couleurs de thème", "user.settings.display.theme.title": "Thème", "user.settings.display.title": "Paramètres d'affichage", diff --git a/webapp/i18n/pt.json b/webapp/i18n/pt.json index 390dc97a30..b758dd0b2a 100644 --- a/webapp/i18n/pt.json +++ b/webapp/i18n/pt.json @@ -1238,7 +1238,6 @@ "user.settings.display.theme.customTheme": "Tema Customizado", "user.settings.display.theme.describe": "Abrir para gerenciar seu tema", "user.settings.display.theme.import": "Importar tema de cores do Slack", - "user.settings.display.theme.otherThemes": "", "user.settings.display.theme.themeColors": "Tema de Cores", "user.settings.display.theme.title": "Tema", "user.settings.display.title": "Configurações de Exibição",