Revision e2974c91

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common_ab.js
1
$(document).ready(function(){
2

  
3
    //show selection window of vm_list_v1.html
4
    var vm_options_win;
5
    $('li .vm_container').mouseenter(function(event){
6
        event.preventDefault();
7
        vm_options_win = $(this).find('.vm_options');
8
        if(vm_options_win.length!==0){
9
            vm_options_win.removeClass('invisible');
10
            vm_options_win.slideDown('slow');
11
        }
12

  
13
    }).mouseleave(function(event){
14
        event.preventDefault();
15
        if(!vm_options_win.hasClass('invisible'))
16
        {
17
            vm_options_win.slideUp('slow');
18
            vm_options_win.addClass('invisible');
19
        }
20
    })
21

  
22
    //checkbox in selection window of vm_list_v1.html
23
    $('.vm_options .select').click(function(event){
24
        event.preventDefault();
25
        var checkbox = $(this).find('.custom_checkbox');
26
        if(checkbox.hasClass('checkbox-unchecked')){
27
            checkbox.html('b');
28
            checkbox.removeClass('checkbox-unchecked'); 
29
        }
30
        else{
31
            checkbox.html('a'); 
32
            checkbox.addClass('checkbox-unchecked');
33
        }
34
    });
35
   
36
});
/dev/null
1
$(document).ready(function(){
2

  
3
    //show selection window of vm_list_v1.html
4
    var vm_options_win;
5
    $('li .vm_container').mouseenter(function(event){
6
        event.preventDefault();
7
        vm_options_win = $(this).find('.vm_options');
8
        if(vm_options_win.length!==0){
9
            vm_options_win.removeClass('invisible');
10
            vm_options_win.slideDown('slow');
11
        }
12

  
13
    }).mouseleave(function(event){
14
        event.preventDefault();
15
        if(!vm_options_win.hasClass('invisible'))
16
        {
17
            vm_options_win.slideUp('slow');
18
            vm_options_win.addClass('invisible');
19
        }
20
    })
21

  
22
    //checkbox in selection window of vm_list_v1.html
23
    $('.vm_options .select').click(function(event){
24
        event.preventDefault();
25
        var checkbox = $(this).find('.custom_checkbox');
26
        if(checkbox.hasClass('checkbox-unchecked')){
27
            checkbox.html('b');
28
            checkbox.removeClass('checkbox-unchecked'); 
29
        }
30
        else{
31
            checkbox.html('a'); 
32
            checkbox.addClass('checkbox-unchecked');
33
        }
34
    });
35
   
36
});
/dev/null
1

  
2
/* selection window (used to vm_list_v1.html) */
3

  
4
.vm_options{
5
	display: none;
6
	border: 1px solid #ff7bac;
7
	position: absolute;
8
	top: -20%;
9
	width: 100%;
10
	height: 100%;
11
	font-size: 27px;
12
	font-weight: bold;
13
	text-align: left;
14
	background-color: white;
15
	line-height: 45px;
16
	padding-left: 1em;
17
	padding-top: 0.65em;
18
}
19

  
20
.vm_options .custom_checkbox{
21
	display: inline-block;
22
	margin: 0;
23
	padding-left: 1em;	
24
	color: #ff7bac;
25
}
26

  
27
a.option:hover{
28
	color: #ff7bac;
29
}
30

  
31
.vm_container{
32
	width: 200px;
33
	display: inline-block;
34
	height: 187px;
35
	position: relative;
36

  
37
}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/styles.css
1

  
2
/* styles for selection window (used for vm_list_v1.html) */
3

  
4
.vm_options{
5
	display: none;
6
	border: 1px solid #ff7bac;
7
	position: absolute;
8
	top: -20%;
9
	width: 100%;
10
	height: 100%;
11
	font-size: 27px;
12
	font-weight: bold;
13
	text-align: left;
14
	background-color: white;
15
	line-height: 45px;
16
	padding-left: 1em;
17
	padding-top: 0.65em;
18
}
19

  
20
.vm_options .custom_checkbox{
21
	display: inline-block;
22
	margin: 0;
23
	padding-left: 1em;	
24
	color: #ff7bac;
25
}
26

  
27
a.option:hover{
28
	color: #ff7bac;
29
}
30

  
31
.vm_container{
32
	width: 200px;
33
	display: inline-block;
34
	height: 187px;
35
	position: relative;
36

  
37
}
38

  
39

  
40
/* styles for detailed info about vm (used for vm_details_v1.html) */
41

  
42

  
43
.graph_container{
44
	padding-bottom: 2em;
45

  
46
}
47

  
48

  
49
.wrap{
50
	position: relative;
51
}
52

  
53
.section_header{
54
	float: left;
55
	width:22%;
56
	margin-right: 2%;
57
	font-weight: bold;
58
}
59

  
60
.right_side{
61
	overflow: hidden;
62
	width: 76%;
63
}
64

  
65

  
66

  
67
.info_simple{
68
	display: inline-block;
69
	width: 200px;	
70
	margin-right: 10px;
71
}
72

  
73

  
74
.action_links{
75
	display: inline-block;
76
	width: 130px;
77
	
78
}
79

  
80
.btn_pinkb{
81
	width: 11.5em;
82
	height: 3.8em;
83
	line-height: 3.8em;
84
	border: 1px solid #ff7bac;
85
	position: absolute;
86
	top: 0;
87
	right: 0;
88
}
89

  
90
.btn_pinkb a{
91
	display: block;
92
	padding-left: 1em;
93
}
94

  
95
.btn_pinkb a:hover, a.black:hover{
96
	color: #ff7bac;
97
}
98

  
99

  
100
.btn_pinkb a img{
101
	position: absolute;
102
	right: 0.6em;
103
	top: 0.6em;
104
	height: 2.5em;
105
}
106

  
107

  
108
.action_links span:first-child{
109
	margin-right: 5px;
110
}
111

  
112
.action_links a{
113
	color: #ff7bac;
114
	margin-right: 5px;
115
}
116

  
117
.row{
118
	margin: 0 0 0.4em 0;
119
}
120
.middle_side{
121
	max-width: 70%;
122
}
123

  
124
.txt_size{
125
	height: 0.8em;
126
	vertical-align: baseline;
127
}
128

  
129
a.black{
130
	color: black;
131
}
132

  
133
a.black:hover{
134
	color: #ff7bac;
135
}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_details_v1.html
9 9
    <title>Synnefo | VM list</title>
