wbuezas
/
hedera-web-mindshore
forked from verdnatura/hedera-web
0
1
Fork 0
Code Pull Requests Activity

Checkpoint

This commit is contained in:
Juan Ferrer 2022-05-26 08:08:31 +02:00
parent f515249329
commit 614038470d
146 changed files with 2031 additions and 2163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
forms/account/address-list/style.css
View File

@ -1,15 +1,4 @@
.address-list {
padding: 1em;
}
.address-list .box {
max-width: 420px;
}
.address-list .form {
margin: 0 auto;
max-width: 25em;
padding: 2em;
}
.address-list .htk-list .side { .address-list .htk-list .side {
padding-right: 16px; padding-right: 16px;
} }

2
forms/account/address-list/ui.xml
View File

@ -28,7 +28,7 @@
on-click="this.onAddAddressClick()"/> on-click="this.onAddAddressClick()"/>
</div> </div>
<div id="form" class="address-list"> <div id="form" class="address-list">
<div class="box"> <div class="box vn-w-sm">
<htk-radio-group <htk-radio-group
id="default-address" id="default-address"
column="defaultAddressFk" column="defaultAddressFk"

8
forms/account/address/style.css
View File

@ -1,8 +0,0 @@
.address {
padding: 1em;
}
.address .box {
max-width: 420px;
padding: 3em;
}

110
forms/account/address/ui.xml
View File

@ -36,61 +36,61 @@
on-click="this.onAcceptClick()"/> on-click="this.onAcceptClick()"/>
</div> </div>
<div id="form" class="address"> <div id="form" class="address">
<div class="box"> <div class="form box vn-w-sm vn-pa-lg">
<div class="form"> <h5 class="vn-mb-md">
<h2><t>AddEditAddress</t></h2> <t>AddEditAddress</t>
<div class="form-group"> </h5>
<htk-entry <div class="form-group">
placeholder="_Name" <htk-entry
column="nickname" form="iter"/> placeholder="_Name"
</div> column="nickname" form="iter"/>
<div class="form-group"> </div>
<htk-entry <div class="form-group">
placeholder="_Address" <htk-entry
column="street" form="iter"/> placeholder="_Address"
</div> column="street" form="iter"/>
<div class="form-group"> </div>
<htk-entry <div class="form-group">
placeholder="_City" <htk-entry
column="city" form="iter"/> placeholder="_City"
</div> column="city" form="iter"/>
<div class="form-group"> </div>
<htk-entry <div class="form-group">
placeholder="_ZipCode" <htk-entry
column="postalCode" form="iter"/> placeholder="_ZipCode"
</div> column="postalCode" form="iter"/>
<div class="form-group"> </div>
<htk-combo <div class="form-group">
placeholder="_Country"> <htk-combo
<db-param placeholder="_Country">
id="country" <db-param
property="param" id="country"
form="iter" property="param"
column="countryFk" form="iter"
one-way="true"/> column="countryFk"
<db-model property="model"> one-way="true"/>
SELECT id, country FROM vn.country <db-model property="model">
ORDER BY country SELECT id, country FROM vn.country
</db-model> ORDER BY country
</htk-combo> </db-model>
</div> </htk-combo>
<div class="form-group"> </div>
<htk-combo <div class="form-group">
placeholder="_Province" <htk-combo
column="provinceFk" placeholder="_Province"
form="iter"> column="provinceFk"
<db-model property="model"> form="iter">
SELECT id, name FROM vn.province <db-model property="model">
WHERE countryFk = #country SELECT id, name FROM vn.province
ORDER BY name WHERE countryFk = #country
<sql-batch property="batch"> ORDER BY name
<custom> <sql-batch property="batch">
<item name="country" param="country"/> <custom>
</custom> <item name="country" param="country"/>
</sql-batch> </custom>
</db-model> </sql-batch>
</htk-combo> </db-model>
</div> </htk-combo>
</div> </div>
</div> </div>
</div> </div>

1
forms/account/conf/conf.js
View File

