forked from verdnatura/hedera-web
Refactor, Component improved
This commit is contained in:
Juan Ferrer Toribio
parent
23715816ce
commit
7b54145da6
|
|
@ -39,9 +39,14 @@ Hedera.Basket = new Class
|
|||
this.hash.setAll ({form: 'ecomerce/confirm'});
|
||||
}
|
||||
|
||||
,repeaterFunc: function (res, form)
|
||||
,repeaterFunc: function (res, lot)
|
||||
{
|
||||
res.$.subtotal.value = this.subtotal (form);
|
||||
res.$.subtotal.value = this.subtotal (lot);
|
||||
|
||||
if (lot.$.amount > lot.$.available)
|
||||
Vn.Node.addClass (res.$.available, 'unavailable');
|
||||
else
|
||||
Vn.Node.removeClass (res.$.available, 'unavailable');
|
||||
}
|
||||
|
||||
,onDeleteClick: function (button)
|
||||
|
|
@ -50,9 +55,9 @@ Hedera.Basket = new Class
|
|||
button.lot.deleteRow ();
|
||||
}
|
||||
|
||||
,subtotal: function (form)
|
||||
,subtotal: function (lot)
|
||||
{
|
||||
return form.$.amount * form.$.price;
|
||||
return lot.$.amount * lot.$.price;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -54,9 +54,14 @@
|
|||
|
||||
/* Fields */
|
||||
|
||||
.basket td.available-exceeded input
|
||||
.basket ._available
|
||||
{
|
||||
background-color: #FCC;
|
||||
visibility: hidden;
|
||||
}
|
||||
.basket ._available.unavailable
|
||||
{
|
||||
color: red;
|
||||
visibility: visible;
|
||||
}
|
||||
.basket .icon > img
|
||||
{
|
||||
|
|
|
|||
|
|
@ -28,11 +28,10 @@
|
|||
</div>
|
||||
<htk-repeater renderer="repeaterFunc">
|
||||
<db-model id="items" property="model" 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
|
||||
JOIN vn2008.Articles a ON a.Id_Article = i.item_id
|
||||
LEFT JOIN vn2008.Origen o ON a.id_origen = o.id
|
||||
SELECT r.id, r.amount, r.price, 0 available,
|
||||
i.name, i.size, i.category, i.image
|
||||
FROM basket_item r
|
||||
JOIN vn.item i ON i.id = r.item_id
|
||||
</db-model>
|
||||
<custom>
|
||||
<div class="line">
|
||||
|
|
@ -43,21 +42,24 @@
|
|||
icon="delete"
|
||||
on-click="onDeleteClick"/>
|
||||
<htk-image
|
||||
value="{{Foto}}"
|
||||
value="{{image}}"
|
||||
class="photo"
|
||||
directory="catalog"
|
||||
subdir="200x200"
|
||||
full-dir="900x900"/>
|
||||
<p class="concept">
|
||||
{{Article}} {{Medida}} {{Categoria}}
|
||||
{{name}} {{size}} {{category}}
|
||||
</p>
|
||||
<p class="amount">
|
||||
{{amount}} x
|
||||
<span id="row">{{amount}}</span> x
|
||||
<htk-text lot="iter" name="price" format="%.2d€"/>
|
||||
<span class="subtotal">
|
||||
<htk-text id="subtotal" format="%.2d€"/>
|
||||
</span>
|
||||
</p>
|
||||
<span id="available">
|
||||
{{available}} <span>_availables</span>
|
||||
</span>
|
||||
<div class="clear"/>
|
||||
</div>
|
||||
</custom>
|
||||
|
|
|
|||
|
|
@ -109,10 +109,10 @@ Hedera.Catalog = new Class
|
|||
|
||||
,onBasketReady: function (form)
|
||||
{
|
||||
if (form.get ('method') != 'PICKUP')
|
||||
if (form.$.method != 'PICKUP')
|
||||
Vn.Node.setText (this.$.method, _('Agency'));
|
||||
else
|
||||
Vn.Node.setText (this.$.method, _('Warehouse'));
|
||||
Vn.Node.setText (this.$.method, _('Store'));
|
||||
}
|
||||
|
||||
,onOrderChange: function (combo)
|
||||
|
|
@ -137,7 +137,7 @@ Hedera.Catalog = new Class
|
|||
|
||||
if (shouldRefresh)
|
||||
{
|
||||
this.$.items.query = this.buildQuery ('CALL catalogGetItems ()');
|
||||
this.$.items.query = this.buildQuery ('CALL catalogGetItems');
|
||||
this.$.items.refresh ();
|
||||
|
||||
var nTags = maxFilters - this.nFilters;
|
||||
|
|
@ -509,7 +509,7 @@ Hedera.Catalog = new Class
|
|||
{
|
||||
this.conn.execQuery (sql);
|
||||
|
||||
var itemName = this.$.card.$.Article;
|
||||
var itemName = this.$.card.$.name;
|
||||
Htk.Toast.showMessage (
|
||||
Vn.Value.sprintf (_('Added%dOf%s'), amountSum, itemName));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.right-panel .filter
|
||||
{
|
||||
padding: 1em 1.8em;
|
||||
}
|
||||
.right-panel .categories
|
||||
{
|
||||
width: 95%;
|
||||
|
|
|
|||
|
|
@ -39,38 +39,16 @@
|
|||
result-index="2"
|
||||
auto-load="false">
|
||||
</db-model>
|
||||
<db-form id="basket" on-ready="onBasketReady">
|
||||
<db-model property="model">
|
||||
SELECT o.id, o.date_send, ag.description agency, v.code method
|
||||
FROM basket o
|
||||
JOIN vn2008.Agencias ag ON ag.Id_Agencia = o.agency_id
|
||||
JOIN vn2008.Vistas v ON v.vista_id = o.delivery_method_id
|
||||
</db-model>
|
||||
</db-form>
|
||||
<db-query id="basket-lines">
|
||||
SELECT item_id, warehouse_id, SUM(amount) amount
|
||||
FROM basket_item
|
||||
GROUP BY warehouse_id
|
||||
</db-query>
|
||||
<db-query id="tags" on-ready="onTagsReady">
|
||||
SELECT it.tagFk, SUM(it.priority) priority
|
||||
FROM vn.itemTag it
|
||||
JOIN vn.item i ON i.id = it.itemFk
|
||||
WHERE #filter
|
||||
GROUP BY tagFk
|
||||
ORDER BY priority DESC
|
||||
LIMIT 6
|
||||
</db-query>
|
||||
<db-form id="card-extend">
|
||||
<db-model
|
||||
property="model"
|
||||
lot="card-lot">
|
||||
SELECT i.description, o.name origin
|
||||
FROM vn.item i
|
||||
LEFT JOIN vn.originL10n o ON o.id = i.originFk
|
||||
WHERE i.id = #item
|
||||
</db-model>
|
||||
</db-form>
|
||||
<db-lot id="basket" on-ready="onBasketReady">
|
||||
SELECT o.id, o.date_send, ag.description agency, v.code method
|
||||
FROM basket o
|
||||
JOIN vn.agencyMode ag ON ag.id = o.agency_id
|
||||
JOIN vn2008.Vistas v ON v.vista_id = o.delivery_method_id
|
||||
</db-lot>
|
||||
<db-lot id="card-extend" lot="card-lot">
|
||||
SELECT i.description
|
||||
FROM vn.item i WHERE i.id = #item
|
||||
</db-lot>
|
||||
<db-model
|
||||
id="item-lots"
|
||||
result-index="1"
|
||||
|
|
@ -126,23 +104,22 @@
|
|||
icon="add"
|
||||
on-click="onAddItemClick"
|
||||
class="add-button"/>
|
||||
<h2>{{item.name}}</h2>
|
||||
<h2>{{name}}</h2>
|
||||
<p class="producer">
|
||||
{{item.producer}}
|
||||
{{producer}}
|
||||
</p>
|
||||
<p>
|
||||
@{{item.id}}
|
||||
@{{id}}
|
||||
</p>
|
||||
<p>
|
||||
<span>_Size</span> {{item.size}}
|
||||
<span>_Category</span> {{item.category}}
|
||||
{{tag1}} {{val1}}, {{tag2}} {{val2}}
|
||||
</p>
|
||||
<p class="color">
|
||||
<span>_Color</span> {{item.inkFk}}
|
||||
<p>
|
||||
{{tag3}} {{val3}}
|
||||
<htk-text lot="item" name="stems" format="_, %.0d Units"/>
|
||||
</p>
|
||||
<div class="aval-price">
|
||||
{{item.available}}
|
||||
{{available}}
|
||||
<span class="from">_from</span>
|
||||
<span class="price">
|
||||
<htk-text lot="item" name="price" format="%.2d€"/>
|
||||
|
|
@ -262,17 +239,23 @@
|
|||
<p class="producer">
|
||||
{{card.producer}}
|
||||
</p>
|
||||
<htk-repeater>
|
||||
<db-lot property="model" lot="card-lot">
|
||||
SELECT t.name, it.value
|
||||
FROM vn.itemTag it
|
||||
JOIN vn.tag t ON t.id = it.tagFk
|
||||
WHERE it.id = #item
|
||||
ORDER BY it.priority
|
||||
</db-lot>
|
||||
<custom>
|
||||
<p>
|
||||
{{name}} {{value}}
|
||||
</p>
|
||||
</custom>
|
||||
</htk-repeater>
|
||||
<p>
|
||||
<span>_Size</span> {{card.size}},
|
||||
<span>_Category</span> {{card.category}}
|
||||
</p>
|
||||
<p class="color">
|
||||
<span>_Color</span> {{card.inkFk}}
|
||||
<htk-text lot="card" name="Tallos" format="_, %.0d Units"/>
|
||||
</p>
|
||||
<p>
|
||||
<span>_Origin</span> {{card.origin}}
|
||||
</p>
|
||||
</div>
|
||||
<p class="desc">
|
||||
{{cardExtend.description}}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
|
||||
@media screen {
|
||||
|
||||
.vn-gui
|
||||
.hedera-gui
|
||||
{
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
/* Font */
|
||||
|
||||
.vn-gui .user-info,
|
||||
.vn-gui .menu-title,
|
||||
.vn-gui .main-menu
|
||||
.hedera-gui .user-info,
|
||||
.hedera-gui .menu-title,
|
||||
.hedera-gui ._main-menu
|
||||
{
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
|
||||
.vn-gui .navbar
|
||||
.hedera-gui ._navbar
|
||||
{
|
||||
position: fixed;
|
||||
background-color: #009688;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
transition-duration: 200ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
.vn-gui .navbar .menu-button
|
||||
.hedera-gui ._navbar .menu-button
|
||||
{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -44,16 +44,16 @@
|
|||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.vn-gui .navbar .menu-button img
|
||||
.hedera-gui ._navbar .menu-button img
|
||||
{
|
||||
vertical-align: middle;
|
||||
height: 1.8em;
|
||||
}
|
||||
.vn-gui .navbar .title
|
||||
.hedera-gui ._navbar ._title
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
.vn-gui .navbar .title > h1
|
||||
.hedera-gui ._navbar ._title > h1
|
||||
{
|
||||
font-weight: normal;
|
||||
font-size: 1.4em;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.vn-gui .navbar > .htk-spinner
|
||||
.hedera-gui ._navbar > .htk-spinner
|
||||
{
|
||||
float: left;
|
||||
margin: 1.05em .8em;
|
||||
|
|
@ -72,29 +72,29 @@
|
|||
|
||||
/* Action bar */
|
||||
|
||||
.action-bar
|
||||
._action-bar
|
||||
{
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.action-bar > div
|
||||
._action-bar > div
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.action-bar > div > *
|
||||
._action-bar > div > *
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.action-bar button
|
||||
._action-bar button
|
||||
{
|
||||
margin: 0;
|
||||
padding: 1.25em .5em;
|
||||
}
|
||||
.action-bar button > img
|
||||
._action-bar button > img
|
||||
{
|
||||
vertical-align: middle;
|
||||
height: 1.4em;
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
|
||||
/* Background */
|
||||
|
||||
.vn-gui > .background
|
||||
.hedera-gui > ._background
|
||||
{
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
|
|
@ -114,16 +114,17 @@
|
|||
background-color: rgba(1, 1, 1, .7);
|
||||
opacity: 0;
|
||||
}
|
||||
.vn-gui > .background.show
|
||||
.hedera-gui > ._background.show
|
||||
{
|
||||
visibility: visible;
|
||||
transition: opacity 200ms ease-out;
|
||||
opacity: 1;
|
||||
transition: opacity 200ms ease-out;
|
||||
-webkit-transition: opacity 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Left panel */
|
||||
|
||||
.vn-gui .left-panel
|
||||
.hedera-gui ._left-panel
|
||||
{
|
||||
z-index: 20;
|
||||
position: fixed;
|
||||
|
|
@ -135,7 +136,7 @@
|
|||
box-shadow: 0 .2em .2em rgba(1, 1, 1, .4);
|
||||
width: 15em;
|
||||
}
|
||||
.vn-gui .menu-overflow
|
||||
.hedera-gui .menu-overflow
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -144,24 +145,24 @@
|
|||
bottom: 4em;
|
||||
overflow: auto;
|
||||
}
|
||||
.vn-gui .menu-header
|
||||
.hedera-gui ._menu-header
|
||||
{
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
}
|
||||
.vn-gui .logo
|
||||
.hedera-gui .logo
|
||||
{
|
||||
display: block;
|
||||
width: 12em;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
.vn-gui .user-info
|
||||
.hedera-gui .user-info
|
||||
{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vn-gui .user-info > p
|
||||
.hedera-gui .user-info > p
|
||||
{
|
||||
margin: 0;
|
||||
margin-top: .2em;
|
||||
|
|
@ -169,19 +170,19 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vn-gui button.logout
|
||||
.hedera-gui button.logout
|
||||
{
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: .2em;
|
||||
display: block;
|
||||
}
|
||||
.vn-gui button.logout > img
|
||||
.hedera-gui button.logout > img
|
||||
{
|
||||
height: 1.2em;
|
||||
display: block;
|
||||
}
|
||||
.vn-gui .supplant
|
||||
.hedera-gui ._supplant
|
||||
{
|
||||
margin-top: .2em;
|
||||
display: none;
|
||||
|
|
@ -189,7 +190,7 @@
|
|||
|
||||
/* Test link */
|
||||
|
||||
.vn-gui .test-link
|
||||
.hedera-gui ._test-link
|
||||
{
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
|
|
@ -201,43 +202,43 @@
|
|||
border-radius: .1em;
|
||||
text-align: center;
|
||||
}
|
||||
.vn-gui .test-link:hover
|
||||
.hedera-gui ._test-link:hover
|
||||
{
|
||||
background-color: #4f61c5;
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
|
||||
.vn-gui .main-menu,
|
||||
.vn-gui ul.submenu
|
||||
.hedera-gui ._main-menu,
|
||||
.hedera-gui ul.submenu
|
||||
{
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.vn-gui .main-menu > li
|
||||
.hedera-gui ._main-menu > li
|
||||
{
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.vn-gui .main-menu a
|
||||
.hedera-gui ._main-menu a
|
||||
{
|
||||
width: 70%;
|
||||
padding: 0 15%;
|
||||
display: block;
|
||||
line-height: 2.8em;
|
||||
}
|
||||
.vn-gui .main-menu a.selected
|
||||
.hedera-gui ._main-menu a.selected
|
||||
{
|
||||
background-color: rgba(1, 1, 1, .1);
|
||||
}
|
||||
.vn-gui ul.submenu
|
||||
.hedera-gui ul.submenu
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.vn-gui ul.submenu.popup
|
||||
.hedera-gui ul.submenu.popup
|
||||
{
|
||||
display: inline;
|
||||
position: fixed;
|
||||
|
|
@ -252,7 +253,7 @@
|
|||
|
||||
/* Social */
|
||||
|
||||
.vn-gui .social
|
||||
.hedera-gui .social
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -262,7 +263,7 @@
|
|||
|
||||
/* Body */
|
||||
|
||||
.vn-gui > .body
|
||||
.hedera-gui > .body
|
||||
{
|
||||
margin-left: 15em;
|
||||
padding-top: 3.9em;
|
||||
|
|
@ -274,11 +275,11 @@
|
|||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.vn-gui .form-holder
|
||||
.hedera-gui ._form-holder
|
||||
{
|
||||
height: inherit;
|
||||
}
|
||||
.vn-gui .form-holder > *
|
||||
.hedera-gui ._form-holder > *
|
||||
{
|
||||
position: relative;
|
||||
height: inherit;
|
||||
|
|
@ -292,25 +293,25 @@
|
|||
|
||||
@media screen and (max-width: 960px)
|
||||
{
|
||||
.vn-gui .action-bar span.label,
|
||||
.vn-gui .htk-button > span
|
||||
.hedera-gui ._action-bar span.label,
|
||||
.hedera-gui .htk-button > span
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.vn-gui > .navbar
|
||||
.hedera-gui > ._navbar
|
||||
{
|
||||
padding-left: 2.8em;
|
||||
left: 0;
|
||||
}
|
||||
.vn-gui > .body
|
||||
.hedera-gui > .body
|
||||
{
|
||||
margin-left: 0;
|
||||
}
|
||||
.vn-gui .navbar .menu-button
|
||||
.hedera-gui ._navbar .menu-button
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.vn-gui .left-panel
|
||||
.hedera-gui ._left-panel
|
||||
{
|
||||
top: 0;
|
||||
left: -15em;
|
||||
|
|
@ -319,16 +320,16 @@
|
|||
transition: transform 200ms ease-out;
|
||||
-webkit-transition: transform 200ms ease-out;
|
||||
}
|
||||
.vn-gui .left-panel.show
|
||||
.hedera-gui ._left-panel.show
|
||||
{
|
||||
transform: translateZ(0) translateX(15em);
|
||||
-webkit-transform: translateZ(0) translateX(15em);
|
||||
}
|
||||
.vn-gui .form-holder
|
||||
.hedera-gui ._form-holder
|
||||
{
|
||||
left: 0;
|
||||
}
|
||||
.vn-gui ul.submenu
|
||||
.hedera-gui ul.submenu
|
||||
{
|
||||
display: block;
|
||||
background-color: #888;
|
||||
|
|
@ -340,7 +341,7 @@
|
|||
transition: max-height 300ms ease-out;
|
||||
-webkit-transition: max-height 300ms ease-out;
|
||||
}
|
||||
.vn-gui .main-menu li:hover > ul.submenu
|
||||
.hedera-gui ._main-menu li:hover > ul.submenu
|
||||
{
|
||||
max-height: 20em;
|
||||
}
|
||||
|
|
@ -350,8 +351,8 @@
|
|||
|
||||
@media print
|
||||
{
|
||||
.vn-gui .navbar,
|
||||
.vn-gui .left-panel
|
||||
.hedera-gui ._navbar,
|
||||
.hedera-gui ._left-panel
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ require ('./gui.css');
|
|||
module.exports = new Class
|
||||
({
|
||||
Extends: Vn.Component,
|
||||
Tag: 'hedera-gui',
|
||||
Properties:
|
||||
{
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
SELECT default_form, image_dir, image_host FROM config;
|
||||
SELECT production_domain, test_domain FROM config;
|
||||
</db-query>
|
||||
<div id="main" class="vn-gui">
|
||||
<div id="navbar" class="navbar">
|
||||
<div id="action-bar" class="action-bar"/>
|
||||
<div id="main">
|
||||
<div id="navbar">
|
||||
<div id="action-bar"/>
|
||||
<button class="menu-button" on-click="onMenuButtonClick">
|
||||
<img src="image/icon/dark/menu.svg" alt="_Menu"/>
|
||||
</button>
|
||||
<div id="title" class="title"/>
|
||||
<htk-spinner id="loader" class="loader dark"/>
|
||||
<div id="title"/>
|
||||
<htk-spinner id="loader" class="dark"/>
|
||||
</div>
|
||||
<div id="left-panel" class="left-panel" on-click="onLeftPanelClick">
|
||||
<div id="left-panel" on-click="onLeftPanelClick">
|
||||
<div class="menu-overflow">
|
||||
<div class="menu-header" id="menu-header">
|
||||
<div id="menu-header">
|
||||
<img class="logo" src="image/logo-dark.svg" alt="Verdnatura"/>
|
||||
<div class="user-info">
|
||||
<button class="logout" on-click="onLogoutClick" title="_Exit">
|
||||
|
|
@ -26,25 +26,25 @@
|
|||
</button>
|
||||
<p>{{user.name}}</p>
|
||||
</div>
|
||||
<div id="supplant" class="supplant user-info">
|
||||
<div id="supplant" class="user-info">
|
||||
<button class="logout" on-click="onSupplantExitClick" title="_Exit">
|
||||
<img src="image/icon/dark/exit.svg" alt="_Exit"/>
|
||||
</button>
|
||||
<p id="supplanted"/>
|
||||
</div>
|
||||
</div>
|
||||
<a id="test-link" class="test-link" href="{{newVersion.link}}">
|
||||
<a id="test-link" href="{{newVersion.link}}">
|
||||
{{newVersion.text}}
|
||||
</a>
|
||||
<ul id="main-menu" class="main-menu"/>
|
||||
<ul id="main-menu"/>
|
||||
</div>
|
||||
<div class="social">
|
||||
<htk-social-bar id="social-bar" priority="2"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div id="form-holder" class="form-holder"/>
|
||||
<div id="form-holder"/>
|
||||
</div>
|
||||
<div id="background" class="background" on-click="onBackgroundClick"/>
|
||||
<div id="background" on-click="onBackgroundClick"/>
|
||||
</div>
|
||||
</vn>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
.vn-login
|
||||
.hedera-login
|
||||
{
|
||||
color: #333;
|
||||
font-size: 1.1em;
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
/* Navigation bar */
|
||||
|
||||
.vn-login .navbar
|
||||
.hedera-login .navbar
|
||||
{
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
color: white;
|
||||
|
||||
}
|
||||
.vn-login .navbar div
|
||||
.hedera-login .navbar div
|
||||
{
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
|
|
@ -28,11 +28,11 @@
|
|||
|
||||
/* Body */
|
||||
|
||||
.vn-login .body
|
||||
.hedera-login .body
|
||||
{
|
||||
height: inherit;
|
||||
}
|
||||
.vn-login .column
|
||||
.hedera-login .column
|
||||
{
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
|
@ -44,14 +44,14 @@
|
|||
|
||||
/* Login */
|
||||
|
||||
.vn-login .login
|
||||
.hedera-login .login
|
||||
{
|
||||
position: relative;
|
||||
height: inherit;
|
||||
max-width: 15em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.vn-login form
|
||||
.hedera-login form
|
||||
{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -59,28 +59,28 @@
|
|||
width: 100%;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.vn-login form > div
|
||||
.hedera-login form > div
|
||||
{
|
||||
margin: 1em 0;
|
||||
}
|
||||
.vn-login p
|
||||
.hedera-login p
|
||||
{
|
||||
margin: .4em 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
.vn-login .header
|
||||
.hedera-login .header
|
||||
{
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.vn-login .header img
|
||||
.hedera-login .header img
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
/* box-shadow: 0 0 .3em 0 rgba(1, 1, 1, 0.4);*/
|
||||
}
|
||||
.vn-login .version-code
|
||||
.hedera-login .version-code
|
||||
{
|
||||
color: red;
|
||||
text-align: right;
|
||||
|
|
@ -92,26 +92,26 @@
|
|||
|
||||
/* Body */
|
||||
|
||||
.vn-login .form-inputs
|
||||
.hedera-login .form-inputs
|
||||
{
|
||||
margin: 0 auto;
|
||||
max-width: 15em;
|
||||
}
|
||||
.vn-login label
|
||||
.hedera-login label
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
.vn-login .form-group label
|
||||
.hedera-login .form-group label
|
||||
{
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
}
|
||||
.vn-login input
|
||||
.hedera-login input
|
||||
{
|
||||
margin: 0.3em;
|
||||
}
|
||||
.vn-login input[type=text],
|
||||
.vn-login input[type=password]
|
||||
.hedera-login input[type=text],
|
||||
.hedera-login input[type=password]
|
||||
{
|
||||
margin: 0;
|
||||
margin-top: .5em;
|
||||
|
|
@ -120,16 +120,16 @@
|
|||
border: 1px solid #AAA;
|
||||
height: 2.6em;
|
||||
}
|
||||
.vn-login input[type=text],
|
||||
.vn-login input[type=password],
|
||||
.vn-login input[type=submit],
|
||||
.vn-login input[type=button],
|
||||
.vn-login button
|
||||
.hedera-login input[type=text],
|
||||
.hedera-login input[type=password],
|
||||
.hedera-login input[type=submit],
|
||||
.hedera-login input[type=button],
|
||||
.hedera-login button
|
||||
{
|
||||
border-radius: .1em;
|
||||
box-shadow: 0 .1em .1em rgba(1, 1, 1, 0.4);
|
||||
}
|
||||
.vn-login input[type=checkbox]
|
||||
.hedera-login input[type=checkbox]
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -137,9 +137,9 @@
|
|||
height: initial;
|
||||
margin-right: .5em;
|
||||
}
|
||||
.vn-login input[type=submit],
|
||||
.vn-login input[type=button],
|
||||
.vn-login button
|
||||
.hedera-login input[type=submit],
|
||||
.hedera-login input[type=button],
|
||||
.hedera-login button
|
||||
{
|
||||
margin: 0 auto;
|
||||
background-color: #9CBC28;
|
||||
|
|
@ -149,9 +149,9 @@
|
|||
color: #240;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.vn-login input[type=submit]:hover,
|
||||
.vn-login input[type=button]:hover,
|
||||
.vn-login button:hover
|
||||
.hedera-login input[type=submit]:hover,
|
||||
.hedera-login input[type=button]:hover,
|
||||
.hedera-login button:hover
|
||||
{
|
||||
background-color: #8A1;
|
||||
}
|
||||
|
|
@ -162,11 +162,11 @@ hr
|
|||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
.vn-login .enter
|
||||
.hedera-login .enter
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
.vn-login .wrapper
|
||||
.hedera-login .wrapper
|
||||
{
|
||||
width: 0;
|
||||
overflow: visible;
|
||||
|
|
@ -174,7 +174,7 @@ hr
|
|||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.vn-login .htk-spinner
|
||||
.hedera-login .htk-spinner
|
||||
{
|
||||
margin: .3em 1em;
|
||||
position: absolute;
|
||||
|
|
@ -182,22 +182,22 @@ hr
|
|||
|
||||
/* Footer */
|
||||
|
||||
.vn-login .footer
|
||||
.hedera-login .footer
|
||||
{
|
||||
margin-top: 2em;
|
||||
}
|
||||
.vn-login .contact
|
||||
.hedera-login .contact
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-height: 50em)
|
||||
{
|
||||
.vn-login
|
||||
.hedera-login
|
||||
{
|
||||
height: auto;
|
||||
}
|
||||
.vn-login form
|
||||
.hedera-login form
|
||||
{
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ require ('./login.css');
|
|||
module.exports = new Class
|
||||
({
|
||||
Extends: Vn.Component,
|
||||
Tag: 'hedera-login',
|
||||
Properties:
|
||||
{
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<vn>
|
||||
<div id="main" class="vn-login">
|
||||
<div id="main">
|
||||
<div class="navbar">
|
||||
<div>
|
||||
<a href="#!form=cms/about&guest=true">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
<div class="footer">
|
||||
<htk-social-bar id="social-bar" priority="1"/>
|
||||
<div id="social" class="social"/>
|
||||
<div id="social"/>
|
||||
<div class="contact">
|
||||
<p>_Login mail</p>
|
||||
<p>_Login phone</p>
|
||||
|
|
|
|||
|
|
@ -35,10 +35,9 @@ module.exports = new Class
|
|||
|
||||
,_priority: 0
|
||||
|
||||
,initialize: function ()
|
||||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-social-bar';
|
||||
this.createRoot ('div');
|
||||
}
|
||||
|
||||
,_refresh: function ()
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var bar = this.createRoot ('div');
|
||||
bar.className = 'htk-assistant-bar';
|
||||
|
||||
var previousButton = this.createElement ('button');
|
||||
previousButton.className = 'previous';
|
||||
|
|
|
|||
|
|
@ -73,7 +73,6 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-assistant';
|
||||
}
|
||||
,setStep: function (stepIndex)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('button');
|
||||
node.className = 'htk-button';
|
||||
node.addEventListener ('click', this._onClick.bind (this));
|
||||
|
||||
this.img = this.createElement ('img');
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ module.exports = new Class
|
|||
var len = Vn.Date.WDays.length;
|
||||
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-calendar';
|
||||
|
||||
var div = this.createElement ('div');
|
||||
div.className = 'month';
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-combo input clickable';
|
||||
Vn.Node.addClass (node, 'input clickable');
|
||||
node.tabIndex = 0;
|
||||
node.addEventListener ('mousedown',
|
||||
this._onMouseDown.bind (this));
|
||||
|
|
|
|||
|
|
@ -13,10 +13,9 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-date-chooser';
|
||||
|
||||
this.label = this.createElement ('span');
|
||||
this.node.appendChild (this.label);
|
||||
node.appendChild (this.label);
|
||||
|
||||
this.setEditable (this._editable);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,6 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-image';
|
||||
|
||||
var img = this.img = this.createElement ('img');
|
||||
img.addEventListener ('error', this._onImageError.bind (this));
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var div = this.createRoot ('div');
|
||||
div.className = 'htk-search-entry';
|
||||
|
||||
var icon = new Htk.Icon ({
|
||||
icon: 'search',
|
||||
|
|
@ -25,7 +24,7 @@ module.exports = new Class
|
|||
this._input = input;
|
||||
}
|
||||
|
||||
,_onChange: function (event)
|
||||
,_onChange: function ()
|
||||
{
|
||||
var newValue;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ module.exports = new Class
|
|||
node.addEventListener ('change', this.changed.bind (this));
|
||||
}
|
||||
|
||||
,changed: function (event)
|
||||
,changed: function ()
|
||||
{
|
||||
var value;
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,6 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var table = this.createRoot ('table');
|
||||
table.className = 'htk-grid';
|
||||
|
||||
var thead = this.createElement ('thead');
|
||||
table.appendChild (thead);
|
||||
|
|
|
|||
|
|
@ -50,8 +50,7 @@ module.exports = new Class
|
|||
|
||||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('img');
|
||||
node.className = 'htk-icon';
|
||||
this.createRoot ('img');
|
||||
}
|
||||
|
||||
,_setIcon: function ()
|
||||
|
|
|
|||
|
|
@ -71,8 +71,7 @@ module.exports = new Class
|
|||
|
||||
,render: function ()
|
||||
{
|
||||
var div = this.createRoot ('div');
|
||||
div.className = 'htk-popup';
|
||||
this.createRoot ('div');
|
||||
}
|
||||
|
||||
,_setChildNode: function (childNode)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ module.exports = new Class
|
|||
,render: function ()
|
||||
{
|
||||
var loader = this.createRoot ('div');
|
||||
loader.className = 'htk-spinner';
|
||||
|
||||
var spin = this.spin = this.createElement ('div');
|
||||
loader.appendChild (spin);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ module.exports = new Class
|
|||
}
|
||||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-step';
|
||||
this.createRoot ('div');
|
||||
}
|
||||
});
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
var Compiler = require ('./compiler');
|
||||
var Component = require ('./component');
|
||||
var kebabToCamel = require ('./string-util').kebabToCamel;
|
||||
var VnNode = require ('./node');
|
||||
|
||||
var specialAttrs = {
|
||||
id : 1,
|
||||
|
|
@ -76,7 +77,11 @@ module.exports = new Class
|
|||
object.setAttribute (prop, props[prop]);
|
||||
|
||||
if (context.nodeId)
|
||||
object.setAttribute ('id', scope.getHtmlId (context.nodeId));
|
||||
{
|
||||
var id = context.nodeId;
|
||||
object.setAttribute ('id', scope.getHtmlId (id));
|
||||
object.className = '_'+ id +' '+ object.className;
|
||||
}
|
||||
|
||||
return object;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -172,7 +172,11 @@ module.exports = new Class
|
|||
object.setProperties (context.props);
|
||||
|
||||
if (context.nodeId && object instanceof Component)
|
||||
object.htmlId = scope.getHtmlId (context.nodeId);
|
||||
{
|
||||
var id = context.nodeId;
|
||||
object.htmlId = scope.getHtmlId (id);
|
||||
object.className = '_'+ id +' '+ object.className;
|
||||
}
|
||||
|
||||
return object;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,12 +108,19 @@ module.exports = Klass.implement
|
|||
|
||||
,createRoot: function (tagName)
|
||||
{
|
||||
this._node = this.createElement (tagName);
|
||||
var node = this.createElement (tagName);
|
||||
this._setNode (node);
|
||||
return node;
|
||||
}
|
||||
|
||||
,_setNode: function (node)
|
||||
{
|
||||
if (this.htmlId)
|
||||
this._node.id = this.htmlId;
|
||||
|
||||
return this._node;
|
||||
node.id = this.htmlId;
|
||||
if (this.$constructor.Tag)
|
||||
node.className = this.$constructor.Tag;
|
||||
|
||||
this._node = node;
|
||||
}
|
||||
|
||||
,renderBase: function ()
|
||||
|
|
@ -156,7 +163,7 @@ module.exports = Klass.implement
|
|||
this.scope = scope;
|
||||
scope.link ();
|
||||
this.$ = scope.$;
|
||||
this._node = this.$.main;
|
||||
this._setNode (this.$.main);
|
||||
return scope;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,7 @@ Mutators.Tag = function (tagName)
|
|||
vnCustomTags[tagName] = this;
|
||||
|
||||
if (this.parent)
|
||||
{
|
||||
this.implement ({Parent: this.parent.Parent});
|
||||
this.implement ({Child: this.parent.Child});
|
||||
this.implement ({Properties: {}});
|
||||
}
|
||||
|
||||
this.extend ({Tag: tagName});
|
||||
};
|
||||
|
|
@ -38,14 +34,3 @@ Mutators.Properties = function (props)
|
|||
this.extend ({Properties: props});
|
||||
Object.defineProperties (this.prototype, props);
|
||||
};
|
||||
|
||||
Mutators.Parent = function (propName)
|
||||
{
|
||||
this.extend ({Parent: propName});
|
||||
};
|
||||
|
||||
Mutators.Child = function (propName)
|
||||
{
|
||||
this.extend ({Child: propName});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue