From 860f2c8332f34d02e53ea1460decb4d1490bcbd4 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 31 Jul 2017 17:10:43 +0500 Subject: Multiple Ui improvements (#7029) * PLT-7119 - Updating headings on compact view * PLT-7103 - Removing line below channel intro * PLT-7112 - Fixing system console banner * PLT-7144 - Adding ellipsis to system console boxes * PLT-7181 - Changing channel header opacity * PLT-6899 - Updating unread bar * Updating margin for new messages indicator --- webapp/components/admin_console/cluster_settings.jsx | 4 ++-- webapp/components/admin_console/database_settings.jsx | 4 ++-- webapp/components/post_view/new_message_indicator.jsx | 11 +++++++---- webapp/components/sidebar.jsx | 8 ++++---- webapp/components/unread_channel_indicator.jsx | 7 +++++++ webapp/i18n/en.json | 5 ++--- webapp/sass/layout/_headers.scss | 3 +-- webapp/sass/layout/_post.scss | 9 +++++++-- webapp/sass/layout/_sidebar-left.scss | 12 +++++++++++- webapp/sass/routes/_admin-console.scss | 2 +- webapp/sass/routes/_statistics.scss | 8 ++++++++ webapp/utils/constants.jsx | 1 + webapp/utils/utils.jsx | 5 +++-- 13 files changed, 56 insertions(+), 23 deletions(-) diff --git a/webapp/components/admin_console/cluster_settings.jsx b/webapp/components/admin_console/cluster_settings.jsx index 0c3346c5a..36f86f0ef 100644 --- a/webapp/components/admin_console/cluster_settings.jsx +++ b/webapp/components/admin_console/cluster_settings.jsx @@ -120,12 +120,12 @@ export default class ClusterSettings extends AdminSettings { {configLoadedFromCluster} {clusterTableContainer} -

+

-

+
{warning} -

+

-

+
); diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 25ad51ba9..788f14cd9 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -745,15 +745,15 @@ export default class Sidebar extends React.Component { const above = ( ); const below = ( ); diff --git a/webapp/components/unread_channel_indicator.jsx b/webapp/components/unread_channel_indicator.jsx index d1ffd4c0a..9462761ac 100644 --- a/webapp/components/unread_channel_indicator.jsx +++ b/webapp/components/unread_channel_indicator.jsx @@ -6,18 +6,25 @@ import PropTypes from 'prop-types'; // Indicator for the left sidebar which indicate if there's unread posts in a channel that is not shown // because it is either above or below the screen import React from 'react'; +import Constants from 'utils/constants.jsx'; export default function UnreadChannelIndicator(props) { + const unreadIcon = Constants.UNREAD_ICON_SVG; let displayValue = 'none'; if (props.show) { displayValue = 'block'; } + return (
{props.text} +
); } diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 202aad177..57ef37a07 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1923,7 +1923,7 @@ "posts_view.loadMore": "Load more messages", "posts_view.loadingMore": "Loading more messages...", "posts_view.newMsg": "New Messages", - "posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}} below", + "posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}}", "quick_switch_modal.channels": "Channels", "quick_switch_modal.channelsShortcut.mac": "- ⌘K", "quick_switch_modal.channelsShortcut.windows": "- CTRL+K", @@ -2026,8 +2026,7 @@ "sidebar.tutorialScreen1": "

Channels

Channels organize conversations across different topics. They’re open to everyone on your team. To send private communications use Direct Messages for a single person or Private Channel for multiple people.

", "sidebar.tutorialScreen2": "

\"{townsquare}\" and \"{offtopic}\" channels

Here are two public channels to start:

{townsquare} is a place for team-wide communication. Everyone in your team is a member of this channel.

{offtopic} is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.

", "sidebar.tutorialScreen3": "

Creating and Joining Channels

Click \"More...\" to create a new channel or join an existing one.

You can also create a new channel by clicking the \"+\" symbol next to the public or private channel header.

