From a5f55b45a3fa70e930b26b64613d2f5cb54b509b Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan.ferrer.toribio@gmail.com>
Date: Wed, 16 Sep 2015 18:11:15 +0200
Subject: [PATCH] Alpha 1

---
 web/forms/account/address-list/ui.xml |  11 +-
 web/forms/account/address/ui.xml      |  20 +--
 web/forms/account/conf/ui.xml         |  11 +-
 web/forms/admin/visits/ui.xml         |  29 ++--
 web/forms/ecomerce/basket/ui.xml      |  34 +++--
 web/forms/ecomerce/catalog/catalog.js |  40 ++---
 web/forms/ecomerce/catalog/style.css  |  52 ++++---
 web/forms/ecomerce/catalog/ui.xml     |  97 ++++++------
 web/forms/ecomerce/checkout/ui.xml    |  11 +-
 web/forms/ecomerce/orders/orders.js   |   2 +-
 web/forms/ecomerce/orders/ui.xml      |  20 +--
 web/forms/news/new/ui.xml             |  11 +-
 web/forms/news/news/ui.xml            |  11 +-
 web/image/dark/exit.svg               |  12 +-
 web/image/dark/view-dual.svg          | 180 ++++++++++++++++++++++
 web/image/dark/view-grid.svg          | 209 ++++++++++++++++++++++++++
 web/image/dark/view-list.svg          | 188 +++++++++++++++++++++++
 web/image/dark/view.svg               |  63 ++++++++
 web/image/exit.svg                    |  12 +-
 web/index.php                         |   2 +-
 web/js/hedera/gui.css                 |  86 ++++++++---
 web/js/hedera/gui.js                  |  58 +++----
 web/js/hedera/gui.xml                 |   6 +-
 web/js/hedera/module.js               |   2 +
 web/js/hedera/style.css               |  32 ----
 web/js/htk/field/button.js            |  35 +++++
 web/js/htk/field/image.js             | 118 +++++++++++----
 web/js/htk/style.css                  |   9 +-
 28 files changed, 1083 insertions(+), 278 deletions(-)
 create mode 100644 web/image/dark/view-dual.svg
 create mode 100644 web/image/dark/view-grid.svg
 create mode 100644 web/image/dark/view-list.svg
 create mode 100644 web/image/dark/view.svg

diff --git a/web/forms/account/address-list/ui.xml b/web/forms/account/address-list/ui.xml
index 41858817..a08b7e6e 100755
--- a/web/forms/account/address-list/ui.xml
+++ b/web/forms/account/address-list/ui.xml
@@ -17,11 +17,12 @@
 <div id="title">
 	<h1><t>Addresses</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onAddAddressClick">
-		<img src="image/dark/add.svg" alt=""/>
-		<t>AddAddress</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/add.svg"
+		tip="_AddAddress"
+		on-click="onAddAddressClick"
+		showText="true"/>
 </div>
 <div id="form" class="address-list">
 	<div class="box">
diff --git a/web/forms/account/address/ui.xml b/web/forms/account/address/ui.xml
index 69a24b2d..a3f7888d 100755
--- a/web/forms/account/address/ui.xml
+++ b/web/forms/account/address/ui.xml
@@ -20,15 +20,17 @@
 <div id="title">
 	<h1><t>AddEditAddress</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onReturnClick">
-		<img src="image/dark/go-previous.svg" alt=""/>
-		<t>Return</t>
-	</button>
-	<button on-click="onAcceptClick">
-		<img src="image/dark/ok.svg" alt=""/>
-		<t>Accept</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/close.svg"
+		tip="_Return"
+		on-click="onReturnClick"
+		showText="true"/>
+	<htk-button
+		image="image/dark/ok.svg"
+		tip="_Accept"
+		on-click="onAcceptClick"
+		showText="true"/>
 </div>
 <div id="form" class="address">
 	<div class="box">
diff --git a/web/forms/account/conf/ui.xml b/web/forms/account/conf/ui.xml
index a1468a72..8a5a9d38 100755
--- a/web/forms/account/conf/ui.xml
+++ b/web/forms/account/conf/ui.xml
@@ -19,11 +19,12 @@
 <div id="title">
 	<h1><t>Configuration</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onAddressesClick">
-		<img src="image/dark/shipping.svg" alt=""/>
-		<t>Addresses</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/shipping.svg"
+		tip="_Addresses"
+		on-click="onAddressesClick"
+		showText="true"/>
 </div>
 <div id="form" class="conf">
 	<div class="box">
diff --git a/web/forms/admin/visits/ui.xml b/web/forms/admin/visits/ui.xml
index c9d502a2..49af7e8a 100755
--- a/web/forms/admin/visits/ui.xml
+++ b/web/forms/admin/visits/ui.xml
@@ -2,19 +2,22 @@
 <div id="title">
 	<h1><t>VisitsManagement</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onRefreshClick">
-		<img src="image/dark/refresh.svg" alt=""/>
-		<t>Refresh</t>
-	</button>
-	<button on-click="onSessionsClick">
-		<img src="image/dark/user-info.svg" alt=""/>
-		<t>ActiveSessions</t>
-	</button>
-	<button on-click="onVisitsClick">
-		<img src="image/dark/graph.svg" alt=""/>
-		<t>VisitsQuery</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/refresh.svg"
+		tip="_Refresh"
+		on-click="onRefreshClick"
+		showText="true"/>
+	<htk-button
+		image="image/dark/user-info.svg"
+		tip="_ActiveSessions"
+		on-click="onSessionsClick"
+		showText="true"/>
+	<htk-button
+		image="image/dark/graph.svg"
+		tip="_VisitsQuery"
+		on-click="onVisitsClick"
+		showText="true"/>
 </div>
 <div id="form" class="visits">
 	<div class="box">
diff --git a/web/forms/ecomerce/basket/ui.xml b/web/forms/ecomerce/basket/ui.xml
index df7a9b9e..6389b2f1 100755
--- a/web/forms/ecomerce/basket/ui.xml
+++ b/web/forms/ecomerce/basket/ui.xml
@@ -2,28 +2,32 @@
 <div id="title">
 	<h1><t>ShoppingBasket</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onConfigureClick" title="_ConfigureOrder">
