Revision 78e2d3dd
b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html | ||
---|---|---|
27 | 27 |
<ul> |
28 | 28 |
<li><a href="vm_list_v1.html">VMs list page</a> (kpal original design)</li> |
29 | 29 |
<li><a href="vm_details_v1.html">VM details page</a> (kpal original design)</li> |
30 |
<li><a href="vm_create_a_v1.html">Create new machine</a> (kpal original design)</li> |
|
30 | 31 |
<li><a href="network_list_v1.html">Networks list page</a> (kpal original design)</li> |
31 | 32 |
<li><a href="network_details_v1.html">Network details page</a> (kpal original design) |
32 |
<li><a href="vm_create_a_v1.html">Create new machine</a> (kpal original design)</li>
|
|
33 |
<li><a href="network_create_v1.html">Create new network</a></li>
|
|
33 | 34 |
|
34 | 35 |
</ul> |
35 | 36 |
<!-- |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/glafkopis.js | ||
---|---|---|
19 | 19 |
$('.lt-sidebar li a.flavor_selection').click(function(e){ |
20 | 20 |
e.preventDefault(); |
21 | 21 |
select_flavor = 1; |
22 |
console.log('yio!') |
|
23 | 22 |
var classes = $(this).attr('class').split(" "); |
24 | 23 |
// the second class is: 'small_flavor' or 'medium_flavor' or 'large_flavor' |
25 | 24 |
|
... | ... | |
31 | 30 |
}); |
32 | 31 |
|
33 | 32 |
|
33 |
|
|
34 |
// create network |
|
35 |
// checkbox: basic reaction on click (checked, unchecked) |
|
36 |
|
|
37 |
|
|
38 |
|
|
39 |
|
|
40 |
$('.network_options .check').click(function(e){ |
|
41 |
e.preventDefault(); |
|
42 |
var checkbox = $(this).find('.custom_checkbox'); |
|
43 |
var list = $(this).closest('ul'); |
|
44 |
|
|
45 |
checkAction(checkbox); //allazw to checkbox p pataw |
|
46 |
if(list.hasClass('subnet_options')){ |
|
47 |
checkedBefore = $(this).closest('li').siblings('li').find('span.checkbox-checked'); |
|
48 |
if($(checkedBefore).closest('li').find('a').hasClass('manual')) |
|
49 |
{ |
|
50 |
$(checkedBefore).closest('li').find('.manual_sub').hide(); |
|
51 |
} |
|
52 |
checkAction(checkedBefore); //allazw ta alla checkboxes |
|
53 |
|
|
54 |
if($(this).hasClass('manual')) { |
|
55 |
|
|
56 |
if($(checkbox).text()=='a') { |
|
57 |
$(this).closest('span').find('.manual_sub').hide(); |
|
58 |
} |
|
59 |
else { |
|
60 |
$(this).closest('span').find('.manual_sub').show(); |
|
61 |
} |
|
62 |
|
|
63 |
//$(this).closest('span').find('.manual_sub').toggleClass('hidden'); |
|
64 |
|
|
65 |
} |
|
66 |
} |
|
67 |
else if($(this).closest('li').hasClass('dhcp_option')) { |
|
68 |
if($(checkbox).text()=='a') { |
|
69 |
$('.network_options').find('.subnet_options').hide(); |
|
70 |
} |
|
71 |
else { |
|
72 |
$('.network_options').find('.subnet_options').show(); |
|
73 |
} |
|
74 |
} |
|
75 |
console.log(checkbox); |
|
76 |
}) |
|
34 | 77 |
|
35 | 78 |
}); |
36 | 79 |
|
80 |
|
|
81 |
function checkAction(checkbox) { |
|
82 |
var otherChecked = checkbox.closest('li').siblings('li').find('span.checkbox-checked').length; |
|
83 |
if(otherChecked!=0){ |
|
84 |
checkbox.toggleClass('checkbox-checked'); |
|
85 |
if(checkbox.hasClass('checkbox-checked')){ |
|
86 |
checkbox.html('b'); |
|
87 |
|
|
88 |
} |
|
89 |
else{ |
|
90 |
|
|
91 |
checkbox.html('a'); |
|
92 |
} |
|
93 |
} |
|
94 |
else{ |
|
95 |
console.log('Dn kanw tpt!'); |
|
96 |
} |
|
97 |
} |
|
98 |
|
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_create_v1.html | ||
---|---|---|
1 |
|
|
2 |
<!DOCTYPE html> |
|
3 |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> |
|
4 |
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> |
|
5 |
|
|
6 |
<head> |
|
7 |
<meta charset="utf-8" /> |
|
8 |
<meta name="viewport" content="width=device-width" /> |
|
9 |
<title>Synnefo | Create Network</title> |
|
10 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'> |
|
11 |
<link rel="stylesheet" href="stylesheets/normalize.css" /> |
|
12 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
|
13 |
<link rel="stylesheet" href="stylesheets/styles.css" /> |
|
14 |
<link rel="stylesheet" href="stylesheets/font_custom.css" /> |
|
15 |
<script src="javascripts/vendor/custom.modernizr.js"></script> |
|
16 |
|
|
17 |
</head> |
|
18 |
<body> |
|
19 |
<div class="dummy-navigation"> |
|
20 |
<a href="" class="close">X</a> |
|
21 |
<a href="index.html">Homepage</a><br> |
|
22 |
<a href="" class="our" data-our="questions">Show/Hide questions</a><br> |
|
23 |
<a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br> |
|
24 |
<a href="" class="our" data-our="problems">Show/Hide problems</a><br> |
|
25 |
</div> |
|
26 |
<div class="row-full"> |
|
27 |
<header class="header"> |
|
28 |
|
|
29 |
<div class="logo"> |
|
30 |
<img src="images/logo_01.png" alt="software logo"> |
|
31 |
</div> |
|
32 |
|
|
33 |
<nav class="top-nav icons-nav"> |
|
34 |
|
|
35 |
<ul> |
|
36 |
<li><a href="" data-tooltip class="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li> |
|
37 |
<li><a href="" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li> |
|
38 |
|
|
39 |
<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li> |
|
40 |
<li><a href="" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li> |
|
41 |
</ul> |
|
42 |
|
|
43 |
</nav> |
|
44 |
|
|
45 |
<div class="login"> |
|
46 |
<a href="">test@grnet.gr</a> |
|
47 |
</div> |
|
48 |
<div class="actions clearfix"> |
|
49 |
|
|
50 |
<div class="lt-actions"> |
|
51 |
<div class="new-btn"><a href="network_create_v1.html" class="current"><span>+</span> NEW NETWORK </a></div> |
|
52 |
</div> |
|
53 |
<div class="main-actions"> |
|
54 |
<ul> |
|
55 |
<li><a href="">Reboot</a></li> |
|
56 |
<li><a href="">Shutdown</a></li> |
|
57 |
<li class="single"><a href="">Console</a></li> |
|
58 |
<li><a href="">Multiple action</a></li> |
|
59 |
<li class="single"><a href="">Single action</a></li> |
|
60 |
</ul> |
|
61 |
</div> |
|
62 |
</div> |
|
63 |
</header> |
|
64 |
|
|
65 |
</div> |
|
66 |
<div class="row-full wrapper "> |
|
67 |
<div class="overlay create-vm create-network"> |
|
68 |
<div class="lt-sidebar nav"> |
|
69 |
tba...? |
|
70 |
|
|
71 |
</div> |
|
72 |
<div class="main"> |
|
73 |
<a href="network_list_v1.html" class="close close_char" title="cancel network creation"><span class="snf-font">e</span></a> |
|
74 |
<div> |
|
75 |
<ul class="network_options clearfix"> |
|
76 |
<li> |
|
77 |
<form><span >Network Name:</span><input type="text" name="network_name"></form> |
|
78 |
</li> |
|
79 |
<li class="dhcp_option"><span>Assign IP addresses automatically:</span> |
|
80 |
<a href="" class="check"> |
|
81 |
<span class="snf-font custom_checkbox checkbox-checked">b</span> |
|
82 |
</a> |
|
83 |
<p> |
|
84 |
If you enable DHCP on the private network, connected virtual machines will automatically be assigned an IP address based on the given subnet. You may disable this option if you want to assign IP addresses to the connected virtual machines manually. |
|
85 |
</p> |
|
86 |
</li> |
|
87 |
<li> |
|
88 |
<ul class="subnet_options"> |
|
89 |
<span class="sub_title">Network subnet:</span> |
|
90 |
<li><span>Auto |
|
91 |
<a href="" class="check"> |
|
92 |
<span class="snf-font custom_checkbox checkbox-checked">b |
|
93 |
</span> |
|
94 |
</a> |
|
95 |
</span></li> |
|
96 |
<li class="manual"><form><span>Manual <a href="" class="check manual"><span class="snf-font custom_checkbox">a</span></a><input class="manual_sub hidden" type="text" name="network_name"></span></form> |
|
97 |
</li> |
|
98 |
<li><span>10.0.0.0/24 <a href="" class="check"><span class="snf-font custom_checkbox">a</span></a></span> |
|
99 |
</li> |
|
100 |
<li><span>192.168.0.0/24 <a href="" class="check"><span class="snf-font custom_checkbox">a</span></a></span> |
|
101 |
</li> |
|
102 |
</ul> |
|
103 |
</ul> |
|
104 |
</div> |
|
105 |
<div class="navigation clearfix"> |
|
106 |
|
|
107 |
<a class="rt btn2" href="network_list_v1.html" title="Create your private network">Create Network</a> |
|
108 |
</div> |
|
109 |
</div> |
|
110 |
</div> |
|
111 |
|
|
112 |
</div> |
|
113 |
<div class="extras"> |
|
114 |
<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span> |
|
115 |
<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span> |
|
116 |
<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span> |
|
117 |
</div> |
|
118 |
|
|
119 |
<script src="javascripts/vendor/jquery.js"></script> |
|
120 |
<script src="javascripts/foundation/foundation.js"></script> |
|
121 |
|
|
122 |
<script src="javascripts/foundation/foundation.alerts.js"></script> |
|
123 |
|
|
124 |
<script src="javascripts/foundation/foundation.clearing.js"></script> |
|
125 |
|
|
126 |
<script src="javascripts/foundation/foundation.cookie.js"></script> |
|
127 |
|
|
128 |
<script src="javascripts/foundation/foundation.dropdown.js"></script> |
|
129 |
|
|
130 |
<script src="javascripts/foundation/foundation.forms.js"></script> |
|
131 |
|
|
132 |
<script src="javascripts/foundation/foundation.joyride.js"></script> |
|
133 |
|
|
134 |
<script src="javascripts/foundation/foundation.magellan.js"></script> |
|
135 |
|
|
136 |
<script src="javascripts/foundation/foundation.orbit.js"></script> |
|
137 |
|
|
138 |
<script src="javascripts/foundation/foundation.placeholder.js"></script> |
|
139 |
|
|
140 |
<script src="javascripts/foundation/foundation.reveal.js"></script> |
|
141 |
|
|
142 |
<script src="javascripts/foundation/foundation.section.js"></script> |
|
143 |
|
|
144 |
<script src="javascripts/foundation/foundation.tooltips.js"></script> |
|
145 |
|
|
146 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
|
147 |
<script src="javascripts/common.js"></script> |
|
148 |
<script src="javascripts/glafkopis.js"></script> |
|
149 |
|
|
150 |
|
|
151 |
<script> |
|
152 |
$(document).foundation(); |
|
153 |
</script> |
|
154 |
</body> |
|
155 |
</html> |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_details_v1.html | ||
---|---|---|
50 | 50 |
<div class="actions clearfix"> |
51 | 51 |
|
52 | 52 |
<div class="lt-actions"> |
53 |
<div class="new-btn"><a href=""><span>+</span> NEW NETWORK </a></div> |
|
53 |
<div class="new-btn"><a href="network_create_v1.html"><span>+</span> NEW NETWORK </a></div>
|
|
54 | 54 |
</div> |
55 | 55 |
<div class="main-actions"> |
56 | 56 |
<ul> |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list_v1.html | ||
---|---|---|
152 | 152 |
|
153 | 153 |
|
154 | 154 |
<li> |
155 |
<div class="add-new"><a href="">NEW<br>NETWORK</a></div> |
|
155 |
<div class="add-new"><a href="network_create_v1.html">NEW<br>NETWORK</a></div>
|
|
156 | 156 |
</li> |
157 | 157 |
|
158 | 158 |
</ul> |
... | ... | |
202 | 202 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
203 | 203 |
<script src="javascripts/common.js"></script> |
204 | 204 |
<script src="javascripts/glafkopis.js"></script> |
205 |
|
|
206 |
|
|
207 |
<script src="javascripts/gp-script.js"></script> |
|
208 |
|
|
205 |
|
|
209 | 206 |
<script> |
210 | 207 |
$(document).foundation(); |
211 | 208 |
</script> |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/athina.scss | ||
---|---|---|
1 |
$red: red; |
|
1 |
// Global Foundation Settings |
|
2 |
@import "settings"; |
|
2 | 3 |
|
4 |
/* create vm: choose flavor */ |
|
3 | 5 |
|
6 |
.titles{ |
|
7 |
color: white; |
|
8 |
} |
|
4 | 9 |
|
5 | 10 |
|
11 |
.lt-sidebar ul li a.flavor_selection{ |
|
12 |
display: block; |
|
13 |
} |
|
6 | 14 |
|
7 |
body { color:$red;} |
|
15 |
|
|
16 |
.overlay .lt-sidebar ul li a.flavor_selection.chosen_flavor span{ |
|
17 |
display: inline-block; |
|
18 |
} |
|
19 |
|
|
20 |
|
|
21 |
|
|
22 |
.create-vm .main .select-flavor dl dt span{ |
|
23 |
&:hover{ |
|
24 |
color: white; |
|
25 |
border-color: white; |
|
26 |
background-color: $secondary-color; |
|
27 |
} |
|
28 |
&.current { |
|
29 |
&:hover { |
|
30 |
color: $secondary-color; |
|
31 |
border-color: white; |
|
32 |
background-color: white; |
|
33 |
} |
|
34 |
} |
|
35 |
} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/athina.css | ||
---|---|---|
1 |
/* line 7, ../sass/athina.scss */ |
|
2 |
body { |
|
3 |
color: red; |
|
1 |
/* create vm: choose flavor */ |
|
2 |
/* line 6, ../sass/athina.scss */ |
|
3 |
.titles { |
|
4 |
color: white; |
|
5 |
} |
|
6 |
|
|
7 |
/* line 11, ../sass/athina.scss */ |
|
8 |
.lt-sidebar ul li a.flavor_selection { |
|
9 |
display: block; |
|
10 |
} |
|
11 |
|
|
12 |
/* line 16, ../sass/athina.scss */ |
|
13 |
.overlay .lt-sidebar ul li a.flavor_selection.chosen_flavor span { |
|
14 |
display: inline-block; |
|
15 |
} |
|
16 |
|
|
17 |
/* line 23, ../sass/athina.scss */ |
|
18 |
.create-vm .main .select-flavor dl dt span:hover { |
|
19 |
color: white; |
|
20 |
border-color: white; |
|
21 |
background-color: #ff7bac; |
|
22 |
} |
|
23 |
/* line 29, ../sass/athina.scss */ |
|
24 |
.create-vm .main .select-flavor dl dt span.current:hover { |
|
25 |
color: #ff7bac; |
|
26 |
border-color: white; |
|
27 |
background-color: white; |
|
4 | 28 |
} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/styles.css | ||
---|---|---|
136 | 136 |
} |
137 | 137 |
|
138 | 138 |
|
139 |
/* create vm: choose flavor */ |
|
140 | 139 |
|
141 |
.titles{ |
|
142 |
color: white; |
|
143 |
} |
|
144 |
|
|
145 |
|
|
146 |
.lt-sidebar ul li a.flavor_selection{ |
|
147 |
display: block; |
|
148 |
} |
|
149 |
|
|
150 |
|
|
151 |
.overlay .lt-sidebar ul li a.flavor_selection.chosen_flavor span{ |
|
152 |
display: inline-block; |
|
153 |
} |
|
154 |
|
|
155 |
.create-vm .main .select-flavor dl dt span:hover{ |
|
156 |
color: white; |
|
157 |
border-color: white; |
|
158 |
background-color: #ff7bac; |
|
159 |
} |
|
160 |
|
|
161 |
|
|
162 |
.create-vm .main .select-flavor dl dt span.current:hover{ |
|
163 |
color: #ff7bac; |
|
164 |
border-color: white; |
|
165 |
background-color: white; |
|
166 |
} |
|
167 | 140 |
|
168 | 141 |
/* styles for network details */ |
169 | 142 |
|
... | ... | |
236 | 209 |
} |
237 | 210 |
|
238 | 211 |
|
239 |
/* styles for confirmation window */ |
|
240 |
|
|
241 |
.confirmation{ |
|
242 |
|
|
243 |
} |
|
244 |
|
|
245 | 212 |
|
246 | 213 |
/* detailed pages: about the gaps that separate the area with the big img and the buttons from the rest of the page */ |
247 | 214 |
|
... | ... | |
315 | 282 |
|
316 | 283 |
.overlay .lt-sidebar.nav { |
317 | 284 |
overflow: auto; |
318 |
} |
|
285 |
} |
|
286 |
|
|
287 |
|
|
288 |
/* styles for close icons (created with fontIcon "snf-font") */ |
|
289 |
|
|
290 |
.overlay .close_char { |
|
291 |
background: none; |
|
292 |
text-indent: 0; |
|
293 |
font-size: 1.8em; /* for the the character e (for d we can put 2em) */ |
|
294 |
color: white; |
|
295 |
} |
|
296 |
|
|
297 |
|
|
298 |
|
|
299 |
/* create network styles */ |
|
300 |
|
|
301 |
.create-network { |
|
302 |
color: white; |
|
303 |
} |
|
304 |
|
|
305 |
.create-network .check{ |
|
306 |
color: white; |
|
307 |
} |
|
308 |
|
|
309 |
.create-network p { |
|
310 |
font-size: 0.8em; |
|
311 |
font-style: italic; |
|
312 |
margin: 5px 0 0; |
|
313 |
width: 545px; |
|
314 |
} |
|
315 |
|
|
316 |
|
|
317 |
.create-network li { |
|
318 |
list-style: none outside none; |
|
319 |
} |
|
320 |
|
|
321 |
.subnet_options { |
|
322 |
margin: 0; |
|
323 |
} |
|
324 |
|
|
325 |
.network_options .check { |
|
326 |
position: absolute; |
|
327 |
right: 0; |
|
328 |
} |
|
329 |
|
|
330 |
.create-network .custom_checkbox { |
|
331 |
font-size: 1.3em; |
|
332 |
} |
|
333 |
|
|
334 |
|
|
335 |
.network_options { |
|
336 |
position: relative; |
|
337 |
width: 350px; |
|
338 |
min-height: 285px; |
|
339 |
|
|
340 |
} |
|
341 |
|
|
342 |
.network_options li { |
|
343 |
display: block; |
|
344 |
margin-bottom: 13px; |
|
345 |
} |
|
346 |
|
|
347 |
.subnet_options li { |
|
348 |
margin-bottom: 6px; |
|
349 |
padding-left: 155px; |
|
350 |
} |
|
351 |
|
|
352 |
|
|
353 |
.network_options li form { |
|
354 |
margin: 0; |
|
355 |
} |
|
356 |
.network_options li form input { |
|
357 |
position: absolute; |
|
358 |
display: inline-block; |
|
359 |
right: 0; |
|
360 |
width: 200px; |
|
361 |
height: 20px; |
|
362 |
font-size: 0.9em; |
|
363 |
} |
|
364 |
|
|
365 |
.network_options li.manual form input { |
|
366 |
right: -160px; |
|
367 |
width: 150px; |
|
368 |
} |
|
369 |
|
|
370 |
|
|
371 |
.network_options li form input.hidden { |
|
372 |
display: none; |
|
373 |
} |
|
374 |
|
|
375 |
span.sub_title { |
|
376 |
position: absolute; |
|
377 |
} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_create_b_v1.html | ||
---|---|---|
11 | 11 |
<link rel="stylesheet" href="stylesheets/normalize.css" /> |
12 | 12 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
13 | 13 |
<link rel="stylesheet" href="stylesheets/styles.css" /> |
14 |
|
|
14 |
<link rel="stylesheet" href="stylesheets/athina.css" /> |
|
15 | 15 |
<script src="javascripts/vendor/custom.modernizr.js"></script> |
16 | 16 |
|
17 | 17 |
</head> |
Also available in: Unified diff