", - "sidebar.unreadAbove": "Unread post(s) above", - "sidebar.unreadBelow": "Unread post(s) below", + "sidebar.unreads": "More unreads", "sidebar_header.tutorial": "

Main Menu

The Main Menu is where you can Invite New Members, access your Account Settings and set your Theme Color.

Team administrators can also access their Team Settings from this menu.

System administrators will find a System Console option to administrate the entire system.

", "sidebar_right_menu.accountSettings": "Account Settings", "sidebar_right_menu.addMemberToTeam": "Add Members to Team", diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 9a4d6771e..44b8ab4f0 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -249,8 +249,7 @@ } .channel-intro { - border-bottom: 1px solid $light-gray; - margin: 0 auto 15px; + margin: 0 auto 10px; padding: 0 15px; &.channel-intro--centered { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 272d22479..cb2431555 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -284,7 +284,7 @@ bottom: 0; font-size: 13.5px; left: 0; - margin: 0 auto; + margin: 5px auto; position: absolute; right: 0; text-align: center; @@ -299,11 +299,15 @@ top: 1px; } + .icon { + margin-left: 5px; + } + div { @include border-radius(50px); cursor: pointer; display: inline-block; - padding: 5px 10px; + padding: 4px 20px 3px; } &.visible { @@ -774,6 +778,7 @@ } .markdown__heading { + clear: both; font-size: 1em; margin: 0; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index 4be608803..515f87a87 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -154,15 +154,25 @@ font-size: 13.5px; left: 15px; margin: 0 auto; - padding: 3px 0 4px; + padding: 4px 0 3px; position: fixed; text-align: center; width: 190px; z-index: 1; + + .icon { + margin-left: 5px; + } } .nav-pills__unread-indicator-top { top: 80px; + + .icon { + svg { + @include transform(rotate(180deg)); + } + } } .nav-pills__unread-indicator-bottom { diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 7b449e2c8..9e8c74484 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -183,7 +183,7 @@ border: 1px solid #ddd; font-size: .95em; margin: 2em 0; - padding: .7em 1.5em; + padding: .8em 1.5rem; .banner__heading { font-size: 1.5em; diff --git a/webapp/sass/routes/_statistics.scss b/webapp/sass/routes/_statistics.scss index 5a35039e7..85232708a 100644 --- a/webapp/sass/routes/_statistics.scss +++ b/webapp/sass/routes/_statistics.scss @@ -16,6 +16,14 @@ padding: 7px 10px; text-align: left; + span { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: calc(100% - 20px); + } + .fa { color: #555555; float: right; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 0ff90087a..69492e95c 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -446,6 +446,7 @@ export const Constants = { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + UNREAD_ICON_SVG: "", MEMBERS_ICON_SVG: " ", TEAM_INFO_SVG: " ", FLAG_FILLED_ICON_SVG: " ", diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index da5436737..658ccd74b 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -492,11 +492,10 @@ export function applyTheme(theme) { if (theme.sidebarText) { changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText); changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover, .app__body .sidebar__switcher button:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15)); - changeCss('.sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6)); + changeCss('.app__body .sidebar--left .nav-pills__container li > h4, .app__body .sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6)); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8)); changeCss('.app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8)); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); - changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus, .app__body .sidebar--left .nav-pills__container li > h4', 'color:' + theme.sidebarText); changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg, .app__body .sidebar-item .icon', 'fill:' + theme.sidebarText); changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3)); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2)); @@ -571,6 +570,7 @@ export function applyTheme(theme) { } if (theme.mentionColor) { + changeCss('.sidebar--left .nav-pills__unread-indicator svg', 'fill:' + theme.mentionColor); changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor); changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor); changeCss('.app__body .multi-teams .team-sidebar .badge', 'color:' + theme.mentionColor); @@ -715,6 +715,7 @@ export function applyTheme(theme) { if (theme.buttonColor) { changeCss('.app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor); + changeCss('.app__body .new-messages__button svg', 'fill:' + theme.buttonColor); } if (theme.errorTextColor) { -- cgit v1.2.3-1-g7c22