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

* [task#126489,1h] support to move menu.

Browse Source
This commit is contained in:
dingyongliang
2024-08-20 08:54:48 +08:00
parent f1fad81273
commit abeded6d49
2 changed files with 96 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/index/css/index.ui.css
+4 -1
View File
@@ -11,7 +11,7 @@
#menu {position: fixed; left: 0; top: 0; bottom: 0; background: var(--zt-menu-bg); width: var(--zt-menu-width); color: rgba(var(--color-canvas-rgb), .8); transition: width .1s; user-select: none; z-index: 10;}
#menu .nav {flex-direction: column; align-items: stretch;}
#menu .nav > li {display: block; height: var(--zt-menu-height, 38px); padding: 4px 8px; transition: padding .2s;}
#menu .nav > .divider {background: var(--color-canvas); opacity: .12; height: 1px; padding: 0; margin: 6px 12px; align-self: stretch}
#menu .nav > .divider {background: var(--color-canvas); opacity: .12; height: 1px; padding: 6px 4px; align-self: stretch; background-clip: content-box; box-sizing: content-box; border: none;}
#menu .nav > li > a {color: inherit; display: flex; align-items: center; gap: 4px; padding: 0 6px; height: calc(var(--zt-menu-height, 38px) - 8px); transition: color .2s, background-color .2s; border-radius: var(--radius-md);}
#menu .nav > li > a.active,
#menu .nav > li > a:hover {background: var(--zt-menu-hover-bg, rgba(var(--color-primary-400-rgb), .4)); color: var(--color-canvas);}
@@ -83,3 +83,6 @@
#upgradeContent {display: none; position: absolute; bottom: var(--zt-apps-bar-height); right: 10px; width: 370px; height: 322px; background-color: #fff; padding: 5px 0; border: 1px solid rgba(0,0,0,.15); border-color: rgba(0,0,0,.1); opacity: 1; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.1);}
.version-upgrade {width: 14px; height: 16px; float: left; background-repeat: no-repeat; background-position: center ; background-size: cover; display: block;}
#latestVersionList {height: 270px; overflow: auto;}
#menuMainNav[z-use-sortable] a[data-app]:hover {cursor: grab;}
#menuMainNav[z-use-sortable] li.divider:hover {cursor: grab;}
module/index/js/index.ui.js
+92 -4
View File
@@ -819,6 +819,54 @@ setTimeout(refreshMenu, 500);
$(document).on('click', '.menu-toggle', () => toggleMenu());
toggleMenu(!$('body').hasClass('hide-menu'));
$('#menuNav .divider').on('contextmenu', function(event)
{
const $divider = $(this);
const $nav = $divider.closest('.nav');
const isMoving = $nav.is('[z-use-sortable]');
const items = [];
if(isMoving)
{
items.push(
{
text: langData.save,
onClick: () => {
$divider.closest('.nav').zui().destroy();
}
}
);
}
else
{
items.push(
{
text: langData.move,
onClick: () => {
const sortable = new zui.Sortable(
'#menuMainNav',
{
animation: 150,
ghostClass: 'bg-primary-pale',
}
)
}
}
);
}
zui.ContextMenu.show(
{
hideOthers: true,
element: $divider[0],
placement: 'right-start',
items: items,
event: event,
onClickItem: (info) => info.event.preventDefault()
}
);
event.preventDefault();
});
/* Bind events for app trigger */
$(document).on('click', '.open-in-app,.show-in-app', function(e)
{
@@ -837,14 +885,54 @@ $(document).on('click', '.open-in-app,.show-in-app', function(e)
if(!code) return;
const app = apps.openedMap[code];
const items = [{text: langData.open, disabled: app && getLastAppCode() === code, onClick: function(){showApp(code)}}];
const items = [{text: langData.open, disabled: app && getLastAppCode() === code, onClick: () => showApp(code)}];
if(app)
{
items.push({text: langData.reload, onClick: function(){reloadApp(code)}});
if(code !== 'my') items.push({text: langData.close, onClick: function(){closeApp(code)}});
items.push({text: langData.reload, onClick: () => reloadApp(code)});
if(code !== 'my') items.push({text: langData.close, onClick: () => closeApp(code)});
}
zui.ContextMenu.show({hideOthers: true, element: $btn[0], placement: $btn.closest('#appTabs').length ? 'top-start' : 'right-start', items: items, event: event, onClickItem: function(info){info.event.preventDefault();}});
const $nav = $btn.closest('.nav');
const isMoving = $nav.is('[z-use-sortable]');
if(isMoving)
{
items.push(
{
text: langData.save,
onClick: () => {
$btn.closest('.nav').zui().destroy();
}
}
);
}
else
{
items.push(
{
text: langData.move,
onClick: () => {
const sortable = new zui.Sortable(
'#menuMainNav',
{
animation: 150,
ghostClass: 'bg-primary-pale',
}
);
}
}
);
}
zui.ContextMenu.show(
{
hideOthers: true,
element: $btn[0],
placement: $btn.closest('#appTabs').length ? 'top-start' : 'right-start',
items: items,
event: event,
onClickItem: (info) => info.event.preventDefault()
}
);
event.preventDefault();
});