10 10
    <link rel="stylesheet" href="stylesheets/normalize.css" />
11 11
    <link rel="stylesheet" href="stylesheets/app.css" />
12

  
12
    <link rel="stylesheet" href="stylesheets/styles.css" />
13 13
    <script src="javascripts/vendor/custom.modernizr.js"></script>
14 14

  
15 15
</head>
......
27 27
			<div class="logo">
28 28
				<img src="http://dummyimage.com/300x100/000/fff" alt="software logo">
29 29
			</div>
30
			<div class="new-btn"><a href=""><span>+</span> NEW MACHINE </a></div>
30
			<div class="new-btn"><a href="vm_create_a_v1.html"><span>+</span> NEW MACHINE </a></div>
31 31
			<!-- icons-nav -->
32 32
			<nav class="top-nav icons-nav">
33 33
				
......
64 64
	</div>
65 65
	<div class="row-full wrapper">
66 66
		<div class="lt-sidebar vms">
67

  
68
			<!-- sidebar -->
67 69
			<ul class="items-list">
68 70
				<li>
69 71
					<div class="img running">
......
75 77
						<span>my awsome machine</span>
76 78
					</p>
77 79
				</li>
78
				<li>
80
				<li class="current">
79 81
					<div class="img running">
80 82
						VM running
81 83
						<span class="os fedora">os</span>
......
137 139
				</li>
138 140
			</ul>
139 141
		</div>
142

  
143
		<!-- detailed view of vm -->
144

  
145
		<!-- main image of vm -->
140 146
		<div class="main details vm">
141
			<a href="vm_list_v1.html" class="back">back</a>
147
			<a href="vm_list_v1.html" class="close" title="back to vm list">close</a>
142 148
			<div class="top border-bottom-style1">
143 149
				<div class="img running">
144 150
					VM running
......
151 157
					</ul>
152 158
				</div>
153 159
			</div>
160

  
161
			<!--sections with details of vm -->
154 162
			<section class="border-bottom-style1 info">
