Merge branch 'zentaopms_289_gfl_langitem_refactors' into 'zentaopms_289'

Zentaopms 289 gfl langitem refactors

See merge request easycorp/zentaopms!7058
This commit is contained in:
王怡栋
2023-02-23 08:45:01 +00:00
3 changed files with 70 additions and 71 deletions
+18 -16
View File
@@ -2,29 +2,31 @@
.flex-1 {flex: 1;}
.align-center {align-items: center;}
.justify-center {justify-content: center;}
.h-32 {height: 32px;}
.py-6 {padding: 6px 0;}
.my-12 {margin: 12px 0;}
.ml-20 {margin-left: 20px;}
.reset-btn {margin-left: 20px;}
.title {font-size: 13px; color: #313C52; font-weight: 700; height: 40px; text-align: center;}
.gap-15 {gap: 15px;}
.h-full {height: 100%;}
/* menu-tree */
.menu-tree {flex: 0 0 200px; background: #fff; padding: 10px 10px;}
.menu-tree > .tree {padding-top: 20px;}
li.has-list > ul > li {padding-left: 10px;}
.tree ul {margin-bottom: 0;}
#menuTree > li.has-list > ul > li {padding-left: 10px;}
#menuTree > li.has-list > ul > li.has-list {padding-left: 15px;}
/* side-left */
.main-content > .side-left {flex: 0 0 160px; margin-left: 44px;}
.label-list {background: #F8F8F8; padding: 5px 0;}
.label-list > .input-label {display: flex; align-items: center; cursor: pointer; padding-left: 40px;}
/* main-box */
.flex.main-box {gap: 15px;}
/* side-right */
.main-content > .side-right {margin-left: 50px;}
.main-content > .side-right > .input-list {padding: 5px 0;}
.main-content > .side-right > .input-list > .input-control {position: relative;}
.main-content > .side-right > .input-list > .input-control > i.icon {position: absolute; font-size: 25px; left: -40px; top: 3px;}
/* title-content */
.title-content {gap: 20px;}
.title-content > .title {margin-left: 44px; width: 160px;}
/* form-content */
.form-item-content {padding-left: 44px;}
.form-item-content > .form-item {gap: 20px; height: 56px; align-items: center; position: relative;}
.form-item-content > .form-item > .input-label {flex: 0 0 160px; padding-left: 40px; background: #F8F8F8; display: flex; align-items: center;}
.form-item-content > .form-item > .input-control > input {margin-left: 40px;}
.form-item-content > .form-item.active > .icon {display: unset;}
.form-item-content > .form-item> .icon {display: none; position: absolute; left: 180px; font-size: 25px;}
/* bottom-btn */
.bottom-btn {display: flex; align-items: center; background: #fff;padding-left: 150px; padding-bottom: 20px;}
.bottom-btn {display: flex; align-items: center; background: #fff; padding-left: 150px; padding-bottom: 20px;}
+25 -21
View File
@@ -9,8 +9,7 @@ $(function()
*/
function addActive(id)
{
$('[labelid=' + id + ']').addClass('text-primary');
$('[iconid=' + id + ']').removeClass('hidden');
$('[data-id=' + id + ']').addClass('text-primary active');
}
/**
@@ -22,8 +21,7 @@ $(function()
*/
function removeActive(id)
{
$('[labelid=' + id + ']').removeClass('text-primary');
$('[iconid=' + id + ']').addClass('hidden');
$('[data-id=' + id + ']').removeClass('text-primary active');
}
/**
@@ -35,10 +33,10 @@ $(function()
*/
function handleClickItem(clickId)
{
var clearId = $('.label-list > .text-primary').attr('labelid');
var clearId = $('.form-item.active').attr('data-id');
if(clearId !== clickId)
{
if(clearId) removeActive(clearId);
if(clearId) removeActive(clearId);
if(clickId) addActive(clickId);
};
}
@@ -87,17 +85,16 @@ $(function()
var childern = null;
if (item && item.children)
{
children = [];
for (var i = 0; i < item.children.length; i++)
{
item.children[i].children = filterChildren(item.children[i], val);
if (item.children[i].title.indexOf(val) != -1 || (item.children[i].key && item.children[i].key.indexOf(val) != -1) || item.children[i].children)
{
children.push(item.children[i]);
}
}
children = [];
for (var i = 0; i < item.children.length; i++)
{
item.children[i].children = filterChildren(item.children[i], val);
if (item.children[i].title.indexOf(val) != -1 || (item.children[i].key && item.children[i].key.indexOf(val) != -1) || item.children[i].children)
{
children.push(item.children[i]);
}
}
}
return children;
}
@@ -127,12 +124,11 @@ $(function()
{
var target = $(e.target);
if (target.attr('data-has-children') === 'true') return;
self.location.href = createLink('dev', 'langItem', 'type=' + type + '&module=' + target.attr('data-module') + '&method=' + target.attr('data-method'));
})
}
$(".input-list").on("click", 'input', function(e)
$(".form-item-content").on("click", 'input', function(e)
{
handleClickItem(e.target.id);
}).on("blur", 'input', function(e)
@@ -140,13 +136,21 @@ $(function()
removeActive(e.target.id);
});
$('.label-list > .input-label').on('click', function()
$('.form-item-content > .form-item > .input-label').on('click', function()
{
handleClickItem($(this).attr('labelid'));
handleClickItem($(this).data('id'));
});
$(".form-item-content").on('mouseover', '.form-item', function()
{
$(this).addClass('text-primary');
}).on('mouseout', '.form-item', function()
{
$(this).removeClass('text-primary');
})
initMenu();
handleInputSearch();
$('li.has-list > ul').addClass("menu-active-primary menu-hover-primary")
$('li.has-list > ul').addClass("menu-active-primary menu-hover-primary");
})
+27 -34
View File
@@ -35,52 +35,45 @@
<?php endforeach;?>
</div>
</div>
<div class="flex gap-15">
<?php if(in_array($type, $config->dev->navTypes)):?>
<div class="flex main-box">
<?php if(in_array($type, $config->dev->navTypes)):?>
<div class="menu-tree">
<div class="input-control search-box has-icon-left has-icon-right search-example">
<input type="search" class="form-control search-input" />
<input type="search" class="form-control search-input"/>
<label class="input-control-icon-left search-icon flex align-center justify-center"><i class="icon icon-search"></i></label>
</div>
<div id="menuTree" class="menu-active-primary menu-hover-primary"></div>
</div>
<?php endif;?>
<?php endif;?>
<form class='main-form form-ajax flex-1' method='post'>
<div id='mainContent' class='main-content flex'>
<?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
<div class="side-left">
<div class="title"><?php echo $lang->dev->currentLang;?> </div>
<div class="label-list">
<?php foreach($currentLangs as $langKey => $originalLang):?>
<div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-32 my-12"><?php echo $originalLang?></div>
<?php endforeach;?>
</div>
</div>
<?php endif;?>
<div class="side-left">
<div class="title"><?php echo $lang->dev->defaultValue ?> </div>
<div class="label-list">
<?php foreach($originalLangs as $langKey => $originalLang):?>
<div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-32 my-12"><?php echo $originalLang?></div>
<?php endforeach;?>
</div>
</div>
<div class="side-right">
<div class="main-content">
<div class="title-content flex">
<?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
<div class="title"><?php echo $lang->dev->currentLang;?> </div>
<?php endif;?>
<div class="title"><?php echo $lang->dev->defaultValue?></div>
<div class="title"><?php echo $lang->dev->modifyValue?></div>
<div class="input-list">
<?php foreach($originalLangs as $langKey => $originalLang):?>
<div class="input-control h-32 my-12">
<?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
<i iconId="<?php echo "{$moduleName}_{$langKey}"?>" class="icon icon-angle-right text-primary hidden"></i>
</div>
<?php endforeach;?>
</div>
</div>
<div class="side-main"></div>
<div class="form-item-content">
<?php foreach($originalLangs as $langKey => $originalLang):?>
<div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="form-item flex">
<?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
<div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
<?php endif;?>
<div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
<i class="icon icon-angle-right text-primary"></i>
<div class="input-control">
<?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
</div>
</div>
<?php endforeach;?>
</div>
</div>
<div class="bottom-btn">
<?php echo html::submitButton(); ?>
<?php echo html::a(inlink('resetLang', "type={$type}&module={$moduleName}&method={$method}&language={$language}"), $lang->restore, 'hiddenwin', "id='reset' class='btn btn-wide ml-20'");?>
<?php echo html::a(inlink('resetLang', "type={$type}&module={$moduleName}&method={$method}&language={$language}"), $lang->restore, 'hiddenwin', "id='reset' class='btn btn-wide reset-btn'");?>
</div>
</form>
</div>