From d64d1f4029505f48bb86035a557e2f4229e55443 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 6 Jul 2017 18:07:43 +0500 Subject: PLT-6905 - Updating channel header design (#6789) * PLT-6905 - Updating channel header design * Updating border-radius * Updating radius for wide icons * Updating trigger for overlay * Updating UI for channel header * Updating channel header sizing * Updating channel header css * Updating sidebar css * Updating status icons * Adjusting border * Updating comment * Removing type from status icon * Fixing UI issues for the channel header/sidebar * make "Add a channel description" open the channel header modal * Updating status and opacity * Updating stauts icon positioning * Updating description and heading size * Updating UI changes * Updating UI changes * add a focused class to the parent div .search__form and then remove when hover away * Fix active state for pinned posts icon * Updating UI changes * Update channel header text --- webapp/components/analytics/table_chart.jsx | 1 + webapp/components/change_url_modal.jsx | 1 + webapp/components/channel_header.jsx | 208 ++++++++++++------- webapp/components/channel_info_modal.jsx | 16 +- .../components/create_team/components/team_url.jsx | 1 + webapp/components/file_attachment.jsx | 2 + webapp/components/navbar.jsx | 30 ++- .../popover_list_members/popover_list_members.jsx | 105 +++++----- webapp/components/post_view/post_flag_icon.jsx | 13 +- webapp/components/post_view/reaction/reaction.jsx | 1 + webapp/components/rename_channel_modal.jsx | 1 + webapp/components/rhs_header_post.jsx | 4 + webapp/components/search_bar.jsx | 154 ++++++++------ webapp/components/search_results_header.jsx | 3 + webapp/components/sidebar.jsx | 43 ++-- webapp/components/sidebar_header.jsx | 2 +- webapp/components/sidebar_right/sidebar_right.jsx | 6 +- .../suggestion/switch_channel_provider.jsx | 16 +- .../team_sidebar/components/team_button.jsx | 1 + .../user_settings/custom_theme_chooser.jsx | 1 + .../components/webrtc/components/webrtc_header.jsx | 2 + webapp/i18n/en.json | 11 +- webapp/sass/components/_buttons.scss | 2 +- webapp/sass/components/_inputs.scss | 20 ++ webapp/sass/components/_mentions.scss | 27 ++- webapp/sass/components/_popover.scss | 58 +++++- webapp/sass/components/_search.scss | 63 ++---- webapp/sass/components/_status-icon.scss | 17 +- webapp/sass/components/_webrtc.scss | 5 - webapp/sass/layout/_headers.scss | 230 ++++++++++++++------- webapp/sass/layout/_navigation.scss | 59 ++++-- webapp/sass/layout/_post.scss | 9 +- webapp/sass/layout/_sidebar-left.scss | 145 +++++++++---- webapp/sass/layout/_sidebar-right.scss | 46 ++++- webapp/sass/responsive/_desktop.scss | 18 +- webapp/sass/responsive/_mobile.scss | 92 ++++++--- webapp/sass/responsive/_tablet.scss | 45 +++- webapp/sass/routes/_about-modal.scss | 12 +- webapp/sass/utils/_mixins.scss | 22 +- webapp/stores/search_store.jsx | 2 +- webapp/utils/constants.jsx | 19 +- webapp/utils/utils.jsx | 56 +++-- 42 files changed, 1047 insertions(+), 522 deletions(-) (limited to 'webapp') diff --git a/webapp/components/analytics/table_chart.jsx b/webapp/components/analytics/table_chart.jsx index 408871cb7..5836e09a7 100644 --- a/webapp/components/analytics/table_chart.jsx +++ b/webapp/components/analytics/table_chart.jsx @@ -31,6 +31,7 @@ export default function TableChart(props) {
); + const pinnedPostTooltip = ( + + + + ); + const flaggedTooltip = ( +
this.initWebrtc(otherUserId, !isOffline)} disabled={isOffline} > + ); + } else { + headerTextElement = ( +
+ {channel.header} +
+ ); + } + + headerTextContainer = ( + + {headerTextElement} + + ); } else { - headerText = channel.header; + headerTextContainer = ( + this.setState({showEditChannelHeaderModal: true})} + > + + + ); + } + + let editHeaderModal; + if (this.state.showEditChannelHeaderModal) { + editHeaderModal = ( + this.setState({showEditChannelHeaderModal: false})} + channel={channel} + /> + ); } let toggleFavoriteTooltip; @@ -784,6 +848,7 @@ export default class ChannelHeader extends React.Component { const toggleFavorite = ( @@ -822,19 +887,23 @@ export default class ChannelHeader extends React.Component { const leaveChannelModal = this.createLeaveChannelModal(); + let pinnedIconClass = 'channel-header__icon'; + if (this.state.pinsOpen) { + pinnedIconClass += ' active'; + } + return (
- +
- +
- {webrtc} {toggleFavorite} -
+ - -
- + {headerTextContainer}
+ + {webrtc} + {popoverListMembers} - + + - -
- - - {'@'} - - -
+ +
+
+ 		-
- +
- - - - -
+ +
+
+ {editHeaderModal} {editPurposeModal} {channelMembersModal} {leaveChannelModal} diff --git a/webapp/components/channel_info_modal.jsx b/webapp/components/channel_info_modal.jsx index 25824e28c..186dfc5cf 100644 --- a/webapp/components/channel_info_modal.jsx +++ b/webapp/components/channel_info_modal.jsx @@ -29,6 +29,8 @@ export default class ChannelInfoModal extends React.Component { render() { let channel = this.props.channel; let channelIcon; + const globeIcon = Constants.GLOBE_ICON_SVG; + const lockIcon = Constants.LOCK_ICON_SVG; if (!channel) { const notFound = Utils.localizeMessage('channel_info.notFound', 'No Channel Found'); @@ -43,9 +45,19 @@ export default class ChannelInfoModal extends React.Component { } if (channel.type === 'O') { - channelIcon = (); + channelIcon = ( + + ); } else if (channel.type === 'P') { - channelIcon = (); + channelIcon = ( + + ); } const channelURL = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; diff --git a/webapp/components/create_team/components/team_url.jsx b/webapp/components/create_team/components/team_url.jsx index baae0e09d..f42dc6e0b 100644 --- a/webapp/components/create_team/components/team_url.jsx +++ b/webapp/components/create_team/components/team_url.jsx @@ -178,6 +178,7 @@ export default class TeamUrl extends React.Component {
{fileName}} @@ -126,6 +127,7 @@ export default class FileAttachment extends React.Component { } else { filenameOverlay = ( {Utils.localizeMessage('file_attachment.download', 'Download') + ' "' + fileName + '"'}} diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index fa759cae7..f61f58a8d 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -279,6 +279,7 @@ export default class Navbar extends React.Component { createDropdown(channel, channelTitle, isSystemAdmin, isTeamAdmin, isChannelAdmin, isDirect, isGroup, popoverContent) { const isAdmin = isSystemAdmin || isTeamAdmin; + const infoIcon = Constants.INFO_ICON_SVG; if (channel) { let viewInfoOption; @@ -599,7 +600,13 @@ export default class Navbar extends React.Component { className='description' rootClose={true} > -
+
+
- - - + this.handleShowDirectChannel(m, e)} - > - - - ); + messageIcon = Constants.MESSAGE_ICON_SVG; } let name = ''; @@ -129,12 +119,13 @@ export default class PopoverListMembers extends React.Component { popoverHtml.push(
this.handleShowDirectChannel(m, e)} key={'popover-member-' + i} >
- {button} +
); @@ -175,21 +170,15 @@ export default class PopoverListMembers extends React.Component { popoverHtml.push(
- +
); } @@ -239,23 +228,40 @@ export default class PopoverListMembers extends React.Component { ); } + const channelMembersTooltip = ( + + + + ); + return ( -
-
{ - this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover}); - this.props.actions.getProfilesInChannel(this.props.channel.id, 0); - }} +
+ - {countText} -
+
{ + this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover}); + this.props.actions.getProfilesInChannel(this.props.channel.id, 0); + }} + > + {countText} +
+ +
+
{popoverHtml}
 diff --git a/webapp/components/post_view/post_flag_icon.jsx b/webapp/components/post_view/post_flag_icon.jsx index 295bdd116..02f8feb53 100644 --- a/webapp/components/post_view/post_flag_icon.jsx +++ b/webapp/components/post_view/post_flag_icon.jsx @@ -21,11 +21,17 @@ function flagToolTip(isFlagged) { ); } -function flagIcon() { +function flagIcon(isFlagged) { + let flagIconSvg = Constants.FLAG_ICON_SVG; + + if (isFlagged) { + flagIconSvg = Constants.FLAG_FILLED_ICON_SVG; + } + return ( ); } @@ -52,6 +58,7 @@ export default function PostFlagIcon(props) { if (!props.isEphemeral) { return ( - {flagIcon()} + {flagIcon(props.isFlagged)} ); diff --git a/webapp/components/post_view/reaction/reaction.jsx b/webapp/components/post_view/reaction/reaction.jsx index 7fad56d62..f256a1fb5 100644 --- a/webapp/components/post_view/reaction/reaction.jsx +++ b/webapp/components/post_view/reaction/reaction.jsx @@ -219,6 +219,7 @@ export default class Reaction extends React.PureComponent { return ( ; @@ -253,50 +256,49 @@ export default class SearchBar extends React.Component { var mentionBtnClass = SearchStore.isMentionSearch ? 'active' : ''; mentionBtn = ( -
- - - {'@'} - - -
+
+ ); var flagBtnClass = SearchStore.isFlaggedPosts ? 'active' : ''; flagBtn = ( -
- - -
+
+ ); } @@ -305,55 +307,71 @@ export default class SearchBar extends React.Component { clearClass += ' visible'; } + let searchFormClass = 'search__form'; + if (this.state.focused) { + searchFormClass += ' focused'; + } + return ( -
-
- -
-
- - { - this.search = search; - }} - className='form-control search-bar' - placeholder={Utils.localizeMessage('search_bar.search', 'Search')} - value={this.state.searchTerm} - onFocus={this.handleUserFocus} - onBlur={this.handleUserBlur} - onChange={this.handleChange} - onKeyDown={this.handleKeyDown} - listComponent={SearchSuggestionList} - providers={this.suggestionProviders} - type='search' - autoFocus={this.props.isFocus && this.state.searchTerm === ''} - /> +
+
+ +
+
+
+
+ {isSearching} + {this.renderHintPopover(helpClass)} + +
+
+ {mentionBtn} +
+
+ {flagBtn} +
); } diff --git a/webapp/components/search_results_header.jsx b/webapp/components/search_results_header.jsx index fd2628013..467b77e27 100644 --- a/webapp/components/search_results_header.jsx +++ b/webapp/components/search_results_header.jsx @@ -104,6 +104,7 @@ export default class SearchResultsHeader extends React.Component { onClick={this.toggleSize} > {unreadCount.mentions}; + badge = {unreadCount.mentions}; this.badgesActive = true; } } else if (this.state.loadingDMChannel === index && channel.type === Constants.DM_CHANNEL) { @@ -554,17 +554,29 @@ export default class Sidebar extends React.Component { ); } - if (msgCount > 0) { + if (unreadCount.mentions > 0) { rowClass += ' has-badge'; } let displayName = channel.display_name; var icon = null; + const globeIcon = Constants.GLOBE_ICON_SVG; + const lockIcon = Constants.LOCK_ICON_SVG; if (channel.type === Constants.OPEN_CHANNEL) { - icon =
; + icon = ( + + ); } else if (channel.type === Constants.PRIVATE_CHANNEL) { - icon =
; + icon = ( + + ); } else if (channel.type === Constants.GM_CHANNEL) { displayName = ChannelUtils.buildGroupChannelName(channel.id); icon =
{UserStore.getProfileListInChannel(channel.id, true).length}
; @@ -589,6 +601,7 @@ export default class Sidebar extends React.Component { if (handleClose && !badge) { closeButton = ( {icon} - {displayName} + {displayName} {badge} {closeButton} @@ -644,6 +657,8 @@ export default class Sidebar extends React.Component { } render() { + const switchChannelIcon = Constants.SWITCH_CHANNEL_ICON_SVG; + // Check if we have all info needed to render if (this.state.currentTeam == null || this.state.currentUser == null) { return (
); @@ -749,8 +764,8 @@ export default class Sidebar extends React.Component { let createPublicChannelIcon = ( @@ -767,9 +782,9 @@ export default class Sidebar extends React.Component { let createPrivateChannelIcon = ( @@ -877,7 +892,7 @@ export default class Sidebar extends React.Component {

{createPublicChannelIcon}

@@ -903,7 +918,7 @@ export default class Sidebar extends React.Component {

{createPrivateChannelIcon}

@@ -915,7 +930,7 @@ export default class Sidebar extends React.Component {

@@ -928,6 +943,10 @@ export default class Sidebar extends React.Component { className='btn btn-link' onClick={this.openQuickSwitcher} > + {tutorialTip}
-
{'@' + this.props.currentUser.username}
{teamNameWithToolTip} +
{'@' + this.props.currentUser.username}
postListScrollChange(), 0); } } @@ -210,7 +210,7 @@ export default class SidebarRight extends React.Component { if (this.state.searchVisible) { content = (
-
{searchForm}
+
{searchForm}
-
{searchForm}
+
{searchForm}
; + icon = ( + + ); } else if (channel.type === Constants.PRIVATE_CHANNEL) { - icon =
; + icon = ( + + ); } else if (channel.type === Constants.GM_CHANNEL) { displayName = getChannelDisplayName(channel); icon =
{'G'}
; diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx index e0670d6da..57f436eb2 100644 --- a/webapp/components/team_sidebar/components/team_button.jsx +++ b/webapp/components/team_sidebar/components/team_button.jsx @@ -69,6 +69,7 @@ export default class TeamButton extends React.Component { } else { btn = ( 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.

", diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss index abf5b772f..c6086e866 100644 --- a/webapp/sass/components/_buttons.scss +++ b/webapp/sass/components/_buttons.scss @@ -1,7 +1,7 @@ @charset 'UTF-8'; .btn { - @include single-transition(all, .25s, ease-in); + @include single-transition(all, .15s, ease-in); @include border-radius($border-rad); &.btn-primary { diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss index adf3967e6..857772d7c 100644 --- a/webapp/sass/components/_inputs.scss +++ b/webapp/sass/components/_inputs.scss @@ -45,3 +45,23 @@ input { margin-top: 3px; } } + +::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: inherit; + opacity: 0.5; +} + +::-moz-placeholder { /* Firefox 19+ */ + color: inherit; + opacity: 0.5; +} + +:-ms-input-placeholder { /* IE 10+ */ + color: inherit; + opacity: 0.5; +} + +:-moz-placeholder { /* Firefox 18- */ + color: inherit; + opacity: 0.5; +} diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index cfc12f1ce..37820cbd9 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -36,6 +36,24 @@ width: 100%; z-index: 101; + .icon { + @include opacity(.5); + display: inline-block; + margin: 0 7px 0 0; + position: relative; + text-align: center; + top: 2px; + vertical-align: top; + width: 16px; + + &.icon__globe { + svg { + height: 14px; + width: 14px; + } + } + } + .status { font-size: 15px; text-align: center; @@ -59,11 +77,12 @@ @include border-radius(20px); display: block; font-size: 15px; - height: 20px; - line-height: 20px; - margin-right: 6px; + height: 16px; + line-height: 16px; + margin-right: 7px; + margin-top: 3px; text-align: center; - width: 20px; + width: 16px; .mention--align { display: inline-block; diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 610cdb31d..46e83f32d 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -4,6 +4,7 @@ .popover { @include border-radius($border-rad); color: lighten($black, 25%); + padding: 0; &.bottom, &.right, @@ -220,17 +221,70 @@ .member-list__popover { max-width: initial; + .more-modal__header { + padding: 14px 0; + + .icon { + @include opacity(.8); + margin: 0 38px 0 24px; + position: relative; + top: 2px; + } + + span { + font-weight: 500; + } + } + .more-modal__list { .more-modal__row { - min-height: inherit; + border-bottom: none; + border-top: 1px solid; + cursor: pointer; + height: 45px; + padding: 5px 19px 5px 17px; + + &:hover { + border-left: 3px solid transparent; + padding-left: 14px; + + .more-modal__actions { + @include opacity(1); + } + } + + &.more-modal__row--button { + border-left: none; + height: 40px; + position: relative; + + button { + font-weight: 500; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } + } + + .more-modal__name { + line-height: 33px; + } + + .more-modal__image { + margin: 0; } .more-modal__details { line-height: 32px; + padding-left: 30px; } .more-modal__actions { - line-height: 31px; + @include opacity(0); + line-height: 42px; margin: 0; } } diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index c25915252..e7fab0290 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -1,14 +1,7 @@ @charset 'UTF-8'; -.channel-header { - .search-bar__container { - padding: 0 7px 0 3px; - } -} - .search-bar__container { - @include flex(0 0 56px); - padding: 12px 5px 0 0; + @include flex(0 0 79px); .channel-header__links { .sidebar--right & { @@ -31,30 +24,10 @@ } } -.sidebar__collapse { - @include single-transition(all, .2s, linear); - @include translateX(0); - cursor: pointer; - display: none; - fill: $white; - font-size: 35px; - left: 0; - line-height: 40px; - padding-left: 1px; - position: absolute; - text-align: center; - width: 49px; - z-index: 5; -} - -.sidebar__search-icon { - @include opacity(.5); - color: $dark-gray; - display: none; - font-size: 14px; - margin-left: 10px; +.search__icon { + left: 10px; position: absolute; - top: 15px; + top: 8px; } .sidebar__search-clear { @@ -69,31 +42,33 @@ width: 40px; } +.search-form__container { + +} + .search__form { position: relative; .search-bar__container & { - @include border-radius(2px); + @include border-radius(50px); border: 1px solid $light-gray; - margin: 0; - width: 300px; + margin: 16px 10px 0 0; + width: 229px; } .sidebar--right & { - float: left; - margin-right: 7px; - width: 325px; + width: 100%; } .search-bar { + background: transparent; + border: none; box-shadow: none; - height: 40px; - padding-right: 30px; - - .search-bar__container & { - border: none; - height: 30px; - } + font-size: 14px; + height: 35px; + outline: none; + padding: 0 30px 0 40px; + width: 100%; } .icon--refresh { diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss index 2e1ba61b3..03d9d0705 100644 --- a/webapp/sass/components/_status-icon.scss +++ b/webapp/sass/components/_status-icon.scss @@ -42,10 +42,10 @@ .status { display: inline-block; - margin-right: 6px; + margin: 0 7px 0 1px; position: relative; - top: 1px; - width: 12px; + top: 2px; + width: 15px; &.status--group { border-radius: 2px; @@ -54,18 +54,19 @@ height: 16px; left: 1px; line-height: 15px; - margin-left: -3px; + margin: 0 9px 0 -1px; text-align: center; top: -1px; - width: 16px; + width: 15px; .mentions__name & { - height: 20px; + height: 18px; left: 0; - line-height: 20px; + line-height: 18px; margin-left: 0; + margin-right: 6px; text-align: center; - width: 20px; + width: 17px; } } diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index c127bc5cc..839f9c8c1 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -2,14 +2,9 @@ .webrtc__header { @include webrtc-button; - float: left; - margin-right: 10px; - position: relative; - top: 13px; svg { position: relative; - width: 20px; } } diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 1386b4169..dd8440d19 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -1,57 +1,82 @@ @charset 'UTF-8'; .channel-header { - @include flex(0 0 57px); - border-left: none; + @include flex(0 0 70px); + border-bottom: 1px solid; font-size: 14px; - line-height: 56px; position: relative; width: 100%; z-index: 9; - .member-popover__trigger, - .pinned-posts-button { + .channel-header__icon { + @include border-radius(50%); + border: 1px solid; cursor: pointer; - display: inline-block; - margin-left: 7px; + height: 37px; + line-height: 36px; + margin: 16px 10px 0 0; min-width: 30px; text-align: center; - white-space: nowrap; + width: 37px; + + &.wide { + @include border-radius(37px); + padding: 0; + white-space: nowrap; + width: auto; + + > div { + padding: 0 13px 0 15px; + } + } + + .icon__text { + font-weight: 600; + margin-right: 9px; + } + + a { + display: block; + } .fa { font-size: 19px; } - } - - .member-popover__container, - .member-popover__trigger { - display: inline; - } - .member-popover__trigger { & + div { display: none; } - } - .member-popover__trigger { - .fa { - margin-left: 4px; + .icon { position: relative; + } + + .icon__pin, + .icon__members { top: 2px; } + + .icon__mentions { + top: 5px; + } + + .icon__flag { + top: 3px; + } } - .pinned-posts-button svg { - position: relative; - top: 5px; + .move--left & { + .icon--hidden { + display: none; + } } &.alt { margin: 0; th { - font-weight: normal !important; + font-weight: normal; + vertical-align: top; &.header-list__right { padding-right: 4px; @@ -69,15 +94,15 @@ &:first-child { border-left: none; - padding-left: 15px; - padding-right: 1em; + padding: 0 0 0 20px; text-align: left !important; width: 100%; } &:last-child { - padding-right: 6px; - width: 8.9%; + .channel-header__icon { + margin-right: 17px; + } } } @@ -93,13 +118,26 @@ .heading { display: inline-block; - font-size: 1.3em; - font-weight: 600; + font-size: 17px; + font-weight: 400; margin: 0 4px 0 0; - max-width: 100%; + max-width: calc(100vw - 780px); overflow: hidden; text-overflow: ellipsis; - vertical-align: middle; + vertical-align: top; + white-space: nowrap; + + .move--left & { + max-width: calc(100vw - 830px); + + .multi-teams & { + max-width: calc(100vw - 880px); + } + } + + .multi-teams & { + max-width: calc(100vw - 830px); + } } .caret { @@ -131,62 +169,74 @@ .header-dropdown__icon { color: inherit; - font-size: 12px; + font-size: 21px; margin-left: 1px; position: relative; - top: 1px; + top: 2px; } .channel-header__info { - display: table; - table-layout: fixed; - width: 100%; + margin-top: 12px; + + .channel-header__title { + .header-dropdown__icon { + color: $dark-gray; + } + + > a { + display: inline-block; + text-decoration: none; + } + + .modal { + white-space: normal; + } + } - > div { - display: block; + .channel-header__description { + display: inline-block; + height: 22px; + margin-top: 3px; + max-width: calc(100vw - 730px); + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; word-break: break-word; - &.dropdown { - float: left; - max-width: 90%; - padding-right: 1em; + .markdown__heading { + font-size: 1em; + margin: 0; + } - .header-dropdown__icon { - color: $dark-gray; - } + .multi-teams & { + max-width: calc(100vw - 780px); + } - a { - text-decoration: none; - } + &.light { + @include opacity(.6); + color: inherit; - .modal { - white-space: normal; + &:hover, + &:focus { + color: inherit; } } - &.description { - margin-top: 2px; - max-height: 45px; - overflow: hidden; - text-overflow: ellipsis; - - .markdown-inline-img { - max-height: 45px; - } + .move--left & { + max-width: calc(100vw - 780px); } - &.popover { - white-space: normal; + .markdown-inline-img { + max-height: 45px; } + } - .status { - width: 18px; + .status { + width: 18px; - svg { - max-height: 20px; - width: 16px; - } + svg { + max-height: 20px; + width: 16px; } } } @@ -261,7 +311,7 @@ @include legacy-pie-clearfix; @include display-flex(); @include flex-direction(row-reverse); - padding: 9px 10px; + padding: 16px 47px 12px 12px; position: relative; &:before { @@ -305,11 +355,12 @@ .sidebar-header-dropdown, .admin-navbar-dropdown { font-size: .85em; + height: 100%; left: 0; - margin-right: -15px; + margin-right: -22px; position: absolute; right: 22px; - top: 10px; + top: 0; li { width: 100%; @@ -323,7 +374,7 @@ color: $white; display: block; font-size: 1em; - height: 40px; + height: 100%; left: 0; line-height: 1.8; padding: 10px; @@ -331,7 +382,7 @@ } .dropdown-menu { - margin-right: 3px; + margin-right: 10px; margin-top: 4px; width: 199px; @@ -344,8 +395,16 @@ .sidebar-header-dropdown__icon, .admin-navbar-dropdown__icon { + border-radius: 36px; fill: $white; float: right; + height: 36px; + line-height: 36px; + position: relative; + right: -3px; + text-align: center; + top: 7px; + width: 36px; } } @@ -377,9 +436,7 @@ } .team__name { - float: left; line-height: 22px; - margin-top: -2px; } .user__name { @@ -419,8 +476,30 @@ } .channel-header__favorites { + @include opacity(.5); float: left; - margin: 1px 10px 0 0; + height: 20px; + margin: 0 8px 0 0; + padding-top: 3px; + position: relative; + z-index: 1; + + &.inactive { + color: inherit; + + &:hover, + &:active { + color: inherit; + } + } + + &.active { + @include opacity(1); + } + + i { + font-size: 17px; + } } .app__body { @@ -476,6 +555,7 @@ &.active { color: $primary-color; @include opacity(1); + .icon { fill: $primary-color; } diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 59b348d9e..09b6534b0 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -31,17 +31,17 @@ .navbar-default { background: $primary-color; border: none; - min-height: 45px; + min-height: 50px; position: absolute; .navbar-nav { > li { > a { - height: 45px; + height: 50px; padding: 0 1.3em; i { - line-height: 45px; + line-height: 50px; } } } @@ -52,22 +52,37 @@ border-radius: 0; fill: $white; float: left; - height: 44px; + height: 50px; line-height: 48px; margin: 0; padding: 0 10px; - width: 43px; + width: 50px; z-index: 5; + &.navbar-right__icon { + @include border-radius(50px); + height: 32px; + line-height: 0; + margin: 9px 10px 0 0; + padding: 0; + width: 32px; + } + + &.menu-toggle { + margin-right: 16px; + } + .icon-bar { background: $white; width: 21px; } - .icon-search { - font-size: 17px; - position: relative; - top: -2px; + .icon__search { + svg { + left: -1px; + position: relative; + width: 17px; + } } .icon--white { @@ -84,15 +99,15 @@ .navbar-brand { float: none; font-size: 16px; - height: 45px; - line-height: 45px; + height: 50px; + line-height: 50px; padding: 0 .5em; .heading { color: $white; display: inline-block; font-weight: 600; - line-height: 47px; + line-height: 50px; margin-right: 5px; max-width: calc(100% - 200px); overflow: hidden; @@ -114,20 +129,26 @@ margin-right: 1em; &.info-popover { - @include background-size(100% 100%); - background-image: url('../images/info__icon.png'); + @include border-radius(50px); cursor: pointer; - height: 19px; + height: 32px; + line-height: 32px; + margin: 9px 10px 0 0; position: relative; - top: 13px; - vertical-align: middle; - width: 19px; + text-align: center; + vertical-align: top; + width: 32px; + + svg { + position: relative; + top: 5px; + } } } } } - .sidebar-channel { + .sidebar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index b8c623e2d..b227d818c 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1487,16 +1487,21 @@ .flag-icon__container { display: inline-block; - font-size: 12px; + height: 15px; margin-left: 7px; position: relative; - top: 1px; + top: 2px; + vertical-align: top; visibility: hidden; &.visible { visibility: visible; } + svg { + width: 12px; + } + path { fill: inherit; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index ed587305a..cc0c4920f 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -16,6 +16,33 @@ padding-top: 44px; } + .sidebar-item { + .icon { + display: inline-block; + margin: 0 7px 0 1px; + position: relative; + text-align: left; + vertical-align: top; + width: 15px; + } + + .icon__lock { + top: 2px; + } + + .icon__globe { + top: 1px; + } + } + + .sidebar-item__name { + display: inline-block; + max-width: 167px; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + } + .sidebar__divider { color: $white; font-size: .9em; @@ -44,7 +71,6 @@ } .sidebar__switcher { - border-top: 1px solid; bottom: 0; display: block; padding-bottom: 0; @@ -54,18 +80,30 @@ button { @include single-transition(all, .15s, ease-in); display: block; - height: 42px; - text-align: center; + font-weight: 600; + height: 50px; + line-height: 50px; + padding: 0; text-decoration: none; width: 100%; > span { - @include single-transition(all, .15s, ease-in); - @include opacity(.6); + display: inline-block; position: relative; + vertical-align: middle; z-index: 5; } + .icon { + display: none; + margin-right: 15px; + + svg { + position: relative; + top: 7px; + } + } + &:hover { span { @include opacity(1); @@ -93,15 +131,20 @@ } .badge { - background-color: $primary-color; + @include border-radius(100px); + font-size: 11px; + height: 16px; + line-height: 16px; + min-width: 18px; + padding: 0 5px; position: absolute; - right: 10px; - top: 5px; + right: 15px; + top: 8px; } .nav-pills__container { -webkit-overflow-scrolling: touch; - height: calc(100% - 99px); + height: calc(100% - 120px); overflow: auto; position: relative; } @@ -119,11 +162,11 @@ } .nav-pills__unread-indicator-top { - top: 66px; + top: 80px; } .nav-pills__unread-indicator-bottom { - bottom: 50px; + bottom: 60px; } .nav { @@ -135,12 +178,10 @@ li { > h4 { - color: #aaaaaa; font-size: 1em; - font-weight: 400; - letter-spacing: -.3px; - margin: 1.1em 0 .5em; - padding: 0 10px 0 15px; + font-weight: 600; + margin: 1.5em 0 .7em; + padding: 0 12px 0 17px; text-transform: uppercase; } @@ -155,17 +196,24 @@ line-height: 1.5; outline: none; overflow: hidden; - padding: 3px 10px 3px 25px; + padding: 5px 0 5px 17px; text-overflow: ellipsis; white-space: nowrap; + .icon { + &.icon__globe, + &.icon__lock { + @include opacity(.5); + } + } + &.has-badge { - padding-right: 30px; + .sidebar-item__name { + max-width: 142px; + } } &.has-close { - padding-right: 30px; - &:hover { .btn-close { @include opacity(.8); @@ -177,11 +225,11 @@ @include opacity(0); display: none; font-family: 'Open Sans', sans-serif; - font-size: 20px; + font-size: 21px; font-weight: 600; position: absolute; - right: 15px; - top: -1px; + right: 18px; + top: 0px; &:hover { @include opacity(1); @@ -204,7 +252,14 @@ left: 0; position: absolute; top: 0; - width: 5px; + width: 3px; + } + } + + .icon { + &.icon__globe, + &.icon__lock { + @include opacity(.7); } } @@ -229,9 +284,8 @@ } .add-channel-btn { - color: #aaaaaa; float: right; - font-size: 22px; + font-size: 1.9em; font-weight: 700; line-height: 18px; margin: -2px 0 0 0; @@ -245,35 +299,46 @@ } .status-wrapper { + height: 36px; + width: 36px; + .status { - bottom: -9px; + bottom: -4px; height: 18px; right: -5px; width: 18px; - svg { - top: 3px; - max-height: 12px; + &.status-edit { + .fa { + top: 4px; + } } - .icon__container { + .fa { position: relative; - top: 3px; + top: 2px; + } + .icon__container { &:after { border-radius: 20px; content: ''; - height: 9px; - left: 5px; + height: 10px; + left: 4px; position: absolute; - top: 2px; - width: 9px; + top: 4px; + width: 10px; } + } - svg { - top: 0; - z-index: 1; - } + svg { + height: 13px; + left: 3px; + max-height: initial; + position: relative; + top: 3px; + width: 13px; + z-index: 1; } } } diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index ab73e075b..8181ac270 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -39,6 +39,25 @@ } } + .sidebar-right__table { + display: table; + + > div:not(.sidebar-collapse__container) { + display: table-cell; + + &:last-child { + .channel-header__icon { + margin-right: 17px; + } + } + } + + .search-form__container { + padding-right: 10px; + width: 100%; + } + } + .post-body { img { max-height: 200px; @@ -131,7 +150,6 @@ @include flex(1 1 auto); @include flex-direction(column); border-left: $border-gray; - border-top: $border-gray; height: calc(100% - 56px); } @@ -191,7 +209,7 @@ .sidebar--right__header { @include flex(0 0 44px); - border-bottom: $border-gray; + border-bottom: 1px solid; color: inherit; font-size: 1em; height: 44px; @@ -222,7 +240,7 @@ @include opacity(.9); margin: 0 3px; position: relative; - top: 1px; + top: 3px; } } @@ -234,3 +252,25 @@ .sidebar-right-container { height: 100%; } + +.sidebar-collapse__container { + display: none; +} + +.sidebar-collapse { + @include single-transition(all, .2s, linear); + @include translateX(0); + cursor: pointer; + font-size: 16px; + height: 48px; + line-height: 0; + padding-left: 1px; + text-align: center; + width: 50px; + z-index: 5; + + .fa { + position: relative; + top: 18px; + } +} diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index a96685c87..67ec9e3a7 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -80,22 +80,20 @@ } @media (max-width: 1024px) { - .inner-wrap { - &.move--left { - .channel-header { - .heading { - width: 100px; - } - } - } - } - .channel-header { .search-bar__container { .search__form { width: 150px; } } + + .heading { + max-width: calc(100vw - 800px); + + .multi-teams & { + max-width: calc(100vw - 750px); + } + } } .integration-option { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 24db3821f..862c3a59c 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,12 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .channel-header { + .channel-header__icon { + display: none; + } + } + .member-role .member-menu, .member-drop .member-menu { right: 0; @@ -76,10 +82,10 @@ @include box-shadow(none); background: alpha-color($black, .8); border: none; - height: calc(100% - 40px); + height: calc(100% - 50px); max-width: 100%; position: fixed; - top: 47px; + top: 40px !important; width: 100%; &.in { @@ -865,14 +871,18 @@ white-space: nowrap; .heading { + font-size: 17px; + font-weight: 400; line-height: normal; position: relative; - top: 11px; + top: 14px; vertical-align: top; } .header-dropdown__icon { - top: 18px; + font-size: 12px; + margin-left: 5px; + top: 20px; vertical-align: top; } } @@ -891,12 +901,12 @@ @include translate3d(0, 100%, 0); background: alpha-color($black, .9); display: block; - height: calc(100% - 40px); + height: calc(100% - 48px); left: 0; overflow: auto; padding: 1.4em 0 0; position: fixed; - top: 42px; + top: 48px; visibility: hidden; width: 100%; @@ -981,21 +991,36 @@ } .search-bar__container { - @include flex(0 0 44px); + @include flex(0 0 50px); background: $primary-color; color: $white; padding: 0; + .search-form__container { + padding: 0; + } + .search__form { @include single-transition(all, .2s, linear); @include translateX(0); border: none; - height: 45px; - padding: 7px 20px 0 49px; - position: relative; + margin-top: 9px; width: 100%; - margin-left: 0px; - margin-right: 0px; + + .search-bar { + font-size: 14px; + height: 32px; + padding: 0 40px; + } + + .search__icon { + left: 15px; + top: 7px; + + svg { + width: 17px; + } + } .icon--refresh { @include opacity(.6); @@ -1009,7 +1034,7 @@ background: $white; border: none; color: $dark-gray; - padding: 0 31px 0 31px; + padding: 0 31px; } } @@ -1053,7 +1078,7 @@ } .nav-pills__container { - height: calc(100% - 42px); + height: calc(100% - 60px); } > div { @@ -1110,7 +1135,7 @@ } h4 { - margin: 16px 0 8px; + margin: 2em 0 1.5em; } > a { @@ -1148,10 +1173,10 @@ } .emoji-rhs { - position: relative; display: none; - top: 1px; + position: relative; right: -1px; + top: 1px; } .msg-typing:empty { @@ -1171,27 +1196,32 @@ } } - .sidebar__collapse, - .sidebar__search-icon { - display: block; + .sidebar-collapse__container { + display: table-cell; + vertical-align: top; } .sidebar__search-clear { + @include opacity(1); + color: inherit; display: block; - top: 6px; - height: 30px; - width: 35px; - margin-right: 18px; + height: 32px; + margin-right: 0; + text-align: center; + top: 0; + width: 42px; + &.visible { visibility: visible; } } .sidebar__search-clear-x { - margin-left: 14px; - font-size: 22px; + font-size: 21px; font-weight: 700; - opacity: .7; + line-height: 0; + position: relative; + top: 9px; } .sidebar--right__close { @@ -1199,12 +1229,12 @@ } .sidebar-right__body { - height: calc(100% - 44px); + height: calc(100% - 56px); } } .search-items-container { - height: calc(100% - 44px); + height: calc(100% - 56px); } .inner-wrap { @@ -1261,10 +1291,10 @@ .app__content { margin: 0; - padding-top: 45px; + padding-top: 56px; .channel__wrap & { - padding-top: 45px; + padding-top: 56px; } #channel-header { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 70b5e9b8f..8b81f30ca 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -1,6 +1,30 @@ @charset 'UTF-8'; @media screen and (max-width: 960px) { + .inner-wrap { + &.move--left { + .channel-header { + .heading { + max-width: calc(100vw - 600px); + + .multi-teams & { + max-width: calc(100vw - 650px); + } + } + } + + .channel-header__info { + .channel-header__description { + max-width: calc(100vw - 600px); + + .multi-teams & { + max-width: calc(100vw - 650px); + } + } + } + } + } + .textarea-wrapper { .textbox-preview-link, .textbox-help-link { @@ -8,15 +32,23 @@ } } - .channel-header { - .heading { - max-width: 90px; + .channel-header__info { + .channel-header__description { + max-width: calc(100vw - 660px); + + .multi-teams & { + max-width: calc(100vw - 710px); + } } } - .search__form { - .sidebar--right & { - width: 300px; + .channel-header { + .heading { + max-width: calc(100vw - 700px); + + .multi-teams & { + max-width: calc(100vw - 750px); + } } } @@ -137,7 +169,6 @@ transform: translateX(0) !important; .search-bar__container { - padding-right: 8px; z-index: 5; } } diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss index 46c1676ea..bb583c73a 100644 --- a/webapp/sass/routes/_about-modal.scss +++ b/webapp/sass/routes/_about-modal.scss @@ -25,8 +25,16 @@ font-size: 16px; } - .fa { - margin: 0 4px 0 8px; + .icon { + margin: 0 5px 0 8px; + position: relative; + top: 1px; + + svg { + @include opacity(.8); + height: 14px; + width: 14px; + } } } } diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss index 6a041d6ec..4d2b031e4 100644 --- a/webapp/sass/utils/_mixins.scss +++ b/webapp/sass/utils/_mixins.scss @@ -31,28 +31,8 @@ // Webrtc button @mixin webrtc-button { .webrtc__button { - @include border-radius(50px); - background: $button--ready; - display: block; - height: 33px; - text-align: center; - width: 33px; - - &.on, - &:hover { - background: darken($button--ready, 5%); - } - &.offline { - background: $video-circle-offline; - - &:hover { - background: $video-circle-offline; - } - } - - svg { - fill: $white; + @include opacity(.5); } } } diff --git a/webapp/stores/search_store.jsx b/webapp/stores/search_store.jsx index dd4b97522..7c9c4b8ef 100644 --- a/webapp/stores/search_store.jsx +++ b/webapp/stores/search_store.jsx @@ -98,7 +98,7 @@ class SearchStoreClass extends EventEmitter { return this.searchTerm; } - storeSearchResults(results, isMentionSearch, isFlaggedPosts, isPinnedPosts) { + storeSearchResults(results, isMentionSearch = false, isFlaggedPosts = false, isPinnedPosts = false) { this.searchResults = results; this.isMentionSearch = isMentionSearch; this.isFlaggedPosts = isFlaggedPosts; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 467aaf390..b2693ecf5 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -444,9 +444,10 @@ export const Constants = { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + MEMBERS_ICON_SVG: " ", TEAM_INFO_SVG: " ", - FLAG_ICON_OUTLINE_SVG: " ", - FLAG_ICON_SVG: " ", + FLAG_FILLED_ICON_SVG: " ", + FLAG_ICON_SVG: " ", ATTACHMENT_ICON_SVG: "", MATTERMOST_ICON_SVG: " ", ONLINE_AVATAR_SVG: " ", @@ -455,13 +456,21 @@ export const Constants = { ONLINE_ICON_SVG: "
", AWAY_ICON_SVG: "
", OFFLINE_ICON_SVG: "", - MENU_ICON: " ", + MENU_ICON: " ", COMMENT_ICON: " ", REPLY_ICON: " ", SCROLL_BOTTOM_ICON: " ", - VIDEO_ICON: " ", - PIN_ICON: "", + VIDEO_ICON: " ", + PIN_ICON_SVG: " ", LEAVE_TEAM_SVG: " ", + SEARCH_ICON_SVG: " ", + MENTIONS_ICON_SVG: " ", + MENU_ICON_SVG: " ", + INFO_ICON_SVG: " ", + MESSAGE_ICON_SVG: " ", + SWITCH_CHANNEL_ICON_SVG: " ", + GLOBE_ICON_SVG: " ", + LOCK_ICON_SVG: " ", THEMES: { default: { type: 'Mattermost', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 68f43b543..6778bb026 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -491,17 +491,21 @@ 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', 'background:' + changeOpacity(theme.sidebarText, 0.15)); + 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('@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('.sidebar--left .nav-pills__container li > h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6)); - changeCss('.app__body .sidebar--left .sidebar__switcher button, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); + 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 .status .offline--icon, .app__body .sidebar--menu svg', 'fill:' + 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)); changeCss('.app__body .sidebar--left .sidebar__switcher', 'border-color:' + changeOpacity(theme.sidebarText, 0.2)); changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6)); + changeCss('@media(max-width: 768px){.app__body .search__icon svg', 'stroke:' + theme.sidebarText); + changeCss('.app__body .sidebar--left .sidebar__switcher button', 'color:' + theme.sidebarText); + changeCss('.app__body .sidebar--left .sidebar__switcher button svg', 'fill:' + theme.sidebarText); + changeCss('.app__body .sidebar__switcher button', 'background:' + changeOpacity(theme.sidebarText, 0.08)); } if (theme.sidebarUnreadText) { @@ -509,7 +513,7 @@ export function applyTheme(theme) { } if (theme.sidebarTextHoverBg) { - changeCss('.sidebar--left .nav-pills__container li > a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a, .app__body .sidebar__switcher button:hover', 'background:' + theme.sidebarTextHoverBg); + changeCss('.sidebar--left .nav-pills__container li > a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg); } if (theme.sidebarTextActiveBorder) { @@ -544,28 +548,30 @@ export function applyTheme(theme) { changeCss('.app__body #navbar .navbar-default .navbar-toggle .icon-bar', 'background:' + theme.sidebarHeaderTextColor); changeCss('.app__body .post-list__timestamp > div', 'border-color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.5)); changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'color:' + theme.sidebarHeaderTextColor); + changeCss('@media(max-width: 768px){.app__body .search-bar__container .search__form', 'background:' + changeOpacity(theme.sidebarHeaderTextColor, 0.2)); + changeCss('.app__body .navbar-right__icon', 'background:' + changeOpacity(theme.sidebarHeaderTextColor, 0.2)); + changeCss('.app__body .navbar-right__icon svg', 'fill:' + theme.sidebarHeaderTextColor); + changeCss('.app__body .navbar-right__icon svg', 'stroke:' + theme.sidebarHeaderTextColor); } if (theme.onlineIndicator) { + changeCss('.app__body .status.status--online', 'color:' + theme.onlineIndicator); changeCss('.app__body .status .online--icon', 'fill:' + theme.onlineIndicator); - changeCss('.app__body .channel-header__info .status .online--icon', 'fill:' + theme.onlineIndicator); - changeCss('.app__body .navbar .status .online--icon', 'fill:' + theme.onlineIndicator); } if (theme.awayIndicator) { + changeCss('.app__body .status.status--away', 'color:' + theme.awayIndicator); changeCss('.app__body .status .away--icon', 'fill:' + theme.awayIndicator); - changeCss('.app__body .channel-header__info .status .away--icon', 'fill:' + theme.awayIndicator); - changeCss('.app__body .navbar .status .away--icon', 'fill:' + theme.awayIndicator); } if (theme.mentionBj) { - changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj); + changeCss('.sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj); changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj); changeCss('.multi-teams .team-sidebar .badge', 'background:' + theme.mentionBj); } if (theme.mentionColor) { - changeCss('.app__body .sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + 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); } @@ -583,7 +589,7 @@ export function applyTheme(theme) { changeCss('.app__body .popover.right>.arrow:after, .app__body .tip-overlay.tip-overlay--sidebar .arrow, .app__body .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg); changeCss('.app__body .popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg); changeCss('.app__body .popover.top>.arrow:after, .app__body .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg); - changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'background:' + theme.centerChannelBg); + changeCss('@media(min-width: 768px){.app__body .form-control', 'background:' + theme.centerChannelBg); changeCss('@media(min-width: 768px){.app__body .sidebar--right.sidebar--right--expanded .sidebar-right-container', 'background:' + theme.centerChannelBg); changeCss('.app__body .attachment__content', 'background:' + theme.centerChannelBg); changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg); @@ -595,10 +601,13 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.app__body .mentions__name .status.status--group, .app__body .multi-select__note', 'background:' + changeOpacity(theme.centerChannelColor, 0.12)); + changeCss('.app__body .channel-header .channel-header__icon, .app__body .search-bar__container .search__form', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.12)); changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3)); - changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon', 'fill:' + theme.centerChannelColor); + changeCss('@media(min-width: 768px){.app__body .search__icon svg', 'stroke:' + changeOpacity(theme.centerChannelColor, 0.4)); + changeCss('.app__body .channel-header__icon svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.4)); + changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon, .app__body .more-modal__header svg, .app__body .icon--body', 'fill:' + theme.centerChannelColor); changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); - changeCss('.app__body .nav-tabs > li > a:hover, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:focus, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:hover, .app__body .post .dropdown-menu a, .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); + changeCss('.app__body .sidebar--right .sidebar--right__header, .app__body .channel-header, .app__body .nav-tabs > li > a:hover, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:focus, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:hover, .app__body .post .dropdown-menu a, .sidebar--left, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .post.post--system .post__body, .app__body .modal .channel-switch-modal .modal-header .close', 'color:' + changeOpacity(theme.centerChannelColor, 0.6)); changeCss('.app__body .nav-tabs, .app__body .nav-tabs > li.active > a, pp__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, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor); changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65)); @@ -614,7 +623,7 @@ export function applyTheme(theme) { changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor); changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07)); changeCss('.app__body .channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8)); - changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.6)); + changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.4)); changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6)); changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header, .app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25)); @@ -630,11 +639,11 @@ export function applyTheme(theme) { changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor); changeCss('.app__body .post-image__column a, .app__body .post-image__column a:hover, .app__body .post-image__column a:focus', 'color:' + theme.centerChannelColor); changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor); - changeCss('.app__body .input-group-addon, .app__body .search-bar__container .search__form, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); + changeCss('.app__body .input-group-addon, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); - changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); + changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container, .app__body .member-list__popover .more-modal__header', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor); changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1)); @@ -689,23 +698,26 @@ export function applyTheme(theme) { if (theme.linkColor) { changeCss('.app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor); - changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5)); + changeCss('.app__body .attachment .attachment__container, .app__body .member-list__popover .more-modal__list .more-modal__row:hover', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5)); changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); + changeCss('@media(min-width: 768px){.app__body .search__form.focused .search__icon svg', 'stroke:' + theme.linkColor); changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); - changeCss('.app__body .channel-header #member_popover:hover', 'color:' + changeOpacity(theme.linkColor, 0.6)); + changeCss('.app__body .channel-header .channel-header__icon:hover #member_popover', 'color:' + theme.linkColor); changeCss('.app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + changeOpacity(theme.linkColor, 0.6)); + changeCss('.app__body .member-list__popover .more-modal__actions svg, .app__body .channel-header .channel-header__icon:hover svg, .app__body .channel-header .channel-header__icon.active svg', 'fill:' + theme.linkColor); changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4)); + changeCss('.app__body .channel-header .channel-header__icon:hover, .app__body .channel-header .channel-header__icon.active, .app__body .search-bar__container .search__form.focused', 'border-color:' + theme.linkColor); changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor); } if (theme.buttonBg) { - changeCss('.app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active, .app__body .post__pinned-badge', 'background:' + theme.buttonBg); - changeCss('.app__body .btn.btn-primary:hover, .app__body .btn.btn-primary:active, .app__body .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25)); + changeCss('.app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active, .app__body .post__pinned-badge', 'background:' + theme.buttonBg); + changeCss('.app__body .btn.btn-primary:hover, .app__body .btn.btn-primary:active, .app__body .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.15)); } if (theme.buttonColor) { - changeCss('.app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor); + changeCss('.app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor); } if (theme.errorTextColor) { -- cgit v1.2.3-1-g7c22