From ddcb19f96aa5575aa8ed6eea71e78031345fea50 Mon Sep 17 00:00:00 2001 From: sunhao Date: Tue, 18 Jul 2023 17:09:10 +0800 Subject: [PATCH] * refactor block-edit modal. --- module/block/control.php | 2 +- module/block/css/common.ui.css | 16 --------- module/block/css/create.ui.css | 1 - module/block/css/edit.ui.css | 5 --- module/block/js/dashboard.ui.js | 10 ++---- module/block/js/edit.ui.js | 14 +++++--- module/block/ui/common.ui.php | 39 ++++++++++++++++++++++ module/block/ui/edit.html.php | 58 ++++++++++----------------------- 8 files changed, 68 insertions(+), 77 deletions(-) delete mode 100644 module/block/css/common.ui.css delete mode 100644 module/block/css/edit.ui.css create mode 100644 module/block/ui/common.ui.php diff --git a/module/block/control.php b/module/block/control.php index f806406d21..89eb3529bc 100755 --- a/module/block/control.php +++ b/module/block/control.php @@ -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。 */ diff --git a/module/block/css/common.ui.css b/module/block/css/common.ui.css deleted file mode 100644 index 6707fe05e6..0000000000 --- a/module/block/css/common.ui.css +++ /dev/null @@ -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;} diff --git a/module/block/css/create.ui.css b/module/block/css/create.ui.css index 302e1f18cb..61cfc10e55 100644 --- a/module/block/css/create.ui.css +++ b/module/block/css/create.ui.css @@ -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;} diff --git a/module/block/css/edit.ui.css b/module/block/css/edit.ui.css deleted file mode 100644 index 7f19d2fd80..0000000000 --- a/module/block/css/edit.ui.css +++ /dev/null @@ -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;} diff --git a/module/block/js/dashboard.ui.js b/module/block/js/dashboard.ui.js index f0604924fa..6f62eeff5a 100644 --- a/module/block/js/dashboard.ui.js +++ b/module/block/js/dashboard.ui.js @@ -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) diff --git a/module/block/js/edit.ui.js b/module/block/js/edit.ui.js index 04d28ab113..80ba6bf0fd 100644 --- a/module/block/js/edit.ui.js +++ b/module/block/js/edit.ui.js @@ -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]; /* 在项目仪表盘创建的待测版本区块时，直接取类型名称为该区块的标题。*/ diff --git a/module/block/ui/common.ui.php b/module/block/ui/common.ui.php new file mode 100644 index 0000000000..6388d1b734 --- /dev/null +++ b/module/block/ui/common.ui.php @@ -0,0 +1,39 @@ + $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)}' + ) + ); +} diff --git a/module/block/ui/edit.html.php b/module/block/ui/edit.html.php index 07aa600d83..cb28d23935 100644 --- a/module/block/ui/edit.html.php +++ b/module/block/ui/edit.html.php @@ -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();