Skip to content

L
luna
Unverified Commit 4e7f081f authored by liuzheng712's avatar liuzheng712
Browse files
Options

feat: add the asset tree, Todo: bind the event

parent c501b002
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 921 additions and 63 deletions
.angular-cli.json
View file @ 4e7f081f
......@@ -24,7 +24,8 @@
"../node_modules/xterm/dist/xterm.css",
"../node_modules/elfinder/css/elfinder.min.css",
"sass/style.scss",
"styles.css"
"styles.css",
"assets/ztree/awesomeStyle/awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
......@@ -35,7 +36,8 @@
"assets/inspinia/inspinia.js",
"assets/slimscroll/jquery.slimscroll.min.js",
"../node_modules/elfinder/js/elfinder.min.js",
"../node_modules/xterm/dist/xterm.js"
"../node_modules/xterm/dist/xterm.js",
"assets/ztree/jquery.ztree.all.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
......
mock.py
View file @ 4e7f081f
This diff is collapsed.
proxy.conf.json
View file @ 4e7f081f
{
"/api": {
"target": "http://127.0.0.1:8088",
"target": "http://127.0.0.1:5000",
"secure": false
},
"/luna/i18n": {
......
src/app/elements/asset-tree/asset-tree.component.html
View file @ 4e7f081f
<ngx-tree [nodes]="nodes1">
<ng-template let-label="label" let-model="model">
<strong>{{label}}</strong>
</ng-template>
</ngx-tree>
<ul id="ztree" class="ztree"></ul>
src/app/elements/asset-tree/asset-tree.component.scss
View file @ 4e7f081f
@import "~@swimlane/ngx-ui/release/components/tree/tree.component";
@import "~@swimlane/ngx-ui/release/components/icon/icon.component";
.ztree {
height: 100%;
background-color: inherit;
}
src/app/elements/asset-tree/asset-tree.component.ts
View file @ 4e7f081f
import {Component, OnInit} from '@angular/core';
import {HttpService} from '../../app.service';
import {Component, Input, OnInit, AfterViewInit} from '@angular/core';
declare var $: any;
@Component({
selector: 'elements-asset-tree',
......@@ -7,32 +8,97 @@ import {HttpService} from '../../app.service';
styleUrls: ['./asset-tree.component.scss']
})
export class ElementAssetTreeComponent implements OnInit {
nodes1: any[] = [
{
label: 'Node1', model: {type: 'Array', count: 1}
@Input() Data: any;
nodes = [];
setting = {
view: {
dblClickExpand: false,
showLine: true
},
{
label: 'Node2',
expandable: true,
model: {type: 'Object'},
children: [
{
label: 'Node1', model: {type: 'Array', count: 1}
}
]
data: {
simpleData: {
enable: true
}
},
{
label: 'Node3', model: {type: 'Array', count: 1}
}
];
constructor(private _http: HttpService) {
callback: {
// onClick: this.onCzTreeOnClick
},
};
timer: any;
onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
alert(treeNode.name);
}
constructor() {
}
ngOnInit() {
if (this.Data) {
this.draw();
}
clearInterval(this.timer);
this.timer = setInterval(() => {
if (this.Data) {
this.draw();
clearInterval(this.timer);
}
}, 100);
}
draw() {
let nodes = {};
let assets = {};
this.Data.forEach((v, i) => {
if (!nodes[v['id']]) {
nodes[v['id']] = true;
this.nodes.push({
'id': v['id'],
'key': v['key'],
'name': v['name'],
'value': v['value'],
'pId': v['parent'],
'assets_amount': v['assets_amount'],
'isParent': true,
'open': v['key'] === '0'
});
}
v['assets_granted'].forEach((vv, ii) => {
vv['nodes'].forEach((vvv, iii) => {
if (!nodes[vvv['id']]) {
this.nodes.push({
'id': vvv['id'],
'key': vvv['key'],
'name': vvv['value'],
'value': vvv['value'],
'pId': vvv['parent'],
'assets_amount': vvv['assets_amount'],
'isParent': true,
'open': vvv['key'] === '0'
});
nodes[vvv['id']] = true;
}
if (!assets[vv['id'] + '@' + vvv['id']]) {
this.nodes.push({
'id': vv['id'],
'name': vv['hostname'],
'value': vv['hostname'],
'system_users_granted': vv['system_users_granted'],
'platform': vv['platform'],
'comment': vv['comment'],
'isParent': false,
'pId': vvv['id'],
'iconSkin': vv['platform'].toLowerCase()
});
assets[vv['id'] + '@' + vvv['id']] = true;
}
});
});
});
$.fn.zTree.init($('#ztree'), this.setting, this.nodes);
}
}
src/app/elements/elements.component.ts
View file @ 4e7f081f
......@@ -15,6 +15,7 @@ import {ElementSettingsComponent} from './settings/settings.component';
import {ElementDialogAlertComponent} from './dialog/dialog.service';
import {ElementGuacamoleComponent} from './guacamole/guacamole.component';
import {ElementAssetTreeComponent} from './asset-tree/asset-tree.component';
import {ElementTreeComponent} from './tree/tree.component';
export const ElementComponents = [
ElementLeftbarComponent,
......@@ -32,5 +33,6 @@ export const ElementComponents = [
ElementSettingsComponent,
ElementDialogAlertComponent,
ElementGuacamoleComponent,
ElementAssetTreeComponent
ElementAssetTreeComponent,
ElementTreeComponent
];
src/app/pages/control/cleftbar/cleftbar.component.html
View file @ 4e7f081f
......@@ -5,20 +5,7 @@
type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
</div>
<div class="overflow ngx-scroll-overlay" fxflex="1 1 100%">
<ul class="filetree ">
<li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">
<input type="checkbox" id="hostgroup-{{i}}">
<label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>
<ul [ngClass]="{'insearch': q }">
<li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)"
(contextmenu)="onRightClick($event)" matTooltip="{{host.hostname}}"
[matTooltipPosition]="TooltipPosition">
<i class="fa" [ngClass]="'fa-'+(host.platform||'undefined').toLowerCase()" id="fa-{{i}}"></i>
{{host.hostname}}
</li>
</ul>
</li>
</ul>
<elements-asset-tree [Data]="zNodes"></elements-asset-tree>
</div>
<div class="footer-version" fxflex="0 0 40px">
......
src/app/pages/control/cleftbar/cleftbar.component.ts
View file @ 4e7f081f
......@@ -18,7 +18,6 @@ import {FormControl, Validators} from '@angular/forms';
import {ElementServerMenuComponent} from '../../../elements/server-menu/server-menu.component';
import {DialogService} from '../../../elements/dialog/dialog.service';
export interface HostGroup {
name: string;
id: string;
......@@ -40,6 +39,7 @@ export class Host {
export class CleftbarComponent implements OnInit {
DataStore = DataStore;
HostGroups: Array<HostGroup>;
zNodes: any;
version = version;
q: string;
event: MouseEvent;
......@@ -94,6 +94,7 @@ export class CleftbarComponent implements OnInit {
ngOnInit() {
this._http.get_my_asset_groups_assets()
.subscribe(response => {
this.zNodes = response;
this.HostGroups = response;
if (!DataStore.autologin) {
this.autologin();
......
src/app/test-page/test-page.component.html
View file @ 4e7f081f
<!--<tree-root [nodes]="nodes" [options]="options"></tree-root>-->
<!--<app-replay-mp4></app-replay-mp4>-->
<!--<elements-asset-tree></elements-asset-tree>-->
<div fxLayout="row" style="height:500px" ngxSplit="row">
<div fxFlex="30%" ngxSplitArea>
<ul>
<li>DDOS</li>
<li>DDOS</li>
<li>DDOS</li>
</ul>
</div>
<div fxFlex="15px" ngxSplitHandle></div>
<div fxFlex="70%" ngxSplitArea>
<ul>
<li>Alerts</li>
<li>Search</li>
<li>Admin</li>
</ul>
</div>
</div>
<!--<elements-tree [TreeData]="nodes1"></elements-tree>-->
<elements-asset-tree [Data]="zNodes"></elements-asset-tree>
src/app/test-page/test-page.component.ts
View file @ 4e7f081f
This diff is collapsed.
src/assets/ztree/awesomeStyle/awesome.css 0 → 100644
View file @ 4e7f081f
/*-------------------------------------
zTree Style using fontawesome instead of images
version: 1.1
author: Mike King
email: mikkelking @ hotmail . com
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
/* Definitions ----------------------*/
/* End of Definitions ---------------*/
/* Imports -------------------------*/
/* End of Imports ------------------*/
.ztree * {
padding: 0;
margin: 0;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;
background-color: #f3f3f3;
}
.ztree {
margin: 0;
padding: 5px;
color: #676a6c;
background-color: #f3f3f3;
}
.ztree li {
padding: 0;
margin: 0;
list-style: none;
line-height: 17px;
text-align: left;
white-space: nowrap;
outline: 0;
}
.ztree li ul {
margin: 0px;
padding: 0 0 0 18px;
}
.ztree li a {
padding-right: 3px;
margin: 0;
cursor: pointer;
height: 20px;
color: #676a6c;
background-color: transparent;
text-decoration: none;
vertical-align: top;
display: inline-block;
}
.ztree li a input.rename {
height: 14px;
width: 80px;
padding: 0;
margin: 0;
color: #f3f3f3;
background-color: #676a6c;
font-size: 12px;
border: 1px #585956 solid;
*border: 0px;
}
.ztree li a:hover {
background: #e7f4f9;
border-radius: 2px;
box-shadow: inset 0 0 1px #cccccc;
}
.ztree li a.curSelectedNode {
padding-top: 0px;
background-color: #beebff;
color: #676a6c;
height: 20px;
opacity: 0.8;
}
.ztree li a.curSelectedNode_Edit {
padding-top: 0px;
background-color: #f3f3f3;
color: red;
height: 20px;
border: 1px #676a6c solid;
opacity: 0.8;
}
.ztree li a.tmpTargetNode_inner {
padding-top: 0px;
background-color: #f3f3f3;
color: #676a6c;
height: 20px;
border: 1px #666 solid;
opacity: 0.8;
filter: alpha(opacity=80);
}
.ztree li span {
line-height: 20px;
margin-right: 2px;
background-color: transparent;
}
.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::before {
color: #676a6c;
font-family: FontAwesome;
padding-top: 10px;
}
.ztree li span.button.chk {
margin: 0px;
cursor: auto;
width: 12px;
display: inline-block;
padding-top: 10px;
padding-left: 2px;
}
.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";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.root_close::before {
content: "\f105";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.roots_open::before {
content: "\f107";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.roots_close::before {
content: "\f105";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.center_open::before {
content: "\f107";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.center_close::before {
content: "\f105";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.bottom_open::before {
content: "\f107";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.bottom_close::before {
content: "\f105";
padding-top: 10px;
padding-left: 2px;
display: inline-block;
}
.ztree li span.button.root_docu {
background: none;
}
.ztree li span.button.roots_docu::before {
content: "\f114";
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.center_docu::before {
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.bottom_docu::before {
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.noline_docu {
background: none;
}
.ztree li span.button.ico_open::before {
content: "\f07c";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.ico_close::before {
content: "\f07b";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.ico_docu::before {
content: "\f07b";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.file_ico_docu::before {
content: "\f022";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.linux_ico_docu::before {
content: "\f17c";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.ztree li span.button.windows_ico_docu::before {
content: "\f17a";
font-family: FontAwesome;
padding-top: 10px;
padding-left: 2px;
display: inline-block;
color: #676a6c;
}
.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";
font-family: FontAwesome;
}
.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";
font-family: FontAwesome;
}
.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";
font-family: FontAwesome;
}
.ztree li span.button.ico_loading {
margin-right: 2px;
background: url(img/loading.gif) no-repeat scroll 0 0 transparent;
vertical-align: top;
*vertical-align: middle;
}
ul.tmpTargetzTree {
background-color: #FFE6B0;
opacity: 0.8;
filter: alpha(opacity=80);
}
span.tmpzTreeMove_arrow {
width: 16px;
height: 20px;
display: inline-block;
padding: 0;
margin: 2px 0 0 1px;
border: 0 none;
position: absolute;
background-color: transparent;
background-attachment: scroll;
}
span.tmpzTreeMove_arrow::before {
content: "\f04b";
font-family: FontAwesome;
color: #676a6c;
}
ul.ztree.zTreeDragUL {
margin: 0;
padding: 0;
position: absolute;
width: auto;
height: auto;
overflow: hidden;
background-color: #cfcfcf;
border: 1px #676a6c dotted;
opacity: 0.8;
filter: alpha(opacity=80);
}
.ztreeMask {
z-index: 10000;
background-color: #cfcfcf;
opacity: 0.0;
filter: alpha(opacity=0);
position: absolute;
}
src/assets/ztree/awesomeStyle/awesome.less 0 → 100644
View file @ 4e7f081f
/*-------------------------------------
zTree Style using fontawesome instead of images
version: 1.1
author: Mike King
email: mikkelking @ hotmail . com
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
/* Definitions ----------------------*/
@font-size: 12px;
// Regular icon and text color is white, which suits any medium -> dark background
@color-normal: #676a6c;
// Background color
@color-bg: #f3f3f3;
// Highlight color
@color-highlight: #676a6c;
// Partially selected (checkboxes, radio buttons)
@color-partial: #aaaaaa;
// Partially selected and focused (checkboxes, radio buttons)
@color-partfocus: #cad96c;
// Disabled altogether
@color-disabled: #808080;
// Editing color
@color-edit: yellow;
@w: 18px;
@h: 20px;
@pad-left: 2px;
@pad-top: 10px;
/* End of Definitions ---------------*/
/* Imports -------------------------*/
@import "fa.less";
/* End of Imports ------------------*/
.ztree * {padding:0; margin:0; font-size:@font-size; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif; background-color: @color-bg;}
.ztree {
margin:0; padding:5px; color:@color-normal; background-color: @color-bg;
li {
padding:0; margin:0; list-style:none; line-height:17px; text-align:left; white-space:nowrap; outline:0;
ul {
margin: 0px; padding:0 0 0 18px;
}
ul.line { }
a {padding-right:3px; margin:0; cursor:pointer; height:@h; color:@color-normal; background-color: transparent;
text-decoration:none; vertical-align:top; display: inline-block;
input.rename {height:14px; width:80px; padding:0; margin:0;
color: @color-bg; background-color: @color-normal;
font-size:@font-size; border:1px #585956 solid; *border:0px}
}
a:hover {
background: #e7f4f9;
border-radius: 2px;
box-shadow: inset 0 0 1px #cccccc;
}
a.curSelectedNode {padding-top:0px; background-color:#beebff; color:@color-highlight; height:@h; opacity:0.8;}
a.curSelectedNode_Edit {padding-top:0px; background-color:#f3f3f3; color:red; height:@h; border:1px #676a6c solid; opacity:0.8;}
a.tmpTargetNode_inner {padding-top:0px; background-color:#f3f3f3; color:@color-highlight; height:@h; border:1px #666 solid;
opacity:0.8; filter:alpha(opacity=80)}
a.tmpTargetNode_prev {}
a.tmpTargetNode_next {}
span {line-height:@h; margin-right:2px; background-color:transparent;}
span.button {line-height:0; margin:0; padding: 0; width:@w; height:@h; display: inline-block; vertical-align:top;
border:0px solid; cursor: pointer;outline:none;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
&::before{color: @color-normal; font-family: FontAwesome; padding-top:@pad-top;}
&.chk { margin:0px; cursor: auto; width: 12px;
display: inline-block;padding-top:@pad-top;padding-left:@pad-left;
&.checkbox_false_full::before {content: @fa-square-o;}
&.checkbox_false_full_focus::before {content: @fa-square-o; color:@color-highlight;}
&.checkbox_false_part::before {content: @fa-square-o;color: @color-partial;}
&.checkbox_false_part_focus::before {content: @fa-square-o; color:@color-partfocus;}
&.checkbox_false_disable::before {content: @fa-square-o; color:@color-disabled;}
&.checkbox_true_full::before {content: @fa-check-square-o;}
&.checkbox_true_full_focus::before {content: @fa-check-square-o;}
&.checkbox_true_part::before {content: @fa-check-square;}
&.checkbox_true_part_focus::before {content: @fa-check-square; color: @color-highlight}
&.checkbox_true_full_focus::before {content: @fa-check-square-o; color: @color-highlight}
&.checkbox_true_part::before {content: @fa-check-square-o;color: @color-partial}
&.checkbox_true_part_focus::before {content: @fa-check-square-o;color: @color-partfocus;}
&.checkbox_true_disable::before {content: @fa-check-square-o;color: @color-disabled}
&.radio_false_full::before {content: @fa-circle-o;}
&.radio_false_full_focus::before {content: @fa-circle-o;color: @color-highlight}
&.radio_false_part::before {content: @fa-circle-o;color: @color-partial}
&.radio_false_part_focus::before {content: @fa-circle-o;color: @color-highlight}
&.radio_false_disable::before {content: @fa-circle-thin;color: @color-disabled}
&.radio_true_full::before {content: @fa-dot-circle-o;}
&.radio_true_full_focus::before {content: @fa-dot-circle-o;color: @color-highlight}
&.radio_true_part::before {content: @fa-dot-circle-o;color: @color-partial}
&.radio_true_part_focus::before {content: @fa-dot-circle-o;color: @color-partial;}
&.radio_true_disable::before {content: @fa-circle-thin;color: @color-disabled}
}
&.switch {width:@w; height:@h}
&.root_open::before{content: @fa-angle-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.root_close::before{content: @fa-angle-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.roots_open::before{content: @fa-angle-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.roots_close::before{content: @fa-angle-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.center_open::before{content: @fa-angle-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.center_close::before{content: @fa-angle-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.bottom_open::before{content: @fa-angle-down;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.bottom_close::before{content: @fa-angle-right;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;}
&.noline_open{}
&.noline_close{}
&.root_docu{ background:none;}
&.roots_docu::before{content: @fa-folder-o;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.center_docu::before{padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.bottom_docu::before{padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.noline_docu{ background:none;}
&.ico_open::before {content: @fa-folder-open;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.ico_close::before {content: @fa-folder;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.ico_docu::before{content: @fa-folder;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.file_ico_docu::before{content: @fa-list-alt;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.linux_ico_docu::before{content: @fa-linux;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.windows_ico_docu::before{content: @fa-windows;font-family: FontAwesome;padding-top:@pad-top;padding-left:@pad-left;display: inline-block;color:@color-normal;}
&.edit {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;}
&.edit::before{content: @fa-pencil-square-o;font-family: FontAwesome;}
&.remove {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;}
&.remove::before{content: @fa-trash;font-family: FontAwesome;}
&.add {margin-left:4px; margin-right: -1px; vertical-align:top; *vertical-align:middle;padding-top:@pad-top;}
&.add::before{content: @fa-plus;font-family: FontAwesome;}
&.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
}
}
}
ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
// this is the arrow that moves
span.tmpzTreeMove_arrow{width:16px; height:@h; display: inline-block;
padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
background-color:transparent; background-attachment: scroll;
}
span.tmpzTreeMove_arrow::before{content: @fa-play;font-family: FontAwesome;color: @color-highlight;
}
// outline
ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden;
background-color:#cfcfcf; border:1px @color-highlight dotted; opacity:0.8; filter:alpha(opacity=80)}
.ztreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
src/assets/ztree/awesomeStyle/fa.less 0 → 100644
View file @ 4e7f081f
This diff is collapsed.
src/assets/ztree/demo.css 0 → 100644
View file @ 4e7f081f
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
body {color: #2f332a;font: 15px/21px Arial, Helvetica, simsun, sans-serif;background: #f0f6e4 \9;}
h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;}
h1 {font-size: 24px;line-height: 34px;text-align: center;}
h2 {font-size: 14px;line-height: 24px;padding-top: 5px;}
h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;}
a {color:#3C6E31;text-decoration: underline;}
a:hover {background-color:#3C6E31;color:white;}
input.radio {margin: 0 2px 0 8px;}
input.radio.first {margin-left:0;}
input.empty {color: lightgray;}
code {color: #2f332a;}
.highlight_red {color:#A60000;}
.highlight_green {color:#A7F43D;}
li {list-style: circle;font-size: 12px;}
li.title {list-style: none;}
ul.list {margin-left: 17px;}
div.content_wrap {width: 600px;height:380px;}
div.content_wrap div.left{float: left;width: 250px;}
div.content_wrap div.right{float: right;width: 340px;}
div.zTreeDemoBackground {width:250px;height:362px;text-align:left;}
ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
ul.log.small {height:45px;}
ul.log li {color: #666666;list-style: none;padding-left: 10px;}
ul.log li.dark {background-color: #E3E3E3;}
/* ruler */
div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}
div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}
\ No newline at end of file
src/assets/ztree/jquery.ztree.all.min.js 0 → 100644
View file @ 4e7f081f
This diff is collapsed.
src/assets/ztree/metroStyle/metroStyle.css 0 → 100644
View file @ 4e7f081f
/*-------------------------------------
zTree Style
version: 3.4
author: Hunter.z
email: hunter.z@263.net
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
.ztree {margin:0; padding:5px; color:#333}
.ztree li{padding:0; margin:0; list-style:none; line-height:17px; text-align:left; white-space:nowrap; outline:0}
.ztree li ul{ margin:0; padding:0 0 0 18px}
.ztree li ul.line{ background:url(./img/line_conn.png) 0 0 repeat-y;}
.ztree li a {padding-right:3px; margin:0; cursor:pointer; height:21px; color:#333; background-color: transparent; text-decoration:none; vertical-align:top; display: inline-block}
.ztree li a:hover {text-decoration:underline}
.ztree li a.curSelectedNode {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; opacity:0.8;}
.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; border:1px #666 solid; opacity:0.8;}
.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#aaa; color:white; height:21px; border:1px #666 solid;
opacity:0.8; filter:alpha(opacity=80)}
.ztree li a.tmpTargetNode_prev {}
.ztree li a.tmpTargetNode_next {}
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
font-size:12px; border:1px #585956 solid; *border:0px}
.ztree li span {line-height:21px; margin-right:2px}
.ztree li span.button {line-height:0; margin:0; padding: 0; width:21px; height:21px; display: inline-block; vertical-align:middle;
border:0 none; cursor: pointer;outline:none;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-image:url("./img/metro.png"); *background-image:url("./img/metro.gif")}
.ztree li span.button.chk {width:13px; height:13px; margin:0 2px; cursor: auto}
.ztree li span.button.chk.checkbox_false_full {background-position: -5px -5px;}
.ztree li span.button.chk.checkbox_false_full_focus {background-position: -5px -26px;}
.ztree li span.button.chk.checkbox_false_part {background-position: -5px -48px;}
.ztree li span.button.chk.checkbox_false_part_focus {background-position: -5px -68px;}
.ztree li span.button.chk.checkbox_false_disable {background-position: -5px -89px;}
.ztree li span.button.chk.checkbox_true_full {background-position: -26px -5px;}
.ztree li span.button.chk.checkbox_true_full_focus {background-position: -26px -26px;}
.ztree li span.button.chk.checkbox_true_part {background-position: -26px -48px;}
.ztree li span.button.chk.checkbox_true_part_focus {background-position: -26px -68px;}
.ztree li span.button.chk.checkbox_true_disable {background-position: -26px -89px;}
.ztree li span.button.chk.radio_false_full {background-position: -47px -5px;}
.ztree li span.button.chk.radio_false_full_focus {background-position: -47px -26px;}
.ztree li span.button.chk.radio_false_part {background-position: -47px -47px;}
.ztree li span.button.chk.radio_false_part_focus {background-position: -47px -68px;}
.ztree li span.button.chk.radio_false_disable {background-position: -47px -89px;}
.ztree li span.button.chk.radio_true_full {background-position: -68px -5px;}
.ztree li span.button.chk.radio_true_full_focus {background-position: -68px -26px;}
.ztree li span.button.chk.radio_true_part {background-position: -68px -47px;}
.ztree li span.button.chk.radio_true_part_focus {background-position: -68px -68px;}
.ztree li span.button.chk.radio_true_disable {background-position: -68px -89px;}
.ztree li span.button.switch {width:21px; height:21px}
.ztree li span.button.root_open{background-position:-105px -63px}
.ztree li span.button.root_close{background-position:-126px -63px}
.ztree li span.button.roots_open{background-position: -105px 0;}
.ztree li span.button.roots_close{background-position: -126px 0;}
.ztree li span.button.center_open{background-position: -105px -21px;}
.ztree li span.button.center_close{background-position: -126px -21px;}
.ztree li span.button.bottom_open{background-position: -105px -42px;}
.ztree li span.button.bottom_close{background-position: -126px -42px;}
.ztree li span.button.noline_open{background-position: -105px -84px;}
.ztree li span.button.noline_close{background-position: -126px -84px;}
.ztree li span.button.root_docu{ background:none;}
.ztree li span.button.roots_docu{background-position: -84px 0;}
.ztree li span.button.center_docu{background-position: -84px -21px;}
.ztree li span.button.bottom_docu{background-position: -84px -42px;}
.ztree li span.button.noline_docu{ background:none;}
.ztree li span.button.ico_open{margin-right:2px; background-position: -147px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_close{margin-right:2px; margin-right:2px; background-position: -147px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_docu{margin-right:2px; background-position: -147px -42px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit {margin-left:2px; margin-right: -1px; background-position: -189px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit:hover {
background-position: -168px -21px;
}
.ztree li span.button.remove {margin-left:2px; margin-right: -1px; background-position: -189px -42px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.remove:hover {
background-position: -168px -42px;
}
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position: -189px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.add:hover {
background-position: -168px 0;
}
.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
span.tmpzTreeMove_arrow {width:16px; height:21px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-position:-168px -84px; background-image:url("./img/metro.png"); *background-image:url("./img/metro.gif")}
ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
.ztreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
src/assets/ztree/ztreestyle/ztreestyle.css 0 → 100644
View file @ 4e7f081f
/*-------------------------------------
zTree Style
version: 3.5.19
author: Hunter.z
email: hunter.z@263.net
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
.ztree {margin:0; padding:5px; color:#333}
.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
.ztree li ul{ margin:0; padding:0 0 0 18px}
.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
text-decoration:none; vertical-align:top; display: inline-block}
.ztree li a:hover {text-decoration:underline}
.ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid;
opacity:0.8; filter:alpha(opacity=80)}
.ztree li a.tmpTargetNode_prev {}
.ztree li a.tmpTargetNode_next {}
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
font-size:12px; border:1px #7EC4CC solid; *border:0px}
.ztree li span {line-height:16px; margin-right:2px}
.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
border:0 none; cursor: pointer;outline:none;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto}
.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px}
.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px}
.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px}
.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px}
.ztree li span.button.chk.radio_false_part {background-position:-28px -28px}
.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px}
.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px}
.ztree li span.button.chk.radio_true_full {background-position:-42px 0}
.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px}
.ztree li span.button.chk.radio_true_part {background-position:-42px -28px}
.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px}
.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px}
.ztree li span.button.switch {width:18px; height:18px}
.ztree li span.button.root_open{background-position:-92px -54px}
.ztree li span.button.root_close{background-position:-74px -54px}
.ztree li span.button.roots_open{background-position:-92px 0}
.ztree li span.button.roots_close{background-position:-74px 0}
.ztree li span.button.center_open{background-position:-92px -18px}
.ztree li span.button.center_close{background-position:-74px -18px}
.ztree li span.button.bottom_open{background-position:-92px -36px}
.ztree li span.button.bottom_close{background-position:-74px -36px}
.ztree li span.button.noline_open{background-position:-92px -72px}
.ztree li span.button.noline_close{background-position:-74px -72px}
.ztree li span.button.root_docu{ background:none;}
.ztree li span.button.roots_docu{background-position:-56px 0}
.ztree li span.button.center_docu{background-position:-56px -18px}
.ztree li span.button.bottom_docu{background-position:-56px -36px}
.ztree li span.button.noline_docu{ background:none;}
.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
/* level style*/
/*.ztree li span.button.level0 {
display:none;
}
.ztree li ul.level0 {
padding:0;
background:none;
}*/
\ No newline at end of file
src/sass/style.scss
View file @ 4e7f081f
......@@ -71,3 +71,23 @@ $material-design-icons-font-path: '~/material-design-icons/iconfont/';
//ngx-tree div.ngx-tree div.ngx-tree-vr {
// display: none;
//}
.ztree * {
background-color: inherit !important;
color: #ffffff;
white-space: nowrap;
text-overflow: ellipsis;
}
//.ztree li {
//font-size: 15pt !important;
// padding-top: 5px !important;
//}
//
//.ztree li span.node_name {
// padding-left: 8px !important;
//}
.ztree li span.button::before {
color: #ffffff !important;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment