From aa893dd80e39e9ec4274e2af0a3090cd10c309ec Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 17 Jul 2017 15:22:52 +0200 Subject: [PATCH] Added separate style variables for editor appearance See #2317 --- .../files/acp/style/acpStyleEditor.css | 3 +++ .../install/files/acp/templates/styleAdd.tpl | 24 +++++++++++++++++++ .../files/lib/acp/form/StyleAddForm.class.php | 2 ++ wcfsetup/install/files/style/ui/redactor.scss | 20 ++++++++-------- wcfsetup/setup/db/install.sql | 5 ++++ 5 files changed, 44 insertions(+), 10 deletions(-) diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css index 287edc7802..8f9347d754 100644 --- a/wcfsetup/install/files/acp/style/acpStyleEditor.css +++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css @@ -57,6 +57,9 @@ html[dir="rtl"] #spTable th { text-align: right; } #spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; } #spButtonPrimary { margin-top: 10px; } +/* ### editor ### */ +#spEditorContent { border: 1px solid rgb(224, 224, 224); border-top-width: 0; height: 100px; } + /* ### dropdown ### */ #spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; } diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl index c43e955ed1..0dcf3036bc 100644 --- a/wcfsetup/install/files/acp/templates/styleAdd.tpl +++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl @@ -620,6 +620,25 @@ +
Editor
+ +
+
+
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
+
+
Dropdown
@@ -830,6 +849,11 @@ 'wcfButtonPrimaryTextActive': '#spButtonPrimary .button.active, #spButtonPrimary .button:hover { color: VALUE; }', 'wcfButtonDisabledBackground': '#spButton .button.disabled, #spButtonPrimary .button.disabled { background-color: VALUE; }', 'wcfButtonDisabledText': '#spButton .button.disabled, #spButtonPrimary .button.disabled { color: VALUE; }', + 'wcfEditorButtonBackground': '#spEditor .redactor-toolbar, #spEditor .redactor-toolbar a { background-color: VALUE; }', + 'wcfEditorButtonBackgroundActive': '#spEditor .redactor-toolbar a:hover, #spEditor .redactor-toolbar a.dropact { background-color: VALUE; }', + 'wcfEditorButtonText': '#spEditor .redactor-toolbar a { color: VALUE; }', + 'wcfEditorButtonTextActive': '#spEditor .redactor-toolbar a:hover, #spEditor .redactor-toolbar a.dropact { color: VALUE; }', + 'wcfEditorButtonTextDisabled': '#spEditor .redactor-toolbar a.redactor-button-disabled { color: VALUE; }', 'wcfDropdownBackground': '#spDropdown { background-color: VALUE; } __COMBO_RULE__ #spDropdown::before { border-bottom-color: VALUE; }', 'wcfDropdownBorderInner': '#spDropdown .dropdownDivider { border-color: VALUE; }', 'wcfDropdownText': '#spDropdown li { color: VALUE; }', diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php index a3e762c064..dd8129c860 100644 --- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php +++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php @@ -447,6 +447,7 @@ class StyleAddForm extends AbstractForm { 'wcfTabularBox' => 'wcfTabularBox', 'wcfInput' => ['wcfInput', 'wcfInputDisabled'], 'wcfButton' => ['wcfButton', 'wcfButtonPrimary', 'wcfButtonDisabled'], + 'wcfEditor' =>'wcfEditorButton', 'wcfDropdown' => 'wcfDropdown', 'wcfStatus' => ['wcfStatusInfo', 'wcfStatusSuccess', 'wcfStatusWarning', 'wcfStatusError'], 'wcfFooterBox' => ['wcfFooterBox', 'wcfFooterBoxHeadline'], @@ -471,6 +472,7 @@ class StyleAddForm extends AbstractForm { 'wcfButton' => ['background', 'text', 'backgroundActive', 'textActive'], 'wcfButtonPrimary' => ['background', 'text', 'backgroundActive', 'textActive'], 'wcfButtonDisabled' => ['background', 'text'], + 'wcfEditorButton' => ['background', 'backgroundActive', 'text', 'textActive', 'textDisabled'], 'wcfDropdown' => ['background', 'borderInner', 'text', 'link', 'backgroundActive', 'linkActive'], 'wcfStatusInfo' => ['background', 'border', 'text', 'link', 'linkActive'], 'wcfStatusSuccess' => ['background', 'border', 'text', 'link', 'linkActive'], diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index 87214daa51..9c31c213e1 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -152,7 +152,7 @@ } .redactor-toolbar { - background-color: $wcfHeaderBackground; + background-color: $wcfEditorButtonBackground; display: flex; flex-wrap: wrap; @@ -160,7 +160,7 @@ flex: 0 0 auto; > a { - color: $wcfHeaderMenuLink; + color: $wcfEditorButtonText; display: block; outline: none; padding: 10px; @@ -170,15 +170,15 @@ &.redactor-button-disabled { background-color: transparent !important; - color: $wcfButtonDisabledText !important; + color: $wcfEditorButtonTextDisabled !important; cursor: default; pointer-events: none; } &.redactor-act, &.dropact { - background-color: $wcfHeaderMenuLinkBackgroundActive; - color: $wcfHeaderMenuLinkActive; + background-color: $wcfEditorButtonBackgroundActive; + color: $wcfEditorButtonTextActive; } .icon { @@ -195,8 +195,8 @@ // hover-styles on mobile are misleading as they stay much longer // due to the click-like behavior &:hover { - background-color: $wcfHeaderMenuLinkBackgroundActive; - color: $wcfHeaderMenuLinkActive; + background-color: $wcfEditorButtonBackgroundActive; + color: $wcfEditorButtonTextActive; } } } @@ -208,7 +208,7 @@ &::before { bottom: 7px; - border-left: 1px solid $wcfHeaderMenuLink; + border-left: 1px solid $wcfEditorButtonText; content: ""; left: -6px; opacity: .6; @@ -231,7 +231,7 @@ &::before { bottom: 7px; - border-left: 1px solid $wcfHeaderMenuLink; + border-left: 1px solid $wcfEditorButtonText; content: ""; left: 0; opacity: .6; @@ -245,7 +245,7 @@ &::before { bottom: 7px; - border-left: 1px solid $wcfHeaderMenuLink; + border-left: 1px solid $wcfEditorButtonText; content: ""; left: 0; opacity: .6; diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql index 158327fca9..0d570c7f31 100644 --- a/wcfsetup/setup/db/install.sql +++ b/wcfsetup/setup/db/install.sql @@ -2136,6 +2136,11 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdow INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLink', 'rgba(33, 33, 33, 1)'); INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLinkActive', 'rgba(33, 33, 33, 1)'); INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownText', 'rgba(33, 33, 33, 1)'); +INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfEditorButtonBackground', 'rgba(58, 109, 156, 1)'); +INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfEditorButtonBackgroundActive', 'rgba(36, 66, 95, 1)'); +INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfEditorButtonText', 'rgba(255, 255, 255, 1)'); +INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfEditorButtonTextActive', 'rgba(255, 255, 255, 1)'); +INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfEditorButtonTextDisabled', 'rgba(165, 165, 165, 1)'); INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyFallback', '"Segoe UI", "DejaVu Sans", "Lucida Grande", "Helvetica", sans-serif'); INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyGoogle', 'Open Sans'); INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontLineHeight', '1.48'); -- 2.20.1