Revision 8ca84852
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html | ||
|---|---|---|
| 1 |
|
|
| 2 | 1 |
<!DOCTYPE html> |
| 2 |
<!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]--> |
|
| 3 | 3 |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> |
| 4 | 4 |
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> |
| 5 | 5 |
|
| 6 | 6 |
<head> |
| 7 | 7 |
<meta charset="utf-8" /> |
| 8 |
<meta name="viewport" content="width=device-width" /> |
|
| 9 |
<title>New ui mocks</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 |
|
|
| 13 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
|
| 14 |
|
|
| 15 |
|
|
| 16 |
<script src="javascripts/vendor/custom.modernizr.js"></script> |
|
| 17 |
|
|
| 8 |
<meta name="viewport" content="width=device-width" /> |
|
| 9 |
<title>VMs list</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/farbtastic.css" /> |
|
| 14 |
<link rel="stylesheet" href="stylesheets/font_custom.css" /> |
|
| 15 |
<link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" /> |
|
| 16 |
<link rel="stylesheet" href="stylesheets/magnific-popup.css" /> |
|
| 18 | 17 |
</head> |
| 19 | 18 |
<body> |
| 20 |
<div class="row"> |
|
| 21 |
<h2>Misc</h2> |
|
| 22 |
<ul> |
|
| 23 |
<li><a href="icon_guide.html">Info about Icon-Font</a></li> |
|
| 24 |
</ul> |
|
| 25 |
|
|
| 26 |
<h2>Kpal original designs</h2> |
|
| 27 |
<ul> |
|
| 28 |
<li><a href="vm_list.html">VMs list page</a></li> |
|
| 29 |
<li><a href="vm_list_no_vms.html">VMs list with no machine</a></li> |
|
| 30 |
<li><a href="vm_details.html">VM Details</a></li> |
|
| 31 |
<li><a href="network_list.html">Networks list page</a></li> |
|
| 32 |
<li><a href="network_details.html">Network Details</a></li> |
|
| 33 |
<li><a href="volumes_list.html">Volumes list</a></li> |
|
| 34 |
<li><a href="images_list.html">Images list</a></li> |
|
| 35 |
<li><a href="snapshots_list.html">Snapshots list</a></li> |
|
| 36 |
<li><a href="pithos.html">Pithos</a></li> |
|
| 37 |
</ul> |
|
| 19 |
<script type="text/x-handlebars"> |
|
| 20 |
<header> |
|
| 21 |
<nav> |
|
| 22 |
<ul class="icons-nav"> |
|
| 23 |
<li>{{#link-to 'vms' class="has-tip" title="machines"}}<span class="snf-pc-outline"></span>{{/link-to}}</li>
|
|
| 24 |
<li>{{#link-to 'networks' class="has-tip" title="networks"}}<span class="snf-network-outline"></span>{{/link-to}}</li>
|
|
| 25 |
<li>{{#link-to 'disks' class="has-tip" title="disks"}}<span class="snf-volume-outline"></span>{{/link-to}}</li>
|
|
| 26 |
</ul> |
|
| 27 |
</nav> |
|
| 28 |
<div class="login"> |
|
| 29 |
<div class="wrap"> |
|
| 30 |
<a href="">user1@synnefo.org</a> |
|
| 31 |
<ul> |
|
| 32 |
<li><a href="">dashboard</a></li> |
|
| 33 |
<li><a href="">sign out</a></li> |
|
| 34 |
</ul> |
|
| 35 |
</div> |
|
| 36 |
</div> |
|
| 37 |
<div class="logo"> |
|
| 38 |
{{#link-to 'index'}}<img {{bind-attr src=logoUrl}} alt="software logo">{{/link-to}}
|
|
| 39 |
</div> |
|
| 40 |
</header> |
|
| 41 |
{{ outlet }}
|
|
| 42 |
</script> |
|
| 43 |
<script type="text/x-handlebars" data-template-name="networks"> |
|
| 44 |
<div class="row"> |
|
| 45 |
<ul> |
|
| 46 |
{{#each}}
|
|
| 47 |
<li>{{id}}<br>{{title}}<br>{{body}}</li>
|
|
| 48 |
{{/each}}
|
|
| 49 |
</ul> |
|
| 50 |
</div> |
|
| 51 |
</script> |
|
| 52 |
|
|
| 53 |
<script type="text/x-handlebars" data-template-name="vms"> |
|
| 54 |
<div class="row"> |
|
| 55 |
<ul> |
|
| 56 |
{{#each}}
|
|
| 57 |
<li>{{id}}<br>{{title}}<br>{{body}}</li>
|
|
| 58 |
{{/each}}
|
|
| 59 |
</ul> |
|
| 60 |
</div> |
|
| 61 |
</script> |
|
| 62 |
|
|
| 63 |
<script type="text/x-handlebars" data-template-name="disks"> |
|
| 64 |
<div class="row"> |
|
| 65 |
<ul> |
|
| 66 |
{{#each}}
|
|
| 67 |
<li>{{id}}<br>{{title}}<br>{{body}}</li>
|
|
| 68 |
{{/each}}
|
|
| 69 |
</ul> |
|
| 38 | 70 |
</div> |
| 71 |
</script> |
|
| 39 | 72 |
|
| 40 | 73 |
|
| 41 | 74 |
<script src="javascripts/vendor/jquery.js"></script> |
| 42 |
<script src="javascripts/foundation/foundation.js"></script> |
|
| 43 |
|
|
| 75 |
<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script> |
|
| 76 |
<script src="javascripts/underscore-min.js"></script> |
|
| 77 |
<script src="javascripts/foundation/foundation.js"></script> |
|
| 44 | 78 |
<script src="javascripts/foundation/foundation.alerts.js"></script> |
| 45 | 79 |
|
| 46 | 80 |
<script src="javascripts/foundation/foundation.clearing.js"></script> |
| ... | ... | |
| 64 | 98 |
<script src="javascripts/foundation/foundation.section.js"></script> |
| 65 | 99 |
|
| 66 | 100 |
<script src="javascripts/foundation/foundation.tooltips.js"></script> |
| 67 |
|
|
| 68 | 101 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
| 69 |
<script src="javascripts/vendor/handlebars.js"></script> |
|
| 102 |
<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script> |
|
| 103 |
<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script> |
|
| 104 |
<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script> |
|
| 105 |
<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script> |
|
| 106 |
<!-- dropzone.js used for drag and drop files to upload them --> |
|
| 107 |
<script type="text/javascript" src="javascripts/dropzone.js"></script> |
|
| 108 |
<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script> |
|
| 109 |
<!-- fabrastic.js used for the color picker --> |
|
| 110 |
<script type="text/javascript" src="javascripts/farbtastic.js"></script> |
|
| 111 |
<script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script> |
|
| 112 |
<script src="javascripts/common.js"></script> |
|
| 113 |
|
|
| 114 |
<script type="text/javascript" src="javascripts/wizard.js"></script> |
|
| 115 |
<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script> |
|
| 116 |
<script type="text/javascript" src="javascripts/checkboxes-radiobuttons.js"></script><script src="javascripts/vendor/handlebars.js"></script> |
|
| 70 | 117 |
<script src="javascripts/vendor/ember.js"></script> |
| 71 | 118 |
<script src="javascripts/ember/application.js"></script> |
| 119 |
<script src="javascripts/ember/router.js"></script> |
|
| 120 |
<script src="javascripts/ember/models/index.js"></script> |
|
| 121 |
<script src="javascripts/ember/models/networks.js"></script> |
|
| 122 |
<script src="javascripts/ember/models/vms.js"></script> |
|
| 123 |
<script src="javascripts/ember/models/disks.js"></script> |
|
| 72 | 124 |
|
| 73 | 125 |
|
| 74 | 126 |
<script> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/application.js | ||
|---|---|---|
| 1 |
window.UI = Ember.Application.create(); |
|
| 1 |
window.UI = Ember.Application.create(); |
|
| 2 |
|
|
| 3 |
UI.ApplicationController = Ember.Controller.extend({
|
|
| 4 |
logoUrl: 'images/synnefo-logo.png', |
|
| 5 |
}); |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/disks.js | ||
|---|---|---|
| 1 |
var disks = [ {
|
|
| 2 |
id: 1, |
|
| 3 |
title: 'disk1', |
|
| 4 |
body: 'Body disk 1' |
|
| 5 |
}, {
|
|
| 6 |
id: 2, |
|
| 7 |
title: 'disk2', |
|
| 8 |
body: 'Body disk 2', |
|
| 9 |
}]; |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/index.js | ||
|---|---|---|
| 1 |
var links = [ {
|
|
| 2 |
id: 1, |
|
| 3 |
title: 'VM1', |
|
| 4 |
body: 'Body vms 1' |
|
| 5 |
}, {
|
|
| 6 |
id: 2, |
|
| 7 |
title: 'VM2', |
|
| 8 |
body: 'Body vms 2', |
|
| 9 |
}]; |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/networks.js | ||
|---|---|---|
| 1 |
var networks = [ {
|
|
| 2 |
id: 1, |
|
| 3 |
title: 'network1', |
|
| 4 |
body: 'Body network1 1' |
|
| 5 |
}, {
|
|
| 6 |
id: 2, |
|
| 7 |
title: 'network2', |
|
| 8 |
body: 'Body network2 2', |
|
| 9 |
}]; |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/vms.js | ||
|---|---|---|
| 1 |
var vms = [ {
|
|
| 2 |
id: 1, |
|
| 3 |
title: 'VM1', |
|
| 4 |
body: 'Body vms 1' |
|
| 5 |
}, {
|
|
| 6 |
id: 2, |
|
| 7 |
title: 'VM2', |
|
| 8 |
body: 'Body test 2', |
|
| 9 |
}]; |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/router.js | ||
|---|---|---|
| 1 |
// if the path is the same as the resource name, there is no need to |
|
| 2 |
// specify it. |
|
| 3 |
|
|
| 4 |
UI.Router.map(function () {
|
|
| 5 |
this.resource('index', { path: '/' });
|
|
| 6 |
this.resource('vms');
|
|
| 7 |
this.resource('networks');
|
|
| 8 |
this.resource('disks');
|
|
| 9 |
}); |
|
| 10 |
|
|
| 11 |
UI.VmsRoute = Ember.Route.extend({
|
|
| 12 |
model: function() {
|
|
| 13 |
return vms; |
|
| 14 |
} |
|
| 15 |
}); |
|
| 16 |
|
|
| 17 |
UI.NetworksRoute = Ember.Route.extend({
|
|
| 18 |
model: function() {
|
|
| 19 |
return networks; |
|
| 20 |
} |
|
| 21 |
}); |
|
| 22 |
|
|
| 23 |
|
|
| 24 |
UI.DisksRoute = Ember.Route.extend({
|
|
| 25 |
model: function() {
|
|
| 26 |
return disks; |
|
| 27 |
} |
|
| 28 |
}); |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss | ||
|---|---|---|
| 324 | 324 |
|
| 325 | 325 |
/* Header ----------------------------------------------- */ |
| 326 | 326 |
|
| 327 |
.header {
|
|
| 327 |
header {
|
|
| 328 | 328 |
position:fixed; |
| 329 | 329 |
top:0; |
| 330 | 330 |
left:0; |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
|---|---|---|
| 7037 | 7037 |
|
| 7038 | 7038 |
/* Header ----------------------------------------------- */ |
| 7039 | 7039 |
/* line 327, ../sass/_common.scss */ |
| 7040 |
.header {
|
|
| 7040 |
header {
|
|
| 7041 | 7041 |
position: fixed; |
| 7042 | 7042 |
top: 0; |
| 7043 | 7043 |
left: 0; |
| ... | ... | |
| 7050 | 7050 |
z-index: 100; |
| 7051 | 7051 |
} |
| 7052 | 7052 |
/* line 338, ../sass/_common.scss */ |
| 7053 |
.header .icons-nav {
|
|
| 7053 |
header .icons-nav {
|
|
| 7054 | 7054 |
position: absolute; |
| 7055 | 7055 |
left: 15px; |
| 7056 | 7056 |
height: 80px; |
| ... | ... | |
| 7058 | 7058 |
top: 0; |
| 7059 | 7059 |
} |
| 7060 | 7060 |
/* line 344, ../sass/_common.scss */ |
| 7061 |
.header .icons-nav li {
|
|
| 7061 |
header .icons-nav li {
|
|
| 7062 | 7062 |
line-height: 80px; |
| 7063 | 7063 |
} |
| 7064 | 7064 |
/* line 348, ../sass/_common.scss */ |
| 7065 |
.header .logo {
|
|
| 7065 |
header .logo {
|
|
| 7066 | 7066 |
text-align: center; |
| 7067 | 7067 |
} |
| 7068 | 7068 |
/* line 350, ../sass/_common.scss */ |
| 7069 |
.header .logo a {
|
|
| 7069 |
header .logo a {
|
|
| 7070 | 7070 |
position: relative; |
| 7071 | 7071 |
} |
| 7072 | 7072 |
/* line 354, ../sass/_common.scss */ |
| 7073 |
.header .logo img {
|
|
| 7073 |
header .logo img {
|
|
| 7074 | 7074 |
height: 40px; |
| 7075 | 7075 |
} |
| 7076 | 7076 |
/* line 357, ../sass/_common.scss */ |
| 7077 |
.header .logo h2 {
|
|
| 7077 |
header .logo h2 {
|
|
| 7078 | 7078 |
display: none; |
| 7079 | 7079 |
margin: 0; |
| 7080 | 7080 |
font-size: 1em; |
| ... | ... | |
| 7082 | 7082 |
font-weight: normal; |
| 7083 | 7083 |
} |
| 7084 | 7084 |
/* line 365, ../sass/_common.scss */ |
| 7085 |
.header .login {
|
|
| 7085 |
header .login {
|
|
| 7086 | 7086 |
position: absolute; |
| 7087 | 7087 |
top: 25px; |
| 7088 | 7088 |
right: 15px; |
| 7089 | 7089 |
} |
| 7090 | 7090 |
/* line 370, ../sass/_common.scss */ |
| 7091 |
.header .login .wrap {
|
|
| 7091 |
header .login .wrap {
|
|
| 7092 | 7092 |
border: 1px solid #2d3338; |
| 7093 | 7093 |
background: white; |
| 7094 | 7094 |
font-size: 0.75em; |
| ... | ... | |
| 7096 | 7096 |
line-height: 100%; |
| 7097 | 7097 |
} |
| 7098 | 7098 |
/* line 377, ../sass/_common.scss */ |
| 7099 |
.header .login .wrap ul {
|
|
| 7099 |
header .login .wrap ul {
|
|
| 7100 | 7100 |
padding: 0; |
| 7101 | 7101 |
margin: 0; |
| 7102 | 7102 |
list-style: none outside none; |
| 7103 | 7103 |
display: none; |
| 7104 | 7104 |
} |
| 7105 | 7105 |
/* line 382, ../sass/_common.scss */ |
| 7106 |
.header .login .wrap ul li {
|
|
| 7106 |
header .login .wrap ul li {
|
|
| 7107 | 7107 |
list-style: none outside none; |
| 7108 | 7108 |
padding: 0; |
| 7109 | 7109 |
padding-top: 12px; |
Also available in: Unified diff