* modulemenu: refactor.
This commit is contained in:
@@ -1,13 +1,3 @@
|
||||
.module-menu {max-height: calc(100vh - 105px); display: flex; flex-direction: column; border-radius: 2px;}
|
||||
.module-menu > header {height: 40px; display: flex; align-items: center; padding-left: 12px; flex: none;}
|
||||
.module-menu .module-title {font-size: 13; line-height: 20px; font-weight: bold;}
|
||||
.module-menu > header span {margin-right: 12px;}
|
||||
.module-menu > header i {padding: 2px;}
|
||||
.module-menu > main {display: flex; flex: 1 1 auto; overflow-y: auto; flex-direction: column;}
|
||||
.module-menu > main > .menu {border: none; box-shadow: none; flex: 1 1 auto; overflow-y: auto;}
|
||||
.module-menu .menu-item > a:hover {background: #EFF5FF; color: #313C52;}
|
||||
.module-menu,
|
||||
.module-menu .has-nested-menu > .menu.menu-nested {background-color: #fff;}
|
||||
.module-menu .menu {padding: 0;}
|
||||
.module-menu .menu-item.active {color: #2e7fff;}
|
||||
.setting-btns {display: flex; flex-direction: column; padding: 10px 30px; gap: 8px;}
|
||||
.module-menu {max-height: calc(100vh - 105px);}
|
||||
.module-menu .active {color: var(--color-primary-600); font-weight: 500;}
|
||||
.module-menu header a:hover > .icon {color: var(--color-primary-600) !important;}
|
||||
|
||||
@@ -8,12 +8,12 @@ class moduleMenu extends wg
|
||||
|
||||
protected static $defineProps = array(
|
||||
'modules: array',
|
||||
'activeKey: int',
|
||||
'settingLink: string',
|
||||
'activeKey?: int',
|
||||
'settingLink?: string',
|
||||
'closeLink: string',
|
||||
'activeText: string=""',
|
||||
'branchType: string=""',
|
||||
'showDisplay: bool=true'
|
||||
'branchType?: string=""',
|
||||
'showDisplay?: bool=true',
|
||||
'allText?: string'
|
||||
);
|
||||
|
||||
public static function getPageCSS(): string|false
|
||||
@@ -26,9 +26,17 @@ class moduleMenu extends wg
|
||||
$children = $this->getChildModule($parentID);
|
||||
if(count($children) === 0) return [];
|
||||
|
||||
$activeKey = $this->prop('activeKey');
|
||||
|
||||
foreach($children as $child)
|
||||
{
|
||||
$item = array('key' => $child->id, 'text' => $child->name, 'url' => $child->url, 'items' => []);
|
||||
$item = array(
|
||||
'key' => $child->id,
|
||||
'text' => $child->name,
|
||||
'url' => $child->url,
|
||||
'items' => array(),
|
||||
'active' => $child->id == $activeKey,
|
||||
);
|
||||
$items = $this->buildMenuTree($item['items'], $child->id);
|
||||
if(count($items) !== 0) $item['items'] = $items;
|
||||
else unset($item['items']);
|
||||
@@ -45,18 +53,27 @@ class moduleMenu extends wg
|
||||
private function setMenuTreeProps(): void
|
||||
{
|
||||
$this->modules = $this->prop('modules');
|
||||
$this->setProp('items', $this->buildMenuTree([], 0));
|
||||
$this->setDefaultProps(array('activeClass' => 'active'));
|
||||
$this->setProp('items', $this->buildMenuTree(array(), 0));
|
||||
}
|
||||
|
||||
private function getTitle($activeKey): string
|
||||
private function getTitle(): string
|
||||
{
|
||||
global $lang;
|
||||
$activeKey = $this->prop('activeKey');
|
||||
|
||||
if(empty($activeKey))
|
||||
{
|
||||
$allText = $this->prop('allText');
|
||||
if(empty($allText)) return $lang->all;
|
||||
return $allText;
|
||||
}
|
||||
|
||||
foreach($this->modules as $module)
|
||||
{
|
||||
if($module->id == $activeKey) return $module->name;
|
||||
}
|
||||
|
||||
return $this->prop('activeText');
|
||||
return '';
|
||||
}
|
||||
|
||||
private function buildBtns()
|
||||
@@ -75,58 +92,65 @@ class moduleMenu extends wg
|
||||
|
||||
return div
|
||||
(
|
||||
setClass('setting-btns'),
|
||||
$settingLink ? a
|
||||
(
|
||||
setClass('btn'),
|
||||
setStyle('background', '#EEF5FF'),
|
||||
setStyle('box-shadow', 'none'),
|
||||
set::href($settingLink),
|
||||
$lang->moduleSetting
|
||||
) : null,
|
||||
$showDisplay ?
|
||||
a(
|
||||
setClass('col gap-2 py-3 px-7'),
|
||||
$settingLink
|
||||
? a
|
||||
(
|
||||
setClass('btn'),
|
||||
setStyle('background', '#EEF5FF'),
|
||||
setStyle('box-shadow', 'none'),
|
||||
set::href($settingLink),
|
||||
$lang->moduleSetting
|
||||
)
|
||||
: null,
|
||||
$showDisplay
|
||||
? a
|
||||
(
|
||||
setClass('btn white'),
|
||||
set::href(helper::createLink('datatable', 'ajaxDisplay', "datatableId=$datatableId&moduleName=$app->moduleName&methodName=$app->methodName¤tModule=$currentModule¤tMethod=$currentMethod&branchType=$branchType")),
|
||||
set('data-toggle', 'modal'),
|
||||
set::href(helper::createLink('datatable', 'ajaxDisplay', "datatableId=$datatableId&moduleName=$app->moduleName&methodName=$app->methodName¤tModule=$currentModule¤tMethod=$currentMethod&branchType=$branchType")),
|
||||
$lang->displaySetting
|
||||
)
|
||||
: null,
|
||||
: null,
|
||||
);
|
||||
}
|
||||
|
||||
private function buildCloseBtn()
|
||||
{
|
||||
$activeKey = $this->prop('activeKey');
|
||||
if(empty($activeKey)) return null;
|
||||
|
||||
return a
|
||||
(
|
||||
set('href', $this->prop('closeLink')),
|
||||
icon('close', setStyle('color', 'var(--color-slate-600)'))
|
||||
);
|
||||
}
|
||||
|
||||
protected function build(): wg
|
||||
{
|
||||
$this->setMenuTreeProps();
|
||||
$activeKey = $this->prop('activeKey');
|
||||
$title = $this->getTitle($activeKey);
|
||||
$closeBtn = null;
|
||||
if(!empty($activeKey))
|
||||
{
|
||||
$closeBtn = a
|
||||
(
|
||||
set('href', $this->prop('closeLink')),
|
||||
h::i
|
||||
(
|
||||
setClass('icon icon-close'),
|
||||
setStyle('color', '#313C52')
|
||||
)
|
||||
);
|
||||
}
|
||||
$title = $this->getTitle();
|
||||
|
||||
|
||||
return div
|
||||
(
|
||||
setClass('module-menu rounded shadow-sm'),
|
||||
$title ? h::header
|
||||
setClass('module-menu rounded shadow-sm bg-white col rounded-sm'),
|
||||
h::header
|
||||
(
|
||||
setClass('h-10 flex items-center pl-4 flex-none gap-3'),
|
||||
span
|
||||
(
|
||||
setClass('module-title'),
|
||||
setClass('module-title text-lg font-semibold'),
|
||||
$title
|
||||
),
|
||||
$closeBtn
|
||||
) : null,
|
||||
h::main(zui::tree(set($this->props->pick(array('items', 'activeClass', 'activeIcon', 'activeKey', 'onClickItem', 'defaultNestedShow', 'changeActiveKey', 'isDropdownMenu'))))),
|
||||
$this->buildCloseBtn(),
|
||||
),
|
||||
h::main
|
||||
(
|
||||
setClass('col flex-auto of-y-auto pl-4'),
|
||||
zui::tree(set($this->props->pick(array('items', 'activeClass', 'activeIcon', 'activeKey', 'onClickItem', 'defaultNestedShow', 'changeActiveKey', 'isDropdownMenu'))))
|
||||
),
|
||||
$this->buildBtns(),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user