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

unacms · Dec 12, 2024 · 27f65e2 · 27f65e2
1 parent fc433f9
commit 27f65e2
Show file tree

Hide file tree

Showing 32 changed files with 213 additions and 317 deletions.
diff --git a/inc/js/functions.js b/inc/js/functions.js
@@ -1422,7 +1422,12 @@ 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_get_color_scheme()
+{
+    return 'theme' in localStorage ? localStorage.theme : 'auto';    
+}
 
 function bx_set_color_scheme(iCode)
 {
@@ -1453,7 +1458,7 @@ function bx_set_color_scheme(iCode)
     for(var i = 0; i < glOnColorSchemeChange.length; i++)
         if(typeof glOnColorSchemeChange[i] === 'function')
             glOnColorSchemeChange[i](iCode);
-};
+}
 
 function bx_set_color_scheme_html()
 {

diff --git a/install/sql/system.sql b/install/sql/system.sql
@@ -4944,9 +4944,7 @@ 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', '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);
+('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);
 -- --------------------------------------------------------
 
 

diff --git a/modules/boonex/developer/template/css/main.css b/modules/boonex/developer/template/css/main.css
@@ -6,9 +6,6 @@ body.bx-dev-page-body-single div.bx-std-page-menu,
 body.bx-dev-page-body-columns div.bx-std-page-menu {
     -webkit-flex-basis: 67px;
     flex-basis: 67px;
-
-    background-color: #4c6678;
-    box-shadow: inset -1px 0px 0px rgba(240, 240, 240, 0.2);
 }
 body.bx-dev-page-body-single div.bx-std-page-menu div.bx-std-page-column-cnt,
 body.bx-dev-page-body-columns div.bx-std-page-menu div.bx-std-page-column-cnt {
@@ -65,17 +62,17 @@ div.bx-dev-menu-main li.bx-def-color-bg-active {
     opacity:1;
     -moz-box-shadow: 0 0 9px 0px #ffffff;
     -webkit-box-shadow: 0 0 9px 0px #ffffff;
-	box-shadow: 0 0 9px 0px #ffffff;
+    box-shadow: 0 0 9px 0px #ffffff;
 }
 
 div.bx-dev-menu-main div.bx-dev-mm-item {
-	position: relative;
-	width: 32px;
-	height: 32px;
+    position: relative;
+    width: 32px;
+    height: 32px;
 } 
 
 div.bx-dev-menu-main div.bx-dev-mm-item img {
-	width: 32px;
+    width: 32px;
     height: 32px;
 }
 
@@ -113,7 +110,6 @@ div.bx-dev-page-column.bx-dev-page-menu {
     -webkit-flex: 0 0 20rem;
     flex: 0 0 20rem;
     width: 20rem;
-    background-color: #ffffff;
 
     overflow-y: auto;
 }
@@ -134,8 +130,6 @@ div.bx-dev-page-column.bx-dev-page-content {
 
     height: 100%;
 
-    background: #e5e5e5;
-
     overflow-x: hidden;
     overflow-y: auto;
 }

diff --git a/modules/boonex/developer/template/page_content.html b/modules/boonex/developer/template/page_content.html
@@ -1,5 +1,5 @@
 <div class="bx-dev-page-columns-cnt">
-    <div class="bx-dev-page-column bx-dev-page-menu border-r">
+    <div class="bx-dev-page-column bx-dev-page-menu">
         <div class="bx-dev-page-column-cnt p-4" id="bx-dev-pc-menu">__page_menu_code__</div>
     </div>
     <div class="bx-dev-page-column bx-dev-page-content">

diff --git a/modules/boonex/english/data/langs/system/en.xml b/modules/boonex/english/data/langs/system/en.xml
@@ -1916,6 +1916,7 @@
         <string name="_adm_tmi_cpt_assistant"><![CDATA[Assistant]]></string>
 	<string name="_adm_tmi_cpt_site"><![CDATA[Go To Site]]></string>
         <string name="_adm_tmi_cpt_search"><![CDATA[Search...]]></string>
+        <string name="_adm_tmi_cpt_scheme"><![CDATA[Color Scheme]]></string>
 	<string name="_adm_tmi_cpt_tour"><![CDATA[Tour]]></string>
 	<string name="_adm_tmi_cpt_launcher"><![CDATA[Launcher]]></string>
         <string name="_adm_txt_active_api"><![CDATA[Available in App]]></string>
@@ -3475,9 +3476,8 @@ 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_auto"><![CDATA[System]]></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>

diff --git a/modules/boonex/russian/data/langs/system/ru.xml b/modules/boonex/russian/data/langs/system/ru.xml
@@ -1892,6 +1892,7 @@
         <string name="_adm_tmi_cpt_assistant"><![CDATA[Ассистент]]></string>
 	<string name="_adm_tmi_cpt_site"><![CDATA[Перейти на сайт]]></string>
         <string name="_adm_tmi_cpt_search"><![CDATA[Искать...]]></string>
+        <string name="_adm_tmi_cpt_scheme"><![CDATA[Цветовая схема]]></string>
 	<string name="_adm_tmi_cpt_tour"><![CDATA[Инструкции]]></string>
 	<string name="_adm_tmi_cpt_launcher"><![CDATA[Загрузчик]]></string>
         <string name="_adm_txt_active_api"><![CDATA[Доступно в приложении]]></string>
@@ -3437,9 +3438,8 @@
     <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_auto"><![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>

diff --git a/plugins_public/tailwind/css/tailwind.css b/plugins_public/tailwind/css/tailwind.css
@@ -71,6 +71,9 @@
 
 
     /* Color Palette */
+    .bx-std .bx-def-color-bg-hl,
+    .bx-std .bx-def-color-bg-hl-even:nth-child(even),
+    .bx-std .bx-def-color-bg-hl-hover:hover,
     .bx-artificer .bx-def-color-bg-hl,
     .bx-artificer .bx-def-color-bg-hl-even:nth-child(even),
     .bx-artificer .bx-def-color-bg-hl-hover:hover {
@@ -631,6 +634,7 @@
     }
 
     /* Common Elements: HR */
+    .bx-std .bx-def-hr,
     .bx-artificer .bx-def-hr {
         @apply mx-0 p-0 border-t border-gray-200 dark:border-gray-700;
     }
@@ -750,6 +754,7 @@
     }
 
     /* Common elements: Forms */
+    .bx-std form,
     .bx-artificer form {
         @apply text-sm font-normal text-gray-700 dark:text-gray-300;
     }
@@ -790,6 +795,18 @@
     }
 
     /* Common elements: Forms: Text Input */
+    .bx-std .bx-form-input-slider,
+    .bx-std .bx-form-input-doublerange,
+    .bx-std .bx-form-input-select_multiple,
+    .bx-std .bx-form-input-select,
+    .bx-std .bx-form-input-number,
+    .bx-std .bx-form-input-time,
+    .bx-std .bx-form-input-datepicker,
+    .bx-std .bx-form-input-datetime,
+    .bx-std .bx-form-input-textarea:not(.bx-form-input-html),
+    .bx-std .bx-form-input-text,
+    .bx-std .bx-form-input-price,
+    .bx-std .bx-form-input-wrapper-price span,
     .bx-artificer .bx-form-input-slider,
     .bx-artificer .bx-form-input-doublerange,
     .bx-artificer .bx-form-input-select_multiple,
@@ -811,6 +828,7 @@
     }
 
     /* Common elements: Forms: Password Input */
+    .bx-std .bx-form-input-wrapper-password,
     .bx-artificer .bx-form-input-wrapper-password {
         @apply relative block w-full pl-3 pr-8;
         @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
@@ -821,6 +839,8 @@
     }
 
     /* Common elements: Forms: Checkbox/Radio Set Input */
+    .bx-std .bx-form-input-wrapper-checkbox_set,
+    .bx-std .bx-form-input-wrapper-radio_set,
     .bx-artificer .bx-form-input-wrapper-checkbox_set,
     .bx-artificer .bx-form-input-wrapper-radio_set {
         @apply relative block w-full py-2 px-3;
@@ -972,7 +992,14 @@
     .bx-stl-mil-wo-bg,
     .bx-stl-mil-wo-bg-gaps,
     .bx-stl-mil-wo-gaps,
-    .bx-stl-mil-wo-gaps-sm {
+    .bx-stl-mil-wo-gaps-sm,
+    .bx-std .bx-stl-mil,
+    .bx-std .bx-stl-mil-sm,
+    .bx-std .bx-stl-mil-wo-bg,
+    .bx-std .bx-stl-mil-wo-bg-gaps,
+    .bx-std .bx-stl-mil-wo-gaps,
+    .bx-std .bx-stl-mil-wo-gaps a,
+    .bx-std .bx-stl-mil-wo-gaps-sm {
         @apply flex items-center;
         @apply text-base text-gray-600 dark:text-gray-400 font-medium;
         @apply bx-stl-mil-hover-text;
@@ -1053,6 +1080,7 @@
     }
 
     .bx-stl-mii > *,
+    .bx-std .bx-stl-mii > *,
     .bx-stl-mii-sm > *,
     .bx-stl-mil .sys-action-do-icon > *,
     .bx-stl-mil-sm .sys-action-do-icon > *,
@@ -1284,6 +1312,12 @@
         @apply rounded-2xl;
     }
 
+    #bx-std-pcap-menu-popup-account .bx-popup li a,
+    #bx-std-pcap-menu-popup-account .bx-popup li .sys-icon,
+    #bx-std-pcap-menu-popup-scheme .bx-popup li a {
+        @apply text-gray-800 dark:text-gray-200 hover:text-black dark:hover:text-white;
+    }
+
     .bx-std-pmen-item {
         @apply hover:bg-gray-200 dark:hover:bg-gray-800;
         @apply hover:font-medium;
@@ -1303,16 +1337,44 @@
         @apply text-gray-800 dark:text-gray-200;
     }
 
