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&amp;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