Added separate style variables for editor appearance

See #2317

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 287edc780202cac28a776f89749c7301ea69c351..8f9347d754f26f05927da1e32806241555f98b54 100644 (file)
--- 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 c43e955ed1478dcc679e53975928c4691803b114..0dcf3036bc4fd9ad0be186b4e9474dd8d4ee3571 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -620,6 +620,25 @@
                                                                                </div>
                                                                        </div>
                                                                        
+                                                                       <div class="spHeadline">Editor</div>
+                                                                       
+                                                                       <div id="spEditor">
+                                                                               <div id="spEditorToolbar" data-region="wcfEditorButton">
+                                                                                       <ul class="redactor-toolbar">
+                                                                                               <li><a class="redactor-button-disabled"><span class="icon icon16 fa-file-code-o"></span></a></li>
+                                                                                               <li><a><span class="icon icon16 fa-undo"></span></a></li>
+                                                                                               <li><a><span class="icon icon16 fa-repeat"></span></a></li>
+                                                                                               <li><a><span class="icon icon16 fa-expand"></span></a></li>
+                                                                                               <li class="redactor-toolbar-separator"><a><span class="icon icon16 fa-header"></span></a></li>
+                                                                                               <li class="redactor-toolbar-separator"><a><span class="icon icon16 fa-bold"></span></a></li>
+                                                                                               <li><a class="dropact"><span class="icon icon16 fa-italic"></span></a></li>
+                                                                                               <li><a><span class="icon icon16 fa-underline"></span></a></li>
+                                                                                               <li><a><span class="icon icon16 fa-strikethrough"></span></a></li>
+                                                                                       </ul>
+                                                                               </div>
+                                                                               <div id="spEditorContent"></div>
+                                                                       </div>
+                                                                       
                                                                        <div class="spHeadline">Dropdown</div>
                                                                        
                                                                        <div style="position: relative">
@@ -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 a3e762c064318a6b3c666315462761d18a4fb8c4..dd8129c8607f20a58e474d36e91c4019b6fbb0cc 100644 (file)
--- 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 87214daa512903e9ea8d9db93f191e21f30e1971..9c31c213e1a9e35388279a9efd44321130c48216 100644 (file)
--- 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 158327fca9a1487145820817cfb4fe3828743d2b..0d570c7f3118b96ea9343e56eb25b3b3357fa820 100644 (file)
--- 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');