+    .bx-std .bx-popup-color-bg {
+        @apply bg-white dark:bg-gray-900 shadow;
+    }
+    .bx-std .bx-popup-border {
+        @apply m-px ring-1 ring-gray-300 dark:ring-gray-700 rounded-2xl;
+    }
+    .bx-std .bx-popup-header h2 {
+        @apply text-gray-800 dark:text-gray-100;
+    }
+    .bx-std .bx-popup-header .bx-icon-close {
+        @apply text-gray-900 dark:text-white;
+    }
+
+    .bx-std .bx-btn {
+        @apply inline-flex items-center;
+        @apply h-10;
+    }
+
     .bx-std .bx-btn:not(.bx-btn-primary) {
-        @apply bg-gray-200 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-700 active:bg-gray-100 dark:active:bg-gray-800;
-        @apply border-black/10 dark:border-white/10;
-        @apply text-gray-800 dark:text-gray-200;
+        @apply bg-gray-200 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-700 active:bg-gray-200/80 dark:active:bg-gray-800/50;
+        @apply border-gray-300 dark:border-0;
+        @apply text-sm font-medium leading-10;
     }
+    .bx-std .bx-btn:not(.bx-btn-primary),
+    .bx-std .bx-btn:not(.bx-btn-primary) .sys-icon:not(.sys-colored) {
+        @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 active:text-gray-900 dark:active:text-gray-50;
+    }
+
     .bx-std .bx-btn.bx-btn-primary {
-        @apply bg-black/80 dark:bg-white/80 hover:bg-black/90 dark:hover:bg-white/90;
-        @apply border-white/20 dark:border-white/20;
-        @apply text-white/80 dark:text-black/40;
+        @apply bg-black/80 dark:bg-white hover:bg-black dark:hover:bg-white/80 active:bg-black/80 dark:active:bg-white/80;
+        @apply border-0 border-white/20 dark:border-white/20;
+        @apply text-white dark:text-black text-sm font-medium leading-10;
+        @apply active:opacity-50;
     }
