Skip to content

Commit 9e997f7

Browse files
vikasprogrammervikasprogrammer
authored
Merge pull request #11 from ExpressTech/dev-1.0.2
Added jstree for directory listing. Upload files anywhere in the tree.
2 parents 9ee369b + cbfedbc commit 9e997f7

16 files changed

Lines changed: 11129 additions & 262 deletions

File tree

‎assets/admin/css/style.css‎

Lines changed: 71 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,94 @@
1-
ul.tree-list,
2-
ul.tree-list ul,
3-
ul.tree-list li {
4-
margin : 0;
5-
padding : 0;
6-
list-style-type: none;
1+
.file-explorer{position: relative;display: inline-block;width: 100%;box-sizing: border-box;padding: 10px 0;}
2+
.file-explorer .home-node{
3+
background: none !important;
4+
padding: 0 !important;
75
}
8-
9-
ul.tree-list ul {
10-
padding-left: 0.3em;
6+
.file-explorer .jstree{
7+
padding: 0 5px;
118
}
12-
ul.tree-list li {
13-
border-left : 1px dotted #000;
14-
padding-left: 13px;
15-
background : url('../images/dotted.gif') scroll no-repeat 1px 0.8em;
9+
.file-explorer .jstree-container-ul .jstree-node {
10+
border-left: 1px solid #000;
11+
background: url('../images/dotted.gif') no-repeat;
12+
background-position: 0 15px;
13+
padding-left: 10px;
1614
}
17-
ul.tree-list ul > li:last-child {
15+
.file-explorer .jstree-container-ul .jstree-node:last-child {
1816
border-left-width: 0;
19-
padding-left : 14px;
20-
background : url('../images/dottedangle.gif') scroll no-repeat left top;
17+
background: url('../images/dottedangle.gif') scroll no-repeat;
18+
background-position: 0 0;
2119
}
22-
ul.tree-list a {
23-
text-decoration: none;
24-
display: block;
20+
.file-explorer i [role="presentation"],
21+
.file-explorer .jstree-icon {
22+
display:none;
23+
background: none;
2524
}
26-
ul.tree-list a .folder-name{font-weight:bold;}
27-
ul.tree-list a:hover, ul.tree-list a:focus {
28-
text-decoration: underline;
29-
box-shadow: none;
30-
background: #e0eefc;
31-
}
32-
ul.tree-list span{outline:none !important;}
33-
ul.tree-list li {
34-
text-align : justify;
35-
line-height: 25px;
25+
.file-explorer .jstree-anchor{
26+
display: inline-block;
27+
width: 100%;
28+
box-sizing: border-box;
29+
padding: 0 5px;
3630
position: relative;
31+
line-height: 30px;
32+
min-height: 30px;
33+
height: auto;
3734
}
38-
ul.tree-list label input[type=file]{
39-
display: none;
35+
.file-explorer .jstree-anchor.jstree-clicked{
36+
background:transparent;
37+
box-shadow: none;
4038
}
41-
.file-list {
42-
border : 1px solid #cccccc40;
43-
padding : 10px;
44-
border-radius: 5px;
45-
background : #fbfbfb;
39+
.file-explorer .jstree-anchor.jstree-clicked.jstree-hovered,
40+
.file-explorer .jstree-anchor.jstree-hovered {
41+
background: #e7f4f9;
42+
}
43+
.folder-name{cursor:pointer;font-size: 14px;}
44+
.jstree-anchor input[type=file]{
45+
position: absolute;
46+
left: 0;
47+
top: 0;
48+
width: 30px;
49+
height: 100%;
50+
z-index: -99;
4651
}
4752
.tree-folder{
4853
display: inline-block;
4954
width: 100%;
50-
position: absolute;
51-
top: 0;
52-
right: 0;
5355
}
54-
.tree-file{}
56+
.jstree-node{display: block;white-space: normal;}
57+
58+
.tree-file{
59+
display: inline-block;
60+
width: 100%;
61+
box-sizing: border-box;
62+
height: auto;
63+
}
5564
.tree-folder:hover,
5665
.tree-file:hover{
57-
background: #e0eefc;
5866
}
59-
li a:hover .folder-actions{display:inline-block;}
60-
.tree-file:hover .file-actions{display:inline-block;}
67+
.jstree-anchor:hover .folder-actions{display:inline-block;}
68+
.jstree-anchor:hover .file-actions{display:inline-block;}
6169
.folder-actions,
6270
.file-actions{
6371
position: absolute;
6472
top: 0;
6573
right: 0;
6674
display: none;
6775
}
68-
.folder-actions span,
69-
.folder-actions label,
70-
.file-actions a{
76+
.folder-actions span, .folder-actions label, .folder-actions a, .file-actions span, .file-actions a{
7177
display: inline-block !important;
72-
font-size: 12px;
78+
box-sizing: border-box;
7379
padding: 0 5px;
7480
border-right: 1px solid #DDD;
7581
vertical-align: middle;
82+
outline: none;
83+
box-shadow: none;
84+
overflow: hidden;
85+
}
86+
.folder-actions a i, .folder-actions span i, .folder-actions label i, .file-actions span i, .file-actions a i{
87+
text-decoration: none;
88+
color: #0073aa;
89+
vertical-align: top;
90+
font-size: 20px;
91+
line-height: 24px;
7692
}
7793
.folder-actions label:last-child,
7894
.folder-actions span:last-child,
@@ -106,6 +122,10 @@ li a:hover .folder-actions{display:inline-block;}
106122
}
107123
.tree-file-editable-area .updated-msg{display: none;margin: 0 10px;font-size: 14px;font-weight: bold;color: #27cc27;}
108124
.tree-file-editable-area .error-msg{display: none;margin: 0 10px;font-size: 14px;font-weight: bold;color: #d10404;}
125+
.CodeMirror {
126+
font-size: 13px;
127+
}
128+
.upload-loader,
109129
.save-loader{
110130
position: absolute;
111131
top: 0;
@@ -118,20 +138,24 @@ li a:hover .folder-actions{display:inline-block;}
118138
height: 100%;
119139
background: rgba(1, 78, 110, 0.2);
120140
}
141+
.upload-loader.active,
121142
.save-loader.active{display: flex;}
143+
.upload-loader .ldr,
122144
.save-loader .ldr {
123145
display: inline-block;
124146
position: relative;
125147
width: 100px;
126148
height: 100px;
127149
}
150+
.upload-loader .ldr div,
128151
.save-loader .ldr div {
129152
position: absolute;
130153
border: 5px solid #fff;
131154
opacity: 1;
132155
border-radius: 50%;
133156
animation: save-loader 1s cubic-bezier(0, 0.2, 0.8, 0.8) infinite;
134157
}
158+
.upload-loader .ldr div:nth-child(2),
135159
.save-loader .ldr div:nth-child(2) {
136160
animation-delay: -0.5s;
137161
}

0 commit comments

Comments
 (0)