Support for the user menu styling in the style editor

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index f06877540f4b435c8eff257aae12679033d93b4e..315545123f1af5c3d1643c38c1e1da1a6fcfa15f 100644 (file)
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -66,6 +66,10 @@ html[dir="rtl"] #spTable th { text-align: right; }
 /* ### dropdown ### */
 #spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; }
 
+/* ### user menu ### */
+#spUserMenu { position: relative; margin-bottom: 40px; }
+#spUserMenu a, #spUserMenu a:hover { color: var(--color) !important; }
+
 /* ### 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 */ }

diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index 2e238137afa747bc90fc71e0e414b2dd30ed53b1..9be66896e106aaff611ba5d89cadac6b7a097b93 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -741,6 +741,40 @@
                                                                                        <li><a>Sed diam nonumy</a></li>
                                                                                </ul>
                                                                        </div>
+
+                                                                       <div class="spHeadline">User Menu</div>
+
+                                                                       <div class="userMenu" id="spUserMenu" data-region="wcfUserMenu">
+                                                                               <div class="userMenuHeader">
+                                                                                       <div class="userMenuTitle">Lorem Ipsum</div>
+                                                                                       <div class="userMenuButtons">
+                                                                                               <a class="userMenuButton"><span class="icon icon24 fa-cog"></span></a>
+                                                                                       </div>
+                                                                               </div>
+                                                                               <div class="userMenuContent">
+                                                                                       <div class="userMenuItem" data-is-unread="true">
+                                                                                               <div class="userMenuItemImage">
+                                                                                                       <span class="icon icon48 fa-user"></span>
+                                                                                               </div>
+                                                                                               <div class="userMenuItemContent">
+                                                                                                       <a class="userMenuItemLink">
+                                                                                                               Dolor Sit Amet
+                                                                                                       </a>
+                                                                                               </div>
+                                                                                               <div class="userMenuItemMeta">
+                                                                                                       Consetetur Sadipscing
+                                                                                               </div>
+                                                                                               <div class="userMenuItemUnread">
+                                                                                                       <a class="userMenuItemMarkAsRead">
+                                                                                                               <span class="icon icon24 fa-check"></span>
+                                                                                                       </a>
+                                                                                               </div>
+                                                                                       </div>
+                                                                               </div>
+                                                                               <div class="userMenuFooter">
+                                                                                       <a class="userMenuFooterLink">Sed diam nonumy</a>
+                                                                               </div>
+                                                                       </div>
                                                                        
                                                                        <div class="spHeadline">Status</div>
                                                                        
