Overhauled style editor

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
new file mode 100644 (file)
index 0000000..f46c919
--- /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 a6697f86d6dc5d0bcabc9c663c336f4bb9544ab2..21af4b275799c39d9382135152cc6ed90a11a906 100644 (file)
--- 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}
 
+<link href="{@$__wcf->getPath()}acp/style/acpStyleEditor.css" type="text/css" rel="stylesheet">
+
 {js application='wcf' acp='true' file='WCF.ACP.Style'}
 {js application='wcf' file='WCF.ColorPicker' bundle='WCF.Combined'}
 <script data-relocate="true">
        require(['WoltLab/WCF/Acp/Ui/Style/Editor'], function(AcpUiStyleEditor) {
                AcpUiStyleEditor.setup({
                        isTainted: {if $isTainted}true{else}false{/if},
-                       styleId: {if $action === 'edit'}{@$style->styleID}{else}0{/if}
+                       styleId: {if $action === 'edit'}{@$style->styleID}{else}0{/if},
+                       styleRuleMap: styleRuleMap
                });
        });
        
@@ -301,22 +304,26 @@
                                        <dt><label for="wcfLayoutMinWidth">{lang}wcf.acp.style.globals.fluidLayoutMinWidth{/lang}</label></dt>
                                        <dd>
                                                <input type="number" id="wcfLayoutMinWidth" name="wcfLayoutMinWidth" value="{@$variables[wcfLayoutMinWidth]}" class="tiny" />
-                                               <select name="wcfLayoutMinWidth_unit" class="jsUnitSelect">
-                                                       {foreach from=$availableUnits item=unit}
-                                                               <option value="{@$unit}"{if $variables[wcfLayoutMinWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
-                                                       {/foreach}
-                                               </select>
+                                               <label class="selectDropdown">
+                                                       <select name="wcfLayoutMinWidth_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfLayoutMinWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
                                        </dd>
                                </dl>
                                <dl id="fluidLayoutMaxWidth">
                                        <dt><label for="wcfLayoutMaxWidth">{lang}wcf.acp.style.globals.fluidLayoutMaxWidth{/lang}</label></dt>
                                        <dd>
                                                <input type="number" id="wcfLayoutMaxWidth" name="wcfLayoutMaxWidth" value="{@$variables[wcfLayoutMaxWidth]}" class="tiny" />
-                                               <select name="wcfLayoutMaxWidth_unit" class="jsUnitSelect">
-                                                       {foreach from=$availableUnits item=unit}
-                                                               <option value="{@$unit}"{if $variables[wcfLayoutMaxWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
-                                                       {/foreach}
-                                               </select>
+                                               <label class="selectDropdown">
+                                                       <select name="wcfLayoutMaxWidth_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfLayoutMaxWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
                                        </dd>
                                </dl>
                                
@@ -324,11 +331,13 @@
                                        <dt><label for="wcfLayoutFixedWidth">{lang}wcf.acp.style.globals.fixedLayoutWidth{/lang}</label></dt>
                                        <dd>
                                                <input type="number" id="wcfLayoutFixedWidth" name="wcfLayoutFixedWidth" value="{@$variables[wcfLayoutFixedWidth]}" class="tiny" />
-                                               <select name="wcfLayoutFixedWidth_unit" class="jsUnitSelect">
-                                                       {foreach from=$availableUnits item=unit}
-                                                               <option value="{@$unit}"{if $variables[wcfLayoutFixedWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
-                                                       {/foreach}
-                                               </select>
+                                               <label class="selectDropdown">
+                                                       <select name="wcfLayoutFixedWidth_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfLayoutFixedWidth_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
                                        </dd>
                                </dl>
                                
@@ -368,24 +377,81 @@
                                <legend>{lang}wcf.acp.style.globals.font{/lang}</legend>
                                
                                <dl>
-                                       <dt><label for="wcfBaseFontSize">{lang}wcf.acp.style.globals.fontSize{/lang}</label></dt>
+                                       <dt><label for="wcfFontSizeDefault">{lang}wcf.acp.style.globals.fontSizeDefault{/lang}</label></dt>
+                                       <dd>
+                                               <input type="number" id="wcfFontSizeDefault" name="wcfFontSizeDefault" value="{@$variables[wcfFontSizeDefault]}" class="tiny" />
+                                               <label class="selectDropdown">
+                                                       <select name="wcfFontSizeDefault_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfFontSizeDefault_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
+                                       </dd>
+                               </dl>
+                               <dl>
+                                       <dt><label for="wcfFontSizeSmall">{lang}wcf.acp.style.globals.fontSizeSmall{/lang}</label></dt>
+                                       <dd>
+                                               <input type="number" id="wcfFontSizeSmall" name="wcfFontSizeSmall" value="{@$variables[wcfFontSizeSmall]}" class="tiny" />
+                                               <label class="selectDropdown">
+                                                       <select name="wcfFontSizeSmall_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfFontSizeSmall_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
+                                       </dd>
+                               </dl>
+                               <dl>
+                                       <dt><label for="wcfFontSizeHeadline">{lang}wcf.acp.style.globals.fontSizeHeadline{/lang}</label></dt>
+                                       <dd>
+                                               <input type="number" id="wcfFontSizeHeadline" name="wcfFontSizeHeadline" value="{@$variables[wcfFontSizeHeadline]}" class="tiny" />
+                                               <label class="selectDropdown">
+                                                       <select name="wcfFontSizeHeadline_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfFontSizeHeadline_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
+                                       </dd>
+                               </dl>
+                               <dl>
+                                       <dt><label for="wcfFontSizeTitle">{lang}wcf.acp.style.globals.fontSizeTitle{/lang}</label></dt>
+                                       <dd>
+                                               <input type="number" id="wcfFontSizeTitle" name="wcfFontSizeTitle" value="{@$variables[wcfFontSizeTitle]}" class="tiny" />
+                                               <label class="selectDropdown">
+                                                       <select name="wcfFontSizeTitle_unit" class="jsUnitSelect">
+                                                               {foreach from=$availableUnits item=unit}
+                                                                       <option value="{@$unit}"{if $variables[wcfFontSizeTitle_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
+                                       </dd>
+                               </dl>
+                               
+                               <dl class="marginTop">
+                                       <dt></dt>
+                                       <dd><label>
+                                               <input type="checkbox" id="useGoogleFont" name="useGoogleFont" value="1"{if $variables[useGoogleFont]} checked="checked"{/if} />
+                                               <span>{lang}wcf.acp.style.globals.useGoogleFont{/lang}</span>
+                                       </label></dd>
+                               </dl>
+                               <dl>
+                                       <dt><label for="wcfFontFamilyGoogle">{lang}wcf.acp.style.globals.fontFamilyGoogle{/lang}</label></dt>
                                        <dd>
-                                               <input type="number" id="wcfBaseFontSize" name="wcfBaseFontSize" value="{@$variables[wcfBaseFontSize]}" class="tiny" />
-                                               <select name="wcfBaseFontSize_unit" class="jsUnitSelect">
-                                                       {foreach from=$availableUnits item=unit}
-                                                               <option value="{@$unit}"{if $variables[wcfBaseFontSize_unit] == $unit} selected="selected"{/if}>{@$unit}</option>
-                                                       {/foreach}
-                                               </select>
+                                               <input type="text" id="wcfFontFamilyGoogle" name="wcfFontFamilyGoogle" value="{$variables[wcfFontFamilyGoogle]}" class="medium">
                                        </dd>
                                </dl>
                                <dl>
-                                       <dt><label for="wcfBaseFontFamily">{lang}wcf.acp.style.globals.fontFamily{/lang}</label></dt>
+                                       <dt><label for="wcfFontFamilyFallback">{lang}wcf.acp.style.globals.fontFamilyFallback{/lang}</label></dt>
                                        <dd>
-                                               <select name="wcfBaseFontFamily" id="wcfBaseFontFamily">
-                                                       {foreach from=$availableFontFamilies key=fontFamily item=primaryFont}
-                                                               <option value='{@$fontFamily}'{if $variables[wcfBaseFontFamily] == $fontFamily} selected="selected"{/if}>{@$primaryFont}</option>
-                                                       {/foreach}
-                                               </select>
+                                               <label class="selectDropdown">
+                                                       <select name="wcfFontFamilyFallback" id="wcfFontFamilyFallback">
+                                                               {foreach from=$availableFontFamilies key=fontFamily item=primaryFont}
+                                                                       <option value='{@$fontFamily}'{if $variables[wcfFontFamilyFallback] == $fontFamily} selected="selected"{/if}>{@$primaryFont}</option>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
                                        </dd>
                                </dl>
                                
@@ -397,32 +463,287 @@
                
                {* colors *}
                <div id="colors" class="container containerPadding tabMenuContainer tabMenuContent">
-                       <nav class="menu">
-                               <ul>
-                                       {foreach from=$colors key=itemPrefix item=items}
-                                               {capture assign=_anchorName}colors-{$itemPrefix}{/capture}
-                                               <li data-name="colors-{$itemPrefix}"><a href="{@$__wcf->getAnchor($_anchorName)}">{$itemPrefix}</a> </li>
-                                       {/foreach}
-                               </ul>
-                       </nav>
-                       
-                       {foreach from=$colors key=itemPrefix item=items}
-                               <div id="colors-{$itemPrefix}">
-                                       <h1>{$itemPrefix}</h1>
+                       <div id="spWrapper">
+                               <div id="spWindow">
+                                       <div id="spHeader" data-region="wcfHeader">
+                                               <div class="spBoundary">
+                                                       <div id="spLogo"><img src="{@$__wcf->getPath()}acp/images/wcfLogo.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="spMenu">
+                                                               <ol class="inlineList">
+                                                                       <li><a>Lorem</a></li>
+                                                                       <li><a>Ipsum Dolor</a></li>
+                                                                       <li class="active">
+                                                                               <a>Sit Amet</a>
+                                                                               <ol id="spSubMenu" data-region="wcfHeaderMenu">
+                                                                                       <li><a>Lorem</a></li>
+                                                                                       <li><a>Ipsum</a></li>
+                                                                                       <li class="active"><a>Dolor Sit</a></li>
+                                                                               </ol>
+                                                                       </li>
+                                                               </ol>
+                                                       </div>
+                                                       <div id="spUser"></div>
+                                               </div>
+                                       </div>
+                                       
+                                       <div id="spNavigation" data-region="wcfNavigation">
+                                               <div class="spBoundary">
+                                                       <ol class="inlineList">
+                                                               <li><a>Lorem</a></li>
+                                                               <li><a>Ipsum</a></li>
+                                                       </ol>
+                                               </div>
+                                       </div>
                                        
-                                       {foreach from=$items item=colorItems}
-                                               <ul class="colorList">
-                                                       {foreach from=$colorItems[items] item=colorItem}
-                                                               {capture assign=variableName}{if $colorItems[overridePrefix]|isset}{@$colorItems[overridePrefix]}{else}{@$itemPrefix}{/if}{@$colorItem|ucfirst}{/capture}
+                                       <div id="spContent">
+                                               <div class="spBoundary">
+                                                       <div id="spContentWrapper">
+                                                               <div class="spHeadline" data-region="wcfContentHeadline">Lorem Ipsum</div>
+                                                               
+                                                               <p data-region="wcfContent">
+                                                                       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a>At vero eos</a> et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
+                                                                       <br>
+                                                                       Stet clita kasd gubergren, no sea <a>takimata</a> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <a>invidunt</a> ut labore et dolore magna aliquyam erat, sed diam voluptua.
+                                                               </p>
+                                                               
+                                                               <div class="spHeadline">Tabular Box</div>
+                                                               
+                                                               <table id="spTable">
+                                                                       <thead>
+                                                                               <tr>
+                                                                                       <th><a>Lorem</a></th>
+                                                                                       <th><a>Ipsum</a></th>
+                                                                                       <th><a>Dolor Sit Amet</a></th>
+                                                                               </tr>
+                                                                       </thead>
+                                                                       
+                                                                       <tbody>
+                                                                               <tr>
+                                                                                       <td>Lorem ipsum dolor</td><td>sit amet, consetetur sadipscing elitr</td><td>sed diam nonumy</td>
+                                                                               </tr>
+                                                                               <tr>
+                                                                                       <td>eirmod tempor</td><td>invidunt ut labore et dolore</td><td>magna aliquyam erat</td>
+                                                                               </tr>
+                                                                               <tr>
+                                                                                       <td>sed diam voluptua</td><td>At vero eos</td><td>et accusam et justo</td>
+                                                                               </tr>
+                                                                       </tbody>
+                                                               </table>
+                                                               
+                                                               <div class="spHeadline">Input</div>
+                                                               
+                                                               <dl>
+                                                                       <dt><label for="spInput">Lorem Ipsum</label></dt>
+                                                                       <dd><input type="text" id="spInput" class="long" value="Consetetur sadipscing elitr"></dd>
+                                                               </dl>
+                                                               <dl>
+                                                                       <dt><label for="spInputDisabled">Dolor Sit Amet</label></dt>
+                                                                       <dd><input type="text" id="spInputDisabled" class="long" value="Disabled" disabled></dd>
+                                                               </dl>
+                                                               
+                                                               <div class="spHeadline">Button</div>
                                                                
-                                                               <li>{include file='styleVariableColor' variableName=$variableName languageVariable=$colorItem}</li>
-                                                       {/foreach}
-                                               </ul>
+                                                               <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>
+                                                               
+                                                               <ol id="spButtonPrimary" class="inlineList marginTop" 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 class="spHeadline">Dropdown</div>
+                                                               
+                                                               <div style="position: relative">
+                                                                       <ul class="dropdownMenu" id="spDropdown">
+                                                                               <li><a>Lorem Ipsum</a></li>
+                                                                               <li class="active"><a>Dolor Sit Amet</a></li>
+                                                                               <li><a>Consetetur Sadipscing</a></li>
+                                                                               <li class="dropdownDivider"></li>
+                                                                               <li><a>Sed diam nonumy</a></li>
+                                                                       </ul>
+                                                               </div>
+                                                       </div>
+                                                       
+                                                       <div id="spContentSidebar">
+                                                               <div class="spContentSidebarBox">
+                                                                       <div class="spContentSidebarHeadline">Sidebar</div>
+                                                                       
+                                                                       <p>
+                                                                               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <a>sed diam nonumy eirmod tempor</a> invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam <a>et justo</a> duo dolores et ea rebum.
+                                                                       </p>
+                                                               </div>
+                                                               
+                                                               <div class="spContentSidebarBox">
+                                                                       <div class="spContentSidebarHeadline"><a>Dolor Sit Amet</a></div>
+                                                                       
+                                                                       <p>
+                                                                               <a>Stet clita kasd gubergren</a>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a>labore et dolore magna</a> aliquyam erat, sed diam voluptua.
+                                                                       </p>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                       </div>
+                                       
+                                       <div id="spFooterBox">
+                                               <div class="spBoundary">
+                                                       <div class="spFooterBoxItem">
+                                                               <div class="spFooterBoxHeadline">Lorem Ipsum</div>
+                                                               
+                                                               <p>
+                                                                       Lorem ipsum dolor sit amet, consetetur <a>sadipscing elitr</a>, sed diam nonumy eirmod tempor <a>invidunt ut labore</a> 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.
+                                                               </p>
+                                                       </div>
+                                                       
+                                                       <div class="spFooterBoxItem">
+                                                               <div class="spFooterBoxHeadline"><a>Dolor Sit Amet</a></div>
+                                                               
+                                                               <p>
+                                                                       Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <a>sed diam voluptua</a>.
+                                                               </p>
+                                                       </div>
+                                               </div>
+                                       </div>
+                                       
+                                       <div id="spFooter">
+                                               <div class="spBoundary">
+                                                       Copyright &copy; 1970-2038 <a>Example Company</a>
+                                               </div>
+                                       </div>
+                               </div>
+                               <div id="spSidebar">
+                                       <div class="spSidebarBox">
+                                               <label class="selectDropdown">
+                                                       <select id="spCategories">
+                                                               <option value="none" selected>{lang}wcf.global.noSelection{/lang}</option>
+                                                               {foreach from=$colorCategories key=spName item=spCategory}
+                                                                       <optgroup label="{$spName}">
+                                                                               {if $spCategory|is_array}
+                                                                                       {foreach from=$spCategory item=spChildCategory}
+                                                                                               <option value="{$spChildCategory}">{$spChildCategory}</option>
+                                                                                       {/foreach}
+                                                                               {else}
+                                                                                       <option value="{$spCategory}">{$spCategory}</option>
+                                                                               {/if}
+                                                                       </optgroup>
+                                                               {/foreach}
+                                                       </select>
+                                               </label>
+                                       </div>
+                                       
+                                       <div class="spSidebarBox" data-category="none" style="display: none;">
+                                               foo
+                                       </div>
+                                       
+                                       {foreach from=$colors key=spCategory item=spColors}
+                                               <div class="spSidebarBox" data-category="{$spCategory}" style="display: none;">
+                                                       <ul>
+                                                               {foreach from=$spColors item=spType}
+                                                                       {capture assign=spColor}{$spCategory}{$spType|ucfirst}{/capture}
+                                                                       <li class="box24 spColor">
+                                                                               <div class="spColorBox">
+                                                                                       <span class="styleVariableColor jsColorPicker" style="background-color: {$variables[$spColor]};" data-color="{$variables[$spColor]}" data-store="{$spColor}_value"></span>
+                                                                                       <input type="hidden" id="{$spColor}_value" name="{$spColor}" value="{$variables[$spColor]}" />
+                                                                               </div>
+                                                                               <div>
+                                                                                       <span class="spVariable">${$spColor}</span>
+                                                                                       <span class="spDescription">{$spType}</span>
+                                                                               </div>
+                                                                       </li>
+                                                               {/foreach}
+                                                       </ul>
+                                               </div>
                                        {/foreach}
                                </div>
-                       {/foreach}
+                       </div>
                </div>
                
+               <script>
+                       var styleRuleMap = {
+                               'wcfHeaderBackground': '#spHeader { background-color: VALUE; }',
+                               'wcfHeaderLink': '#spHeader a { color: VALUE; }',
+                               'wcfHeaderLinkActive': '#spHeader a:hover { color: VALUE; }',
+                               'wcfHeaderSearchBoxBackground': '#spSearchBox { background-color: VALUE; }',
+                               'wcfHeaderSearchBoxText': '#spSearchBox { color: VALUE; }',
+                               'wcfHeaderSearchBoxBackgroundActive': '#spSearchBox:focus, #spSearchBox:hover { background-color: VALUE; }',
+                               'wcfHeaderSearchBoxTextActive': '#spSearchBox:focus, #spSearchBox:hover { color: VALUE; }',
+                               'wcfHeaderMenuBackground': '#spSubMenu { background-color: VALUE; }',
+                               'wcfHeaderMenuBorder': '#spSubMenu { border-color: VALUE; }',
+                               'wcfHeaderMenuLink': '#spSubMenu li > a { color: VALUE; }',
+                               'wcfHeaderMenuBackgroundActive': '#spSubMenu li.active > a, #spSubMenu li > a:hover { background-color: VALUE; }',
+                               'wcfHeaderMenuLinkActive': '#spSubMenu li.active > a, #spSubMenu li > a:hover { color: VALUE; }',
+                               'wcfNavigationBackground': '#spNavigation { background-color: VALUE; }',
+                               'wcfNavigationText': '#spNavigation { color: VALUE; }',
+                               'wcfNavigationLink': '#spNavigation a { color: VALUE; }',
+                               'wcfNavigationLinkActive': '#spNavigation a:hover { color: VALUE; }',
+                               'wcfContentBackground': '#spContent { background-color: VALUE; }',
+                               'wcfContentText': '#spContent { color: VALUE; }',
+                               'wcfContentLink': '#spContent a { color: VALUE; }',
+                               'wcfContentLinkActive': '#spContent a:hover { color: VALUE; }',
+                               'wcfContentHeadlineBorder': '.spHeadline { border-color: VALUE; }',
+                               'wcfContentHeadlineText': '.spHeadline { color: VALUE; }',
+                               'wcfContentHeadlineLink': '.spHeadline a { color: VALUE; }',
+                               'wcfContentHeadlineLinkActive': '.spHeadline a:hover { color: VALUE; }',
+                               'wcfTabularBoxBorderInner': '#spTable td { border-color: VALUE; }',
+                               'wcfTabularBoxHeadline': '#spTable { border-color: VALUE; } __COMBO_RULE__ #spTable th, #spTable th a { color: VALUE; }',
+                               'wcfTabularBoxBackgroundActive': '#spTable tr:hover > td { background-color: VALUE; }',
+                               'wcfTabularBoxHeadlineActive': '#spTable th a:hover { color: VALUE; }',
+                               'wcfInputBackground': '#spInput { background-color: VALUE; }',
+                               'wcfInputBorder': '#spInput { border-color: VALUE; }',
+                               'wcfInputText': '#spInput { color: VALUE; }',
+                               'wcfInputBackgroundActive': '#spInput:focus, #spInput:hover { background-color: VALUE; }',
+                               'wcfInputBorderActive': '#spInput:focus, #spInput:hover { border-color: VALUE; }',
+                               'wcfInputTextActive': '#spInput:focus, #spInput:hover { color: VALUE; }',
+                               'wcfInputDisabledBackground': '#spInputDisabled { background-color: VALUE; }',
+                               'wcfInputDisabledBorder': '#spInputDisabled { border-color: VALUE; }',
+                               'wcfInputDisabledText': '#spInputDisabled { color: VALUE; }',
+                               'wcfButtonBackground': '#spButton .button { background-color: VALUE; }',
+                               'wcfButtonBorder': '#spButton .button { border-color: VALUE; }',
+                               'wcfButtonText': '#spButton .button { color: VALUE; }',
+                               'wcfButtonBackgroundActive': '#spButton .button.active, #spButton .button:hover { background-color: VALUE; }',
+                               'wcfButtonBorderActive': '#spButton .button.active, #spButton .button:hover { border-color: VALUE; }',
+                               'wcfButtonTextActive': '#spButton .button.active, #spButton .button:hover { color: VALUE; }',
+                               'wcfButtonPrimaryBackground': '#spButtonPrimary .button { background-color: VALUE; }',
+                               'wcfButtonPrimaryBorder': '#spButtonPrimary .button { border-color: VALUE; }',
+                               'wcfButtonPrimaryText': '#spButtonPrimary .button { color: VALUE; }',
+                               'wcfButtonPrimaryBackgroundActive': '#spButtonPrimary .button.active, #spButtonPrimary .button:hover { background-color: VALUE; }',
+                               'wcfButtonPrimaryBorderActive': '#spButtonPrimary .button.active, #spButtonPrimary .button:hover { border-color: VALUE; }',
+                               'wcfButtonPrimaryTextActive': '#spButtonPrimary .button.active, #spButtonPrimary .button:hover { color: VALUE; }',
+                               'wcfButtonDisabledBackground': '#spButton .button.disabled, #spButtonPrimary .button.disabled { background-color: VALUE; }',
+                               'wcfButtonDisabledBorder': '#spButton .button.disabled, #spButtonPrimary .button.disabled { border-color: VALUE; }',
+                               'wcfButtonDisabledText': '#spButton .button.disabled, #spButtonPrimary .button.disabled { color: VALUE; }',
+                               'wcfDropdownBackground': '#spDropdown { background-color: VALUE; }',
+                               'wcfDropdownBorder': '#spDropdown { border-color: VALUE; }',
+                               'wcfDropdownBorderInner': '#spDropdown .dropdownDivider { border-color: VALUE; }',
+                               'wcfDropdownText': '#spDropdown { color: VALUE; }',
+                               'wcfDropdownLink': '#spDropdown a { color: VALUE; }',
+                               'wcfDropdownBackgroundActive': '#spDropdown li.active > a, #spDropdown a:hover { background-color: VALUE; }',
+                               'wcfDropdownLinkActive': '#spDropdown li.active > a, #spDropdown a:hover { color: VALUE; }',
+                               'wcfFooterBoxBackground': '#spFooterBox { background-color: VALUE; }',
+                               'wcfFooterBoxText': '#spFooterBox { color: VALUE; }',
+                               'wcfFooterBoxLink': '#spFooterBox a { color: VALUE; }',
+                               'wcfFooterBoxLinkActive': '#spFooterBox a:hover { color: VALUE; }',
+                               'wcfFooterBoxHeadlineText': '#spFooterBox .spFooterBoxHeadline { color: VALUE; }',
+                               'wcfFooterBoxHeadlineLink': '#spFooterBox .spFooterBoxHeadline a { color: VALUE; }',
+                               'wcfFooterBoxHeadlineLinkActive': '#spFooterBox .spFooterBoxHeadline a:hover { color: VALUE; }',
+                               'wcfFooterBackground': '#spFooter { background-color: VALUE; }',
+                               'wcfFooterText': '#spFooter { color: VALUE; }',
+                               'wcfFooterLink': '#spFooter a { color: VALUE; }',
+                               'wcfFooterLinkActive': '#spFooter a:active { color: VALUE; }',
+                               'wcfSidebarBackground': '#spContentSidebar .spContentSidebarBox { background-color: VALUE; }',
+                               'wcfSidebarText': '#spContentSidebar .spContentSidebarBox { color: VALUE; }',
+                               'wcfSidebarLink': '#spContentSidebar .spContentSidebarBox a { color: VALUE; }',
+                               'wcfSidebarLinkActive': '#spContentSidebar .spContentSidebarBox a:hover { color: VALUE; }',
+                               'wcfSidebarHeadlineText': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline { color: VALUE; }',
+                               'wcfSidebarHeadlineLink': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline a { color: VALUE; }',
+                               'wcfSidebarHeadlineLinkActive': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline a:hover { color: VALUE; }',
+                       };
+               </script>
+               
                {* advanced *}
                <div id="advanced" class="container containerPadding tabMenuContainer tabMenuContent">
                        {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 d65e8cdc9e15dcb881704b5c60a16b747ba925a1..6f8ee6d332facc7d081b3f53094ec20a60d15324 100644 (file)
--- 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 a8ede9f9fc49be2964b5cc8eb11bb6ac4dbab30c..8960e08d71cbdd43fcb91f554f21ca45371f660d 100644 (file)
--- 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 cc66ec1b9b6cbd4bbc1509002cb26e2356cce8fd..9301f27222d7156a5cf0e1d8a82285659686d2e0 100644 (file)
--- 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 279f4bba4085776175e0f7cc1b0f26ea3feabd49..689878392aa006b58b5aa0847709f2982d3acf31 100644 (file)
--- 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 94bf2e6ecd5e251d24938bd8cc30a989ca8005bb..7ef1e643e539f49b2a6369e0e0e0c47239e93e0d 100644 (file)
--- 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 a3613e1495e02e515e9855f77843fe72d597f244..57c2a052fa0542f7fd38c41cfb401606b52124a9 100644 (file)
--- 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 8c8e8ffa86a3be1e3e8fc6e02fa44cb07f554554..a768d74fd8eadeb39bbb2e8c7657d24473763658 100644 (file)
--- 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;