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-25 20:04:16 +02:00
parent dc0ba66257
commit f515249329
47 changed files with 779 additions and 963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
padding: 1em; padding: 1em;
} }
.address-list .box { .address-list .box {
max-width: 30em; max-width: 420px;
} }
.address-list .form { .address-list .form {
margin: 0 auto; margin: 0 auto;

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

@ -35,7 +35,7 @@
form="user-form"/> form="user-form"/>
<htk-repeater model="addresses" form-id="address" class="htk-list"> <htk-repeater model="addresses" form-id="address" class="htk-list">
<custom> <custom>
<div class="address item" on-click="this.onSetDefaultClick($event, address.id)"> <div class="item clickable" on-click="this.onSetDefaultClick($event, address.id)">
<div class="side"> <div class="side">
<htk-radio <htk-radio
radio-group="default-address" radio-group="default-address"

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

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

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

@ -3,7 +3,7 @@
padding: 1em; padding: 1em;
} }
.conf .box { .conf .box {
max-width: 30em; max-width: 420px;
padding: 3em; padding: 3em;
} }
.pass-change { .pass-change {

14
forms/admin/connections/connections.js
View File

@ -11,24 +11,14 @@ Hedera.Connections = new Class({
if (this._timeoutId) if (this._timeoutId)
clearTimeout(this._timeoutId); clearTimeout(this._timeoutId);
this._timeoutId = setTimeout(this.onRefreshClick.bind(this), 60000); this._timeoutId = setTimeout(
() => this.$('sessions').refresh(), 60000);
} }
,deactivate: function() { ,deactivate: function() {
clearTimeout(this._timeoutId); clearTimeout(this._timeoutId);
} }
,onRefreshClick: function() {
this.$('sessions').refresh();
}
,onAccessLogClick: function(userId) {
this.hash.set({
form: 'admin/access-log'
,user: userId
});
}
,onChangeUserClick: function(userName) { ,onChangeUserClick: function(userName) {
this.gui.supplantUser(userName, this.gui.supplantUser(userName,
this._onUserSupplant.bind(this)); this._onUserSupplant.bind(this));

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

@ -2,7 +2,7 @@
padding: 1em; padding: 1em;
} }
.connections .box { .connections .box {
max-width: 25em; max-width: 420px;
margin: 0 auto; margin: 0 auto;
} }
.action-bar .connections-sum { .action-bar .connections-sum {
@ -11,25 +11,3 @@
border-radius: 0.1em; border-radius: 0.1em;
box-shadow: 0 0 0.4em rgba(255, 255, 255, .1); box-shadow: 0 0 0.4em rgba(255, 255, 255, .1);
} }
/* List */
.connections .item {
display: block;
padding: 1em;
border-bottom: 1px solid #DDD;
}
.connections .item > button {
float: right;
margin: 0;
}
.connections .item > p {
margin: .1em 0;
}
.connections .item > p.important {
font-size: 1.2em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

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

@ -6,7 +6,7 @@
<htk-bar-button <htk-bar-button
icon="refresh" icon="refresh"
tip="_Refresh" tip="_Refresh"
on-click="this.onRefreshClick()"/> on-click="$.sessions.refresh()"/>
<div class="connections-sum"> <div class="connections-sum">
<htk-text> <htk-text>
<db-calc-sum <db-calc-sum
@ -19,7 +19,7 @@
</div> </div>
<div id="form" class="connections"> <div id="form" class="connections">
<div class="box"> <div class="box">
<htk-repeater form-id="iter"> <htk-repeater form-id="iter" class="htk-list">
<db-model <db-model
property="model" property="model"
id="sessions" id="sessions"
@ -37,29 +37,29 @@
</custom> </custom>
</db-model> </db-model>
<custom> <custom>
<div class="item"> <a class="item"
<htk-button href="{{`#!form=admin/access-log&amp;user=${iter.userId}`}}"
tip="_Access log" title="_Access log">
icon="history" <div class="content">
on-click="this.onAccessLogClick(iter.userId)"/>
<htk-button
tip="_Supplant user"
icon="supervisor_account"
on-click="this.onChangeUserClick(iter.user)"/>
<p class="important"> <p class="important">
{{iter.nickname}} {{iter.nickname}}
<htk-text form="iter" column="nickname"/>
</p> </p>
<p> <p>
{{Vn.Value.format(iter.stamp, '%a, %T')}} - {{Vn.Value.format(iter.stamp, '%a, %T')}} -
{{Vn.Value.format(iter.lastUpdate, '%T')}} {{Vn.Value.format(iter.lastUpdate, '%T')}}
</p> </p>
<p> <p>
{{iter.platform}} - {{iter.platform}} - {{iter.browser}} {{iter.version}}
{{iter.browser}}
{{iter.version}}
</p> </p>
</div> </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> </htk-repeater>
</div> </div>

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

@ -1,41 +1,16 @@
.items .items {
{
padding: 1em; padding: 1em;
} }
.items .box .items .box {
{ max-width: 420px;
max-width: 25em;
margin: 0 auto; margin: 0 auto;
} }
/* Row */ /* Row */
.items .row .items .item .photo {
{
padding: 1em;
border-bottom: 1px solid #DDD;
}
.items .row > .photo
{
margin-right: 1em; margin-right: 1em;
float: left; border-radius: 50%;
border-radius: 3%; height: 80px;
height: 5.5em; width: 80px;
width: 5.5em;
} }
.items .row > p
{
margin: .1em 0;
margin-left: 5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Topbar */
.action-bar .htk-search-entry
{
margin: .8em .6em;
}

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

@ -11,7 +11,7 @@
</div> </div>
<div id="form" class="items"> <div id="form" class="items">
<div class="rows box"> <div class="rows box">
<htk-repeater form-id="iter" empty-message="_Enter a search term"> <htk-repeater form-id="iter" class="htk-list" empty-message="_Enter a search term">
<db-model property="model" id="items"> <db-model property="model" id="items">
SELECT i.id, i.longName, i.size, i.category, SELECT i.id, i.longName, i.size, i.category,
i.value5, i.value6, i.value7, i.value5, i.value6, i.value7,
@ -30,7 +30,8 @@
</sql-batch> </sql-batch>
</db-model> </db-model>
<custom> <custom>
<div class="row"> <div class="item">
<div class="side">
<htk-image <htk-image
form="iter" form="iter"
column="image" column="image"
@ -41,7 +42,9 @@
full-dir="1600x900" full-dir="1600x900"
editable="true" editable="true"
conn="conn"/> conn="conn"/>
<p class="concept"> </div>
<div class="content">
<p class="important">
{{iter.longName}} {{iter.longName}}
</p> </p>
<p class="tags"> <p class="tags">
@ -53,7 +56,7 @@
<p> <p>
{{iter.image}} {{iter.image}}
</p> </p>
<div class="clear"/> </div>
</div> </div>
</custom> </custom>
</htk-repeater> </htk-repeater>

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

@ -1,38 +1,60 @@
.cpanel .cpanel {
{
padding: 1em; padding: 1em;
} }
.cpanel .box .cpanel .box {
{ max-width: 420px;
max-width: 30em;
} }
/* Items */ /* Items */
.cpanel .item .cpanel .items > div {
{ max-width: 800px;
display: block; display: flex;
padding: 1em; flex-wrap: wrap;
border-bottom: 1px solid #DDD; justify-content: center;
gap: 12px;
margin: 0 auto;
} }
.cpanel .item:hover .cpanel .item {
{ display: flex;
flex-direction: column;
align-items: center;
margin: 0;
width: 120px;
padding: 15px;
text-align: center;
transition: background-color 250ms ease-out;
}
.cpanel .item:hover {
background-color: rgba(1, 1, 1, 0.05); background-color: rgba(1, 1, 1, 0.05);
} }
.cpanel .item > .htk-image .cpanel .item > .htk-image {
{ display: flex;
justify-content: center;
align-items: center;
margin: 0; margin: 0;
margin-right: 1em;
float: left; float: left;
max-height: 2.8em; height: 80px;
max-width: 2.8em;
} }
.cpanel .item > p .cpanel .item > .htk-image > img {
{ max-height: 60px;
max-width: 60px;
padding: 0;
}
.cpanel .item > h3 {
flex: none;
margin: .1em 0; margin: .1em 0;
font-size: .9rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.cpanel .item > p.important .cpanel .item > .secondary {
{ flex: none;
font-size: 1.2em; margin: 0;
font-size: .8rem;
color: #666;
height: 40px;
overflow: hidden;
} }

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

@ -3,8 +3,7 @@
<h1><t>ControlPanel</t></h1> <h1><t>ControlPanel</t></h1>
</div> </div>
<div id="form" class="cpanel"> <div id="form" class="cpanel">
<div class="box"> <htk-repeater form-id="iter" class="items">
<htk-repeater form-id="iter">
<db-model property="model"> <db-model property="model">
<custom> <custom>
SELECT image, name, description, link FROM link SELECT image, name, description, link FROM link
@ -12,22 +11,21 @@
</custom> </custom>
</db-model> </db-model>
<custom> <custom>
<a class="item" <a class="item box"
href="{{iter.link}}" href="{{iter.link}}"
target="_blank"> target="_blank">
<htk-image <htk-image
value="{{iter.image}}" value="{{iter.image}}"
directory="link" directory="link"
subdir="full"/> subdir="full"/>
<p class="important"> <h3>
{{iter.name}} {{iter.name}}
</p> </h3>
<p> <p class="secondary">
{{iter.description}} {{iter.description}}
</p> </p>
</a> </a>
</custom> </custom>
</htk-repeater> </htk-repeater>
</div>
</div> </div>
</vn> </vn>

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

@ -3,8 +3,8 @@
padding: 1em; padding: 1em;
} }
.photos .box { .photos .box {
max-width: 25em; max-width: 420px;
padding: 2em; padding: 3em;
} }
/* Dropzone */ /* Dropzone */

2
forms/admin/queries/style.css
View File

@ -2,7 +2,7 @@
padding: 1em; padding: 1em;
} }
.queries .box { .queries .box {
max-width: 40em; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
.queries .form { .queries .form {

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

@ -2,25 +2,13 @@
padding: 1em; padding: 1em;
} }
.users .box { .users .box {
max-width: 30em; max-width: 420px;
margin: 0 auto; margin: 0 auto;
} }
.users-box { .users-box.item > .actions {
padding: 1em; display: flex;
border-bottom: 1px solid #DDD;
} }
.users-box > button { .users-box .disabled {
float: right;
margin: 0;
}
.users-box > p {
margin: .2em 0;
}
.users-box > p.important {
font-size: 1.2em;
}
.users-box > .disabled {
float: right;
color: white; color: white;
background-color: #F66; background-color: #F66;
border-radius: .2em; border-radius: .2em;

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

@ -12,7 +12,7 @@
</div> </div>
<div id="form" class="users"> <div id="form" class="users">
<div class="box"> <div class="box">
<htk-repeater form-id="iter" renderer="rendererFunc"> <htk-repeater form-id="iter" renderer="rendererFunc" class="htk-list">
<db-model property="model"> <db-model property="model">
<custom> <custom>
SELECT u.id, u.name, u.nickname, u.active SELECT u.id, u.name, u.nickname, u.active
@ -29,28 +29,29 @@
</sql-batch> </sql-batch>
</db-model> </db-model>
<custom> <custom>
<div class="users-box"> <a class="users-box item"
<htk-button href="{{`#!form=admin/access-log&amp;user=${iter.id}`}}"
icon="history" title="_Access log">
tip="_Access log" <div class="content">
on-click="this.onAccessLogClick(iter.id)"/> <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 <htk-button
id="impersonate" id="impersonate"
icon="supervisor_account" icon="supervisor_account"
tip="_Impersonate user" tip="_Impersonate user"
on-click="this.onChangeUserClick(iter.name)"/> on-click="this.onChangeUserClick(iter.name)"/>
<span id="disabled" class="disabled">
<t>Disabled</t>
</span>
<p class="important">
<htk-text form="iter" column="nickname"/>
</p>
<p>
#<htk-text form="iter" column="id"/> -
<htk-text form="iter" column="name"/>
</p>
<div class="clear"/>
</div> </div>
</a>
</custom> </custom>
</htk-repeater> </htk-repeater>
</div> </div>

7
forms/admin/users/users.js
View File

@ -2,13 +2,6 @@
Hedera.Users = new Class({ Hedera.Users = new Class({
Extends: Hedera.Form Extends: Hedera.Form
,onAccessLogClick: function(userId) {
this.hash.set({
form: 'admin/access-log'
,user: userId
});
}
,rendererFunc: function(scope, form) { ,rendererFunc: function(scope, form) {
var isEnabled = form.get('active') var isEnabled = form.get('active')
scope.$('disabled').style.display = isEnabled ? scope.$('disabled').style.display = isEnabled ?

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

@ -1,46 +1,19 @@
.visits .visits {
{
padding: 1em; padding: 1em;
} }
.visits .box .visits .box {
{ max-width: 420px;
max-width: 25em; margin-bottom: 1em;
margin: 0 auto;
} }
.visits .form .visits .box:last-child {
{ margin-bottom: 0;
padding: 1.5em;
max-width: 20em;
} }
.visits .summary .visits .summary {
{ padding: 3em;
margin-top: 1em; box-sizing: border-box;
} }
.visits .summary p .visits .summary p {
{
padding: 1.5em;
font-size: 1.4em; font-size: 1.4em;
margin: 0;
text-align: right; text-align: right;
} }
/* List */
.visits .list
{
margin-top: 1em;
}
.visits .item
{
display: block;
padding: 1em;
border-bottom: 1px solid #DDD;
}
.visits .item > p
{
margin: .1em 0;
}
.visits .item > p.important
{
font-size: 1.2em;
}

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

@ -13,7 +13,7 @@
on-click="this.onSessionsClick()"/> on-click="this.onSessionsClick()"/>
</div> </div>
<div id="form" class="visits"> <div id="form" class="visits">
<div class="box"> <div class="summary box">
<div class="form"> <div class="form">
<div class="form-group"> <div class="form-group">
<label><t>From</t></label> <label><t>From</t></label>
@ -48,7 +48,7 @@
</p> </p>
</div> </div>
<div class="list box"> <div class="list box">
<htk-repeater form-id="iter" empty-message="_Select date interval"> <htk-repeater form-id="iter" empty-message="_Select date interval" class="htk-list">
<db-model property="model" id="visits"> <db-model property="model" id="visits">
<custom> <custom>
SELECT browser, SELECT browser,
@ -73,21 +73,19 @@
</db-model> </db-model>
<custom> <custom>
<div class="item"> <div class="item">
<div class="content">
<p class="important"> <p class="important">
<htk-text form="iter" column="browser"/> {{iter.browser}} {{iter.minVersion}} - {{iter.maxVersion}}
<htk-text form="iter" column="minVersion"/> -
<htk-text form="iter" column="maxVersion"/>
</p> </p>
<p> <p>
<htk-text form="iter" column="visits"/> {{iter.visits}} <t>visits</t>,
<t>visits</t>, {{iter.newVisits}} <t>news</t>
<htk-text form="iter" column="newVisits"/>
<t>news</t>
</p> </p>
<p> <p>
<htk-text form="iter" column="lastVisit" format="_%a, %e %b %Y at %T"/> {{Vn.Value.format(iter.lastVisit, _('%a, %e %b %Y at %T'))}}
</p> </p>
</div> </div>
</div>
</custom> </custom>
</htk-repeater> </htk-repeater>
</div> </div>

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

@ -4,6 +4,6 @@
} }
.packages .box .packages .box
{ {
max-width: 40em; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }

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

@ -4,6 +4,6 @@
} }
.provinces .box .provinces .box
{ {
max-width: 40em; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }

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

@ -5,7 +5,7 @@
} }
.contact .box .contact .box
{ {
max-width: 30em; max-width: 420px;
padding: 2em; padding: 2em;
} }
.contact .form .contact .form

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

@ -5,7 +5,7 @@
} }
.why .box .why .box
{ {
max-width: 40em; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
.why ul .why ul

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

@ -2,7 +2,7 @@
padding: 1em; padding: 1em;
} }
.basket .box { .basket .box {
max-width: 30em; max-width: 420px;
margin: 0 auto; margin: 0 auto;
padding: 30px; padding: 30px;
} }

4
forms/ecomerce/catalog/catalog.js
View File

@ -42,14 +42,14 @@ Hedera.Catalog = new Class({
,setView: function(view) { ,setView: function(view) {
if (view === Hedera.Catalog.View.GRID) { if (view === Hedera.Catalog.View.GRID) {
this.$('view-button').setProperties({ this.$('view-button').setProperties({
icon: 'view-list', icon: 'view_list',
tip: _('List view') tip: _('List view')
}); });
this.view = Hedera.Catalog.View.GRID; this.view = Hedera.Catalog.View.GRID;
var className = 'grid-view'; var className = 'grid-view';
} else { } else {
this.$('view-button').setProperties({ this.$('view-button').setProperties({
icon: 'view-grid', icon: 'grid_on',
tip: _('Grid view') tip: _('Grid view')
}); });
this.view = Hedera.Catalog.View.LIST; this.view = Hedera.Catalog.View.LIST;

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

@ -258,7 +258,7 @@
.list-view .list-view
{ {
max-width: 30em; max-width: 420px;
margin: 0 auto; margin: 0 auto;
padding: 1em; padding: 1em;
} }

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

@ -99,14 +99,16 @@
<htk-bar-button <htk-bar-button
id="view-button" id="view-button"
tip="_Switch view" tip="_Switch view"
icon="format_list_bulleted" icon="view_list"
on-click="onSwitchViewClick"/> on-click="this.onSwitchViewClick()"/>
<htk-bar-button <htk-bar-button
icon="shopping_cart_checkout" icon="shopping_cart_checkout"
tip="_ShoppingBasket" tip="_ShoppingBasket"
on-click="onBasketClick"/> on-click="this.onBasketClick()"/>
<button class="menu" on-click="onShowMenuClick"> <button
<img src="image/icon/dark/menu.svg" alt="_Menu"/> class="menu"
on-click="onShowMenuClick">
<htk-icon name="menu"/>
</button> </button>
</div> </div>
<div id="form" class="catalog"> <div id="form" class="catalog">

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

@ -1,13 +1,13 @@
.checkout { .checkout {
padding: 1em; padding: 1em;
max-width: 40em; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
.checkout .bar { .checkout .bar {
margin-bottom: 1em; margin-bottom: 1em;
} }
.checkout .form { .checkout .form {
max-width: 40em; max-width: 600px;
padding: 4em 2em; padding: 4em 2em;
} }
@ -19,11 +19,9 @@
font-size: 1.2em; font-size: 1.2em;
} }
.answers .htk-select { .answers .htk-select {
max-width: 10em; max-width: 15em;
display: block;
margin: 0 auto; margin: 0 auto;
font-size: 1.6em; font-size: 1.4em;
height: 1.8em;
} }
.answers p { .answers p {
margin: 0.3em 0; margin: 0.3em 0;

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

@ -1,7 +1,7 @@
.confirm .confirm
{ {
padding: 1em; padding: 1em;
max-width: 30em; max-width: 420px;
margin: 0 auto; margin: 0 auto;
color: #555; color: #555;
} }

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

@ -1,14 +1,7 @@
.invoices .invoices {
{
padding: 1em; padding: 1em;
} }
.invoices .box .invoices .box {
{ max-width: 600px;
max-width: 40em;
}
.invoices .box > .header,
.invoices .htk-grid > thead > tr
{
background-color: #3F51B6;
} }

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

@ -2,7 +2,7 @@
padding: 1em; padding: 1em;
} }
.ticket .box { .ticket .box {
max-width: 30em; max-width: 420px;
margin: 0 auto; margin: 0 auto;
padding: 2em; padding: 2em;
color: #333; color: #333;

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

@ -1,41 +1,17 @@
.news .news {
{
padding: 1em; padding: 1em;
} }
.news .box .news .box {
{ max-width: 420px;
max-width: 35em;
margin: 0 auto; margin: 0 auto;
} }
/* Items */ /* Items */
.news .item .news .item .photo {
{
padding: 1em;
border-bottom: 1px solid #DDD;
}
.news .item > p
{
margin: .1em 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.news .item > p.important
{
font-size: 1.2em;
}
.news .item > .photo
{
float: left; float: left;
margin-right: 1em; margin-right: 1em;
height: 4.2em; height: 80px;
width: 4.2em; width: 80px;
border-radius: .3em; border-radius: 50%;
}
.news .item > button
{
float: right;
margin: 0;
} }

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

@ -10,7 +10,7 @@
</div> </div>
<div id="form" class="news"> <div id="form" class="news">
<div class="box"> <div class="box">
<htk-repeater form-id="iter"> <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> <custom>
SELECT n.id, u.nickname, n.priority, n.image, n.title SELECT n.id, u.nickname, n.priority, n.image, n.title
@ -20,15 +20,10 @@
</custom> </custom>
</db-model> </db-model>
<custom> <custom>
<div class="item"> <a class="item"
<htk-button href="{{`#!form=news/new&amp;new=${iter.id}`}}"
icon="edit" title="_EditNew">
tip="_EditNew" <div class="side">
on-click="this.onEditClick(iter.id)"/>
<htk-button
tip="_Remove"
icon="delete"
on-click="this.onDeleteClick($.iter)"/>
<htk-image <htk-image
form="iter" form="iter"
column="image" column="image"
@ -38,12 +33,23 @@
full-dir="full" full-dir="full"
editable="true" editable="true"
conn="conn"/> conn="conn"/>
</div>
<div class="content">
<p class="important"> <p class="important">
{{iter.title}} {{iter.title}}
</p> </p>
<p>{{iter.nickname}}</p> <p>{{iter.nickname}}</p>
<p>{{iter.priority}}</p> <p>{{iter.priority}}</p>
</div> </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> </htk-repeater>
</div> </div>

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

@ -1,43 +1,19 @@
.items .items {
{
padding: 1em; padding: 1em;
} }
.items .box .items .box {
{ max-width: 420px;
max-width: 30em; padding: 3em;
padding: 2em;
}
.items .form
{
max-width: 25em;
margin: auto;
}
.items .form-group
{
padding: 0.4em;
}
.items form label
{
display: block;
margin-bottom: 0.5em;
}
.items input[type=text],
.items select
{
margin: 0;
width: 100%;
} }
/* Footer */ /* Footer */
.items .footer .items .footer {
{
text-align: center; text-align: center;
margin-top: 1.5em; margin-top: 1.5em;
} }
.items .footer > button .items .footer > button {
{
margin: 0 .2em; margin: 0 .2em;
} }

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

@ -1,30 +1,8 @@
.shelves .shelves {
{
padding: 1em; padding: 1em;
} }
.shelves .box .shelves .box {
{ max-width: 420px;
max-width: 30em; padding: 3em;
padding: 2em;
}
.shelves .form
{
max-width: 25em;
margin: auto;
}
.shelves .form-group
{
padding: 0.4em;
}
.shelves form label
{
display: block;
margin-bottom: 0.5em;
}
.shelves input[type=text],
.shelves select
{
margin: 0;
width: 100%;
} }

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

@ -95,16 +95,22 @@
<htk-entry id="reportTitle"/> <htk-entry id="reportTitle"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label><t>Show packing</t></label> <label>
<htk-check id="showPacking"/> <htk-check id="showPacking"/>
<t>Show packing</t>
</label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label><t>Stack different items</t></label> <label>
<htk-check id="stack"/> <htk-check id="stack"/>
<t>Stack different items</t>
</label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label><t>Use ids instead of names</t></label> <label>
<htk-check id="useIds"/> <htk-check id="useIds"/>
<t>Use ids instead of names</t>
</label>
</div> </div>
</div> </div>
</div> </div>

4
js/hedera/gui.js
View File

@ -494,11 +494,11 @@ module.exports = new Class({
,_onSupplantName: function(resultSet) { ,_onSupplantName: function(resultSet) {
var userName = resultSet.fetchValue(); var userName = resultSet.fetchValue();
Vn.Node.setText(this.$('supplanted'), userName); Vn.Node.setText(this.$('supplanted'), userName);
Vn.Node.show(this.$('supplant')); this.$('supplant').classList.toggle('show', true);
} }
,onSupplantExitClick: function() { ,onSupplantExitClick: function() {
Vn.Node.hide(this.$('supplant')); this.$('supplant').classList.toggle('show', false);
this._conn.supplantEnd(); this._conn.supplantEnd();
sessionStorage.removeItem('supplantUser', sessionStorage.removeItem('supplantUser',
sessionStorage.getItem('supplantUser')); sessionStorage.getItem('supplantUser'));

37
js/hedera/gui.scss
View File

@ -34,24 +34,26 @@
padding: 0 1em; padding: 0 1em;
margin: 0; margin: 0;
height: 100%; height: 100%;
}
.menu-button:hover { &:hover {
background-color: rgba(0, 0, 0, .2); background-color: rgba(0, 0, 0, .2);
} }
.menu-button img { img {
vertical-align: middle; vertical-align: middle;
height: 1.8em; height: 1.8em;
} }
}
.title { .title {
float: left; float: left;
}
.title h1 { h1 {
font-weight: normal; font-weight: normal;
font-size: 1.4em; font-size: 1.4em;
padding: .8em .6em; padding: .8em .6em;
padding-right: .3em; padding-right: .3em;
margin: 0; margin: 0;
} }
}
.navbar > .htk-spinner { .navbar > .htk-spinner {
float: left; float: left;
margin: 1.05em .8em; margin: 1.05em .8em;
@ -100,12 +102,13 @@
visibility: hidden; visibility: hidden;
background-color: rgba(1, 1, 1, .7); background-color: rgba(1, 1, 1, .7);
opacity: 0; opacity: 0;
}
& > .background.show { &.show {
visibility: visible; visibility: visible;
transition: opacity 200ms ease-out; transition: opacity 200ms ease-out;
opacity: 1; opacity: 1;
} }
}
/* Left panel */ /* Left panel */
@ -157,14 +160,22 @@
display: block; display: block;
margin: 0; margin: 0;
text-align: left; text-align: left;
border-radius: 0;
&:hover { &:hover {
background-color: #1a1a1a; background-color: #1a1a1a;
color: white; color: white;
} }
& > .htk-icon {
display: block;
}
} }
&.supplant { &.supplant {
display: none; display: none;
&.show {
display: flex;
}
} }
} }
@ -179,10 +190,11 @@
line-height: 2em; line-height: 2em;
border-radius: .1em; border-radius: .1em;
text-align: center; text-align: center;
}
.test-link:hover { &:hover {
background-color: #4f61c5; background-color: #4f61c5;
} }
}
.dev-info { .dev-info {
display: none; display: none;
padding: .3em .5em; padding: .3em .5em;
@ -191,13 +203,14 @@
font-size: .9em; font-size: .9em;
margin: .5em; margin: .5em;
border-radius: .1em; border-radius: .1em;
}
.dev-info > p { & > p {
margin: .2em 0; margin: .2em 0;
} }
.dev-info > .mode { & > .mode {
color: #BBF; color: #BBF;
} }
}
/* Menu */ /* Menu */

4
js/hedera/gui.xml
View File

@ -16,13 +16,13 @@
<div class="user-info"> <div class="user-info">
<div> <div>
<span id="user-name"/> <span id="user-name"/>
<button class="logout" on-click="onLogoutClick"> <button class="logout" on-click="this.onLogoutClick()">
<htk-icon name="logout" alt="_Exit"/> <htk-icon name="logout" alt="_Exit"/>
</button> </button>
</div> </div>
<div id="supplant" class="supplant"> <div id="supplant" class="supplant">
<span id="supplanted"/> <span id="supplanted"/>
<button class="logout" on-click="onSupplantExitClick"> <button class="logout" on-click="this.onSupplantExitClick()">
<htk-icon name="logout" alt="_Exit"/> <htk-icon name="logout" alt="_Exit"/>
</button> </button>
</div> </div>

118
js/hedera/style.scss
View File

@ -148,13 +148,15 @@ input[type=text]:disabled {
input[type=checkbox], input[type=checkbox],
input[type=radio] { input[type=radio] {
cursor: pointer; cursor: pointer;
padding: .3em; margin: 0;
margin-right: .6em; margin-right: 10px;
} }
select { select {
@extend %clickable;
background-color: white; background-color: white;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
line-height: 1em;
} }
option { option {
padding: .4em; padding: .4em;
@ -174,74 +176,23 @@ input[type=button],
input[type=reset], input[type=reset],
button, button,
.button { .button {
@extend %clickable;
border: none; border: none;
background-color: transparent; background-color: transparent;
padding: .5em; padding: 10px;
cursor: pointer; border-radius: 22px;
border-radius: 0.1em;
margin: -0.5em; margin: -0.5em;
font-weight: bold; font-weight: bold;
&:disabled {
background-color: rgba(0, 0, 0, .5);
}
} }
.button { .button {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
} }
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
button:hover,
.button:hover {
background-color: rgba(1, 1, 1, 0.1);
}
/* Flat button */
button.flat,
.button.flat {
border: none;
border-radius: 0.1em;
box-shadow: 0 0.2em 0.2em #DDD;
background-color: #AD4;
color: black;
}
button.flat:hover,
.button.flat:hover {
background-color: #9C3;
cursor: pointer;
}
button.flat:disabled,
.button.flat:disabled {
color: gray;
}
/* Thin button */
input[type=submit].thin,
input[type=button].thin,
input[type=reset].thin,
button.thin,
.button.thin {
color: #008D77;
border-radius: 1.4em;
padding: .5em 1.4em;
background-color: rgba(255, 255, 255, .1);
font-weight: bold;
}
input[type=submit].thin:disabled,
input[type=button].thin:disabled,
input[type=reset].thin:disabled,
button.thin:disabled
.button.thin:disabled {
color: gray;
}
input[type=submit].thin:hover,
input[type=button].thin:hover,
input[type=reset].thin:hover,
button.thin:hover
.button.thin:hover {
background-color: rgba(0, 0, 0, .1);
}
/* Image */ /* Image */
@ -260,23 +211,25 @@ img.editable {
.box { .box {
@extend %box; @extend %box;
margin: 0 auto; margin: 0 auto;
}
.box .header { .header {
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
margin: 0; margin: 0;
background-color: #009688; background-color: #009688;
color: white; color: white;
}
.box .header > h1 { & > h1 {
color: white; color: white;
text-align: left; text-align: left;
font-size: 1.6em; font-size: 1.6em;
line-height: 2em; line-height: 2em;
font-weight: normal; font-weight: normal;
display: inline; display: inline;
} }
.box .body { }
.body {
padding: 2em; padding: 2em;
}
} }
/* Form */ /* Form */
@ -289,24 +242,25 @@ img.editable {
} }
.form-group { .form-group {
margin-bottom: 1.2em; margin-bottom: 1.2em;
}
.form-group:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.form-group > label { & > label {
display: block; display: block;
margin: 0; margin: 0;
margin-bottom: .2em; margin-bottom: .2em;
color: #222; color: #222;
} }
.form-group > input[type=text], & > input[type=text],
.form-group > input[type=password], & > input[type=password],
.form-group > input[type=file], & > input[type=file],
.form-group > input[type=number], & > input[type=number],
.form-group > select, & > select,
.form-group > textarea { & > textarea {
margin: 0; margin: 0;
width: 100%; width: 100%;
}
} }
/* Form */ /* Form */
@ -366,13 +320,13 @@ img.icon {
.htk-social-bar { .htk-social-bar {
text-align: center; text-align: center;
}
.htk-social-bar a { a {
display: inline-block; display: inline-block;
margin: 0 .1em; margin: 0 .1em;
} }
.htk-social-bar img { img {
height: 1.8em; height: 1.8em;
width: 1.8em; width: 1.8em;
}
} }

20
js/htk/column/button.js
View File

@ -40,9 +40,9 @@ module.exports = new Class({
}, },
render: function(tr) { render: function(tr) {
var td = this.parent(tr); const td = this.parent(tr);
var button; let button;
if (this.href == null) { if (this.href == null) {
button = this.createElement('button'); button = this.createElement('button');
@ -54,18 +54,16 @@ module.exports = new Class({
button.target = this.target; button.target = this.target;
} }
if (this.tip)
button.title = _(this.tip);
button.disabled = this.disabled; button.disabled = this.disabled;
td.appendChild(button); td.appendChild(button);
var span = this.createElement('span'); const icon = new Htk.Icon({
span.className = 'material-symbols-rounded icon'; name: this._icon
span.innerText = this._icon; });
button.appendChild(span); button.appendChild(icon.node);
if (this.tip) {
button.title = _(this.tip);
span.title = _(this.tip);
}
return td; return td;
}, },

9
js/htk/field/button.js
View File

@ -2,8 +2,7 @@
module.exports = new Class({ module.exports = new Class({
Extends: Htk.Field Extends: Htk.Field
,Tag: 'htk-button' ,Tag: 'htk-button'
,Properties: ,Properties: {
{
image: { image: {
type: String type: String
,set: function(x) { ,set: function(x) {
@ -19,11 +18,7 @@ module.exports = new Class({
tip: { tip: {
type: String type: String
,set: function(x) { ,set: function(x) {
if (x) { this.node.title = x ? _(x) : '';
this.node.title = _(x);
this.iconNode.title = _(x);
}
this.renderContent(); this.renderContent();
} }
,get: function() { ,get: function() {

75
js/htk/field/date-chooser.js
View File

@ -1,5 +1,5 @@
var Calendar = require ('./calendar'); var Calendar = require('./calendar');
module.exports = new Class module.exports = new Class
({ ({
@ -10,80 +10,65 @@ module.exports = new Class
,calendar: null ,calendar: null
,ignoreCalendarChange: false ,ignoreCalendarChange: false
,render: function () ,render: function() {
{ const node = this.createRoot('button');
var node = this.createRoot ('div'); node.className = 'htk-date-chooser input';
node.className = 'htk-date-chooser'; node.addEventListener('click', this._onClick.bind(this));
this.label = this.createElement ('span'); this.label = this.createElement('span');
this.node.appendChild (this.label); node.appendChild(this.label);
this.setEditable (this._editable); const dropDown = new Htk.Icon({
name: 'expand_more'
});
node.appendChild(dropDown.node);
this.setEditable(this._editable);
} }
,putValue: function (value) ,putValue: function(value) {
{
var dateString; var dateString;
if (value instanceof Date) if (value instanceof Date)
dateString = Vn.Date.strftime (value, this.format); dateString = Vn.Date.strftime(value, this.format);
else else
dateString = ''; dateString = '';
Vn.Node.setText (this.label, dateString); Vn.Node.setText(this.label, dateString);
} }
,setEditable: function (editable) ,setEditable: function(editable) {
{ if (this.calendar) {
Vn.Node.remove (this.label); this.calendar.disconnectByInstance(this);
if (this.calendar)
{
this.node.removeChild (this.button);
this.calendar.disconnectByInstance (this);
this.calendar = null; this.calendar = null;
} }
if (editable) {
this.calendar = new Calendar();
this.calendar.on('changed', this._onCalendarChange.bind(this));
if (editable && !this.calendar) this.popup = new Htk.Popup();
{
this.button = this.createElement ('button');
this.button.className = 'input';
this.button.title = _('ChangeDate');
this.button.addEventListener ('click', this._onClick.bind (this));
this.button.appendChild (this.label);
this.node.appendChild (this.button);
this.calendar = new Calendar ();
this.calendar.on ('changed', this._onCalendarChange.bind (this));
this.popup = new Htk.Popup ();
this.popup.child = this.calendar; this.popup.child = this.calendar;
} }
else if (!editable)
this.node.appendChild (this.label);
} }
,_onCalendarChange: function (calendar) ,_onCalendarChange: function(calendar) {
{
if (this.ignoreCalendarChange) if (this.ignoreCalendarChange)
return; return;
this.popup.hide (); this.popup.hide();
var newDate = calendar.value; var newDate = calendar.value;
this.putValue (newDate); this.putValue(newDate);
this.valueChanged (newDate); this.valueChanged(newDate);
} }
,_onClick: function (event) ,_onClick: function() {
{
this.ignoreCalendarChange = true; this.ignoreCalendarChange = true;
this.calendar.value = this._value; this.calendar.value = this._value;
this.calendar.goToSelectedMonth (); this.calendar.goToSelectedMonth();
this.ignoreCalendarChange = false; this.ignoreCalendarChange = false;
this.popup.show (this.button); this.popup.show(this.node);
} }
}); });

31
js/htk/field/search-entry.js
View File

@ -1,32 +1,29 @@
module.exports = new Class module.exports = new Class({
({
Extends: Htk.Field Extends: Htk.Field
,Tag: 'htk-search-entry' ,Tag: 'htk-search-entry'
,render: function () ,render: function() {
{ var div = this.createRoot('div');
var div = this.createRoot ('div');
div.className = 'htk-search-entry'; div.className = 'htk-search-entry';
var icon = new Htk.Icon ({ var icon = new Htk.Icon({
icon: 'search', name: 'search',
alt: _('Search') alt: _('Search')
}); });
div.appendChild (icon.node); div.appendChild(icon.node);
var input = this.createElement ('input'); var input = this.createElement('input');
input.className = 'entry'; input.className = 'entry';
input.type = 'text'; input.type = 'text';
input.placeholder = _('Search'); input.placeholder = _('Search');
input.addEventListener ('change', this._onChange.bind (this)); input.addEventListener('change', this._onChange.bind(this));
div.appendChild (input); div.appendChild(input);
this._input = input; this._input = input;
} }
,_onChange: function (event) ,_onChange: function() {
{
var newValue; var newValue;
if (this._input.value === '') if (this._input.value === '')
@ -34,19 +31,17 @@ module.exports = new Class
else else
newValue = this._input.value; newValue = this._input.value;
this.valueChanged (newValue); this.valueChanged(newValue);
} }
,putValue: function (value) ,putValue: function(value) {
{
if (!value) if (!value)
this._input.value = ''; this._input.value = '';
else else
this._input.value = value; this._input.value = value;
} }
,setEditable: function (editable) ,setEditable: function(editable) {
{
this.node.readOnly = !editable; this.node.readOnly = !editable;
} }
}); });

181
js/htk/field/select.js
View File

@ -1,8 +1,7 @@
var ColumnText = require ('../column/text'); var ColumnText = require('../column/text');
module.exports = new Class module.exports = new Class({
({
Extends: Htk.Field Extends: Htk.Field
,Implements: Db.Iterator ,Implements: Db.Iterator
,Tag: 'htk-combo' ,Tag: 'htk-combo'
@ -10,49 +9,44 @@ module.exports = new Class
{ {
/** /**
* The model associated to this form. * The model associated to this form.
**/ */
model: model:
{ {
type: Db.Model type: Db.Model
,set: function (x) ,set: function(x) {
{ this.link({_model: x}, {'status-changed-after': this._onModelChange});
this.link ({_model: x}, {'status-changed-after': this._onModelChange}); this._onModelChange();
this._onModelChange ();
} }
,get: function () ,get: function() {
{
return this._model; return this._model;
} }
}, },
/** /**
* 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
,set: function (x) ,set: function(x) {
{
if (!this._model || this._model.numRows <= x || x < -1) if (!this._model || this._model.numRows <= x || x < -1)
x = -1; x = -1;
if (x == this._row) if (x == this._row)
return; return;
this._row = x; this._row = x;
this.iterChanged (); this.iterChanged();
} }
,get: function () ,get: function() {
{
return this._row; return this._row;
} }
}, },
/** /**
* The number of rows in the form. * The number of rows in the form.
**/ */
numRows: numRows:
{ {
type: Number type: Number
,get: function () ,get: function() {
{
if (this._model) if (this._model)
return this._model.numRows; return this._model.numRows;
@ -61,43 +55,38 @@ module.exports = new Class
}, },
/** /**
* Checks if the form data is ready. * Checks if the form data is ready.
**/ */
ready: ready:
{ {
type: Boolean type: Boolean
,get: function () ,get: function() {
{
return this._model && this._model.ready; return this._model && this._model.ready;
} }
}, },
/** /**
* Checks if the form data is ready. * Checks if the form data is ready.
**/ */
placeholder: placeholder:
{ {
type: String type: String
,set: function (x) ,set: function(x) {
{
this._placeholder = x; this._placeholder = x;
this._refreshShowText (x); this._refreshShowText(x);
} }
,get: function () ,get: function() {
{
return this._placeholder; return this._placeholder;
} }
}, },
/** /**
* Wether to allow null values. * Wether to allow null values.
**/ */
notNull: notNull:
{ {
type: Boolean type: Boolean
,set: function (x) ,set: function(x) {
{
this._notNull = x; this._notNull = x;
} }
,get: function () ,get: function() {
{
return this._notNull; return this._notNull;
} }
} }
@ -112,75 +101,75 @@ module.exports = new Class
,_notNull: true ,_notNull: true
,_webkitRefresh: false ,_webkitRefresh: false
,render: function () ,render: function() {
{ const button = this.createRoot('button');
var button = this.createRoot ('button');
button.type = 'button'; button.type = 'button';
button.className = 'htk-select input'; button.className = 'htk-select input';
button.addEventListener ('mousedown', this._onButtonMouseDown.bind (this)); button.addEventListener('mousedown', this._onButtonMouseDown.bind(this));
this.label = this.createElement('span');
button.appendChild(this.label);
const dropDown = new Htk.Icon({
name: 'expand_more'
});
button.appendChild(dropDown.node);
} }
,on: function (id, callback, instance) ,on: function(id, callback, instance) {
{ switch (id) {
switch (id)
{
case 'click': case 'click':
case 'mousedown': case 'mousedown':
case 'focusout': case 'focusout':
this.node.addEventListener (id, this.node.addEventListener(id,
callback.bind (instance, this)); callback.bind(instance, this));
break; break;
default: default:
this.parent (id, callback, instance); this.parent(id, callback, instance);
} }
} }
,_setRow: function (row) ,_setRow: function(row) {
{
this._row = row; this._row = row;
this._refreshShowText (); this._refreshShowText();
this.iterChanged (); this.iterChanged();
} }
,_onButtonMouseDown: function (e) ,_onButtonMouseDown: function(e) {
{ if (this._popup) {
if (this._popup) this._popup.hide();
{
this._popup.hide ();
return; return;
} }
var model = this._model; var model = this._model;
var menu = this.createElement ('div'); var menu = this.createElement('div');
menu.className = 'htk-select-menu'; menu.className = 'htk-select-menu';
var grid = new Htk.Grid ({showHeader: false}); var grid = new Htk.Grid({showHeader: false});
menu.appendChild (grid.node); menu.appendChild(grid.node);
var gridNode = grid.node; var gridNode = grid.node;
gridNode.addEventListener ('click', this._onGridClicked.bind (this, grid)); gridNode.addEventListener('click', this._onGridClicked.bind(this, grid));
var column = new ColumnText ({columnIndex: this.showColumnIndex}); var column = new ColumnText({columnIndex: this.showColumnIndex});
grid.appendColumn (column); grid.appendColumn(column);
grid.model = model; grid.model = model;
var popup = this._popup = new Htk.Popup ({childNode: menu}); var popup = this._popup = new Htk.Popup({childNode: menu});
popup.on ('closed', this._onPopupClose.bind (this)); popup.on('closed', this._onPopupClose.bind(this));
popup.show (this.node); popup.show(this.node);
this.signalEmit ('menu-show'); this.signalEmit('menu-show');
e.stopPropagation (); e.stopPropagation();
} }
,_onGridClicked: function (grid, e) ,_onGridClicked: function(grid, e) {
{
var target = e.target; var target = e.target;
var parentNode = target.parentNode; var parentNode = target.parentNode;
while (parentNode !== grid.tbody) while (parentNode !== grid.tbody) {
{
target = parentNode; target = parentNode;
parentNode = parentNode.parentNode; parentNode = parentNode.parentNode;
} }
@ -189,29 +178,27 @@ module.exports = new Class
var row = target.rowIndex - 1; var row = target.rowIndex - 1;
if (row >= 0) if (row >= 0)
value = this._model.getByIndex (row, this.valueColumnIndex); value = this._model.getByIndex(row, this.valueColumnIndex);
else else
value = null; value = null;
this._setRow (row); this._setRow(row);
this.valueChanged (value); this.valueChanged(value);
this._popup.hide (); this._popup.hide();
e.stopPropagation (); e.stopPropagation();
} }
,_onPopupClose: function () ,_onPopupClose: function() {
{
this._popup = null; this._popup = null;
this.signalEmit ('menu-hide'); this.signalEmit('menu-hide');
} }
,_refreshShowText: function () ,_refreshShowText: function() {
{
var model = this._model; var model = this._model;
if (this._row !== -1) if (this._row !== -1)
var showText = model.getByIndex (this._row, this.showColumnIndex); var showText = model.getByIndex(this._row, this.showColumnIndex);
else if (model && model.status === Db.Model.Status.LOADING) else if (model && model.status === Db.Model.Status.LOADING)
var showText = _('Loading...'); var showText = _('Loading...');
else if (this._placeholder) else if (this._placeholder)
@ -219,45 +206,39 @@ module.exports = new Class
else else
var showText = ''; var showText = '';
Vn.Node.setText (this.node, showText); Vn.Node.setText(this.label, showText);
} }
,_onModelChange: function () ,_onModelChange: function() {
{
var model = this._model; var model = this._model;
this.signalEmit ('status-changed'); this.signalEmit('status-changed');
if (this._popup) if (this._popup)
this._popup.reset (); this._popup.reset();
if (model && model.ready) if (model && model.ready) {
{ this._selectOption();
this._selectOption (); this.signalEmit('ready');
this.signalEmit ('ready'); } else
} this._setRow(-1);
else
this._setRow (-1);
} }
,setEditable: function (editable) ,setEditable: function(editable) {
{
this.node.disabled = !editable; this.node.disabled = !editable;
} }
,_selectOption: function () ,_selectOption: function() {
{
var row; var row;
if (this._model && this._model.ready) if (this._model && this._model.ready)
row = this._model.searchByIndex (this.valueColumnIndex, this._value); row = this._model.searchByIndex(this.valueColumnIndex, this._value);
else else
row = -1; row = -1;
this._setRow (row); this._setRow(row);
} }
,putValue: function (value) ,putValue: function(value) {
{ this._selectOption();
this._selectOption ();
} }
}); });

263
js/htk/style/main.scss
View File

@ -2,6 +2,22 @@
@import "variables"; @import "variables";
@import "classes"; @import "classes";
/* Icon */
.htk-icon {}
/* Button */
.htk-button {
display: flex;
align-items: center;
gap: 8px;
& > .htk-icon {
display: block;
}
}
/* Grid */ /* Grid */
.htk-grid { .htk-grid {
@ -10,7 +26,7 @@
& > thead > tr, & > thead > tr,
& > tfoot > tr { & > tfoot > tr {
background-color: #8cc63f; background-color: $color-primary;
vertical-align: middle; vertical-align: middle;
height: 3em; height: 3em;
} }
@ -98,18 +114,25 @@ th.cell-radio {
text-align: center; text-align: center;
} }
td.cell-button { td.cell-button {
max-width: 1em; max-width: 20px;
text-align: center; text-align: center;
} }
td.cell-button > button, td.cell-button > button,
td.cell-button > a { td.cell-button > a {
display: inline-block; @extend %clickable;
display: block;
height: 44px;
width: 44px;
margin: 0 auto; margin: 0 auto;
padding: .5em; border-radius: 50%;
padding: 10px;
border: none; border: none;
background-color: transparent; background-color: transparent;
border-radius: .1em;
box-sizing: border-box; box-sizing: border-box;
& > .htk-icon {
display: block;
}
} }
td.cell-button > button:hover, td.cell-button > button:hover,
td.cell-button > a:hover { td.cell-button > a:hover {
@ -134,52 +157,64 @@ td.cell-image .htk-image {
/* Select */ /* Select */
.htk-select,
.htk-date-chooser {
display: flex;
align-items: center;
font-weight: normal;
& > span {
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
& > .htk-icon {
flex: none;
color: #666;
}
}
.htk-select { .htk-select {
width: 100%; width: 100%;
height: 2em;
text-align: left;
} }
.htk-select-menu { .htk-select-menu {
height: 100%; height: 100%;
max-height: 80em; max-height: 80em;
overflow: auto; overflow: auto;
min-width: 14em; min-width: 14em;
}
.htk-select-menu tbody > tr { tbody > tr {
border-top: none; border-top: none;
height: 2.5em; height: 2.5em;
} }
.htk-select-menu td.message { td.message {
padding: 1em; padding: 1em;
} }
.htk-select-menu tr:hover { tr:hover {
background-color: rgba(1, 1, 1, 0.1); background-color: rgba(1, 1, 1, 0.1);
cursor: pointer; cursor: pointer;
} }
.htk-select-menu td { td {
max-width: 11em; max-width: 11em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
} }
/* Icon */
.htk-icon {}
/* List */ /* List */
.htk-list { .htk-list {
.item { a.item,
.item.clickable {
@extend %clickable; @extend %clickable;
}
.item {
padding: 20px; padding: 20px;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover {
background-color: rgba(1, 1, 1, 0.05);
}
& > .side { & > .side {
flex: none; flex: none;
} }
@ -198,6 +233,7 @@ td.cell-image .htk-image {
& > .actions { & > .actions {
flex: none; flex: none;
display: none; display: none;
align-items: center;
& > .htk-button { & > .htk-button {
margin: 0; margin: 0;
@ -212,28 +248,13 @@ td.cell-image .htk-image {
} }
} }
.item:hover > .actions { .item:hover > .actions {
display: block; display: flex;
} }
.item:last-child { .item:last-child {
border-bottom: none; border-bottom: none;
} }
} }
/* Button */
.htk-button {
display: flex;
align-items: center;
border-radius: 22px;
font-weight: bold;
gap: 8px;
padding: 0 10px;
& > .htk-icon {
display: block;
}
}
/* Calendar */ /* Calendar */
.htk-calendar { .htk-calendar {
@ -306,21 +327,25 @@ td.cell-image .htk-image {
margin: 0 auto; margin: 0 auto;
color: #555; color: #555;
} }
div.disabled { div {
&.disabled {
color: #bbb; color: #bbb;
} }
div.today { &.today {
font-weight: bold; font-weight: bold;
color: black; color: black;
} }
div.selected { &.selected {
color: white; color: white;
background-color: #8cc63f; background-color: $color-primary;
} }
div.enabled:hover { &.enabled {
cursor: pointer; @extend %clickable;
&:hover {
background-color: rgba(140, 198, 63, 0.8); background-color: rgba(140, 198, 63, 0.8);
color: white; }
}
} }
} }
@ -329,43 +354,46 @@ td.cell-image .htk-image {
.htk-image { .htk-image {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
}
.htk-image.clickable:hover { &.clickable:hover {
cursor: pointer; cursor: pointer;
opacity: 0.85; opacity: 0.85;
} }
.htk-image > img { & > img {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.htk-image > button { & > button {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
margin: 0; margin: 0;
padding: .15em; padding: .15em;
display: none; display: none;
} }
.htk-image:hover > button { &:hover > button {
display: block; display: block;
} }
.htk-image > button > img { & > button > img {
display: block; display: block;
height: 1.2em; height: 1.2em;
height: 1.2em; height: 1.2em;
}
} }
/* Full image */ /* Full image */
.htk-full-image img { .htk-full-image {
img {
display: block; display: block;
cursor: pointer; cursor: pointer;
} }
.htk-full-image .htk-spinner { .htk-spinner {
background-color: #FFF; background-color: #FFF;
margin: .6em; margin: .6em;
display: block; display: block;
}
} }
/* Image editor */ /* Image editor */
@ -374,8 +402,8 @@ td.cell-image .htk-image {
width: 18em; width: 18em;
margin: 0 auto; margin: 0 auto;
padding: 1.5em; padding: 1.5em;
}
.htk-image-editor h2 { h2 {
color: white; color: white;
background-color: #009688; background-color: #009688;
text-align: left; text-align: left;
@ -384,21 +412,23 @@ td.cell-image .htk-image {
font-weight: normal; font-weight: normal;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
margin: 0; margin: 0;
} }
.htk-image-editor iframe { iframe {
display: none; display: none;
} }
.htk-image-editor .footer { .footer {
margin-top: 2em; margin-top: 2em;
}
.htk-image-editor .footer > .htk-spinner { & > .htk-spinner {
padding-right: 1.2em; padding-right: 1.2em;
height: 1.3em; height: 1.3em;
width: 1.3em; width: 1.3em;
} }
.htk-image-editor .footer > .htk-spinner, & > .htk-spinner,
.htk-image-editor .footer > input { & > input {
float: right; float: right;
}
}
} }
/* Toast */ /* Toast */
@ -415,8 +445,8 @@ td.cell-image .htk-image {
overflow: auto; overflow: auto;
max-height: 40em; max-height: 40em;
overflow: visible; overflow: visible;
}
.htk-toast > div { & > div {
margin: .5em 0; margin: .5em 0;
padding: .5em 2%; padding: .5em 2%;
border-radius: 0.1em; border-radius: 0.1em;
@ -430,23 +460,25 @@ td.cell-image .htk-image {
transition-property: opacity, transform; transition-property: opacity, transform;
transition-duration: 200ms; transition-duration: 200ms;
transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.htk-toast > div.show { &.show {
opacity: 1; opacity: 1;
transform: translateZ(0) translateY(0em); transform: translateZ(0) translateY(0em);
-webkit-transform: translateZ(0) translateY(0em); -webkit-transform: translateZ(0) translateY(0em);
} }
.htk-toast > .message { }
& > .message {
background-color: #BBFFBB; background-color: #BBFFBB;
color: #363; color: #363;
} }
.htk-toast > .warning { & > .warning {
background-color: #FFE0B2; background-color: #FFE0B2;
color: #C30; color: #C30;
} }
.htk-toast > .error { & > .error {
background-color: #FFCDD2; background-color: #FFCDD2;
color: #A00; color: #A00;
}
} }
/* Popup */ /* Popup */
@ -471,15 +503,16 @@ td.cell-image .htk-image {
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6); box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
box-sizing: content-box; box-sizing: content-box;
}
.htk-popup.modal { &.modal {
position: absolute; position: absolute;
font-size: 1.2em; font-size: 1.2em;
top: 50%; top: 50%;
left: 50%; left: 50%;
} }
.htk-popup > * { & > * {
border-radius: 0.1em; border-radius: 0.1em;
}
} }
/* Dialog */ /* Dialog */
@ -489,23 +522,24 @@ td.cell-image .htk-image {
max-width: 20em; max-width: 20em;
font-weight: normal; font-weight: normal;
color: #555; color: #555;
}
.htk-dialog p { p {
margin: 0; margin: 0;
} }
.htk-dialog img { img {
float: left; float: left;
height: 3em; height: 3em;
margin-top: 0; margin-top: 0;
margin-right: 1em; margin-right: 1em;
} }
.htk-dialog p { p {
padding: 0; padding: 0;
} }
.htk-dialog .button-bar > button { .button-bar > button {
float: right; float: right;
margin-left: 1em; margin-left: 1em;
margin-top: .5em; margin-top: .5em;
}
} }
/* Assistant */ /* Assistant */
@ -595,30 +629,36 @@ td.cell-image .htk-image {
/* Search entry */ /* Search entry */
.htk-search-entry { .htk-search-entry {
display: flex;
align-items: center;
gap: 10px;
background-color: white; background-color: white;
height: 2.8em; height: 40px;
border-radius: 1.4em; border-radius: 20px;
padding: 0 1.4em; padding: 0 15px;
} overflow: hidden;
.htk-search-entry > * {
& > * {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.htk-search-entry > img { & > .htk-icon {
display: block;
margin: 0; margin: 0;
height: 1.5em; color: gray;
margin-right: .6em; }
} & > .entry {
.htk-search-entry > .entry {
margin: 0; margin: 0;
border: none; border: none;
width: 8em; width: 100px;
box-shadow: none; box-shadow: none;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} height: inherit;
.htk-search-entry > .entry:focus { }
& > .entry:focus {
background-color: initial; background-color: initial;
}
} }
/* Spinner */ /* Spinner */
@ -628,23 +668,24 @@ td.cell-image .htk-image {
height: 1.8em; height: 1.8em;
position: relative; position: relative;
display: inline-block; display: inline-block;
}
.htk-spinner > .spinner { & > .spinner {
left: 0; left: 0;
position: absolute; position: absolute;
width: inherit; width: inherit;
height: inherit; height: inherit;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
border: .3em solid transparent; border: 2px solid transparent;
border-top-color: #666; border-top-color: #666;
border-left-color: #666; border-left-color: #666;
animation: spinner 1s linear infinite; animation: spinner 1s linear infinite;
-webkit-animation: spinner 1s linear infinite; -webkit-animation: spinner 1s linear infinite;
} }
.htk-spinner.dark > .spinner { &.dark > .spinner {
border-top-color: white; border-top-color: white;
border-left-color: white; border-left-color: white;
}
} }
@keyframes spinner { @keyframes spinner {
to {transform: rotate(360deg);} to {transform: rotate(360deg);}

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

@ -1,3 +1,3 @@
$color-primary: #8cc63f; $color-primary: #8cc63f;
$color-hover-cd: rgba(255, 255, 255, .1); $color-hover-cd: rgba(0, 0, 0, .05);