From 4b427bd7494a0d9e0c4802e0e0b4ff9eb9829bdd Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 11 Oct 2017 11:47:41 -0700 Subject: [PATCH 01/10] created migration, needs review --- packages/rocketchat-theme/server/variables.js | 29 ++++++++--- packages/rocketchat-ui-master/client/main.js | 2 +- .../server/dynamic-css.js | 14 ++++- .../rocketchat-ui-master/server/inject.js | 24 ++++++--- server/startup/migrations/v103.js | 52 +++++++++++++++++++ 5 files changed, 106 insertions(+), 15 deletions(-) create mode 100644 server/startup/migrations/v103.js diff --git a/packages/rocketchat-theme/server/variables.js b/packages/rocketchat-theme/server/variables.js index 022c5c12af15..e3c9a878271f 100644 --- a/packages/rocketchat-theme/server/variables.js +++ b/packages/rocketchat-theme/server/variables.js @@ -10,6 +10,7 @@ // Defined range of transparencies reduces random colour variances // Major colors form the core of the scheme // Names changed to reflect usage, comments show pre-refactor names + const majorColors= { 'content-background-color': '#FFFFFF', 'primary-background-color': '#04436A', @@ -61,12 +62,26 @@ RocketChat.settings.add('theme-custom-css', '', { public: true }); +const reg = /--(color-.*?): (.*?);/igm; -RocketChat.settings.add('theme-custom-variables', Assets.getText('client/imports/general/variables.css'), { - group: 'Layout', - type: 'code', - code: 'text/css', - multiline: true, - section: 'Customize Theme', - public: true +const colors = [...Assets.getText('client/imports/general/variables.css').match(reg)].map(color => { + const [name, value] = color.split(": "); + return [name.replace("--", ""), value.replace(";", "")]; +}); + +colors.forEach(([key, color]) => { + if(/var/.test(color)){ + const [,value] = color.match(/var\(--(.*?)\)/i); + return RocketChat.theme.addPublicColor(key, value, 'Colors Test', 'expression'); + } + RocketChat.theme.addPublicColor(key, color, 'Colors Test'); }); + +// RocketChat.settings.add('theme-custom-variables', Assets.getText('client/imports/general/variables.css'), { +// group: 'Layout', +// type: 'code', +// code: 'text/css', +// multiline: true, +// section: 'Customize Theme', +// public: true +// }); diff --git a/packages/rocketchat-ui-master/client/main.js b/packages/rocketchat-ui-master/client/main.js index f784ab6cbc07..b973c1eceede 100644 --- a/packages/rocketchat-ui-master/client/main.js +++ b/packages/rocketchat-ui-master/client/main.js @@ -1,7 +1,7 @@ /* globals toolbarSearch, menu, isRtl, fireGlobalEvent, CachedChatSubscription, DynamicCss */ import Clipboard from 'clipboard'; -RocketChat.settings.collection.find({_id:'theme-custom-variables'}, {fields:{ value: 1 }}).observe({changed: () => { DynamicCss.run(true); }}); +RocketChat.settings.collection.find({_id:/theme-color-color/}, {fields:{ value: 1 }}).observe({changed: () => { DynamicCss.run(true); }}); Template.body.onRendered(function() { new Clipboard('.clipboard'); diff --git a/packages/rocketchat-ui-master/server/dynamic-css.js b/packages/rocketchat-ui-master/server/dynamic-css.js index 37acc385bce5..d9349852be74 100644 --- a/packages/rocketchat-ui-master/server/dynamic-css.js +++ b/packages/rocketchat-ui-master/server/dynamic-css.js @@ -153,7 +153,19 @@ export default () => { DynamicCss.test = () => window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)'); DynamicCss.run = debounce((replace = false) => { if (replace) { - document.querySelector('#css-variables').innerHTML = RocketChat.settings.get('theme-custom-variables'); + // const variables = RocketChat.models.Settings.findOne({_id:'theme-custom-variables'}, {fields: { value: 1}}); + const colors = RocketChat.settings.collection.find({_id:/theme-color-color-/i}, {fields: { value: 1, editor: 1}}).fetch().filter(color => color && color.value); + + if (!colors) { + return; + } + const css = colors.map(({_id, value, editor}) => { + if(editor === "expression"){ + return `--${ _id.replace("theme-color-", "")}: var(--${value});` + } + return `--${ _id.replace("theme-color-", "")}: ${value};` + }).join("\n"); + document.querySelector('#css-variables').innerHTML = `:root {${ css }}`; } cssVarPoly.init(); }, 1000); diff --git a/packages/rocketchat-ui-master/server/inject.js b/packages/rocketchat-ui-master/server/inject.js index b53d351029ea..0f918037e72c 100644 --- a/packages/rocketchat-ui-master/server/inject.js +++ b/packages/rocketchat-ui-master/server/inject.js @@ -1,15 +1,27 @@ /* globals Inject */ -const renderDynamicCssList = () => { - const variables = RocketChat.models.Settings.findOne({_id:'theme-custom-variables'}, {fields: { value: 1}}); - if (!variables || !variables.value) { +const renderDynamicCssList = _.debounce(Meteor.bindEnvironment(() => { + // const variables = RocketChat.models.Settings.findOne({_id:'theme-custom-variables'}, {fields: { value: 1}}); + const colors = RocketChat.models.Settings.find({_id:/theme-color-color-/i}, {fields: { value: 1, editor: 1}}).fetch().filter(color => color && color.value); + + if (!colors) { return; } - Inject.rawBody('dynamic-variables', ``); -}; + const css = colors.map(({_id, value, editor}) => { + if(editor === "expression"){ + return `--${ _id.replace("theme-color-", "")}: var(--${value});` + } + return `--${ _id.replace("theme-color-", "")}: ${value};` + }).join("\n"); + Inject.rawBody('dynamic-variables', ``); +}), 500); renderDynamicCssList(); -RocketChat.models.Settings.find({_id:'theme-custom-variables'}, {fields: { value: 1}}).observe({ +// RocketChat.models.Settings.find({_id:'theme-custom-variables'}, {fields: { value: 1}}).observe({ +// changed: renderDynamicCssList +// }); + +RocketChat.models.Settings.find({_id:/theme-color-color-/i}, {fields: { value: 1}}).observe({ changed: renderDynamicCssList }); diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js new file mode 100644 index 000000000000..c4e80663ee47 --- /dev/null +++ b/server/startup/migrations/v103.js @@ -0,0 +1,52 @@ + +const majorColors= { + 'content-background-color': '#FFFFFF', + 'primary-background-color': 'color-primary', + 'primary-font-color': '#444444', + 'primary-action-color': '#13679A', // was action-buttons-color + 'secondary-background-color': '#F4F4F4', + 'secondary-font-color': '#A0A0A0', + 'secondary-action-color': '#DDDDDD', + 'component-color': '#EAEAEA', + 'success-color': '#4dff4d', + 'pending-color': '#FCB316', + 'error-color': '#BC2031', + 'selection-color': '#02ACEC', + 'attention-color': '#9C27B0' +}; + +// Minor colours implement major colours by default, but can be overruled +const minorColors= { + 'tertiary-background-color': '@component-color', + 'tertiary-font-color': '@transparent-lightest', + 'link-font-color': '@primary-action-color', + 'info-font-color': '@secondary-font-color', + 'custom-scrollbar-color': '@transparent-darker', + 'status-online': '@success-color', + 'status-away': '@pending-color', + 'status-busy': '@error-color', + 'status-offline': '@transparent-darker' +}; + +const newvariables = { + 'content-background-color': 'color-primary', + 'primary-background-color': 'color-primary' +} +RocketChat.Migrations.add({ + version: 103, + up() { + // Object.keys(majorColors).forEach(function (_id) { + // const color = RocketChat.models.Settings.findOne({_id}); + // // RocketChat.models.Settings.remove(color); + // if(color.value !== majorColors[key] && newvariables[key]){ + // const _id = `theme-color-${ key }`; + // RocketChat.models.Settings.update({_id}, {$set: { value : color.value, editor: color.editor }}); + // } + // }); + // Object.keys(minorColors).forEach(function (_id) { + // const color = RocketChat.models.Settings.findOne({_id}); + // RocketChat.models.Settings.remove(color); + // }); + + } +}); From 5e94b7ec0e04fdfc5ac122a759873fb6a8aa64b6 Mon Sep 17 00:00:00 2001 From: Rodrigo Nascimento Date: Thu, 12 Oct 2017 15:09:07 -0300 Subject: [PATCH 02/10] Fix some ESLint errors --- packages/rocketchat-theme/server/variables.js | 8 ++++---- packages/rocketchat-ui-master/server/dynamic-css.js | 8 ++++---- packages/rocketchat-ui-master/server/inject.js | 8 ++++---- server/startup/migrations/v103.js | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/rocketchat-theme/server/variables.js b/packages/rocketchat-theme/server/variables.js index e3c9a878271f..4e197b5fc7f7 100644 --- a/packages/rocketchat-theme/server/variables.js +++ b/packages/rocketchat-theme/server/variables.js @@ -65,13 +65,13 @@ RocketChat.settings.add('theme-custom-css', '', { const reg = /--(color-.*?): (.*?);/igm; const colors = [...Assets.getText('client/imports/general/variables.css').match(reg)].map(color => { - const [name, value] = color.split(": "); - return [name.replace("--", ""), value.replace(";", "")]; + const [name, value] = color.split(': '); + return [name.replace('--', ''), value.replace(';', '')]; }); colors.forEach(([key, color]) => { - if(/var/.test(color)){ - const [,value] = color.match(/var\(--(.*?)\)/i); + if (/var/.test(color)) { + const [, value] = color.match(/var\(--(.*?)\)/i); return RocketChat.theme.addPublicColor(key, value, 'Colors Test', 'expression'); } RocketChat.theme.addPublicColor(key, color, 'Colors Test'); diff --git a/packages/rocketchat-ui-master/server/dynamic-css.js b/packages/rocketchat-ui-master/server/dynamic-css.js index d9349852be74..a4f474edecce 100644 --- a/packages/rocketchat-ui-master/server/dynamic-css.js +++ b/packages/rocketchat-ui-master/server/dynamic-css.js @@ -160,11 +160,11 @@ export default () => { return; } const css = colors.map(({_id, value, editor}) => { - if(editor === "expression"){ - return `--${ _id.replace("theme-color-", "")}: var(--${value});` + if (editor === 'expression') { + return `--${ _id.replace('theme-color-', '') }: var(--${ value });`; } - return `--${ _id.replace("theme-color-", "")}: ${value};` - }).join("\n"); + return `--${ _id.replace('theme-color-', '') }: ${ value };`; + }).join('\n'); document.querySelector('#css-variables').innerHTML = `:root {${ css }}`; } cssVarPoly.init(); diff --git a/packages/rocketchat-ui-master/server/inject.js b/packages/rocketchat-ui-master/server/inject.js index 0f918037e72c..330761268f68 100644 --- a/packages/rocketchat-ui-master/server/inject.js +++ b/packages/rocketchat-ui-master/server/inject.js @@ -7,11 +7,11 @@ const renderDynamicCssList = _.debounce(Meteor.bindEnvironment(() => { return; } const css = colors.map(({_id, value, editor}) => { - if(editor === "expression"){ - return `--${ _id.replace("theme-color-", "")}: var(--${value});` + if (editor === 'expression') { + return `--${ _id.replace('theme-color-', '') }: var(--${ value });`; } - return `--${ _id.replace("theme-color-", "")}: ${value};` - }).join("\n"); + return `--${ _id.replace('theme-color-', '') }: ${ value };`; + }).join('\n'); Inject.rawBody('dynamic-variables', ``); }), 500); diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js index c4e80663ee47..e22c730c3a1e 100644 --- a/server/startup/migrations/v103.js +++ b/server/startup/migrations/v103.js @@ -31,7 +31,7 @@ const minorColors= { const newvariables = { 'content-background-color': 'color-primary', 'primary-background-color': 'color-primary' -} +}; RocketChat.Migrations.add({ version: 103, up() { From 5df79b3f626859b95330f900069b831c69ff404c Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Sat, 14 Oct 2017 00:10:27 -0700 Subject: [PATCH 03/10] step 2 --- .../.npm/package/npm-shrinkwrap.json | 63 +-- .../client/imports/components/messages.css | 6 +- .../client/imports/components/popover.css | 4 +- .../client/imports/forms/switch.css | 6 +- .../client/imports/general/variables.css | 486 +++++++++--------- packages/rocketchat-theme/server/variables.js | 2 +- 6 files changed, 282 insertions(+), 285 deletions(-) diff --git a/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json b/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json index 3485f52f8fb5..2617915b67c1 100644 --- a/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json +++ b/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json @@ -265,14 +265,7 @@ "gcp-metadata": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-0.3.1.tgz", - "from": "gcp-metadata@>=0.3.0 <0.4.0", - "dependencies": { - "retry-request": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-3.0.0.tgz", - "from": "retry-request@>=3.0.0 <4.0.0" - } - } + "from": "gcp-metadata@>=0.3.0 <0.4.0" }, "gcs-resumable-upload": { "version": "0.8.2", @@ -347,13 +340,13 @@ "from": "graceful-fs@>=4.1.2 <5.0.0" }, "grpc": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.6.0.tgz", - "from": "grpc@>=1.3.1 <2.0.0", + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.6.6.tgz", + "from": "grpc@>=1.6.0 <2.0.0", "dependencies": { "abbrev": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "from": "abbrev@1" }, "ajv": { @@ -367,8 +360,8 @@ "from": "ansi-regex@^2.0.0" }, "aproba": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.2.tgz", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", "from": "aproba@^1.0.3" }, "are-we-there-yet": { @@ -479,8 +472,8 @@ } }, "debug": { - "version": "2.6.8", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz", + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "from": "debug@^2.2.0" }, "deep-extend": { @@ -583,7 +576,7 @@ "hawk": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", - "from": "hawk@~3.1.3" + "from": "hawk@3.1.3" }, "hoek": { "version": "2.16.3", @@ -668,13 +661,13 @@ } }, "mime-db": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.29.0.tgz", - "from": "mime-db@~1.29.0" + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz", + "from": "mime-db@~1.30.0" }, "mime-types": { - "version": "2.1.16", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.16.tgz", + "version": "2.1.17", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz", "from": "mime-types@~2.1.7" }, "minimatch": { @@ -705,9 +698,9 @@ "from": "ms@2.0.0" }, "node-pre-gyp": { - "version": "0.6.36", - "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz", - "from": "node-pre-gyp@0.6.36" + "version": "0.6.38", + "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz", + "from": "node-pre-gyp@0.6.38" }, "nopt": { "version": "4.0.1", @@ -792,11 +785,11 @@ "request": { "version": "2.81.0", "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz", - "from": "request@^2.81.0" + "from": "request@2.81.0" }, "rimraf": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz", "from": "rimraf@^2.6.1" }, "safe-buffer": { @@ -872,8 +865,8 @@ "from": "tar-pack@^3.4.0" }, "tough-cookie": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz", "from": "tough-cookie@~2.3.0" }, "tunnel-agent": { @@ -1123,7 +1116,7 @@ "nan": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.7.0.tgz", - "from": "nan@>=2.6.2 <3.0.0" + "from": "nan@>=2.7.0 <3.0.0" }, "node-forge": { "version": "0.7.1", @@ -1236,9 +1229,9 @@ "from": "request@>=2.79.0 <3.0.0" }, "retry-request": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-2.0.5.tgz", - "from": "retry-request@>=2.0.0 <3.0.0" + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-3.0.1.tgz", + "from": "retry-request@>=3.0.0 <4.0.0" }, "rgb-hex": { "version": "1.0.0", diff --git a/packages/rocketchat-theme/client/imports/components/messages.css b/packages/rocketchat-theme/client/imports/components/messages.css index 0731807509af..f2ecefaca293 100644 --- a/packages/rocketchat-theme/client/imports/components/messages.css +++ b/packages/rocketchat-theme/client/imports/components/messages.css @@ -17,7 +17,7 @@ margin: 0 0.2rem; &:hover { - color: var(--color-button-primary); + color: var(--rc-color-button-primary); } } @@ -27,7 +27,7 @@ cursor: pointer; &:hover &-icon { - fill: var(--color-button-primary); + fill: var(--rc-color-button-primary); } &-icon { @@ -48,7 +48,7 @@ &.active { & .message-actions__label { - color: var(--color-button-primary); + color: var(--rc-color-button-primary); } } diff --git a/packages/rocketchat-theme/client/imports/components/popover.css b/packages/rocketchat-theme/client/imports/components/popover.css index 25de8edb18c6..fc1011b3b5ca 100644 --- a/packages/rocketchat-theme/client/imports/components/popover.css +++ b/packages/rocketchat-theme/client/imports/components/popover.css @@ -94,10 +94,10 @@ align-items: center; &--alert { - color: var(--color-error); + color: var(--rc-color-error); & .rc-icon { - fill: var(--color-error); + fill: var(--rc-color-error); } } } diff --git a/packages/rocketchat-theme/client/imports/forms/switch.css b/packages/rocketchat-theme/client/imports/forms/switch.css index 05018a2280d4..342138ff8338 100644 --- a/packages/rocketchat-theme/client/imports/forms/switch.css +++ b/packages/rocketchat-theme/client/imports/forms/switch.css @@ -25,7 +25,7 @@ &:checked { & + .rc-switch__button { border-color: #26d198; - background-color: var(--color-success); + background-color: var(--rc-color-success); & .rc-switch__button-inside { transform: translate3d(1px, 1px, 0); @@ -45,9 +45,9 @@ transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1); border-width: 1px; - border-color: var(--color-error-light); + border-color: var(--rc-color-error-light); border-radius: 13px; - background-color: var(--color-error); + background-color: var(--rc-color-error); } &__button-inside { diff --git a/packages/rocketchat-theme/client/imports/general/variables.css b/packages/rocketchat-theme/client/imports/general/variables.css index 994fb29d8cbd..8ec460f411c6 100644 --- a/packages/rocketchat-theme/client/imports/general/variables.css +++ b/packages/rocketchat-theme/client/imports/general/variables.css @@ -1,267 +1,271 @@ -:root { - /* - * General Colors - */ - --color-primary: var(--color-dark); - --color-darkest: #1f2329; - --color-dark: #2f343d; - --color-dark-medium: #414852; - --color-dark-light: #6c727a; - --color-gray: #9ea2a8; - --color-gray-medium: #cbced1; - --color-gray-light: #e1e5e8; - --color-gray-lightest: #f2f3f5; - --color-black: #000000; - --color-white: #ffffff; - --color-error: #f5455c; - --color-error-light: #e1364c; - --color-alert: #ffd21f; - --color-alert-light: #f6c502; - --color-success: #2de0a5; - --color-success-light: #25d198; - --color-button-primary: #1d74f5; - --color-button-primary-light: #175cc4; + :root { + /* + * General Colors + */ - /* - * General - */ - --text-size: 0.875rem; - --header-min-height: 60px; - --toolbar-height: 55px; - --footer-min-height: 70px; - --rooms-box-width: 280px; - --flex-tab-width: 400px; - --flex-tab-webrtc-width: 400px; - --flex-tab-webrtc-2-width: 850px; - --user-image-square: 20px; - --border: 2px; - --border-radius: 2px; - --status-online: var(--color-success); - --status-away: var(--color-alert); - --status-busy: var(--color-error); - --status-invisible: var(--color-gray-medium); - --status-invisible-sidebar: var(--color-darkest); - --default-small-padding: 1rem; + --color-darkest: #1f2329; + --color-dark: #2f343d; + --color-dark-medium: #414852; + --color-dark-light: #6c727a; + --color-gray: #9ea2a8; + --color-gray-medium: #cbced1; + --color-gray-light: #e1e5e8; + --color-gray-lightest: #f2f3f5; + --color-black: #000000; + --color-white: #ffffff; - /* - * Forms - */ - --gap-between-elements: 2.5rem; - --label-margin-bottom: 1rem; + --rc-color-error: #f5455c; + --rc-color-error-light: #e1364c; + --rc-color-alert: #ffd21f; + --rc-color-alert-light: #f6c502; + --rc-color-success: #2de0a5; + --rc-color-success-light: #25d198; + --rc-color-button-primary: #1d74f5; + --rc-color-button-primary-light: #175cc4; - /* - * Forms - Button - */ - --button-square-size: 36px; - --button-padding: 0.782rem; - --button-padding-small: 0.5rem; - --button-text-size: var(--input-font-size); - --button-border-width: var(--border); - --button-border-radius: var(--border-radius); - --button-disabled-background: var(--color-gray-light); - --button-disabled-text-color: var(--color-white); - --button-primary-background: var(--color-button-primary); - --button-primary-text-color: var(--color-white); + --rc-color-primary: var(--color-dark); + --rc-color-content: var(--color-white); - /* - * Forms - Input - */ - --input-font-size: 0.875rem; - --input-title-text-size: var(--input-font-size); - --input-title-color: #2d343d; - --input-text-color: var(--color-dark-medium); - --input-placeholder-color: var(--color-gray-medium); - --input-icon-color: var(--color-dark); - --input-border-color: var(--color-gray-light); - --input-border-width: var(--border); - --input-border-radius: var(--border-radius); - --input-description-text-color: var(--color-gray); - --input-description-text-size: var(--input-font-size); - --input-error-color: var(--color-error); + /* + * General + */ + --text-size: 0.875rem; + --header-min-height: 60px; + --toolbar-height: 55px; + --footer-min-height: 70px; + --rooms-box-width: 280px; + --flex-tab-width: 400px; + --flex-tab-webrtc-width: 400px; + --flex-tab-webrtc-2-width: 850px; + --user-image-square: 20px; + --border: 2px; + --border-radius: 2px; + --status-online: var(--rc-color-success); + --status-away: var(--rc-color-alert); + --status-busy: var(--rc-color-error); + --status-invisible: var(--color-gray-medium); + --status-invisible-sidebar: var(--color-darkest); + --default-small-padding: 1rem; - /* - * Forms - popup list - */ - --popup-list-border-radius: var(--border-radius); - --popup-list-background: var(--color-white); - --popup-list-background-hover: var(--color-gray-lightest); - --popup-list-selected-background: var(--color-gray-lightest); - --popup-list-name-color: #2d343d; - --popup-list-name-size: 1rem; + /* + * Forms + */ + --gap-between-elements: 2.5rem; + --label-margin-bottom: 1rem; - /* - * Forms - tags - */ - --tags-border-width: var(--border); - --tags-border-radius: var(--border-radius); - --tags-border-color: var(--color-gray-light); - --tags-text-color: var(--color-dark); - --tags-background: #f2f3f5; - --tags-avatar-size: 20px; + /* + * Forms - Button + */ + --button-square-size: 36px; + --button-padding: 0.782rem; + --button-padding-small: 0.5rem; + --button-text-size: var(--input-font-size); + --button-border-width: var(--border); + --button-border-radius: var(--border-radius); + --button-disabled-background: var(--color-gray-light); + --button-disabled-text-color: var(--color-white); + --button-primary-background: var(--rc-color-button-primary); + --button-primary-text-color: var(--color-white); - /* - * Forms - select avatar - */ - --select-avatar-size: 48px; - --select-avatar-preview-size: 150px; - --select-avatar-upload-background: var(--color-gray-light); - --select-avatar-upload-color: #2d343d; + /* + * Forms - Input + */ + --input-font-size: 0.875rem; + --input-title-text-size: var(--input-font-size); + --input-title-color: #2d343d; + --input-text-color: var(--color-dark-medium); + --input-placeholder-color: var(--color-gray-medium); + --input-icon-color: var(--color-dark); + --input-border-color: var(--color-gray-light); + --input-border-width: var(--border); + --input-border-radius: var(--border-radius); + --input-description-text-color: var(--color-gray); + --input-description-text-size: var(--input-font-size); + --input-error-color: var(--rc-color-error); - /* - * Modal - */ - --modal-wrapper-width: 650px; - --modal-wrapper-margin: 3rem; - --modal-back-button-color: var(--color-gray); + /* + * Forms - popup list + */ + --popup-list-border-radius: var(--border-radius); + --popup-list-background: var(--color-white); + --popup-list-background-hover: var(--color-gray-lightest); + --popup-list-selected-background: var(--color-gray-lightest); + --popup-list-name-color: #2d343d; + --popup-list-name-size: 1rem; - /* - * Modal - Create Channel - */ - --create-channel-gap-between-elements: 2.5rem; - --create-channel-title-color: var(--color-darkest); - --create-channel-title-text-size: 1.375rem; - --create-channel-description-color: var(--color-gray); - --create-channel-description-text-size: 0.875rem; + /* + * Forms - tags + */ + --tags-border-width: var(--border); + --tags-border-radius: var(--border-radius); + --tags-border-color: var(--color-gray-light); + --tags-text-color: var(--color-dark); + --tags-background: #f2f3f5; + --tags-avatar-size: 20px; - /* - * Sidebar - */ - --sidebar-width: 280px; - --sidebar-small-width: 90%; - --sidebar-background: var(--color-primary); - --sidebar-background-hover: var(--color-dark-medium); - --sidebar-background-light: var(--color-gray-lightest); - --sidebar-background-light-hover: var(--color-gray-light); - --sidebar-default-padding: 24px; - --sidebar-small-default-padding: 16px; - --sidebar-header-padding: 16px; - --sidebar-header-small-padding: 12px; - --sidebar-footer-height: 70px; - --sidebar-footer-padding: var(--sidebar-header-padding); - --sidebar-small-header-padding: var(--sidebar-small-default-padding); + /* + * Forms - select avatar + */ + --select-avatar-size: 48px; + --select-avatar-preview-size: 150px; + --select-avatar-upload-background: var(--color-gray-light); + --select-avatar-upload-color: #2d343d; - /* - * Sidebar flex - */ - --sidebar-flex-search-background: var(--color-white); - --sidebar-flex-search-placeholder-color: var(--color-gray); + /* + * Modal + */ + --modal-wrapper-width: 650px; + --modal-wrapper-margin: 3rem; + --modal-back-button-color: var(--color-gray); - /* - * Sidebar Account - */ - --sidebar-account-thumb-size: 36px; - --sidebar-small-account-thumb-size: 40px; - --sidebar-account-status-bullet-size: 12px; - --sidebar-small-account-status-bullet-size: 8px; - --sidebar-account-status-bullet-radius: 50%; - --sidebar-account-username-size: 1rem; - --sidebar-account-username-weight: 700; - --sidebar-small-account-username-weight: 400; - --sidebar-account-username-color: var(--color-white); - --sidebar-account-username-color-darker: var(--color-dark); - --sidebar-account-status-font-size: 0.875rem; - --sidebar-account-status-color: var(--color-gray); + /* + * Modal - Create Channel + */ + --create-channel-gap-between-elements: 2.5rem; + --create-channel-title-color: var(--color-darkest); + --create-channel-title-text-size: 1.375rem; + --create-channel-description-color: var(--color-gray); + --create-channel-description-text-size: 0.875rem; - /* - * Sidebar Item - */ - --sidebar-item-radius: 2px; - --sidebar-item-height: 32px; - --sidebar-item-thumb-size: 20px; + /* + * Sidebar + */ + --sidebar-width: 280px; + --sidebar-small-width: 90%; + --sidebar-background: var(--color-primary); + --sidebar-background-hover: var(--color-dark-medium); + --sidebar-background-light: var(--color-gray-lightest); + --sidebar-background-light-hover: var(--color-gray-light); + --sidebar-default-padding: 24px; + --sidebar-small-default-padding: 16px; + --sidebar-header-padding: 16px; + --sidebar-header-small-padding: 12px; + --sidebar-footer-height: 70px; + --sidebar-footer-padding: var(--sidebar-header-padding); + --sidebar-small-header-padding: var(--sidebar-small-default-padding); - --sidebar-item-text-color: var(--color-gray); - --sidebar-item-background: inherit; - --sidebar-item-hover-background: var(--color-darkest); + /* + * Sidebar flex + */ + --sidebar-flex-search-background: var(--color-white); + --sidebar-flex-search-placeholder-color: var(--color-gray); - --sidebar-item-active-background: var(--color-dark-medium); - --sidebar-item-active-color: var(--sidebar-item-text-color); + /* + * Sidebar Account + */ + --sidebar-account-thumb-size: 36px; + --sidebar-small-account-thumb-size: 40px; + --sidebar-account-status-bullet-size: 12px; + --sidebar-small-account-status-bullet-size: 8px; + --sidebar-account-status-bullet-radius: 50%; + --sidebar-account-username-size: 1rem; + --sidebar-account-username-weight: 700; + --sidebar-small-account-username-weight: 400; + --sidebar-account-username-color: var(--color-white); + --sidebar-account-username-color-darker: var(--color-dark); + --sidebar-account-status-font-size: 0.875rem; + --sidebar-account-status-color: var(--color-gray); - --sidebar-item-unread-color: var(--color-white); + /* + * Sidebar Item + */ + --sidebar-item-radius: 2px; + --sidebar-item-height: 32px; + --sidebar-item-thumb-size: 20px; - --sidebar-item-popup-background: var(--color-dark-medium); - --sidebar-item-user-status-size: 6px; - --sidebar-small-item-user-status-size: 4px; - --sidebar-item-user-status-radius: 50%; - --sidebar-item-text-size: 1rem; + --sidebar-item-text-color: var(--color-gray); + --sidebar-item-background: inherit; + --sidebar-item-hover-background: var(--color-darkest); - /* - * Toolbar - */ - --toolbar-placeholder-color: var(--color-gray); + --sidebar-item-active-background: var(--color-dark-medium); + --sidebar-item-active-color: var(--sidebar-item-text-color); - /* - * Rooms list - */ - --rooms-list-title-color: var(--color-gray); - --rooms-list-title-text-size: 0.75rem; - --rooms-list-empty-text-color: var(--color-gray); - --rooms-list-empty-text-size: 0.75rem; - --rooms-list-padding: var(--sidebar-default-padding); - --rooms-list-small-padding: var(--sidebar-small-default-padding); + --sidebar-item-unread-color: var(--color-white); - /* - * Chip - */ - --chip-background: #dddddd; + --sidebar-item-popup-background: var(--color-dark-medium); + --sidebar-item-user-status-size: 6px; + --sidebar-small-item-user-status-size: 4px; + --sidebar-item-user-status-radius: 50%; + --sidebar-item-text-size: 1rem; - /* - * Avatar - */ - --avatar-radius: var(--border-radius); - --avatar-initials-text-size: 22px; - --avatar-initials-text-weight: 700; + /* + * Toolbar + */ + --toolbar-placeholder-color: var(--color-gray); - /* - * Badge - */ - --badge-text-color: var(--color-white); - --badge-radius: var(--border-radius); - --badge-text-size: 0.75rem; - --badge-background: var(--color-dark-medium); - --badge-unread-background: var(--color-button-primary); + /* + * Rooms list + */ + --rooms-list-title-color: var(--color-gray); + --rooms-list-title-text-size: 0.75rem; + --rooms-list-empty-text-color: var(--color-gray); + --rooms-list-empty-text-size: 0.75rem; + --rooms-list-padding: var(--sidebar-default-padding); + --rooms-list-small-padding: var(--sidebar-small-default-padding); - /* - * Flex nav - */ - --flex-nav-background: var(--color-gray-lightest); + /* + * Chip + */ + --chip-background: #dddddd; - /* - * Popover - */ - --popover-padding: 1rem; - --popover-radius: var(--border-radius); - --popover-background: var(--color-white); - --popover-column-min-width: 130px; - --popover-column-padding: 1rem; - --popover-title-color: var(--color-dark); - --popover-title-text-size: 0.75rem; - --popover-item-color: var(--color-dark); - --popover-item-text-size: 0.875rem; - --popover-divider-height: 2px; - --popover-divider-color: var(--color-gray-light); + /* + * Avatar + */ + --avatar-radius: var(--border-radius); + --avatar-initials-text-size: 22px; + --avatar-initials-text-weight: 700; - /* - * Tooltip - */ - --tooltip-background: var(--color-darkest); - --tooltip-text-color: var(--color-white); - --tooltip-text-size: 0.75rem; - --tooltip-radius: var(--border-radius); + /* + * Badge + */ + --badge-text-color: var(--color-white); + --badge-radius: var(--border-radius); + --badge-text-size: 0.75rem; + --badge-background: var(--color-dark-medium); + --badge-unread-background: var(--rc-color-button-primary); - /* - * Message box - */ - --message-box-text-size: var(--input-font-size); - --message-box-placeholder-color: var(--color-gray-medium); - --message-box-markdown-color: var(--color-gray); - --message-box-markdown-hover-color: var(--color-dark); - --message-box-user-typing-color: var(--color-gray); - --message-box-user-typing-text-size: 0.75rem; - --message-box-user-typing-user-color: var(--color-dark); - --message-box-container-border-color: var(--color-gray-medium); - --message-box-container-border-width: var(--border); - --message-box-container-border-radius: var(--border-radius); - --message-box-editing-color: #fff5df; - --message-box-popover-title-text-color: var(--color-gray); - --message-box-popover-title-text-size: 0.75rem; -} + /* + * Flex nav + */ + --flex-nav-background: var(--color-gray-lightest); + + /* + * Popover + */ + --popover-padding: 1rem; + --popover-radius: var(--border-radius); + --popover-background: var(--color-white); + --popover-column-min-width: 130px; + --popover-column-padding: 1rem; + --popover-title-color: var(--color-dark); + --popover-title-text-size: 0.75rem; + --popover-item-color: var(--color-dark); + --popover-item-text-size: 0.875rem; + --popover-divider-height: 2px; + --popover-divider-color: var(--color-gray-light); + + /* + * Tooltip + */ + --tooltip-background: var(--color-darkest); + --tooltip-text-color: var(--color-white); + --tooltip-text-size: 0.75rem; + --tooltip-radius: var(--border-radius); + + /* + * Message box + */ + --message-box-text-size: var(--input-font-size); + --message-box-placeholder-color: var(--color-gray-medium); + --message-box-markdown-color: var(--color-gray); + --message-box-markdown-hover-color: var(--color-dark); + --message-box-user-typing-color: var(--color-gray); + --message-box-user-typing-text-size: 0.75rem; + --message-box-user-typing-user-color: var(--color-dark); + --message-box-container-border-color: var(--color-gray-medium); + --message-box-container-border-width: var(--border); + --message-box-container-border-radius: var(--border-radius); + --message-box-editing-color: #fff5df; + --message-box-popover-title-text-color: var(--color-gray); + --message-box-popover-title-text-size: 0.75rem; + } diff --git a/packages/rocketchat-theme/server/variables.js b/packages/rocketchat-theme/server/variables.js index e3c9a878271f..17cbd16e2bd5 100644 --- a/packages/rocketchat-theme/server/variables.js +++ b/packages/rocketchat-theme/server/variables.js @@ -62,7 +62,7 @@ RocketChat.settings.add('theme-custom-css', '', { public: true }); -const reg = /--(color-.*?): (.*?);/igm; +const reg = /--(rc-color-.*?): (.*?);/igm; const colors = [...Assets.getText('client/imports/general/variables.css').match(reg)].map(color => { const [name, value] = color.split(": "); From 3aed45561afa51763e72f796ac629255e49762c9 Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Sun, 15 Oct 2017 14:41:19 -0700 Subject: [PATCH 04/10] normalize css variables --- .../imports/components/sidebar/sidebar.css | 2 +- .../imports/components/sidebar/toolbar.css | 12 +++--- .../client/imports/forms/switch.css | 2 +- .../client/imports/forms/tags.css | 2 +- .../client/imports/general/base.css | 4 +- .../client/imports/general/base_old.css | 2 +- .../client/imports/general/variables.css | 21 ++++++---- server/startup/migrations/v103.js | 38 +++++++++++++------ 8 files changed, 51 insertions(+), 32 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css index 98efa6a0940b..f0e368af8cd4 100644 --- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css +++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css @@ -59,7 +59,7 @@ } & a:any-link { - color: var(--color-gray); + color: var(--rc-color-primary-light); } } diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css index 757e1e0d1957..dcf3b331b9a2 100644 --- a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css +++ b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css @@ -50,16 +50,16 @@ &__wrapper { padding: 0; - color: var(--color-gray); + color: var(--rc-color-primary-light); } &__element { color: var(--color-white); border-color: #414852; - background-color: var(--color-darkest); + background-color: var(--rc-color-primary-darkest); &::placeholder { - color: var(--color-gray); + color: var(--rc-color-primary-light); } &:focus + .rc-input__icon--right { @@ -93,9 +93,9 @@ margin-left: 0.25rem; margin-right: 0.25rem; - color: var(--color-gray); - border-color: #414852; - background-color: var(--color-darkest); + color: var(--rc-color-primary-light); + border-color: var(--rc-color-primary-dark); + background-color: var(--rc-color-primary-darkest); } & .rc-input__icon-svg--magnifier { diff --git a/packages/rocketchat-theme/client/imports/forms/switch.css b/packages/rocketchat-theme/client/imports/forms/switch.css index 342138ff8338..f39940442d40 100644 --- a/packages/rocketchat-theme/client/imports/forms/switch.css +++ b/packages/rocketchat-theme/client/imports/forms/switch.css @@ -14,7 +14,7 @@ cursor: default; border-color: var(--button-disabled-background); - background-color: var(--color-gray-lightest); + background-color: var(--rc-color-primary-lightest); } & ~ .rc-switch__text { diff --git a/packages/rocketchat-theme/client/imports/forms/tags.css b/packages/rocketchat-theme/client/imports/forms/tags.css index 64fcd8a5b897..ef7a4f86c018 100644 --- a/packages/rocketchat-theme/client/imports/forms/tags.css +++ b/packages/rocketchat-theme/client/imports/forms/tags.css @@ -48,7 +48,7 @@ font-size: 0.875rem; &::placeholder { - color: var(--color-gray-medium); + color: var(--rc-color-primary-light-medium); } } } diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css index 2c7271d7c10e..3feacf28d3b2 100644 --- a/packages/rocketchat-theme/client/imports/general/base.css +++ b/packages/rocketchat-theme/client/imports/general/base.css @@ -88,11 +88,11 @@ button { } & .tab-button-icon { - color: var(--color-dark-medium); + color: var(--rc-color-primary-dark); font-size: 1.125rem; - fill: var(--color-dark-medium); + fill: var(--rc-color-primary-dark); &--star { fill: none; diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css index 35e0f1ca16ee..69055d64d9cd 100644 --- a/packages/rocketchat-theme/client/imports/general/base_old.css +++ b/packages/rocketchat-theme/client/imports/general/base_old.css @@ -4604,7 +4604,7 @@ body:not(.is-cordova) { .full-page, .page-loading { - background-color: var(--color-primary); + background-color: var(--rc-color-primary); } .rc-old.full-page { diff --git a/packages/rocketchat-theme/client/imports/general/variables.css b/packages/rocketchat-theme/client/imports/general/variables.css index 8ec460f411c6..8ae1927d9e9e 100644 --- a/packages/rocketchat-theme/client/imports/general/variables.css +++ b/packages/rocketchat-theme/client/imports/general/variables.css @@ -24,6 +24,11 @@ --rc-color-button-primary-light: #175cc4; --rc-color-primary: var(--color-dark); + --rc-color-primary-darkest: var(--color-darkest); + --rc-color-primary-dark: var(--color-dark-medium); + --rc-color-primary-light: var(--color-gray); + --rc-color-primary-light-medium: var(--color-gray-medium); + --rc-color-primary-lightest: var(--color-gray-lightest); --rc-color-content: var(--color-white); /* @@ -44,7 +49,7 @@ --status-away: var(--rc-color-alert); --status-busy: var(--rc-color-error); --status-invisible: var(--color-gray-medium); - --status-invisible-sidebar: var(--color-darkest); + --status-invisible-sidebar: var(--rc-color-primary-darkest); --default-small-padding: 1rem; /* @@ -99,7 +104,7 @@ --tags-border-width: var(--border); --tags-border-radius: var(--border-radius); --tags-border-color: var(--color-gray-light); - --tags-text-color: var(--color-dark); + --tags-text-color: var(--rc-color-primary); --tags-background: #f2f3f5; --tags-avatar-size: 20px; @@ -132,10 +137,10 @@ */ --sidebar-width: 280px; --sidebar-small-width: 90%; - --sidebar-background: var(--color-primary); - --sidebar-background-hover: var(--color-dark-medium); - --sidebar-background-light: var(--color-gray-lightest); - --sidebar-background-light-hover: var(--color-gray-light); + --sidebar-background: var(--rc-color-primary); + --sidebar-background-hover: var(--rc-color-primary-dark); + --sidebar-background-light: var(--rc-color-primary-lightest); + --sidebar-background-light-hover: var(--rc-color-primary-light); --sidebar-default-padding: 24px; --sidebar-small-default-padding: 16px; --sidebar-header-padding: 16px; @@ -162,7 +167,7 @@ --sidebar-account-username-weight: 700; --sidebar-small-account-username-weight: 400; --sidebar-account-username-color: var(--color-white); - --sidebar-account-username-color-darker: var(--color-dark); + --sidebar-account-username-color-darker: var(--rc-color-primary); --sidebar-account-status-font-size: 0.875rem; --sidebar-account-status-color: var(--color-gray); @@ -175,7 +180,7 @@ --sidebar-item-text-color: var(--color-gray); --sidebar-item-background: inherit; - --sidebar-item-hover-background: var(--color-darkest); + --sidebar-item-hover-background: var(--rc-color-primary-darkest); --sidebar-item-active-background: var(--color-dark-medium); --sidebar-item-active-color: var(--sidebar-item-text-color); diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js index e22c730c3a1e..bf5b161f6654 100644 --- a/server/startup/migrations/v103.js +++ b/server/startup/migrations/v103.js @@ -1,5 +1,5 @@ - -const majorColors= { + +const majorColors = { 'content-background-color': '#FFFFFF', 'primary-background-color': 'color-primary', 'primary-font-color': '#444444', @@ -16,7 +16,7 @@ const majorColors= { }; // Minor colours implement major colours by default, but can be overruled -const minorColors= { +const minorColors = { 'tertiary-background-color': '@component-color', 'tertiary-font-color': '@transparent-lightest', 'link-font-color': '@primary-action-color', @@ -30,19 +30,33 @@ const minorColors= { const newvariables = { 'content-background-color': 'color-primary', - 'primary-background-color': 'color-primary' + 'primary-background-color': 'color-primary', + 'primary-font-color': '', }; + +Meteor.startup(function() { + Object.keys(majorColors).forEach(function (_id) { + console.log(_id) + const color = RocketChat.models.Settings.findOne({_id}); + // const key = newvariables[_id]; + // if(color.value !== majorColors[_id] && key){ + // const id = `theme-color-${ key }`; + // RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: color.editor }}); + // } + }); +}) + RocketChat.Migrations.add({ version: 103, up() { - // Object.keys(majorColors).forEach(function (_id) { - // const color = RocketChat.models.Settings.findOne({_id}); - // // RocketChat.models.Settings.remove(color); - // if(color.value !== majorColors[key] && newvariables[key]){ - // const _id = `theme-color-${ key }`; - // RocketChat.models.Settings.update({_id}, {$set: { value : color.value, editor: color.editor }}); - // } - // }); + Object.keys(majorColors).forEach(function (_id) { + const color = RocketChat.models.Settings.findOne({_id}); + const key = newvariables[_id]; + if(color.value !== majorColors[_id] && key){ + const id = `theme-color-${ key }`; + RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: color.editor }}); + } + }); // Object.keys(minorColors).forEach(function (_id) { // const color = RocketChat.models.Settings.findOne({_id}); // RocketChat.models.Settings.remove(color); From 6508114204db79cd585fc5e84e1cdbd41b6bc85b Mon Sep 17 00:00:00 2001 From: Rodrigo Nascimento Date: Mon, 16 Oct 2017 09:17:00 -0200 Subject: [PATCH 05/10] Fix ESLint --- server/startup/migrations/v103.js | 37 +++++++++++++++---------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js index bf5b161f6654..0427b84d0c09 100644 --- a/server/startup/migrations/v103.js +++ b/server/startup/migrations/v103.js @@ -1,4 +1,3 @@ - const majorColors = { 'content-background-color': '#FFFFFF', 'primary-background-color': 'color-primary', @@ -16,43 +15,43 @@ const majorColors = { }; // Minor colours implement major colours by default, but can be overruled -const minorColors = { - 'tertiary-background-color': '@component-color', - 'tertiary-font-color': '@transparent-lightest', - 'link-font-color': '@primary-action-color', - 'info-font-color': '@secondary-font-color', - 'custom-scrollbar-color': '@transparent-darker', - 'status-online': '@success-color', - 'status-away': '@pending-color', - 'status-busy': '@error-color', - 'status-offline': '@transparent-darker' -}; +// const minorColors = { +// 'tertiary-background-color': '@component-color', +// 'tertiary-font-color': '@transparent-lightest', +// 'link-font-color': '@primary-action-color', +// 'info-font-color': '@secondary-font-color', +// 'custom-scrollbar-color': '@transparent-darker', +// 'status-online': '@success-color', +// 'status-away': '@pending-color', +// 'status-busy': '@error-color', +// 'status-offline': '@transparent-darker' +// }; const newvariables = { 'content-background-color': 'color-primary', 'primary-background-color': 'color-primary', - 'primary-font-color': '', + 'primary-font-color': '' }; Meteor.startup(function() { - Object.keys(majorColors).forEach(function (_id) { - console.log(_id) - const color = RocketChat.models.Settings.findOne({_id}); + Object.keys(majorColors).forEach(function(_id) { + console.log(_id); + // const color = RocketChat.models.Settings.findOne({_id}); // const key = newvariables[_id]; // if(color.value !== majorColors[_id] && key){ // const id = `theme-color-${ key }`; // RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: color.editor }}); // } }); -}) +}); RocketChat.Migrations.add({ version: 103, up() { - Object.keys(majorColors).forEach(function (_id) { + Object.keys(majorColors).forEach(function(_id) { const color = RocketChat.models.Settings.findOne({_id}); const key = newvariables[_id]; - if(color.value !== majorColors[_id] && key){ + if (color.value !== majorColors[_id] && key) { const id = `theme-color-${ key }`; RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: color.editor }}); } From 63977ee139704ed123f662722c9e1adfe1d26f7c Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Mon, 16 Oct 2017 11:53:24 -0700 Subject: [PATCH 06/10] color migration --- .../client/imports/general/variables.css | 2 +- server/startup/migrations/v103.js | 65 +++++++++++++------ 2 files changed, 46 insertions(+), 21 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/general/variables.css b/packages/rocketchat-theme/client/imports/general/variables.css index 8ae1927d9e9e..d7c6de8a437c 100644 --- a/packages/rocketchat-theme/client/imports/general/variables.css +++ b/packages/rocketchat-theme/client/imports/general/variables.css @@ -4,7 +4,7 @@ */ --color-darkest: #1f2329; - --color-dark: #2f343d; + --color-dark: #2f343d; --color-dark-medium: #414852; --color-dark-light: #6c727a; --color-gray: #9ea2a8; diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js index bf5b161f6654..bb8977663b5e 100644 --- a/server/startup/migrations/v103.js +++ b/server/startup/migrations/v103.js @@ -29,38 +29,63 @@ const minorColors = { }; const newvariables = { - 'content-background-color': 'color-primary', - 'primary-background-color': 'color-primary', - 'primary-font-color': '', + 'content-background-color': 'rc-color-primary-lightest', + 'primary-background-color': 'rc-color-primary', + 'success-color': 'rc-color-success', + 'pending-color': 'rc-color-alert', + 'error-color': 'rc-color-error', + 'status-online': 'rc-color-success', + 'status-away': 'rc-color-alert', + 'status-busy': 'rc-color-error', + 'status-offline': 'rc-color-primary-darkest' }; -Meteor.startup(function() { - Object.keys(majorColors).forEach(function (_id) { - console.log(_id) - const color = RocketChat.models.Settings.findOne({_id}); - // const key = newvariables[_id]; - // if(color.value !== majorColors[_id] && key){ - // const id = `theme-color-${ key }`; - // RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: color.editor }}); - // } - }); -}) +function LightenDarkenColor(col, amt) { + let usePound = false; + if (col[0] == "#") { + col = col.slice(1); + usePound = true; + } + + let num = parseInt(col,16); + let r = (num >> 16) + amt; + + if (r > 255) r = 255; + else if (r < 0) r = 0; + + let b = ((num >> 8) & 0x00FF) + amt; + + if (b > 255) b = 255; + else if (b < 0) b = 0; + + let g = (num & 0x0000FF) + amt; + + if (g > 255) g = 255; + else if (g < 0) g = 0; + + return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); +} RocketChat.Migrations.add({ version: 103, up() { Object.keys(majorColors).forEach(function (_id) { - const color = RocketChat.models.Settings.findOne({_id}); + const color = RocketChat.models.Settings.findOne({_id: `theme-color${_id}`}); const key = newvariables[_id]; if(color.value !== majorColors[_id] && key){ + if(/^@.+/.test(color.value)) { + color.value = newvariables[color.value.replace('@', '')]; + } const id = `theme-color-${ key }`; - RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: color.editor }}); + RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: /^#.+/.test(color.value) ? 'color' : 'expression' }}); } }); - // Object.keys(minorColors).forEach(function (_id) { - // const color = RocketChat.models.Settings.findOne({_id}); - // RocketChat.models.Settings.remove(color); - // }); + const color = RocketChat.models.Settings.findOne({_id: 'theme-color-rc-color-primary'}) + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-darkest', {$set: {value: LightenDarkenColor(color, -16)}}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-dark', {$set: {value: LightenDarkenColor(color, 18)}}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light', {$set: {value: LightenDarkenColor(color, 110)}}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light-medium', {$set: {value: LightenDarkenColor(color, 156)}}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-lightest', {$set: {value: LightenDarkenColor(color, 200)}}}); } }); From 19344e6946d731c919d80139bf3dd1307b3e3c74 Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Mon, 16 Oct 2017 12:06:47 -0700 Subject: [PATCH 07/10] fix syntax --- server/startup/migrations/v103.js | 44 +++++++++++++++---------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js index ceb3148d99cd..9e79360e566f 100644 --- a/server/startup/migrations/v103.js +++ b/server/startup/migrations/v103.js @@ -65,26 +65,26 @@ function LightenDarkenColor(col, amt) { return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); } -RocketChat.Migrations.add({ - version: 103, - up() { - Object.keys(majorColors).forEach(function (_id) { - const color = RocketChat.models.Settings.findOne({_id: `theme-color${_id}`}); - const key = newvariables[_id]; - if(color.value !== majorColors[_id] && key){ - if(/^@.+/.test(color.value)) { - color.value = newvariables[color.value.replace('@', '')]; - } - const id = `theme-color-${ key }`; - RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: /^#.+/.test(color.value) ? 'color' : 'expression' }}); - } - }); +// RocketChat.Migrations.add({ +// version: 103, +// up() { +// Object.keys(majorColors).forEach(function (_id) { +// const color = RocketChat.models.Settings.findOne({_id: `theme-color${_id}`}); +// const key = newvariables[_id]; +// if(color.value !== majorColors[_id] && key){ +// if(/^@.+/.test(color.value)) { +// color.value = newvariables[color.value.replace('@', '')]; +// } +// const id = `theme-color-${ key }`; +// RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: /^#.+/.test(color.value) ? 'color' : 'expression' }}); +// } +// }); - const color = RocketChat.models.Settings.findOne({_id: 'theme-color-rc-color-primary'}) - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-darkest', {$set: {value: LightenDarkenColor(color, -16)}}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-dark', {$set: {value: LightenDarkenColor(color, 18)}}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light', {$set: {value: LightenDarkenColor(color, 110)}}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light-medium', {$set: {value: LightenDarkenColor(color, 156)}}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-lightest', {$set: {value: LightenDarkenColor(color, 200)}}}); - } -}); +// const color = RocketChat.models.Settings.findOne({_id: 'theme-color-rc-color-primary'}) +// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-darkest'}, {$set: {value: LightenDarkenColor(color, -16)}}); +// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-dark'}, {$set: {value: LightenDarkenColor(color, 18)}}); +// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light'}, {$set: {value: LightenDarkenColor(color, 110)}}); +// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light-medium'}, {$set: {value: LightenDarkenColor(color, 156)}}); +// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-lightest'}, {$set: {value: LightenDarkenColor(color, 200)}}); +// } +// }); From e7c464d37b875dbceb0f428b74fe16220b6a4456 Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Mon, 16 Oct 2017 12:58:30 -0700 Subject: [PATCH 08/10] finish color migration --- .../imports/components/sidebar/toolbar.css | 2 +- .../client/imports/general/variables.css | 4 +- packages/rocketchat-theme/server/variables.js | 42 +++++++---------- packages/rocketchat-ui-master/client/main.js | 2 +- .../server/dynamic-css.js | 2 +- .../rocketchat-ui-master/server/inject.js | 4 +- server/startup/migrations/v103.js | 46 +++++++++---------- 7 files changed, 47 insertions(+), 55 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css index dcf3b331b9a2..4a94778e53be 100644 --- a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css +++ b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css @@ -55,7 +55,7 @@ &__element { color: var(--color-white); - border-color: #414852; + border-color: var(--rc-color-primary-dark); background-color: var(--rc-color-primary-darkest); &::placeholder { diff --git a/packages/rocketchat-theme/client/imports/general/variables.css b/packages/rocketchat-theme/client/imports/general/variables.css index d7c6de8a437c..4735fc17660f 100644 --- a/packages/rocketchat-theme/client/imports/general/variables.css +++ b/packages/rocketchat-theme/client/imports/general/variables.css @@ -182,7 +182,7 @@ --sidebar-item-background: inherit; --sidebar-item-hover-background: var(--rc-color-primary-darkest); - --sidebar-item-active-background: var(--color-dark-medium); + --sidebar-item-active-background: var(--rc-color-primary-dark); --sidebar-item-active-color: var(--sidebar-item-text-color); --sidebar-item-unread-color: var(--color-white); @@ -226,7 +226,7 @@ --badge-text-color: var(--color-white); --badge-radius: var(--border-radius); --badge-text-size: 0.75rem; - --badge-background: var(--color-dark-medium); + --badge-background: var(--rc-color-primary-dark); --badge-unread-background: var(--rc-color-button-primary); /* diff --git a/packages/rocketchat-theme/server/variables.js b/packages/rocketchat-theme/server/variables.js index 78bb8e5a1d3a..57efdaad3ced 100644 --- a/packages/rocketchat-theme/server/variables.js +++ b/packages/rocketchat-theme/server/variables.js @@ -11,6 +11,21 @@ // Major colors form the core of the scheme // Names changed to reflect usage, comments show pre-refactor names +const reg = /--(rc-color-.*?): (.*?);/igm; + +const colors = [...Assets.getText('client/imports/general/variables.css').match(reg)].map(color => { + const [name, value] = color.split(': '); + return [name.replace('--', ''), value.replace(';', '')]; +}); + +colors.forEach(([key, color]) => { + if (/var/.test(color)) { + const [, value] = color.match(/var\(--(.*?)\)/i); + return RocketChat.theme.addPublicColor(key, value, 'Colors', 'expression'); + } + RocketChat.theme.addPublicColor(key, color, 'Colors'); +}); + const majorColors= { 'content-background-color': '#FFFFFF', 'primary-background-color': '#04436A', @@ -43,12 +58,12 @@ const minorColors= { // Bulk-add settings for color scheme Object.keys(majorColors).forEach((key) => { const value = majorColors[key]; - RocketChat.theme.addPublicColor(key, value, 'Colors'); + RocketChat.theme.addPublicColor(key, value, 'Old Colors'); }); Object.keys(minorColors).forEach((key) => { const value = minorColors[key]; - RocketChat.theme.addPublicColor(key, value, 'Colors (minor)', 'expression'); + RocketChat.theme.addPublicColor(key, value, 'Old Colors (minor)', 'expression'); }); RocketChat.theme.addPublicFont('body-font-family', '-apple-system, BlinkMacSystemFont, Roboto, \'Helvetica Neue\', Arial, sans-serif, \'Apple Color Emoji\', \'Segoe UI\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', \'Meiryo UI\''); @@ -62,26 +77,3 @@ RocketChat.settings.add('theme-custom-css', '', { public: true }); -const reg = /--(rc-color-.*?): (.*?);/igm; - -const colors = [...Assets.getText('client/imports/general/variables.css').match(reg)].map(color => { - const [name, value] = color.split(': '); - return [name.replace('--', ''), value.replace(';', '')]; -}); - -colors.forEach(([key, color]) => { - if (/var/.test(color)) { - const [, value] = color.match(/var\(--(.*?)\)/i); - return RocketChat.theme.addPublicColor(key, value, 'Colors Test', 'expression'); - } - RocketChat.theme.addPublicColor(key, color, 'Colors Test'); -}); - -// RocketChat.settings.add('theme-custom-variables', Assets.getText('client/imports/general/variables.css'), { -// group: 'Layout', -// type: 'code', -// code: 'text/css', -// multiline: true, -// section: 'Customize Theme', -// public: true -// }); diff --git a/packages/rocketchat-ui-master/client/main.js b/packages/rocketchat-ui-master/client/main.js index b973c1eceede..d8e7707bfb3f 100644 --- a/packages/rocketchat-ui-master/client/main.js +++ b/packages/rocketchat-ui-master/client/main.js @@ -1,7 +1,7 @@ /* globals toolbarSearch, menu, isRtl, fireGlobalEvent, CachedChatSubscription, DynamicCss */ import Clipboard from 'clipboard'; -RocketChat.settings.collection.find({_id:/theme-color-color/}, {fields:{ value: 1 }}).observe({changed: () => { DynamicCss.run(true); }}); +RocketChat.settings.collection.find({_id:/theme-color-rc/i}, {fields:{ value: 1 }}).observe({changed: () => { DynamicCss.run(true); }}); Template.body.onRendered(function() { new Clipboard('.clipboard'); diff --git a/packages/rocketchat-ui-master/server/dynamic-css.js b/packages/rocketchat-ui-master/server/dynamic-css.js index a4f474edecce..9505c7ad4e8e 100644 --- a/packages/rocketchat-ui-master/server/dynamic-css.js +++ b/packages/rocketchat-ui-master/server/dynamic-css.js @@ -154,7 +154,7 @@ export default () => { DynamicCss.run = debounce((replace = false) => { if (replace) { // const variables = RocketChat.models.Settings.findOne({_id:'theme-custom-variables'}, {fields: { value: 1}}); - const colors = RocketChat.settings.collection.find({_id:/theme-color-color-/i}, {fields: { value: 1, editor: 1}}).fetch().filter(color => color && color.value); + const colors = RocketChat.settings.collection.find({_id:/theme-color-rc/i}, {fields: { value: 1, editor: 1}}).fetch().filter(color => color && color.value); if (!colors) { return; diff --git a/packages/rocketchat-ui-master/server/inject.js b/packages/rocketchat-ui-master/server/inject.js index 330761268f68..e8e60d3284de 100644 --- a/packages/rocketchat-ui-master/server/inject.js +++ b/packages/rocketchat-ui-master/server/inject.js @@ -1,7 +1,7 @@ /* globals Inject */ const renderDynamicCssList = _.debounce(Meteor.bindEnvironment(() => { // const variables = RocketChat.models.Settings.findOne({_id:'theme-custom-variables'}, {fields: { value: 1}}); - const colors = RocketChat.models.Settings.find({_id:/theme-color-color-/i}, {fields: { value: 1, editor: 1}}).fetch().filter(color => color && color.value); + const colors = RocketChat.models.Settings.find({_id:/theme-color-rc/i}, {fields: { value: 1, editor: 1}}).fetch().filter(color => color && color.value); if (!colors) { return; @@ -21,7 +21,7 @@ renderDynamicCssList(); // changed: renderDynamicCssList // }); -RocketChat.models.Settings.find({_id:/theme-color-color-/i}, {fields: { value: 1}}).observe({ +RocketChat.models.Settings.find({_id:/theme-color-rc/i}, {fields: { value: 1}}).observe({ changed: renderDynamicCssList }); diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js index 9e79360e566f..cc074db7f4e8 100644 --- a/server/startup/migrations/v103.js +++ b/server/startup/migrations/v103.js @@ -65,26 +65,26 @@ function LightenDarkenColor(col, amt) { return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); } -// RocketChat.Migrations.add({ -// version: 103, -// up() { -// Object.keys(majorColors).forEach(function (_id) { -// const color = RocketChat.models.Settings.findOne({_id: `theme-color${_id}`}); -// const key = newvariables[_id]; -// if(color.value !== majorColors[_id] && key){ -// if(/^@.+/.test(color.value)) { -// color.value = newvariables[color.value.replace('@', '')]; -// } -// const id = `theme-color-${ key }`; -// RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: /^#.+/.test(color.value) ? 'color' : 'expression' }}); -// } -// }); - -// const color = RocketChat.models.Settings.findOne({_id: 'theme-color-rc-color-primary'}) -// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-darkest'}, {$set: {value: LightenDarkenColor(color, -16)}}); -// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-dark'}, {$set: {value: LightenDarkenColor(color, 18)}}); -// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light'}, {$set: {value: LightenDarkenColor(color, 110)}}); -// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light-medium'}, {$set: {value: LightenDarkenColor(color, 156)}}); -// RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-lightest'}, {$set: {value: LightenDarkenColor(color, 200)}}); -// } -// }); +RocketChat.Migrations.add({ + version: 103, + up() { + Object.keys(majorColors).forEach(function (_id) { + const color = RocketChat.models.Settings.findOne({_id: `theme-color-${_id}`}); + const key = newvariables[_id]; + if(color && color.value !== majorColors[_id] && key){ + if(/^@.+/.test(color.value)) { + color.value = newvariables[color.value.replace('@', '')]; + } + const id = `theme-color-${ key }`; + RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: /^#.+/.test(color.value) ? 'color' : 'expression' }}); + if(key === 'rc-color-primary') { + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-darkest'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, -16)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-dark'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 18)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 110)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light-medium'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 156)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-lightest'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 200)}}); + } + } + }); + } +}); From 8747b9bdb5b50a744afaff7fc60fed7aeb29fd4f Mon Sep 17 00:00:00 2001 From: Rodrigo Nascimento Date: Tue, 17 Oct 2017 11:30:03 -0200 Subject: [PATCH 09/10] Fix ESLint --- server/startup/migrations/v103.js | 39 ++++++++++++++----------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/server/startup/migrations/v103.js b/server/startup/migrations/v103.js index cc074db7f4e8..0e25e0fc6457 100644 --- a/server/startup/migrations/v103.js +++ b/server/startup/migrations/v103.js @@ -39,52 +39,49 @@ const newvariables = { 'status-offline': 'rc-color-primary-darkest' }; -function LightenDarkenColor(col, amt) { +function lightenDarkenColor(col, amt) { let usePound = false; - if (col[0] == "#") { + if (col[0] === '#') { col = col.slice(1); usePound = true; } - let num = parseInt(col,16); + const num = parseInt(col, 16); let r = (num >> 16) + amt; - if (r > 255) r = 255; - else if (r < 0) r = 0; + if (r > 255) { r = 255; } else if (r < 0) { r = 0; } let b = ((num >> 8) & 0x00FF) + amt; - if (b > 255) b = 255; - else if (b < 0) b = 0; + if (b > 255) { b = 255; } else if (b < 0) { b = 0; } let g = (num & 0x0000FF) + amt; - if (g > 255) g = 255; - else if (g < 0) g = 0; + if (g > 255) { g = 255; } else if (g < 0) { g = 0; } - return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); + return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16); } RocketChat.Migrations.add({ version: 103, up() { - Object.keys(majorColors).forEach(function (_id) { - const color = RocketChat.models.Settings.findOne({_id: `theme-color-${_id}`}); + Object.keys(majorColors).forEach(function(_id) { + const color = RocketChat.models.Settings.findOne({_id: `theme-color-${ _id }`}); const key = newvariables[_id]; - if(color && color.value !== majorColors[_id] && key){ - if(/^@.+/.test(color.value)) { + if (color && color.value !== majorColors[_id] && key) { + if (/^@.+/.test(color.value)) { color.value = newvariables[color.value.replace('@', '')]; } const id = `theme-color-${ key }`; RocketChat.models.Settings.update({_id: id}, {$set: { value : color.value, editor: /^#.+/.test(color.value) ? 'color' : 'expression' }}); - if(key === 'rc-color-primary') { - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-darkest'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, -16)}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-dark'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 18)}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 110)}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light-medium'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 156)}}); - RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-lightest'}, {$set: {editor: 'color', value: LightenDarkenColor(color.value, 200)}}); + if (key === 'rc-color-primary') { + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-darkest'}, {$set: {editor: 'color', value: lightenDarkenColor(color.value, -16)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-dark'}, {$set: {editor: 'color', value: lightenDarkenColor(color.value, 18)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light'}, {$set: {editor: 'color', value: lightenDarkenColor(color.value, 110)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-light-medium'}, {$set: {editor: 'color', value: lightenDarkenColor(color.value, 156)}}); + RocketChat.models.Settings.update({_id: 'theme-color-rc-color-primary-lightest'}, {$set: {editor: 'color', value: lightenDarkenColor(color.value, 200)}}); } } - }); + }); } }); From 61d687fb602f2ea9e3bad2dacae72cb9ad047125 Mon Sep 17 00:00:00 2001 From: Rodrigo Nascimento Date: Tue, 17 Oct 2017 17:04:07 -0200 Subject: [PATCH 10/10] Fix i18n labels --- packages/rocketchat-i18n/i18n/en.i18n.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json index 75d68a1ac63a..0965a2580005 100644 --- a/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/packages/rocketchat-i18n/i18n/en.i18n.json @@ -1770,6 +1770,21 @@ "theme-color-transparent-lighter": "Transparent Lighter", "theme-color-transparent-lightest": "Transparent Lightest", "theme-color-unread-notification-color": "Unread Notifications Color", + "theme-color-rc-color-error": "Error", + "theme-color-rc-color-error-light": "Error Light", + "theme-color-rc-color-alert": "Alert", + "theme-color-rc-color-alert-light": "Alert Light", + "theme-color-rc-color-success": "Success", + "theme-color-rc-color-success-light": "Success Light", + "theme-color-rc-color-button-primary": "Button Primary", + "theme-color-rc-color-button-primary-light": "Button Primary Light", + "theme-color-rc-color-primary": "Primary", + "theme-color-rc-color-primary-darkest": "Primary Darkest", + "theme-color-rc-color-primary-dark": "Primary Dark", + "theme-color-rc-color-primary-light": "Primary Light", + "theme-color-rc-color-primary-light-medium": "Primary Light Medium", + "theme-color-rc-color-primary-lightest": "Primary Lightest", + "theme-color-rc-color-content": "Content", "theme-custom-css": "Custom CSS", "theme-font-body-font-family": "Body Font Family", "There_are_no_agents_added_to_this_department_yet": "There are no agents added to this department yet.",