commit d0fe8c128b6d43fc187294328137090b01cb05b9
Author: Athina Bekakou <athinabek@grnet.gr>
Date:   Mon Feb 10 12:15:08 2014 +0200

    new ui: Initial approach of list-view using ember.js

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
index d8993ba..972aa52 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
@@ -1,50 +1,190 @@
-
 <!DOCTYPE html>
+    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->
 <!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 
 <head>
 	<meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>New ui mocks</title>
-  <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'>
-  <link rel="stylesheet" href="stylesheets/normalize.css" />
-  
-  <link rel="stylesheet" href="stylesheets/app.css" />
-  
-
-  <script src="javascripts/vendor/custom.modernizr.js"></script>
+    <meta name="viewport" content="width=device-width" />
+    <title>VMs list</title>
+    <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'>
+    <link rel="stylesheet" href="stylesheets/normalize.css" />
+    <link rel="stylesheet" href="stylesheets/app.css" />
+    <link rel="stylesheet" href="stylesheets/farbtastic.css" />
+    <link rel="stylesheet" href="stylesheets/font_custom.css" />
+    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
+    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
 
 </head>
 <body>
- 	<div class="row">
- 			<h2>Misc</h2>
- 			<ul>
- 				<li><a href="icon_guide.html">Info about Icon-Font</a></li>
- 			</ul>
- 		
- 			<h2>Kpal original designs</h2>
- 			<ul>
-				<li><a href="vm_list.html">VMs list page</a></li>
-				<li><a href="vm_list_no_vms.html">VMs list with no machine</a></li>
-				<li><a href="vm_details.html">VM Details</a></li>
-				<li><a href="network_list.html">Networks list page</a></li>
-				<li><a href="network_details.html">Network Details</a></li>
-				<li><a href="volumes_list.html">Volumes list</a></li>
-				<li><a href="images_list.html">Images list</a></li>
-				<li><a href="snapshots_list.html">Snapshots list</a></li>
-				<li><a href="pithos.html">Pithos</a></li>
-			</ul>
+	<script type="text/x-handlebars">
+		<header class="header">
+			<nav>
+			{{collection Okeanos.NavigationView}}
+				
+			</nav>
+			{{login-menu email = model.email}}
+			<div class="logo">
+				<a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
+			</div>
+		</header>
+		<div class="body-wrapper">
+			<section class="actions-bar clearfix">
+				<h2>{{pageTitle}}</h2>
+				<div class="rt-actions">
+					<a href="vm_details.html" class="single"></a>
+					<a href="#grid" class="grid"><span class="snf-gridview current"></span></a>
+					<a href="#list" class="list"><span class="snf-listview "></span></a>
+				</div>
+				<div class="filter-menu">
+					<div><a class="filter" href="">Filter</a></div>
+					<ul class="options">
+						<li><a href="">option 1</a></li>
+						<li><a href="">option 2</a></li>
+						<li><a href="">option 3</a></li>
+						<li><a href="">option 4</a></li>
+					</ul>
+				</div>
+				<div id="hd-search" class="hd-search">
+				    <form>
+						<span class="hd-icon-search snf-search"></span>
+				        <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
+				    </form>
+				</div>
+			</section>
+			<section class="main row">
+				{{outlet}}
+			</section>
 		</div>
