Skip to content

Commit 21a4e92

Browse files
amrdrazamrdraz
committed
Cimmiting after reverting because I discoverd I should commit
fixed color picker x cancel button fixed notselected fill and stroke in tool panel fixed timepanel made menu contains download svg made svgpael into code panel and amde it more generic
1 parent ba9bce1 commit 21a4e92

32 files changed

+17637
-476
lines changed

‎components/css/TabPanel.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@
7777
width:100%;
7878
height:100%;
7979

80-
border-left:#000 solid 1px;
8180
z-index:4;
8281
}
8382

@@ -86,14 +85,14 @@
8685
}
8786

8887
.scroll-bar.y {
89-
top:0px;
88+
top:-1px;
9089
right:0px;
9190
width:10px;
9291
}
9392

9493
.scroll-bar.x {
9594
bottom:0px;
96-
right:0px;
95+
right:-1px;
9796
height:10px;
9897
}
9998

@@ -120,7 +119,7 @@
120119
}
121120

122121
.scroll-bar .handel {
123-
background:#333;
122+
background:#444;
124123
}
125124

126125
.scroll-bar .slide-arrow {
@@ -130,16 +129,19 @@
130129
border:#444 solid 1px;
131130
}
132131
.scroll-bar.y > div:first-child {
132+
border-top:#444 solid 1px;
133133
top:0;
134134
}
135-
136135
.scroll-bar.y > div:last-child {
136+
border-bottom:#444 solid 1px;
137137
bottom:0;
138138
}
139139
.scroll-bar.x > div:first-child {
140+
border-left:#444 solid 1px;
140141
left:0;
141142
}
142143

143144
.scroll-bar.x > div:last-child {
145+
border-right:#444 solid 1px;
144146
right:0;
145147
}

‎components/css/TimePanel.css‎

Lines changed: 43 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
position:relative;
33

44
min-width:1020px;
5-
max-width:1020px;
65
min-height:200px;
6+
width:100%;
7+
height:100%;
78

89
background:#333;
910

@@ -21,8 +22,8 @@
2122

2223
min-width: 235px;
2324
max-width: 305px;
24-
height: 200px;
25-
25+
width:100%;
26+
height:100%;
2627
}
2728
.time-panel .area-content div{
2829
position:relative;
@@ -108,14 +109,16 @@
108109
right:20px;
109110
padding-bottom:1px;
110111
}
111-
.time-panel .elements-area .sliding-label{
112+
.time-panel .elements-area label.sliding-label{
112113
top:0px;
113-
right:40px;
114+
color:#ddd;
115+
right:50px;
114116
line-height:1;
115117
}
116118
.time-panel .elements-area .sliding-input{
117119
right:10px;
118120
height:10px;
121+
width:40px;
119122
line-height: 1;
120123
font-size: 9px;
121124
}
@@ -175,7 +178,7 @@
175178
width: 3px;
176179
border-left:#000 solid 1px;
177180
border-right:#000 solid 1px;
178-
height: 200px;
181+
height: 100%;
179182

180183
}
181184

@@ -185,79 +188,67 @@
185188

186189
.time-panel .timeline-area{
187190
top:0px;
188-
left:240px;
189-
190-
width: 760px;
191-
height: 200px;
192-
191+
height:100%;
193192
}
194193
.time-panel .timeline-area .scroll-area {
195194
overflow:hidden;
196-
width:759px;
197-
height:180px;
195+
width:100%;
196+
min-height:180px;
197+
top:0px;
198198
}
199-
.time-panel .scroll-bar {
199+
200+
201+
.time-panel > .scroll-bar {
200202
top:0px;
201203
right:0px;
202204

203-
width:20px;
204-
height:200px;
205+
width:19px;
206+
min-height:200px;
205207

206208
background: #666;
209+
border:none;
207210
border-left:#000 solid 1px;
208211
}
209212

213+
.time-panel .scroll-bar .container{
214+
background: #666;
215+
}
216+
.time-panel .scroll-bar .container:hover .handel{
217+
background: #333;
218+
}
219+
.time-panel .scroll-bar .handel{
220+
background: #444;
221+
}
222+
210223
.time-panel .slide-arrow,.time-panel .fit-button {
211224
width:18px;
212225
height:18px;
213-
214226
border:#444 solid 1px;
215227
}
216-
228+
.time-panel .fit-button {
229+
left:150px;
230+
}
217231
.time-panel .handel {
218232
background:#333;
219233
}
220234
.time-panel .container:hover .handel{
221235
background:#777;
222236
}
223237

224-
#timeLineYSlider {
225-
top:20px;
226-
227-
width:20px;
228-
height:160px;
229-
230-
background:#555;
231-
}
232-
#timeLineYSlider .container{
233-
top:20px;
234-
width:20px;
235-
height:120px;
236-
}
237-
#timeLineYSlider .handel {
238-
width:20px;
239-
}
240-
241-
#timeLineYSlider > div:first-child {
242-
top:0;
243-
}
244-
245-
#timeLineYSlider > div:last-child {
246-
bottom:0;
247-
}
248-
249238