-		<img class="config" src="image/dark/preferences.svg" alt=""/>
-	</button>
-	<button on-click="onCatalogClick">
-		<img src="image/dark/menu.svg" alt=""/>
-		<t>Catalog</t>
-	</button>
-	<button on-click="onCheckoutClick">
-		<img src="image/dark/ok.svg" alt=""/>
-		<t>Checkout</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/preferences.svg"
+		tip="_ConfigureOrder"
+		on-click="onConfigureClick"
+		showText="true"/>
+	<htk-button
+		image="image/dark/view-dual.svg"
+		tip="_Catalog"
+		on-click="onCatalogClick"
+		showText="true"/>
+	<htk-button
+		image="image/dark/ok.svg"
+		tip="_Checkout"
+		on-click="onCheckoutClick"
+		showText="true"/>
 </div>
 <div id="form" class="basket">
-<div class="box">
+	<div class="box">
 	<div>
 		<htk-grid show-header="false">
 			<db-model id="items" updatable="true">
 				SELECT i.id, i.amount, i.price, a.Article, a.Categoria, 
 				a.Medida, a.Tallos, a.Color, o.Abreviatura, a.Foto
 					FROM basket_item i
-					INNER JOIN vn2008.Articles a ON a.Id_Article = i.item_id
+					JOIN vn2008.Articles a ON a.Id_Article = i.item_id
 					LEFT JOIN vn2008.Origen o ON a.id_origen = o.id;
 			</db-model>
 			<htk-column-image
@@ -47,6 +51,6 @@
 			</p>
 		</div>
 	</div>
-</div>
+	</div>
 </div>
 </vn>
diff --git a/web/forms/ecomerce/catalog/catalog.js b/web/forms/ecomerce/catalog/catalog.js
index 95fddb94..6528432d 100755
--- a/web/forms/ecomerce/catalog/catalog.js
+++ b/web/forms/ecomerce/catalog/catalog.js
@@ -2,6 +2,8 @@
 Vn.Catalog = new Class
 ({
 	Extends: Vn.Module
+	
+	,_menuShown: false
 
 	,open: function ()
 	{
@@ -22,12 +24,7 @@ Vn.Catalog = new Class
 			this.conn.execQuery (query, this.onBasketForGuest.bind (this));
 		}
 	}
-	
-	,deactivate: function ()
-	{
-		this.gui.$('top-bar').style.backgroundColor = '';
-	}
-	
+
 	,onBasketForGuest: function ()
 	{
 		this.onBasketCheck (true);
@@ -40,11 +37,20 @@ Vn.Catalog = new Class
 	
 		this.basketChecked = true;
 		this.open ();
+		
+		document.body.appendChild (this.$('right-panel'));
 
 		this.popup = new Htk.Popup ();
 		this.popup.setChildNode (this.$('lots-popup'));
 	}
 	
+	,deactivate: function ()
+	{
+		this.parent ();
+		this.gui.$('top-bar').style.backgroundColor = '';
+		Vn.Node.remove (this.$('right-panel'));
+	}
+	
 	,typeRenderer: function (builder, form)
 	{
 		var link = builder.$('link');
@@ -67,7 +73,7 @@ Vn.Catalog = new Class
 
 	,onTypeChange: function ()
 	{
-		if (Vn.isMobile () && this.$('type').value)
+		if (this._menuShown && this.$('type').value)
 			this.hideMenu ();
 
 		var realms = this.$('realms-model');
@@ -88,13 +94,7 @@ Vn.Catalog = new Class
 		}
 
 		this.gui.$('top-bar').style.backgroundColor = color;
-/*
-		var tr = this.$('items-grid').getNode ()
-			.getElementsByTagName ('thead')[0]
-			.getElementsByTagName ('tr')[0];
-			//.querySelector ('thead tr');
-		tr.style.backgroundColor = color;
-*/	}
+	}
 	
 	,refreshTitle: function (title)
 	{
@@ -138,24 +138,28 @@ Vn.Catalog = new Class
 		batch.changed ();
 	}
 
-	,onMenuClick: function (event)
+	,onRightPanelClick: function (event)
 	{
 		event.stopPropagation ();
 	}
 
 	,onShowMenuClick: function (event)
 	{
+		this._menuShown = true;
 		event.stopPropagation ();
 		this.gui.showBackground ();
-		this.$('menu').style.display = 'block';
+		Vn.Node.addClass (this.$('right-panel'), 'show');
 		this.hideMenuCallback = this.hideMenu.bind (this);
 		document.addEventListener ('click', this.hideMenuCallback);
 	}
 
 	,hideMenu: function ()
 	{
+		if (!this._menuShown)
+			return;
+	
 		this.gui.hideBackground ();
-		this.$('menu').style.display = 'none';
+		Vn.Node.removeClass (this.$('right-panel'), 'show');
 		document.removeEventListener ('click', this.hideMenuCallback);
 		this.hideMenuCallback = null;
 	}
@@ -212,7 +216,7 @@ Vn.Catalog = new Class
 
 	,onGridAddItemClick: function (button, form)
 	{
-		this.showAmountPopup (button, form.row);
+		this.showAmountPopup (button.getNode (), form.row);
 	}
 	
 	,onAddItemClick: function  (column, value, row, button)
diff --git a/web/forms/ecomerce/catalog/style.css b/web/forms/ecomerce/catalog/style.css
index 623fe3e5..f896ec78 100755
--- a/web/forms/ecomerce/catalog/style.css
+++ b/web/forms/ecomerce/catalog/style.css
@@ -32,32 +32,29 @@
 	max-width: 50em;
 	min-width: 25em;
 }
-
 .catalog .footer-message
 {
 	padding-bottom: 1em;
 	text-align: center;
 }
+.htk-toast
+{
+	margin-left: -11em;
+}
 
 /* Topbar */
 
-.catalog .action-bar
+.action-bar > div > .search
 {
-	max-width: 15em;
-}
-.search
-{
-	float: left;
-	display: block;
+	margin-top: .8em;
 	background-color: white;
-	height: 2.2em;
-	padding: 0;
+	height: 2.3em;
 }
 .search > input
 {
 	margin: 0;
 	border: none;
-	width: 10em;
+	width: 8em;
 	box-shadow: none;
 }
 .search > input:focus
@@ -66,18 +63,18 @@
 }
 .search > img
 {
-	margin: 0.4em;
-	margin-top: 0;
+	margin: 0;
+	margin-left: .4em;
 	vertical-align: middle;
 }
 
 /* Menu */
 
