From e78eb01665814761bd9cea2e11618589420a6248 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 17 Oct 2022 15:58:18 +0200 Subject: [PATCH 01/13] :lipstick: [#1924] tinymce with dark skin --- .../js/components/admin/form_design/Editor.js | 10 +++++++++- src/openforms/js/components/formio_builder/builder.js | 3 +++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/openforms/js/components/admin/form_design/Editor.js b/src/openforms/js/components/admin/form_design/Editor.js index 3ae90687d2..20606f58b4 100644 --- a/src/openforms/js/components/admin/form_design/Editor.js +++ b/src/openforms/js/components/admin/form_design/Editor.js @@ -9,6 +9,9 @@ const TinyMCEEditor = ({content, onEditorChange}) => { const editorRef = useRef(null); const tinyMceUrl = useContext(TinyMceContext); const intl = useIntl(); + // TODO Django 4.2: use explicit theme names rather than the media query approach: + // https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/dark_mode.css#L36 + const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; return ( <> @@ -16,7 +19,12 @@ const TinyMCEEditor = ({content, onEditorChange}) => { tinymceScriptSrc={tinyMceUrl} onInit={(evt, editor) => (editorRef.current = editor)} value={content} - init={{...tinyMceConfig, language: intl.locale}} + init={{ + ...tinyMceConfig, + language: intl.locale, + skin: useDarkMode ? 'oxide-dark' : 'oxide', + content_css: useDarkMode ? 'dark' : 'default', + }} onEditorChange={onEditorChange} /> diff --git a/src/openforms/js/components/formio_builder/builder.js b/src/openforms/js/components/formio_builder/builder.js index 489b5d82c5..2596aff860 100644 --- a/src/openforms/js/components/formio_builder/builder.js +++ b/src/openforms/js/components/formio_builder/builder.js @@ -12,6 +12,7 @@ Templates.current = customTemplates; const getBuilderOptions = () => { const maxFileUploadSize = jsonScriptToVar('setting-MAX_FILE_UPLOAD_SIZE'); const formFieldsRequiredDefault = jsonScriptToVar('config-REQUIRED_DEFAULT'); + const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; return { builder: { @@ -122,6 +123,8 @@ const getBuilderOptions = () => { fontColor: { colors: jsonScriptToVar('config-RICH_TEXT_COLORS'), }, + skin: useDarkMode ? 'oxide-dark' : 'oxide', + content_css: useDarkMode ? 'dark' : 'default', }, }, }, From 0ec5d7517489f9919f8fa82163f8bf810be3adf5 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 17 Oct 2022 15:59:27 +0200 Subject: [PATCH 02/13] :lipstick: [#1924] Dark theme for waring modal --- src/openforms/scss/components/admin/_ReactModal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/openforms/scss/components/admin/_ReactModal.scss b/src/openforms/scss/components/admin/_ReactModal.scss index 58b0fcaef9..936e339b1a 100644 --- a/src/openforms/scss/components/admin/_ReactModal.scss +++ b/src/openforms/scss/components/admin/_ReactModal.scss @@ -20,8 +20,8 @@ position: absolute; width: 50vw; height: 50vh; - background: white; - border: solid 1px #eee; + background: var(--body-bg); + border: 1px solid var(--hairline-color); border-radius: 0; outline: none; padding: 20px; From 437118444490dff37a0f95882b674faf9cbd48f0 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Mon, 17 Oct 2022 16:00:15 +0200 Subject: [PATCH 03/13] :lipstick: [#1924] H2 for fieldset legend --- .../scss/components/builder/_openforms-component.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/openforms/scss/components/builder/_openforms-component.scss b/src/openforms/scss/components/builder/_openforms-component.scss index e87522eb2d..e05bf9becf 100644 --- a/src/openforms/scss/components/builder/_openforms-component.scss +++ b/src/openforms/scss/components/builder/_openforms-component.scss @@ -1,3 +1,5 @@ +@import '~microscope-sass/lib/typography'; + @import '../../../ui/static/ui/scss/settings'; @import '../../vars'; @@ -14,6 +16,10 @@ $color-tooltip-background 20px ); + legend { + @include h2(auto); + } + label { color: $color_dark; } From ed5a1d98d7375ca3f7a44c0a0c55267a2dd8baab Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Tue, 18 Oct 2022 15:51:45 +0200 Subject: [PATCH 04/13] :adhesive_bandage: [#1924] Make text dark for CKEditor5 --- src/openforms/js/components/formio_builder/builder.js | 3 --- .../scss/components/builder/_openforms-component.scss | 8 ++++++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/openforms/js/components/formio_builder/builder.js b/src/openforms/js/components/formio_builder/builder.js index 2596aff860..489b5d82c5 100644 --- a/src/openforms/js/components/formio_builder/builder.js +++ b/src/openforms/js/components/formio_builder/builder.js @@ -12,7 +12,6 @@ Templates.current = customTemplates; const getBuilderOptions = () => { const maxFileUploadSize = jsonScriptToVar('setting-MAX_FILE_UPLOAD_SIZE'); const formFieldsRequiredDefault = jsonScriptToVar('config-REQUIRED_DEFAULT'); - const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; return { builder: { @@ -123,8 +122,6 @@ const getBuilderOptions = () => { fontColor: { colors: jsonScriptToVar('config-RICH_TEXT_COLORS'), }, - skin: useDarkMode ? 'oxide-dark' : 'oxide', - content_css: useDarkMode ? 'dark' : 'default', }, }, }, diff --git a/src/openforms/scss/components/builder/_openforms-component.scss b/src/openforms/scss/components/builder/_openforms-component.scss index e05bf9becf..84feee4c79 100644 --- a/src/openforms/scss/components/builder/_openforms-component.scss +++ b/src/openforms/scss/components/builder/_openforms-component.scss @@ -28,4 +28,12 @@ opacity: 0.9; } } + + .ck-editor__main { + // TODO: Formio uses CKEditor5, but using their dark theme seems more complex than for the tinymce. + // So for now we keep the default theme, but ensure that the text in the editor is dark and not light. + @media (prefers-color-scheme: dark) { + color: $color-dark; + } + } } From 4cc839573bb531c41fb74d96570d1cd4a067249c Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Tue, 18 Oct 2022 16:08:58 +0200 Subject: [PATCH 05/13] :lipstick: [#1924] File upload component header dark --- .../scss/components/builder/_formio-component-file.scss | 6 ++++++ src/openforms/scss/components/builder/_index.scss | 3 +++ 2 files changed, 9 insertions(+) create mode 100644 src/openforms/scss/components/builder/_formio-component-file.scss diff --git a/src/openforms/scss/components/builder/_formio-component-file.scss b/src/openforms/scss/components/builder/_formio-component-file.scss new file mode 100644 index 0000000000..0f92ec6d54 --- /dev/null +++ b/src/openforms/scss/components/builder/_formio-component-file.scss @@ -0,0 +1,6 @@ +.formio-component-file { + .list-group-item { + background-color: var(--body-bg); + border-color: var(--hairline-color); + } +} diff --git a/src/openforms/scss/components/builder/_index.scss b/src/openforms/scss/components/builder/_index.scss index 1ba8b2ca34..fcdeaecab6 100644 --- a/src/openforms/scss/components/builder/_index.scss +++ b/src/openforms/scss/components/builder/_index.scss @@ -4,5 +4,8 @@ // fixes of styling broken by django admin styling @import 'formio-component-checkbox'; +// Fix for dark theme +@import 'formio-component-file'; + @import 'columns'; @import 'openforms-component'; From c40e3d35c5510a7f61714adb9919b739ad022890 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Tue, 18 Oct 2022 16:31:27 +0200 Subject: [PATCH 06/13] :lipstick: [#1924] Light colour for 'Add another' button --- src/openforms/scss/components/builder/_admin-fixes.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/openforms/scss/components/builder/_admin-fixes.scss b/src/openforms/scss/components/builder/_admin-fixes.scss index e0bcd30c16..8eb413a16d 100644 --- a/src/openforms/scss/components/builder/_admin-fixes.scss +++ b/src/openforms/scss/components/builder/_admin-fixes.scss @@ -1,4 +1,5 @@ @import '~microscope-sass/lib/color'; +@import '~microscope-sass/lib/typography'; @import '../../vars'; @@ -35,3 +36,7 @@ div#content h1 { color: $color-danger; font-weight: bold; } + +.formio-button-add-another:not(:hover) { + color: var(--body-fg) !important; +} From dbfe1cecbc87cc9ce2af4f13a9b37146f95981a1 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Tue, 18 Oct 2022 16:40:26 +0200 Subject: [PATCH 07/13] :lipstick: [#1924] Dark SDK snippet --- src/openforms/scss/components/admin/_sdk-snippet.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/openforms/scss/components/admin/_sdk-snippet.scss b/src/openforms/scss/components/admin/_sdk-snippet.scss index 8afa0533c0..9144151ce7 100644 --- a/src/openforms/scss/components/admin/_sdk-snippet.scss +++ b/src/openforms/scss/components/admin/_sdk-snippet.scss @@ -3,11 +3,15 @@ display: inline-block; padding-top: 10px; padding-bottom: 10px; - background-color: #efefef; + background-color: var(--form-input-bg); + border-style: solid; + border-width: thin; + border-color: var(--border-color); pre { font-size: 100%; margin-bottom: 0; + color: var(--body-fg); } } From d3801e4ee9c80b46caeb2799d81118bf61595a18 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Tue, 18 Oct 2022 16:52:55 +0200 Subject: [PATCH 08/13] :lipstick: [#1924] Dark select rjsf fields --- src/openforms/scss/vendor/_rjsf-field.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/openforms/scss/vendor/_rjsf-field.scss b/src/openforms/scss/vendor/_rjsf-field.scss index ed2901f812..ca090eddfb 100644 --- a/src/openforms/scss/vendor/_rjsf-field.scss +++ b/src/openforms/scss/vendor/_rjsf-field.scss @@ -25,6 +25,11 @@ input[type='email'] { width: $input-field-size; // override from admin/rjsf default } + + select { + background-color: var(--form-input-bg) !important; + border-color: var(--border-color) !important; + } } &__errors { From 8eb87833e5c13c522893b254d6880fdf85b6d3dd Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Wed, 19 Oct 2022 09:51:48 +0200 Subject: [PATCH 09/13] :lipstick: [#1924] Dropdown for select fixed --- .../scss/components/builder/_builder.scss | 42 +++++++++---------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/src/openforms/scss/components/builder/_builder.scss b/src/openforms/scss/components/builder/_builder.scss index 5d6ee89457..000c905fbc 100644 --- a/src/openforms/scss/components/builder/_builder.scss +++ b/src/openforms/scss/components/builder/_builder.scss @@ -69,35 +69,33 @@ div.flatpickr-calendar.open { padding-top: 10px; } -[ref='editForm'] { - .choices__list { - &--dropdown { - background-color: var(--body-bg); - color: var(--body-fg); - border-color: var(--border-color); - } - - .choices__input { - background-color: var(--form-input-bg); - border-color: var(--border-color); - } - - .choices__item--selectable.is-highlighted { - background-color: var(--formio-dropdown-highlighted-bg); - } +.choices__list { + &--dropdown { + background-color: var(--body-bg); + color: var(--body-fg); + border-color: var(--border-color); } - .choices__list + .choices__input { - border: none; - border-radius: unset; - padding: 4px 0 4px 2px; + .choices__input { + background-color: var(--form-input-bg) !important; + border-color: var(--border-color) !important; } - .choices__list:not(:empty) + .choices__input { - width: 1ch; + .choices__item--selectable.is-highlighted { + background-color: var(--formio-dropdown-highlighted-bg); } } +.choices__list + .choices__input { + border: none; + border-radius: unset; + padding: 4px 0 4px 2px; +} + +.choices__list:not(:empty) + .choices__input { + width: 1ch; +} + .builder-sidebar_scroll { top: 100px; } From d6f00571b1fbf73993a6388dc54b0d33ca061075 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Wed, 19 Oct 2022 12:22:38 +0200 Subject: [PATCH 10/13] :lipstick: [#1924] Checkboxes/radio dark --- src/openforms/scss/admin/_admin_theme.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/openforms/scss/admin/_admin_theme.scss b/src/openforms/scss/admin/_admin_theme.scss index ab584af493..5625e0765b 100644 --- a/src/openforms/scss/admin/_admin_theme.scss +++ b/src/openforms/scss/admin/_admin_theme.scss @@ -95,6 +95,12 @@ DO NOT PUT ANY TARGET APP-SPECIFIC RULES HERE. background-color: var(--form-input-bg); } + input[type='checkbox'], + input[type='radio'] { + color-scheme: dark; + } + + body #toolbar { background: var(--body-bg); } From ca4484687a6057a2e1c7db1c1858965daefc858f Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Wed, 19 Oct 2022 12:39:40 +0200 Subject: [PATCH 11/13] :ok_hand: [#1924] PR Feedback part 1 --- src/openforms/scss/admin/_admin_theme.scss | 1 - .../scss/components/builder/_admin-fixes.scss | 5 ----- src/openforms/scss/components/builder/_builder.scss | 13 +++++++++++-- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/openforms/scss/admin/_admin_theme.scss b/src/openforms/scss/admin/_admin_theme.scss index 5625e0765b..3066bf13da 100644 --- a/src/openforms/scss/admin/_admin_theme.scss +++ b/src/openforms/scss/admin/_admin_theme.scss @@ -100,7 +100,6 @@ DO NOT PUT ANY TARGET APP-SPECIFIC RULES HERE. color-scheme: dark; } - body #toolbar { background: var(--body-bg); } diff --git a/src/openforms/scss/components/builder/_admin-fixes.scss b/src/openforms/scss/components/builder/_admin-fixes.scss index 8eb413a16d..e0bcd30c16 100644 --- a/src/openforms/scss/components/builder/_admin-fixes.scss +++ b/src/openforms/scss/components/builder/_admin-fixes.scss @@ -1,5 +1,4 @@ @import '~microscope-sass/lib/color'; -@import '~microscope-sass/lib/typography'; @import '../../vars'; @@ -36,7 +35,3 @@ div#content h1 { color: $color-danger; font-weight: bold; } - -.formio-button-add-another:not(:hover) { - color: var(--body-fg) !important; -} diff --git a/src/openforms/scss/components/builder/_builder.scss b/src/openforms/scss/components/builder/_builder.scss index 000c905fbc..48e1b28eab 100644 --- a/src/openforms/scss/components/builder/_builder.scss +++ b/src/openforms/scss/components/builder/_builder.scss @@ -77,8 +77,13 @@ div.flatpickr-calendar.open { } .choices__input { - background-color: var(--form-input-bg) !important; - border-color: var(--border-color) !important; + background-color: var(--form-input-bg); + border-color: var(--border-color); + } + + .choices__input.choices__input--cloned { + background-color: var(--form-input-bg); + border-color: var(--border-color); } .choices__item--selectable.is-highlighted { @@ -224,4 +229,8 @@ div.flatpickr-calendar.open { } } } + + .formio-button-add-another { + color: var(--body-fg) !important; + } } From e34dc56ed2573e3d646d62946780ab3931071790 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Wed, 19 Oct 2022 13:20:17 +0200 Subject: [PATCH 12/13] :construction: [#1924] Dark scheme for django-tinymce --- src/openforms/js/index.js | 2 +- src/openforms/js/initTinymce.js | 91 +++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 src/openforms/js/initTinymce.js diff --git a/src/openforms/js/index.js b/src/openforms/js/index.js index f881ac852c..9738775e6d 100644 --- a/src/openforms/js/index.js +++ b/src/openforms/js/index.js @@ -1,5 +1,5 @@ import {Formio} from 'react-formio'; - +import './initTinymce'; import './components'; import OpenForms from './formio_module'; diff --git a/src/openforms/js/initTinymce.js b/src/openforms/js/initTinymce.js new file mode 100644 index 0000000000..3c124cfe89 --- /dev/null +++ b/src/openforms/js/initTinymce.js @@ -0,0 +1,91 @@ +// Taken from https://github.com/jazzband/django-tinymce/blob/master/tinymce/static/django_tinymce/init_tinymce.js +// Updated to add dark theme detection (L35-44) + +'use strict'; + +{ + function initTinyMCE(el) { + if (el.closest('.empty-form') === null) { + // Don't do empty inlines + var mce_conf = JSON.parse(el.dataset.mceConf); + + // There is no way to pass a JavaScript function as an option + // because all options are serialized as JSON. + const fns = [ + 'color_picker_callback', + 'file_browser_callback', + 'file_picker_callback', + 'images_dataimg_filter', + 'images_upload_handler', + 'paste_postprocess', + 'paste_preprocess', + 'setup', + 'urlconverter_callback', + ]; + fns.forEach(fn_name => { + if (typeof mce_conf[fn_name] != 'undefined') { + if (mce_conf[fn_name].includes('(')) { + mce_conf[fn_name] = eval('(' + mce_conf[fn_name] + ')'); + } else { + mce_conf[fn_name] = window[mce_conf[fn_name]]; + } + } + }); + + // TODO Django 4.2: use explicit theme names rather than the media query approach: + // https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/dark_mode.css#L36 + const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + mce_conf = { + ...mce_conf, + ...{ + skin: useDarkMode ? 'oxide-dark' : 'oxide', + content_css: useDarkMode ? 'dark' : 'default', + }, + }; + + const id = el.id; + if ('elements' in mce_conf && mce_conf['mode'] == 'exact') { + mce_conf['elements'] = id; + } + if (el.dataset.mceGzConf) { + tinyMCE_GZ.init(JSON.parse(el.dataset.mceGzConf)); + } + if (!tinyMCE.get(id)) { + tinyMCE.init(mce_conf); + } + } + } + + // Call function fn when the DOM is loaded and ready. If it is already + // loaded, call the function now. + // https://youmightnotneedjquery.com/#ready + function ready(fn) { + if (document.readyState !== 'loading') { + fn(); + } else { + document.addEventListener('DOMContentLoaded', fn); + } + } + + function initializeTinyMCE(element, formsetName) { + Array.from(element.querySelectorAll('.tinymce')).forEach(area => initTinyMCE(area)); + } + + ready(function () { + // initialize the TinyMCE editors on load + initializeTinyMCE(document); + + // initialize the TinyMCE editor after adding an inline in the django admin context. + if (typeof django !== 'undefined' && typeof django.jQuery !== 'undefined') { + django.jQuery(document).on('formset:added', (event, $row, formsetName) => { + if (event.detail && event.detail.formsetName) { + // Django >= 4.1 + initializeTinyMCE(event.target); + } else { + // Django < 4.1, use $row + initializeTinyMCE($row.get(0)); + } + }); + } + }); +} From 014382098a39a1b07f95c3d144d081f43b01b5b9 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Fri, 21 Oct 2022 10:02:49 +0200 Subject: [PATCH 13/13] :ok_hand: [#1924] PR Feedback part 2 --- src/openforms/js/components/form/textfield.js | 1 - src/openforms/scss/admin/_app_overrides.scss | 8 ++-- .../scss/components/builder/_builder.scss | 46 +++++++++---------- src/openforms/scss/vendor/_rjsf-field.scss | 5 -- 4 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/openforms/js/components/form/textfield.js b/src/openforms/js/components/form/textfield.js index e771302b27..3a41991c12 100644 --- a/src/openforms/js/components/form/textfield.js +++ b/src/openforms/js/components/form/textfield.js @@ -1,5 +1,4 @@ import {Formio} from 'react-formio'; - import {DEFAULT_TEXT_TABS} from './edit/tabs'; class TextField extends Formio.Components.components.textfield { diff --git a/src/openforms/scss/admin/_app_overrides.scss b/src/openforms/scss/admin/_app_overrides.scss index b380bb899a..150f9c41eb 100644 --- a/src/openforms/scss/admin/_app_overrides.scss +++ b/src/openforms/scss/admin/_app_overrides.scss @@ -211,16 +211,16 @@ $djai-border-width: 8px; } // re-apply django admin styles - background-color: buttonface; - border: 1px solid #ccc; + background-color: var(--form-input-bg); + border: 1px solid var(--border-color); border-radius: 4px; padding: 5px 6px; margin-top: 0; &:focus { color: inherit; - background-color: buttonface; - border-color: #999; + background-color: var(--form-input-bg); + border-color: var(--border-color); box-shadow: none; outline: initial; } diff --git a/src/openforms/scss/components/builder/_builder.scss b/src/openforms/scss/components/builder/_builder.scss index 48e1b28eab..c25cd56aa5 100644 --- a/src/openforms/scss/components/builder/_builder.scss +++ b/src/openforms/scss/components/builder/_builder.scss @@ -69,36 +69,34 @@ div.flatpickr-calendar.open { padding-top: 10px; } -.choices__list { - &--dropdown { - background-color: var(--body-bg); - color: var(--body-fg); - border-color: var(--border-color); - } +[ref='editForm'], +[ref='component'] { + .choices__list { + &--dropdown { + background-color: var(--body-bg); + color: var(--body-fg); + border-color: var(--border-color); + } - .choices__input { - background-color: var(--form-input-bg); - border-color: var(--border-color); - } + .choices__input { + background-color: var(--form-input-bg); + border-color: var(--border-color); + } - .choices__input.choices__input--cloned { - background-color: var(--form-input-bg); - border-color: var(--border-color); + .choices__item--selectable.is-highlighted { + background-color: var(--formio-dropdown-highlighted-bg); + } } - .choices__item--selectable.is-highlighted { - background-color: var(--formio-dropdown-highlighted-bg); + .choices__list + .choices__input { + border: none; + border-radius: unset; + padding: 4px 0 4px 2px; } -} -.choices__list + .choices__input { - border: none; - border-radius: unset; - padding: 4px 0 4px 2px; -} - -.choices__list:not(:empty) + .choices__input { - width: 1ch; + .choices__list:not(:empty) + .choices__input { + width: 1ch; + } } .builder-sidebar_scroll { diff --git a/src/openforms/scss/vendor/_rjsf-field.scss b/src/openforms/scss/vendor/_rjsf-field.scss index ca090eddfb..ed2901f812 100644 --- a/src/openforms/scss/vendor/_rjsf-field.scss +++ b/src/openforms/scss/vendor/_rjsf-field.scss @@ -25,11 +25,6 @@ input[type='email'] { width: $input-field-size; // override from admin/rjsf default } - - select { - background-color: var(--form-input-bg) !important; - border-color: var(--border-color) !important; - } } &__errors {