+	</script>
+	<script type="text/x-handlebars" data-template-name="nets">
+		<h2>nets</h2>
+	</script>
+	<script type="text/x-handlebars" data-template-name="elems">
+		<h2>{{other}}</h2>
+		<div {{bind-attr class=":entities :grid-view"}}>
+		<ul class="items-list">
+			<li>Add New...</li>
+			{{#each}}
+				{{view Okeanos.ElemView}}
+			{{/each}}
+		</ul>
+		</div>
+	</script>
 
-  <script>
-  document.write('<script src=' +
-  ('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') +
-  '.js><\/script>')
-  </script>
-  
-  <script src="javascripts/foundation/foundation.js"></script>
+	<script type="text/x-handlebars" data-template-name="elem">
+		<ul class="side-actions">
+			<li>
+				<a href="vm_details.html" data-tooltip title="view details" class="details has-tip">i</a>
+			</li>
+			<li>
+				<a href="#" title="connect to machine" data-tooltip data-reveal-id="vm-connect" class="has-tip">
+					<span class="snf-thunder-full"></span>
+				</a>
+			</li>
+			<li class="more-actions">
+				<a href="#" title="">...</a>
+				<ul class="many">
+					{{#each setAvailableActions}}
+						<li>
+							{{actionBtns-simple actionLabel=this.description elementID=controller.id action= this.description param=controller.id}}
+						</li>
+					{{/each}}
+				</ul>
+			</li>
+			<li class="bottom">
+				<a href="" title=""><span ></span></a>
+				<ul class="options">
+					<li class="selected"><a href="">My awesome project</a></li>
+					<li><a href="">Project 1</a></li>
+					<li><a href="">Project 2</a></li>
+					<li><a href="">Project 3</a></li>
+					<li><a href="">Project 4</a></li>
+				</ul>
+				<ul>
+					<li>My awesome project</li>
+					<li><a href="" class="reassign">Reassign<span class="arrow-right"></span></a></li>
+				</ul>
+			</li>
+		</ul>
+		<div class="container">
+			<a href="" class="check">
+				<span class="snf-checkbox-unchecked"></span>
+			</a>
+			<div class="img-wrap">
+				<span {{bind-attr class="parentController.icon :snf-font"}}></span>
+				{{#if parentController.hasOS}}
+					<span {{bind-attr class="os :os"}}></span>
+				{{/if}}
+			</div>
+			<h4>{{icon}}</h4>
+			<div class="actions">
+				<a href="" data-reveal-id="vm-connect" data-tooltip title="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
+				<a href="vm_details.html" data-tooltip title="view vm details" class="snf-info-outline has-tip">i</a>
+			</div>
+			<div class="tags">
+			</div>
+			<div class= "status">
+				<span class="state">{{parentController.icon}}</span>
+				<span class="state">{{status}}</span>
+				<span class="logs">{{name}}</span>
+			</div>
+			<div class="info"><a {{bind-attr href=hostname}} title="">{{hostname}}</a></div>
+		</div>
+	</script>
 	
+
+	<script type="text/x-handlebars" data-template-name="volumes">
+		<h2>volumes</h2>
+	</script>
+	<script type="text/x-handlebars" data-template-name="pithos">
+		<h2>pithos</h2>
+	</script>
+	<script type="text/x-handlebars" data-template-name="snapshots">
+		<h2>shapshots</h2>
+	</script>
+	<script type="text/x-handlebars" data-template-name="images">
+		<h2>images</h2>
+	</script>
+	<script type="text/x-handlebars" data-template-name="ips">
+		<h2>ips</h2>
+	</script>
+	<script type="text/x-handlebars" data-template-name="sshkeys">
+		<h2>sshkeys</h2>
+	</script>
+		
+
+	<!-- COMPONENTS -->			
+	<script type="text/x-handlebars" id="components/actionBtns-simple">
+		{{actionLabel}} - {{elementID}}
+	</script>
+	
+	<script type="text/x-handlebars" id="components/login-menu">
+		<div class="wrap">
+			<a href="">{{email}}</a>
+			<ul>
+				<li><a href="">dashboard</a></li>
+				<li><a href="">sign out</a></li>
+			</ul>
+		</div>
+	</script>
+
+
+
+
+
+	<script src="javascripts/custom.modernizr.js"></script>
+	<script src="javascripts/jquery.js"></script>
+	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
+	<script src="javascripts/handlebars-1.1.2.js"></script>
+	<script src="javascripts/ember-1.3.0.js"></script>
+  	<script src="javascripts/ember-data.js"></script>
+	<script src="javascripts/underscore-min.js"></script>
+  	<script src="javascripts/okeanos.js"></script>
+  	<!-- templates must be loaded before we use it  -->
+  	<script src="javascripts/templates.js"></script>
+  	<script src="javascripts/okeanos-ember.js"></script>
+	<script src="javascripts/foundation/foundation.js"></script>
 	<script src="javascripts/foundation/foundation.alerts.js"></script>
 	
 	<script src="javascripts/foundation/foundation.clearing.js"></script>
@@ -68,12 +208,22 @@
 	<script src="javascripts/foundation/foundation.section.js"></script>
 	
 	<script src="javascripts/foundation/foundation.tooltips.js"></script>
-	
 	<script src="javascripts/foundation/foundation.topbar.js"></script>
-	
-  
+	<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
+	<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
+	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
+	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
+	<!-- dropzone.js used for drag and drop files to upload them --> 
+	<script type="text/javascript" src="javascripts/dropzone.js"></script>
+	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
+	<!-- fabrastic.js used for the color picker --> 
+	<script type="text/javascript" src="javascripts/farbtastic.js"></script>
+
   <script>
     $(document).foundation();
+    $(document).ready(function() {
+
+    })
   </script>
 </body>
 </html>