155 163
				<dl>
156 164
					<dt>Name</dt>
......
158 166
					<dt>Status</dt>
159 167
					<dd>running</dd>
160 168
					<dt>OS</dt>
161
					<dd>xxx Windows</dd>
169
					<dd ><img class="txt_size" src="images/os-windows.png"> Windows</dd>
162 170
					<dt>IPv4</dt>
163 171
					<dd>83.212.97.127</dd>
164 172
				</dl>
165 173
			</section>
166
			<section class="border-bottom-style1 info">
167
				<dl>
168
					<dt>disks</dt>
169
					<dd>30Gb info info info</dd>
170
					<dt></dt>
171
					<dd>30Gb info info info</dd>
172
					<dt></dt>
173
					<dd>30Gb info info info</dd>
174
					
175
				</dl>
174
			<section class="wrap border-bottom-style1 info">
175
				<div class="tba">
176
					<div class="section_header">
177
						disks
178
					</div>
179
					<div class="right_side">
180
						<div class="middle_side">
181
							<div class="row">
182
								<div class="info_simple">
183
									30GB info info info
184
								</div>
185
								<div class="action_links">
186
									<span><a href="">view</a></span>
187
									<span><a href="">disconnect</a></span>
188
								</div>
189
							</div>
190
							<div class="row">
191
								<div class="info_simple">
192
									30GB info info info
193
								</div>
194
								<div class="action_links">
195
									<span><a href="">view</a></span>
196
									<span><a href="">disconnect</a></span>
197
								</div>
198
							</div>
199
							<div class="row">
200
								<div class="info_simple">
201
									30GB info info info
202
								</div>
203
								<div class="action_links">
204
									<span><a href="">view</a></span>
205
									<span><a href="">disconnect</a></span>
206
								</div>
207
							</div>
208
						</div>
209
						<div class="btn_pinkb">
210
							<a href="">
211
								add disk
212
								<img src="images/menu-icon-disks.png">
213
							</a>
214
						</div>
215
					</div>
216
				</div>
217
			
176 218
			</section>
177
			<section class="border-bottom-style1 info">
178
				<dl>
179
					<dt>networks</dt>
180
					<dd>network-1</dd>
181
					<dt></dt>
182
					<dd>network-1</dd>
183
					<dt></dt>
184
					<dd>network-1</dd>
185
				</dl>
219
			
220
			<section class="wrap border-bottom-style1 info">
221
				<div class="tba">
222
					<div class="section_header">
223
						networks
224
					</div>
225
					<div class="right_side">
226
						<div class="middle_side">
227
							<div class="row">
228
								<div class="info_simple">
229
								network 1
230
								</div>
231
								<div class="action_links">
232
									<span><a href="">view</a></span>
233
									<span><a href="">disconnect</a></span>
234
								</div>
235
							</div>
236
							<div class="row">
237
								<div class="info_simple">
238
								network 2
239
								</div>
240
								<div class="action_links">
241
									<span><a href="">view</a></span>
242
									<span><a href="">disconnect</a></span>
243
								</div>
244
							</div>
245
							<div class="row">
246
								<div class="info_simple">
247
								network 3
248
							</div>
249
								<div class="action_links">
250
									<span><a href="">view</a></span>
251
									<span><a href="">disconnect</a></span>
252
								</div>
253
							</div>
254
							<div class="btn_pinkb">
255
								<a href="">
256
									add network
257
									<img src="images/menu-icon-networks.png">
258
								</a>
259
							</div>
260
						</div>
261
					</div>
262
				</div>
186 263
			</section>
187
			<section class="border-bottom-style1 info">
188
				<dl>
189
					<dt>info</dt>
190
					<dd> <dt>CPUs</dt><dd>4</dd></dd>
191
					<dt></dt>
192
					<dd> <dt>RAM</dt><dd>2048MB</dd></dd>
193
					<dt></dt>
194
					<dd> <dt>System Disk</dt><dd>20GB</dd></dd>
195
					<dt></dt>
196
					<dd> <dt>Image</dt><dd>(deleted image)</dd></dd>
197
					<dt></dt>
198
					<dd> <dt>IPv4</dt><dd>83.212.97.127</dd></dd>
199
					<dt></dt>