250239
/*---------The header section of the timeline and element-are -----*/
251240

252241
.time-panel .area-header{
253242
width:100%;
254243
height:40px;
244+
top:0px;
245+
255246
background: #666;
256247

257248
}
258249

259250
.time-panel .timeline-area .area-header{
260-
width:760px;
251+
width:100%;
261252
}
262253

263254
#timeLane {
@@ -303,6 +294,11 @@
303294
height:162px;
304295
}
305296

297+
/*for making sure the Raphael cnavas starts from 0*/
298+
.time-panel .area-header svg, .time-panel .area-header DIV,.time-panel .area-footer DIV,.time-panel .area-footer svg {
299+
position:absolute !important;
300+
}
301+
306302
#trackerTime {
307303
position:relative !important;
308304

@@ -315,10 +311,6 @@
315311

316312
height:10px;
317313
}
318-
/*for making sure the Raphael cnavas starts from 0*/
319-
.time-panel .area-header svg, .time-panel .area-header DIV,.time-panel .area-footer DIV,.time-panel .area-footer svg {
320-
position:absolute !important;
321-
}
322314

323315
.time-panel .area-header .header-footer {
324316
top: 30px;
@@ -337,11 +329,9 @@
337329
top:40px;
338330
overflow:hidden;
339331
width:100%;
340-
height:140px;
341-
}
342-
.time-panel .timeline-area .area-content{
343-
width:760px;
332+
min-height:140px;
344333
}
334+
345335
.time-panel .timeline-area .anim {
346336
position:absolute;
347337
}
@@ -383,40 +373,13 @@
383373

384374
.time-panel .area-footer {
385375
bottom:0px;
386-
376+
z-index:3;
387377
width:100%;
388378
height:19px;
389379
background: #666;
390380
border-top:#000 solid 1px;
391381
}
392382

393-
#timeLineXSlider {
394-
right:0px;
395-
396-
width:590px;
397-
height:19px;
398-
399-
background:#555;
400-
}
401-
#timeLineXSlider .container{
402-
left:20px;
403-
width:550px;
404-
height:20px;
405-
}
406-
#timeLineXSlider .handel {
407-
height:20px;
408-
}
409-
410-
#timeLineXSlider > div:first-child {
411-
left:0;
412-
}
413-
#timeLineXSlider > div:last-child {
414-
right:0;
415-
}
416-
417-
.time-panel .fit-button{
418-
left:152px;
419-
}
420383

421384
#timeZoomSlider {
422385
left:0px;

‎components/css/layerPanel.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
#layers{
2+
position:absolute;
3+
right:30px;
4+
top:80px;
5+
6+
width:220px;
7+
height:auto;
8+
min-height:310px;
9+
max-height:710px;
10+
overflow:hidden;
11+
12+
background:#222;
13+
14+
color: #eee;
15+
overflow-y: scroll;
16+
}
17+
18+
#layers .row{
19+
background:#444;
20+
border-bottom:#555 solid 1px;
21+
position:relative;
22+
height: 29px;
23+
}
24+
#layers .row:hover{
25+
background:#333;
26+
}
27+
#layers .row.selected{
28+
background:#666;
29+
}
30+
31+
#layers .row .eye {
32+
border:#555 solid 1px;
33+
34+
width:15px;
35+
height:10px;
36+
37+
position:absolute;
38+
top:9px;
39+
left:5px;
40+
}
41+
42+
#layers .row .node {
43+
position:absolute;
44+
left:20px;
45+
}
46+
47+
#layers .node .arrow {
48+
width:8px;
49+
50+
position:relative;
51+
top:5px;
52+
left:8px;
53+
}
54+
#layers .node .name {
55+
max-width:8px;
56+
57+
position:relative;
58+
top:5px;
59+
left:12px;
60+
}
61+
62+
#layers .hide {
63+
display:none;
64+
}
65+
66+
#layers .controls {
67+
position:absolute;
68+
bottom: 0px;
69+
background:#333;
70+
height: 20px;
71+
width:100%;
72+
min-width:220px;
73+
}
74+
75+
#layers .controls svg, #layers .controls DIV{
76+
position:absolute;
77+
78+
top:0px;
79+
right:2px;
80+
}

‎components/css/slidingLabel.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ cursor:url(slider-cursor.svg),url(slider-cursor.gif),w-resize;
1515
-o-user-select: none;
1616
user-select: none;
1717
}
18-
label.sliding-label{
19-
color:#48e;
18+
div.sliding-label > label{
2019
border-bottom:#48e dashed 1px;
2120
padding-bottom: 1px;
2221
text-align:right;

0 commit comments

Comments
 (0)