@@ -874,6 +908,7 @@
                                                        <div class="spSidebarBox" data-category="apiVersion" style="display: none;">
                                                                <p><sup class="spApiVersion">3.1</sup> <small>{lang version='3.1'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
                                                                <p><sup class="spApiVersion">5.2</sup> <small>{lang version='5.2'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
+                                                               <p><sup class="spApiVersion">5.5</sup> <small>{lang version='5.5'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
                                                        </div>
                                                </div>
                                        </div>
@@ -959,6 +994,12 @@
                                'wcfDropdownLink': '#spDropdown li a { color: VALUE; }',
                                'wcfDropdownBackgroundActive': '#spDropdown li.active > a, #spDropdown li a:hover { background-color: VALUE; }',
                                'wcfDropdownLinkActive': '#spDropdown li.active > a, #spDropdown li a:hover { color: VALUE; }',
+                               'wcfUserMenuBackground': '#spUserMenu { --background-color: VALUE; }',
+                               'wcfUserMenuBackgroundActive': '#spUserMenu { --background-color-active: VALUE; }',
+                               'wcfUserMenuBorder': '#spUserMenu { --border-color: VALUE; }',
+                               'wcfUserMenuIndicator': '#spUserMenu { --color-indicator: VALUE; }',
+                               'wcfUserMenuText': '#spUserMenu { --color: VALUE; }',
+                               'wcfUserMenuTextDimmed': '#spUserMenu { --color-dimmed: VALUE; }',
                                'wcfFooterBoxBackground': '#spFooterBox { background-color: VALUE; }',
                                'wcfFooterBoxText': '#spFooterBox { color: VALUE; }',
                                'wcfFooterBoxLink': '#spFooterBox a { color: VALUE; }',
@@ -1006,7 +1047,7 @@
                                'wcfStatusErrorBorder': '#spStatusError { border-color: VALUE; }',
                                'wcfStatusErrorText': '#spStatusError { color: VALUE; }',
                                'wcfStatusErrorLink': '#spStatusError a { color: VALUE; }',
-                               'wcfStatusErrorLinkActive': '#spStatusError a:hover { color: VALUE; }'
+                               'wcfStatusErrorLinkActive': '#spStatusError a:hover { color: VALUE; }',
                        };
                </script>
                

diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
index 73f84ff964b0f303b9597cb1728add3727ac9689..5976def3d6872efe886130d00a8a58612fb7da2c 100644 (file)
--- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
@@ -150,6 +150,14 @@ class StyleAddForm extends AbstractForm
 
         // 5.2
         'wcfEditorTableBorder' => '5.2',
+
+        // 5.5
+        'wcfUserMenuBackground' => '5.5',
+        'wcfUserMenuBackgroundActive' => '5.5',
+        'wcfUserMenuText' => '5.5',
+        'wcfUserMenuDimmedText' => '5.5',
+        'wcfUserMenuIndicator' => '5.5',
+        'wcfUserMenuBorder' => '5.5',
     ];
 
     /**
@@ -233,6 +241,7 @@ class StyleAddForm extends AbstractForm
         '3.0' => '3.0',
         '3.1' => '3.1',
         '5.2' => '5.2, 5.3, 5.4',
+        '5.5' => '5.5',
     ];
 
     /**
@@ -780,6 +789,7 @@ class StyleAddForm extends AbstractForm
             'wcfButton' => ['wcfButton', 'wcfButtonPrimary', 'wcfButtonDisabled'],
             'wcfEditor' => ['wcfEditorButton', 'wcfEditorTable'],
             'wcfDropdown' => 'wcfDropdown',
+            'wcfUserMenu' => 'wcfUserMenu',
             'wcfStatus' => ['wcfStatusInfo', 'wcfStatusSuccess', 'wcfStatusWarning', 'wcfStatusError'],
             'wcfFooterBox' => ['wcfFooterBox', 'wcfFooterBoxHeadline'],
             'wcfFooter' => ['wcfFooter', 'wcfFooterHeadline', 'wcfFooterCopyright'],
@@ -824,6 +834,7 @@ class StyleAddForm extends AbstractForm
             'wcfEditorButton' => ['background', 'backgroundActive', 'text', 'textActive', 'textDisabled'],
             'wcfEditorTable' => ['border'],
             'wcfDropdown' => ['background', 'borderInner', 'text', 'link', 'backgroundActive', 'linkActive'],
+            'wcfUserMenu' => ['background', 'text', 'textDimmed', 'backgroundActive', 'indicator', 'border'],
             'wcfStatusInfo' => ['background', 'border', 'text', 'link', 'linkActive'],
             'wcfStatusSuccess' => ['background', 'border', 'text', 'link', 'linkActive'],
             'wcfStatusWarning' => ['background', 'border', 'text', 'link', 'linkActive'],

diff --git a/wcfsetup/install/files/lib/data/style/Style.class.php b/wcfsetup/install/files/lib/data/style/Style.class.php
index 229000bf590a3ee5b5a3d6fbc2080a70660fb1cb..7449aca53671a105cb435e44f86c1a78ed46a702 100644 (file)
--- a/wcfsetup/install/files/lib/data/style/Style.class.php
+++ b/wcfsetup/install/files/lib/data/style/Style.class.php
@@ -71,9 +71,9 @@ class Style extends DatabaseObject
      * list of supported API versions
      * @var string[]
      */
-    public static $supportedApiVersions = ['3.0', '3.1', '5.2'];
+    public static $supportedApiVersions = ['3.0', '3.1', '5.2', '5.5'];
 
-    const API_VERSION = '5.2';
+    const API_VERSION = '5.5';
 
     const PREVIEW_IMAGE_MAX_HEIGHT = 64;
 

diff --git a/wcfsetup/install/files/style/ui/userMenu.scss b/wcfsetup/install/files/style/ui/userMenu.scss
index 548193a19f4bf4433ab063311b3b47050e0ec9e6..adb6c4d48777edd3852eb0915d5f93520f28c443 100644 (file)
--- a/wcfsetup/install/files/style/ui/userMenu.scss
+++ b/wcfsetup/install/files/style/ui/userMenu.scss
@@ -3,12 +3,13 @@
     --background-color-active: #{$wcfUserMenuBackgroundActive};
     --border-color: #{$wcfUserMenuBorder};
     --color: #{$wcfUserMenuText};
-    --color-dimmed: #{$wcfUserMenuDimmedText};
+    --color-dimmed: #{$wcfUserMenuTextDimmed};
     --color-indicator: #{$wcfUserMenuIndicator};
 
     background-color: var(--background-color);
     border-radius: 5px;
     box-shadow: 0 19px 38px rgb(0 0 0 / 30%), 0 15px 12px rgb(0 0 0 / 22%);
+    color: var(--color);
     pointer-events: all;
     position: absolute;
     width: 400px;
@@ -28,6 +29,10 @@
         }
     }
 
+    .icon {
+        color: inherit;
+    }
+
     /* TODO: This is for the old mobile menu only. */
     @include screen-xs {
         border-radius: 0;

diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index faa9fee08d77005eb359d73789030dc466df32ef..73a2338b702e72529748b732ca4c32326aace361 100644 (file)
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -2504,7 +2504,7 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltip
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserMenuBackground', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserMenuBackgroundActive', 'rgba(239, 239, 239, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserMenuText', 'rgba(58, 58, 61, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserMenuDimmedText', 'rgba(108, 108, 108, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserMenuTextDimmed', 'rgba(108, 108, 108, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserMenuIndicator', 'rgba(49, 138, 220, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserMenuBorder', 'rgb(221, 221, 221, 1)');