diff options
-rw-r--r-- | package-lock.json | 94 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 40 | ||||
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 107 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 3 | ||||
-rw-r--r-- | src/styles/settings.scss | 20 |
6 files changed, 252 insertions, 13 deletions
diff --git a/package-lock.json b/package-lock.json index 3f7c9a06c..8e550ef08 100644 --- a/package-lock.json +++ b/package-lock.json | |||
@@ -62,6 +62,7 @@ | |||
62 | "prop-types": "^15.8.1", | 62 | "prop-types": "^15.8.1", |
63 | "react": "^17.0.2", | 63 | "react": "^17.0.2", |
64 | "react-addons-css-transition-group": "^15.6.2", | 64 | "react-addons-css-transition-group": "^15.6.2", |
65 | "react-color": "2.19.3", | ||
65 | "react-confetti": "^6.0.1", | 66 | "react-confetti": "^6.0.1", |
66 | "react-dom": "^17.0.2", | 67 | "react-dom": "^17.0.2", |
67 | "react-dropzone": "^11.7.1", | 68 | "react-dropzone": "^11.7.1", |
@@ -3414,6 +3415,14 @@ | |||
3414 | "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", | 3415 | "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", |
3415 | "dev": true | 3416 | "dev": true |
3416 | }, | 3417 | }, |
3418 | "node_modules/@icons/material": { | ||
3419 | "version": "0.2.4", | ||
3420 | "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", | ||
3421 | "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", | ||
3422 | "peerDependencies": { | ||
3423 | "react": "*" | ||
3424 | } | ||
3425 | }, | ||
3417 | "node_modules/@istanbuljs/load-nyc-config": { | 3426 | "node_modules/@istanbuljs/load-nyc-config": { |
3418 | "version": "1.1.0", | 3427 | "version": "1.1.0", |
3419 | "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", | 3428 | "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", |
@@ -20075,6 +20084,11 @@ | |||
20075 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", | 20084 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", |
20076 | "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" | 20085 | "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" |
20077 | }, | 20086 | }, |
20087 | "node_modules/lodash-es": { | ||
20088 | "version": "4.17.21", | ||
20089 | "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", | ||
20090 | "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" | ||
20091 | }, | ||
20078 | "node_modules/lodash.camelcase": { | 20092 | "node_modules/lodash.camelcase": { |
20079 | "version": "4.3.0", | 20093 | "version": "4.3.0", |
20080 | "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", | 20094 | "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", |
@@ -20652,6 +20666,11 @@ | |||
20652 | "url": "https://github.com/sponsors/sindresorhus" | 20666 | "url": "https://github.com/sponsors/sindresorhus" |
20653 | } | 20667 | } |
20654 | }, | 20668 | }, |
20669 | "node_modules/material-colors": { | ||
20670 | "version": "1.2.6", | ||
20671 | "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", | ||
20672 | "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" | ||
20673 | }, | ||
20655 | "node_modules/md5.js": { | 20674 | "node_modules/md5.js": { |
20656 | "version": "1.3.5", | 20675 | "version": "1.3.5", |
20657 | "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", | 20676 | "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", |
@@ -24102,6 +24121,23 @@ | |||
24102 | "react": "^15.4.2" | 24121 | "react": "^15.4.2" |
24103 | } | 24122 | } |
24104 | }, | 24123 | }, |
24124 | "node_modules/react-color": { | ||
24125 | "version": "2.19.3", | ||
24126 | "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", | ||
24127 | "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", | ||
24128 | "dependencies": { | ||
24129 | "@icons/material": "^0.2.4", | ||
24130 | "lodash": "^4.17.15", | ||
24131 | "lodash-es": "^4.17.15", | ||
24132 | "material-colors": "^1.2.1", | ||
24133 | "prop-types": "^15.5.10", | ||
24134 | "reactcss": "^1.2.0", | ||
24135 | "tinycolor2": "^1.4.1" | ||
24136 | }, | ||
24137 | "peerDependencies": { | ||
24138 | "react": "*" | ||
24139 | } | ||
24140 | }, | ||
24105 | "node_modules/react-confetti": { | 24141 | "node_modules/react-confetti": { |
24106 | "version": "6.1.0", | 24142 | "version": "6.1.0", |
24107 | "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz", | 24143 | "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz", |
@@ -24372,6 +24408,14 @@ | |||
24372 | "csstype": "^3.0.2" | 24408 | "csstype": "^3.0.2" |
24373 | } | 24409 | } |
24374 | }, | 24410 | }, |
24411 | "node_modules/reactcss": { | ||
24412 | "version": "1.2.3", | ||
24413 | "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", | ||
24414 | "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", | ||
24415 | "dependencies": { | ||
24416 | "lodash": "^4.0.1" | ||
24417 | } | ||
24418 | }, | ||
24375 | "node_modules/reactive-localstorage": { | 24419 | "node_modules/reactive-localstorage": { |
24376 | "version": "0.0.2", | 24420 | "version": "0.0.2", |
24377 | "resolved": "https://registry.npmjs.org/reactive-localstorage/-/reactive-localstorage-0.0.2.tgz", | 24421 | "resolved": "https://registry.npmjs.org/reactive-localstorage/-/reactive-localstorage-0.0.2.tgz", |
@@ -27747,6 +27791,14 @@ | |||
27747 | "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", | 27791 | "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", |
27748 | "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" | 27792 | "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" |
27749 | }, | 27793 | }, |
27794 | "node_modules/tinycolor2": { | ||
27795 | "version": "1.4.2", | ||
27796 | "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", | ||
27797 | "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", | ||
27798 | "engines": { | ||
27799 | "node": "*" | ||
27800 | } | ||
27801 | }, | ||
27750 | "node_modules/tmp": { | 27802 | "node_modules/tmp": { |
27751 | "version": "0.0.33", | 27803 | "version": "0.0.33", |
27752 | "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", | 27804 | "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", |
@@ -33442,6 +33494,11 @@ | |||
33442 | "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", | 33494 | "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", |
33443 | "dev": true | 33495 | "dev": true |
33444 | }, | 33496 | }, |
33497 | "@icons/material": { | ||
33498 | "version": "0.2.4", | ||
33499 | "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", | ||
33500 | "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==" | ||
33501 | }, | ||
33445 | "@istanbuljs/load-nyc-config": { | 33502 | "@istanbuljs/load-nyc-config": { |
33446 | "version": "1.1.0", | 33503 | "version": "1.1.0", |
33447 | "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", | 33504 | "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", |
@@ -46577,6 +46634,11 @@ | |||
46577 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", | 46634 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", |
46578 | "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" | 46635 | "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" |
46579 | }, | 46636 | }, |
46637 | "lodash-es": { | ||
46638 | "version": "4.17.21", | ||
46639 | "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", | ||
46640 | "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" | ||
46641 | }, | ||
46580 | "lodash.camelcase": { | 46642 | "lodash.camelcase": { |
46581 | "version": "4.3.0", | 46643 | "version": "4.3.0", |
46582 | "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", | 46644 | "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", |
@@ -47063,6 +47125,11 @@ | |||
47063 | } | 47125 | } |
47064 | } | 47126 | } |
47065 | }, | 47127 | }, |
47128 | "material-colors": { | ||
47129 | "version": "1.2.6", | ||
47130 | "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", | ||
47131 | "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" | ||
47132 | }, | ||
47066 | "md5.js": { | 47133 | "md5.js": { |
47067 | "version": "1.3.5", | 47134 | "version": "1.3.5", |
47068 | "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", | 47135 | "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", |
@@ -49793,6 +49860,20 @@ | |||
49793 | "react-transition-group": "^1.2.0" | 49860 | "react-transition-group": "^1.2.0" |
49794 | } | 49861 | } |
49795 | }, | 49862 | }, |
49863 | "react-color": { | ||
49864 | "version": "2.19.3", | ||
49865 | "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", | ||
49866 | "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", | ||
49867 | "requires": { | ||
49868 | "@icons/material": "^0.2.4", | ||
49869 | "lodash": "^4.17.15", | ||
49870 | "lodash-es": "^4.17.15", | ||
49871 | "material-colors": "^1.2.1", | ||
49872 | "prop-types": "^15.5.10", | ||
49873 | "reactcss": "^1.2.0", | ||
49874 | "tinycolor2": "^1.4.1" | ||
49875 | } | ||
49876 | }, | ||
49796 | "react-confetti": { | 49877 | "react-confetti": { |
49797 | "version": "6.1.0", | 49878 | "version": "6.1.0", |
49798 | "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz", | 49879 | "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz", |
@@ -50003,6 +50084,14 @@ | |||
50003 | } | 50084 | } |
50004 | } | 50085 | } |
50005 | }, | 50086 | }, |
50087 | "reactcss": { | ||
50088 | "version": "1.2.3", | ||
50089 | "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", | ||
50090 | "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", | ||
50091 | "requires": { | ||
50092 | "lodash": "^4.0.1" | ||
50093 | } | ||
50094 | }, | ||
50006 | "reactive-localstorage": { | 50095 | "reactive-localstorage": { |
50007 | "version": "0.0.2", | 50096 | "version": "0.0.2", |
50008 | "resolved": "https://registry.npmjs.org/reactive-localstorage/-/reactive-localstorage-0.0.2.tgz", | 50097 | "resolved": "https://registry.npmjs.org/reactive-localstorage/-/reactive-localstorage-0.0.2.tgz", |
@@ -52757,6 +52846,11 @@ | |||
52757 | "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", | 52846 | "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", |
52758 | "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" | 52847 | "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" |
52759 | }, | 52848 | }, |
52849 | "tinycolor2": { | ||
52850 | "version": "1.4.2", | ||
52851 | "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", | ||
52852 | "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" | ||
52853 | }, | ||
52760 | "tmp": { | 52854 | "tmp": { |
52761 | "version": "0.0.33", | 52855 | "version": "0.0.33", |
52762 | "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", | 52856 | "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", |
diff --git a/package.json b/package.json index 6c982cabf..b00128a80 100644 --- a/package.json +++ b/package.json | |||
@@ -97,6 +97,7 @@ | |||
97 | "prop-types": "^15.8.1", | 97 | "prop-types": "^15.8.1", |
98 | "react": "^17.0.2", | 98 | "react": "^17.0.2", |
99 | "react-addons-css-transition-group": "^15.6.2", | 99 | "react-addons-css-transition-group": "^15.6.2", |
100 | "react-color": "2.19.3", | ||
100 | "react-confetti": "^6.0.1", | 101 | "react-confetti": "^6.0.1", |
101 | "react-dom": "^17.0.2", | 102 | "react-dom": "^17.0.2", |
102 | "react-dropzone": "^11.7.1", | 103 | "react-dropzone": "^11.7.1", |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 1d61a7510..3f36f5e44 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -12,6 +12,7 @@ import Button from '../../ui/button'; | |||
12 | import Toggle from '../../ui/Toggle'; | 12 | import Toggle from '../../ui/Toggle'; |
13 | import Select from '../../ui/Select'; | 13 | import Select from '../../ui/Select'; |
14 | import Input from '../../ui/Input'; | 14 | import Input from '../../ui/Input'; |
15 | import ColorPickerInput from '../../ui/ColorPickerInput'; | ||
15 | import Infobox from '../../ui/Infobox'; | 16 | import Infobox from '../../ui/Infobox'; |
16 | import { H1, H2, H3, H5 } from '../../ui/headline'; | 17 | import { H1, H2, H3, H5 } from '../../ui/headline'; |
17 | 18 | ||
@@ -115,15 +116,19 @@ const messages = defineMessages({ | |||
115 | id: 'settings.app.sectionServiceIconsSettings', | 116 | id: 'settings.app.sectionServiceIconsSettings', |
116 | defaultMessage: 'Service Icons Settings', | 117 | defaultMessage: 'Service Icons Settings', |
117 | }, | 118 | }, |
118 | universalDarkModeInfo: { | 119 | sectionAccentColorSettings: { |
119 | id: 'settings.app.universalDarkModeInfo', | 120 | id: 'settings.app.sectionAccentColorSettings', |
120 | defaultMessage: | 121 | defaultMessage: 'Accent Color Settings', |
121 | 'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.', | ||
122 | }, | 122 | }, |
123 | accentColorInfo: { | 123 | accentColorInfo: { |
124 | id: 'settings.app.accentColorInfo', | 124 | id: 'settings.app.accentColorInfo', |
125 | defaultMessage: | 125 | defaultMessage: |
126 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})', | 126 | 'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)', |
127 | }, | ||
128 | universalDarkModeInfo: { | ||
129 | id: 'settings.app.universalDarkModeInfo', | ||
130 | defaultMessage: | ||
131 | 'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.', | ||
127 | }, | 132 | }, |
128 | headlinePrivacy: { | 133 | headlinePrivacy: { |
129 | id: 'settings.app.headlinePrivacy', | 134 | id: 'settings.app.headlinePrivacy', |
@@ -595,18 +600,29 @@ class EditSettingsForm extends Component { | |||
595 | )} | 600 | )} |
596 | 601 | ||
597 | <Hr /> | 602 | <Hr /> |
598 | 603 | <H2 className='settings__section_header'> | |
599 | <Input | 604 | {intl.formatMessage(messages.sectionAccentColorSettings)} |
600 | placeholder="Accent Color" | 605 | </H2> |
601 | onChange={e => this.submit(e)} | 606 | <div className="settings__settings-group__apply-color"> |
602 | field={form.$('accentColor')} | 607 | <ColorPickerInput |
603 | /> | 608 | onChange={e => this.submit(e)} |
609 | field={form.$('accentColor')} | ||
610 | className='color-picker-input' | ||
611 | /> | ||
612 | <> | ||
613 | <Button | ||
614 | buttonType="secondary" | ||
615 | className="settings__settings-group__apply-color__button" | ||
616 | label="Apply color" | ||
617 | onClick={(e) => { this.submit(e) }} | ||
618 | /> | ||
619 | </> | ||
620 | </div> | ||
604 | <p> | 621 | <p> |
605 | {intl.formatMessage(messages.accentColorInfo, { | 622 | {intl.formatMessage(messages.accentColorInfo, { |
606 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, | 623 | defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor, |
607 | })} | 624 | })} |
608 | </p> | 625 | </p> |
609 | |||
610 | <Hr /> | 626 | <Hr /> |
611 | 627 | ||
612 | <H2 className='settings__section_header'> | 628 | <H2 className='settings__section_header'> |
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx new file mode 100644 index 000000000..7cbdb295b --- /dev/null +++ b/src/components/ui/ColorPickerInput.tsx | |||
@@ -0,0 +1,107 @@ | |||
1 | import { ChangeEvent, Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { Field } from 'mobx-react-form'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { SliderPicker } from 'react-color'; | ||
6 | import { DEFAULT_APP_SETTINGS } from '../../config'; | ||
7 | |||
8 | interface IProps { | ||
9 | field: Field; | ||
10 | className?: string; | ||
11 | focus?: boolean; | ||
12 | }; | ||
13 | |||
14 | interface IState { | ||
15 | background: string; | ||
16 | } | ||
17 | |||
18 | class ColorPickerInput extends Component<IProps, IState> { | ||
19 | static defaultProps = { | ||
20 | className: null, | ||
21 | focus: false, | ||
22 | }; | ||
23 | |||
24 | state = { | ||
25 | background: DEFAULT_APP_SETTINGS.accentColor, | ||
26 | }; | ||
27 | |||
28 | inputElement: HTMLInputElement | null | undefined; | ||
29 | |||
30 | componentDidMount() { | ||
31 | if (this.props.focus) { | ||
32 | this.focus(); | ||
33 | } | ||
34 | } | ||
35 | |||
36 | onChange(e: ChangeEvent<HTMLInputElement>) { | ||
37 | const { field } = this.props; | ||
38 | |||
39 | field.onChange(e); | ||
40 | } | ||
41 | |||
42 | focus() { | ||
43 | this.inputElement?.focus(); | ||
44 | } | ||
45 | |||
46 | handleChangeComplete = (color: { hex: string; }) => { | ||
47 | const { field } = this.props; | ||
48 | this.setState({ background: color.hex }); | ||
49 | field.value = color.hex | ||
50 | }; | ||
51 | |||
52 | render() { | ||
53 | const { | ||
54 | field, | ||
55 | className, | ||
56 | } = this.props; | ||
57 | |||
58 | let { type } = field; | ||
59 | type = 'text'; | ||
60 | |||
61 | return ( | ||
62 | <div | ||
63 | className={classnames({ | ||
64 | 'franz-form__field': true, | ||
65 | 'has-error': field.error, | ||
66 | [`${className}`]: className, | ||
67 | })} | ||
68 | > | ||
69 | <SliderPicker | ||
70 | color={ this.state.background } | ||
71 | onChangeComplete={ this.handleChangeComplete } | ||
72 | id={field.id} | ||
73 | type={type} | ||
74 | className="franz-form__input" | ||
75 | name={field.name} | ||
76 | value={field.value} | ||
77 | placeholder={field.placeholder} | ||
78 | onBlur={field.onBlur} | ||
79 | onFocus={field.onFocus} | ||
80 | ref={(element: HTMLInputElement | null | undefined) => { | ||
81 | this.inputElement = element; | ||
82 | }} | ||
83 | disabled={field.disabled} | ||
84 | /> | ||
85 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | ||
86 | <input | ||
87 | id={field.id} | ||
88 | type={type} | ||
89 | className="franz-form__input" | ||
90 | name={field.name} | ||
91 | value={field.value} | ||
92 | placeholder={field.placeholder} | ||
93 | onChange={e => this.onChange(e)} | ||
94 | onBlur={field.onBlur} | ||
95 | onFocus={field.onFocus} | ||
96 | ref={element => { | ||
97 | this.inputElement = element; | ||
98 | }} | ||
99 | disabled={field.disabled} | ||
100 | /> | ||
101 | </div> | ||
102 | </div> | ||
103 | ); | ||
104 | } | ||
105 | } | ||
106 | |||
107 | export default observer(ColorPickerInput); | ||
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index f787b90e4..3c5eef258 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -182,7 +182,7 @@ | |||
182 | "settings.account.tryReloadUserInfoRequest": "Try again", | 182 | "settings.account.tryReloadUserInfoRequest": "Try again", |
183 | "settings.account.userInfoRequestFailed": "Could not load user information", | 183 | "settings.account.userInfoRequestFailed": "Could not load user information", |
184 | "settings.account.yourLicense": "Your Ferdium License:", | 184 | "settings.account.yourLicense": "Your Ferdium License:", |
185 | "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})", | 185 | "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)", |
186 | "settings.app.buttonClearAllCache": "Clear cache", | 186 | "settings.app.buttonClearAllCache": "Clear cache", |
187 | "settings.app.buttonInstallUpdate": "Restart & install update", | 187 | "settings.app.buttonInstallUpdate": "Restart & install update", |
188 | "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder", | 188 | "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder", |
@@ -267,6 +267,7 @@ | |||
267 | "settings.app.restartRequired": "Changes require restart", | 267 | "settings.app.restartRequired": "Changes require restart", |
268 | "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdium.", | 268 | "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdium.", |
269 | "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.", | 269 | "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.", |
270 | "settings.app.sectionAccentColorSettings": "Accent Color Settings", | ||
270 | "settings.app.sectionGeneralUi": "General UI", | 271 | "settings.app.sectionGeneralUi": "General UI", |
271 | "settings.app.sectionHibernation": "Hibernation", | 272 | "settings.app.sectionHibernation": "Hibernation", |
272 | "settings.app.sectionMain": "Main", | 273 | "settings.app.sectionMain": "Main", |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 2bb9074ba..e2cf46478 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -176,6 +176,26 @@ | |||
176 | overflow: hidden; | 176 | overflow: hidden; |
177 | background: #fff; | 177 | background: #fff; |
178 | } | 178 | } |
179 | |||
180 | .settings__section_header { | ||
181 | text-align: center; | ||
182 | } | ||
183 | |||
184 | .settings__settings-group__apply-color { | ||
185 | display: flex; | ||
186 | } | ||
187 | |||
188 | .settings__settings-group__apply-color__button { | ||
189 | height: 60px; | ||
190 | } | ||
191 | |||
192 | .franz-form__input-wrapper__color-picker { | ||
193 | width: 20% !important; | ||
194 | margin-top: 2%; | ||
195 | } | ||
196 | .color-picker-input { | ||
197 | align-items: center; | ||
198 | } | ||
179 | 199 | ||
180 | .settings__header { | 200 | .settings__header { |
181 | align-items: center; | 201 | align-items: center; |