From f91b9d4a654ff27777580651d853b6372a425af6 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 6 Jul 2016 00:46:36 +0500 Subject: [PATCH] PLT-3418, PLT-2950, PLT-3375, PLT-3382, PLT-3446, PLT-3465: Multiple UI Improvements (#3449) Improving help text margins Updating changes for get link and create post files Fixing icon for select team screen Fixing styles for select team button Adding improvements to posts UI Adding improvement to post layout Updating changes for post controls Updating z-index for sidebar--right Updating help text position Fixing code for posts Fixing css for post view Pushing improvements for posts view Updating changes for post view Updating post layout Fixing system time css Updating header for system posts Updating post css Removing opacity and changing color for system messages Simplifying root post and system post behaviour Removing images from compact view Updating help text for display Updating embed preview text for advanced option PLT-3490 - Fixing RHS issue on Edge --- webapp/components/about_build_modal.jsx | 2 +- .../admin_console/admin_sidebar.jsx | 6 +- .../admin_console/brand_image_setting.jsx | 17 +- .../admin_console/email_connection_test.jsx | 2 +- .../admin_console/license_settings.jsx | 4 +- .../components/admin_console/recycle_db.jsx | 2 +- .../admin_console/reload_config.jsx | 2 +- .../components/admin_console/save_button.jsx | 2 +- webapp/components/change_url_modal.jsx | 2 + webapp/components/channel_header.jsx | 2 +- webapp/components/channel_invite_button.jsx | 2 +- webapp/components/create_post.jsx | 8 +- .../create_team/components/display_name.jsx | 2 +- webapp/components/file_attachment.jsx | 6 +- webapp/components/file_preview.jsx | 6 +- webapp/components/file_upload.jsx | 7 +- webapp/components/get_link_modal.jsx | 14 +- webapp/components/navbar.jsx | 4 +- webapp/components/needs_team.jsx | 2 +- .../components/post_view/components/post.jsx | 31 ++- .../post_view/components/post_body.jsx | 33 ++- .../post_view/components/post_info.jsx | 21 -- webapp/components/rhs_comment.jsx | 18 +- webapp/components/rhs_root_post.jsx | 6 +- webapp/components/search_bar.jsx | 4 +- webapp/components/select_team/select_team.jsx | 4 +- webapp/components/sidebar_right_menu.jsx | 2 +- webapp/components/team_settings_modal.jsx | 6 +- webapp/components/textbox.jsx | 10 +- .../user_settings/user_settings_advanced.jsx | 2 +- .../user_settings/user_settings_display.jsx | 42 ++- .../user_settings/user_settings_modal.jsx | 12 +- webapp/i18n/en.json | 8 +- webapp/sass/base/_typography.scss | 14 + webapp/sass/components/_files.scss | 1 + webapp/sass/components/_modal.scss | 2 +- webapp/sass/components/_save-button.scss | 4 +- webapp/sass/components/_scrollbar.scss | 2 +- webapp/sass/components/_search.scss | 4 +- webapp/sass/layout/_headers.scss | 6 +- webapp/sass/layout/_navigation.scss | 9 +- webapp/sass/layout/_post-right.scss | 250 +++++++++--------- webapp/sass/layout/_post.scss | 94 ++++--- webapp/sass/responsive/_mobile.scss | 27 +- webapp/sass/responsive/_tablet.scss | 66 ++--- webapp/sass/routes/_admin-console.scss | 15 +- webapp/sass/routes/_settings.scss | 9 +- webapp/sass/routes/_signup.scss | 30 ++- webapp/utils/constants.jsx | 3 +- webapp/utils/utils.jsx | 5 +- 50 files changed, 481 insertions(+), 351 deletions(-) diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx index 6e245a9ef3..1971791917 100644 --- a/webapp/components/about_build_modal.jsx +++ b/webapp/components/about_build_modal.jsx @@ -135,7 +135,7 @@ export default class AboutBuildModal extends React.Component { id='about.version' defaultMessage='Version:' /> - {'\u00a0' + config.Version + '\u00a0' + config.BuildNumber} + {'\u00a0' + config.Version + '\u00a0 (' + config.BuildNumber + ')'}
diff --git a/webapp/components/file_attachment.jsx b/webapp/components/file_attachment.jsx index d5bbae4c95..a3dd7ff1d8 100644 --- a/webapp/components/file_attachment.jsx +++ b/webapp/components/file_attachment.jsx @@ -206,7 +206,11 @@ class FileAttachment extends React.Component { className='post-image__name' rel='noopener noreferrer' > - {trimmedFilename} + + {trimmedFilename} ); diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx index 40c8b81d66..46ce43a6f2 100644 --- a/webapp/components/file_preview.jsx +++ b/webapp/components/file_preview.jsx @@ -57,7 +57,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - +
); @@ -73,7 +73,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - +
); @@ -96,7 +96,7 @@ export default class FilePreview extends React.Component { className='file-preview__remove' onClick={this.handleRemove} > - + ); diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx index 16ee096ed2..89b184ea66 100644 --- a/webapp/components/file_upload.jsx +++ b/webapp/components/file_upload.jsx @@ -318,9 +318,10 @@ class FileUpload extends React.Component { ref='input' className='btn btn-file' > - - - + @@ -99,6 +110,7 @@ export default class GetLinkModal extends React.Component {

{this.props.title}

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index 3bed4c4774..c8fa29e34f 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -387,7 +387,7 @@ export default class Navbar extends React.Component { aria-expanded='true' > {channelTitle} - +
    - + ); diff --git a/webapp/components/needs_team.jsx b/webapp/components/needs_team.jsx index 5aabcb55ca..19ad388870 100644 --- a/webapp/components/needs_team.jsx +++ b/webapp/components/needs_team.jsx @@ -122,7 +122,7 @@ export default class NeedsTeam extends React.Component {
    - + {content} diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 6633bd9b9a..0a4840050b 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -104,6 +104,11 @@ export default class Post extends React.Component { type = 'Comment'; } + let hideControls = ''; + if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) { + hideControls = 'post--hide-controls'; + } + const commentCount = this.props.commentCount; let rootUser; @@ -113,13 +118,6 @@ export default class Post extends React.Component { rootUser = 'other--root'; } - let postType = ''; - if (type !== 'Post') { - postType = 'post--comment'; - } else if (commentCount > 0) { - postType = 'post--root'; - } - let currentUserCss = ''; if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) { currentUserCss = 'current--user'; @@ -142,9 +140,22 @@ export default class Post extends React.Component { shouldHighlightClass = 'post--highlight'; } + let postType = ''; + if (type !== 'Post') { + postType = 'post--comment'; + } else if (commentCount > 0) { + postType = 'post--root'; + sameUserClass = ''; + rootUser = ''; + } + let systemMessageClass = ''; if (PostUtils.isSystemMessage(post)) { systemMessageClass = 'post--system'; + sameUserClass = ''; + currentUserCss = ''; + postType = ''; + rootUser = ''; } let profilePic = ( @@ -170,18 +181,20 @@ export default class Post extends React.Component { } let compactClass = ''; + let profilePicContainer = (
    {profilePic}
    ); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } return (
    -
    {profilePic}
    + {profilePicContainer}
    + {'×'} + + ); + message = ( - +

    + + {removeButton} +

    ); } else { message = ( diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 2a5ea63956..76d4df1cc3 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -20,7 +20,6 @@ export default class PostInfo extends React.Component { this.dropdownPosition = this.dropdownPosition.bind(this); this.handlePermalink = this.handlePermalink.bind(this); - this.removePost = this.removePost.bind(this); } dropdownPosition(e) { var position = $('#post-list').height() - $(e.target).offset().top; @@ -165,25 +164,6 @@ export default class PostInfo extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } - removePost() { - GlobalActions.emitRemovePost(this.props.post); - } - createRemovePostButton(post) { - if (!Utils.isPostEphemeral(post)) { - return null; - } - - return ( - - {'×'} - - ); - } render() { var post = this.props.post; var comments = ''; @@ -232,7 +212,6 @@ export default class PostInfo extends React.Component { {dropdown}
    {comments} - {this.createRemovePostButton(post)}
); diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 7b754c04f2..249d3f14a3 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -194,9 +194,19 @@ export default class RhsComment extends React.Component { ); } + let profilePic = ( + + ); + let compactClass = ''; + let profilePicContainer = (
{profilePic}
); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } var dropdown = this.createDropdown(); @@ -216,13 +226,7 @@ export default class RhsComment extends React.Component { return (
-
- -
+ {profilePicContainer}
  • diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index b70b284d99..230e4bb2d5 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -230,8 +230,10 @@ export default class RhsRootPost extends React.Component { } let compactClass = ''; + let profilePicContainer = (
    {profilePic}
    ); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } const messageWrapper = ( @@ -246,9 +248,7 @@ export default class RhsRootPost extends React.Component {
    {channelName}
    -
    - {profilePic} -
    + {profilePicContainer}
    • {userProfile}
      • diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index 6ebb9cfdcd..d8725a7aa8 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -142,7 +142,7 @@ class SearchBar extends React.Component { render() { var isSearching = null; if (this.state.isSearching) { - isSearching = ; + isSearching = ; } let helpClass = 'search-help-popover'; @@ -174,7 +174,7 @@ class SearchBar extends React.Component { style={{overflow: 'visible'}} autoComplete='off' > - + {team.display_name} + - + ); default: diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index 1b6ce3343e..78a499b513 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -189,7 +189,7 @@ export default class UserSettingsDisplay extends React.Component {
    @@ -200,7 +200,7 @@ export default class UserSettingsDisplay extends React.Component { title={ } inputs={inputs} @@ -518,6 +518,13 @@ export default class UserSettingsDisplay extends React.Component { id='user.settings.display.messageDisplayClean' defaultMessage='Standard' /> + {': '} + + +
    @@ -533,6 +540,13 @@ export default class UserSettingsDisplay extends React.Component { id='user.settings.display.messageDisplayCompact' defaultMessage='Compact' /> + {': '} + + +
@@ -599,7 +613,7 @@ export default class UserSettingsDisplay extends React.Component { if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) { const channelDisplayMode = [false, false]; - if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { channelDisplayMode[0] = true; } else { channelDisplayMode[1] = true; @@ -613,11 +627,11 @@ export default class UserSettingsDisplay extends React.Component { type='radio' name='channelDisplayMode' checked={channelDisplayMode[0]} - onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)} />
@@ -628,11 +642,11 @@ export default class UserSettingsDisplay extends React.Component { type='radio' name='channelDisplayMode' checked={channelDisplayMode[1]} - onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)} />
@@ -666,18 +680,18 @@ export default class UserSettingsDisplay extends React.Component { ); } else { let describe; - if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) { describe = ( ); } else { describe = ( ); } diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx index 4ceb85bb86..de4745aacf 100644 --- a/webapp/components/user_settings/user_settings_modal.jsx +++ b/webapp/components/user_settings/user_settings_modal.jsx @@ -211,15 +211,15 @@ class UserSettingsModal extends React.Component { } var tabs = []; - tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'}); - tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'}); - tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'}); + tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'}); + tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'}); + tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'icon fa fa-exclamation-circle'}); if (global.window.mm_config.EnableOAuthServiceProvider === 'true') { - tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'}); + tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'icon fa fa-th'}); } - tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'}); - tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'}); + tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'}); + tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'}); return ( div { display: none; } @@ -596,6 +630,10 @@ body.ios { } } + .post--fail { + position: relative; + } + p { font-size: .97em; line-height: 1.6em; @@ -634,33 +672,6 @@ body.ios { &.same--user { padding: 0 .5em 0 1em; - &.post--system { - padding: 8px .5em 0 1em; - - .post__header { - height: auto; - margin-bottom: 2px; - - .col__name { - display: inline-block; - } - - .col__reply { - - } - } - - .post__time { - @include opacity(.6); - font-size: .9em; - left: inherit; - line-height: inherit; - position: inherit; - text-rendering: inherit; - top: inherit; - } - } - &:hover { .post__time { @include opacity(.5); @@ -682,7 +693,7 @@ body.ios { } .col__reply { - top: 6px; + top: -1px; } } } @@ -721,7 +732,7 @@ body.ios { .post__header { .col__reply { - top: 53px; + top: -4px; } } } @@ -775,11 +786,14 @@ body.ios { } .col__reply { + border: 1px solid transparent; + border-radius: 2px; + min-width: 70px; + padding: 2px 5px; position: absolute; right: 0; - top: 30px; + top: -4px; white-space: nowrap; - width: 65px; } .permalink-popover { @@ -841,6 +855,7 @@ body.ios { min-width: 130px; padding: 2px 0; right: 0; + top: 20px; li { display: block; @@ -864,15 +879,15 @@ body.ios { @include opacity(.5); color: inherit; display: inline-block; + float: right; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; height: 20px; line-height: 20px; position: relative; - right: 15px; + right: -10px; text-decoration: none; - top: -5px; vertical-align: top; visibility: hidden; width: 20px; @@ -885,9 +900,8 @@ body.ios { .post__body { @include legacy-pie-clearfix; padding: .2em .5em; - width: calc(100% - 75px); + width: 100%; word-wrap: break-word; - position: relative; p { margin: 0 0 .4em; @@ -1013,12 +1027,8 @@ body.ios { } .post__time { - font-size: .9em; - } - - .post__time, - &.post--system .post__body { @include opacity(.6); + font-size: .9em; } .post-loading-gif { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ba72a8119c..9db962ec18 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -85,8 +85,9 @@ margin-bottom: 0; .col__reply { - top: 0; + top: -3px; width: 65px; + z-index: auto; } .col__name { @@ -146,7 +147,7 @@ &.post--comment { .post__header { .col__reply { - top: 0; + top: -3px; } } } @@ -158,6 +159,12 @@ } } + &.current--user { + .post__link { + margin: 0 0 8px; + } + } + &.same--root { &.same--user { .post__header { @@ -355,9 +362,10 @@ margin-top: 10px; } - button.close { + .close { font-size: 27px; font-weight: normal; + margin-top: -2px; } .modal-title { @@ -453,8 +461,8 @@ } &.minimize-settings { - padding: 0; display: none; + padding: 0; .user-settings { padding: 70px 20px 30px; @@ -469,13 +477,12 @@ .nav { > li { > a { - border-top: 1px solid #dddddd; + border-top: 1px solid transparent; font-size: 1.1em; line-height: 2.7; - color: #555555; - .glyphicon { - margin-left: 7px; + .icon { + margin: 0 7px; } } } @@ -667,7 +674,8 @@ padding: 7px 20px 0 49px; position: relative; - .glyphicon-refresh-animate { + .icon--refresh { + @include opacity(.6); color: $black; right: 33px; top: 15px; @@ -793,7 +801,6 @@ @include translate3d(100%, 0, 0); right: 0; width: 100%; - z-index: 5; .sidebar__collapse, .sidebar__search-icon { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 69443aafc9..d58e999699 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -16,7 +16,6 @@ .sidebar--right { @include single-transition(all, .5s, ease); @include translateX(100%); - z-index: 5; &.move--left { -webkit-transform: translateX(0) !important; @@ -113,6 +112,18 @@ .post { &.post--compact { + + .channel__wrap & { + .post__time { + font-size: .85em; + left: -70px; + position: absolute; + text-align: right; + top: 6px; + width: 60px; + } + } + &:not(.post--thread) { padding: 5px .5em 0 70px; @@ -121,15 +132,6 @@ vertical-align: bottom; } - .post__time { - font-size: .85em; - left: -70px; - position: absolute; - text-align: right; - top: 4px; - width: 60px; - } - span { p { &:last-child { @@ -156,7 +158,7 @@ } .col__reply { - top: 2px; + top: -1px; } } @@ -176,7 +178,7 @@ &.post--comment { .post__header { .col__reply { - top: 0; + top: -1px; } } } @@ -191,7 +193,7 @@ } .post__content { - padding-right: 85px; + padding-right: 45px; } } @@ -202,7 +204,7 @@ .post__header { .col__reply { - top: 4px; + top: -1px; } } @@ -211,6 +213,18 @@ display: none; } } + + &.post--root { + .post__img { + img { + display: block; + } + } + + .post__time { + @include opacity(.6); + } + } } &.post--comment { @@ -241,26 +255,16 @@ &.same--user { .post__time { @include opacity(0); - font-size: 11px; - left: -4px; - line-height: 37px; - position: absolute; - text-rendering: auto; - top: -2px; } - &.post--compact { - &.post--system { - .post__time { - position: absolute; - top: 3px; - } - } - + &:not(.post--compact) { .post__time { - font-size: .85em; - left: -70px; - top: -5px; + font-size: 11px; + left: -4px; + line-height: 37px; + position: absolute; + text-rendering: auto; + top: -2px; } } } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 2a10fc4865..4dba1558c7 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -283,9 +283,22 @@ padding: 10px; .category-icon { + font-size: 15px; + margin-right: 7px; + overflow: hidden; right: 12px; + text-align: center; top: 6px; - width: 17px; + vertical-align: bottom; + width: 16px; + + &.fa-user { + font-size: 14px; + } + + &.fa-bar-chart { + font-size: 16px; + } } } diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 5b8c36c5cf..f67d1b49ba 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -342,13 +342,16 @@ a { border-radius: 0; - color: #777; + color: $gray; padding: 8px 5px 8px 15px; } - .glyphicon { + .icon { + font-size: 15px; + margin-right: 10px; + text-align: center; top: 2px; - width: 25px; + width: 14px; } &:hover { diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index d3fe0363fc..4dc0dce425 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -291,21 +291,23 @@ color: #444444; } - .glyphicon { - &.glyphicon-ok, - &.glyphicon-refresh { + .fa { + position: relative; + + &.fa-check, + &.fa-refresh { font-size: .9em; left: -2px; margin-right: .5em; } - &.glyphicon-chevron-right { + &.fa-chevron-right { font-size: .8em; - right: -2px; - top: 0px; + right: -5px; + top: 0; } - &.glyphicon-chevron-left { + &.fa-chevron-left { font-size: .8em; left: -2px; top: 0px; @@ -443,19 +445,21 @@ } .signup-team-dir__arrow { - color: #999999; + color: $dark-gray; float: right; - font-size: .9em; - line-height: 3.5em; + font-size: 1.5em; + line-height: 25px; + position: relative; + top: .66em; } } .authorize-box { + border: 1px solid $black; + height: 280px; margin: 100px auto; width: 500px; - height: 280px; - border: 1px solid black; } .authorize-inner { @@ -467,6 +471,6 @@ } .verify_panel { - margin: 60px auto auto auto; + margin: 60px auto auto; max-width: 380px; } diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index e748cae4b1..0934e8de96 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -279,6 +279,7 @@ export default { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + ATTACHMENT_ICON_SVG: "", MATTERMOST_ICON_SVG: " ", ONLINE_ICON_SVG: " ", AWAY_ICON_SVG: " ", @@ -548,7 +549,7 @@ export default { CHANNEL_DISPLAY_MODE: 'channel_display_mode', CHANNEL_DISPLAY_MODE_CENTERED: 'centered', CHANNEL_DISPLAY_MODE_FULL_SCREEN: 'full', - CHANNEL_DISPLAY_MODE_DEFAULT: 'centered', + CHANNEL_DISPLAY_MODE_DEFAULT: 'full', MESSAGE_DISPLAY: 'message_display', MESSAGE_DISPLAY_CLEAN: 'clean', MESSAGE_DISPLAY_COMPACT: 'compact', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9fc342cb1d..65a203ab07 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -587,6 +587,7 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); @@ -607,7 +608,9 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1); changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); @@ -658,7 +661,7 @@ export function applyTheme(theme) { changeCss('.app__body .search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1); changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4); - changeCss('.app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); + changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5), 2); changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);