commit 38706719153fefec132ce68588e36e64f6adf0e4
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Wed Feb 26 18:42:36 2014 +0200

    uinext: Edit model property component

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/app.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/app.js
index 2ce2ea3..d7bb9d1 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/app.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/app.js
@@ -1,5 +1,4 @@
-window.App = Ember.Application.create({
-});
+window.App = Ember.Application.create();
 
 App.ApplicationAdapter = DS.FixtureAdapter;
 
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
index 0e52d4f..5cbf0b4 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
@@ -574,7 +574,7 @@ $(document).ready(function(){
     });
 
     ui.closeDiv($('.info .close'), '.info');
-    ui.editable();
+    //ui.editable();
     ui.overlay();
     ui.colorPickerVisible = 0;
 
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/editable-prop.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/editable-prop.js
new file mode 100644
index 0000000..900aa1e
--- /dev/null
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/editable-prop.js
@@ -0,0 +1,18 @@
+App.EditablePropComponent = Ember.Component.extend({
+
+    tagName: 'div',
+    classNames: ['editable'],
+    layoutName: 'editable-prop',
+    isEditable: false,
+
+    actions: {
+        allowEdit: function(){
+            this.set('isEditable', true);
+        },
+        acceptEditableChanges: function(){
+            this.set('isEditable', false);
+            this.sendAction('ok');
+        },
+    }
+
+});
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/volume-el.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/volume-el.js
index 19f48d3..a155038 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/volume-el.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/components/volume-el.js
@@ -1,5 +1,6 @@
 App.VolumeElComponent = Ember.Component.extend({
     tagName: 'section',
+
     actions: {
 
         revealModal: function(){
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js
index 81d49b4..dcaf3b8 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/controllers/vm.js
@@ -28,10 +28,14 @@ App.VmController =App.ItemsItemController.extend({
         },
 
         dettachVolume: function(volume){
-            alert('I am now dettaching this volume'+ volume);
             this.get('model').get('volumes').removeObject(volume);
         },
 
+        saveModel: function(){
+            this.get('model').save();
+        },
+
+
         modalConnect: function(){
             var component = Ember.View.views["modal-connect"];
             component.set('message', 'connect to your <3 ' + this.get('model').get('name'));
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/network.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/network.js
index f6ce6f0..e9c3d19 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/network.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/network.js
@@ -31,7 +31,7 @@ App.Network.FIXTURES = [
         id: 2,
         name: 'Network 2',
         status: 'building',
-        vms: [3],
+        vms: [1,3],
         firewall: 'partial',
     },
     {
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/vm.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/vm.js
index 6d9f747..05dab8f 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/vm.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/models/vm.js
@@ -6,7 +6,7 @@ App.Vm = DS.Model.extend({
     link      : DS.attr(),
     created   : DS.attr('date'), 
     updated   : DS.attr('date'), 
-    network   : DS.belongsTo('network', { async:true }),
+    networks  : DS.hasMany('network', { async:true }),
     tags      : DS.hasMany('tag', { async:true }),
     volumes   : DS.hasMany('volume', { async:true}),
 
@@ -29,7 +29,7 @@ App.Vm.FIXTURES = [
         status: "running",
         link: 'http://www.in.gr',
         updated: "2011-05-29T14:07:07.037602+00:00",
-        network: 1,
+        networks: [1,2],
         tags: [1,2,3],
         volumes: [1,2],
     }, 
@@ -40,7 +40,7 @@ App.Vm.FIXTURES = [
         os: 'unknown',
         link: 'http://www.in.gr',
         updated: "2011-05-29T14:07:07.037602+00:00",
-        networks: 1,
+        networks: [1],
         tags: [4,5,6],
         volumes: [3],
     },
@@ -50,7 +50,7 @@ App.Vm.FIXTURES = [
         status: 'building',
         os: 'windows',
         link: 'http://www.in.gr',
-        network: 2,
+        networks: [2],
         tags: [7],
     },
     {
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/networks-list.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/networks-list.js
index 1dc5eda..7967ecb 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/networks-list.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/ember/views/networks-list.js
@@ -1,3 +1,3 @@
-App.networksListView = Ember.View.extend({
+App.NetworksListView = Ember.View.extend({
     templateName: 'networks-list',
 });
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js
index c706ad3..f52cf3b 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates.js
@@ -241,6 +241,68 @@ helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
   
 });
 
+Ember.TEMPLATES["components/editable-prop"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
+this.compilerInfo = [4,'>= 1.0.0'];
+helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
+  var buffer = '', stack1, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, self=this;
+
+function program1(depth0,data) {
+  
+  var buffer = '', stack1;
+  data.buffer.push("\n    <span class=\"prop\">");
+  stack1 = helpers._triageMustache.call(depth0, "prop", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
+  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
+  data.buffer.push("</span>\n");
+  return buffer;
+  }
+
+function program3(depth0,data) {
+  
+  var buffer = '', helper, options;
+  data.buffer.push("\n    ");
+  data.buffer.push(escapeExpression((helper = helpers.input || (depth0 && depth0.input),options={hash:{
+    'value': ("prop"),
+    'focus-out': ("acceptEditableChanges"),
+    'insert-newline': ("acceptEditableChanges")
+  },hashTypes:{'value': "ID",'focus-out': "STRING",'insert-newline': "STRING"},hashContexts:{'value': depth0,'focus-out': depth0,'insert-newline': depth0},contexts:[],types:[],data:data},helper ? helper.call(depth0, options) : helperMissing.call(depth0, "input", options))));
+  data.buffer.push("\n");
+  return buffer;
+  }
+
+function program5(depth0,data) {
+  
+  var buffer = '';
+  data.buffer.push("\n        <a class=\"edit\" ");
+  data.buffer.push(escapeExpression(helpers.action.call(depth0, "allowEdit", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["STRING"],data:data})));
+  data.buffer.push("><span class=\"snf-edit\"></span></a>\n    ");
+  return buffer;
+  }
+
+function program7(depth0,data) {
+  
+  var buffer = '';
+  data.buffer.push("\n        <a class=\"save\" ");
+  data.buffer.push(escapeExpression(helpers.action.call(depth0, "acceptEditableChanges", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["STRING"],data:data})));
+  data.buffer.push("><span class=\"snf-ok-sign\"></span></a>\n    ");
+  return buffer;
+  }
+
+  stack1 = helpers.unless.call(depth0, "isEditable", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(1, program1, data),contexts:[depth0],types:["ID"],data:data});
+  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
+  data.buffer.push("\n");
+  stack1 = helpers['if'].call(depth0, "isEditable", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(3, program3, data),contexts:[depth0],types:["ID"],data:data});
+  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
+  data.buffer.push("\n<span class=\"editbuttons\">\n    ");
+  stack1 = helpers.unless.call(depth0, "isEditable", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(5, program5, data),contexts:[depth0],types:["ID"],data:data});
+  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
+  data.buffer.push("\n    ");
+  stack1 = helpers['if'].call(depth0, "isEditable", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(7, program7, data),contexts:[depth0],types:["ID"],data:data});
+  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
+  data.buffer.push("\n</span>\n                    ");
+  return buffer;
+  
+});
+
 Ember.TEMPLATES["components/network-el"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
 this.compilerInfo = [4,'>= 1.0.0'];
 helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
@@ -422,10 +484,12 @@ function program1(depth0,data) {
   data.buffer.push(escapeExpression((helper = helpers.outlet || (depth0 && depth0.outlet),options={hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data},helper ? helper.call(depth0, "lt-bar", options) : helperMissing.call(depth0, "outlet", "lt-bar", options))));
   data.buffer.push("\n        <section class=\"top\">\n            <div class=\"lt\">\n                ");
   data.buffer.push(escapeExpression((helper = helpers.partial || (depth0 && depth0.partial),options={hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["STRING"],data:data},helper ? helper.call(depth0, "img-wrap", options) : helperMissing.call(depth0, "partial", "img-wrap", options))));
-  data.buffer.push("\n            </div>\n            <div class=\"rt\">\n                <div class=\"title\">\n                    <h1>");
-  stack1 = helpers._triageMustache.call(depth0, "name", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
-  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
-  data.buffer.push("<span class=\"status\">");
+  data.buffer.push("\n            </div>\n            <div class=\"rt\">\n                <div class=\"title\">\n                    \n                    ");
+  data.buffer.push(escapeExpression((helper = helpers['editable-prop'] || (depth0 && depth0['editable-prop']),options={hash:{
+    'prop': ("name"),
+    'ok': ("saveModel")
+  },hashTypes:{'prop': "ID",'ok': "STRING"},hashContexts:{'prop': depth0,'ok': depth0},contexts:[],types:[],data:data},helper ? helper.call(depth0, options) : helperMissing.call(depth0, "editable-prop", options))));
+  data.buffer.push("\n                    \n                    <span class=\"status\">");
   data.buffer.push(escapeExpression((helper = helpers['status-to-text'] || (depth0 && depth0['status-to-text']),options={hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data},helper ? helper.call(depth0, "status", options) : helperMissing.call(depth0, "status-to-text", "status", options))));
   data.buffer.push("</span></h1>\n                </div>\n                <div class=\"actions\">\n                    <ul>\n                        ");
   stack1 = helpers.each.call(depth0, "item", "in", "actionsMeta", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(1, program1, data),contexts:[depth0,depth0,depth0],types:["ID","ID","ID"],data:data});
@@ -470,8 +534,11 @@ helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
 
 function program1(depth0,data) {
   
-  var buffer = '', helper, options;
-  data.buffer.push("\n\n	<section class=\"info-block\">\n		<h2>info</h2>\n		<dl>\n			<dt><span class=\"snf-font snf-pc-full\"></span>Name</dt>\n			<dd>\n				<div class=\"editable\">\n			        <span class=\"input-txt\">My Opensuse Desktop Server 1</span>\n			        <input type=\"text\">\n			        <span class=\"editbuttons\">\n						<a href=\"#\" class=\"edit\"><span class=\"snf-edit\"></span></a>\n						<a href=\"#\" class=\"save\"><span class=\"snf-ok-sign\"></span></a>\n						<a href=\"#\" class=\"cancel\"><span class=\"snf-cancel-circled\"></span></a>\n					</span>\n			    </div>\n			</dd>\n			<dt><span class=\"snf-font snf-dashboard-outline\"></span>Assigned Project</dt>\n			<dd>Basic Project</dd>\n			<dt><span class=\"snf-chip-outline snf-font\"></span>CPUs</dt>\n			<dd>4</dd>\n			<dt><span class=\"snf-ram-full snf-font\"></span>RAM</dt>\n			<dd>512 MB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>System Disk Size</dt>\n			<dd>4GB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>Storage Type</dt>\n			<dd>Archipelago</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Name</dt>\n			<dd>Fedora</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Size</dt>\n			<dd>3.68 GB</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.152</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.153</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv6</dt>\n			<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>\n		</dl>\n	</section>\n\n	<section class=\"info-block\">\n		<h2>tags</h2>\n		");
+  var buffer = '', stack1, helper, options;
+  data.buffer.push("\n\n	<section class=\"info-block\">\n		<h2>info</h2>\n		<dl>\n			<dt><span class=\"snf-font snf-pc-full\"></span>Name</dt>\n			<dd>\n				");
+  stack1 = helpers._triageMustache.call(depth0, "name", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
+  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
+  data.buffer.push("\n			</dd>\n			<dt><span class=\"snf-font snf-dashboard-outline\"></span>Assigned Project</dt>\n			<dd>Basic Projecxt</dd>\n			<dt><span class=\"snf-chip-outline snf-font\"></span>CPUs</dt>\n			<dd>4</dd>\n			<dt><span class=\"snf-ram-full snf-font\"></span>RAM</dt>\n			<dd>512 MB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>System Disk Size</dt>\n			<dd>4GB</dd>\n			<dt><span class=\"snf-volume-full snf-font\"></span>Storage Type</dt>\n			<dd>Archipelago</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Name</dt>\n			<dd>Fedora</dd>\n			<dt><span class=\"snf-image-full snf-font\"></span>Image Size</dt>\n			<dd>3.68 GB</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.152</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv4</dt>\n			<dd>83.212.96.153</dd>\n			<dt><span class=\"snf-nic-full snf-font\"></span>IPv6</dt>\n			<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>\n		</dl>\n	</section>\n\n	<section class=\"info-block\">\n		<h2>tags</h2>\n		");
   data.buffer.push(escapeExpression(helpers.view.call(depth0, "App.tagsListView", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data})));
   data.buffer.push("\n        \n		");
   data.buffer.push(escapeExpression((helper = helpers.render || (depth0 && depth0.render),options={hash:{},hashTypes:{},hashContexts:{},contexts:[depth0,depth0],types:["STRING","ID"],data:data},helper ? helper.call(depth0, "add-tag", "model", options) : helperMissing.call(depth0, "render", "add-tag", "model", options))));
@@ -498,7 +565,7 @@ function program1(depth0,data) {
   
   var buffer = '';
   data.buffer.push("\n");
-  data.buffer.push(escapeExpression(helpers.view.call(depth0, "App.networksListView", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data})));
+  data.buffer.push(escapeExpression(helpers.view.call(depth0, "App.NetworksListView", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data})));
   data.buffer.push("\n	<section class=\"connect-new network\">\n		<div class=\"img-wrap\">\n			<a href=\"\" data-reveal-id=\"connect-to-network\">\n				<span class=\"snf-network-full snf-font\"></span>\n			</a>\n		</div>\n		<p><a href=\"\" data-reveal-id=\"connect-to-network\">Connect to Network</a></p>\n	</section>\n");
   return buffer;
   }
@@ -616,7 +683,6 @@ function program1(depth0,data) {
   return buffer;
   }
 
-  data.buffer.push("\n");
   stack1 = helpers.each.call(depth0, "network", "in", "networks", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(1, program1, data),contexts:[depth0,depth0,depth0],types:["ID","ID","ID"],data:data});
   if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
   data.buffer.push("\n\n\n<!--SOS, edw pairnei gia contoller, ton controller tou vm-->");
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/components/editable-prop.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/components/editable-prop.hbs
new file mode 100644
index 0000000..678a595
--- /dev/null
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/components/editable-prop.hbs
@@ -0,0 +1,15 @@
+{{#unless isEditable}}
+    <span class="prop">{{prop}}</span>
+{{/unless}}
+{{#if isEditable}}
+    {{input value=prop focus-out="acceptEditableChanges" insert-newline="acceptEditableChanges"}}
+{{/if}}
+<span class="editbuttons">
+    {{#unless isEditable}}
+        <a class="edit" {{action "allowEdit"}}><span class="snf-edit"></span></a>
+    {{/unless}}
+    {{#if isEditable}}
+        <a class="save" {{action "acceptEditableChanges"}}><span class="snf-ok-sign"></span></a>
+    {{/if}}
+</span>
+                    
\ No newline at end of file
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details.hbs
index fe24a52..2edb267 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details.hbs
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details.hbs
@@ -9,7 +9,10 @@
             </div>
             <div class="rt">
                 <div class="title">
-                    <h1>{{this.name}}<span class="status">{{status-to-text this.status}}</span></h1>
+                    
+                    {{editable-prop prop=this.name ok="saveModel" }}
+                    
+                    <span class="status">{{status-to-text this.status}}</span></h1>
                 </div>
                 <div class="actions">
                     <ul>
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs
index 6a6c8c5..93b134c 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/info.hbs
@@ -5,18 +5,10 @@
 		<dl>
 			<dt><span class="snf-font snf-pc-full"></span>Name</dt>
 			<dd>
-				<div class="editable">
-			        <span class="input-txt">My Opensuse Desktop Server 1</span>
-			        <input type="text">
-			        <span class="editbuttons">
-						<a href="#" class="edit"><span class="snf-edit"></span></a>
-						<a href="#" class="save"><span class="snf-ok-sign"></span></a>
-						<a href="#" class="cancel"><span class="snf-cancel-circled"></span></a>
-					</span>
-			    </div>
+				{{this.name}}
 			</dd>
 			<dt><span class="snf-font snf-dashboard-outline"></span>Assigned Project</dt>
-			<dd>Basic Project</dd>
+			<dd>Basic Projecxt</dd>
 			<dt><span class="snf-chip-outline snf-font"></span>CPUs</dt>
 			<dd>4</dd>
 			<dt><span class="snf-ram-full snf-font"></span>RAM</dt>
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/network-connected.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/network-connected.hbs
index 4c36cfc..b654f5a 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/network-connected.hbs
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/details/network-connected.hbs
@@ -1,5 +1,5 @@
 {{#details-content id="network-connected" class="connected network"}}
-{{view App.networksListView}}
+{{view App.NetworksListView}}
 	<section class="connect-new network">
 		<div class="img-wrap">
 			<a href="" data-reveal-id="connect-to-network">
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/networks-list.hbs b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/networks-list.hbs
index a162964..a37c0c2 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/networks-list.hbs
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/templates/networks-list.hbs
@@ -1,4 +1,3 @@
-
 {{#each network in this.networks}}
     {{network-el item=network}}
 {{/each}}
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_forms.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_forms.scss
index be1f32c..56cb412 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_forms.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_forms.scss
@@ -9,21 +9,12 @@
 /* editable (used for changing info asychronously) ------------------ */
 
 .editable {
-	.editbuttons {		
-		a {
-			&.save {
-				display: none;
-				span {
-					font-size: 18px;
-				}
-			} 
-			&.cancel {
-				@extend a.save
-			}
+	&.save, &.cancel {
+		span {
+			font-size: 18px;
 		}
-	}
+	} 
 	input[type="text"] {
-		display: none;
 		width: 85%;
 	}
 }
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index bcdd7d4..d76560d 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -8578,27 +8578,22 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
 - vm wizard styles
 */
 /* editable (used for changing info asychronously) ------------------ */
-/* line 14, ../sass/_forms.scss */
-.editable .editbuttons a.save, .editable .editbuttons a.cancel {
-  display: none;
-}
-/* line 16, ../sass/_forms.scss */
-.editable .editbuttons a.save span, .editable .editbuttons a.cancel span {
+/* line 13, ../sass/_forms.scss */
+.editable.save span, .editable.cancel span {
   font-size: 18px;
 }
-/* line 25, ../sass/_forms.scss */
+/* line 20, ../sass/_forms.scss */
 .editable input[type="text"] {
-  display: none;
   width: 85%;
 }
 
 /* universal form styles ------------------ */
-/* line 34, ../sass/_forms.scss */
+/* line 28, ../sass/_forms.scss */
 .input {
   display: inline-block;
   padding-left: 6px;
 }
-/* line 37, ../sass/_forms.scss */
+/* line 31, ../sass/_forms.scss */
 .input input[type="text"] {
   width: 142px;
   padding: 0 12px 0 6px;
@@ -8611,23 +8606,23 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
   box-shadow: none;
 }
 
-/* line 49, ../sass/_forms.scss */
+/* line 43, ../sass/_forms.scss */
 .snf-color-picker {
   display: none;
 }
-/* line 51, ../sass/_forms.scss */
+/* line 45, ../sass/_forms.scss */
 .snf-color-picker > form {
   height: 237px;
   width: 100%;
 }
-/* line 56, ../sass/_forms.scss */
+/* line 50, ../sass/_forms.scss */
 .snf-color-picker #picker {
   position: relative;
   width: 207px;
   margin: 25px 5px 30px;
   display: inline-block;
 }
-/* line 62, ../sass/_forms.scss */
+/* line 56, ../sass/_forms.scss */
 .snf-color-picker .color-preview {
   display: inline-block;
   -webkit-border-radius: 999px;
@@ -8647,11 +8642,11 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
 }
 
 /* detailed view styles ------------------ */
-/* line 77, ../sass/_forms.scss */
+/* line 71, ../sass/_forms.scss */
 .details .input {
   background: url(../images/input-bg-lt-black.png) no-repeat left bottom;
 }
-/* line 79, ../sass/_forms.scss */
+/* line 73, ../sass/_forms.scss */
 .details .input input[type="text"] {
   background: url(../images/input-bg-rt-black.png) no-repeat right bottom;
   color: #2d3338;
@@ -8674,44 +8669,44 @@ body .jspVerticalBar .jspArrow.jspArrowUp {
 }
 
 /* vm wizard styles ------------------ */
-/* line 92, ../sass/_forms.scss */
+/* line 86, ../sass/_forms.scss */
 .wizard form.custom .custom.dropdown.medium {
   background: #485057;
   color: white;
 }
-/* line 96, ../sass/_forms.scss */
+/* line 90, ../sass/_forms.scss */
 .wizard form.custom .custom.dropdown .current {
   color: white;
 }
-/* line 99, ../sass/_forms.scss */
+/* line 93, ../sass/_forms.scss */
 .wizard form.custom .custom.dropdown .selector {
   border-left: 1px solid white;
   height: 30px;
 }
-/* line 103, ../sass/_forms.scss */
+/* line 97, ../sass/_forms.scss */
 .wizard form.custom .custom.dropdown.open ul {
   background: #485057;
   color: white;
 }
-/* line 107, ../sass/_forms.scss */
+/* line 101, ../sass/_forms.scss */
 .wizard form.custom .custom.dropdown ul li {
   color: white;
 }
-/* line 110, ../sass/_forms.scss */
+/* line 104, ../sass/_forms.scss */
 .wizard form.custom .custom.dropdown ul li.selected {
   color: white;
   background: #5f6a73;
 }
-/* line 114, ../sass/_forms.scss */
+/* line 108, ../sass/_forms.scss */
 .wizard form.custom .custom.dropdown ul li:hover {
   background: #77838e;
   color: white;
 }
-/* line 119, ../sass/_forms.scss */
+/* line 113, ../sass/_forms.scss */
 .wizard .input {
   background: url(../images/input-bg-lt.png) no-repeat left bottom;
 }
-/* line 121, ../sass/_forms.scss */
+/* line 115, ../sass/_forms.scss */
 .wizard .input input[type="text"] {
   background: url(../images/input-bg-rt.png) no-repeat right bottom;
   color: white;
