Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* zin/moduleMenu: optimize moduleMenu style in sidebar.

Browse Source
This commit is contained in:
sunhao
2023-12-08 18:42:26 +08:00
parent fe665faad6
commit fbfb301547
2 changed files with 55 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/zin/wg/modulemenu/css/v1.css
+14 -1
View File
@@ -1,4 +1,17 @@
#moduleMenu {max-height: calc(100vh - 80px); padding-bottom:10px;}
#moduleMenu {max-height: calc(100vh - 80px);}
#moduleMenu .active {color: var(--color-primary-600); font-weight: 500;}
#moduleMenu header a:hover > .icon {color: var(--color-primary-600) !important;}
#moduleMenu .tree-item * {white-space: nowrap;}
.has-module-menu-header #mainMenu {padding-left: 180px;}
.module-menu-header.is-fixed {position: absolute; left: 0; top: -44px; width: 168px; height: 32px; border: 1px solid var(--color-border); justify-content: center; padding: 0 24px; border-right: 0;}
.module-menu-header.is-fixed::before,
.module-menu-header.is-fixed::after {content: ''; position: absolute; top: 0; right: -12px; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent var(--color-border); border-width: 15px 0 15px 12px;}
.module-menu-header.is-fixed::after {right: -11px; border-color: transparent transparent transparent var(--color-canvas);}
.has-module-menu-header.is-sidebar-left-collapsed .module-menu-header.is-fixed {left: var(--gutter-width)}
.module-menu-header.is-fixed .module-title {font-size: var(--font-size-base);}
.module-menu-header.is-fixed > .btn-close {position: absolute; right: 0; font-weight: normal;}
.module-menu-header.is-fixed > .btn-close:not(:hover) {opacity: .5;}
.sidebar.is-collapsed > .module-menu-header.is-fixed {display: flex;}
.has-module-menu-header .sidebar-left {transition-property: width;}
.has-module-menu-header #moduleMenu {max-height: calc(100vh - 106px); }
.has-module-menu-header #moduleMenu > .tree {padding-top: 12px; }
lib/zin/wg/modulemenu/v1.php
+41 -29
View File
@@ -3,6 +3,7 @@ declare(strict_types=1);
namespace zin;
require_once dirname(__DIR__) . DS . 'btn' . DS . 'v1.php';
require_once dirname(__DIR__) . DS . 'sidebar' . DS . 'v1.php';
class moduleMenu extends wg
{
@@ -156,47 +157,58 @@ class moduleMenu extends wg
$activeKey = $this->prop('activeKey');
if(empty($activeKey)) return null;
return a
return btn
(
set('href', $closeLink),
$titleAttrs ? setData($titleAttrs) : null,
icon('close', setStyle('color', 'var(--color-gray-600)'))
setClass('btn-close rounded-full'),
set::icon('close'),
set::url($closeLink),
set::size('sm'),
set::type('ghost'),
$titleAttrs ? setData($titleAttrs) : null
);
}
protected function build(): wg
protected function build(): array
{
global $app;
$this->setMenuTreeProps();
$title = $this->getTitle();
$treeProps = $this->props->pick(array('items', 'activeClass', 'activeIcon', 'activeKey', 'onClickItem', 'defaultNestedShow', 'changeActiveKey', 'isDropdownMenu', 'checkbox', 'checkOnClick', 'onCheck'));
$preserve = $app->getModuleName() . '-' . $app->getMethodName();
$title = $this->getTitle();
$treeProps = $this->props->pick(array('items', 'activeClass', 'activeIcon', 'activeKey', 'onClickItem', 'defaultNestedShow', 'changeActiveKey', 'isDropdownMenu', 'checkbox', 'checkOnClick', 'onCheck'));
$preserve = $app->getModuleName() . '-' . $app->getMethodName();
$isInSidebar = $this->parent instanceof sidebar;
return div
$header = h::header
(
setID('moduleMenu'),
setClass('shadow-sm rounded bg-canvas col rounded-sm'),
h::header
setClass('module-menu-header h-10 flex items-center pl-4 flex-none gap-3', $isInSidebar ? 'is-fixed rounded rounded-r-none canvas' : ''),
span
(
setClass('h-10 flex items-center pl-4 flex-none gap-3'),
span
(
setClass('module-title text-lg font-semibold clip'),
$title
),
$this->buildCloseBtn()
setClass('module-title text-lg font-semibold clip'),
$title
),
zui::tree
(
set::_tag('menu'),
set::_class('col flex-auto scrollbar-hover scrollbar-thin overflow-y-auto overflow-x-hidden px-4'),
set::defaultNestedShow(true),
set::hover(true),
set::preserve($preserve),
set($treeProps)
),
$this->buildActions()
$this->buildCloseBtn()
);
return array
(
$isInSidebar ? $header : null,
div
(
setID('moduleMenu'),
setClass('shadow-sm rounded bg-canvas col rounded-sm'),
$isInSidebar ? null : $header,
zui::tree
(
set::_tag('menu'),
set::_class('tree col flex-auto scrollbar-hover scrollbar-thin overflow-y-auto overflow-x-hidden px-4'),
set::defaultNestedShow(true),
set::hover(true),
set::preserve($preserve),
set($treeProps)
),
$this->buildActions()
),
$isInSidebar ? h::js("$('#mainContainer').addClass('has-module-menu-header')") : null
);
}
}