From 9d1dddb7f4cd6ee9682bb48d88f5f0271a72dcba Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 25 Sep 2015 22:44:36 +0500 Subject: plt-366 - Adding Windows 8 theme --- web/react/utils/constants.jsx | 32 ++++++++++++++++++++++++++++++-- web/react/utils/utils.jsx | 11 ++++++++--- 2 files changed, 38 insertions(+), 5 deletions(-) (limited to 'web/react/utils') diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 8c9e1ee85..0650fb92b 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -130,6 +130,7 @@ module.exports = { mentionColor: '#ffffff', centerChannelBg: '#ffffff', centerChannelColor: '#333333', + newMessageSeparator: '#FF8800', linkColor: '#2389d7', buttonBg: '#2389d7', buttonColor: '#FFFFFF' @@ -150,12 +151,13 @@ module.exports = { mentionColor: '#bfcde8', centerChannelBg: '#f2f4f8', centerChannelColor: '#333333', + newMessageSeparator: '#FF8800', linkColor: '#2f81b7', buttonBg: '#1dacfc', buttonColor: '#FFFFFF' }, - dark: { - type: 'Dark', + mattermostDark: { + type: 'Mattermost Dark', sidebarBg: '#1B2C3E', sidebarText: '#bbbbbb', sidebarUnreadText: '#fff', @@ -170,9 +172,31 @@ module.exports = { mentionColor: '#FFFFFF', centerChannelBg: '#2F3E4E', centerChannelColor: '#DDDDDD', + newMessageSeparator: '#5de5da', linkColor: '#A4FFEB', buttonBg: '#1dacfc', buttonColor: '#FFFFFF' + }, + windows10: { + type: 'Windows 10 Dark', + sidebarBg: '#171717', + sidebarText: '#eee', + sidebarUnreadText: '#fff', + sidebarTextHoverBg: '#302e30', + sidebarTextHoverColor: '#fff', + sidebarTextActiveBg: '#484748', + sidebarTextActiveColor: '#FFFFFF', + sidebarHeaderBg: '#1f1f1f', + sidebarHeaderTextColor: '#FFFFFF', + onlineIndicator: '#0177e7', + mentionBj: '#0177e7', + mentionColor: '#FFFFFF', + centerChannelBg: '#1F1F1F', + centerChannelColor: '#DDDDDD', + newMessageSeparator: '#CC992D', + linkColor: '#0177e7', + buttonBg: '#0177e7', + buttonColor: '#FFFFFF' } }, THEME_ELEMENTS: [ @@ -232,6 +256,10 @@ module.exports = { id: 'centerChannelColor', uiName: 'Center Channel Text' }, + { + id: 'newMessageSeparator', + uiName: 'New message separator' + }, { id: 'linkColor', uiName: 'Link Color' diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index d45240f9a..280370c33 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -615,7 +615,7 @@ export function applyTheme(theme) { } if (theme.centerChannelColor) { - changeCss('.app__content, .post-create__container .post-create-body .btn-file', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round', 'color:' + theme.centerChannelColor, 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.post-body hr', 'background:' + theme.centerChannelColor, 1); changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1); @@ -630,8 +630,8 @@ export function applyTheme(theme) { changeCss('.search-bar__container .search__form .search-bar', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: ' + theme.centerChannelColor, 2); changeCss('.search-bar__container .search__form', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.channel-intro .channel-intro__content', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); - changeCss('.date-separator .separator__text, .new-separator .separator__text', 'color:' + theme.centerChannelColor, 2); - changeCss('.date-separator .separator__hr, .new-separator .separator__hr, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2); + changeCss('.date-separator .separator__hr, .post-right__container .post.post--root hr, .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.channel-intro', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); @@ -645,6 +645,11 @@ export function applyTheme(theme) { changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); } + if (theme.newMessageSeparator) { + changeCss('.new-separator .separator__text', 'color:' + theme.newMessageSeparator, 1); + changeCss('.new-separator .separator__hr', 'border-color:' + changeOpacity(theme.newMessageSeparator, 0.5), 1); + } + if (theme.linkColor) { changeCss('a, a:focus, a:hover', 'color:' + theme.linkColor, 1); changeCss('.post .comment-icon__container', 'fill:' + theme.linkColor, 1); -- cgit v1.2.3-1-g7c22