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

* refactor block-edit modal.

Browse Source
This commit is contained in:
sunhao
2023-07-18 17:09:42 +08:00
parent ad9d51e7f1
commit ddcb19f96a
8 changed files with 68 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/block/control.php
+1 -1
View File
@@ -128,7 +128,7 @@ class block extends control
$this->block->update($formData);
if(dao::isError()) return $this->send(array('result' => 'fail', 'message' => dao::getError()));
return $this->send(array('result' => 'success', 'message' => $this->lang->saveSuccess, 'load' => $this->createLink($this->app->tab, 'index'), 'closeModal' => true));
return $this->send(array('result' => 'success', 'message' => $this->lang->saveSuccess, 'callback' => "$('#dashboard').dashboard('load', '$blockID')", 'closeModal' => true));
}
/* 如果没传 $code 说明是首次进入页面，直接使用待编辑 $block 的 $code。 */
module/block/css/common.ui.css
-16
View File
@@ -1,16 +0,0 @@
.nav-tabs.nav-stacked .nav-item {height:36px; line-height: 36px;}
.nav-tabs.nav-stacked .nav-item:hover {background-color: #FCFDFE;}
.nav-tabs.nav-stacked .nav-item > a.title {color: #5E626D;}
.nav-tabs.nav-stacked .nav-item > a.title:before {background: transparent;}
.nav-tabs.nav-stacked .nav-item > a.title.active {color: #0B0F18;border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
.nav-tabs.nav-stacked .nav-item > a.title {border-left: 2px solid transparent}
.nav-tabs.nav-stacked .nav-item > a.title:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
.nav-tabs.nav-stacked .nav-item:hover > a {color: #0B0F18;}
.nav-tabs.nav-stacked .nav-item:hover > a.link {display: flex!important;}
.nav-tabs.nav-stacked .nav-item:hover > span.link {display: flex!important;}
.nav-tabs.nav-stacked .nav-item.nav-prev {display: none}
.nav-tabs.nav-stacked .nav-item.nav-next {display: none}
.nav > li > .btn {padding: 0 5px; line-height: 24px; margin: 3px; color: #3C4353;}
.nav > li > .btn.btn-primary {color: #fff;}
.nav .icon-more {font-size: 14px;}
module/block/css/create.ui.css
-1
View File
@@ -2,4 +2,3 @@
#blockCreateForm #paramsRow:not(.hidden)~:not(.hidden), #blockCreateForm #codesRow:not(.hidden)~:not(.hidden) {margin: 0;}
#blockCreateForm #paramsRow .form-row {--tw-space-y-reverse: 0; margin-bottom: calc(1rem*var(--tw-space-y-reverse)); margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));}
#blockCreateForm .form-actions {margin-top: 20px; margin-bottom: 20px;}
.modal-body {padding: 0; padding-right: 35px;}
module/block/css/edit.ui.css
-5
View File
@@ -1,5 +0,0 @@
#blockEditForm .bg-secondary-pale {background: #F3F6FA;}
#blockEditForm #paramsRow:not(.hidden)~:not(.hidden), #blockEditForm #codesRow:not(.hidden)~:not(.hidden) {margin: 0;}
#blockEditForm #paramsRow .form-row {--tw-space-y-reverse: 0; margin-bottom: calc(1rem*var(--tw-space-y-reverse)); margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));}
#blockEditForm .form-actions {margin-top: 20px; margin-bottom: 20px;}
.modal-body {padding: 0; padding-right: 35px;}
module/block/js/dashboard.ui.js
+2 -8
View File
@@ -10,18 +10,12 @@ function deleteBlock(dashboard, data, block)
function editBlock(dashboard, data, block)
{
const url = zui.formatString(data.url, block);
const modal = zui.Modal.ensure(document.body, {type: 'ajax', url: url, size: data.size});
modal.on('editBlock', dashboard.update(block.id));
modal.show();
zui.Modal.open({url: zui.formatString(data.url, block), size: data.size});
}
function createBlock(dashboard, data, block)
{
const url = zui.formatString(data.url, block);
const modal = zui.Modal.ensure(document.body, {type: 'ajax', url: url, size: data.size});
modal.on('createBlock', dashboard.add(block.id));
modal.show();
zui.Modal.open({url: zui.formatString(data.url, block), size: data.size});
}
function resetBlocks(dashboard, data, block)
module/block/js/edit.ui.js
+9 -5
View File
@@ -1,10 +1,15 @@
function getForm(event)
{
const field = $(event.target).attr('name');
const module = field == 'code' ? $('#blockEditForm #module').val() : $(event.target).attr('data-tab');
const code = field == 'code' ? $(event.target).val() : '';
const $target = $(event.target).closest('a,input');
const field = $target.attr('name');
const module = field == 'code' ? $('#blockEditForm #module').val() : $target.attr('data-module');
const code = field == 'code' ? $target.val() : '';
const url = $.createLink('block', 'edit', 'blockID=' + blockID + '&module=' + module + '&code=' + (code ? code : ''));
loadPage(url, '#blockEditForm #codesRow, #blockEditForm #paramsRow, #blockEditForm #module');
loadPage({url: url, selector: '#blockEditForm #codesRow, #blockEditForm #paramsRow, #blockEditForm #module', partial: true});
const $nav = $('#blockEditForm .block-modules-nav');
$nav.find('.nav-item>.active').removeClass('active');
$nav.find(`.nav-item>a[data-module="${module}"]`).addClass('active');
}
/**
@@ -14,7 +19,6 @@ function getForm(event)
*/
function onParamsTypeChange()
{
const lang = config.clientLang;
const $code = $('#code')[0];
/* 在项目仪表盘创建的待测版本区块时，直接取类型名称为该区块的标题。*/
module/block/ui/common.ui.php
+39
View File
@@ -0,0 +1,39 @@
<?php
declare(strict_types=1);
namespace zin;
function buildBlockModuleNav(?array $modules = null, ?string $module = null): wg
{
if(empty($modules)) $modules = data('modules');
if(empty($module)) $module = data('module');
$items = array();
foreach($modules as $moduleKey => $moduleName)
{
if(!$moduleKey || !$moduleName) continue;
if($moduleKey === 'welcome') $items[] = array('type' => 'divider', 'outerClass' => 'text-light');
$item = array();
$item['active'] = $moduleKey == $module;
$item['text'] = $moduleName;
$item['textClass'] = 'flex-auto group-hover:text-primary';
$item['trailingIcon'] = 'arrow-right opacity-0 group-hover:opacity-100 text-primary active:font-bold active:canvas';
$item['class'] = 'row group active:canvas';
$item['data-module'] = $moduleKey;
$items[] = $item;
}
return nav
(
set::class('block-modules-nav'),
set::stacked(true),
set::items($items),
on::click('.nav-item>a', 'getForm'),
h::css
(
'.block-modules-nav > .nav-item > a.active {box-shadow: inset 2px 0 0 var(--color-primary-500); color: var(--color-fore)}'
)
);
}
module/block/ui/edit.html.php
+17 -41
View File
@@ -11,6 +11,8 @@ declare(strict_types=1);
*/
namespace zin;
include 'common.ui.php';
set::title($title);
jsVar('blockID', $block->id);
jsVar('blockTitle', $lang->block->blockTitle);
@@ -45,54 +47,20 @@ foreach($params as $key => $row)
);
}
$moduleTabs = array();
foreach($modules as $moduleKey => $moduleName)
{
if(!$moduleKey || !$moduleName) continue;
if($moduleKey == 'welcome') $moduleTabs[] = li(width('calc(100% - 2rem)'), setClass('nav-divider'));
$moduleTabs[] = li
(
setClass('nav-item w-full'),
a
(
setClass('ellipsis text-dark title' . ($moduleKey == $module ? ' active' : '')),
on::click('getForm'),
set('data-tab', $moduleKey),
set('data-toggle', 'tab'),
$moduleName
),
span
(
setClass('link flex-1 text-right pr-2 hidden'),
icon
(
setClass('text-primary'),
'arrow-right'
)
)
);
}
div
row
(
set::id('blockEditForm'),
setClass('flex h-full overflow-hidden'),
setID('blockEditForm'),
$showModules ? cell
(
width('128px'),
setClass('bg-secondary-pale overflow-y-auto'),
ul
(
setClass('nav nav-tabs nav-stacked my-2'),
$moduleTabs
),
) : '',
set::width(128),
set::class('bg-surface rounded rounded-r-none rounded-tl-none overflow-y-auto'),
buildBlockModuleNav()
) : null,
cell
(
width('calc(100% - ' . ($showModules ? '130' : '2') . 'px)'),
setClass('flex-auto pr-6 pb-4'),
form
(
setClass('border-b-0'),
on::change('#code', 'getForm'),
on::change('#paramstype', 'onParamsTypeChange'),
formRow
@@ -126,6 +94,7 @@ div
div
(
set::id('paramsRow'),
set::class('space-y-4'),
formRow
(
formGroup
@@ -165,4 +134,11 @@ div
)
);
if(isInModal())
{
set::condensed(true);
set::bodyClass('border-t');
set::bodyProps(array('style' => array('padding' => 0)));
}
render();