-.catalog div.menu
+.right-panel
 {
 	position: absolute;
 	z-index: 20;
-	top: 0;
+	top: 3.9em;
 	bottom: 0;
 	right: 0;
 	width: 17em;
@@ -129,7 +126,7 @@ button.basket:hover
 .types-box
 {
 	position: absolute;
-	top: 14.6em;
+	top: 11.5em;
 	bottom: 0;
 	right: 0;
 	left: 0;
@@ -268,18 +265,18 @@ td.third-category
 	right: .5em;
 }
 
+/* Transitions */
+
+.right-panel
+{
+	transition: right .3s;
+}
+
 /* Mobile */
 
 .catalog-actions button.menu
 {
-	float: left;
 	display: none;
-	border: none;
-	background-color: transparent;
-	box-shadow: none;
-	padding: 0.3em;
-	padding-left: 0;
-	margin-left: 0;
 }
 .catalog-actions button.menu > img
 {
@@ -292,9 +289,14 @@ td.third-category
 	{
 		display: block;
 	}
-	.catalog div.menu
+	.right-panel
 	{
-		display: none;
+		top: 0;
+		right: -17em;
+	}
+	.right-panel.show
+	{
+		right: 0;
 	}
 	.catalog div.center
 	{
diff --git a/web/forms/ecomerce/catalog/ui.xml b/web/forms/ecomerce/catalog/ui.xml
index aff6192a..457b9977 100755
--- a/web/forms/ecomerce/catalog/ui.xml
+++ b/web/forms/ecomerce/catalog/ui.xml
@@ -62,11 +62,21 @@
 <div id="title">
 	<h1 id="title-text"><t>Catalog</t></h1>
 </div>
-<div id="actions" class="action-bar catalog-actions">
+<div id="actions" class="catalog-actions">
 	<div class="search">
 		<img src="image/search.svg" alt="_Search" class="icon"/>
 		<input type="text" id="search-entry" on-change="onSearch"/>
 	</div>
+	<htk-button
+		image="image/dark/view.svg"
+		tip="_Switch view"
+		on-click="onBasketClick"
+		showText="true"/>
+	<htk-button
+		image="image/dark/basket.svg"
+		tip="_ShoppingBasket"
+		on-click="onBasketClick"
+		showText="true"/>
 	<button class="menu" on-click="onShowMenuClick">
 		<img src="image/dark/menu.svg" alt="_Menu"/>
 	</button>
@@ -103,11 +113,17 @@
 					<t>IndicativePhotos</t>
 				</p>			
 			</div>
--->			<htk-repeater id="grid-view" class="grid-view" form-id="item" model="items-model">
+-->			<htk-repeater id="grid-view" empty-message="_SelectSubtype" class="grid-view" form-id="item" model="items-model">
 				<template>
 				<div class="box item-box">
 					<div class="image">
-						<htk-image form="item" column="Foto" directory="catalog/200x200"/>
+						<htk-image
+							directory="catalog"
+							subdir="200x200"
+							form="item"
+							column="Foto"
+							show-full="true"
+							full-dir="900x900"/>
 					</div>
 					<h2>
 						<htk-text form="item" column="Article"/>
@@ -130,7 +146,7 @@
 						</span>
 					</div>
 					<htk-button
-						form="iter"
+						form="item"
 						column="id"
 						tip="_AddToBasket"
 						image="image/add.svg"
@@ -142,44 +158,41 @@
 		</htk-repeater>
 		</div>
 	</div>
-	<div id="menu" class="menu" on-click="onMenuClick">
-		<button class="basket" on-click="onBasketClick">
-			<t>ShoppingBasket</t>
-		</button>
-		<htk-repeater
-			model="realms-model"
-			form-id="realm-form"
-			renderer="realmRenderer"
-			class="realms-box">
-			<db-model id="realms-model" on-status-changed="onTypeChange">
-				SELECT id, reino, color FROM vn2008.reinos
-					WHERE display != FALSE ORDER BY reino
-			</db-model>
-			<template>
-				<a id="link">
-					<img id="image"/>
-				</a>
-			</template>
-		</htk-repeater>
-		<htk-repeater
-			model="types-model"
-			form-id="type-form"
-			renderer="typeRenderer"
-			empty-message="_SelectFamily"
-			class="types-box">
-			<db-model id="types-model" on-status-changed="refreshTitle">
-				CALL type_list (#realm)
-				<sql-batch property="batch">
-					<item name="realm" param="realm"/>
-				</sql-batch>
-			</db-model>
-			<template>
-				<a id="link">
-					<htk-text form="type-form" column="Tipo"/>
-				</a>
-			</template>
-		</htk-repeater>
-	</div>
+</div>
+<div id="right-panel" class="right-panel" on-click="onRightPanelClick">
+	<htk-repeater
+		model="realms-model"
+		form-id="realm-form"
+		renderer="realmRenderer"
+		class="realms-box">
+		<db-model id="realms-model" on-status-changed="onTypeChange">
+			SELECT id, reino, color FROM vn2008.reinos
+				WHERE display != FALSE ORDER BY reino
+		</db-model>
+		<template>
+			<a id="link">
+				<img id="image"/>
+			</a>
+		</template>
+	</htk-repeater>
+	<htk-repeater
+		model="types-model"
+		form-id="type-form"
+		renderer="typeRenderer"
+		empty-message="_SelectFamily"
+		class="types-box">
+		<db-model id="types-model" on-status-changed="refreshTitle">
+			CALL type_list (#realm)
+			<sql-batch property="batch">
+				<item name="realm" param="realm"/>
+			</sql-batch>
+		</db-model>
+		<template>
+			<a id="link">
+				<htk-text form="type-form" column="Tipo"/>
+			</a>
+		</template>
+	</htk-repeater>
 </div>
 <div id="lots-popup" class="lots-popup">
 	<htk-grid class="lots-grid" model="item-lots" show-header="false">
diff --git a/web/forms/ecomerce/checkout/ui.xml b/web/forms/ecomerce/checkout/ui.xml
index 3975ecee..f6e858c2 100755
--- a/web/forms/ecomerce/checkout/ui.xml
+++ b/web/forms/ecomerce/checkout/ui.xml
@@ -50,11 +50,12 @@
 <div id="title">
 	<h1><t>ConfigureOrder</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onCancelClick">
-		<img src="image/dark/close.svg" alt=""/>
-		<t>Cancel</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/close.svg"
+		tip="_Cancel"
+		on-click="onCancelClick"
+		showText="true"/>
 </div>
 <div id="form" class="checkout">
 	<div class="box">
diff --git a/web/forms/ecomerce/orders/orders.js b/web/forms/ecomerce/orders/orders.js
index 6a17a87b..f1b163c1 100755
--- a/web/forms/ecomerce/orders/orders.js
+++ b/web/forms/ecomerce/orders/orders.js
@@ -40,7 +40,7 @@ Vn.Orders = new Class
 	
 	,onPayButtonClick: function ()
 	{
-		this.payPopup.show (this.$('pay-button'));
+		this.payPopup.show (this.$('pay-button').getNode ());
 	}
 	
 	,onCompanyPayClick: function (column, value, row)
diff --git a/web/forms/ecomerce/orders/ui.xml b/web/forms/ecomerce/orders/ui.xml
index 8fd34645..ab2be929 100755
--- a/web/forms/ecomerce/orders/ui.xml
+++ b/web/forms/ecomerce/orders/ui.xml
@@ -2,21 +2,23 @@
 <div id="title">
 	<h1><t>LastOrders</t></h1>
 </div>
-<div id="actions" class="action-bar">
+<div id="actions">
 	<div id="balance">
-		<t>PendingBalance:</t>
+		<span class="label"><t>PendingBalance:</t></span>
 		<htk-label format="%.2d€" conditional-func="balanceConditionalFunc">
 			<db-calc-sum model="balance" column-name="amount"/>
 		</htk-label>
 		<img src="image/dark/info.svg" title="_PaymentInfo" class="balance-info" alt="Info"/>
 	</div>
-	<button id="pay-button" title="_MakePayment" on-click="onPayButtonClick">		
-		<img src="image/dark/pay.svg" alt="_MakePayment"/>
-	</button>
-	<button on-click="onBasketClick" title="_ShoppingBasket">
-		<img src="image/dark/basket.svg" alt=""/>
-		<t>Basket</t>
-	</button>
+	<htk-button
+		id="pay-button"
+		image="image/dark/pay.svg"
+		tip="_MakePayment"
+		on-click="onPayButtonClick"/>
+	<htk-button
+		image="image/dark/basket.svg"
+		tip="_ShoppingBasket"
+		on-click="onBasketClick"/>
 </div>
 <div id="form" class="orders">
 	<div class="box confirmed">
diff --git a/web/forms/news/new/ui.xml b/web/forms/news/new/ui.xml
index f61c460f..4bce9513 100755
--- a/web/forms/news/new/ui.xml
+++ b/web/forms/news/new/ui.xml
@@ -17,11 +17,12 @@
 <div id="title">
 	<h1><t>AddEditNew</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onAcceptClick">
-		<img src="image/dark/ok.svg" alt=""/>
-		<t>Accept</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/ok.svg"
+		tip="_Accept"
+		on-click="onAcceptClick"
+		showText="true"/>
 </div>
 <div id="form" class="new">
 	<div class="box">
diff --git a/web/forms/news/news/ui.xml b/web/forms/news/news/ui.xml
index cb50f057..a02e21c3 100755
--- a/web/forms/news/news/ui.xml
+++ b/web/forms/news/news/ui.xml
@@ -2,11 +2,12 @@
 <div id="title">
 	<h1><t>NewsManagement</t></h1>
 </div>
-<div id="actions" class="action-bar">
-	<button on-click="onAddClick">
-		<img src="image/dark/add.svg" alt=""/>
-		<t>AddNew</t>
-	</button>
+<div id="actions">
+	<htk-button
+		image="image/dark/add.svg"
+		tip="_AddNew"
+		on-click="onAddClick"
+		showText="true"/>
 </div>
 <div id="form" class="news">
 	<div class="box">
diff --git a/web/image/dark/exit.svg b/web/image/dark/exit.svg
index 3a23504b..e1e0f40d 100644
--- a/web/image/dark/exit.svg
+++ b/web/image/dark/exit.svg
@@ -41,10 +41,10 @@
      inkscape:window-height="1016"
      id="namedview8"
      showgrid="false"
-     inkscape:zoom="17.166667"
-     inkscape:cx="23.563107"
-     inkscape:cy="24"
-     inkscape:window-x="0"
+     inkscape:zoom="51.5"
+     inkscape:cx="7.8543689"
+     inkscape:cy="8"
+     inkscape:window-x="1920"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg2" />
@@ -54,8 +54,8 @@
      inkscape:connector-curvature="0"
      style="fill:none" />
   <path
-     d="M 6.9361111,9.991667 7.722222,10.777778 10.5,8 7.722222,5.222222 6.9361111,6.008333 8.372222,7.444444 3,7.444444 l 0,1.111112 5.372222,0 -1.4361109,1.436111 z M 11.888889,3 4.1111111,3 C 3.4972222,3 3,3.497222 3,4.111111 l 0,2.222222 1.1111111,0 0,-2.222222 7.7777779,0 0,7.777778 -7.7777779,0 0,-2.222222 -1.1111111,0 0,2.222222 C 3,12.502778 3.4972222,13 4.1111111,13 l 7.7777779,0 C 12.502778,13 13,12.502778 13,11.888889 L 13,4.111111 C 13,3.497222 12.502778,3 11.888889,3 Z"
+     d="M 6.7233333,10.39 7.6666664,11.333334 11,8 7.6666664,4.6666664 6.7233333,5.6099996 8.4466664,7.3333328 2,7.3333328 l 0,1.3333344 6.4466664,0 L 6.7233333,10.39 Z M 12.666667,2 3.3333333,2 C 2.5966666,2 2,2.5966664 2,3.3333332 l 0,2.6666664 1.3333333,0 0,-2.6666664 9.3333337,0 0,9.3333338 -9.3333337,0 0,-2.666667 L 2,10 2,12.666667 C 2,13.403334 2.5966666,14 3.3333333,14 l 9.3333337,0 C 13.403334,14 14,13.403334 14,12.666667 L 14,3.3333332 C 14,2.5966664 13.403334,2 12.666667,2 Z"
      id="path6"
      inkscape:connector-curvature="0"
-     style="stroke:none;stroke-opacity:1;fill:#ffffff;fill-opacity:0.94117647" />
+     style="fill:#ffffff;fill-opacity:0.94117647;stroke:none;stroke-opacity:1" />
 </svg>
diff --git a/web/image/dark/view-dual.svg b/web/image/dark/view-dual.svg
new file mode 100644
index 00000000..5753e204
--- /dev/null
+++ b/web/image/dark/view-dual.svg
@@ -0,0 +1,180 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="view-dual.svg"
+   height="16"
+   id="svg7384"
+   inkscape:version="0.91 r13725"
+   version="1.1"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer12"
+     inkscape:cx="2.8446602"
+     inkscape:cy="7.961165"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1016"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="51.5">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="60.0002px"
+       originy="650.00012px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-181,-867.00012)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-181,-867.00012)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 181,868 0,1 0,11 0,1 1,0 5,0 c 0.1754,0 0.52538,0.15166 0.8125,0.34375 0.28712,0.19209 0.46875,0.375 0.46875,0.375 L 189,882.4375 l 0.71875,-0.75 c 0,0 0.8963,-0.6875 1.28125,-0.6875 l 5,0 1,0 0,-1 0,-11 0,-1 -1,0 -5,0 c -0.87652,0 -1.56017,0.34756 -2.03125,0.6875 -0.0301,-0.0207 -0.031,-0.0105 -0.0625,-0.0312 C 188.44557,868.35254 187.82811,868 187,868 l -5,0 -1,0 z m 2,2 4,0 c 0.13821,0 0.51476,0.14746 0.8125,0.34375 0.29774,0.19629 0.5,0.375 0.5,0.375 l 0.71875,0.6875 0.6875,-0.71875 c 0,0 0.89975,-0.6875 1.28125,-0.6875 l 4,0 0,9 -4,0 c -0.87693,0 -1.56008,0.34735 -2.03125,0.6875 -0.0196,-0.0135 -0.011,-0.0177 -0.0312,-0.0312 C 188.47725,879.34834 187.83512,879 187,879 l -4,0 0,-9 z"
+       id="rect7352-28-4-8"
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+    <rect
+       height="2"
+       id="rect42942-5-3-1-4-4-5-9"
+       inkscape:label="a"
+       rx="0.375"
+       ry="0.375"
+       style="opacity:0.7;color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;stroke-opacity:1"
+       transform="scale(-1,1)"
+       width="3.0000136"
+       x="-187.00021"
+       y="871.99976" />
+    <rect
+       height="2.0002136"
+       id="rect42944-7-5-3-5-1-5-0-2-62-5"
+       inkscape:label="a"
+       rx="0.375"
+       ry="0.375"
+       style="opacity:0.7;color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;stroke-opacity:1"
+       transform="scale(-1,1)"
+       width="3.0000129"
+       x="-187.00021"
+       y="874.99976" />
+    <rect
+       height="2.0002136"
+       id="rect42942-5-3-1-4-4-6-0-1"
+       inkscape:label="a"
+       rx="0.375"
+       ry="0.375"
+       style="opacity:0.7;color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;stroke-opacity:1"
+       transform="scale(-1,1)"
+       width="3.0000136"
+       x="-194.00021"
+       y="871.99976" />
+    <rect
+       height="2.0002136"
+       id="rect42944-7-5-3-5-1-5-0-2-6-4-6"
+       inkscape:label="a"
+       rx="0.375"
+       ry="0.375"
+       style="opacity:0.7;color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;stroke-opacity:1"
+       transform="scale(-1,1)"
+       width="3.0000129"
+       x="-194.00021"
+       y="874.99976" />
+  </g>
+</svg>
diff --git a/web/image/dark/view-grid.svg b/web/image/dark/view-grid.svg
new file mode 100644
index 00000000..5f2d7ebe
--- /dev/null
+++ b/web/image/dark/view-grid.svg
@@ -0,0 +1,209 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="view-grid.svg"
+   height="16"
+   id="svg7384"
+   inkscape:version="0.91 r13725"
+   version="1.1"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-paths="false"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer12"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#555753"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1016"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="51.5">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-61.0004,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-61.0004,-867)">
+    <rect
+       height="2"
+       id="rect13363"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="64.000198"
+       y="870" />
+    <rect
+       height="2"
+       id="rect13365"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="68.000198"
+       y="870" />
+    <rect
+       height="2"
+       id="rect13367"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="72.000198"
+       y="870" />
+    <rect
+       height="2"
+       id="rect13369"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="64.000198"
+       y="874.01562" />
+    <rect
+       height="2"
+       id="rect13371"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="68.000198"
+       y="874.01562" />
+    <rect
+       height="2"
+       id="rect13373"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="72.000198"
+       y="874.01562" />
+    <rect
+       height="2"
+       id="rect13375"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="64.000198"
+       y="878" />
+    <rect
+       height="2"
+       id="rect13377"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="68.000198"
+       y="878" />
+    <rect
+       height="2"
+       id="rect13379"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="72.000198"
+       y="878" />
+  </g>
+</svg>
diff --git a/web/image/dark/view-list.svg b/web/image/dark/view-list.svg
new file mode 100644
index 00000000..1316d90c
--- /dev/null
+++ b/web/image/dark/view-list.svg
@@ -0,0 +1,188 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="view-list.svg"
+   inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   height="16"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="false"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer12"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="false"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1016"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:zoom="51.5">
+    <inkscape:grid
+       dotted="false"
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="199.9998px"
+       originy="650px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     style="display:inline"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     style="display:inline"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-41.000401,-867)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-41.000401,-867)">
+    <rect
+       height="2.0002136"
+       id="rect5356"
+       inkscape:label="a"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       width="7.0000005"
+       x="47.000198"
+       y="869.99976" />
+    <rect
+       height="2.0002136"
+       id="rect5358"
+       inkscape:label="a"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       width="7.0000005"
+       x="47.000198"
+       y="873.99976" />
+    <rect
+       height="2.0002136"
+       id="rect5360"
+       inkscape:label="a"
+       style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+       width="7.0000005"
+       x="47.000198"
+       y="877.99976" />
+    <rect
+       height="2"
+       id="rect5398"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="44.000198"
+       y="870" />
+    <rect
+       height="2"
+       id="rect5401"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="44.000198"
+       y="874.01562" />
+    <rect
+       height="2"
+       id="rect5403"
+       rx="0.38461545"
+       ry="0.37878788"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
+       width="2.0000002"
+       x="44.000198"
+       y="878" />
+  </g>
+</svg>
diff --git a/web/image/dark/view.svg b/web/image/dark/view.svg
new file mode 100644
index 00000000..41ade484
--- /dev/null
+++ b/web/image/dark/view.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="eye.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#494949"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="51.5"
+     inkscape:cx="0.15346619"
+     inkscape:cy="7.92233"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1036.3622)">
+    <path
+       id="path4138"
+       d="m 8,1040.1853 c 3.58462,0 6,4.1847 6,4.1847 0,0 -2.41538,4.1692 -6,4.1692 -3.58462,0 -6,-4.1692 -6,-4.1692 0,0 2.41538,-4.1847 6,-4.1847 z m 0,7.1231 c 1.61538,0 2.93846,-1.3231 2.93846,-2.9384 0,-1.6154 -1.32308,-2.9385 -2.93846,-2.9385 -1.61538,0 -2.93846,1.3231 -2.93846,2.9385 0,1.6153 1.32308,2.9384 2.93846,2.9384 z m 1.32308,-2.9384 c 0,0.723 -0.61539,1.3077 -1.32308,1.3077 -0.72308,0 -1.30769,-0.5847 -1.30769,-1.3077 0,-0.7078 0.58461,-1.3231 1.30769,-1.3231 0.70769,0 1.32308,0.6154 1.32308,1.3231 z"
+       inkscape:connector-curvature="0"
+       style="fill:#ffffff;fill-opacity:1" />
+  </g>
+</svg>
diff --git a/web/image/exit.svg b/web/image/exit.svg
index a071c071..1469607a 100644
--- a/web/image/exit.svg
+++ b/web/image/exit.svg
@@ -41,10 +41,10 @@
      inkscape:window-height="1016"
      id="namedview8"
      showgrid="false"
-     inkscape:zoom="17.166667"
-     inkscape:cx="23.563107"
-     inkscape:cy="24"
-     inkscape:window-x="0"
+     inkscape:zoom="51.5"
+     inkscape:cx="7.8543689"
+     inkscape:cy="8"
+     inkscape:window-x="1920"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg2" />
@@ -54,8 +54,8 @@
      inkscape:connector-curvature="0"
      style="fill:none" />
   <path
-     d="M 6.9361111,9.991667 7.722222,10.777778 10.5,8 7.722222,5.222222 6.9361111,6.008333 8.372222,7.444444 3,7.444444 l 0,1.111112 5.372222,0 -1.4361109,1.436111 z M 11.888889,3 4.1111111,3 C 3.4972222,3 3,3.497222 3,4.111111 l 0,2.222222 1.1111111,0 0,-2.222222 7.7777779,0 0,7.777778 -7.7777779,0 0,-2.222222 -1.1111111,0 0,2.222222 C 3,12.502778 3.4972222,13 4.1111111,13 l 7.7777779,0 C 12.502778,13 13,12.502778 13,11.888889 L 13,4.111111 C 13,3.497222 12.502778,3 11.888889,3 Z"
+     d="M 6.7233333,10.39 7.6666664,11.333334 11,8 7.6666664,4.6666664 6.7233333,5.6099996 8.4466664,7.3333328 2,7.3333328 l 0,1.3333344 6.4466664,0 L 6.7233333,10.39 Z M 12.666667,2 3.3333333,2 C 2.5966666,2 2,2.5966664 2,3.3333332 l 0,2.6666664 1.3333333,0 0,-2.6666664 9.3333337,0 0,9.3333338 -9.3333337,0 0,-2.666667 L 2,10 2,12.666667 C 2,13.403334 2.5966666,14 3.3333333,14 l 9.3333337,0 C 13.403334,14 14,13.403334 14,12.666667 L 14,3.3333332 C 14,2.5966664 13.403334,2 12.666667,2 Z"
      id="path6"
      inkscape:connector-curvature="0"
-     style="stroke:none;stroke-opacity:1;fill:#66666f;fill-opacity:0.94117647" />
+     style="fill:#66666f;fill-opacity:0.94117647;stroke:none;stroke-opacity:1" />
 </svg>
diff --git a/web/index.php b/web/index.php
index 475164f6..225a1a6a 100755
--- a/web/index.php
+++ b/web/index.php
@@ -64,7 +64,7 @@ Web::init ();
 if (isset ($_GET['page']) && Vn\Hedera\checkToken ($_GET['page']))
 	$page = $_GET['page'];
 else
-	$page = 'login';
+	$page = 'main';
 
 // Checking the browser version
 
diff --git a/web/js/hedera/gui.css b/web/js/hedera/gui.css
index 96624ad4..ded5209c 100755
--- a/web/js/hedera/gui.css
+++ b/web/js/hedera/gui.css
@@ -53,7 +53,7 @@
 }
 .vn-gui .menu-button img
 {
-	margin-top: .2em;
+	vertical-align: middle;
 	height: 1.8em;
 }
 .vn-gui .title
@@ -67,33 +67,65 @@
 	padding: .7em .6em;
 	margin: 0;
 }
-.vn-gui .actions-holder
-{
-	float: right;
-	padding: .5em 1em;
-	padding-left: 0;
-}
 .vn-gui .top-bar > .loader
 {
 	float: right;
-	margin: 1.1em;
+	margin: 5% 1em;
 	visibility: hidden;
+	height: 90%;
 }
 .vn-gui .exit
 {
 	float: right;
 	padding: 0 .4em;
-}
-.vn-gui .exit img
-{
-	height: 2.2em;
 	display: block;
-	margin: .8em auto;
+	height: 100%;
 }
 .vn-gui .exit:hover
 {
 	background-color: rgba(0, 0, 0, .2);
 }
+.vn-gui .exit > img
+{
+	height: 1.8em;
+	vertical-align: middle;
+}
+
+/* Action bar */
+
+.vn-gui .action-bar
+{
+	float: right;
+	padding: 0;
+	margin: 0;
+	height: 100%;
+}
+.vn-gui .action-bar > div
+{
+	padding: 0;
+	margin: 0;
+	height: 100%;
+}
+.vn-gui .action-bar > div > *
+{
+	float: left;
+	padding: 0;
+	margin: 1.3em .5em;
+}
+.vn-gui .action-bar button
+{
+	margin: 0;
+	padding: 1.15em .5em;
+}
+.vn-gui .action-bar button:hover
+{
+	background-color: rgba(1, 1, 1, 0.2);
+}
+.vn-gui .action-bar button > img
+{
+	vertical-align: middle;
+	height: 1.4em;
+}
 
 /* Body */
 
@@ -280,19 +312,37 @@
 .vn-gui > .left-panel,
 .vn-gui > .body
 {
-	transition: left .3s;
-	-webkit-transition: left .3s;
+	transition-property: left, right;
+	transition-duration: .3s;
 }
 .vn-gui .top-bar
 {
 	transition: background-color .3s;
-	-webkit-transition: background-color .3s;
+}
+
+/* Desktop */
+
+@media (min-width: 951px)
+{
+	.htk-toast
+	{
+		margin-left: -3em;
+	}
+	.vn-gui ul.submenu.show
+	{
+		display: inline;
+	}
 }
 
 /* Mobile */
 
 @media (max-width: 950px)
 {
+	.action-bar span.label,
+	.htk-button > span
+	{
+		display: none;
+	}
 	.vn-gui > .body
 	{
 		left: 0;
@@ -307,7 +357,7 @@
 		left: -15em;
 		box-shadow: 0 0.2em 0.2em #333;
 	}
-	.vn-gui .left-panel-show
+	.vn-gui .left-panel.show
 	{
 		left: 0;
 	}
@@ -324,7 +374,7 @@
 		background-color: white;
 		box-shadow: none;
 	}
-	.vn-gui .htk-toast
+	.htk-toast
 	{
 		margin-left: -11em;
 	}
diff --git a/web/js/hedera/gui.js b/web/js/hedera/gui.js
index 8f92a922..b86c119a 100755
--- a/web/js/hedera/gui.js
+++ b/web/js/hedera/gui.js
@@ -74,6 +74,7 @@ Vn.Gui = new Class
 	
 	,hide: function ()
 	{
+		this.closeForm ();
 		Vn.Node.remove (this.node);
 	}
 	
@@ -100,7 +101,7 @@ Vn.Gui = new Class
 	,showMenu: function ()
 	{
 		this.showBackground ();
-		Vn.Node.addClass (this.$('left-panel'), 'left-panel-show');
+		Vn.Node.addClass (this.$('left-panel'), 'show');
 		this.menuShown = true;
 
 		this.hideMenuCallback = this.hideMenu.bind (this);
@@ -113,7 +114,7 @@ Vn.Gui = new Class
 			return;
 	
 		this.hideBackground ();
-		Vn.Node.removeClass (this.$('left-panel'), 'left-panel-show');
+		Vn.Node.removeClass (this.$('left-panel'), 'show');
 		this.menuShown = false;
 		
 		document.removeEventListener ('click', this.hideMenuCallback);
@@ -328,14 +329,14 @@ Vn.Gui = new Class
 
 	,onLiMouseHover: function (submenu, parent)
 	{
-		if (Vn.isMobile ())
+		if (this.menuShown)
 			return;
 
 		this.hideSubmenu ();
 		this.activeSubmenu = submenu;
 
 		var rect = parent.getBoundingClientRect ();
-		submenu.style.display = 'inline';
+		Vn.Node.addClass (submenu, 'show');
 		submenu.style.left = rect.right +'px';
 		submenu.style.top = rect.top +'px';
 	}
@@ -351,7 +352,9 @@ Vn.Gui = new Class
 	
 		if (submenu)
 		{
-			submenu.style.display = 'none';
+			Vn.Node.removeClass (submenu, 'show');
+			submenu.style.left = 'initial';
+			submenu.style.top = 'initial';
 			clearTimeout (this.timeout);
 			this.activeSubmenu = null;
 			this.timeout = 0;
@@ -368,36 +371,17 @@ Vn.Gui = new Class
 	{
 		this.hideMenu ();
 		this.loaderPush ();
+		
+		this.closeForm ();
 
 		this.requestedForm = formPath;
 
 		var formInfo = this.forms[formPath];
 		var path = 'forms/'+ formPath;
 
-		if (this.activeForm)
-		{
-			this.setTitle (null);
-			this.setActions (null);
-			this.activeForm.deactivate ();
-			this.activeForm.close ();
-			this.activeForm.unref ();
-			this.activeForm = null;
-		}
-
-		if (this.activeCss)
-		{
-			Vn.excludeCss (this.activeCss +'/style.css');
-			
-			if (Vn.isMobile ())
-				Vn.excludeCss (this.activeCss  +'/mobile.css');
-		}
-
 		this.activeCss = path;
 
 		Vn.includeCss (this.activeCss +'/style.css');
-		
-		if (Vn.isMobile ())
-			Vn.includeCss (this.activeCss +'/mobile.css');
 
 		if (!formInfo)
 		{
@@ -511,14 +495,32 @@ Vn.Gui = new Class
 	
 	,setActions: function (actions)
 	{
-		Vn.Node.removeChilds (this.$('actions-holder'));
+		Vn.Node.removeChilds (this.$('action-bar'));
 				
 		if (actions)
-			this.$('actions-holder').appendChild (actions);
+			this.$('action-bar').appendChild (actions);
+	}
+	
+	,closeForm: function ()
+	{
+		if (this.activeForm)
+		{
+			this.activeForm.deactivate ();
+			this.activeForm.close ();
+			this.activeForm.unref ();
+			this.activeForm = null;
+		}
+
+		if (this.activeCss)
+		{
+			Vn.excludeCss (this.activeCss +'/style.css');
+			this.activeCss = null;
+		}
 	}
 
 	,_destroy: function ()
 	{
+		this.hide ();
 		this.hashParam.unref ();
 		this.parent ();
 	}
diff --git a/web/js/hedera/gui.xml b/web/js/hedera/gui.xml
index de606756..e152d7ed 100755
--- a/web/js/hedera/gui.xml
+++ b/web/js/hedera/gui.xml
@@ -31,10 +31,10 @@
 			<button id="menu-button" class="menu-button">
 				<img src="image/dark/menu.svg" alt="_Menu"/>
 			</button>
-			<a class="exit" on-click="onLogoutClick" title="_Exit">
+			<button class="exit" on-click="onLogoutClick" title="_Exit">
 				<img src="image/dark/exit.svg" alt="_Exit"/>
-			</a>
-			<div id="actions-holder" class="actions-holder"/>
+			</button>
+			<div id="action-bar" class="action-bar"/>
 			<div id="loader" class="loader">
 				<htk-loader/>
 			</div>
diff --git a/web/js/hedera/module.js b/web/js/hedera/module.js
index b3bc1028..8466c361 100755
--- a/web/js/hedera/module.js
+++ b/web/js/hedera/module.js
@@ -69,6 +69,8 @@ Vn.Module = new Class
 	{
 		if (this.node)
 		{
+			this.gui.setTitle (null);
+			this.gui.setActions (null);
 			Vn.Node.remove (this.node);
 			this.node = null;
 		}
diff --git a/web/js/hedera/style.css b/web/js/hedera/style.css
index 060934ce..e0c0e2b9 100755
--- a/web/js/hedera/style.css
+++ b/web/js/hedera/style.css
@@ -286,38 +286,6 @@ img.editable
 	width: 100%;
 }
 
-/* Action bar */
-
-.action-bar
-{
-	float: right;
-	padding: 0;
-	margin-top: 0.3em;
-}
-.action-bar > *
-{
-	float: left;
-	padding: 0.4em;
-}
-.action-bar > button
-{
-	border-left: 1px solid white;
-}
-.action-bar > button:first-child
-{
-	border-left: none;
-}
-.action-bar > button:hover
-{
-	background-color: rgba(1, 1, 1, 0.2);
-}
-.action-bar > button > img
-{
-	vertical-align: middle;
-	margin-right: 0.4em;
-	height: 1.4em;
-}
-
 /* Form */
 
 table.form
diff --git a/web/js/htk/field/button.js b/web/js/htk/field/button.js
index 5347a4ea..3f22a740 100755
--- a/web/js/htk/field/button.js
+++ b/web/js/htk/field/button.js
@@ -11,6 +11,7 @@ Htk.Button = new Class
 			{
 				this.img.src = x;
 			}
+			
 		},
 		tip:
 		{
@@ -22,10 +23,31 @@ Htk.Button = new Class
 					this.node.title = _(x);
 					this.img.title = _(x);
 				}
+				
+				this.render ();
+			}
+			,get: function ()
+			{
+				return this.node.title;
+			}
+		},
+		showText:
+		{
+			type: Boolean
+			,set: function (x)
+			{					
+				this._showText = x;
+				this.render ();
+			}
+			,get: function ()
+			{
+				return this._showText;
 			}
 		}
 	}
 	
+	,_showText: false
+	
 	,initialize: function (props)
 	{
 		this.parent (props);
@@ -36,6 +58,19 @@ Htk.Button = new Class
 		this.img = document.createElement ('img');
 		this.node.appendChild (this.img);
 	}
+	
+	,render: function ()
+	{
+		if (this._textNode)
+			Vn.Node.remove (this._textNode);
+
+		if (this._showText && this.node.title)
+		{
+			this._textNode = document.createElement ('span');
+			this._textNode.appendChild (document.createTextNode (this.node.title));
+			this.node.appendChild (this._textNode);
+		}
+	}
 
 	,onClick: function ()
 	{
diff --git a/web/js/htk/field/image.js b/web/js/htk/field/image.js
index f7feb798..2730558a 100755
--- a/web/js/htk/field/image.js
+++ b/web/js/htk/field/image.js
@@ -1,3 +1,8 @@
+/**
+ * Class to display or edit an image. Also it allows to show it's full version.
+ **/
+var fullImage = null;
+ 
 Htk.Image = new Class
 ({
 	Extends: Htk.Entry
@@ -13,19 +18,78 @@ Htk.Image = new Class
 			,set: function (x)
 			{
 				this._directory = x;
-				this.basedir = Vn.Config['image_dir'] +'/'+ x;
+				this._basedir = Vn.Config['image_dir'] +'/'+ x;
 				this.render (false);
 			}
 			,get: function ()
 			{
 				return this._directory;
 			}
+		},
+		/**
+		 * The directory where the images are allocated.
+		 **/
+		subdir:
+		{
+			type: String
+			,set: function (x)
+			{
+				this._subdir = x;
+				this.render (false);
+			}
+			,get: function ()
+			{
+				return this._subdir;
+			}
+		},
+		/**
+		 * Whether to show the full image when mouse hover.
+		 **/
+		showFull:
+		{
+			type: Boolean
+			,set: function (x)
+			{
+				if (x && !this._fullImage)
+				{
+					if (!fullImage)
+						fullImage = new Htk.FullImage ();
+				
+					this._fullImage = fullImage;
+					this.node.addEventListener ('mouseover', this.onMouseOver.bind (this));
+					this.node.addEventListener ('mouseout', this.onMouseOut.bind (this));
+				}
+				
+				this._showFull = x;
+			}
+			,get: function ()
+			{
+				return this._showFull;
+			}
+		},
+		/**
+		 * Subdirectory where full images are allocated.
+		 **/
+		fullDir:
+		{
+			type: String
+			,set: function (x)
+			{
+				this._fullDir = x;
+			}
+			,get: function ()
+			{
+				return this._fullDir;
+			}
 		}
 	}
 
 	,_directory: null
-	,basedir: null
-	,empty: false
+	,_subdir: null
+	,_basedir: null
+	,_empty: false
+	,_showFull: false
+	,_fullDir: null
 
 	,initialize: function (props)
 	{
@@ -36,9 +100,9 @@ Htk.Image = new Class
 
 	,onImageError: function ()
 	{
-		if (!this.empty)
+		if (!this._empty)
 		{
-			this.empty = true;
+			this._empty = true;
 			this.node.src = 'image/empty.png';
 		}
 	}
@@ -49,15 +113,18 @@ Htk.Image = new Class
 		{
 			var url = '';
 		
-			if (this.basedir)
-				url += this.basedir +'/';
+			if (this._basedir)
+				url += this._basedir +'/';
+
+			if (this._subdir)
+				url += this._subdir +'/';
 
 			url += this._value;
 
 			if (force)
 				url += '?' + (new Date()).getTime ();
 
-			this.empty = false;
+			this._empty = false;
 			this.node.src = url;
 			this.node.style.display = '';
 		}
@@ -73,14 +140,24 @@ Htk.Image = new Class
 		this.render (false);
 	}
 
-	,setShowFull: function (show)
+	,onMouseOver: function (cell)
 	{
-		if (show)
-		{
-			this.fullImage = new Htk.FullImage ();
-			this.node.addEventListener ('mouseover', this.onMouseOver.bind (this));
-			this.node.addEventListener ('mouseout', this.onMouseOut.bind (this));
-		}
+		if (!this._showFull)
+			return;
+	
+		var src = this._fullDir ? this._fullDir : 'full';
+		src += '/'+ this._value;
+
+		if (this._stamp)
+			src += '?'+ this._stamp;
+	
+		if (!cell.error)
+			this._fullImage.show (this._basedir +'/'+ src);
+	}
+	
+	,onMouseOut: function ()
+	{
+		this._fullImage.hide ();
 	}
 
 	,setEditable: function (editable) 
@@ -103,16 +180,5 @@ Htk.Image = new Class
 		this.popup.setChild (editor);
 		this.popup.show (this.node);
 	}
-
-	,onMouseOver: function (cell)
-	{
-		if (!cell.empty)
-			this.fullImage.show (this.basedir, cell.value);
-	}
-	
-	,onMouseOut: function ()
-	{
-		this.fullImage.hide ();
-	}
 });
 
diff --git a/web/js/htk/style.css b/web/js/htk/style.css
index c536a860..979a8ac1 100755
--- a/web/js/htk/style.css
+++ b/web/js/htk/style.css
@@ -103,11 +103,18 @@
 	margin: auto;
 }
 
+/* Button */
+
+.htk-button > span
+{
+	margin-left: .5em;
+}
+
 /* Repater */
 
 .htk-repeater > .message
 {
-	padding: 1em 0;
+	padding: 1em;
 	text-align: center;
 }
 .htk-repeater > .message > *