html[dir="rtl"] #spWindow { margin-left: 40px; }
#spSidebar { flex: 0 0 300px; }
.spBoundary { margin: 0 40px; }
+.spInlineWrapper { display: inline-block; }
/* ### header ### */
#spHeader > .spBoundary { display: flex; flex-wrap: wrap; padding: 30px 0; }
.spVariable, .spDescription { display: block; font-size: 12px; }
.spVariable { font-family: Consolas, Courier, monospace; }
@media (min-width: 769px) {
- .spSidebarBox.pointer { position: relative; }
- .spSidebarBox.pointer::before { border: 10px solid transparent; content: ""; display: block; position: absolute; }
- html[dir="ltr"] .spSidebarBox.pointer::before { border-right-color: rgb(217, 237, 247); left: -20px; }
- html[dir="rtl"] .spSidebarBox.pointer::before { border-left-color: rgb(217, 237, 247); right: -20px; }
+ #spVariablesWrapper { position: sticky; top: 60px; }
+ #spSidebar .button { display: block; }
+ #spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; }
+ #spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; }
}
/* ### style region marker ### */
#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; }
+
+/* ### click on area to select ### */
+#spWindow.spShowRegions { pointer-events: none; z-index: 5; }
+#spWindow.spShowRegions [data-region]:not(#spSubMenu) { position: relative; }
+#spWindow.spShowRegions [data-region]::before {
+ background-color: rgba(242, 222, 222, .9);
+ border: 2px dashed rgb(235, 204, 204);
+ bottom: 0;
+ content: "";
+ cursor: pointer;
+ display: block;
+ left: 0;
+ pointer-events: all;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transition: background-color .12s linear;
+ z-index: 10;
+}
+
+#spWindow.spShowRegions [data-region]:hover::before {
+ background-color: rgba(242, 222, 222, 1);
+}
+
+#spWindow.spShowRegions [data-region]::after {
+ color: rgb(169, 68, 66);
+ content: attr(data-region);
+ font-size: 12px !important;
+ font-weight: 400 !important;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ z-index: 40;
+}
+
+#spWindow.spShowRegions [data-region] [data-region] {
+ z-index: 20;
+}
+
+#spWindow.spShowRegions [data-region] [data-region]::before {
+ z-index: 30;
+}
+
+#spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; }
+#spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; }
<div id="spHeader" data-region="wcfHeader">
<div class="spBoundary">
<div id="spLogo"><img src="{@$__wcf->getPath()}acp/images/woltlabSuite.png"></div>
- <div id="spSearch"><input type="search" id="spSearchBox" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" autocomplete="off" data-region="wcfHeaderSearchBox"></div>
+ <div id="spSearch"><div class="spInlineWrapper" data-region="wcfHeaderSearchBox"><input type="search" id="spSearchBox" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" autocomplete="off"></div></div>
</div>
</div>
<div class="spHeadline">Button</div>
- <ol id="spButton" class="inlineList" data-region="wcfButton">
- <li><a class="button">Button</a></li>
- <li><a class="button active">Button (Active)</a></li>
- <li><a class="button disabled" data-region="wcfButtonDisabled">Button (Disabled)</a></li>
- </ol>
+ <div id="spButton">
+ <div class="spInlineWrapper" data-region="wcfButton">
+ <ol class="inlineList">
+ <li><a class="button">Button</a></li>
+ <li><a class="button active">Button (Active)</a></li>
+ </ol>
+ </div>
+ <div class="spInlineWrapper" data-region="wcfButtonDisabled">
+ <ol class="inlineList">
+ <li><a class="button disabled">Button (Disabled)</a></li>
+ </ol>
+ </div>
+ </div>
- <ol id="spButtonPrimary" class="inlineList" data-region="wcfButtonPrimary">
- <li><a class="button buttonPrimary">Primary Button</a></li>
- <li><a class="button buttonPrimary active">Primary Button (Active)</a></li>
- <li><a class="button disabled">Primary Button (Disabled)</a></li>
- </ol>
+ <div id="spButtonPrimary">
+ <div class="spInlineWrapper" data-region="wcfButtonPrimary">
+ <ol class="inlineList">
+ <li><a class="button buttonPrimary">Primary Button</a></li>
+ <li><a class="button buttonPrimary active">Primary Button (Active)</a></li>
+ <li><a class="button disabled">Primary Button (Disabled)</a></li>
+ </ol>
+ </div>
+ </div>
<div class="spHeadline">Dropdown</div>
</div>
<div id="spSidebar">
<div id="spVariablesWrapper">
+ <div id="spSidebarButtons">
+ <ul>
+ <li><a href="#" class="button jsButtonSelectCategoryByClick">{lang}wcf.acp.style.colors.selectCategoryByClick{/lang}</a></li>
+ <li><a href="#" class="button jsButtonToggleColorPalette">{lang}wcf.acp.style.colors.toggleColorPalette{/lang}</a></li>
+ </ul>
+ </div>
<div class="spSidebarBox">
<select id="spCategories">
<option value="none" selected>{lang}wcf.global.noSelection{/lang}</option>
window.addEventListener('resize', callbackRegionMarker);
EventHandler.add('com.woltlab.wcf.AcpMenu', 'resize', callbackRegionMarker);
EventHandler.add('com.woltlab.wcf.simpleTabMenu_styleTabMenuContainer', 'select', function (data) {
- _isVisible = (data.activeName == 'colors');
+ _isVisible = (data.activeName === 'colors');
callbackRegionMarker();
});
},
if (lastValue === 'none') {
elHide(_stylePreviewRegionMarker);
- updateWrapperPosition(null);
- scrollToRegion(null);
return;
}
elShow(_stylePreviewRegionMarker);
- updateWrapperPosition(region);
- scrollToRegion(top);
- };
-
- var variablesWrapper = elById('spVariablesWrapper');
- function updateWrapperPosition(region) {
- var fromTop = 0;
- if (region !== null) {
- fromTop = (region.offsetTop - variablesWrapper.offsetTop) - 10;
-
- var styles = window.getComputedStyle(region);
- if (styles.getPropertyValue('position') === 'absolute' || styles.getPropertyValue('position') === 'relative') {
- fromTop += region.offsetParent.offsetTop;
- }
- }
-
- if (fromTop <= 0) {
- variablesWrapper.style.removeProperty('transform');
+ top = DomUtil.offset(region).top;
+ // `+ 80` = account for sticky header + selection markers (20px)
+ var firstVisiblePixel = (window.pageYOffset || window.scrollY) + 80;
+ if (firstVisiblePixel > top) {
+ window.scrollTo(0, Math.max(top - 80, 0));
}
else {
- // ensure that the wrapper does not exceed the bottom boundary
- var maxHeight = variablesWrapper.parentNode.clientHeight;
- var wrapperHeight = variablesWrapper.clientHeight;
- if (wrapperHeight + fromTop > maxHeight) {
- fromTop = maxHeight - wrapperHeight;
+ var lastVisiblePixel = window.innerHeight + (window.pageYOffset || window.scrollY);
+ if (lastVisiblePixel < top) {
+ window.scrollTo(0, top);
+ }
+ else {
+ var bottom = top + region.offsetHeight + 20;
+ if (lastVisiblePixel < bottom) {
+ window.scrollBy(0, bottom - top);
+ }
}
-
- variablesWrapper.style.setProperty('transform', 'translateY(' + fromTop + 'px)', '');
- }
- }
-
- var pageHeader = elById('pageHeader');
- function scrollToRegion(top) {
- if (top === null) {
- top = variablesWrapper.offsetTop - 60;
- }
- else {
- // use the region marker as an offset
- top -= 60;
}
-
- // account for sticky header
- top -= 60;
-
- window.scrollTo(0, top);
- }
+ };
- var selectContainer = elBySel('.spSidebarBox:first-child');
var element;
select.addEventListener('change', function() {
element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container);
// set region marker
_updateRegionMarker();
-
- selectContainer.classList[(lastValue === 'none' ? 'remove' : 'add')]('pointer');
});
-
// apply CSS rules
var style = elCreate('style');
style.appendChild(document.createTextNode(''));
}
}
- var elements = elByClass('styleVariableColor', variablesWrapper);
+ var elements = elByClass('styleVariableColor', elById('spVariablesWrapper'));
[].forEach.call(elements, function(colorField) {
var variableName = elData(colorField, 'store').replace(/_value$/, '');
updateCSSRule(variableName, colorField.style.getPropertyValue('background-color'));
});
+
+ // category selection by clicking on the area
+ var buttonToggleColorPalette = elBySel('.jsButtonToggleColorPalette');
+ var buttonSelectCategoryByClick = elBySel('.jsButtonSelectCategoryByClick');
+ var toggleSelectionMode = function() {
+ buttonSelectCategoryByClick.classList.toggle('active');
+ buttonToggleColorPalette.classList.toggle('disabled');
+ _stylePreviewWindow.classList.toggle('spShowRegions');
+ select.disabled = !select.disabled;
+ };
+
+ buttonSelectCategoryByClick.addEventListener(WCF_CLICK_EVENT, function (event) {
+ event.preventDefault();
+
+ toggleSelectionMode();
+ });
+
+ elBySelAll('[data-region]', _stylePreviewWindow, function (region) {
+ region.addEventListener(WCF_CLICK_EVENT, function (event) {
+ if (!_stylePreviewWindow.classList.contains('spShowRegions')) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+
+ toggleSelectionMode();
+
+ select.value = elData(region, 'region');
+ Core.triggerEvent(select, 'change');
+ });
+ });
},
hideVisualEditor: function() {
<item name="wcf.acp.style.colors.primaryBackgroundColor"><![CDATA[Hintergrundfarbe (primär)]]></item>
<item name="wcf.acp.style.colors.primaryBorderColor"><![CDATA[Rahmenfarbe (primär)]]></item>
<item name="wcf.acp.style.colors.primaryColor"><![CDATA[Schriftfarbe (primär)]]></item>
+ <item name="wcf.acp.style.colors.selectCategoryByClick"><![CDATA[Kategorie-Direktauswahl]]></item>
<item name="wcf.acp.style.colors.tabular"><![CDATA[Tabellarische Auflistungen]]></item>
+ <item name="wcf.acp.style.colors.toggleColorPalette"><![CDATA[Ansicht umschalten]]></item>
<item name="wcf.acp.style.colors.userPanel"><![CDATA[Benutzerleiste]]></item>
<item name="wcf.acp.style.copyright"><![CDATA[Copyright]]></item>
<item name="wcf.acp.style.copyStyle"><![CDATA[Stil kopieren]]></item>
<item name="wcf.acp.style.colors.primaryBackgroundColor"><![CDATA[Background Color (primary)]]></item>
<item name="wcf.acp.style.colors.primaryBorderColor"><![CDATA[Border Color (primary)]]></item>
<item name="wcf.acp.style.colors.primaryColor"><![CDATA[Font Color (primary)]]></item>
+ <item name="wcf.acp.style.colors.selectCategoryByClick"><![CDATA[Category Direct Selection]]></item>
<item name="wcf.acp.style.colors.tabular"><![CDATA[Tabular Lists]]></item>
+ <item name="wcf.acp.style.colors.toggleColorPalette"><![CDATA[Toggle View]]></item>
<item name="wcf.acp.style.colors.userPanel"><![CDATA[User Panel]]></item>
<item name="wcf.acp.style.copyright"><![CDATA[Copyright]]></item>
<item name="wcf.acp.style.copyStyle"><![CDATA[Duplicate Style]]></item>
projects / GitHub / WoltLab / WCF.git / commitdiff