Ticket #4847 - Studio: Layout changes. Stage 3.

inc/js/functions.js

@@ -1419,6 +1419,50 @@ function bx_prompt(sMessage, sValue, fOnClickOk, fOnClickCancel, oParams)
     });
 }
 
+function bx_is_color_scheme_dark()
+{
+    return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+};
+
+function bx_set_color_scheme(iCode)
+{
+    switch(iCode) {
+        case 0:
+            localStorage.removeItem('theme');
+            break;
+
+        case 1:
+            localStorage.theme = 'sun'
+            break;
+
+        case 2:
+            localStorage.theme = 'dark'
+            break;
+    }
+
+    //--- Change scheme.
+    bx_set_color_scheme_html();
+
+    //--- Notify global handlers.
+    if(typeof glOnColorSchemeChange === 'undefined' || !(glOnColorSchemeChange instanceof Array)) 
+        return;
+
+    if(typeof iCode === 'undefined' || !iCode)
+        iCode = this.isColorSchemeDark() ? 2 : 1;
+
+    for(var i = 0; i < glOnColorSchemeChange.length; i++)
+        if(typeof glOnColorSchemeChange[i] === 'function')
+            glOnColorSchemeChange[i](iCode);
+};
+
+function bx_set_color_scheme_html()
+{
+    if(bx_is_color_scheme_dark())
+        $('html').addClass('dark')
+    else
+        $('html').removeClass('dark')
+}
+
 /**
  * Check if mobile or desktop device.
  */

install/sql/system.sql

