From b3ac08d1360981ba2b38a53e2b02f507b40d38e4 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 18 Oct 2015 13:36:48 +0200 Subject: [PATCH] Overhauled style editor --- .../files/acp/style/acpStyleEditor.css | 71 +++ .../install/files/acp/templates/styleAdd.tpl | 419 ++++++++++++++++-- .../js/WoltLab/WCF/Acp/Ui/Style/Editor.js | 28 +- .../files/lib/acp/form/StyleAddForm.class.php | 17 +- .../lib/system/style/StyleCompiler.class.php | 5 + .../install/files/style/layout/content.scss | 6 +- .../install/files/style/layout/global.scss | 28 +- .../install/files/style/layout/layout.scss | 12 +- .../files/style/layout/pageHeader.scss | 2 +- 9 files changed, 500 insertions(+), 88 deletions(-) create mode 100644 wcfsetup/install/files/acp/style/acpStyleEditor.css diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css new file mode 100644 index 0000000000..f46c919a4a --- /dev/null +++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css @@ -0,0 +1,71 @@ +/* ### wrapper ### */ +#spWrapper { display: flex; } +#spWindow { background-color: #eee; border: 1px solid rgb(52, 152, 219); flex: 1 1 auto; margin-right: 40px; padding: 1px; } +#spSidebar { flex: 0 0 300px; } +.spBoundary { margin: 0 40px; } + +/* ### header ### */ +#spHeader > .spBoundary { display: flex; flex-wrap: wrap; padding: 15px 0; } +#spLogo { flex: 0 0 50%; } +#spLogo > img { height: 40px; } +#spSearch { flex: 0 0 50%; } +#spSearchBox { border-width: 0; } +#spMenu { flex: 0 0 50%; } +#spUser { flex: 0 0 50%; } +#spLogo, #spSearch, #spMenu, #spUser { align-items: center; display: flex; } +#spSearch, #spUser { justify-content: flex-end; } + +/* ### menu ### */ +#spMenu > ol > li:not(:last-child) { margin-right: 10px; } +#spMenu > ol > li > a { font-size: 16px; font-weight: 300; } +#spMenu > ol > li.active > a { font-weight: 600; } +#spMenu > ol > li.active > a::after { content: "\f0d7"; display: inline-block; font-family: FontAwesome; margin-left: 5px; } +#spMenu > ol > li.active { position: relative; } +#spSubMenu { border: 1px solid #fff; padding: 3px 0; position: absolute; } +#spSubMenu > li > a { display: block; padding: 5px 20px; white-space: nowrap; width: 120px; } + +/* ### navigation ### */ +#spNavigation { font-size: 11px; padding: 7px 0; } +#spNavigation li:first-child { position: relative; } +#spNavigation li:first-child::after { content: "/"; display: inline-block; margin-left: 5px; } + +/* ### content ### */ +#spContent { padding: 20px 0; } +.spHeadline { border-bottom: 1px solid #000; font-size: 1.2rem; font-weight: 300; margin: 20px 0; padding-bottom: 5px; } +.spHeadline:first-child { margin-top: 10px; } + +/* ### tabular box ### */ +#spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; } +#spTable th { border-bottom: 2px solid currentColor; font-size: 16px; font-weight: 300; text-align: left; } +#spTable th, #spTable td { padding: 10px; } +#spTable tr:not(:last-child) > td { border-bottom: 1px solid #000; } + +/* ### button ### */ +#spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; } + +/* ### dropdown ### */ +#spDropdown { display: inline-block; float: none; position: relative; } + +/* ### footer box ### */ +#spFooterBox > .spBoundary { display: flex; justify-content: space-between; padding: 15px 0; } +#spFooterBox .spFooterBoxItem { flex: 0 0 auto; width: calc(50% - 15px); /* work-around for IE which does not support calc() for flex-basis */ } +#spFooterBox .spFooterBoxHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; } + +/* ### footer ### */ +#spFooter > .spBoundary { padding: 15px 0; text-align: center; } + +/* ### content sidebar ### */ +#spContent > .spBoundary { display: flex; } +#spContentWrapper { flex: 1 1 auto; } +#spContentSidebar { flex: 0 0 250px; margin-left: 20px; } +#spContentSidebar .spContentSidebarBox { padding: 20px; } +#spContentSidebar .spContentSidebarBox:not(:last-child) { margin-bottom: 20px; } +#spContentSidebar .spContentSidebarHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; } + +/* ### wrapper sidebar ### */ +.spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; } +.spColor { align-items: center; } +.spColorBox { background-color: #fff; border: 1px solid #ccc; margin-right: 10px !important; padding: 1px; } +.spColorBox > span { display: block; height: 24px; width: 24px; } +.spVariable, .spDescription { display: block; font-size: 12px; } +.spVariable { font-family: Consolas, Courier, monospace; } diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl index a6697f86d6..21af4b2757 100644 --- a/wcfsetup/install/files/acp/templates/styleAdd.tpl +++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl @@ -1,12 +1,15 @@ {include file='header' pageTitle='wcf.acp.style.'|concat:$action} + + {js application='wcf' acp='true' file='WCF.ACP.Style'} {js application='wcf' file='WCF.ColorPicker' bundle='WCF.Combined'} + {* advanced *}
{if !$isTainted} diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js index d65e8cdc9e..6f8ee6d332 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/Style/Editor.js @@ -104,7 +104,7 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio }, _initVisualEditor: function(styleRuleMap) { - var regions = elBySelAll('.stylePreview [data-region]'); + var regions = elBySelAll('#spWindow [data-region]'); for (var i = 0, length = regions.length; i < length; i++) { _stylePreviewRegions.set(elData(regions[i], 'region'), regions[i]); } @@ -115,8 +115,8 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio elHide(_stylePreviewRegionMarker); elById('colors').appendChild(_stylePreviewRegionMarker); - var container = elBySel('.stylePreviewVariables'); - var select = elById('stylePreviewVariablesCategories'); + var container = elById('spSidebar'); + var select = elById('spCategories'); var lastValue = select.value; function updateRegionMarker() { @@ -191,11 +191,11 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio var selectContainer = elBySel('.stylePreviewVariablesContainer:first-child'); var element; select.addEventListener('change', function() { - element = elBySel('.stylePreviewVariablesContainer[data-category="' + lastValue + '"]', container); + element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container); elHide(element); lastValue = select.value; - element = elBySel('.stylePreviewVariablesContainer[data-category="' + lastValue + '"]', container); + element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container); elShow(element); // set region marker @@ -217,19 +217,29 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio return; } - var rule = styleRuleMap[identifier].replace(/VALUE/, value + ' !important'); + var rule = styleRuleMap[identifier].replace(/VALUE/g, value + ' !important'); if (!rule) { console.debug(identifier); return; } - style.sheet.insertRule(rule, style.sheet.cssRules.length); + var rules = []; + if (rule.indexOf('__COMBO_RULE__')) { + rules = rule.split('__COMBO_RULE__'); + } + else { + rules = [rule]; + } + + for (var i = 0, length = rules.length; i < length; i++) { + style.sheet.insertRule(rules[i], style.sheet.cssRules.length); + } } - + console.debug(styleRuleMap); var elements = elByClass('styleVariableColor', variablesWrapper); [].forEach.call(elements, function(colorField) { var variableName = elData(colorField, 'store').replace(/_value$/, ''); - + console.debug(variableName); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === 'style') { diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php index a8ede9f9fc..8960e08d71 100644 --- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php +++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php @@ -57,6 +57,7 @@ class StyleAddForm extends AbstractForm { 'Helvetica, Verdana, sans-serif' => 'Helvetica', 'Impact, Compacta, Chicago, sans-serif' => 'Impact', '"Lucida Sans", "Lucida Grande", Monaco, Geneva, sans-serif' => 'Lucida', + '"Segoe UI", "Lucida Grande", "Helveltica", sans-serif' => 'Segoe UI', 'Tahoma, Arial, Helvetica, sans-serif' => 'Tahoma', '"Times New Roman", Times, Georgia, serif' => 'Times New Roman', '"Trebuchet MS", Arial, sans-serif' => 'Trebuchet MS', @@ -442,20 +443,20 @@ class StyleAddForm extends AbstractForm { $this->colors = [ 'wcfHeader' => ['background', 'link', 'linkActive'], - 'wcfHeaderSearchBox' => ['background', 'border', 'text', 'backgroundAccent', 'borderActive', 'textActive'], + 'wcfHeaderSearchBox' => ['background', 'text', 'backgroundActive', 'textActive'], 'wcfHeaderMenu' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'], 'wcfNavigation' => ['background', 'text', 'link', 'linkActive'], 'wcfSidebar' => ['background', 'text', 'link', 'linkActive'], 'wcfSidebarHeadline' => ['text', 'link', 'linkActive'], 'wcfContent' => ['background', 'text', 'link', 'linkActive'], 'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'], - 'wcfTabularBox' => ['border', 'headline', 'headlineActive'], + 'wcfTabularBox' => ['borderInner', 'headline', 'backgroundActive', 'headlineActive'], 'wcfInput' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'], 'wcfInputDisabled' => ['background', 'border', 'text'], 'wcfButton' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'], 'wcfButtonPrimary' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'], 'wcfButtonDisabled' => ['background', 'border', 'text'], - 'wcfDropdown' => ['background', 'border', 'text', 'link', 'backgroundActive', 'linkActive'], + 'wcfDropdown' => ['background', 'border', 'borderInner', 'text', 'link', 'backgroundActive', 'linkActive'], 'wcfFooterBox' => ['background', 'text', 'link', 'linkActive'], 'wcfFooterBoxHeadline' => ['text', 'link', 'linkActive'], 'wcfFooter' => ['background', 'text', 'link', 'linkActive'] @@ -477,7 +478,11 @@ class StyleAddForm extends AbstractForm { // set global variables $this->globals = [ - 'wcfBaseFontSize', + 'wcfFontSizeSmall', + 'wcfFontSizeDefault', + 'wcfFontSizeHeadline', + 'wcfFontSizeTitle', + 'wcfLayoutFixedWidth', 'wcfLayoutMinWidth', 'wcfLayoutMaxWidth' @@ -489,7 +494,9 @@ class StyleAddForm extends AbstractForm { 'overrideLess', 'pageLogo', 'useFluidLayout', - 'wcfBaseFontFamily' + 'useGoogleFont', + 'wcfFontFamilyGoogle', + 'wcfFontFamilyFallback' ]; EventHandler::getInstance()->fireAction($this, 'setVariables'); diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php index cc66ec1b9b..9301f27222 100644 --- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php +++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php @@ -200,6 +200,11 @@ class StyleCompiler extends SingletonFactory { $style = new Style(1); $variables = $style->getVariables(); + $variables['wcfFontFamily'] = $variables['wcfFontFamilyFallback']; + if (!empty($variables['wcfFontFamilyGoogle'])) { + $variables['wcfFontFamily'] = '"' . $variables['wcfFontFamilyGoogle'] . '", ' . $variables['wcfFontFamily']; + } + // insert blue temptation files //array_unshift($files, WCF_DIR.'acp/style/blueTemptation/variables.scss', WCF_DIR.'acp/style/blueTemptation/override.scss'); diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss index 279f4bba40..689878392a 100644 --- a/wcfsetup/install/files/style/layout/content.scss +++ b/wcfsetup/install/files/style/layout/content.scss @@ -10,7 +10,7 @@ fieldset > legend, section > h1 { - @extend .wcfFontLarge; + @extend .wcfFontHeadline; color: $wcfContentHeadlineText; margin-bottom: 20px; @@ -51,6 +51,10 @@ label { display: block; + &.selectDropdown { + display: inline; + } + &:not(:first-child) { margin-top: 5px; } diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss index 94bf2e6ecd..7ef1e643e5 100644 --- a/wcfsetup/install/files/style/layout/global.scss +++ b/wcfsetup/install/files/style/layout/global.scss @@ -55,38 +55,38 @@ .box128 { @include box(128px, 11px); } .box256 { @include box(256px, 21px); } -small { - font-size: .85rem; -} - .wcfFontDefault { - font-family: "Open Sans", "Segoe UI"; + font-size: $wcfFontSizeDefault; font-weight: 400; } .wcfFontSmall { - font-family: "Open Sans", "Segoe UI"; - font-size: .85rem; + font-size: $wcfFontSizeSmall; font-weight: 400; } .wcfFontBold { - font-family: "Open Sans", "Segoe UI Semibold"; font-weight: 600; } -.wcfFontLarger { - font-family: "Open Sans", "Segoe UI Light"; - font-size: 1.2rem; +.wcfFontHeadline { + font-size: $wcfFontSizeHeadline; font-weight: 300; } -.wcfFontLarge { - font-family: "Open Sans", "Segoe UI Light"; - font-size: 1.4rem; +.wcfFontTitle { + font-size: $wcfFontSizeTitle; font-weight: 300; } +small { + @extend .wcfFontSmall; +} + +strong { + @extend .wcfFontBold; +} + .elementPointer { pointer-events: none; position: absolute; diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss index a3613e1495..57c2a052fa 100644 --- a/wcfsetup/install/files/style/layout/layout.scss +++ b/wcfsetup/install/files/style/layout/layout.scss @@ -3,11 +3,11 @@ /* @TODO END */ html, body { - font-size: $wcfBaseFontSize; height: 100%; } body { + font-family: $wcfFontFamily; line-height: 1.428571429; position: relative; word-wrap: break-word; @@ -23,10 +23,6 @@ a { } } -strong { - @extend .wcfFontBold; -} - #pageContainer { display: flex; height: 100%; @@ -88,9 +84,7 @@ strong { padding-bottom: 10px; > h1 { - @extend .wcfFontLarge; - - font-size: 2rem; + @extend .wcfFontTitle; } a { @@ -123,7 +117,7 @@ strong { .containerHeadline { > h3 { - @extend .wcfFontLarger; + @extend .wcfFontHeadline; > .badge { margin-left: 5px; diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index 8c8e8ffa86..a768d74fd8 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -45,7 +45,7 @@ display: flex; > li { - @extend .wcfFontLarger; + @extend .wcfFontHeadline; flex: 0 auto; -- 2.20.1