+    .bx-std .bx-btn.bx-btn-primary .sys-icon:not(.sys-colored) {
+        @apply text-black dark:text-white;
+    }
+
 
     /* Studio: Launcher */
     .bx-std-bg.bx-std-page-launcher {

diff --git a/plugins_public/tailwind/css/tailwind.min.css b/plugins_public/tailwind/css/tailwind.min.css
diff --git a/studio/js/menu_top.js b/studio/js/menu_top.js
@@ -14,16 +14,15 @@ function BxDolStudioMenuTop(oOptions) {
     bx_set_color_scheme_html();
 
     $(document).ready(function() {
-        var bDark = bx_is_color_scheme_dark();
-        $('.scheme.dark').toggle(!bDark);
-        $('.scheme.light').toggle(bDark);
+        $('.scheme-' + bx_get_color_scheme()).addClass('bx-menu-tab-active');
     });
 }
 
 BxDolStudioMenuTop.prototype.setColorScheme = function(oItem, iCode) {
     bx_set_color_scheme(iCode);
 
-    $(oItem).parents('li:first').hide().siblings('.scheme').show();
+    var sClassActive = 'bx-menu-tab-active';
+    $(oItem).parents('li:first').addClass(sClassActive).siblings('.' + sClassActive).removeClass(sClassActive);
 };
 
 BxDolStudioMenuTop.prototype.clickEdit = function(oItem) {

diff --git a/studio/template/block_caption.html b/studio/template/block_caption.html
@@ -1,4 +1,4 @@
-<div class="bx-std-block-caption border-b border-b-zinc-200">
+<div class="bx-std-block-caption">
     <div class="bx-std-bcap-text">__caption__</div>
     <bx_if:show_actions>
         <div class="bx-std-bcap-actions">

diff --git a/studio/template/bp_add_block.html b/studio/template/bp_add_block.html
@@ -1,4 +1,4 @@
-<div class="adm-bp-__action__-block-form bx-def-margin-top-neg">
+<div class="adm-bp-__action__-block-form">
     <div class="adm-bp-__action__-block-form-cnt">
         __form__
         <script language="javascript">

diff --git a/studio/template/bp_add_block_form.html b/studio/template/bp_add_block_form.html
@@ -1,17 +1,13 @@
-<div class="adm-bp-cbf-left bx-def-border-color-layout">
-    <div class="adm-bp-cbf-left-cnt pt-4 px-2">
-        __menu__
-    </div>
+<div class="adm-bp-cbf-left">
+    <div class="adm-bp-cbf-left-cnt px-5">__menu__</div>
 </div>
-<div class="adm-bp-cbf-right bx-def-border-color-layout">
-    <div class="adm-bp-cbf-right-cnt bx-def-padding">
+<div class="adm-bp-cbf-right">
+    <div class="adm-bp-cbf-right-cnt px-5 py-0.5">
         <div id="__html_block_lists_id__" class="adm-bp-cbf-right-cnt">__blocks__</div>
     </div>
 </div>
-<div class="bx-std-cb"></div>
-<div class="adm-bp-cbf-controls bx-def-padding-top bx-def-padding-leftright bx-def-border-color-layout">
+<div class="adm-bp-cbf-controls bx-def-padding-top px-5">
     <button class="bx-btn bx-btn-primary" name="do_submit" value="<bx_text:_adm_bp_btn_block_add />" type="submit"><bx_text:_adm_bp_btn_block_add /></button>
     <button class="bx-btn bx-def-margin-sec-left" name="do_cancel" value="<bx_text:_adm_bp_btn_block_cancel />" type="button" onclick="$('.bx-popup-applied:visible').dolPopupHide()"><bx_text:_adm_bp_btn_block_cancel /></button>
     <div class="adm-bp-cbf-counter bx-def-font-h3"><span id="adm-bp-cbf-counter">0</span> <bx_text:_adm_bp_txt_block_selected /></div>
-    <div class="bx-std-cb"></div>
 </div>
diff --git a/studio/template/bp_add_page.html b/studio/template/bp_add_page.html
@@ -1,4 +1,4 @@
-<div class="adm-bp-add-form bx-def-margin-top-neg">
+<div class="adm-bp-add-form">
     <div class="adm-bp-add-form-cnt">
         __form__
         <script language="javascript">

diff --git a/studio/template/bp_blocks.html b/studio/template/bp_blocks.html
@@ -1,5 +1,5 @@
 <bx_repeat:blocks>
-    <div id="__html_id__" class="adm-bp-block<bx_if:is_inactive> adm-bpb-inactive</bx_if:is_inactive> bx-def-border">
+    <div id="__html_id__" class="adm-bp-block<bx_if:is_inactive> adm-bpb-inactive</bx_if:is_inactive> bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-2xl">
         <div class="adm-bpb-content">
             <div class="adm-bpb-icon<bx_if:show_drag_handle> adm-bpb-drag-handle</bx_if:show_drag_handle>">
             	<bx_if:icon>
@@ -11,7 +11,7 @@
             <div class="adm-bpb-info">
                 <div class="adm-bpb-title text-gray-900">
                     <bx_if:show_link>
-                        <a class="text-gray-900 hover:text-gray-700" href="javascript:void(0)" onclick="javascript:__onclick__">__title__</a>
+                        <a class="text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100" href="javascript:void(0)" onclick="javascript:__onclick__">__title__</a>
                     </bx_if:show_link>
                     <bx_if:show_text>__title__</bx_if:show_text>
                     <bx_if:show_api>

diff --git a/studio/template/bp_cell.html b/studio/template/bp_cell.html
@@ -1,4 +1,4 @@
-<div class="adm-bp-cell border border-dashed border-gray-300 bg-gray-100 rounded-lg">
+<div class="adm-bp-cell bg-white dark:bg-gray-900 border border-dashed border-black/20 dark:border-white/20 rounded-lg">
     <div id="adm-bpc-__id__" class="adm-bp-cell-cnt flex flex-col gap-2">
         <bx_include_auto:bp_blocks.html />
     </div>

diff --git a/studio/template/bp_edit_page.html b/studio/template/bp_edit_page.html
@@ -1,4 +1,4 @@
-<div class="adm-bp-edit-form bx-def-margin-top-neg">
+<div class="adm-bp-edit-form">
     <div class="adm-bp-edit-form-cnt">
         __form__
         <script language="javascript">

diff --git a/studio/template/bp_edit_page_form.html b/studio/template/bp_edit_page_form.html
@@ -1,18 +1,14 @@
-<div class="adm-bp-epf-left bx-def-border-color-layout">
-    <div class="adm-bp-epf-left-cnt pt-4 px-2">
-        __menu__
-    </div>
+<div class="adm-bp-epf-left">
+    <div class="adm-bp-epf-left-cnt px-5">__menu__</div>
 </div>
-<div class="adm-bp-epf-right bx-def-border-color-layout">
-    <div id="__html_settings_groups_id__" class="adm-bp-epf-right-cnt bx-def-padding">
+<div class="adm-bp-epf-right">
+    <div id="__html_settings_groups_id__" class="adm-bp-epf-right-cnt px-5 py-0.5">
         <bx_repeat:settings_groups>
             <div id="__html_settings_group_id__" class="adm-bp-settings" style="<bx_if:hidden>display: none;</bx_if:hidden>">__content__</div>
         </bx_repeat:settings_groups>
     </div>
 </div>
-<div class="bx-std-cb"></div>
-<div class="adm-bp-epf-controls bx-def-padding-top bx-def-padding-leftright bx-def-border-color-layout">
+<div class="adm-bp-epf-controls bx-def-padding-top px-5">
     <button class="bx-btn bx-btn-primary" name="do_submit" value="__submit__" type="submit">__submit__</button>
     <button class="bx-btn bx-def-margin-sec-left" name="do_cancel" value="<bx_text:_adm_bp_btn_page_cancel />" type="button" onclick="__js_object__.onCloseSettings()"><bx_text:_adm_bp_btn_page_cancel /></button>
-    <div class="bx-std-cb"></div>
 </div>