mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-14 06:09:10 +00:00
perf: 统一 ztree css
This commit is contained in:
ibuler
@@ -46,7 +46,7 @@ import $ from '@/utils/jquery-vendor.js'
|
||||
import '@ztree/ztree_v3/js/jquery.ztree.all.min.js'
|
||||
import '@ztree/ztree_v3/js/jquery.ztree.exhide.min.js'
|
||||
import '@/styles/ztree.css'
|
||||
import '@/styles/ztree_icon.css'
|
||||
import '@/styles/ztree_icon.scss'
|
||||
import axiosRetry from 'axios-retry'
|
||||
|
||||
const defaultObject = {
|
||||
|
||||
@@ -264,7 +264,7 @@ website: http://code.google.com/p/jquerytree/
|
||||
}
|
||||
|
||||
.ztree li span.button.roots_docu::before {
|
||||
content: "\f114";
|
||||
content: '';
|
||||
padding-left: 2px;
|
||||
display: inline-block;
|
||||
color: #676a6c;
|
||||
@@ -417,3 +417,11 @@ ul.ztree.zTreeDragUL {
|
||||
filter: alpha(opacity=0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ztree li span.button::before {
|
||||
color: #676a6c;
|
||||
}
|
||||
.ztree li a > span.button {
|
||||
filter: invert(47%) sepia(3%) saturate(412%) hue-rotate(161deg) brightness(83%) contrast(83%);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,361 +0,0 @@
|
||||
.ztree li span.button {
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 0px solid;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.ztree li span.button.ico_loading {
|
||||
margin-right: 2px;
|
||||
background: url(./icons/loading.gif) no-repeat scroll 0 0 transparent;
|
||||
vertical-align: top;
|
||||
*vertical-align: middle;
|
||||
}
|
||||
|
||||
.ztree li span.button::before {
|
||||
font-family: FontAwesome;
|
||||
padding-top: 10px;
|
||||
padding-left: 2px;
|
||||
display: inline-block;
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk {
|
||||
margin-right: 1px;
|
||||
cursor: auto;
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_false_full::before {
|
||||
content: "\f096";
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_false_full_focus::before {
|
||||
content: "\f096";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_false_part::before {
|
||||
content: "\f096";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_false_part_focus::before {
|
||||
content: "\f096";
|
||||
color: #cad96c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_false_disable::before {
|
||||
content: "\f096";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_full::before {
|
||||
content: "\f046";
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_full_focus::before {
|
||||
content: "\f046";
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_part::before {
|
||||
content: "\f14a";
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_part_focus::before {
|
||||
content: "\f14a";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_full_focus::before {
|
||||
content: "\f046";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_part::before {
|
||||
content: "\f046";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_part_focus::before {
|
||||
content: "\f046";
|
||||
color: #cad96c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.checkbox_true_disable::before {
|
||||
content: "\f046";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_false_full::before {
|
||||
content: "\f10c";
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_false_full_focus::before {
|
||||
content: "\f10c";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_false_part::before {
|
||||
content: "\f10c";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_false_part_focus::before {
|
||||
content: "\f10c";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_false_disable::before {
|
||||
content: "\f1db";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_true_full::before {
|
||||
content: "\f192";
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_true_full_focus::before {
|
||||
content: "\f192";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_true_part::before {
|
||||
content: "\f192";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_true_part_focus::before {
|
||||
content: "\f192";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk.radio_true_disable::before {
|
||||
content: "\f1db";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.ztree li span.button.switch {
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.ztree li span.button.root_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
.ztree li span.button.root_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
.ztree li span.button.roots_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
.ztree li span.button.roots_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
.ztree li span.button.center_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
.ztree li span.button.center_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
.ztree li span.button.bottom_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
.ztree li span.button.bottom_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
.ztree li span.button.root_docu {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ztree li span.button.roots_docu::before {
|
||||
content: "\f114";
|
||||
}
|
||||
|
||||
.ztree li span.button.noline_docu {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ztree li span.button.ico_open::before {
|
||||
content: "\f07c";
|
||||
}
|
||||
|
||||
.ztree li span.button.ico_close::before {
|
||||
content: "\f07b";
|
||||
}
|
||||
|
||||
.ztree li span.button.ico_docu::before {
|
||||
content: "\f07b";
|
||||
}
|
||||
|
||||
.ztree li span.button.file_ico_docu::before {
|
||||
content: "\f022";
|
||||
}
|
||||
|
||||
.ztree li span.button.linux_ico_docu::before {
|
||||
content: "\f17c";
|
||||
}
|
||||
|
||||
.ztree li span.button.windows_ico_docu::before {
|
||||
content: "\f17a";
|
||||
}
|
||||
|
||||
.ztree li span.button.user-tie_ico_close::before {
|
||||
content: "\f2be";
|
||||
}
|
||||
|
||||
.ztree li span.button.user-tie_ico_open::before {
|
||||
content: "\f2be";
|
||||
}
|
||||
|
||||
.ztree li span.button.cloud_ico_close::before {
|
||||
content: "\f0c2";
|
||||
}
|
||||
|
||||
.ztree li span.button.cloud_ico_open::before {
|
||||
content: "\f0c2";
|
||||
}
|
||||
|
||||
.ztree li span.button.chrome_ico_docu::before {
|
||||
content: "\f268";
|
||||
}
|
||||
|
||||
.ztree li span.button.public_ico_docu::before,
|
||||
.ztree li span.button.router_ico_docu::before,
|
||||
.ztree li span.button.other_ico_docu::before,
|
||||
.ztree li span.button.firewall_ico_docu::before,
|
||||
.ztree li span.button.general_ico_docu::before {
|
||||
content: "\F07B";
|
||||
}
|
||||
|
||||
.ztree li span.button.switch_ico_docu {
|
||||
background: url('./icons/switch.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.k8s_ico_docu {
|
||||
background: url('./icons/k8s.png') center left no-repeat;
|
||||
}
|
||||
|
||||
.ztree li span.button.mysql_ico_docu {
|
||||
background: url('./icons/mysql.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.redis_ico_docu {
|
||||
background: url('./icons/redis.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.mariadb_ico_docu {
|
||||
background: url('./icons/mariadb.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.postgresql_ico_docu {
|
||||
background: url('./icons/postgresql.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.mongodb_ico_docu {
|
||||
background: url('./icons/mongodb.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.unix_ico_docu {
|
||||
background: url('./icons/unix.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.private_ico_docu {
|
||||
background: url('./icons/private.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.sqlserver_ico_docu {
|
||||
background: url('./icons/sqlserver.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.website_ico_docu {
|
||||
background: url('./icons/website.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.chatgpt_ico_docu {
|
||||
background: url('./icons/chatgpt.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.clickhouse_ico_docu {
|
||||
background: url('./icons/clickhouse.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li span.button.windows_ico_docu {
|
||||
background: url('./icons/windows.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
.ztree li a > span.button {
|
||||
filter: invert(47%) sepia(3%) saturate(412%) hue-rotate(161deg) brightness(83%) contrast(83%);
|
||||
}
|
||||
|
||||
.ztree li span.button.oracle_ico_docu::before {
|
||||
content: "\f1c0";
|
||||
}
|
||||
|
||||
.ztree li span.button.oracle_ico_docu::before {
|
||||
content: "\f1c0";
|
||||
}
|
||||
|
||||
.ztree li span.button.database_ico_docu::before {
|
||||
content: "\f1c0";
|
||||
}
|
||||
|
||||
.ztree li span.button.cloud_ico_docu::before {
|
||||
content: "\f0c2";
|
||||
}
|
||||
|
||||
.ztree li span.button.edit {
|
||||
margin-left: 4px;
|
||||
margin-right: -1px;
|
||||
vertical-align: top;
|
||||
*vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.ztree li span.button.edit::before {
|
||||
content: "\f044";
|
||||
}
|
||||
|
||||
.ztree li span.button.remove {
|
||||
margin-left: 4px;
|
||||
margin-right: -1px;
|
||||
vertical-align: top;
|
||||
*vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.ztree li span.button.remove::before {
|
||||
content: "\f1f8";
|
||||
}
|
||||
|
||||
.ztree li span.button.add {
|
||||
margin-left: 4px;
|
||||
margin-right: -1px;
|
||||
vertical-align: top;
|
||||
*vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.ztree li span.button.add::before {
|
||||
content: "\f067";
|
||||
}
|
||||
344
src/styles/ztree_icon.scss
Normal file
344
src/styles/ztree_icon.scss
Normal file
@@ -0,0 +1,344 @@
|
||||
.ztree li span.button {
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 0 solid;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
|
||||
.ztree li span.button {
|
||||
.edit, .remove, .add {
|
||||
margin-left: 4px;
|
||||
margin-right: -1px;
|
||||
vertical-align: top;
|
||||
*vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ztree li span.button::before {
|
||||
font-family: FontAwesome;
|
||||
padding-top: 10px;
|
||||
padding-left: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ztree li span.button.chk {
|
||||
margin: 0;
|
||||
cursor: auto;
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
|
||||
.ztree li span.button {
|
||||
margin-right: 2px;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.ztree li span.button, .view_icon {
|
||||
&.windows_ico_docu {
|
||||
background: url('./icons/windows.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.switch_ico_docu {
|
||||
background: url('./icons/switch.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.k8s_ico_docu {
|
||||
background: url('./icons/k8s.png') center left no-repeat;
|
||||
}
|
||||
|
||||
&.mysql_ico_docu {
|
||||
background: url('./icons/mysql.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.redis_ico_docu {
|
||||
background: url('./icons/redis.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.mariadb_ico_docu {
|
||||
background: url('./icons/mariadb.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.postgresql_ico_docu {
|
||||
background: url('./icons/postgresql.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.mongodb_ico_docu {
|
||||
background: url('./icons/mongodb.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.unix_ico_docu {
|
||||
background: url('./icons/unix.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
|
||||
&.private_ico_docu {
|
||||
background: url('./icons/private.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.sqlserver_ico_docu {
|
||||
background: url('./icons/sqlserver.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.website_ico_docu {
|
||||
background: url('./icons/website.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.chatgpt_ico_docu {
|
||||
background: url('./icons/chatgpt.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.clickhouse_ico_docu {
|
||||
background: url('./icons/clickhouse.png') no-repeat center left transparent;
|
||||
}
|
||||
|
||||
&.ico_loading {
|
||||
background: url(./icons/loading.gif) no-repeat scroll 0 0 transparent;
|
||||
}
|
||||
|
||||
&.oracle_ico_docu::before {
|
||||
content: "\f1c0";
|
||||
}
|
||||
|
||||
&.database_ico_docu::before {
|
||||
content: "\f1c0";
|
||||
}
|
||||
|
||||
&.cloud_ico_docu::before {
|
||||
content: "\f0c2";
|
||||
}
|
||||
|
||||
&.cloud_ico_open::before {
|
||||
content: "\f07c";
|
||||
}
|
||||
|
||||
&.cloud_ico_close::before {
|
||||
content: "\f07b";
|
||||
}
|
||||
|
||||
&.chrome_ico_docu::before {
|
||||
content: "\f268";
|
||||
}
|
||||
|
||||
|
||||
&.public_ico_docu::before,
|
||||
&.router_ico_docu::before,
|
||||
&.other_ico_docu::before,
|
||||
&.firewall_ico_docu::before,
|
||||
&.general_ico_docu::before {
|
||||
content: "\F07B";
|
||||
}
|
||||
|
||||
&.ico_close::before {
|
||||
content: "\f07b";
|
||||
}
|
||||
|
||||
&.ico_docu::before {
|
||||
content: "\f07b";
|
||||
}
|
||||
|
||||
&.file_ico_docu::before {
|
||||
content: "\f022";
|
||||
}
|
||||
|
||||
&.linux_ico_docu::before {
|
||||
content: "\f17c";
|
||||
}
|
||||
|
||||
&.user-tie_ico_close::before {
|
||||
content: "\f2be";
|
||||
}
|
||||
|
||||
&.user-tie_ico_open::before {
|
||||
content: "\f2be";
|
||||
}
|
||||
|
||||
&.roots_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
&.center_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
&.center_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
&.bottom_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
&.bottom_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
&.chk.checkbox_false_part::before {
|
||||
content: "\f096";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
&.chk.checkbox_false_full::before {
|
||||
content: "\f096";
|
||||
}
|
||||
|
||||
&.chk.checkbox_false_full_focus::before {
|
||||
content: "\f096";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
&.chk.checkbox_false_part_focus::before {
|
||||
content: "\f096";
|
||||
color: #cad96c;
|
||||
}
|
||||
|
||||
&.chk.checkbox_false_disable::before {
|
||||
content: "\f096";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_full::before {
|
||||
content: "\f046";
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_full_focus::before {
|
||||
content: "\f046";
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_part::before {
|
||||
content: "\f14a";
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_part_focus::before {
|
||||
content: "\f14a";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_full_focus::before {
|
||||
content: "\f046";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_part::before {
|
||||
content: "\f046";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_part_focus::before {
|
||||
content: "\f046";
|
||||
color: #cad96c;
|
||||
}
|
||||
|
||||
&.chk.checkbox_true_disable::before {
|
||||
content: "\f046";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
&.chk.radio_false_full::before {
|
||||
content: "\f10c";
|
||||
}
|
||||
|
||||
&.chk.radio_false_full_focus::before {
|
||||
content: "\f10c";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
&.chk.radio_false_part::before {
|
||||
content: "\f10c";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
&.chk.radio_false_part_focus::before {
|
||||
content: "\f10c";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
&.chk.radio_false_disable::before {
|
||||
content: "\f1db";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
&.chk.radio_true_full::before {
|
||||
content: "\f192";
|
||||
}
|
||||
|
||||
&.chk.radio_true_full_focus::before {
|
||||
content: "\f192";
|
||||
color: #676a6c;
|
||||
}
|
||||
|
||||
&.chk.radio_true_part::before {
|
||||
content: "\f192";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
&.chk.radio_true_part_focus::before {
|
||||
content: "\f192";
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
&.chk.radio_true_disable::before {
|
||||
content: "\f1db";
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
&.switch {
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.root_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
&.root_close::before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
&.roots_open::before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
&.root_docu {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.roots_docu::before {
|
||||
}
|
||||
|
||||
&.noline_docu {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.ico_open::before {
|
||||
content: "\f07c";
|
||||
}
|
||||
|
||||
&.edit::before {
|
||||
content: "\f044";
|
||||
}
|
||||
|
||||
&.remove::before {
|
||||
content: "\f1f8";
|
||||
}
|
||||
|
||||
&.add::before {
|
||||
content: "\f067";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user