@ -4,6 +4,7 @@ Hedera.Conf = new Class({
,activate: function() { ,activate: function() {
this.$('user-model').setInfo('c', 'myClient', 'hedera'); this.$('user-model').setInfo('c', 'myClient', 'hedera');
this.$('user-model').setInfo('u', 'myUser', 'account');
if (this.hash.get('verificationToken')) if (this.hash.get('verificationToken'))
this.onPassChangeClick(); this.onPassChangeClick();

14
forms/account/conf/style.css
View File

@ -1,18 +1,4 @@
.conf {
padding: 1em;
}
.conf .box {
max-width: 420px;
padding: 3em;
}
.pass-change {
max-width: 15em;
padding: 2.5em;
}
.pass-info {
width: 15em;
}
.pass-info ul { .pass-info ul {
list-style-type: none; list-style-type: none;
} }

20
forms/account/conf/ui.xml
View File

@ -34,9 +34,10 @@
on-click="this.onPassChangeClick()"/> on-click="this.onPassChangeClick()"/>
</div> </div>
<div id="form" class="conf"> <div id="form" class="conf">
<div class="box"> <div class="form box vn-w-sm vn-pa-lg">
<div class="form"> <h5 class="vn-mb-md">
<h2><t>Personal information</t></h2> <t>Personal information</t>
</h5>
<div class="form-group"> <div class="form-group">
<htk-entry <htk-entry
placeholder="_Username" placeholder="_Username"
@ -76,14 +77,15 @@
</label> </label>
</div> </div>
</div> </div>
</div>
</div> </div>
<htk-popup <htk-popup
id="change-password" id="change-password"
modal="true"> modal="true">
<div property="child-node" class="htk-dialog pass-change"> <div property="child-node" class="htk-dialog vn-w-xs vn-pa-lg">
<div class="form"> <div class="form">
<h2><t>Change password</t></h2> <h5 class="vn-mb-md">
<t>Change password</t>
</h5>
<input <input
id="old-password" id="old-password"
type="password" type="password"
@ -111,10 +113,10 @@
<htk-popup <htk-popup
id="password-info" id="password-info"
modal="true"> modal="true">
<div property="child-node" class="htk-dialog pass-info"> <div property="child-node" class="htk-dialog pass-info vn-w-xs vn-pa-lg">
<h3> <h5 class="vn-mb-md">
<t>Password requirements</t> <t>Password requirements</t>
</h3> </h5>
<ul> <ul>
<li> <li>
<htk-text form="password-form" column="length"/> <htk-text form="password-form" column="length"/>

23
forms/admin/access-log/style.css
View File

@ -1,13 +1,4 @@
.access-log {
padding: 1em;
}
.access-log .box {
max-width: 25em;
margin: 0 auto;
}
.access-log .form {
padding: 2em;
}
.access-log .form > p { .access-log .form > p {
font-size: 1.2em; font-size: 1.2em;
margin: .1em 0; margin: .1em 0;
@ -15,15 +6,7 @@
/* List */ /* List */
.access-log .list { .access-log .htk-list {
margin-top: 1em; margin-top: 16px;
}
.access-log .item {
display: block;
padding: 1em;
border-bottom: 1px solid #DDD;
}
.access-log .item > p {
margin: .1em 0;
} }

62
forms/admin/access-log/ui.xml
View File

@ -22,7 +22,7 @@
<h1><t>AccessLog</t></h1> <h1><t>AccessLog</t></h1>
</div> </div>
<div id="form" class="access-log"> <div id="form" class="access-log">
<div class="box"> <div class="box vn-w-xs vn-pa-lg">
<div class="form"> <div class="form">
<p>#{{$.userForm.id}}</p> <p>#{{$.userForm.id}}</p>
<p>{{$.userForm.nickname}}</p> <p>{{$.userForm.nickname}}</p>
@ -30,39 +30,35 @@
<p>{{$.userForm.phone}}</p> <p>{{$.userForm.phone}}</p>
</div> </div>
</div> </div>
<div class="list box"> <htk-repeater form-id="iter" class="box vn-w-xs htk-list vn-mt-md">
<div> <db-model property="model">
<htk-repeater form-id="iter"> <custom>
<db-model property="model"> SELECT u.stamp, a.platform, a.browser, a.version, a.javascript, a.cookies
<custom> FROM visitUser u
SELECT u.stamp, a.platform, a.browser, a.version, a.javascript, a.cookies JOIN visitAccess c ON c.id = u.accessFk
FROM visitUser u JOIN visitAgent a ON a.id = c.agentFk
JOIN visitAccess c ON c.id = u.accessFk WHERE u.userFk = #user
JOIN visitAgent a ON a.id = c.agentFk ORDER BY u.stamp DESC
WHERE u.userFk = #user LIMIT 8
ORDER BY u.stamp DESC </custom>
LIMIT 8 <sql-batch property="batch">
</custom>
<sql-batch property="batch">
<custom>
<item name="user" param="user"/>
</custom>
</sql-batch>
</db-model>
<custom> <custom>
<div class="item"> <item name="user" param="user"/>
<p>
{{Vn.Value.format(iter.stamp, _('%a, %e %b %Y at %T'))}}
</p>
<p>
{{iter.platform}} -
{{iter.browser}}
{{iter.version}}
</p>
</div>
</custom> </custom>
</htk-repeater> </sql-batch>
</div> </db-model>
</div> <custom>
<div class="item">
<div class="content">
<p>
{{Vn.Value.format(iter.stamp, _('%a, %e %b %Y at %T'))}}
</p>
<p>
{{iter.platform}} - {{iter.browser}} {{iter.version}}
</p>
</div>
</div>
</custom>
</htk-repeater>
</div> </div>
</vn> </vn>

11
forms/admin/connections/style.css
View File

@ -1,13 +1,6 @@
.connections {
padding: 1em;
}
.connections .box {
max-width: 420px;
margin: 0 auto;
}
.action-bar .connections-sum { .action-bar .connections-sum {
padding: .4em; padding: .4em;
background-color: #1e88e5; background-color: #1e88e5;
border-radius: 0.1em; border-radius: .1em;
box-shadow: 0 0 0.4em rgba(255, 255, 255, .1);
} }

84
forms/admin/connections/ui.xml
View File

@ -18,50 +18,48 @@
</div> </div>
</div> </div>
<div id="form" class="connections"> <div id="form" class="connections">
<div class="box"> <htk-repeater form-id="iter" class="box htk-list vn-w-xs">
<htk-repeater form-id="iter" class="htk-list"> <db-model
<db-model property="model"
property="model" id="sessions"
id="sessions" on-status-changed="this.onModelStatusChange()">
on-status-changed="this.onModelStatusChange()">
<custom>
SELECT vu.userFk userId, vu.stamp, u.nickname, s.lastUpdate,
a.platform, a.browser, a.version, u.name user
FROM userSession s
JOIN visitUser vu ON vu.id = s.userVisitFk
JOIN visitAccess ac ON ac.id = vu.accessFk
JOIN visitAgent a ON a.id = ac.agentFk
JOIN visit v ON v.id = a.visitFk
JOIN account.user u ON u.id = vu.userFk
ORDER BY lastUpdate DESC
</custom>
</db-model>
<custom> <custom>
<a class="item" SELECT vu.userFk userId, vu.stamp, u.nickname, s.lastUpdate,
href="{{`#!form=admin/access-log&amp;user=${iter.userId}`}}" a.platform, a.browser, a.version, u.name user
title="_Access log"> FROM userSession s
<div class="content"> JOIN visitUser vu ON vu.id = s.userVisitFk
<p class="important"> JOIN visitAccess ac ON ac.id = vu.accessFk
{{iter.nickname}} JOIN visitAgent a ON a.id = ac.agentFk
</p> JOIN visit v ON v.id = a.visitFk
<p> JOIN account.user u ON u.id = vu.userFk
{{Vn.Value.format(iter.stamp, '%a, %T')}} - ORDER BY lastUpdate DESC
{{Vn.Value.format(iter.lastUpdate, '%T')}}
</p>
<p>
{{iter.platform}} - {{iter.browser}} {{iter.version}}
</p>
</div>
<div class="actions"
on-click="$event.preventDefault()">
<htk-button
tip="_Supplant user"
icon="supervisor_account"
on-click="this.onChangeUserClick(iter.user)"/>
</div>
</a>
</custom> </custom>
</htk-repeater> </db-model>
</div> <custom>
<a class="item"
href="{{`#!form=admin/access-log&amp;user=${iter.userId}`}}"
title="_Access log">
<div class="content">
<p class="important">
{{iter.nickname}}
</p>
<p>
{{Vn.Value.format(iter.stamp, '%a, %T')}} -
{{Vn.Value.format(iter.lastUpdate, '%T')}}
</p>
<p>
{{iter.platform}} - {{iter.browser}} {{iter.version}}
</p>
</div>
<div class="actions"
on-click="$event.preventDefault()">
<htk-button
tip="_Supplant user"
icon="supervisor_account"
on-click="this.onChangeUserClick(iter.user)"/>
</div>
</a>
</custom>
</htk-repeater>
</div> </div>
</vn> </vn>

10
forms/admin/items/style.css
View File

@ -1,15 +1,5 @@
.items {
padding: 1em;
}
.items .box {
max-width: 420px;
margin: 0 auto;
}
/* Row */
.items .item .photo { .items .item .photo {
margin-right: 1em;
border-radius: 50%; border-radius: 50%;
height: 80px; height: 80px;
width: 80px; width: 80px;

101
forms/admin/items/ui.xml
View File

@ -10,56 +10,57 @@
<htk-search-entry param="filter"/> <htk-search-entry param="filter"/>
</div> </div>
<div id="form" class="items"> <div id="form" class="items">
<div class="rows box"> <htk-repeater
<htk-repeater form-id="iter" class="htk-list" empty-message="_Enter a search term"> class="htk-list rows box vn-w-xs"
<db-model property="model" id="items"> form-id="iter"
SELECT i.id, i.longName, i.size, i.category, empty-message="_Enter a search term">
i.value5, i.value6, i.value7, <db-model property="model" id="items">
i.image, im.updated SELECT i.id, i.longName, i.size, i.category,
FROM vn.item i i.value5, i.value6, i.value7,
LEFT JOIN image im i.image, im.updated
ON im.collectionFk = 'catalog' FROM vn.item i
AND im.name = i.image LEFT JOIN image im
WHERE i.longName LIKE CONCAT('%', #filter, '%') ON im.collectionFk = 'catalog'
OR i.id = #filter AND im.name = i.image
ORDER BY i.longName LIMIT 50 WHERE i.longName LIKE CONCAT('%', #filter, '%')
<sql-batch property="batch"> OR i.id = #filter
<custom> ORDER BY i.longName LIMIT 50
<item name="filter" param="filter"/> <sql-batch property="batch">
</custom> <custom>
</sql-batch> <item name="filter" param="filter"/>
</db-model> </custom>
<custom> </sql-batch>
<div class="item"> </db-model>
<div class="side"> <custom>
<htk-image <div class="item">
form="iter" <div class="side vn-mr-md">
column="image" <htk-image
stamp-column="updated" form="iter"
class="photo" column="image"
directory="catalog" stamp-column="updated"
subdir="200x200" class="photo"
full-dir="1600x900" directory="catalog"
editable="true" subdir="200x200"
conn="conn"/> full-dir="1600x900"
</div> editable="true"
<div class="content"> conn="conn"/>
<p class="important">
{{iter.longName}}
</p>
<p class="tags">
{{iter.value5}} {{iter.value6}} {{iter.value7}}
</p>
<p>
{{iter.id}}
</p>
<p>
{{iter.image}}
</p>
</div>
</div> </div>
</custom> <div class="content">
</htk-repeater> <p class="important">
</div> {{iter.longName}}
</p>
<p class="tags">
{{iter.value5}} {{iter.value6}} {{iter.value7}}
</p>
<p>
{{iter.id}}
</p>
<p>
{{iter.image}}
</p>
</div>
</div>
</custom>
</htk-repeater>
</div> </div>
</vn> </vn>

20
forms/admin/links/style.css
View File

@ -1,19 +1,10 @@
.cpanel {
padding: 1em;
}
.cpanel .box {
max-width: 420px;
}
/* Items */
.cpanel .items > div { .cpanel .items > div {
max-width: 800px; max-width: 900px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 12px; gap: 16px;
margin: 0 auto; margin: 0 auto;
} }
.cpanel .item { .cpanel .item {
@ -21,7 +12,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0; margin: 0;
width: 120px; width: 140px;
padding: 15px; padding: 15px;
text-align: center; text-align: center;
transition: background-color 250ms ease-out; transition: background-color 250ms ease-out;
@ -42,7 +33,7 @@
max-width: 60px; max-width: 60px;
padding: 0; padding: 0;
} }
.cpanel .item > h3 { .cpanel .item > h6 {
flex: none; flex: none;
margin: .1em 0; margin: .1em 0;
font-size: .9rem; font-size: .9rem;
@ -50,11 +41,10 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.cpanel .item > .secondary { .cpanel .item > .text-secondary {
flex: none; flex: none;
margin: 0; margin: 0;
font-size: .8rem; font-size: .8rem;
color: #666;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
} }

6
forms/admin/links/ui.xml
View File

@ -18,10 +18,10 @@
value="{{iter.image}}" value="{{iter.image}}"
directory="link" directory="link"
subdir="full"/> subdir="full"/>
<h3> <h6>
{{iter.name}} {{iter.name}}
</h3> </h6>
<p class="secondary"> <p class="text-secondary">
{{iter.description}} {{iter.description}}
</p> </p>
</a> </a>

23
forms/admin/photos/photos.js
View File

@ -6,8 +6,7 @@ var Status = {
,UPLOADED : 3 ,UPLOADED : 3
}; };
Hedera.Photos = new Class Hedera.Photos = new Class({
({
Extends: Hedera.Form Extends: Hedera.Form
,filesData: [] ,filesData: []
,uploadCount: 0 ,uploadCount: 0
@ -54,21 +53,22 @@ Hedera.Photos = new Class
statusNode.className = 'status'; statusNode.className = 'status';
li.appendChild(statusNode); li.appendChild(statusNode);
var button = new Htk.Button({
tip: 'Remove',
icon: 'delete'
});
button.on('click', this.onFileRemove, this);
li.appendChild(button.node);
var fileData = { var fileData = {
li: li, li: li,
file: file, file: file,
name: name, name: name,
statusNode: statusNode statusNode: statusNode
}; };
var button = new Htk.Button({
tip: 'Remove',
icon: 'delete'
});
button.node.addEventListener('click',
() => this.onFileRemove(fileData));
li.appendChild(button.node);
this.filesData.push(fileData); this.filesData.push(fileData);
button.value = fileData;
this.$('file-list').appendChild(li); this.$('file-list').appendChild(li);
this.setImageStatus(fileData, Status.NONE, 'add', _('Pending upload')); this.setImageStatus(fileData, Status.NONE, 'add', _('Pending upload'));
@ -151,8 +151,7 @@ Hedera.Photos = new Class
statusNode.title = title ? title : ''; statusNode.title = title ? title : '';
} }
,onFileRemove: function(button) { ,onFileRemove: function(fileData) {
var fileData = button.value;
this.$('file-list').removeChild(fileData.li); this.$('file-list').removeChild(fileData.li);
for (var i = 0; i < this.filesData.length; i++) for (var i = 0; i < this.filesData.length; i++)

8
forms/admin/photos/style.css
View File

@ -1,12 +1,4 @@
.photos {
padding: 1em;
}
.photos .box {
max-width: 420px;
padding: 3em;
}
/* Dropzone */ /* Dropzone */
.photos .dropzone { .photos .dropzone {

2
forms/admin/photos/ui.xml
View File

@ -3,7 +3,7 @@
<h1><t>Images</t></h1> <h1><t>Images</t></h1>
</div> </div>
<div id="form" class="photos"> <div id="form" class="photos">
<div class="box"> <div class="box form vn-w-sm vn-pa-lg">
<div class="form-group"> <div class="form-group">
<label><t>Collection</t></label> <label><t>Collection</t></label>
<htk-combo id="schema"> <htk-combo id="schema">

18
forms/admin/users/style.css
View File

@ -1,10 +1,4 @@
.users {
padding: 1em;
}
.users .box {
max-width: 420px;
margin: 0 auto;
}
.users-box.item > .actions { .users-box.item > .actions {
display: flex; display: flex;
} }
@ -12,14 +6,6 @@
color: white; color: white;
background-color: #F66; background-color: #F66;
border-radius: .2em; border-radius: .2em;
padding: .2em; padding: .3em;
margin: .3em;
font-size: .8em; font-size: .8em;
} }
/* Topbar */
.action-bar .htk-search-entry {
margin: .8em .6em;
}

82
forms/admin/users/ui.xml
View File

@ -11,49 +11,47 @@
param="user-name"/> param="user-name"/>
</div> </div>
<div id="form" class="users"> <div id="form" class="users">
<div class="box"> <htk-repeater form-id="iter" renderer="rendererFunc" class="htk-list box vn-w-xs">
<htk-repeater form-id="iter" renderer="rendererFunc" class="htk-list"> <db-model property="model">
<db-model property="model">
<custom>
SELECT u.id, u.name, u.nickname, u.active
FROM account.user u
WHERE u.name LIKE CONCAT('%', #user, '%')
OR u.nickname LIKE CONCAT('%', #user, '%')
OR u.id = #user
ORDER BY u.name LIMIT 200
</custom>
<sql-batch property="batch">
<custom>
<item name="user" param="user-name"/>
</custom>
</sql-batch>
</db-model>
<custom> <custom>
<a class="users-box item" SELECT u.id, u.name, u.nickname, u.active
href="{{`#!form=admin/access-log&amp;user=${iter.id}`}}" FROM account.user u
title="_Access log"> WHERE u.name LIKE CONCAT('%', #user, '%')
<div class="content"> OR u.nickname LIKE CONCAT('%', #user, '%')
<p class="important"> OR u.id = #user
{{iter.nickname}} ORDER BY u.name LIMIT 200
</p>
<p>
#{{iter.id}} - {{iter.name}}
</p>
</div>
<div class="actions"
on-click="$event.preventDefault()">
<span id="disabled" class="disabled">
<t>Disabled</t>
</span>
<htk-button
id="impersonate"
icon="supervisor_account"
tip="_Impersonate user"
on-click="this.onChangeUserClick(iter.name)"/>
</div>
</a>
</custom> </custom>
</htk-repeater> <sql-batch property="batch">
</div> <custom>
<item name="user" param="user-name"/>
</custom>
</sql-batch>
</db-model>
<custom>
<a class="users-box item"
href="{{`#!form=admin/access-log&amp;user=${iter.id}`}}"
title="_Access log">
<div class="content">
<p class="important">
{{iter.nickname}}
</p>
<p>
#{{iter.id}} - {{iter.name}}
</p>
</div>
<div class="actions"
on-click="$event.preventDefault()">
<span id="disabled" class="disabled">
<t>Disabled</t>
</span>
<htk-button
id="impersonate"
icon="supervisor_account"
tip="_Impersonate user"
on-click="this.onChangeUserClick(iter.name)"/>
</div>
</a>
</custom>
</htk-repeater>
</div> </div>
</vn> </vn>

11
forms/admin/visits/style.css
View File

@ -1,17 +1,10 @@
.visits {
padding: 1em;
}
.visits .box { .visits .box {
max-width: 420px; margin-bottom: 16px;
margin-bottom: 1em;
} }
.visits .box:last-child { .visits .box:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.visits .summary {
padding: 3em;
box-sizing: border-box;
}
.visits .summary p { .visits .summary p {
font-size: 1.4em; font-size: 1.4em;
margin: 0; margin: 0;

47
forms/admin/visits/ui.xml
View File

@ -13,8 +13,8 @@
on-click="this.onSessionsClick()"/> on-click="this.onSessionsClick()"/>
</div> </div>
<div id="form" class="visits"> <div id="form" class="visits">
<div class="summary box"> <div class="vn-w-xs">
<div class="form"> <div class="form vn-pa-lg box">
<div class="form-group"> <div class="form-group">
<label><t>From</t></label> <label><t>From</t></label>
<htk-date-chooser> <htk-date-chooser>
@ -28,27 +28,28 @@
</htk-date-chooser> </htk-date-chooser>
</div> </div>
</div> </div>
</div> <div class="summary vn-pa-lg box">
<div class="summary box"> <p>
<p> <htk-text>
<htk-text> <db-calc-sum
<db-calc-sum property="param"
property="param" model="visits"
model="visits" column-name="visits"/>
column-name="visits"/> </htk-text>
</htk-text> <t>visits</t>,
<t>visits</t>, <htk-text>
<htk-text> <db-calc-sum
<db-calc-sum property="param"
property="param" model="visits"
model="visits" column-name="newVisits"/>
column-name="newVisits"/> </htk-text>
</htk-text> <t>news</t>
<t>news</t> </p>
</p> </div>
</div> <htk-repeater
<div class="list box"> class="box htk-list"
<htk-repeater form-id="iter" empty-message="_Select date interval" class="htk-list"> form-id="iter"
empty-message="_Select date interval">
<db-model property="model" id="visits"> <db-model property="model" id="visits">
<custom> <custom>
SELECT browser, SELECT browser,

9
forms/agencies/packages/style.css
View File

@ -1,9 +0,0 @@
.packages
{
padding: 1em;
}
.packages .box
{
max-width: 600px;
margin: 0 auto;
}

2
forms/agencies/packages/ui.xml
View File

@ -3,7 +3,7 @@
<h1><t>ListByAgency</t></h1> <h1><t>ListByAgency</t></h1>
</div> </div>
<div id="form" class="packages"> <div id="form" class="packages">
<div class="box"> <div class="box vn-w-sm">
<htk-grid> <htk-grid>
<db-model property="model"> <db-model property="model">
<custom> <custom>

9
forms/agencies/provinces/style.css
View File

@ -1,9 +0,0 @@
.provinces
{
padding: 1em;
}
.provinces .box
{
max-width: 600px;
margin: 0 auto;
}

4
forms/agencies/provinces/ui.xml
View File

@ -6,12 +6,12 @@
<div id="title"> <div id="title">
<h1><t>ByProvince</t></h1> <h1><t>ByProvince</t></h1>
</div> </div>
<div id="form" class="provinces"> <div id="form" class="provinces vn-w-sm">
<div class="box"> <div class="box">
<htk-grid> <htk-grid>
<db-model property="model"> <db-model property="model">
<custom> <custom>
CALL vn2008.desglose_volume (#agency) CALL vn2008.desglose_volume(#agency)
</custom> </custom>
<sql-batch property="batch"> <sql-batch property="batch">
<custom> <custom>

48
forms/cms/about/style.css
View File

@ -1,15 +1,5 @@
.about @media screen and (min-width: 1000px) /* and (max-width: 1399px) */ {
{
padding: 1em;
}
.about .cols
{
max-width: 85em;
margin: 0 auto;
}
@media screen and (min-width: 1000px) /* and (max-width: 1399px) */
{
.about .cols .about .cols
{ {
column-count: 2; column-count: 2;
@ -17,8 +7,7 @@
-webkit-column-count: 2; -webkit-column-count: 2;
} }
}/* }/*
@media screen and (min-width: 1400px) @media screen and (min-width: 1400px) {
{
.about .cols .about .cols
{ {
column-count: 3; column-count: 3;
@ -26,8 +15,7 @@
-webkit-column-count: 3; -webkit-column-count: 3;
} }
} }
@media screen and (min-width: 2000px) @media screen and (min-width: 2000px) {
{
.about .cols .about .cols
{ {
column-count: 4; column-count: 4;
@ -35,39 +23,33 @@
-webkit-column-count: 4; -webkit-column-count: 4;
} }
}*/ }*/
.about .box .about .box {
{
margin-bottom: 1em; margin-bottom: 1em;
padding: 2em; padding: 2em;
} }
.about h1 .about h1 {
{
padding: 0; padding: 0;
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
font-size: 1.6em; font-size: 1.6em;
} }
.about h2 .about h2 {
{
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
font-weight: normal; font-weight: normal;
margin: 1em; margin: 1em;
} }
.about h3 .about h3 {
{
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
font-weight: normal; font-weight: normal;
padding: 1em; padding: 1em;
color: #00796B; color: #00796B;
} }
.about p .about p {
{
margin: 1em 0; margin: 1em 0;
} }
.about p.summary .about p.summary {
{
max-width: 26em; max-width: 26em;
text-align: center; text-align: center;
background-color: #FF8; background-color: #FF8;
@ -79,8 +61,7 @@
/* Images */ /* Images */
.about img .about img {
{
max-width: 90%; max-width: 90%;
text-align: center; text-align: center;
padding: 1em; padding: 1em;
@ -90,16 +71,13 @@
.about img[alt="producers"], .about img[alt="producers"],
.about img[alt="4_control"], .about img[alt="4_control"],
.about img[alt="dealer"], .about img[alt="dealer"],
.about img[alt="goods_transport"] .about img[alt="goods_transport"] {
{
float: right; float: right;
} }
.about img[alt="2_control"] .about img[alt="2_control"] {
{
float: left; float: left;
} }
.about img[alt="glass"] .about img[alt="glass"] {
{
display: inline; display: inline;
padding: 0; padding: 0;
padding-left: 0.9em; padding-left: 0.9em;

2
forms/cms/about/ui.xml
View File

@ -3,7 +3,7 @@
<h1><t>About</t></h1> <h1><t>About</t></h1>
</div> </div>
<div id="form" class="about"> <div id="form" class="about">
<div class="cols"> <div class="cols vn-w-lg">
<div class="box"> <div class="box">
<h1> <h1>
<t>QualityAndVariety</t> <t>QualityAndVariety</t>

33
forms/cms/contact/style.css
View File

@ -1,55 +1,38 @@
.contact .contact .form {
{
padding: 1em;
}
.contact .box
{
max-width: 420px;
padding: 2em;
}
.contact .form
{
position: relative; position: relative;
text-align: left; text-align: left;
max-width: 25em; max-width: 25em;
margin: 0 auto; margin: 0 auto;
} }
.contact form .contact form {
{
margin: 0 auto; margin: 0 auto;
} }
.contact form p .contact form p {
{
margin: 1em auto; margin: 1em auto;
display: block; display: block;
margin-top: 2em; margin-top: 2em;
} }
.contact textarea .contact textarea {
{
height: 5em; height: 5em;
} }
.contact button .contact button {
{
display: block; display: block;
margin: 0 auto; margin: 0 auto;
margin-top: 1em; margin-top: 1em;
padding: 0.6em; padding: 0.6em;
} }
.contact .mandatory-message .contact .mandatory-message {
{
font-size: .9em; font-size: .9em;
} }
/* Captcha */ /* Captcha */
.captcha img .captcha img {
{
vertical-align: middle; vertical-align: middle;
margin-left: 1em; margin-left: 1em;
} }
.captcha input .captcha input {
{
max-width: 8em; max-width: 8em;
} }

87
forms/cms/contact/ui.xml
View File

@ -3,54 +3,47 @@
<h1><t>IWantCustomer</t></h1> <h1><t>IWantCustomer</t></h1>
</div> </div>
<div id="form" class="contact"> <div id="form" class="contact">
<div class="box"> <div class="box form vn-w-xs vn-pa-lg">
<div class="form"> <p><t>FillFormData</t></p>
<p> <p><t>OrCallUs</t></p>
<t>FillFormData</t> <form id="contact-form">
<input type="hidden" name="srv" value="json:misc/contact"/>
<div class="form-group">
<label><t>Name</t></label>
<input type="text" name="name"/>
</div>
<div class="form-group">
<label><t>City</t></label>
<input type="text" name="city"/>
</div>
<div class="form-group">
<label><t>PC</t></label>
<input type="text" name="pc"/>
</div>
<div class="form-group">
<label><t>Phone</t></label>
<input type="text" name="phone"/>
</div>
<div class="form-group">
<label><t>EMail</t></label>
<input type="text" name="email"/>
</div>
<div class="form-group">
<label><t>Message</t></label>
<textarea name="message"/>
</div>
<div class="form-group captcha">
<label><t>Anti-Spam</t></label>
<input type="text" name="captcha"/>
<img alt="Captcha" id="captcha-img"/>
</div>
<p class="mandatory-message">
<t>AllFieldsMandatory</t>
</p> </p>
<p> <button>
<t>OrCallUs</t> <t>Send</t>
</p> </button>
<form </form>
id="contact-form">
<input type="hidden" name="srv" value="json:misc/contact"/>
<div class="form-group">
<label><t>Name</t></label>
<input type="text" name="name"/>
</div>
<div class="form-group">
<label><t>City</t></label>
<input type="text" name="city"/>
</div>
<div class="form-group">
<label><t>PC</t></label>
<input type="text" name="pc"/>
</div>
<div class="form-group">
<label><t>Phone</t></label>
<input type="text" name="phone"/>
</div>
<div class="form-group">
<label><t>EMail</t></label>
<input type="text" name="email"/>
</div>
<div class="form-group">
<label><t>Message</t></label>
<textarea name="message"/>
</div>
<div class="form-group captcha">
<label><t>Anti-Spam</t></label>
<input type="text" name="captcha"/>
<img alt="Captcha" id="captcha-img"/>
</div>
<p class="mandatory-message">
<t>AllFieldsMandatory</t>
</p>
<button class="thin">
<t>Send</t>
</button>
</form>
</div>
</div> </div>
</div> </div>
</vn> </vn>

8
forms/cms/home/style.css
View File

@ -1,4 +1,8 @@
.home {
padding: 0 !important;
}
/* News panel */ /* News panel */
.column { .column {
@ -9,7 +13,7 @@
border: 1px solid white; border: 1px solid white;
} }
.action-bar button.start-order:hover { .action-bar button.start-order:hover {
background-color: white; background-color: white !important;
color: black; color: black;
} }
@ -39,7 +43,7 @@
font-size: 0.9em; font-size: 0.9em;
color: #444; color: #444;
text-align: right; text-align: right;
margin: 0.8em 0; margin: .8em 0;
} }
.new-text { .new-text {
margin: 1.5em 0; margin: 1.5em 0;

1
forms/cms/training/locale/ca.yml
View File

@ -1 +0,0 @@
{}

1
forms/cms/training/locale/en.yml
View File

@ -1 +0,0 @@
{}

1
forms/cms/training/locale/es.yml
View File

@ -1 +0,0 @@
{}

1
forms/cms/training/locale/fr.yml
View File

@ -1 +0,0 @@
{}

1
forms/cms/training/locale/pt.yml
View File

@ -1 +0,0 @@
{}

59
forms/cms/training/style.css
View File

@ -1,59 +0,0 @@
/* News panel */
.column
{
margin: .5em;
max-width: 120em;
}
/* New */
.new
{
text-align: left;
background-color: white;
color: #222;
border: none;
border-radius: 0.1em;
box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.2);
margin: .5em;
}
.new img
{
display: block;
margin: auto;
width: 100%;
}
.new .top
{
padding: 1.5em;
padding-bottom: 1px;
}
.new h2
{
font-size: 1.6em;
color: black;
font-weight: normal;
padding: 0;
}
.new-info
{
font-size: 0.9em;
color: #444;
text-align: right;
margin: 0.8em 0;
}
.new-text
{
margin: 1.5em 0;
}
.new-text a
{
color: blue;
text-decoration: underline;
}
.new-text li
{
margin: 0.4em 0;
}

5
forms/cms/training/training.js
View File

@ -1,5 +0,0 @@
Hedera.Training = new Class
({
Extends: Hedera.Form
});

41
forms/cms/training/ui.xml
View File

@ -1,41 +0,0 @@
<vn>
<div id="title">
<h1><t>Training</t></h1>
</div>
<div id="form" class="training">
<div class="column mansonry" id="news-column">
<htk-repeater form-id="new">
<db-model property="model">
<custom>
SELECT title, created, text, image, id FROM news
WHERE tag = 'course'
ORDER BY priority, created DESC
</custom>
</db-model>
<custom>
<div class="masonry-box">
<div class="new">
<htk-image
directory="news"
subdir="full"
form="new"
column="image"
editable="false"
full-dir="full"/>
<div class="top">
<h2><htk-text form="new" column="title"/></h2>
<p class="new-info">
<htk-text format="_%a, %e %b %Y" form="new" column="created"/>
</p>
<div class="new-text">
<htk-html form="new" column="text"/>
</div>
</div>
</div>
</div>
</custom>
</htk-repeater>
<div class="clear"/>
</div>
</div>
</vn>

26
forms/cms/why/style.css
View File

@ -1,27 +1,13 @@
.why .why ul {
{
padding: 1em;
}
.why .box
{
max-width: 600px;
margin: 0 auto;
}
.why ul
{
list-style-type: none; list-style-type: none;
padding: 0 1em; padding: 0;
padding-bottom: 1em; margin-top: 0;
max-width: 36em;
margin: 0 auto;
} }
.why li .why li {
{ padding-bottom: 16px;
padding: 0.5em 0;
} }
.why img .why img {
{
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 95%; max-width: 95%;

26
forms/cms/why/ui.xml
View File

@ -3,20 +3,18 @@
<h1><t>AboutCompany</t></h1> <h1><t>AboutCompany</t></h1>
</div> </div>
<div id="form" class="why"> <div id="form" class="why">
<div class="box"> <div class="box vn-w-sm vn-pa-lg">
<div class="body"> <ul class="vn-mb-lg">
<ul> <li><t>BecauseOurBigCatalog</t></li>
<li><t>BecauseOurBigCatalog</t></li> <li><t>BecauseThisWeb</t></li>
<li><t>BecauseThisWeb</t></li> <li><t>BecauseOurShoppingDep</t></li>
<li><t>BecauseOurShoppingDep</t></li> <li><t>BecauseOrderIsEasy</t></li>
<li><t>BecauseOrderIsEasy</t></li> <li><t>BecauseOurPlant</t></li>
<li><t>BecauseOurPlant</t></li> <li><t>BecauseOurSalesDep</t></li>
<li><t>BecauseOurSalesDep</t></li> <li><t>BecauseOurWorkShop</t></li>
<li><t>BecauseOurWorkShop</t></li> <li><t>BecauseWeHaveWhatYouNeed</t></li>
<li><t>BecauseWeHaveWhatYouNeed</t></li> </ul>
</ul> <img src="forms/cms/why/store.png" alt="Store photo"/>
<img src="forms/cms/why/store.png" alt="Store photo"/>
</div>
</div> </div>
</div> </div>
</vn> </vn>

13
forms/ecomerce/basket/basket.js
View File

@ -1,6 +1,5 @@
Hedera.Basket = new Class Hedera.Basket = new Class({
({
Extends: Hedera.Form Extends: Hedera.Form
,open: function() { ,open: function() {
@ -25,15 +24,7 @@ Hedera.Basket = new Class
this.hash.set({form: 'ecomerce/checkout'}); this.hash.set({form: 'ecomerce/checkout'});
} }
,onCatalogClick: function() { ,onDeleteClick: function(form) {
this.hash.set({form: 'ecomerce/catalog'});
}
,onCheckoutClick: function() {
this.hash.set({form: 'ecomerce/confirm'});
}
,onDeleteClick: function(button, form) {
if (confirm(_('ReallyDelete'))) if (confirm(_('ReallyDelete')))
form.deleteRow(); form.deleteRow();
} }

23
forms/ecomerce/basket/style.css
View File

@ -1,20 +1,5 @@
.basket {
padding: 1em;
}
.basket .box {
max-width: 420px;
margin: 0 auto;
padding: 30px;
}
.basket .form > p {
margin: 0;
font-size: 1.4em;
color: white;
text-align: right;
}
.basket .head { .basket .head {
padding-bottom: 30px;
margin: 0;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
} }
.basket .head p { .basket .head p {
@ -24,6 +9,12 @@
font-size: 1.4em; font-size: 1.4em;
text-align: right; text-align: right;
} }
.basket .form > p {
margin: 0;
font-size: 1.4em;
color: white;
text-align: right;
}
/* Lines */ /* Lines */

14
forms/ecomerce/basket/ui.xml
View File

@ -6,19 +6,19 @@
<htk-bar-button <htk-bar-button
icon="settings" icon="settings"
tip="_ConfigureOrder" tip="_ConfigureOrder"
on-click="onConfigureClick"/> on-click="this.onConfigureClick()"/>
<htk-bar-button <htk-bar-button
icon="local_florist" icon="local_florist"
tip="_Catalog" tip="_Catalog"
on-click="onCatalogClick"/> on-click="this.hash.set({form: 'ecomerce/catalog'})"/>
<htk-bar-button <htk-bar-button
icon="shopping_cart_checkout" icon="shopping_cart_checkout"
tip="_Checkout" tip="_Checkout"
on-click="onCheckoutClick"/> on-click="this.hash.set({form: 'ecomerce/confirm'})"/>
</div> </div>
<div id="form" class="basket"> <div id="form" class="basket">
<div class="box"> <div class="box vn-w-sm vn-pa-lg">
<div class="head"> <div class="head vn-pb-lg">
<p> <p>
<t>Total</t> <t>Total</t>
<htk-text format="%.2d€"> <htk-text format="%.2d€">
@ -41,12 +41,10 @@
<custom> <custom>
<div class="line"> <div class="line">
<htk-button <htk-button
form="iter"
column="id"
class="delete" class="delete"
tip="_Remove" tip="_Remove"
icon="delete" icon="delete"
on-click="onDeleteClick"/> on-click="this.onDeleteClick($.iter)"/>
<htk-image <htk-image
form="iter" form="iter"
column="image" column="image"

252
forms/ecomerce/catalog/style.css
View File

@ -1,19 +1,17 @@
.catalog .catalog {
{ padding: 0 !important;
margin-right: 18em; margin-right: 18em;
} }
/* Topbar */ /* Topbar */
.catalog-actions > .htk-search-entry .catalog-actions > .htk-search-entry {
{
margin-right: .4em; margin-right: .4em;
} }
/* Right panel */ /* Right panel */
.right-panel .right-panel {
{
position: fixed; position: fixed;
top: 4.4em; top: 4.4em;
bottom: 0; bottom: 0;
@ -22,8 +20,7 @@
overflow: auto; overflow: auto;
background-color: #fafafa; background-color: #fafafa;
} }
.right-panel .basket-info .right-panel .basket-info {
{
background-color: #8cc63f; background-color: #8cc63f;
color: white; color: white;
padding: 1.2em 2em; padding: 1.2em 2em;
@ -31,20 +28,17 @@
margin: 1em; margin: 1em;
text-align: center; text-align: center;
} }
.right-panel .basket-info > button .right-panel .basket-info > button {
{
color: white; color: white;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
margin-top: .4em; margin-top: .4em;
} }
.right-panel .basket-info > button:hover .right-panel .basket-info > button:hover {
{
background-color: white; background-color: white;
color: #60872c; color: #60872c;
} }
.right-panel .basket-info > p .right-panel .basket-info > p {
{
margin: 0; margin: 0;
padding: .4em 0; padding: .4em 0;
font-size: 1.1em; font-size: 1.1em;
@ -52,77 +46,64 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.right-panel .filter .right-panel .filter {
{
margin: 1em; margin: 1em;
} }
.right-panel .categories, .right-panel .categories,
.right-panel .filters, .right-panel .filters,
.right-panel .order .right-panel .order {
{
margin: 1.5em 0; margin: 1.5em 0;
} }
.right-panel .filters, .right-panel .filters,
.right-panel .order .right-panel .order {
{
display: none; display: none;
} }
.right-panel .realm-msg .right-panel .realm-msg {
{
margin-top: 1em; margin-top: 1em;
} }
.right-panel .realm-msg > h1 .right-panel .realm-msg > h5 {
{
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
padding: 2.5em 0; padding: 2.5em 0;
color: #777; color: #777;
} }
.right-panel h2 .right-panel h2 {
{
font-weight: normal; font-weight: normal;
color: #777; color: #777;
font-size: 1.1em; font-size: 1.1em;
} }
.right-panel .realms > div > div .right-panel .realms > div > div {
{
text-align: center; text-align: center;
} }
.right-panel .realms a .right-panel .realms a {
{
display: inline-block; display: inline-block;
width: 25%; width: 25%;
padding: .6em; padding: .6em;
box-sizing: border-box; box-sizing: border-box;
} }
.right-panel .realms a:hover .right-panel .realms a:hover {
{
background-color: rgba(1, 1, 1, .05); background-color: rgba(1, 1, 1, .05);
border-radius: .15em; border-radius: .15em;
} }
.right-panel .realms a > img .right-panel .realms a > img {
{
display: block; display: block;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
.right-panel .vn-filter, .right-panel .vn-filter,
.right-panel select .right-panel select {
{
margin: 0 auto; margin: 0 auto;
margin-bottom: .7em; margin-bottom: .7em;
display: block; display: block;
} }
.vn-filter > ul .vn-filter > ul {
{
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
text-align: left; text-align: left;
color: #666; color: #666;
padding-left: .8em; padding-left: .8em;
} }
.vn-filter li .vn-filter li {
{
margin: 0; margin: 0;
margin-top: .3em; margin-top: .3em;
line-height: 2em; line-height: 2em;
@ -131,16 +112,17 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.vn-filter li > button .vn-filter li > button {
{
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
padding: .2em; padding: .2em;
margin: 0; margin: 0;
margin-right: .2em; margin-right: .2em;
} }
.right-panel .filters > button .vn-filter li > button > span {
{ display: block;
}
.right-panel .filters > button {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
margin-top: 1em; margin-top: 1em;
@ -148,41 +130,34 @@
/* Items */ /* Items */
.item-box .item-box {
{
transition: background-color 200ms ease-in; transition: background-color 200ms ease-in;
} }
.item-box:hover .item-box:hover {
{
cursor: pointer; cursor: pointer;
background-color: #eee; background-color: #eee;
} }
.item-info .item-info {
{
position: relative; position: relative;
} }
.item-info .second-category .item-info .second-category {
{
font-weight: bold; font-weight: bold;
color: orange; color: orange;
} }
.item-info .third-category .item-info .third-category {
{
font-weight: bold; font-weight: bold;
color: red; color: red;
} }
.item-info > h2 .item-info > h2 {
{
padding: 0; padding: 0;
margin-bottom: .15em; margin-bottom: .15em;
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: 1em;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
max-height: 3.8em; max-height: 2.8em;
} }
.item-info > p .item-info > p {
{
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #777; color: #777;
@ -191,24 +166,20 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.item-info .sub-name .item-info .sub-name {
{
text-transform: uppercase; text-transform: uppercase;
padding: 0; padding: 0;
margin-bottom: .2em; margin-bottom: .2em;
font-size: .9em; font-size: .9em;
} }
.item-info > .htk-button .item-info > .htk-button {
{
margin: -0.3em; margin: -0.3em;
padding: .3em; padding: .3em;
} }
.item-info > .htk-button > img .item-info > .htk-button > img {
{
vertical-align: middle; vertical-align: middle;
} }
.item-info .available-price .item-info .available-price {
{
white-space: nowrap; white-space: nowrap;
font-size: .95em; font-size: .95em;
text-align: right; text-align: right;
@ -216,32 +187,27 @@
column-gap: .2em; column-gap: .2em;
display: flex; display: flex;
} }
.item-info .available-price > * .item-info .available-price > * {
{
border-radius: .2em; border-radius: .2em;
padding: .3em; padding: .1em .3em;
border: .1em transparent solid; border: .1em transparent solid;
background-color: white; background-color: white;
} }
.item-info .grouping .item-info .grouping {
{
width: 2em; width: 2em;
background-color: #ddd; background-color: #ddd;
} }
.item-info .available .item-info .available {
{
width: 3.3em; width: 3.3em;
border-color: #bbb; border-color: #bbb;
color: #777; color: #777;
} }
.item-info .price .item-info .price {
{
width: 4em; width: 4em;
border-color: #9cbc28; border-color: #9cbc28;
color: #748c1e; color: #748c1e;
} }
.tags .tags {
{
font-size: .8em; font-size: .8em;
display: table; display: table;
color: #333; color: #333;
@ -256,14 +222,12 @@
/* List view */ /* List view */
.list-view .list-view {
{
max-width: 420px; max-width: 420px;
margin: 0 auto; margin: 0 auto;
padding: 1em; padding: 1em;
} }
.list-view .item-box .list-view .item-box {
{
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
@ -272,20 +236,17 @@
overflow: visible; overflow: visible;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
} }
.list-view .item-box > .htk-image .list-view .item-box > .htk-image {
{
margin: 1em; margin: 1em;
width: 3.5em; width: 3.5em;
height: 3.5em; height: 3.5em;
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
.list-view .item-box > .htk-image > img .list-view .item-box > .htk-image > img {
{
border-radius: 50%; border-radius: 50%;
} }
.list-view .item-info .list-view .item-info {
{
position: absolute; position: absolute;
left: 5.5em; left: 5.5em;
right: 0; right: 0;
@ -294,59 +255,49 @@
margin: .8em; margin: .8em;
margin-left: 0; margin-left: 0;
} }
.list-view .item-info > h2 .list-view .item-info > h2 {
{
font-size: 1em; font-size: 1em;
white-space: nowrap; white-space: nowrap;
} }
.list-view .item-info > .color .list-view .item-info > .color {
{
display: none; display: none;
} }
.list-view .item-info > .htk-button .list-view .item-info > .htk-button {
{
float: right; float: right;
} }
.list-view .item-info .available-price .list-view .item-info .available-price {
{
clear: both; clear: both;
float: right; float: right;
position:absolute; position:absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
.list-view .item-info .tags .list-view .item-info .tags {
{
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.list-view .item-info .tags > tr .list-view .item-info .tags > tr {
{
display: inline-block; display: inline-block;
} }
.list-view .item-info .tags td .list-view .item-info .tags td {
{
display: inline-block; display: inline-block;
padding-right: .5em; padding-right: .5em;
} }
.list-view .item-info .tags td:first-child .list-view .item-info .tags td:first-child {
{
display: none; display: none;
} }
/* Grid view */ /* Grid view */
.grid-view .grid-view {
{
padding: 1em; padding: 1em;
padding-right: .2em; padding-right: .2em;
padding-bottom: .4em; padding-bottom: .4em;
text-align: center; text-align: center;
} }
.grid-view .item-box .grid-view .item-box {
{
text-align: left; text-align: left;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -357,14 +308,12 @@
height: 11em; height: 11em;
overflow: hidden; overflow: hidden;
} }
.grid-view .item-box > .htk-image .grid-view .item-box > .htk-image {
{
width: 11em; width: 11em;
height: 100%; height: 100%;
float: left; float: left;
} }
.grid-view .item-info .grid-view .item-info {
{
position: absolute; position: absolute;
left: 11.4em; left: 11.4em;
right: 0; right: 0;
@ -372,8 +321,7 @@
bottom: 0; bottom: 0;
margin: .6em; margin: .6em;
} }
.grid-view .item-info .available-price .grid-view .item-info .available-price {
{
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -389,107 +337,79 @@
/* Card */ /* Card */
.card-popup .card-popup {
{
overflow: auto; overflow: auto;
} }
.item-card .item-card {
{
font-size: .9em; font-size: .9em;
width: 20em; width: 20em;
} }
.item-card .top .item-card .top {
{
padding: 1em; padding: 1em;
} }
.item-card .item-info .item-card .item-info {
{
margin-left: 9em; margin-left: 9em;
height: 8em; height: 8em;
} }
.item-card .htk-image .item-card .htk-image {
{
height: 8em; height: 8em;
width: 8em; width: 8em;
float: left; float: left;
border-radius: .3em; border-radius: .3em;
} }
.item-card .desc .item-card .desc {
{
clear: both; clear: both;
margin-top: 1em 0; margin-top: 1em 0;
font-size: .9em; font-size: .9em;
} }
.item-card .lots-grid .item-card .lots-grid {
{
border-top: 1px solid #DDD; border-top: 1px solid #DDD;
} }
.item-card .lots-grid tr .item-card .lots-grid tr {
{
height: 3em; height: 3em;
} }
.item-card .lots-grid .cell-spin .item-card .lots-grid .cell-spin {
{
max-width: initial; max-width: initial;
width: 3em; width: 3em;
} }
.item-card .lots-grid .price-kg .item-card .lots-grid .price-kg {
{
font-size: .8em; font-size: .8em;
color: #999; color: #999;
width: 1px; width: 1px;
} }
.item-card .lots-grid .cell-text .item-card .lots-grid .cell-text {
{
max-width: initial; max-width: initial;
width: auto; width: auto;
} }
.item-card .lots-grid .cell-button .item-card .lots-grid .cell-button {
{
max-width: initial; max-width: initial;
width: 1em; width: 1em;
} }
.item-card .footer .item-card .footer {
{ display: flex;
text-align: center; align-items: center;
justify-content: space-between;
background-color: #1a1a1a; background-color: #1a1a1a;
color: white; color: white;
line-height: 2em; padding: 10px;
padding: .4em;
} }
.item-card .footer > button .item-card .footer > button:hover {
{ background-color: rgba(255, 255, 255, .1);
margin: 0;
} }
.item-card .erase .item-card .footer > button > .htk-icon {
{
float: left;
}
.item-card .confirm
{
float: right;
}
.item-card .erase > img,
.item-card .confirm > img
{
display: block; display: block;
height: 1em;
} }
/* Mobile */ /* Mobile */
.catalog-actions > button.menu .catalog-actions > button.menu {
{
display: none; display: none;
padding: 1.1em .5em;
} }
.catalog-actions > button.menu > img .catalog-actions > button.menu > .htk-icon {
{ display: block;
height: 1.8em;
} }
@media (max-width: 960px) @media (max-width: 960px) {
{
.catalog-actions > button.menu .catalog-actions > button.menu
{ {
display: block; display: block;

15
forms/ecomerce/catalog/ui.xml
View File

@ -108,7 +108,7 @@
<button <button
class="menu" class="menu"
on-click="onShowMenuClick"> on-click="onShowMenuClick">
<htk-icon name="menu"/> <htk-icon name="menu" alt="_Menu"/>
</button> </button>
</div> </div>
<div id="form" class="catalog"> <div id="form" class="catalog">
@ -213,7 +213,7 @@
</div> </div>
</div> </div>
<div id="realm-msg" class="realm-msg"> <div id="realm-msg" class="realm-msg">
<h1><t>Choose a realm</t></h1> <h5><t>Choose a realm</t></h5>
</div> </div>
<div id="filters" class="filters"> <div id="filters" class="filters">
<h2><t>Filter by</t></h2> <h2><t>Filter by</t></h2>
@ -467,20 +467,25 @@
on-clicked="onAddLotClick"/> on-clicked="onAddLotClick"/>
</htk-grid> </htk-grid>
<div class="footer"> <div class="footer">
<button on-click="onEraseClick" title="_Erase" class="erase"> <button
title="_Erase"
on-click="this.onEraseClick()"
class="erase">
<htk-icon <htk-icon
name="delete" name="delete"
theme="dark" theme="dark"
alt="_Erase"/> alt="_Erase"/>
</button> </button>
<htk-text id="amount"/> <htk-text id="amount"/>
<button on-click="onConfirmClick" title="_Confirm" class="confirm"> <button
title="_Confirm"
on-click="this.onConfirmClick()"
class="confirm">
<htk-icon <htk-icon
name="done" name="done"
theme="dark" theme="dark"
alt="_Confirm"/> alt="_Confirm"/>
</button> </button>
<div class="clear"/>
</div> </div>
</div> </div>
</htk-popup> </htk-popup>

12
forms/ecomerce/checkout/style.css
View File

@ -1,14 +1,6 @@
.checkout {
padding: 1em;
max-width: 600px;
margin: 0 auto;
}
.checkout .bar { .checkout .bar {
margin-bottom: 1em; margin-bottom: 16px;
}
.checkout .form {
max-width: 600px;
padding: 4em 2em;
} }
/* Step */ /* Step */

274
forms/ecomerce/checkout/ui.xml
View File

@ -68,144 +68,146 @@
on-click="onCancelClick"/> on-click="onCancelClick"/>
</div> </div>
<div id="form" class="checkout"> <div id="form" class="checkout">
<div class="box bar"> <div class="vn-w-sm">
<htk-assistant-bar <div class="box bar">
id="assistant-bar" <htk-assistant-bar
assistant="assistant"/> id="assistant-bar"
</div> assistant="assistant"/>
<div class="box"> </div>
<div class="form"> <div class="box vn-px-lg vn-py-xl">
<htk-assistant id="assistant" <div class="form">
endFunc="onConfirmClick"> <htk-assistant id="assistant"
<htk-step endFunc="onConfirmClick">
name="method" <htk-step
validate-func="methodValidate"> name="method"
<h2><t>DeliveryOrPickupQuestion</t></h2> validate-func="methodValidate">
<div class="answers radio"> <h2><t>DeliveryOrPickupQuestion</t></h2>
<htk-radio-group <div class="answers radio">
id="rg-method" <htk-radio-group
param="method" id="rg-method"
on-changed="onMethodChange"/> param="method"
<div> on-changed="onMethodChange"/>
<label> <div>
<htk-radio radio-group="rg-method" value="AGENCY"/> <label>
<t>Receive the order</t> <htk-radio radio-group="rg-method" value="AGENCY"/>
</label> <t>Receive the order</t>
</label>
</div>
<div>
<label>
<htk-radio radio-group="rg-method" value="PICKUP"/>
<t>PickupInStore</t>
</label>
</div>
</div> </div>
<div> </htk-step>
<label> <htk-step
<htk-radio radio-group="rg-method" value="PICKUP"/> name="date"
<t>PickupInStore</t> show-func="dateShow"
</label> validate-func="dateValidate">
<h2 id="date-question"/>
<div class="answers">
<htk-calendar
id="calendar"
class="thin-calendar"
param="date"
restrict-func="calendarRestrict"
on-changed="onFieldChange"/>
</div> </div>
</div> </htk-step>
</htk-step> <htk-step
<htk-step name="address"
name="date" show-func="addressShow"
show-func="dateShow" validate-func="addressValidate">
validate-func="dateValidate"> <h2 id="address-question"/>
<h2 id="date-question"/> <div class="answers target">
<div class="answers"> <db-form id="address-form" model="addresses"/>
<htk-calendar <htk-repeater
id="calendar" id="repeater"
class="thin-calendar" form-id="iter"
param="date" on-change="onAddressChange"
restrict-func="calendarRestrict" renderer="addressRenderer">
on-changed="onFieldChange"/> <db-model property="model" id="addresses">
</div> SELECT a.id, a.nickname, p.name province, a.city, a.street, a.isActive, c.country
</htk-step> FROM myAddress a
<htk-step LEFT JOIN vn.province p ON p.id = a.provinceFk
name="address" JOIN vn.country c ON c.id = p.countryFk
show-func="addressShow" WHERE a.isActive
validate-func="addressValidate"> </db-model>
<h2 id="address-question"/> <custom>
<div class="answers target"> <div class="address" id="address">
<db-form id="address-form" model="addresses"/> <p class="consignee">
<htk-repeater <htk-text form="iter" column="nickname"/>
id="repeater" </p>
form-id="iter" <p>
on-change="onAddressChange" <htk-text form="iter" column="street"/>
renderer="addressRenderer"> </p>
<db-model property="model" id="addresses"> </div>
SELECT a.id, a.nickname, p.name province, a.city, a.street, a.isActive, c.country </custom>
FROM myAddress a </htk-repeater>
LEFT JOIN vn.province p ON p.id = a.provinceFk </div>
JOIN vn.country c ON c.id = p.countryFk </htk-step>
WHERE a.isActive <htk-step
</db-model> name="agency"
<custom> show-func="agencyShow"
<div class="address" id="address"> validate-func="agencyValidate">
<p class="consignee"> <h2><t>AgencyQuestion</t></h2>
<htk-text form="iter" column="nickname"/> <div class="answers target">
</p> <htk-combo
<p> id="agency-combo"
<htk-text form="iter" column="street"/> param="agency"
</p> on-changed="onFieldChange"
</div> model="agencies"/>
</custom> </div>
</htk-repeater> </htk-step>
</div> <htk-step
</htk-step> name="pickup"
<htk-step show-func="pickupShow"
name="agency" validate-func="pickupValidate">
show-func="agencyShow" <h2><t>PickupWarehouseQuestion</t></h2>
validate-func="agencyValidate"> <div class="answers target">
<h2><t>AgencyQuestion</t></h2> <htk-combo
<div class="answers target"> id="warehouse-combo"
<htk-combo param="agency"
id="agency-combo" on-changed="onFieldChange"
param="agency" model="warehouses"/>
on-changed="onFieldChange" </div>
model="agencies"/> </htk-step>
</div> <htk-step
</htk-step> name="confirm-delivery">
<htk-step <h2><t>ConfirmData</t></h2>
name="pickup" <div class="answers target">
show-func="pickupShow" <p>
validate-func="pickupValidate"> <t>Arrival</t>
<h2><t>PickupWarehouseQuestion</t></h2> <htk-text format="%D" param="date"/>
<div class="answers target"> </p>
<htk-combo <p>
id="warehouse-combo" <htk-text form="address-form" column="street"/>
param="agency" </p>
on-changed="onFieldChange" <p>
model="warehouses"/> <t>Agency</t>
</div> <htk-text form="agency-combo" column="description"/>
</htk-step> </p>
<htk-step <div class="clear"/>
name="confirm-delivery"> </div>
<h2><t>ConfirmData</t></h2> </htk-step>
<div class="answers target"> <htk-step
<p> name="confirm-pickup">
<t>Arrival</t> <h2><t>ConfirmData</t></h2>
<htk-text format="%D" param="date"/> <div class="answers target">
</p> <p>
<p> <t>Pickup</t>
<htk-text form="address-form" column="street"/> <htk-text format="%D" param="date"/>
</p> </p>
<p> <p>
<t>Agency</t> <t>Warehouse</t>
<htk-text form="agency-combo" column="description"/> <htk-text form="warehouse-combo" column="description"/>
</p> </p>
<div class="clear"/> <div class="clear"/>
</div> </div>
</htk-step> </htk-step>
<htk-step </htk-assistant>
name="confirm-pickup"> </div>
<h2><t>ConfirmData</t></h2>
<div class="answers target">
<p>
<t>Pickup</t>
<htk-text format="%D" param="date"/>
</p>
<p>
<t>Warehouse</t>
<htk-text form="warehouse-combo" column="description"/>
</p>
<div class="clear"/>
</div>
</htk-step>
</htk-assistant>
</div> </div>
</div> </div>
</div> </div>

83
forms/ecomerce/confirm/style.css
View File

@ -1,24 +1,11 @@
.confirm
{ .confirm .summary {
padding: 1em; margin-bottom: 16px;
max-width: 420px;
margin: 0 auto;
color: #555;
} }
.confirm .box .confirm .address {
{
padding: 2.2em 2.5em;
}
.confirm .summary
{
margin-bottom: 1em;
}
.confirm .address
{
margin-top: .8em; margin-top: .8em;
} }
.confirm h2 .confirm h2 {
{
font-size: 1.1em; font-size: 1.1em;
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
@ -26,61 +13,48 @@
margin-bottom: .5em; margin-bottom: .5em;
color: #333; color: #333;
} }
.confirm button .confirm button {
{
font-size: 1.4em; font-size: 1.4em;
} }
.confirm p .confirm p {
{
margin: .2em 0; margin: .2em 0;
} }
.confirm .modify-order .confirm .modify-order {
{
float: left; float: left;
} }
.confirm .confirm-order .confirm .confirm-order {
{
float: right; float: right;
} }
.confirm .payment > div .confirm .payment > div {
{
margin-bottom: 1.4em; margin-bottom: 1.4em;
} }
.confirm .payment > .button-bar .confirm .payment > .button-bar {
{
margin: 0; margin: 0;
margin-top: 1.8em; margin-top: 1.8em;
} }
/* Table */ /* Table */
.confirm .debt-info .confirm .debt-info {
{
padding: 0; padding: 0;
} }
.confirm .debt-info > table .confirm .debt-info > table {
{
border-collapse: collapse; border-collapse: collapse;
} }
.confirm td .confirm td {
{
padding: .15em 0; padding: .15em 0;
} }
.confirm .sum-total > td .confirm .sum-total > td {
{
border-top: solid 1px #DDD; border-top: solid 1px #DDD;
font-weight: bold; font-weight: bold;
} }
.confirm .currency .confirm .currency {
{
text-align: right; text-align: right;
} }
.confirm .credit-info .confirm .credit-info {
{
display: none; display: none;
} }
.confirm .exceeded-info .confirm .exceeded-info {
{
display: none; display: none;
color: #E53935; color: #E53935;
} }
@ -88,34 +62,27 @@
/* Pay */ /* Pay */
.confirm .amount-selector, .confirm .amount-selector,
.confirm .pay-methods > div .confirm .pay-methods > div {
{
display: none; display: none;
} }
.confirm .pay-methods > div .confirm .pay-methods > div {
{
margin: .3em 0; margin: .3em 0;
} }
.confirm .pay-methods > div > label > input[type=radio] .confirm .pay-methods > div > label > input[type=radio] {
{
margin: 0; margin: 0;
margin-right: .5em; margin-right: .5em;
vertical-align: middle; vertical-align: middle;
} }
.confirm .pay-methods > div > div .confirm .pay-methods > div > div {
{
padding: .5em 1.5em; padding: .5em 1.5em;
display: none; display: none;
} }
.confirm .pay-methods > div.selected > div .confirm .pay-methods > div.selected > div {
{
display: block; display: block;
} }
.confirm .transfer-account .confirm .transfer-account {
{
margin-top: .5em; margin-top: .5em;
} }
.confirm .transfer-account > p .confirm .transfer-account > p {
{
margin: .1em 0; margin: .1em 0;
} }

332
forms/ecomerce/confirm/ui.xml
View File

@ -30,181 +30,183 @@
<h1><t>Order summary</t></h1> <h1><t>Order summary</t></h1>
</div> </div>
<div id="form" class="confirm"> <div id="form" class="confirm">
<div class="box summary"> <div class="vn-w-sm">
<div> <div class="box vn-pa-lg summary">
<div class="delivery"> <div>
<p> <div class="delivery">
<t>Delivery at</t> <p>
<htk-text format="%D" form="order-form" column="sent"/> <t>Delivery at</t>
</p> <htk-text format="%D" form="order-form" column="sent"/>
<p> </p>
<span id="method"><t>Agency</t></span> <p>
<htk-text form="order-form" column="agency"/> <span id="method"><t>Agency</t></span>
</p> <htk-text form="order-form" column="agency"/>
</div> </p>
<div id="address" class="address">
<p>
<htk-text form="order-form" column="nickname"/>
</p>
<p>
<htk-text form="order-form" column="street"/>
</p>
<p>
<htk-text form="order-form" column="postalCode"/>,
<htk-text form="order-form" column="city"/>
</p>
</div>
</div>
</div>
<div class="box payment">
<div>
<table class="debt-info">
<tbody>
<tr>
<td>
<t>Previous balance</t>
</td>
<td class="currency">
<htk-text format="%.2d€" id="debt"/>
</td>
</tr>
<tr>
<td>
<t>Order total</t>
</td>
<td class="currency">
<htk-text format="%.2d€" form="order-form" column="taxableBase"/>
</td>
</tr>
<tr>
<td>
<t>Order VAT</t>
</td>
<td class="currency">
<htk-text format="%.2d€" form="order-form" column="tax"/>
</td>
</tr>
<tr class="total-debt sum-total">
<td>
<t>Total debt</t>
</td>
<td class="currency">
<htk-text format="%.2d€" id="total-debt"/>
</td>
</tr>
<tr id="credit-info" class="credit-info">
<td>
<t>Credit</t>
</td>
<td class="currency">
<htk-text format="%.2d€" form="order-form" column="credit"/>
</td>
</tr>
<tr id="exceeded-info" class="exceeded-info sum-total">
<td>
<t>Exceeded credit</t>
</td>
<td class="currency">
<htk-text format="%.2d€" id="credit-excess"/>
</td>
</tr>
</tbody>
</table>
</div>
<div id="amount-selector" class="amount-selector">
<h2>
<t>Amount to pay</t>
</h2>
<div class="radio">
<htk-radio-group
id="pay-amount"/>
<div>
<htk-radio radio-group="pay-amount" value="ALL"/>
<label>
<t>Total debt</t>,
<htk-text format="%.2d€" id="total-amount"/>
</label>
</div> </div>
<div> <div id="address" class="address">
<htk-radio radio-group="pay-amount" value="EXCEEDED"/> <p>
<label> <htk-text form="order-form" column="nickname"/>
<t>Exceeded credit</t>, </p>
<htk-text format="%.2d€" id="excess-amount"/> <p>
</label> <htk-text form="order-form" column="street"/>
</p>
<p>
<htk-text form="order-form" column="postalCode"/>,
<htk-text form="order-form" column="city"/>
</p>
</div> </div>
</div> </div>
</div> </div>
<div> <div class="box vn-pa-lg payment">
<h2> <div>
<t>Pay method</t> <table class="debt-info">
</h2> <tbody>
<div class="pay-methods"> <tr>
<htk-radio-group <td>
id="pay-method" <t>Previous balance</t>
on-changed="onPayMethodChange"/> </td>
<div id="balance-method"> <td class="currency">
<label> <htk-text format="%.2d€" id="debt"/>
<htk-radio radio-group="pay-method" value="BALANCE"/> </td>
<t>Use my balance</t> </tr>
</label> <tr>
<td>
<t>Order total</t>
</td>
<td class="currency">
<htk-text format="%.2d€" form="order-form" column="taxableBase"/>
</td>
</tr>
<tr>
<td>
<t>Order VAT</t>
</td>
<td class="currency">
<htk-text format="%.2d€" form="order-form" column="tax"/>
</td>
</tr>
<tr class="total-debt sum-total">
<td>
<t>Total debt</t>
</td>
<td class="currency">
<htk-text format="%.2d€" id="total-debt"/>
</td>
</tr>
<tr id="credit-info" class="credit-info">
<td>
<t>Credit</t>
</td>
<td class="currency">
<htk-text format="%.2d€" form="order-form" column="credit"/>
</td>
</tr>
<tr id="exceeded-info" class="exceeded-info sum-total">
<td>
<t>Exceeded credit</t>
</td>
<td class="currency">
<htk-text format="%.2d€" id="credit-excess"/>
</td>
</tr>
</tbody>
</table>
</div>
<div id="amount-selector" class="amount-selector">
<h2>
<t>Amount to pay</t>
</h2>
<div class="radio">
<htk-radio-group
id="pay-amount"/>
<div> <div>
<t>You have a favorable balance.</t> <htk-radio radio-group="pay-amount" value="ALL"/>
<label>
<t>Total debt</t>,
<htk-text format="%.2d€" id="total-amount"/>
</label>
</div> </div>
</div>
<div id="credit-method">
<label>
<htk-radio radio-group="pay-method" value="CREDIT"/>
<t>Use my credit</t>
</label>
<div> <div>
<t>You have a favorable credit.</t> <htk-radio radio-group="pay-amount" value="EXCEEDED"/>
<label>
<t>Exceeded credit</t>,
<htk-text format="%.2d€" id="excess-amount"/>
</label>
</div> </div>
</div> </div>
<div id="card-method">
<label>
<htk-radio radio-group="pay-method" value="CARD"/>
<t>Credit card</t>
</label>
<div>
<t>You will be redirected to the payment.</t>
</div>
</div>
<div id="transfer-method">
<label>
<htk-radio radio-group="pay-method" value="TRANSFER"/>
<t>Bank Transfer</t>
</label>
<div>
<t>Make a transfer to one account.</t>
<htk-repeater form-id="iter">
<db-model property="model">
SELECT name, iban FROM mainAccountBank
</db-model>
<custom>
<div class="transfer-account">
<p><htk-text form="iter" column="name"/></p>
<p><htk-text form="iter" column="iban"/></p>
</div>
</custom>
</htk-repeater>
</div>
</div>
<div id="later-method">
<label>
<htk-radio radio-group="pay-method" value="LATER"/>
<t>Pay later</t>
</label>
</div>
</div> </div>
</div> <div>
<div class="button-bar"> <h2>
<button on-click="onModifyClick" id="modify" class="thin modify-order"> <t>Pay method</t>
<t>Modify</t> </h2>
</button> <div class="pay-methods">
<button on-click="onConfirmClick" id="confirm" class="thin confirm-order"> <htk-radio-group
<t>Confirm</t> id="pay-method"
</button> on-changed="onPayMethodChange"/>
<div class="clear"/> <div id="balance-method">
<label>
<htk-radio radio-group="pay-method" value="BALANCE"/>
<t>Use my balance</t>
</label>
<div>
<t>You have a favorable balance.</t>
</div>
</div>
<div id="credit-method">
<label>
<htk-radio radio-group="pay-method" value="CREDIT"/>
<t>Use my credit</t>
</label>
<div>
<t>You have a favorable credit.</t>
</div>
</div>
<div id="card-method">
<label>
<htk-radio radio-group="pay-method" value="CARD"/>
<t>Credit card</t>
</label>
<div>
<t>You will be redirected to the payment.</t>
</div>
</div>
<div id="transfer-method">
<label>
<htk-radio radio-group="pay-method" value="TRANSFER"/>
<t>Bank Transfer</t>
</label>
<div>
<t>Make a transfer to one account.</t>
<htk-repeater form-id="iter">
<db-model property="model">
SELECT name, iban FROM mainAccountBank
</db-model>
<custom>
<div class="transfer-account">
<p><htk-text form="iter" column="name"/></p>
<p><htk-text form="iter" column="iban"/></p>
</div>
</custom>
</htk-repeater>
</div>
</div>
<div id="later-method">
<label>
<htk-radio radio-group="pay-method" value="LATER"/>
<t>Pay later</t>
</label>
</div>
</div>
</div>
<div class="button-bar">
<button on-click="onModifyClick" id="modify" class="thin modify-order">
<t>Modify</t>
</button>
<button on-click="onConfirmClick" id="confirm" class="thin confirm-order">
<t>Confirm</t>
</button>
<div class="clear"/>
</div>
</div> </div>
</div> </div>
</div> </div>

7
forms/ecomerce/invoices/style.css
View File

@ -1,7 +0,0 @@
.invoices {
padding: 1em;
}
.invoices .box {
max-width: 600px;
}

8
forms/ecomerce/invoices/ui.xml
View File

@ -3,9 +3,9 @@
<h1><t>Invoices</t></h1> <h1><t>Invoices</t></h1>
</div> </div>
<div id="form" class="invoices"> <div id="form" class="invoices">
<div class="box"> <htk-grid
<div> class="box vn-w-sm"
<htk-grid show-header="false"> show-header="false">
<db-model property="model" id="tickets"> <db-model property="model" id="tickets">
SELECT id, ref, issued, amount, hasPdf SELECT id, ref, issued, amount, hasPdf
FROM myInvoice FROM myInvoice
@ -19,7 +19,5 @@
renderer="donwloadRenderer" renderer="donwloadRenderer"
target="_blank"/> target="_blank"/>
</htk-grid> </htk-grid>
</div>
</div>
</div> </div>
</vn> </vn>

8
forms/ecomerce/orders/style.css
View File

@ -1,11 +1,3 @@
.orders {
padding: 1em;
}
.orders .box {
max-width: 25em;
}
/* Balance */
.balance { .balance {
margin-right: .5em; margin-right: .5em;

45
forms/ecomerce/orders/ui.xml
View File

@ -38,30 +38,31 @@
on-click="onBasketClick"/> on-click="onBasketClick"/>
</div> </div>
<div id="form" class="orders"> <div id="form" class="orders">
<div class="box confirmed"> <htk-repeater
<htk-repeater form-id="iter" renderer="repeaterFunc" class="htk-list"> class="htk-list box confirmed vn-w-sm"
<db-model property="model" id="tickets"> form-id="iter"
<custom> renderer="repeaterFunc">
CALL myTicket_list (NULL, NULL); <db-model property="model" id="tickets">
</custom>
</db-model>
<custom> <custom>
<a id="link" class="item" title="{{_('SeeOrder')}}"> CALL myTicket_list (NULL, NULL);
<div class="content">
<p class="important total">
{{Vn.Value.format(iter.total, '%.2d€')}}
</p>
<p class="important">
{{Vn.Value.format(iter.landed, '%D')}}
</p>
<p>#{{iter.id}}</p>
<p>{{iter.nickname}}</p>
<p>{{iter.agency}}</p>
</div>
</a>
</custom> </custom>
</htk-repeater> </db-model>
</div> <custom>
<a id="link" class="item" title="{{_('SeeOrder')}}">
<div class="content">
<p class="important total">
{{Vn.Value.format(iter.total, '%.2d€')}}
</p>
<p class="important">
{{Vn.Value.format(iter.landed, '%D')}}
</p>
<p>#{{iter.id}}</p>
<p>{{iter.nickname}}</p>
<p>{{iter.agency}}</p>
</div>
</a>
</custom>
</htk-repeater>
</div> </div>
<htk-dialog <htk-dialog
id="error-dialog" id="error-dialog"

9
forms/ecomerce/ticket/style.css
View File

@ -1,12 +1,3 @@
.ticket {
padding: 1em;
}
.ticket .box {
max-width: 420px;
margin: 0 auto;
padding: 2em;
color: #333;
}
/* Header */ /* Header */

12
forms/ecomerce/ticket/ui.xml
View File

@ -23,15 +23,11 @@
on-click="onPrintClick"/> on-click="onPrintClick"/>
</div> </div>
<div id="form" class="ticket"> <div id="form" class="ticket">
<div class="box"> <div class="box vn-w-sm vn-pa-lg">
<htk-loader class="head" form="ticket"> <htk-loader class="head" form="ticket">
<h5>#<htk-text column="id" form="ticket"/></h5>
<div> <div>
<p class="important ticket-id"> <h6><t>ShippingInformation</t></h6>
#<htk-text column="id" form="ticket"/>
</p>
</div>
<div>
<h3><t>ShippingInformation</t></h3>
<p> <p>
<t>Preparation</t> <htk-text form="ticket" column="shipped" format="%D"/> <t>Preparation</t> <htk-text form="ticket" column="shipped" format="%D"/>
</p> </p>
@ -43,7 +39,7 @@
</p> </p>
</div> </div>
<div class="address"> <div class="address">
<h3><t>DeliveryAddress</t></h3> <h6><t>DeliveryAddress</t></h6>
<p> <p>
<htk-text form="ticket" column="nickname"/> <htk-text form="ticket" column="nickname"/>
</p> </p>

15
forms/news/new/style.css
View File

@ -1,19 +1,4 @@
.new {
padding: 1em;
}
.new .box {
max-width: 38em;
padding: 2em;
}
/* Form */
.new textarea { .new textarea {
min-height: 500px; min-height: 500px;
} }
.new .foot {
text-align: center;
margin-top: 1em;
}

48
forms/news/new/ui.xml
View File

@ -35,31 +35,29 @@
on-click="this.onAcceptClick()"/> on-click="this.onAcceptClick()"/>
</div> </div>
<div id="form" class="new"> <div id="form" class="new">
<div class="box"> <div class="box form vn-w-sm vn-pa-lg">
<div class="form"> <div class="form-group">
<div class="form-group"> <label><t>Title</t></label>
<label><t>Title</t></label> <htk-entry form="iter" column="title"/>
<htk-entry form="iter" column="title"/> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>Tag</t></label>
<label><t>Tag</t></label> <htk-combo form="iter" column="tag">
<htk-combo form="iter" column="tag"> <db-model property="model">
<db-model property="model"> <custom>
<custom> SELECT name, description FROM newsTag
SELECT name, description FROM newsTag ORDER BY description
ORDER BY description </custom>
</custom> </db-model>
</db-model> </htk-combo>
</htk-combo> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>Priority</t></label>
<label><t>Priority</t></label> <htk-entry form="iter" column="priority"/>
<htk-entry form="iter" column="priority"/> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>NewBody</t></label>
<label><t>NewBody</t></label> <textarea id="html-editor"/>
<textarea id="html-editor"/>
</div>
</div> </div>
</div> </div>
</div> </div>

11
forms/news/news/style.css
View File

@ -1,16 +1,5 @@
.news {
padding: 1em;
}
.news .box {
max-width: 420px;
margin: 0 auto;
}
/* Items */
.news .item .photo { .news .item .photo {
float: left;
margin-right: 1em;
height: 80px; height: 80px;
width: 80px; width: 80px;
border-radius: 50%; border-radius: 50%;

82
forms/news/news/ui.xml
View File

@ -9,49 +9,47 @@
on-click="this.onAddClick()"/> on-click="this.onAddClick()"/>
</div> </div>
<div id="form" class="news"> <div id="form" class="news">
<div class="box"> <htk-repeater form-id="iter" class="box htk-list vn-w-sm">
<htk-repeater form-id="iter" class="htk-list"> <db-model property="model" id="news-model" updatable="true">
<db-model property="model" id="news-model" updatable="true">
<custom>
SELECT n.id, u.nickname, n.priority, n.image, n.title
FROM news n
JOIN account.user u ON u.id = n.userFk
ORDER BY priority, n.created DESC
</custom>
</db-model>
<custom> <custom>
<a class="item" SELECT n.id, u.nickname, n.priority, n.image, n.title
href="{{`#!form=news/new&amp;new=${iter.id}`}}" FROM news n
title="_EditNew"> JOIN account.user u ON u.id = n.userFk
<div class="side"> ORDER BY priority, n.created DESC
<htk-image
form="iter"
column="image"
class="photo"
directory="news"
subdir="200x200"
full-dir="full"
editable="true"
conn="conn"/>
</div>
<div class="content">
<p class="important">
{{iter.title}}
</p>
<p>{{iter.nickname}}</p>
<p>{{iter.priority}}</p>
</div>
<div
class="actions"
on-click="$event.preventDefault()">
<htk-button
tip="_Remove"
icon="delete"
on-click="this.onDeleteClick($.iter)"/>
</div>
</a>
</custom> </custom>
</htk-repeater> </db-model>
</div> <custom>
<a class="item"
href="{{`#!form=news/new&amp;new=${iter.id}`}}"
title="_EditNew">
<div class="side vn-mr-md">
<htk-image
form="iter"
column="image"
class="photo"
directory="news"
subdir="200x200"
full-dir="full"
editable="true"
conn="conn"/>
</div>
<div class="content">
<p class="important">
{{iter.title}}
</p>
<p>{{iter.nickname}}</p>
<p>{{iter.priority}}</p>
</div>
<div
class="actions"
on-click="$event.preventDefault()">
<htk-button
tip="_Remove"
icon="delete"
on-click="this.onDeleteClick($.iter)"/>
</div>
</a>
</custom>
</htk-repeater>
</div> </div>
</vn> </vn>

19
forms/reports/items-form/style.css
View File

@ -1,19 +0,0 @@
.items {
padding: 1em;
}
.items .box {
max-width: 420px;
padding: 3em;
}
/* Footer */
.items .footer {
text-align: center;
margin-top: 1.5em;
}
.items .footer > button {
margin: 0 .2em;
}

66
forms/reports/items-form/ui.xml
View File

@ -9,40 +9,38 @@
on-click="this.onPreviewClick()"/> on-click="this.onPreviewClick()"/>
</div> </div>
<div id="form" class="items"> <div id="form" class="items">
<div class="box"> <div class="form box vn-w-sm vn-pa-lg">
<div class="form"> <div class="form-group">
<div class="form-group"> <label><t>Store</t></label>
<label><t>Store</t></label> <htk-combo>
<htk-combo> <vn-param property="param" id="warehouse"/>
<vn-param property="param" id="warehouse"/> <db-model property="model">
<db-model property="model"> <custom>
<custom> SELECT id, name FROM vn2008.warehouse
SELECT id, name FROM vn2008.warehouse WHERE reserve ORDER BY name
WHERE reserve ORDER BY name </custom>
</custom> </db-model>
</db-model> </htk-combo>
</htk-combo> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>Realm</t></label>
<label><t>Realm</t></label> <htk-combo not-null="false">
<htk-combo not-null="false"> <vn-param property="param" id="realm"/>
<vn-param property="param" id="realm"/> <db-model property="model">
<db-model property="model"> <custom>
<custom> SELECT id, reino FROM vn2008.reinos
SELECT id, reino FROM vn2008.reinos WHERE display != FALSE ORDER BY reino
WHERE display != FALSE ORDER BY reino </custom>
</custom> </db-model>
</db-model> </htk-combo>
</htk-combo> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>Rate</t></label>
<label><t>Rate</t></label> <select id="rate">
<select id="rate"> <option>3</option>
<option>3</option> <option>2</option>
<option>2</option> <option>1</option>
<option>1</option> </select>
</select>
</div>
</div> </div>
</div> </div>
</div> </div>

8
forms/reports/shelves/style.css
View File

@ -1,8 +0,0 @@
.shelves {
padding: 1em;
}
.shelves .box {
max-width: 420px;
padding: 3em;
}

180
forms/reports/shelves/ui.xml
View File

@ -19,99 +19,97 @@
on-click="this.onPreviewClick()"/> on-click="this.onPreviewClick()"/>
</div> </div>
<div id="form" class="shelves"> <div id="form" class="shelves">
<div class="box"> <div class="form box vn-w-sm vn-pa-lg">
<div class="form"> <div class="form-group">
<div class="form-group"> <label><t>Configuration</t></label>
<label><t>Configuration</t></label> <htk-combo
<htk-combo id="config"
id="config" placeholder="_Select config"
placeholder="_Select config" model="configs-model"
model="configs-model" on-changed="this.onConfigChange()"
on-changed="this.onConfigChange()" on-ready="this.onConfigChange()"/>
on-ready="this.onConfigChange()"/> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>Date</t></label>
<label><t>Date</t></label> <htk-date-chooser id="date"/>
<htk-date-chooser id="date"/> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>Reign</t></label>
<label><t>Reign</t></label> <htk-combo id="realm">
<htk-combo id="realm"> <db-model property="model" id="realms">
<db-model property="model" id="realms"> <custom>
SELECT id, reino FROM vn2008.reinos
WHERE display != FALSE ORDER BY reino
</custom>
</db-model>
</htk-combo>
</div>
<div class="form-group">
<label><t>Family</t></label>
<htk-combo id="family">
<db-model property="model">
<custom>
SELECT tipo_id, Tipo FROM vn2008.Tipos
WHERE reino_id = #realm ORDER BY Tipo
</custom>
<sql-batch property="batch">
<custom> <custom>
SELECT id, reino FROM vn2008.reinos <item name="realm" param="realm"/>
WHERE display != FALSE ORDER BY reino
</custom> </custom>
</db-model> </sql-batch>
</htk-combo> </db-model>
</div> </htk-combo>
<div class="form-group"> </div>
<label><t>Family</t></label> <div class="form-group">
<htk-combo id="family"> <label><t>Store</t></label>
<db-model property="model"> <htk-combo id="warehouse">
<custom> <db-model property="model" id="warehouses">
SELECT tipo_id, Tipo FROM vn2008.Tipos <custom>
WHERE reino_id = #realm ORDER BY Tipo SELECT id, name FROM vn2008.warehouse
</custom> WHERE reserve ORDER BY name
<sql-batch property="batch"> </custom>
<custom> </db-model>
<item name="realm" param="realm"/> </htk-combo>
</custom> </div>
</sql-batch> <div class="form-group">
</db-model> <label><t>Shelf</t></label>
</htk-combo> <htk-combo id="shelf">
</div> <db-model property="model" id="shelves">
<div class="form-group"> <custom>
<label><t>Store</t></label> SELECT id, name FROM shelf
<htk-combo id="warehouse"> </custom>
<db-model property="model" id="warehouses"> </db-model>
<custom> </htk-combo>
SELECT id, name FROM vn2008.warehouse </div>
WHERE reserve ORDER BY name <div class="form-group">
</custom> <label><t>Name prefix</t></label>
</db-model> <htk-entry id="namePrefix"/>
</htk-combo> </div>
</div> <div class="form-group">
<div class="form-group"> <label><t>Limit amount per item</t></label>
<label><t>Shelf</t></label> <htk-entry id="maxAmount"/>
<htk-combo id="shelf"> </div>
<db-model property="model" id="shelves"> <div class="form-group">
<custom> <label><t>Title</t></label>
SELECT id, name FROM shelf <htk-entry id="reportTitle"/>
</custom> </div>
</db-model> <div class="form-group">
</htk-combo> <label>
</div> <htk-check id="showPacking"/>
<div class="form-group"> <t>Show packing</t>
<label><t>Name prefix</t></label> </label>
<htk-entry id="namePrefix"/> </div>
</div> <div class="form-group">
<div class="form-group"> <label>
<label><t>Limit amount per item</t></label> <htk-check id="stack"/>
<htk-entry id="maxAmount"/> <t>Stack different items</t>
</div> </label>
<div class="form-group"> </div>
<label><t>Title</t></label> <div class="form-group">
<htk-entry id="reportTitle"/> <label>
</div> <htk-check id="useIds"/>
<div class="form-group"> <t>Use ids instead of names</t>
<label> </label>
<htk-check id="showPacking"/>
<t>Show packing</t>
</label>
</div>
<div class="form-group">
<label>
<htk-check id="stack"/>
<t>Stack different items</t>
</label>
</div>
<div class="form-group">
<label>
<htk-check id="useIds"/>
<t>Use ids instead of names</t>
</label>
</div>
</div> </div>
</div> </div>
</div> </div>

2
js/db/calc-sum.js
View File

@ -3,7 +3,7 @@ var Calc = require ('./calc');
/** /**
* Computes a sum of data in the model. * Computes a sum of data in the model.
**/ */
module.exports = new Class module.exports = new Class
({ ({
Extends: Calc Extends: Calc

10
js/db/calc.js
View File

@ -4,7 +4,7 @@ var SimpleIterator = require ('./simple-iterator');
/** /**
* Interface for handle foreach operations on the model. * Interface for handle foreach operations on the model.
**/ */
module.exports = new Class module.exports = new Class
({ ({
Extends: Vn.Param Extends: Vn.Param
@ -132,23 +132,23 @@ module.exports = new Class
* You don't need to define it if model isn't updatable. * You don't need to define it if model isn't updatable.
* *
* @param {integer} row The row number * @param {integer} row The row number
**/ */
,before: function (row) {} ,before: function (row) {}
/** /**
* Called after each update or insert row operation. * Called after each update or insert row operation.
* *
* @param {integer} row The row number * @param {integer} row The row number
**/ */
,after: function (row) {} ,after: function (row) {}
/** /**
* Called before each model refresh. * Called before each model refresh.
**/ */
,init: function () {} ,init: function () {}
/** /**
* Called when an operation in the model is complete. * Called when an operation in the model is complete.
**/ */
,done: function () {} ,done: function () {}
}); });

8
js/db/form.js
View File

@ -11,7 +11,7 @@ module.exports = new Class
{ {
/** /**
* The model associated to this form. * The model associated to this form.
**/ */
model: model:
{ {
type: Model type: Model
@ -30,7 +30,7 @@ module.exports = new Class
}, },
/** /**
* The row where the form positioned, has -1 if the row is unselected. * The row where the form positioned, has -1 if the row is unselected.
**/ */
row: row:
{ {
type: Number type: Number
@ -51,7 +51,7 @@ module.exports = new Class
}, },
/** /**
* The number of rows in the form. * The number of rows in the form.
**/ */
numRows: numRows:
{ {
type: Number type: Number
@ -65,7 +65,7 @@ module.exports = new Class
}, },
/** /**
* Checks if the form data is ready. * Checks if the form data is ready.
**/ */
ready: ready:
{ {
type: Boolean type: Boolean

6
js/db/param.js
View File

@ -10,7 +10,7 @@ module.exports = new Class
{ {
/** /**
* The form field referenced by this param. * The form field referenced by this param.
**/ */
column: column:
{ {
type: String type: String
@ -26,7 +26,7 @@ module.exports = new Class
}, },
/** /**
* The form referenced by this param. * The form referenced by this param.
**/ */
form: form:
{ {
type: Form type: Form
@ -48,7 +48,7 @@ module.exports = new Class
/** /**
* Determines whether the link to the form is unidirectional, ie, a * Determines whether the link to the form is unidirectional, ie, a
* change in the form updates the parameter but not vice versa. * change in the form updates the parameter but not vice versa.
**/ */
oneWay: oneWay:
{ {
type: Boolean type: Boolean

10
js/db/query.js
View File

@ -9,7 +9,7 @@ module.exports = new Class
{ {
/** /**
* The connection used to execute the statement. * The connection used to execute the statement.
**/ */
conn: conn:
{ {
type: Connection type: Connection
@ -25,7 +25,7 @@ module.exports = new Class
}, },
/** /**
* The model query. * The model query.
**/ */
query: query:
{ {
type: String type: String
@ -41,7 +41,7 @@ module.exports = new Class
}, },
/** /**
* The model select statement. * The model select statement.
**/ */
stmt: stmt:
{ {
type: Sql.Stmt type: Sql.Stmt
@ -57,7 +57,7 @@ module.exports = new Class
}, },
/** /**
* The batch used to execute the statement. * The batch used to execute the statement.
**/ */
batch: batch:
{ {
type: Sql.Batch type: Sql.Batch
@ -73,7 +73,7 @@ module.exports = new Class
}, },
/** /**
* Wether to execute automatically de query que it's ready. * Wether to execute automatically de query que it's ready.
**/ */
autoLoad: autoLoad:
{ {
type: Boolean, type: Boolean,

10
js/db/result.js
View File

@ -1,11 +1,11 @@
/** /**
* This class stores a database result. * This class stores a database result.
**/ */
module.exports = new Class module.exports = new Class
({ ({
/** /**
* Initilizes the result object. * Initilizes the result object.
**/ */
initialize: function (result) initialize: function (result)
{ {
this.data = result.data; this.data = result.data;
@ -29,7 +29,7 @@ module.exports = new Class
* *
* @param {String} columnName The column name * @param {String} columnName The column name
* @return {Object} The cell value * @return {Object} The cell value
**/ */
,get: function (columnName) ,get: function (columnName)
{ {
var columnIndex = this.columnMap[columnName]; var columnIndex = this.columnMap[columnName];
@ -38,7 +38,7 @@ module.exports = new Class
/** /**
* Resets the result iterator. * Resets the result iterator.
**/ */
,reset: function () ,reset: function ()
{ {
this.row = -1; this.row = -1;
@ -46,7 +46,7 @@ module.exports = new Class
/** /**
* Moves the internal iterator to the next row. * Moves the internal iterator to the next row.
**/ */
,next: function () ,next: function ()
{ {
this.row++; this.row++;

2
js/hedera/form.js
View File

@ -33,7 +33,7 @@ module.exports = new Class({
builder.compileFile('forms/'+ this.formInfo.path +'/ui.xml'); builder.compileFile('forms/'+ this.formInfo.path +'/ui.xml');
var scope = this.builder = builder.load(null, this); var scope = this.builder = builder.load(null, this);
scope.link({conn: this.conn}); scope.link(null, {conn: this.conn});
this.node = scope.$('form'); this.node = scope.$('form');

10
js/hedera/gui.js
View File

@ -35,11 +35,6 @@ module.exports = new Class({
this.$('background').onclick = function() {}; this.$('background').onclick = function() {};
this.$('menu-button').addEventListener('click', function(event) {
event.stopPropagation();
this.showMenu();
}.bind(this));
this.$('left-panel').addEventListener('click', function(event) { this.$('left-panel').addEventListener('click', function(event) {
event.stopPropagation(); event.stopPropagation();
}); });
@ -264,6 +259,11 @@ module.exports = new Class({
} }
} }
,onMenuClick(event) {
event.stopPropagation();
this.showMenu();
}
,showMenu: function() { ,showMenu: function() {
this.showBackground(); this.showBackground();
Vn.Node.addClass(this.$('left-panel'), 'show'); Vn.Node.addClass(this.$('left-panel'), 'show');

207
js/hedera/gui.scss
View File

@ -1,3 +1,6 @@
@import "../htk/style/classes";
.vn-gui { .vn-gui {
height: inherit; height: inherit;
@ -20,72 +23,71 @@
overflow: hidden; overflow: hidden;
height: 64px; height: 64px;
color: white; color: white;
display: flex;
align-items: center;
transition-property: left, background-color, transform; transition-property: left, background-color, transform;
transition-duration: 200ms; transition-duration: 200ms;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
}
.menu-button {
position: absolute;
left: 0;
display: none;
border: none;
background-color: transparent;
padding: 0 1em;
margin: 0;
height: 100%;
&:hover { & > .menu-button {
background-color: rgba(0, 0, 0, .2); flex: none;
display: none;
border: none;
&:hover {
background-color: rgba(255, 255, 255, .1);
}
& > .htk-icon {
display: block;
}
} }
img { & > .title-wraper {
vertical-align: middle; flex: auto;
height: 1.8em; display: flex;
align-items: center;
gap: 15px;
overflow: hidden;
& > .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
h1 {
font-weight: normal;
font-size: 1.4em;
padding-left: 8px;
margin: 0;
}
}
} }
} & > .action-bar {
.title { flex: none;
float: left;
h1 {
font-weight: normal;
font-size: 1.4em;
padding: .8em .6em;
padding-right: .3em;
margin: 0;
}
}
.navbar > .htk-spinner {
float: left;
margin: 1.05em .8em;
}
/* Action bar */
.action-bar {
float: right;
padding: 0;
margin: 0;
height: 100%;
& > div {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
display: flex;
align-items: center;
padding: 0 1em;
gap: .5em;
& > * { & > div {
float: right; padding: 0;
margin: 0;
height: 100%;
display: flex;
align-items: center;
padding: 0 1em;
gap: .5em;
& > * {
float: right;
}
} }
} button {
button { margin: 0;
margin: 0; padding: 10px 15px;
padding: 10px 15px;
&:hover { &:hover {
background-color: rgba(2550, 255, 255, .2); background-color: rgba(2550, 255, 255, .2);
}
} }
} }
} }
@ -141,40 +143,44 @@
width: 160px; width: 160px;
margin-left: 37px; margin-left: 37px;
} }
.user-info > div { .user-info {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
font-weight: bold;
border: 1px solid #eaeaea;
margin: 25px; margin: 25px;
& > span { & > div {
padding: 10px; display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; font-weight: bold;
white-space: nowrap; border: 1px solid #eaeaea;
}
.logout {
display: block;
margin: 0;
text-align: left;
border-radius: 0;
&:hover { & > span {
background-color: #1a1a1a; padding: 10px;
color: white; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
& > .htk-icon { .logout {
display: block; display: block;
} margin: 0;
} text-align: left;
&.supplant { border-radius: 0;
display: none;
&.show { &:hover {
display: flex; background-color: #1a1a1a;
color: white;
}
& > .htk-icon {
display: block;
}
}
&.supplant {
display: none;
border-top: none;
&.show {
display: flex;
}
} }
} }
} }
@ -283,35 +289,40 @@
transition-property: opacity, transform; transition-property: opacity, transform;
transition-duration: 200ms; transition-duration: 200ms;
transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.form-holder.show { &.show {
opacity: 1; opacity: 1;
transform: translateZ(0) translateX(0em); transform: translateZ(0) translateX(0em);
-webkit-transform: translateZ(0) translateX(0em); -webkit-transform: translateZ(0) translateX(0em);
}
& > * {
padding: $spacing-md;
}
} }
/* Mobile */ /* Mobile */
@media (max-width: 960px) { @media (max-width: 960px) {
.action-bar {
span.label,
.htk-button > .text {
display: none;
}
.htk-button {
padding: 10px;
}
}
& > .navbar { & > .navbar {
padding-left: 2.8em; padding-left: 16px;
left: 0; left: 0;
& > .menu-button {
display: block;
}
& > .action-bar {
button {
padding: 10px;
}
span.label,
button > .text {
display: none;
}
}
} }
& > .body { & > .body {
margin-left: 0; margin-left: 0;
} }
.menu-button {
display: block;
}
.left-panel { .left-panel {
top: 0; top: 0;
left: -250px; left: -250px;

13
js/hedera/gui.xml
View File

@ -1,12 +1,17 @@
<vn> <vn>
<div id="main" class="vn-gui"> <div id="main" class="vn-gui">
<div id="top-bar" class="navbar"> <div id="top-bar" class="navbar">
<div id="action-bar" class="action-bar"/> <button
<button id="menu-button" class="menu-button"> id="menu-button"
class="menu-button"
on-click="onMenuClick">
<htk-icon name="menu" alt="_Menu"/> <htk-icon name="menu" alt="_Menu"/>
</button> </button>
<div id="title" class="title"/> <div class="title-wraper">
<htk-spinner id="loader" class="loader dark"/> <div id="title" class="title"/>
<htk-spinner id="loader" class="loader dark"/>
</div>
<div id="action-bar" class="action-bar"/>
</div> </div>
<div id="left-panel" class="left-panel"> <div id="left-panel" class="left-panel">
<div class="menu-overflow"> <div class="menu-overflow">

2
js/hedera/report.js
View File

@ -82,7 +82,7 @@ module.exports = new Class({
builder.compileFile('reports/'+ this.info.path +'/ui.xml'); builder.compileFile('reports/'+ this.info.path +'/ui.xml');
var scope = this.scope = builder.load(this.doc, this); var scope = this.scope = builder.load(this.doc, this);
scope.link({ scope.link(null, {
batch: this.batch, batch: this.batch,
conn: this.conn conn: this.conn
}); });

13
js/hedera/style.scss
View File

@ -62,16 +62,6 @@ a img {
a img:hover { a img:hover {
opacity: 0.9; opacity: 0.9;
} }
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: .2em 0;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
p { p {
margin: 0.8em 0; margin: 0.8em 0;
} }
@ -153,7 +143,7 @@ input[type=radio] {
} }
select { select {
@extend %clickable; @extend %clickable;
background-color: white; background-color: transparent;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
line-height: 1em; line-height: 1em;
@ -211,6 +201,7 @@ img.editable {
.box { .box {
@extend %box; @extend %box;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box;
.header { .header {
padding: 0.6em 0.8em; padding: 0.6em 0.8em;

43
js/htk/column.js
View File

@ -1,10 +1,10 @@
var NodeBuilder = require ('./node-builder'); var NodeBuilder = require('./node-builder');
/** /**
* Represents a grid column. This is an abstract class and should not be * Represents a grid column. This is an abstract class and should not be
* instantiated directly. * instantiated directly.
**/ */
module.exports = new Class module.exports = new Class
({ ({
Extends: NodeBuilder Extends: NodeBuilder
@ -44,8 +44,7 @@ module.exports = new Class
class: class:
{ {
type: String type: String
,set: function (x) ,set: function(x) {
{
this._userCssClass = x; this._userCssClass = x;
if (this._cssClass) if (this._cssClass)
@ -53,8 +52,7 @@ module.exports = new Class
else else
this._cssClass = x; this._cssClass = x;
} }
,get: function () ,get: function() {
{
return this._userCssClass; return this._userCssClass;
} }
} }
@ -65,19 +63,17 @@ module.exports = new Class
/** /**
* Initializes the column. * Initializes the column.
**/ */
,initialize: function (props) ,initialize: function(props) {
{ this.parent(props);
this.parent (props); this.td = this.createElement('td');
this.td = this.createElement ('td');
} }
,renderHeader: function () ,renderHeader: function() {
{ var th = this.createElement('th');
var th = this.createElement ('th');
if (this.title) if (this.title)
th.appendChild (this.createTextNode (this.title)); th.appendChild(this.createTextNode(this.title));
return th; return th;
} }
@ -86,10 +82,9 @@ module.exports = new Class
* Draws the cell and returns its associated td. * Draws the cell and returns its associated td.
* *
* @return {HTMLTableData} the rendered cell * @return {HTMLTableData} the rendered cell
**/ */
,render: function () ,render: function() {
{ var td = this.td.cloneNode(true);
var td = this.td.cloneNode (true);
if (this._cssClass) if (this._cssClass)
td.className = this._cssClass; td.className = this._cssClass;
@ -97,15 +92,13 @@ module.exports = new Class
return td; return td;
} }
,updateColumnIndex: function (model) ,updateColumnIndex: function(model) {
{
if (this.column) if (this.column)
this.columnIndex = model.getColumnIndex (this.column); this.columnIndex = model.getColumnIndex(this.column);
} }
,changed: function (tr, newValue) ,changed: function(tr, newValue) {
{ this.signalEmit('changed', tr.rowIndex - 1, newValue);
this.signalEmit ('changed', tr.rowIndex - 1, newValue);
} }
}); });

22
js/htk/column/date.js
View File

@ -7,16 +7,14 @@ module.exports = new Class
{ {
/** /**
* Format that applies to the value. * Format that applies to the value.
**/ */
format: format:
{ {
type: String type: String
,set: function (x) ,set: function(x) {
{
this._format = _(x); this._format = _(x);
} }
,get: function () ,get: function() {
{
return this._format; return this._format;
} }
} }
@ -24,18 +22,16 @@ module.exports = new Class
,_format: _('%a, %e %b %Y') ,_format: _('%a, %e %b %Y')
,initialize: function (props) ,initialize: function(props) {
{
this._cssClass = 'cell-date'; this._cssClass = 'cell-date';
this.parent (props); this.parent(props);
} }
,render: function (tr) ,render: function(tr) {
{ var text = Vn.Date.strftime(this.value, this._format);
var text = Vn.Date.strftime (this.value, this._format);
var td = this.parent (tr); var td = this.parent(tr);
td.appendChild (this.createTextNode (text)); td.appendChild(this.createTextNode(text));
return td; return td;
} }

22
js/htk/column/image.js
View File

@ -7,7 +7,7 @@ module.exports = new Class
{ {
/** /**
* The directory where the images are allocated. * The directory where the images are allocated.
**/ */
directory: directory:
{ {
type: String type: String
@ -15,7 +15,7 @@ module.exports = new Class
}, },
/** /**
* The subdirectory where the images are allocated. * The subdirectory where the images are allocated.
**/ */
subdir: subdir:
{ {
type: String type: String
@ -23,7 +23,7 @@ module.exports = new Class
}, },
/** /**
* Subdirectory where full images are allocated. * Subdirectory where full images are allocated.
**/ */
fullDir: fullDir:
{ {
type: String type: String
@ -31,22 +31,20 @@ module.exports = new Class
}, },
/** /**
* The REST connection used to upload the image. * The REST connection used to upload the image.
**/ */
conn: conn:
{ {
type: Vn.JsonConnection type: Vn.JsonConnection
} }
} }
,initialize: function (props) ,initialize: function(props) {
{
this._cssClass = 'cell-image'; this._cssClass = 'cell-image';
this.parent (props); this.parent(props);
} }
,render: function (tr) ,render: function(tr) {
{ var image = new Htk.Image({
var image = new Htk.Image ({
directory: this.directory directory: this.directory
,subdir: this.subdir ,subdir: this.subdir
,fullDir: this.fullDir ,fullDir: this.fullDir
@ -55,8 +53,8 @@ module.exports = new Class
,doc: this.doc ,doc: this.doc
}); });
var td = this.parent (tr); var td = this.parent(tr);
td.appendChild (image.node); td.appendChild(image.node);
return td; return td;
} }
}); });

15
js/htk/column/link.js
View File

@ -7,7 +7,7 @@ module.exports = new Class
{ {
/** /**
* The link url. * The link url.
**/ */
href: href:
{ {
type: String type: String
@ -15,7 +15,7 @@ module.exports = new Class
}, },
/** /**
* the target where the link is opened. * the target where the link is opened.
**/ */
target: target:
{ {
type: String type: String
@ -23,17 +23,16 @@ module.exports = new Class
} }
} }
,render: function (tr) ,render: function(tr) {
{ var link = this.createElement('a');
var link = this.createElement ('a');
link.href = this.href; link.href = this.href;
link.appendChild (this.createTextNode (this.value)); link.appendChild(this.createTextNode(this.value));
if (this.target) if (this.target)
link.target = this.target; link.target = this.target;
var td = this.parent (tr); var td = this.parent(tr);
td.appendChild (link); td.appendChild(link);
return td; return td;
} }
}); });

43
js/htk/column/spin.js
View File

@ -7,7 +7,7 @@ module.exports = new Class
{ {
/** /**
* The text to append to the number. * The text to append to the number.
**/ */
unit: unit:
{ {
type: String type: String
@ -15,59 +15,52 @@ module.exports = new Class
}, },
/** /**
* The number of decimal places to display. * The number of decimal places to display.
**/ */
digits: { digits: {
type: Number type: Number
,value: 0 ,value: 0
} }
} }
,initialize: function (props) ,initialize: function(props) {
{
this._cssClass = 'cell-spin'; this._cssClass = 'cell-spin';
this.parent (props); this.parent(props);
} }
,renderHeader: function () ,renderHeader: function() {
{ var th = this.parent();
var th = this.parent ();
th.className = 'cell-spin'; th.className = 'cell-spin';
return th; return th;
} }
,render: function (tr) ,render: function(tr) {
{ var td = this.parent(tr);
var td = this.parent (tr);
var valueString = null; var valueString = null;
if (this.value !== null && this.value !== undefined) if (this.value !== null && this.value !== undefined)
valueString = new Number (this.value).toFixed (this.digits); valueString = new Number(this.value).toFixed(this.digits);
if (this.editable) if (this.editable) {
{ var entry = this.createElement('input');
var entry = this.createElement ('input');
entry.type = 'text'; entry.type = 'text';
entry.addEventListener ('change', this.inputChanged.bind (this, tr, entry)); entry.addEventListener('change', this.inputChanged.bind(this, tr, entry));
td.appendChild (entry); td.appendChild(entry);
if (valueString) if (valueString)
entry.value = valueString; entry.value = valueString;
} } else if (valueString) {
else if (valueString)
{
if (this.unit) if (this.unit)
valueString = valueString + this.unit; valueString = valueString + this.unit;
var text = this.createTextNode (valueString); var text = this.createTextNode(valueString);
td.appendChild (text); td.appendChild(text);
} }
return td; return td;
} }
,inputChanged: function (tr, entry) ,inputChanged: function(tr, entry) {
{ this.changed(tr, parseInt(entry.value));
this.changed (tr, parseInt (entry.value));
} }
}); });

41
js/htk/column/text.js
View File

@ -7,16 +7,14 @@ module.exports = new Class
{ {
/** /**
* Format that applies to the value. * Format that applies to the value.
**/ */
format: format:
{ {
type: String type: String
,set: function (x) ,set: function(x) {
{
this._format = _(x); this._format = _(x);
} }
,get: function () ,get: function() {
{
return this._format; return this._format;
} }
} }
@ -24,37 +22,32 @@ module.exports = new Class
,_format: null ,_format: null
,initialize: function (props) ,initialize: function(props) {
{
this._cssClass = 'cell-text'; this._cssClass = 'cell-text';
this.parent (props); this.parent(props);
} }
,render: function (tr) ,render: function(tr) {
{
var node; var node;
if (this.editable) if (this.editable) {
{
var value = this.value ? this.value : ''; var value = this.value ? this.value : '';
node = this.createElement ('input'); node = this.createElement('input');
node.type = 'text'; node.type = 'text';
node.value = value; node.value = value;
node.addEventListener ('changed', node.addEventListener('changed',
this.inputChanged.bind (this, tr, node)); this.inputChanged.bind(this, tr, node));
} } else
else node = this.createTextNode(
node = this.createTextNode ( Vn.Value.format(this.value, this._format));
Vn.Value.format (this.value, this._format));
var td = this.parent (tr); var td = this.parent(tr);
td.appendChild (node); td.appendChild(node);
return td; return td;
} }
,inputChanged: function (tr, node) ,inputChanged: function(tr, node) {
{ this.changed(tr, node.value);
this.changed (tr, node.value);
} }
}); });

8
js/htk/dialog.js
View File

@ -3,7 +3,7 @@ var Popup = require('./popup');
/** /**
* Class to show message dialogs with buttons. * Class to show message dialogs with buttons.
**/ */
var Dialog = new Class(); var Dialog = new Class();
module.exports = Dialog; module.exports = Dialog;
@ -53,7 +53,7 @@ Dialog.implement({
{ {
/** /**
* The message displayed to the user. * The message displayed to the user.
**/ */
message: message:
{ {
type: String type: String
@ -66,7 +66,7 @@ Dialog.implement({
} }
/** /**
* The dialog icon. * The dialog icon.
**/ */
,icon: ,icon:
{ {
type: String type: String
@ -79,7 +79,7 @@ Dialog.implement({
} }
/** /**
* The dialog buttons. * The dialog buttons.
**/ */
,buttons: ,buttons:
{ {
enumType: Button enumType: Button

6
js/htk/field.js
View File

@ -99,7 +99,7 @@ module.exports = new Class({
* editable. * editable.
* *
* @param {Boolean} editable Whether the user is allowed to edit the entry * @param {Boolean} editable Whether the user is allowed to edit the entry
**/ */
,setEditable: function(editable) {} ,setEditable: function(editable) {}
/** /**
@ -107,7 +107,7 @@ module.exports = new Class({
* on the associated entry. * on the associated entry.
* *
* @param {Object} value The new value for the entry * @param {Object} value The new value for the entry
**/ */
,putValue: function(value) {} ,putValue: function(value) {}
/** /**
@ -115,7 +115,7 @@ module.exports = new Class({
* on the associated entry changes. * on the associated entry changes.
* *
* @param {Object} value The new entry value * @param {Object} value The new entry value
**/ */
,valueChanged: function(value) { ,valueChanged: function(value) {
this._value = value; this._value = value;

12
js/htk/field/image.js
View File

@ -1,6 +1,6 @@
/** /**
* Class to display or edit an image. Also it allows to show it's full version. * Class to display or edit an image. Also it allows to show it's full version.
**/ */
module.exports = new Class({ module.exports = new Class({
Extends: Htk.Field Extends: Htk.Field
,Tag: 'htk-image' ,Tag: 'htk-image'
@ -8,7 +8,7 @@ module.exports = new Class({
{ {
/** /**
* The directory where the images are allocated. * The directory where the images are allocated.
**/ */
directory: { directory: {
type: String type: String
,set: function(x) { ,set: function(x) {
@ -21,7 +21,7 @@ module.exports = new Class({
}, },
/** /**
* The subdirectory where the images are allocated. * The subdirectory where the images are allocated.
**/ */
subdir: { subdir: {
type: String type: String
,set: function(x) { ,set: function(x) {
@ -34,7 +34,7 @@ module.exports = new Class({
}, },
/** /**
* The timestamp field of the last update, used for caching purposes. * The timestamp field of the last update, used for caching purposes.
**/ */
stampColumn: { stampColumn: {
type: String type: String
,set: function(x) { ,set: function(x) {
@ -47,7 +47,7 @@ module.exports = new Class({
}, },
/** /**
* Whether to show the full image when mouse hover. * Whether to show the full image when mouse hover.
**/ */
fullDir: { fullDir: {
type: String type: String
,set: function(x) { ,set: function(x) {
@ -60,7 +60,7 @@ module.exports = new Class({
}, },
/** /**
* The REST connection used to upload the image. * The REST connection used to upload the image.
**/ */
conn: { conn: {
type: Vn.JsonConnection type: Vn.JsonConnection
} }

22
js/htk/field/label.js
View File

@ -7,17 +7,15 @@ module.exports = new Class
{ {
/** /**
* Format that applies to the value. * Format that applies to the value.
**/ */
format: format:
{ {
type: String type: String
,set: function (x) ,set: function(x) {
{
this._format = _(x); this._format = _(x);
this.putValue (this._value); this.putValue(this._value);
} }
,get: function () ,get: function() {
{
return this._format; return this._format;
} }
} }
@ -25,14 +23,12 @@ module.exports = new Class
,_format: null ,_format: null
,render: function () ,render: function() {
{ this.createRoot('label');
this.createRoot ('label');
} }
,putValue: function (value) ,putValue: function(value) {
{ Vn.Node.setText(this.node,
Vn.Node.setText (this.node, Vn.Value.format(value, this._format));
Vn.Value.format (value, this._format));
} }
}); });

20
js/htk/field/text.js
View File

@ -7,17 +7,15 @@ module.exports = new Class
{ {
/** /**
* Format that applies to the value. * Format that applies to the value.
**/ */
format: format:
{ {
type: String type: String
,set: function (x) ,set: function(x) {
{
this._format = _(x); this._format = _(x);
this.putValue (this._value); this.putValue(this._value);
} }
,get: function () ,get: function() {
{
return this._format; return this._format;
} }
} }
@ -25,13 +23,11 @@ module.exports = new Class
,_format: null ,_format: null
,render: function () ,render: function() {
{ this._node = this.createTextNode('');
this._node = this.createTextNode ('');
} }
,putValue: function (value) ,putValue: function(value) {
{ this._node.nodeValue = Vn.Value.format(value, this._format);
this._node.nodeValue = Vn.Value.format (value, this._format);
} }
}); });

66
js/htk/full-image.js
View File

@ -1,6 +1,6 @@
var Popup = require ('./popup'); var Popup = require('./popup');
var Spinner = require ('./spinner'); var Spinner = require('./spinner');
module.exports = new Class module.exports = new Class
({ ({
@ -9,81 +9,71 @@ module.exports = new Class
{ {
/** /**
* Subdirectory where full images are allocated. * Subdirectory where full images are allocated.
**/ */
fullDir: fullDir:
{ {
type: String type: String
,set: function (x) ,set: function(x) {
{
this._fullDir = x; this._fullDir = x;
} }
,get: function () ,get: function() {
{
return this._fullDir; return this._fullDir;
} }
} }
} }
,show: function (src) ,show: function(src) {
{ var popup = new Popup({class: 'htk-full-image', modal: true});
var popup = new Popup ({class: 'htk-full-image', modal: true});
var img = document.createElement ('img'); var img = document.createElement('img');
img.className = 'htk-full-image'; img.className = 'htk-full-image';
img.addEventListener ('click', this._onImageClick.bind (this, popup)); img.addEventListener('click', this._onImageClick.bind(this, popup));
//img.addEventListener ('error', this._onImageError.bind (this, popup)); //img.addEventListener ('error', this._onImageError.bind (this, popup));
img.src = src; img.src = src;
if (!img.complete) if (!img.complete) {
{ img.addEventListener('load', this._onImageLoad.bind(this, popup, img));
img.addEventListener ('load', this._onImageLoad.bind (this, popup, img));
var spinner = new Spinner (); var spinner = new Spinner();
spinner.start (); spinner.start();
popup.child = spinner; popup.child = spinner;
} } else
else this._onImageLoad(popup, img);
this._onImageLoad (popup, img);
popup.open (); popup.open();
} }
,_onImageLoad: function (popup, img) ,_onImageLoad: function(popup, img) {
{
var scale = null; var scale = null;
var width = img.width; var width = img.width;
var height = img.height; var height = img.height;
var innerWidth = Vn.Browser.getInnerWidth () - 50; var innerWidth = Vn.Browser.getInnerWidth() - 50;
var innerHeight = Vn.Browser.getInnerHeight () - 50; var innerHeight = Vn.Browser.getInnerHeight() - 50;
if (width > innerWidth) if (width > innerWidth) {
{
scale = width / innerWidth; scale = width / innerWidth;
height = parseInt (height / scale); height = parseInt(height / scale);
width = innerWidth; width = innerWidth;
} }
if (height > innerHeight) if (height > innerHeight) {
{
scale = height / innerHeight; scale = height / innerHeight;
width = parseInt (width / scale); width = parseInt(width / scale);
height = innerHeight; height = innerHeight;
} }
if (scale !== null) if (scale !== null) {
{
img.style.width = width +'px'; img.style.width = width +'px';
img.style.height = height +'px'; img.style.height = height +'px';
} }
popup.childNode = img; popup.childNode = img;
popup.reset (); popup.reset();
} }
,_onImageClick: function (popup) ,_onImageClick: function(popup) {
{ popup.hide();
popup.hide ();
} }
,_onImageError: function (popup) {} ,_onImageError: function(popup) {}
}); });

6
js/htk/grid.js
View File

@ -9,7 +9,7 @@ module.exports = new Class({
{ {
/** /**
* The source data model. * The source data model.
**/ */
model: model:
{ {
type: Db.Model type: Db.Model
@ -35,7 +35,7 @@ module.exports = new Class({
}, },
/** /**
* Message that should be displayed when source model is not ready. * Message that should be displayed when source model is not ready.
**/ */
emptyMessage: emptyMessage:
{ {
type: String type: String
@ -43,7 +43,7 @@ module.exports = new Class({
}, },
/** /**
* Wether to display the header with column titles. * Wether to display the header with column titles.
**/ */
showHeader: showHeader:
{ {
type: Boolean type: Boolean

3
js/htk/htk.js
View File

@ -1,7 +1,6 @@
require('db/db'); require('db/db');
require('./style/classes.scss'); require('./style/index.scss');
require('./style/main.scss');
Htk = module.exports = { Htk = module.exports = {
NodeBuilder : require('./node-builder') NodeBuilder : require('./node-builder')

4
js/htk/image-editor.js
View File

@ -6,13 +6,13 @@ var Tpl = require('./image-editor.xml').default;
/** /**
* A form to handle the image database, it allows to add new images or * A form to handle the image database, it allows to add new images or
* replace it. * replace it.
**/ */
module.exports = new Class({ module.exports = new Class({
Extends: Component, Extends: Component,
Properties: { Properties: {
/** /**
* The REST connection used to upload the image. * The REST connection used to upload the image.
**/ */
conn: { conn: {
type: Vn.JsonConnection type: Vn.JsonConnection
} }

155
js/htk/popup.js
View File

@ -1,9 +1,9 @@
var Widget = require ('./widget'); var Widget = require('./widget');
/** /**
* Class to handle popups. * Class to handle popups.
**/ */
module.exports = new Class module.exports = new Class
({ ({
Extends: Widget Extends: Widget
@ -12,48 +12,42 @@ module.exports = new Class
{ {
/** /**
* The popup child. * The popup child.
**/ */
child: child:
{ {
type: Widget type: Widget
,set: function (x) ,set: function(x) {
{
this._child = x; this._child = x;
this._setChildNode (x.node); this._setChildNode(x.node);
} }
,get: function () ,get: function() {
{
return this._child; return this._child;
} }
} }
/** /**
* The popup child Node. * The popup child Node.
**/ */
,childNode: ,childNode:
{ {
type: Object type: Object
,set: function (x) ,set: function(x) {
{
this._child = null; this._child = null;
this._setChildNode (x); this._setChildNode(x);
} }
,get: function () ,get: function() {
{
return this.node.firstChild; return this.node.firstChild;
} }
} }
/** /**
* Indicates how the dialog must be displayed. * Indicates how the dialog must be displayed.
**/ */
,modal: ,modal:
{ {
type: Boolean type: Boolean
,set: function (x) ,set: function(x) {
{
this._modal = x; this._modal = x;
} }
,get: function () ,get: function() {
{
return this._modal; return this._modal;
} }
} }
@ -64,82 +58,69 @@ module.exports = new Class
,_isOpen: false ,_isOpen: false
,_child: null ,_child: null
,initialize: function (props) ,initialize: function(props) {
{ this._bgMouseDownHandler = this._bgMouseDown.bind(this);
this._bgMouseDownHandler = this._bgMouseDown.bind (this); this.parent(props);
this.parent (props);
} }
,render: function () ,render: function() {
{ var div = this.createRoot('div');
var div = this.createRoot ('div');
div.className = 'htk-popup'; div.className = 'htk-popup';
} }
,_setChildNode: function (childNode) ,_setChildNode: function(childNode) {
{ Vn.Node.removeChilds(this.node);
Vn.Node.removeChilds (this.node); this.node.appendChild(childNode);
this.node.appendChild (childNode);
} }
,show: function (parent) ,show: function(parent) {
{
this._parent = parent; this._parent = parent;
this.open (); this.open();
} }
,isModal: function () ,isModal: function() {
{ return this._modal || Vn.isMobile();
return this._modal || Vn.isMobile ();
} }
,open: function () ,open: function() {
{ if (this._isOpen) {
if (this._isOpen) this.reset();
{
this.reset ();
return; return;
} }
this.node.addEventListener ('mousedown', this._onMouseDown.bind (this)); this.node.addEventListener('mousedown', this._onMouseDown.bind(this));
if (this.isModal ()) if (this.isModal()) {
{ var bg = this._bg = this.createElement('div');
var bg = this._bg = this.createElement ('div');
bg.className = 'htk-background'; bg.className = 'htk-background';
bg.addEventListener ('mousedown', this._bgMouseDownHandler); bg.addEventListener('mousedown', this._bgMouseDownHandler);
Htk.Toast.pushTop (bg); Htk.Toast.pushTop(bg);
Vn.Node.addClass (this.node, 'modal'); Vn.Node.addClass(this.node, 'modal');
bg.appendChild (this.node); bg.appendChild(this.node);
this.doc.body.appendChild (bg); this.doc.body.appendChild(bg);
setTimeout (this._onOpacityTimeout.bind (this), 0); setTimeout(this._onOpacityTimeout.bind(this), 0);
} } else {
else this.doc.addEventListener('mousedown', this._bgMouseDownHandler);
{ this.doc.body.appendChild(this.node);
this.doc.addEventListener ('mousedown', this._bgMouseDownHandler);
this.doc.body.appendChild (this.node);
} }
this._isOpen = true; this._isOpen = true;
this.reset (); this.reset();
setTimeout (this._onResetTimeout.bind (this), 0); setTimeout(this._onResetTimeout.bind(this), 0);
} }
,_onOpacityTimeout: function () ,_onOpacityTimeout: function() {
{
if (this._bg) if (this._bg)
this._bg.style.opacity = 1; this._bg.style.opacity = 1;
} }
,_onResetTimeout: function () ,_onResetTimeout: function() {
{ this.reset();
this.reset ();
} }
,reset: function () ,reset: function() {
{
if (!this._isOpen) if (!this._isOpen)
return; return;
@ -156,26 +137,21 @@ module.exports = new Class
var innerWidth = window.innerWidth; var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight; var innerHeight = window.innerHeight;
if (width + dblMargin > innerWidth) if (width + dblMargin > innerWidth) {
{
width = innerWidth - dblMargin; width = innerWidth - dblMargin;
style.width = width +'px'; style.width = width +'px';
} }
if (height + dblMargin > innerHeight) if (height + dblMargin > innerHeight) {
{
height = innerHeight - dblMargin; height = innerHeight - dblMargin;
style.height = height +'px'; style.height = height +'px';
} }
if (this.isModal ()) if (this.isModal()) {
{
style.marginLeft = (-node.offsetWidth / 2) +'px'; style.marginLeft = (-node.offsetWidth / 2) +'px';
style.marginTop = (-node.offsetHeight / 2) +'px'; style.marginTop = (-node.offsetHeight / 2) +'px';
} } else {
else
{
var spacing = 4; var spacing = 4;
var rect = this._parent.getBoundingClientRect (); var rect = this._parent.getBoundingClientRect();
var left = rect.left; var left = rect.left;
var top = rect.top + spacing + this._parent.offsetHeight; var top = rect.top + spacing + this._parent.offsetHeight;
@ -194,37 +170,32 @@ module.exports = new Class
} }
} }
,hide: function () ,hide: function() {
{
if (!this._isOpen) if (!this._isOpen)
return; return;
if (this._bg) if (this._bg) {
{ Htk.Toast.popTop();
Htk.Toast.popTop (); Vn.Node.remove(this._bg);
Vn.Node.remove (this._bg); Vn.Node.removeClass(this._node, 'modal');
Vn.Node.removeClass (this._node, 'modal');
this._bg = null; this._bg = null;
} } else
else this.doc.removeEventListener('mousedown', this._bgMouseDownHandler);
this.doc.removeEventListener ('mousedown', this._bgMouseDownHandler);
Vn.Node.remove (this._node); Vn.Node.remove(this._node);
this._parent = null; this._parent = null;
this._isOpen = false; this._isOpen = false;
this.signalEmit ('closed'); this.signalEmit('closed');
} }
,_bgMouseDown: function (e) ,_bgMouseDown: function(e) {
{
if (e !== this._lastEvent) if (e !== this._lastEvent)
this.hide (); this.hide();
this._lastEvent = null; this._lastEvent = null;
} }
,_onMouseDown: function (e) ,_onMouseDown: function(e) {
{
this._lastEvent = e; this._lastEvent = e;
} }
}); });

6
js/htk/style/main.scss → js/htk/style/components.scss
View File

@ -1,6 +1,5 @@
@import "variables"; @import "./variables";
@import "classes";
/* Icon */ /* Icon */
@ -220,6 +219,7 @@ td.cell-image .htk-image {
} }
& > .content { & > .content {
flex: 1; flex: 1;
overflow: hidden;
& > .important { & > .important {
font-weight: bold; font-weight: bold;
@ -228,6 +228,8 @@ td.cell-image .htk-image {
} }
& > p { & > p {
margin: .1em 0; margin: .1em 0;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
& > .actions { & > .actions {

7
js/htk/style/index.scss Normal file
View File

@ -0,0 +1,7 @@
@import "./variables";
@import "./classes";
@import "./spacing";
@import "./text";
@import "./width";
@import "./components";

355
js/htk/style/spacing.scss Normal file
View File

@ -0,0 +1,355 @@
/**
* CSS spacing classes
*
* vn-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
* T D S
*
* T - type
* - values: p (padding), m (margin)
*
* D - direction
* - values:
* t (top), r (right), b (bottom), l (left),
* a (all), x (both left & right), y (both top & bottom)
*
* S - size
* - values:
* none,
* auto (ONLY for specific margins: vn-ml-*, vn-mr-*, vn-mx-*),
* xs (extra small),
* sm (small),
* md (medium),
* lg (large),
* xl (extra large)
*/
@import "./variables";
//++++++++++++++++++++++++++++++++++++++++++++++++ Padding
// None
.vn-pa-none {
padding: 0;
}
.vn-pl-none {
padding-left: 0;
}
.vn-pr-none {
padding-right: 0;
}
.vn-pt-none {
padding-top: 0;
}
.vn-pb-none {
padding-bottom: 0;
}
.vn-py-none {
padding-top: 0;
padding-bottom: 0;
}
.vn-px-none {
padding-left: 0;
padding-right: 0;
}
// Extra small
.vn-pa-xs {
padding: $spacing-xs;
}
.vn-pl-xs {
padding-left: $spacing-xs;
}
.vn-pr-xs {
padding-right: $spacing-xs;
}
.vn-pt-xs {
padding-top: $spacing-xs;
}
.vn-pb-xs {
padding-bottom: $spacing-xs;
}
.vn-py-xs {
padding-top: $spacing-xs;
padding-bottom: $spacing-xs;
}
.vn-px-xs {
padding-left: $spacing-xs;
padding-right: $spacing-xs;
}
// Small
.vn-pa-sm {
padding: $spacing-sm;
}
.vn-pl-sm {
padding-left: $spacing-sm;
}
.vn-pr-sm {
padding-right: $spacing-sm;
}
.vn-pt-sm {
padding-top: $spacing-sm;
}
.vn-pb-sm {
padding-bottom: $spacing-sm;
}
.vn-py-sm {
padding-top: $spacing-sm;
padding-bottom: $spacing-sm;
}
.vn-px-sm {
padding-left: $spacing-sm;
padding-right: $spacing-sm;
}
// Medium
.vn-pa-md {
padding: $spacing-md;
}
.vn-pl-md {
padding-left: $spacing-md;
}
.vn-pr-md {
padding-right: $spacing-md;
}
.vn-pt-md {
padding-top: $spacing-md;
}
.vn-pb-md {
padding-bottom: $spacing-md;
}
.vn-py-md {
padding-top: $spacing-md;
padding-bottom: $spacing-md;
}
.vn-px-md {
padding-left: $spacing-md;
padding-right: $spacing-md;
}
// Large
.vn-pa-lg {
padding: $spacing-lg;
}
.vn-pl-lg {
padding-left: $spacing-lg;
}
.vn-pr-lg {
padding-right: $spacing-lg;
}
.vn-pt-lg {
padding-top: $spacing-lg;
}
.vn-pb-lg {
padding-bottom: $spacing-lg;
}
.vn-py-lg {
padding-top: $spacing-lg;
padding-bottom: $spacing-lg;
}
.vn-px-lg {
padding-left: $spacing-lg;
padding-right: $spacing-lg;
}
// Extra large
.vn-pa-xl {
padding: $spacing-xl;
}
.vn-pl-xl {
padding-left: $spacing-xl;
}
.vn-pr-xl {
padding-right: $spacing-xl;
}
.vn-pt-xl {
padding-top: $spacing-xl;
}
.vn-pb-xl {
padding-bottom: $spacing-xl;
}
.vn-py-xl {
padding-top: $spacing-xl;
padding-bottom: $spacing-xl;
}
.vn-px-xl {
padding-left: $spacing-xl;
padding-right: $spacing-xl;
}
//++++++++++++++++++++++++++++++++++++++++++++++++ Margin
// None
.vn-ma-none {
padding: 0;
}
.vn-ml-none {
padding-left: 0;
}
.vn-mr-none {
padding-right: 0;
}
.vn-mt-none {
padding-top: 0;
}
.vn-mb-none {
padding-bottom: 0;
}
.vn-my-none {
padding-top: 0;
padding-bottom: 0;
}
.vn-mx-none {
padding-left: 0;
padding-right: 0;
}
// Auto
.vn-ml-none {
padding-left: auto;
}
.vn-mr-none {
padding-right: auto;
}
.vn-mx-none {
padding-left: auto;
padding-right: auto;
}
// Extra small
.vn-ma-xs {
margin: $spacing-xs;
}
.vn-mt-xs {
margin-top: $spacing-xs;
}
.vn-ml-xs {
margin-left: $spacing-xs;
}
.vn-mr-xs {
margin-right: $spacing-xs;
}
.vn-mb-xs {
margin-bottom: $spacing-xs;
}
.vn-my-xs {
margin-top: $spacing-xs;
margin-bottom: $spacing-xs;
}
.vn-mx-xs {
margin-left: $spacing-xs;
margin-right: $spacing-xs;
}
// Small
.vn-ma-sm {
margin: $spacing-sm;
}
.vn-mt-sm {
margin-top: $spacing-sm;
}
.vn-ml-sm {
margin-left: $spacing-sm;
}
.vn-mr-sm {
margin-right: $spacing-sm;
}
.vn-mb-sm {
margin-bottom: $spacing-sm;
}
.vn-my-sm {
margin-top: $spacing-sm;
margin-bottom: $spacing-sm;
}
.vn-mx-sm {
margin-left: $spacing-sm;
margin-right: $spacing-sm;
}
// Medium
.vn-ma-md {
margin: $spacing-md;
}
.vn-mt-md {
margin-top: $spacing-md;
}
.vn-ml-md {
margin-left: $spacing-md;
}
.vn-mr-md {
margin-right: $spacing-md;
}
.vn-mb-md {
margin-bottom: $spacing-md;
}
.vn-my-md {
margin-top: $spacing-md;
margin-bottom: $spacing-md;
}
.vn-mx-md {
margin-left: $spacing-md;
margin-right: $spacing-md;
}
// Large
.vn-ma-lg {
margin: $spacing-lg;
}
.vn-mt-lg {
margin-top: $spacing-lg;
}
.vn-ml-lg {
margin-left: $spacing-lg;
}
.vn-mr-lg {
margin-right: $spacing-lg;
}
.vn-mb-lg {
margin-bottom: $spacing-lg;
}
.vn-my-lg {
margin-top: $spacing-lg;
margin-bottom: $spacing-lg;
}
.vn-mx-lg {
margin-left: $spacing-lg;
margin-right: $spacing-lg;
}
/* Extra large */
.vn-ma-xl {
margin: $spacing-xl;
}
.vn-mt-xl {
margin-top: $spacing-xl;
}
.vn-ml-xl {
margin-left: $spacing-xl;
}
.vn-mr-xl {
margin-right: $spacing-xl;
}
.vn-mb-xl {
margin-bottom: $spacing-xl;
}
.vn-my-xl {
margin-top: $spacing-xl;
margin-bottom: $spacing-xl;
}
.vn-mx-xl {
margin-left: $spacing-xl;
margin-right: $spacing-xl;
}

70
js/htk/style/text.scss Normal file
View File

@ -0,0 +1,70 @@
@import "./variables";
/* Headings */
.text-h1, h1 {
font-size: 2.3rem;
}
.text-h2, h2 {
font-size: 2.25rem;
}
.text-h3, h3 {
font-size: 2rem;
}
.text-h4, h4 {
font-size: 1.6rem;
}
.text-h5, h5 {
font-size: 1.3rem;
}
.text-h6, h6 {
font-size: 1.125rem;
}
.text-subtitle1 {
font-size: 1.06rem;
}
.text-subtitle2 {
font-size: 1rem;
}
.text-body1 {
font-size: .875rem;
}
.text-body2 {
font-size: .875rem;
}
.text-caption {
font-size: .875rem;
}
.text-overline {
font-size: .8rem;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
margin-top: 0;
margin-bottom: 4px;
}
/* Colors */
.text-primary {
color: $color-main;
}
.text-secondary {
color: $color-font-light;
}
/* Helpers */
.text-uppercase {
text-transform: uppercase;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}

20
js/htk/style/variables.scss
View File

@ -1,3 +1,23 @@
// Width
$width-xs: 400px;
$width-sm: 544px;
$width-md: 800px;
$width-lg: 1280px;
$width-xl: 1600px;
// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 32px;
$spacing-xl: 70px;
// Light theme
$color-primary: #8cc63f; $color-primary: #8cc63f;
$color-hover-cd: rgba(0, 0, 0, .05); $color-hover-cd: rgba(0, 0, 0, .05);
$color-main: #333;
$color-font-light: #666;

26
js/htk/style/width.scss Normal file
View File

@ -0,0 +1,26 @@
@import "./variables";
%margin-auto {
margin-left: auto;
margin-right: auto;
}
.vn-w-xs {
@extend %margin-auto;
max-width: $width-xs;
}
.vn-w-sm {
@extend %margin-auto;
max-width: $width-sm;
}
.vn-w-md {
@extend %margin-auto;
max-width: $width-md;
}
.vn-w-lg {
@extend %margin-auto;
max-width: $width-lg;
}
.vn-w-xl {
@extend %margin-auto;
max-width: $width-xl;
}

122
js/htk/toast.js
View File

@ -1,6 +1,6 @@
/** /**
* Class to show toast messages. * Class to show toast messages.
**/ */
module.exports = module.exports =
{ {
maxMessages: 6 maxMessages: 6
@ -13,60 +13,52 @@ module.exports =
* Shows a normal toast message. * Shows a normal toast message.
* *
* @param {String} message The message text * @param {String} message The message text
**/ */
,showMessage: function (message) ,showMessage: function(message) {
{ this._showText(message, 'message');
this._showText (message, 'message');
} }
/** /**
* Shows a warning toast message. * Shows a warning toast message.
* *
* @param {String} message The message text * @param {String} message The message text
**/ */
,showWarning: function (message) ,showWarning: function(message) {
{ this._showText(message, 'warning');
this._showText (message, 'warning');
} }
/** /**
* Shows an error toast message. * Shows an error toast message.
* *
* @param {String} message The message text * @param {String} message The message text
**/ */
,showError: function (message) ,showError: function(message) {
{ this._showText(message, 'error');
this._showText (message, 'error');
} }
,pushTop: function (top) ,pushTop: function(top) {
{ this._topHeap.push(top);
this._topHeap.push (top); this._refreshPosition();
this._refreshPosition ();
} }
,popTop: function () ,popTop: function() {
{ var top = this._topHeap.pop();
var top = this._topHeap.pop (); this._refreshPosition();
this._refreshPosition ();
return top; return top;
} }
,_refreshPosition: function () ,_refreshPosition: function() {
{
if (!this._container) if (!this._container)
return; return;
var left; var left;
var heapLen = this._topHeap.length; var heapLen = this._topHeap.length;
if (heapLen > 0) if (heapLen > 0) {
{
var top = this._topHeap[heapLen - 1]; var top = this._topHeap[heapLen - 1];
var rect = top.getBoundingClientRect (); var rect = top.getBoundingClientRect();
left = (rect.left + parseInt (rect.width / 2) - window.pageXOffset) +'px'; left = (rect.left + parseInt(rect.width / 2) - window.pageXOffset) +'px';
} } else
else
left = ''; left = '';
this._container.style.left = left; this._container.style.left = left;
@ -74,87 +66,79 @@ module.exports =
/** /**
* Hides all currently displayed toast messages. * Hides all currently displayed toast messages.
**/ */
,hide: function () ,hide: function() {
{
if (!this._container) if (!this._container)
return; return;
if (this._timeouts) if (this._timeouts)
for (var i = 0; i < this._timeouts.length; i++) for (var i = 0; i < this._timeouts.length; i++)
clearTimeout (this._timeouts[i]); clearTimeout(this._timeouts[i]);
this._timeouts = null; this._timeouts = null;
document.removeEventListener ('mousedown', this.hideHandler); document.removeEventListener('mousedown', this.hideHandler);
Vn.Node.remove (this._container); Vn.Node.remove(this._container);
this._container = null; this._container = null;
this.nodes = []; this.nodes = [];
} }
,_createContainer: function () ,_createContainer: function() {
{ if (!this._container) {
if (!this._container) var container = document.createElement('div');
{
var container = document.createElement ('div');
container.className = 'htk-toast'; container.className = 'htk-toast';
document.body.appendChild (container); document.body.appendChild(container);
this.hideHandler = this.hide.bind (this); this.hideHandler = this.hide.bind(this);
document.addEventListener ('mousedown', this.hideHandler); document.addEventListener('mousedown', this.hideHandler);
this._timeouts = []; this._timeouts = [];
this._container = container; this._container = container;
} }
this._refreshPosition (); this._refreshPosition();
} }
,_showText: function (message, className) ,_showText: function(message, className) {
{ this._createContainer();
this._createContainer ();
if (this._timeouts.length >= this.maxMessages) if (this._timeouts.length >= this.maxMessages)
this._onMessageTimeout (); this._onMessageTimeout();
var toast = document.createElement ('div'); var toast = document.createElement('div');
toast.className = className; toast.className = className;
toast.addEventListener ('mousedown', this._onMessageMouseDown); toast.addEventListener('mousedown', this._onMessageMouseDown);
var textNode = document.createTextNode (message); var textNode = document.createTextNode(message);
toast.appendChild (textNode); toast.appendChild(textNode);
this._container.appendChild (toast); this._container.appendChild(toast);
var timeoutId = setTimeout (this._onMessageTimeout.bind (this), this.timeout * 1000); var timeoutId = setTimeout(this._onMessageTimeout.bind(this), this.timeout * 1000);
this._timeouts.push (timeoutId); this._timeouts.push(timeoutId);
setTimeout (this._onShowToastTimeout.bind (this, toast), 50); setTimeout(this._onShowToastTimeout.bind(this, toast), 50);
} }
,_onShowToastTimeout: function (toast) ,_onShowToastTimeout: function(toast) {
{ Vn.Node.addClass(toast, 'show');
Vn.Node.addClass (toast, 'show');
} }
,_onMessageTimeout: function () ,_onMessageTimeout: function() {
{
if (!this._container) if (!this._container)
return; return;
var nodes = this._container.childNodes; var nodes = this._container.childNodes;
if (nodes.length > 0) if (nodes.length > 0) {
{ clearTimeout(this._timeouts.shift());
clearTimeout (this._timeouts.shift ()); Vn.Node.remove(nodes[0]);
Vn.Node.remove (nodes[0]);
} }
if (nodes.length == 0) if (nodes.length == 0)
this.hide (); this.hide();
} }
,_onMessageMouseDown: function (event) ,_onMessageMouseDown: function(event) {
{ event.stopPropagation();
event.stopPropagation ();
} }
}; };

2
js/sql/batch.js
View File

@ -4,7 +4,7 @@ var Value = require('./value');
/** /**
* A map container for many Sql.Object * A map container for many Sql.Object
**/ */
module.exports = new Class module.exports = new Class
({ ({
Extends: Object Extends: Object

Some files were not shown because too many files have changed in this diff Show More