@@ -4944,7 +4944,9 @@ INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `tit
 ('sys_studio_account_popup', 'system', 'site', '_sys_menu_item_title_system_sa_site', '_sys_menu_item_title_sa_site', '{url_root}', '', '', 'ami-site.svg', '', 2147483647, 1, 0, 0, 2),
 ('sys_studio_account_popup', 'system', 'edit', '_sys_menu_item_title_system_sa_edit', '_sys_menu_item_title_sa_edit', 'javascript:void(0)', '{js_object}.clickEdit(this);', '', 'ami-edit.svg', '', 2147483647, 1, 0, 0, 3),
 ('sys_studio_account_popup', 'system', 'language', '_sys_menu_item_title_system_sa_language', '_sys_menu_item_title_sa_language', 'javascript:void(0)', 'bx_menu_popup(''sys_switch_language_popup'', window);', '', 'ami-language.svg', '', 2147483647, 1, 0, 0, 4),
-('sys_studio_account_popup', 'system', 'logout', '_sys_menu_item_title_system_sa_logout', '_sys_menu_item_title_sa_logout', '{url_root}logout.php', '{js_object}.clickLogout(this);', '', 'ami-logout.svg', '', 2147483647, 1, 0, 0, 5);
+('sys_studio_account_popup', 'system', 'scheme_light', '_sys_menu_item_title_system_sa_scheme_light', '_sys_menu_item_title_sa_scheme_light', 'javascript:void(0)', '{js_object}.setColorScheme(this, 1);', '', 'ami-scheme-light.svg', '', 2147483647, 1, 0, 0, 5),
+('sys_studio_account_popup', 'system', 'scheme_dark', '_sys_menu_item_title_system_sa_scheme_dark', '_sys_menu_item_title_sa_scheme_dark', 'javascript:void(0)', '{js_object}.setColorScheme(this, 2);', '', 'ami-scheme-dark.svg', '', 2147483647, 1, 0, 0, 6),
+('sys_studio_account_popup', 'system', 'logout', '_sys_menu_item_title_system_sa_logout', '_sys_menu_item_title_sa_logout', '{url_root}logout.php', '{js_object}.clickLogout(this);', '', 'ami-logout.svg', '', 2147483647, 1, 0, 0, 7);
 -- --------------------------------------------------------
 
 

modules/boonex/english/data/langs/system/en.xml

@@ -3474,6 +3474,10 @@ If it is not enabled then please consider implement this optimization, since it
     <string name="_sys_menu_item_title_sa_edit"><![CDATA[Manage Apps]]></string>
     <string name="_sys_menu_item_title_system_sa_language"><![CDATA[Language]]></string>
     <string name="_sys_menu_item_title_sa_language"><![CDATA[Language]]></string>
+    <string name="_sys_menu_item_title_system_sa_scheme_light"><![CDATA[Light Mode]]></string>
+    <string name="_sys_menu_item_title_sa_scheme_light"><![CDATA[Light Mode]]></string>
+    <string name="_sys_menu_item_title_system_sa_scheme_dark"><![CDATA[Dark Mode]]></string>
+    <string name="_sys_menu_item_title_sa_scheme_dark"><![CDATA[Dark Mode]]></string>
     <string name="_sys_menu_item_title_system_sa_logout"><![CDATA[Sign out]]></string>
     <string name="_sys_menu_item_title_sa_logout"><![CDATA[Sign out]]></string>
     <string name="_sys_menu_item_title_inherited"><![CDATA[Inherited]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -3436,6 +3436,10 @@
     <string name="_sys_menu_item_title_sa_edit"><![CDATA[Управление приложениями]]></string>
     <string name="_sys_menu_item_title_system_sa_language"><![CDATA[Язык]]></string>
     <string name="_sys_menu_item_title_sa_language"><![CDATA[Язык]]></string>
+    <string name="_sys_menu_item_title_system_sa_scheme_light"><![CDATA[Светлый режим]]></string>
+    <string name="_sys_menu_item_title_sa_scheme_light"><![CDATA[Светлый режим]]></string>
+    <string name="_sys_menu_item_title_system_sa_scheme_dark"><![CDATA[Темный режим]]></string>
+    <string name="_sys_menu_item_title_sa_scheme_dark"><![CDATA[Темный режим]]></string>
     <string name="_sys_menu_item_title_system_sa_logout"><![CDATA[Выйти]]></string>
     <string name="_sys_menu_item_title_sa_logout"><![CDATA[Выйти]]></string>
     <string name="_sys_menu_item_title_inherited"><![CDATA[Унаследованный]]></string>

plugins_public/tailwind/css/tailwind.css

@@ -1250,8 +1250,12 @@
         @apply font-inter;
     }
 
+    .bx-std-bg.bx-def-color-bg-page {
+        @apply bg-gray-200 dark:bg-black;
+    }
+
     .bx-std .bx-menu-top-center .bx-menu-tab-active .bx-mi-icon {
-        @apply ring-4 ring-blue-500/50 ring-offset-2 ring-offset-white;
+        @apply ring-4 ring-blue-500/50 ring-offset-2 ring-offset-white dark:ring-offset-black;
     }
     .bx-std .bx-menu-top-center .bx-menu-item-static,
     .bx-std .bx-menu-top-center .bx-menu-item-dynamic {
@@ -1264,7 +1268,42 @@
         @apply rounded-lg;
     }
 
+    .bx-menu-toolbar .bx-menu-tab-item {
+        @apply bg-gray-200 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700;
+        @apply text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300;
+        @apply border border-black/10 dark:border-white/10 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800 hover:ring-offset-2 hover:ring-offset-white dark:hover:ring-offset-black;
+        @apply active:opacity-80 duration-300;
+    }
+    .bx-menu-toolbar .bx-menu-tab-item a {
+        @apply text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300;
+    }
+
+    .bx-std-block.cnt-ttl-bg,
+    .bx-std-block.cnt-bg {
+        @apply bg-white dark:bg-gray-900;
+        @apply rounded-2xl;
+    }
+
+    .bx-std-pmen-item {
+        @apply hover:bg-gray-200 dark:hover:bg-gray-800;
+        @apply hover:font-medium;
+    }
+    .bx-std-pmen-item.bx-menu-tab-active {
+        @apply bg-gray-200 dark:bg-gray-800;
+        @apply font-semibold;
+    }
+    .bx-std-pmen-item a {
+        @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
+    }
+    .bx-std-pmen-item.bx-menu-tab-active a {
+        @apply text-gray-900 dark:text-white;
+    }
+
     /* Studio: Launcher */
+    .bx-std-bg.bx-std-page-launcher {
+        @apply bg-gray-200 dark:bg-black;
+    }
+    
     .bx-std-widgets .bx-std-widget {
         @apply px-6 pt-6 pb-3 sm:px-10 sm:pt-10 sm:pb-4;
     }

studio/js/menu_top.js

@@ -10,8 +10,22 @@ function BxDolStudioMenuTop(oOptions) {
     this.sObjName = oOptions.sObjName == undefined ? 'oBxDolStudioMenuTop' : oOptions.sObjName;
     this.sAnimationEffect = oOptions.sAnimationEffect == undefined ? 'slide' : oOptions.sAnimationEffect;
     this.iAnimationSpeed = oOptions.iAnimationSpeed == undefined ? 'slow' : oOptions.iAnimationSpeed;
+
+    bx_set_color_scheme_html();
+
+    $(document).ready(function() {
+        var bDark = bx_is_color_scheme_dark();
+        $('.scheme.dark').toggle(!bDark);
+        $('.scheme.light').toggle(bDark);
+    });
 }
 
+BxDolStudioMenuTop.prototype.setColorScheme = function(oItem, iCode) {
+    bx_set_color_scheme(iCode);
+    
+    $(oItem).parents('li:first').hide().siblings('.scheme').show();
+};
+
 BxDolStudioMenuTop.prototype.clickEdit = function(oItem) {
     $('.bx-popup-applied:visible').dolPopupHide();
 

studio/template/css/general.css

@@ -11,13 +11,6 @@ div.bx-std-cb {
     font-size: 1px;
 }
 
-/**
- * Page
- */
-.bx-def-color-bg-page.bx-std-bg {
-    background-color: rgba(229, 231, 235, 1.0);
-}
-
 /**
  * Page Content
  */
@@ -68,9 +61,6 @@ div.bx-std-page-columns-cnt {
     width: 100%;
     height: 100%;
 }
-div.bx-std-page-columns-cnt {
-    background-color: rgba(255, 255, 255, 1.0);
-}
 
 /**
  * Dual Column page
@@ -202,22 +192,6 @@ div.bx-std-pmen-item .sys-icon {
     font-size: 1.0rem;
     color: #ffffff;
 }
-div.bx-std-pmen-item:hover,
-div.bx-std-pmen-item.bx-menu-tab-active {
-    background-color: rgba(243, 244, 246, 1);
-}
-div.bx-std-pmen-item:hover {
-    font-weight: 500;
-}
-div.bx-std-pmen-item:hover a {
-    color: rgba(17, 24, 39, 1);
-}
-div.bx-std-pmen-item.bx-menu-tab-active {
-    font-weight: 600;    
-}
-div.bx-std-pmen-item.bx-menu-tab-active a {
-    color: rgba(17, 24, 39, 1);
-}
 
 /*--- Icons ---*/
 img.bx-item-icon,

studio/template/css/launcher.css

@@ -1,10 +1,6 @@
 /**
  * Overwrite
  */
-.bx-std-bg.bx-std-page-launcher {
-    background: rgb(229, 231, 235);
-}
-
 div.bx-std-menu-top-wrp {
     position: fixed;
     top: 0;

studio/template/menu_top.html

@@ -5,7 +5,7 @@ var oBxDolStudioMenuTop = new BxDolStudioMenuTop({
 });
 -->
 </script>
-<div class="bx-std-menu-top-wrp bg-white/90">
+<div class="bx-std-menu-top-wrp bg-white/90 dark:bg-gray-900/90">
     <bx_repeat:menus>
         <div id="bx-std-menu-top bx-std-menu-top-__name__" class="bx-std-menu-top bx-std-menu-top-__name__ bx-def-font-contrasted bx-def-box-sizing">__content__</div>
     </bx_repeat:menus>

studio/template/menu_top_center.html

@@ -3,7 +3,7 @@
         <bx_repeat:menu_items>
             <li id="bx-menu-item-__name__" class="__class__ bx-def-box-sizing __class_add__">
                 <a href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
-                    <div class="bx-mi-icon rounded-lg hover:ring-4 hover:ring-gray-300 hover:ring-offset-2 hover:ring-offset-white active:opacity-80 duration-300">
+                    <div class="bx-mi-icon rounded-lg hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800 hover:ring-offset-2 hover:ring-offset-white dark:hover:ring-offset-black active:opacity-80 duration-300">
                         <div class="block ring-white/5 ring-1 ring-inset rounded-lg">
                             <bx_include_auto:menu_icon.html />
                         </div>

studio/template/menu_top_toolbar.html

@@ -1,7 +1,7 @@
 <ul class="bx-menu-toolbar gap-x-4">
     <bx_if:show_search>
         <li class="bx-menu-tab-search<bx_if:show_active> bx-mt-active</bx_if:show_active> flex-auto">
-            <div class="bg-gray-200 hover:bg-gray-100 text-gray-600 border border-black/10 hover:text-gray-700 hover:ring-4 hover:ring-gray-200 hover:ring-offset-2 hover:ring-offset-white active:opacity-80 duration-300">
+            <div class="bx-menu-tab-item">
                 <a class="text-gray-600 hover:text-gray-700" href="javascript:void(0)" onclick="javascript:$(this).parents('li:first').toggleClass('bx-mt-active')">
                     <svg class="flex-none ml-1.5" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M5 12C5 12.9193 5.18106 13.8295 5.53284 14.6788C5.88463 15.5281 6.40024 16.2997 7.05025 16.9497C7.70026 17.5998 8.47194 18.1154 9.32122 18.4672C10.1705 18.8189 11.0807 19 12 19C12.9193 19 13.8295 18.8189 14.6788 18.4672C15.5281 18.1154 16.2997 17.5998 16.9497 16.9497C17.5998 16.2997 18.1154 15.5281 18.4672 14.6788C18.8189 13.8295 19 12.9193 19 12C19 11.0807 18.8189 10.1705 18.4672 9.32122C18.1154 8.47194 17.5998 7.70026 16.9497 7.05025C16.2997 6.40024 15.5281 5.88463 14.6788 5.53284C13.8295 5.18106 12.9193 5 12 5C11.0807 5 10.1705 5.18106 9.32122 5.53284C8.47194 5.88463 7.70026 6.40024 7.05025 7.05025C6.40024 7.70026 5.88463 8.47194 5.53284 9.32122C5.18106 10.1705 5 11.0807 5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -15,8 +15,8 @@
         </li>
     </bx_if:show_search>
     <bx_repeat:menu_items>
-        <li class="bx-menu-tab-__name__  __class_add__ bg-gray-200 hover:bg-gray-100 border border-black/10 hover:ring-4 hover:ring-gray-200 hover:ring-offset-2 hover:ring-offset-white active:opacity-80 duration-300">
-            <a href="__link__" onclick="__onclick__" class="bg-gray-200 hover:bg-gray-100 text-gray-600" title="__title__"__attrs__><bx_if:icon><i class="sys-icon __icon__ bx-def-round-corners bx-def-font-contrasted"></i></bx_if:icon><bx_if:image><img src="__icon_url__" /></bx_if:image><bx_if:image_inline>__image__</bx_if:image_inline></a>
+        <li class="bx-menu-tab-__name__  __class_add__ bx-menu-tab-item">
+            <a href="__link__" onclick="__onclick__" title="__title__"__attrs__><bx_if:icon><i class="sys-icon __icon__ bx-def-round-corners bx-def-font-contrasted"></i></bx_if:icon><bx_if:image><img src="__icon_url__" /></bx_if:image><bx_if:image_inline>__image__</bx_if:image_inline></a>
         </li>
     </bx_repeat:menu_items>
 </ul>

studio/template/page_content_2_col.html

@@ -1,8 +1,8 @@
 <div class="bx-std-page-columns-cnt bx-std-pc-stretch">
-    <div class="bx-std-page-column bx-std-page-menu bg-white/90">
+    <div class="bx-std-page-column bx-std-page-menu bg-white/90 dark:bg-gray-900/90">
         <div class="bx-std-page-column-cnt px-4 space-y-4">__page_menu_code__</div>
     </div>
-    <div class="bx-std-page-column bx-std-page-content bx-std-pc-stretch bg-gray-200">
+    <div class="bx-std-page-column bx-std-page-content bx-std-pc-stretch">
         <div class="bx-std-page-column-cnt flex flex-col gap-6" id="bx-std-pc-content">__page_main_code__</div>
     </div>
 </div>

studio/template/page_menu.html

@@ -3,8 +3,8 @@
         <div>__title__</div>
         <bx_if:show_actions>
             <div>
-                <a class="bx-std-pcm-actions flex justify-center items-center w-10 h-10 bg-gray-200 hover:bg-gray-100 border border-black/10 rounded-lg text-gray-600" href="javascript:void(0)" onclick="__onclick__" title="<bx_text_attribute:_adm_txt_show_actions />">
-                    <img src="<bx_icon_url:mi-cog.svg />" />
+                <a class="bx-std-pcm-actions flex justify-center items-center w-10 h-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-black/10 dark:border-white/10 rounded-lg text-gray-600 dark:text-gray-400" href="javascript:void(0)" onclick="__onclick__" title="<bx_text_attribute:_adm_txt_show_actions />">
+                    <bx_icon_inline:mi-cog.svg />
                 </a>
             </div>
         </bx_if:show_actions>

studio/template/scripts/BxBaseStudioMenuAccountPopup.php

@@ -20,6 +20,20 @@ class BxBaseStudioMenuAccountPopup extends BxDolStudioMenuAccountPopup
             'url_studio' => BX_DOL_URL_STUDIO
         ));
     }
+    
+    protected function _getMenuItem ($aItem)
+    {
+        $aItem = parent::_getMenuItem($aItem);
+        if($aItem === false)
+            return $aItem;
+        
+        if(!isset($aItem['class_add']))
+            $aItem['class_add'] = '';
+
+        $aItem['class_add'] .= str_replace('_', ' ', $aItem['name']);
+
+        return $aItem;
+    }
 }
 
 /** @} */

studio/template/scripts/BxBaseStudioWidget.php

@@ -202,8 +202,8 @@ class BxBaseStudioWidget extends BxDolStudioWidget
     {
         $aTypeI2S = [
             BX_DB_CONTENT_ONLY => 'cnt',
-            BX_DB_DEF => 'cnt-ttl-bg bg-white rounded-2xl',
-            BX_DB_NO_CAPTION => 'cnt-bg bg-white rounded-2xl'
+            BX_DB_DEF => 'cnt-ttl-bg',
+            BX_DB_NO_CAPTION => 'cnt-bg'
         ];
         $iType = isset($aBlock['type'], $aTypeI2S[$aBlock['type']]) ? $aBlock['type'] : BX_DB_NO_CAPTION;