* Modify left tree to common.

This commit is contained in:
caoyanyi
2023-03-30 16:54:36 +08:00
parent 74cc9c8620
commit f34e599ce1
10 changed files with 123 additions and 860 deletions
-20
View File
@@ -159,23 +159,3 @@ form .table-data, #content .table-data {border: 1px solid #e2e2e3;}
.paramsTable th {text-align: left!important; font-size: 14px;}
.paramsTable td {text-align: left;}
.tree-group {position: relative;}
.tree-group > .module-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block;}
.tree li.active > .tree-group a {font-weight: 700; color: #0c64eb;}
.tree-actions {display: inline-block; margin-left: 5px; vertical-align: middle;}
.tree-group .tree-actions {display: none; position: absolute; right: 0; top: 0; background-color: #fff; white-space: nowrap;}
.tree-group:hover .tree-actions {display: block}
.tree-actions a {display: inline-block; margin-left: 5px; font-size: 13px; opacity: .6;}
.tree li.active > .tree-group a {font-weight: 700; color: #0c64eb;}
.base-url {margin: 0; border-bottom: 1px solid #eee;}
.base-url > p {margin: 0; padding-left: 20px; color: black;}
.detail+.detail {border-top: 0px;}
.menu-title {display: flex; align-items: center; justify-content: space-between;}
.vision-drop.dropdown {padding-right: 35px;}
#bysearchTab::before {display: none;}
#leftBar .selectBox #currentItem {width: 150px; display: flex; align-items: center;}
[lang^=zh] #leftBar .selectBox #currentItem {width: 180px;}
#leftBar .selectBox #currentItem > .text {overflow: hidden; text-align: left; flex: 0 1 100%;}
-53
View File
@@ -46,57 +46,4 @@ span.dotted-line+a {display: block;}
.is-sorting > li ul {display: none!important;}
li.drag-shadow ul {display: none!important;}
.tree-group {position: relative;}
.tree-group > .module-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block;}
.tree li.has-list.open:before {left: 6px;}
.main-table-content {display: flex; gap: 20px;}
.main-table-content > .side {flex: 0 0 300px;}
.main-table-content > .content {flex: 1;}
/* css for mian */
#mainContent > #sideBar {flex: 0 0 150px; overflow-x: auto; padding-right: 5px;}
[lang^=zh] #mainContent > #sideBar {flex: 0 0 180px;}
/* css for tree */
.tree li.has-list.open:before {content: unset;}
.tree li > a {max-width: 100%; padding: 2px;}
.file-tree a {height: 30px;}
.flex-between {display: flex; align-items: center; justify-content: space-between;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-start {display: flex; align-items: center;}
.tree li > .list-toggle {top: 4px;}
.input-tree {width: 120px;}
.tree-icon {position: absolute; right: 0;}
.tree li.has-input {overflow: hidden;}
.img-lib {flex: 0 0 16px; height: 14px;}
.tree-icon {position: absolute; right: 0;}
.tree li > a {max-width: 100%; padding: 2px;}
.file-tree a.show-icon > div {padding-right: 15px;}
.tree li.has-input {overflow: hidden;}
/* css for sidebar */
.sidebar-toggle {flex: 0 0 16px;}
.sidebar-toggle > .icon {width: 12px; height: 30px; margin-top: -10px; line-height: 30px; color: #fff; text-align: center; background: #7dcdfe; border-radius: 6px; cursor: pointer;}
.spliter {flex: 0 0 12px;}
.spliter-btn {height: 28px; width: 10px; background: #fff; position: absolute; top: 30%; left: -1px; border: 1px solid #D9D9D9; border-radius: 2px;}
.spliter-btn > .spliter-inner {width: 4px; height: 12px; border-left: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9;}
#mainContent .table-empty-tip > p, #createDocs {display: inline-block;}
.createDropdown a.btn-primary, .createDropdown a.btn-info {border-right: 1px solid rgba(255,255,255,0.2);}
.createDropdown button.dropdown-toggle.btn-primary, .createDropdown button.dropdown-toggle.btn-info {padding: 6px;}
.createDropdown ul > li {text-align: left;}
.createDropdown .btn.btn-info:hover {box-shadow: none;}
.table .c-name > a:first-child {display: inline-block; max-width: 90%; overflow: hidden;}
.table .c-name > .ajaxCollect {float: right; position: relative; right: 10px; top: -3px;}
table.table > thead > tr {height: 32px;}
#bysearchTab::before {display: none;}
#leftBar .selectBox #currentItem {width: 150px; display: flex; align-items: center;}
[lang^=zh] #leftBar .selectBox #currentItem {width: 180px;}
#leftBar .selectBox #currentItem > .text {overflow: hidden; text-align: left; flex: 0 1 100%;}
#queryBox #groupAndOr {min-width: 60px;}
-281
View File
@@ -1,284 +1,3 @@
$(document).ready(function()
{
/**
* Render Dropdown dom.
*
* @access public
* @return string
*/
function renderDropdown(option)
{
var libClass = '.libDorpdown';
if(option.type != 'dropDownLibrary') libClass = '.moduleDorpdown';
if($(libClass).find('li').length == 0) return '';
var dropdown = '<ul class="dropdown-menu dropdown-in-tree" id="' + option.type + '" style="display: unset; left:' + option.left + 'px; top:' + option.top + 'px;">';
dropdown += $(libClass).html().replace(/%libID%/g, option.libID).replace(/%moduleID%/g, option.moduleID).replace(/%hasChildren%/g, option.hasChildren);
dropdown += '</ul>';
return dropdown;
}
/* Update doc content silently on switch doc version, story #40503 */
$(document).on('click', '.api-version-menu a, #mainActions .container a', function(event)
{
var $tmpDiv = $('<div>');
$tmpDiv.load($(this).data('url') + ' #mainContent', function()
{
$('#content').html($tmpDiv.find('#content').html());
$('#sidebarContent').html($tmpDiv.find('#sidebarContent').html());
$('#actionbox .histories-list').html($tmpDiv.find('#actionbox .histories-list').html());
if($.cookie('isFullScreen') == 1) fullScreen();
$('#content [data-ride="tree"]').tree();
$('#outline li.has-list').addClass('open in');
$('#outline li.has-list>i+ul').prev('i').remove();
});
});
var moduleData = {
"name" : "",
"createType" : "",
"libID" : "",
"parentID" : "",
"objectID" : "",
"moduleType" : "",
"order" : "",
"isUpdate" : ""
};
$(document).on('click', '.sidebar-toggle > .icon', function()
{
var $icon = $(this);
if($icon.hasClass('icon-angle-left'))
{
$icon.removeClass('icon-angle-left');
$icon.addClass('icon-angle-right');
$('#sideBar').addClass('hidden');
}
else
{
$icon.removeClass('icon-angle-right');
$icon.addClass('icon-angle-left');
$('#sideBar').removeClass('hidden');
}
});
$('#fileTree').tree(
{
initialState: 'active',
data: treeData,
itemCreator: function($li, item)
{
var libClass = item.objectType == 'api' ? 'lib' : '';
var hasChild = item.children ? !!item.children.length : false;
var $item = '<a href="###" style="position: relative" data-has-children="' + hasChild + '" title="' + item.name + '" data-id="' + item.id + '" class="' + libClass + '" data-type="' + item.type + '">';
$item += '<div class="text h-full w-full flex-start overflow-hidden">';
if(libClass == 'lib') $item += '<div class="img-lib" style="background-image:url(static/svg/interface-doclib.svg)"></div>';
$item += '<div class="tree-text" style="padding-left: 5px;">';
$item += item.name
$item += '</div>';
$item += '<i class="icon icon-drop icon-ellipsis-v hidden tree-icon" data-isCatalogue="' + (item.type ? false : true) + '"></i>';
$item += '</div>';
$item += '</a>';
$li.append($item);
$li.addClass(libClass);
if(item.active) $li.addClass('active open in');
}
});
$('li.has-list > ul, #fileTree').addClass("menu-active-primary menu-hover-primary");
$('#fileTree').on('mousemove', 'a', function()
{
if($(this).data('type') == 'annex') return;
var libClass = '.libDorpdown';
if(!$(this).hasClass('lib')) libClass = '.moduleDorpdown';
if($(libClass).find('li').length == 0) return false;
$(this).find('.icon').removeClass('hidden');
$(this).addClass('show-icon');
}).on('mouseout', 'a', function()
{
$(this).find('.icon').addClass('hidden');
$(this).removeClass('show-icon');
}).on('click', 'a', function(e)
{
var isLib = $(this).hasClass('lib');
var moduleID = $(this).data('id');
var libID = 0;
var params = '';
if(isLib)
{
libID = moduleID;
moduleID = 0;
}
else
{
libID = $(this).closest('.lib').data('id');
}
var linkParams = 'libID=' + libID + '&moduleID=' + moduleID;
location.href = createLink('api', 'index', linkParams);
}).on('click', '.icon-drop', function(e)
{
$('.dropdown-in-tree').css('display', 'none');
var isCatalogue = $(this).attr('data-isCatalogue') === 'false' ? false : true;
var dropDownID = isCatalogue ? 'dropDownCatalogue' : 'dropDownLibrary';
var libID = 0;
var moduleID = 0;
var parentID = 0;
var $module = $(this).closest('a');
var hasChildren = $module.data('has-children');
var moduleType = '';
if($module.hasClass('lib'))
{
libID = $module.data('id');
moduleType = $module.data('type');
parentID = libID;
}
else
{
moduleID = $module.data('id');
libID = $module.closest('.lib').data('id');
moduleType = $module.closest('.lib').data('type');
parentID = $module.closest('ul').closest('.lib').data('id');
}
moduleData = {
"libID" : libID,
"parentID" : parentID,
"objectID" : moduleID,
"moduleType": moduleType == 'lib' ? 'doc' : moduleType,
};
var option = {
left : e.pageX,
top : e.pageY,
type : dropDownID,
libID : libID,
moduleID : moduleID,
hasChildren : hasChildren
};
var dropDown = renderDropdown(option);
$(".m-api-index").append(dropDown);
e.stopPropagation();
}).on('blur', 'input.input-tree', function()
{
var $input = $(this);
var value = $input.val();
if(!value)
{
$input.closest('[data-id=insert]').remove();
return;
}
moduleData.name = value;
$.post(createLink('tree', 'ajaxCreateModule'), moduleData, function(result)
{
result = JSON.parse(result);
if(result.result == 'fail')
{
bootbox.alert(
result.message[0],
function()
{
setTimeout(function()
{
$('.file-tree .input-tree').focus()
}, 10)
}
);
return false;
}
var module = result.module;
var resultDom = $('[data-id=aTreeModal]').html().replace(/%name%/g, module.name).replace(/%id%/g, module.id).replace('insert', module.id);
$input.closest('ul').find('.has-input').css('padding-left', '15px');
$input.after(resultDom);
$input.remove();
if(moduleData.isUpdate)
{
$.getJSON(createLink('api', 'index', 'json'), function(data){
var treeData = JSON.parse(data.data);
$('#fileTree').data('zui.tree').reload(treeData.libTree);
$('li.has-list > ul').addClass("menu-active-primary menu-hover-primary");
});
}
});
});
$('body').on('click', '.dropdown-in-tree li', function(e)
{
var item = $(this).data();
if($(this).hasClass('edit-module'))
{
new $.zui.ModalTrigger({
keyboard : true,
type : 'ajax',
url : $(this).find('a').data('href')
}).show();
}
if(item.type !== 'add') return;
var $item = $(this);
moduleData.parentID = 0;
moduleData.isUpdate = false;
moduleData.createType = 'child';
switch(item.method)
{
case 'addCataLib' :
if(item.hasChildren)
{
var $input = $('[data-id=liTreeModal]').html();
var $rootDom = $('[data-id=' + item.libid + ']a + ul');
$rootDom.append($input);
}
else
{
var $input = $('[data-id=ulTreeModal]').html();
var $rootDom = $('[data-id=' + item.libid + ']a');
var $li = $rootDom.parent();
moduleData.isUpdate = true;
$rootDom.after($input);
$li.addClass('open in has-list');
}
$('#fileTree').data('zui.tree').expand($('li[data-id="' + item.libid + '"]'));
$rootDom.parent().find('input').focus();
break;
case 'addCataBro' :
moduleData.createType = 'same';
var $input = $('[data-id=liTreeModal]').html();
var $rootDom = $('#fileTree li[data-id=' + item.id + ']');
$rootDom.after($input);
$rootDom.closest('ul').find('.has-input').css('padding-left', '0');
$('#fileTree').find('input').focus();
break;
case 'addCataChild' :
moduleData.parentID = item.id;
if(item.hasChildren)
{
var $input = $('[data-id=liTreeModal]').html();
var $rootDom = $('#fileTree [data-id=' + item.id + ']a + ul ');
}
else
{
var $input = $('[data-id=ulTreeModal]').html();
var $rootDom = $('#fileTree [data-id=' + item.id + ']li');
moduleData.isUpdate = true;
$rootDom.addClass('open in has-list');
}
$('#fileTree').data('zui.tree').expand($('li[data-id="' + item.id + '"]'));
$rootDom.append($input);
$rootDom.find('input').focus();
break;
}
}).on('click', function()
{
$('.dropdown-in-tree').remove();
});
});
/**
* Ajax delete api doc.
*
+1 -1
View File
@@ -43,7 +43,7 @@
</div>
<?php else:?>
<div id='sideBar' class="panel side side-col col overflow-auto" data-min-width="150">
<div id="fileTree" class="file-tree"></div>
<?php include '../../doc/view/lefttree.html.php';?>
</div>
<div class="sidebar-toggle flex-center"><i class="icon icon-angle-left"></i></div>
<div class="main-col flex-full overflow-visible flex-auto overflow-visible" data-min-width="500">