From 2935e690909565b0bb531414195110feb95d72ce Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 18 Oct 2015 14:23:47 +0200 Subject: [PATCH] Improved visuals of style editor --- .../files/acp/style/acpStyleEditor.css | 11 ++ .../install/files/acp/templates/styleAdd.tpl | 102 +++++++++--------- .../js/WoltLab/WCF/Acp/Ui/Style/Editor.js | 16 +-- 3 files changed, 72 insertions(+), 57 deletions(-) diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css index f46c919a4a..35b3b42717 100644 --- a/wcfsetup/install/files/acp/style/acpStyleEditor.css +++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css @@ -64,8 +64,19 @@ /* ### wrapper sidebar ### */ .spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; } +.spSidebarBox.pointer { position: relative; } +.spSidebarBox.pointer::before { border: 10px solid transparent; border-right-color: rgb(217, 237, 247); content: ""; display: block; left: -20px; position: absolute; } .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; } + +/* ### style region marker ### */ +#stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; } +#stylePreviewRegionMarkerBottom { height: 100%; } +#stylePreviewRegionMarkerBottom::after, #stylePreviewRegionMarkerBottom::before, #stylePreviewRegionMarker::after, #stylePreviewRegionMarker::before { border: 3px solid red; content: ""; display: block; height: 20px; position: absolute; width: 20px; } +#stylePreviewRegionMarker::after { border-width: 0 0 3px 3px; right: -20px; top: -20px; } +#stylePreviewRegionMarker::before { border-width: 0 3px 3px 0; left: -20px; top: -20px; } +#stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; } +#stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; } diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl index 21af4b2757..9efa8d63d0 100644 --- a/wcfsetup/install/files/acp/templates/styleAdd.tpl +++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl @@ -509,7 +509,7 @@
Tabular Box
- +
@@ -533,11 +533,11 @@
Input
-
+
-
+
@@ -559,7 +559,7 @@
Dropdown
-
-
-
Sidebar
+
+
Sidebar

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. @@ -589,10 +589,10 @@

-
+
-
Lorem Ipsum
+
Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. @@ -609,55 +609,57 @@

-
+
Copyright © 1970-2038 Example Company
-
- -
- - - - {foreach from=$colors key=spCategory item=spColors} -
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 6f8ee6d332..2b444b3f14 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 @@ -145,16 +145,18 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio scrollToRegion(top); } - var variablesWrapper = elById('stylePreviewVariablesWrapper'); + var variablesWrapper = elById('spVariablesWrapper'); function updateWrapperPosition(region) { var fromTop = 0; if (region !== null) { + console.debug(region.offsetTop + " | " + variablesWrapper.offsetTop); fromTop = (region.offsetTop - variablesWrapper.offsetTop) - 10; - + window.dtdesign = region; var styles = window.getComputedStyle(region); - if (styles.getPropertyValue('position') === 'absolute') { + if (styles.getPropertyValue('position') === 'absolute' || styles.getPropertyValue('position') === 'relative') { fromTop += region.offsetParent.offsetTop; } + console.debug(fromTop); } if (fromTop <= 0) { @@ -167,7 +169,7 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio if (wrapperHeight + fromTop > maxHeight) { fromTop = maxHeight - wrapperHeight; } - + console.debug(fromTop); variablesWrapper.style.setProperty('transform', 'translateY(' + fromTop + 'px)'); } } @@ -188,7 +190,7 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio window.scrollTo(0, top); } - var selectContainer = elBySel('.stylePreviewVariablesContainer:first-child'); + var selectContainer = elBySel('.spSidebarBox:first-child'); var element; select.addEventListener('change', function() { element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container); @@ -235,11 +237,11 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio 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') { -- 2.20.1
Lorem