200
					<dd> <dt>IPv6</dt><dd>2001:648:2ffc:1112:a80c:eaff:fe15:baee
201
</dd></dd>
202
				</dl>
203
				</section>
204
				<section class="border-bottom-style1 info">
205
				<dl>
206
					<dt>Name</dt>
207
					<dd>My awesome machine</dd>
208
					<dt>Name</dt>
209
					<dd>My awesome machine</dd>
210
					<dt>Name</dt>
211
					<dd>My awesome machine</dd>
212
					<dt>Name</dt>
213
					<dd>My awesome machine</dd>
214
				</dl>
264

  
265
			<section class="wrap border-bottom-style1 info">
266
				<div class="tba">
267
					<div class="section_header">
268
						info
269
					</div>
270
					<div class="right_side">
271
						<div class="middle_side">
272
							<div class="row">
273
								<span class="info_simple">
274
								CPUs
275
								</span>
276
								<span class="info_simple">
277
								4
278
								</span>								
279
							</div>
280
							<div class="row">
281
								<span class="info_simple">
282
								RAM
283
								</span>
284
								<span class="info_simple">
285
								2048MB
286
								</span>								
287
							</div>
288
							<div class="row">
289
								<span class="info_simple">
290
								System Disk
291
								</span>
292
								<span class="info_simple">
293
								20GB
294
								</span>								
295
							</div>
296
							<div class="row">
297
								<span class="info_simple">
298
								Image
299
								</span>
300
								<span class="info_simple">
301
								(deleted image)
302
								</span>								
303
							</div>
304
							<div class="row">
305
								<span class="info_simple">
306
								Image Size
307
								</span>
308
								<span class="info_simple">
309
								(none)
310
								</span>								
311
							</div>
312
							<div class="row">
313
								<span class="info_simple">
314
								IPv4
315
								</span>
316
								<span class="info_simple">
317
								83.212.97.127
318
								</span>								
319
							</div>
320
							<div class="row">
321
								<span class="info_simple">
322
								IPv6
323
								</span>
324
								<span class="info_simple">
325
								2001:648:2ffc:1112:a80c:eaff:fe15:baee
326
								</span>								
327
							</div>
328
						</div>
329
					</div>
330
				</div>
215 331
			</section>
216
			<section class="border-bottom-style1 info">
217
				<dl>
218
					<dt>Name</dt>
219
					<dd>My awesome machine</dd>
220
					<dt>Name</dt>
221
					<dd>My awesome machine</dd>
222
					<dt>Name</dt>
223
					<dd>My awesome machine</dd>
224
					<dt>Name</dt>
225
					<dd>My awesome machine</dd>
226
				</dl>
332

  
333

  
334

  
335
				<section class="wrap border-bottom-style1 info">
336
				<div class="tba">
337
					<div class="section_header">
338
						tags
339
					</div>
340
					<div class="right_side">
341
						<div class="middle_side">
342
							<div class="row">
343
								<span class="info_simple">
344
								Owner
345
								</span>
346
								<span class="info_simple">
347
								Kick ass dude
348
								</span>								
349
							</div>
350
							<div class="row">
351
								<span class="info_simple">
352
								Role
353
								</span>
354
								<span class="info_simple">
355
								Nothing
356
								</span>								
357
							</div>
358
							<div class="row">
359
								<span class="info_simple">
360
								OS
361
								</span>
362
								<span class="info_simple">
363
								Windows
364
								</span>								
365
							</div>
366
							<div class="row">
367
								<span class="info_simple">
368
								<br><a class="black" href="">+ Add new tag</a>
369
								</span>
370
							</div>
371
						</div>
372
					</div>
373
				</div>
374
			</section>
375
			<section class="info">
376
				<div class="row">
377
					<span class="section_header">
378
						CPU utilization
379
					</span>
380
					<div class="graph_container">
381
						<img src="images/cpu-ts.png">
382
					</div>		
383
				</div>
384
				<div class="row">
385
					<span class="section_header">
386
						network utilization
387
					</span>
388
					<div class="graph_container">
389
						<img src="images/net-ts.png">
390
					</div>		
391
				</div>
227 392
			</section>
228 393
		</div>
229 394
	</div>

Also available in: Unified diff