forked from verdnatura/hedera-web
Checkpoint
This commit is contained in:
parent
dc0ba66257
commit
f515249329
|
|
@ -3,7 +3,7 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.address-list .box {
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
}
|
||||
.address-list .form {
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
form="user-form"/>
|
||||
<htk-repeater model="addresses" form-id="address" class="htk-list">
|
||||
<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">
|
||||
<htk-radio
|
||||
radio-group="default-address"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.address .box {
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
padding: 3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.conf .box {
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
padding: 3em;
|
||||
}
|
||||
.pass-change {
|
||||
|
|
|
|||
|
|
@ -11,23 +11,13 @@ Hedera.Connections = new Class({
|
|||
if (this._timeoutId)
|
||||
clearTimeout(this._timeoutId);
|
||||
|
||||
this._timeoutId = setTimeout(this.onRefreshClick.bind(this), 60000);
|
||||
this._timeoutId = setTimeout(
|
||||
() => this.$('sessions').refresh(), 60000);
|
||||
}
|
||||
|
||||
,deactivate: function() {
|
||||
clearTimeout(this._timeoutId);
|
||||
}
|
||||
|
||||
,onRefreshClick: function() {
|
||||
this.$('sessions').refresh();
|
||||
}
|
||||
|
||||
,onAccessLogClick: function(userId) {
|
||||
this.hash.set({
|
||||
form: 'admin/access-log'
|
||||
,user: userId
|
||||
});
|
||||
}
|
||||
|
||||
,onChangeUserClick: function(userName) {
|
||||
this.gui.supplantUser(userName,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.connections .box {
|
||||
max-width: 25em;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.action-bar .connections-sum {
|
||||
|
|
@ -11,25 +11,3 @@
|
|||
border-radius: 0.1em;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<htk-bar-button
|
||||
icon="refresh"
|
||||
tip="_Refresh"
|
||||
on-click="this.onRefreshClick()"/>
|
||||
on-click="$.sessions.refresh()"/>
|
||||
<div class="connections-sum">
|
||||
<htk-text>
|
||||
<db-calc-sum
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
<div id="form" class="connections">
|
||||
<div class="box">
|
||||
<htk-repeater form-id="iter">
|
||||
<htk-repeater form-id="iter" class="htk-list">
|
||||
<db-model
|
||||
property="model"
|
||||
id="sessions"
|
||||
|
|
@ -37,29 +37,29 @@
|
|||
</custom>
|
||||
</db-model>
|
||||
<custom>
|
||||
<div class="item">
|
||||
<htk-button
|
||||
tip="_Access log"
|
||||
icon="history"
|
||||
on-click="this.onAccessLogClick(iter.userId)"/>
|
||||
<htk-button
|
||||
tip="_Supplant user"
|
||||
icon="supervisor_account"
|
||||
on-click="this.onChangeUserClick(iter.user)"/>
|
||||
<p class="important">
|
||||
{{iter.nickname}}
|
||||
<htk-text form="iter" column="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>
|
||||
<a class="item"
|
||||
href="{{`#!form=admin/access-log&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>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,16 @@
|
|||
.items
|
||||
{
|
||||
.items {
|
||||
padding: 1em;
|
||||
}
|
||||
.items .box
|
||||
{
|
||||
max-width: 25em;
|
||||
.items .box {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Row */
|
||||
|
||||
.items .row
|
||||
{
|
||||
padding: 1em;
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
.items .row > .photo
|
||||
{
|
||||
.items .item .photo {
|
||||
margin-right: 1em;
|
||||
float: left;
|
||||
border-radius: 3%;
|
||||
height: 5.5em;
|
||||
width: 5.5em;
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
.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,7 +11,7 @@
|
|||
</div>
|
||||
<div id="form" class="items">
|
||||
<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">
|
||||
SELECT i.id, i.longName, i.size, i.category,
|
||||
i.value5, i.value6, i.value7,
|
||||
|
|
@ -30,30 +30,33 @@
|
|||
</sql-batch>
|
||||
</db-model>
|
||||
<custom>
|
||||
<div class="row">
|
||||
<htk-image
|
||||
form="iter"
|
||||
column="image"
|
||||
stamp-column="updated"
|
||||
class="photo"
|
||||
directory="catalog"
|
||||
subdir="200x200"
|
||||
full-dir="1600x900"
|
||||
editable="true"
|
||||
conn="conn"/>
|
||||
<p class="concept">
|
||||
{{iter.longName}}
|
||||
</p>
|
||||
<p class="tags">
|
||||
{{iter.value5}} {{iter.value6}} {{iter.value7}}
|
||||
</p>
|
||||
<p>
|
||||
{{iter.id}}
|
||||
</p>
|
||||
<p>
|
||||
{{iter.image}}
|
||||
</p>
|
||||
<div class="clear"/>
|
||||
<div class="item">
|
||||
<div class="side">
|
||||
<htk-image
|
||||
form="iter"
|
||||
column="image"
|
||||
stamp-column="updated"
|
||||
class="photo"
|
||||
directory="catalog"
|
||||
subdir="200x200"
|
||||
full-dir="1600x900"
|
||||
editable="true"
|
||||
conn="conn"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<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>
|
||||
</custom>
|
||||
</htk-repeater>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,60 @@
|
|||
|
||||
.cpanel
|
||||
{
|
||||
.cpanel {
|
||||
padding: 1em;
|
||||
}
|
||||
.cpanel .box
|
||||
{
|
||||
max-width: 30em;
|
||||
.cpanel .box {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
/* Items */
|
||||
|
||||
.cpanel .item
|
||||
{
|
||||
display: block;
|
||||
padding: 1em;
|
||||
border-bottom: 1px solid #DDD;
|
||||
.cpanel .items > div {
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
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);
|
||||
}
|
||||
.cpanel .item > .htk-image
|
||||
{
|
||||
.cpanel .item > .htk-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin-right: 1em;
|
||||
float: left;
|
||||
max-height: 2.8em;
|
||||
max-width: 2.8em;
|
||||
height: 80px;
|
||||
}
|
||||
.cpanel .item > p
|
||||
{
|
||||
.cpanel .item > .htk-image > img {
|
||||
max-height: 60px;
|
||||
max-width: 60px;
|
||||
padding: 0;
|
||||
}
|
||||
.cpanel .item > h3 {
|
||||
flex: none;
|
||||
margin: .1em 0;
|
||||
font-size: .9rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cpanel .item > p.important
|
||||
{
|
||||
font-size: 1.2em;
|
||||
.cpanel .item > .secondary {
|
||||
flex: none;
|
||||
margin: 0;
|
||||
font-size: .8rem;
|
||||
color: #666;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,31 +3,29 @@
|
|||
<h1><t>ControlPanel</t></h1>
|
||||
</div>
|
||||
<div id="form" class="cpanel">
|
||||
<div class="box">
|
||||
<htk-repeater form-id="iter">
|
||||
<db-model property="model">
|
||||
<custom>
|
||||
SELECT image, name, description, link FROM link
|
||||
ORDER BY name
|
||||
</custom>
|
||||
</db-model>
|
||||
<htk-repeater form-id="iter" class="items">
|
||||
<db-model property="model">
|
||||
<custom>
|
||||
<a class="item"
|
||||
href="{{iter.link}}"
|
||||
target="_blank">
|
||||
<htk-image
|
||||
value="{{iter.image}}"
|
||||
directory="link"
|
||||
subdir="full"/>
|
||||
<p class="important">
|
||||
{{iter.name}}
|
||||
</p>
|
||||
<p>
|
||||
{{iter.description}}
|
||||
</p>
|
||||
</a>
|
||||
SELECT image, name, description, link FROM link
|
||||
ORDER BY name
|
||||
</custom>
|
||||
</htk-repeater>
|
||||
</div>
|
||||
</db-model>
|
||||
<custom>
|
||||
<a class="item box"
|
||||
href="{{iter.link}}"
|
||||
target="_blank">
|
||||
<htk-image
|
||||
value="{{iter.image}}"
|
||||
directory="link"
|
||||
subdir="full"/>
|
||||
<h3>
|
||||
{{iter.name}}
|
||||
</h3>
|
||||
<p class="secondary">
|
||||
{{iter.description}}
|
||||
</p>
|
||||
</a>
|
||||
</custom>
|
||||
</htk-repeater>
|
||||
</div>
|
||||
</vn>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.photos .box {
|
||||
max-width: 25em;
|
||||
padding: 2em;
|
||||
max-width: 420px;
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
/* Dropzone */
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.queries .box {
|
||||
max-width: 40em;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.queries .form {
|
||||
|
|
|
|||
|
|
@ -2,25 +2,13 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.users .box {
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.users-box {
|
||||
padding: 1em;
|
||||
border-bottom: 1px solid #DDD;
|
||||
.users-box.item > .actions {
|
||||
display: flex;
|
||||
}
|
||||
.users-box > button {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.users-box > p {
|
||||
margin: .2em 0;
|
||||
}
|
||||
.users-box > p.important {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.users-box > .disabled {
|
||||
float: right;
|
||||
.users-box .disabled {
|
||||
color: white;
|
||||
background-color: #F66;
|
||||
border-radius: .2em;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
<div id="form" class="users">
|
||||
<div class="box">
|
||||
<htk-repeater form-id="iter" renderer="rendererFunc">
|
||||
<htk-repeater form-id="iter" renderer="rendererFunc" class="htk-list">
|
||||
<db-model property="model">
|
||||
<custom>
|
||||
SELECT u.id, u.name, u.nickname, u.active
|
||||
|
|
@ -29,28 +29,29 @@
|
|||
</sql-batch>
|
||||
</db-model>
|
||||
<custom>
|
||||
<div class="users-box">
|
||||
<htk-button
|
||||
icon="history"
|
||||
tip="_Access log"
|
||||
on-click="this.onAccessLogClick(iter.id)"/>
|
||||
<htk-button
|
||||
id="impersonate"
|
||||
icon="supervisor_account"
|
||||
tip="_Impersonate user"
|
||||
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>
|
||||
<a class="users-box item"
|
||||
href="{{`#!form=admin/access-log&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>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,6 @@
|
|||
Hedera.Users = new Class({
|
||||
Extends: Hedera.Form
|
||||
|
||||
,onAccessLogClick: function(userId) {
|
||||
this.hash.set({
|
||||
form: 'admin/access-log'
|
||||
,user: userId
|
||||
});
|
||||
}
|
||||
|
||||
,rendererFunc: function(scope, form) {
|
||||
var isEnabled = form.get('active')
|
||||
scope.$('disabled').style.display = isEnabled ?
|
||||
|
|
|
|||
|
|
@ -1,46 +1,19 @@
|
|||
.visits
|
||||
{
|
||||
.visits {
|
||||
padding: 1em;
|
||||
}
|
||||
.visits .box
|
||||
{
|
||||
max-width: 25em;
|
||||
margin: 0 auto;
|
||||
.visits .box {
|
||||
max-width: 420px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.visits .form
|
||||
{
|
||||
padding: 1.5em;
|
||||
max-width: 20em;
|
||||
.visits .box:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.visits .summary
|
||||
{
|
||||
margin-top: 1em;
|
||||
.visits .summary {
|
||||
padding: 3em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.visits .summary p
|
||||
{
|
||||
padding: 1.5em;
|
||||
.visits .summary p {
|
||||
font-size: 1.4em;
|
||||
margin: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
on-click="this.onSessionsClick()"/>
|
||||
</div>
|
||||
<div id="form" class="visits">
|
||||
<div class="box">
|
||||
<div class="summary box">
|
||||
<div class="form">
|
||||
<div class="form-group">
|
||||
<label><t>From</t></label>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<custom>
|
||||
SELECT browser,
|
||||
|
|
@ -73,20 +73,18 @@
|
|||
</db-model>
|
||||
<custom>
|
||||
<div class="item">
|
||||
<p class="important">
|
||||
<htk-text form="iter" column="browser"/>
|
||||
<htk-text form="iter" column="minVersion"/> -
|
||||
<htk-text form="iter" column="maxVersion"/>
|
||||
</p>
|
||||
<p>
|
||||
<htk-text form="iter" column="visits"/>
|
||||
<t>visits</t>,
|
||||
<htk-text form="iter" column="newVisits"/>
|
||||
<t>news</t>
|
||||
</p>
|
||||
<p>
|
||||
<htk-text form="iter" column="lastVisit" format="_%a, %e %b %Y at %T"/>
|
||||
</p>
|
||||
<div class="content">
|
||||
<p class="important">
|
||||
{{iter.browser}} {{iter.minVersion}} - {{iter.maxVersion}}
|
||||
</p>
|
||||
<p>
|
||||
{{iter.visits}} <t>visits</t>,
|
||||
{{iter.newVisits}} <t>news</t>
|
||||
</p>
|
||||
<p>
|
||||
{{Vn.Value.format(iter.lastVisit, _('%a, %e %b %Y at %T'))}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</custom>
|
||||
</htk-repeater>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
}
|
||||
.packages .box
|
||||
{
|
||||
max-width: 40em;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
}
|
||||
.provinces .box
|
||||
{
|
||||
max-width: 40em;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
.contact .box
|
||||
{
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
padding: 2em;
|
||||
}
|
||||
.contact .form
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
.why .box
|
||||
{
|
||||
max-width: 40em;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.why ul
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.basket .box {
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,14 +42,14 @@ Hedera.Catalog = new Class({
|
|||
,setView: function(view) {
|
||||
if (view === Hedera.Catalog.View.GRID) {
|
||||
this.$('view-button').setProperties({
|
||||
icon: 'view-list',
|
||||
icon: 'view_list',
|
||||
tip: _('List view')
|
||||
});
|
||||
this.view = Hedera.Catalog.View.GRID;
|
||||
var className = 'grid-view';
|
||||
} else {
|
||||
this.$('view-button').setProperties({
|
||||
icon: 'view-grid',
|
||||
icon: 'grid_on',
|
||||
tip: _('Grid view')
|
||||
});
|
||||
this.view = Hedera.Catalog.View.LIST;
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@
|
|||
|
||||
.list-view
|
||||
{
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,14 +99,16 @@
|
|||
<htk-bar-button
|
||||
id="view-button"
|
||||
tip="_Switch view"
|
||||
icon="format_list_bulleted"
|
||||
on-click="onSwitchViewClick"/>
|
||||
icon="view_list"
|
||||
on-click="this.onSwitchViewClick()"/>
|
||||
<htk-bar-button
|
||||
icon="shopping_cart_checkout"
|
||||
tip="_ShoppingBasket"
|
||||
on-click="onBasketClick"/>
|
||||
<button class="menu" on-click="onShowMenuClick">
|
||||
<img src="image/icon/dark/menu.svg" alt="_Menu"/>
|
||||
on-click="this.onBasketClick()"/>
|
||||
<button
|
||||
class="menu"
|
||||
on-click="onShowMenuClick">
|
||||
<htk-icon name="menu"/>
|
||||
</button>
|
||||
</div>
|
||||
<div id="form" class="catalog">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.checkout {
|
||||
padding: 1em;
|
||||
max-width: 40em;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.checkout .bar {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.checkout .form {
|
||||
max-width: 40em;
|
||||
max-width: 600px;
|
||||
padding: 4em 2em;
|
||||
}
|
||||
|
||||
|
|
@ -19,11 +19,9 @@
|
|||
font-size: 1.2em;
|
||||
}
|
||||
.answers .htk-select {
|
||||
max-width: 10em;
|
||||
display: block;
|
||||
max-width: 15em;
|
||||
margin: 0 auto;
|
||||
font-size: 1.6em;
|
||||
height: 1.8em;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.answers p {
|
||||
margin: 0.3em 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.confirm
|
||||
{
|
||||
padding: 1em;
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
color: #555;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
.invoices
|
||||
{
|
||||
.invoices {
|
||||
padding: 1em;
|
||||
}
|
||||
.invoices .box
|
||||
{
|
||||
max-width: 40em;
|
||||
}
|
||||
.invoices .box > .header,
|
||||
.invoices .htk-grid > thead > tr
|
||||
{
|
||||
background-color: #3F51B6;
|
||||
.invoices .box {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
padding: 1em;
|
||||
}
|
||||
.ticket .box {
|
||||
max-width: 30em;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 2em;
|
||||
color: #333;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,17 @@
|
|||
.news
|
||||
{
|
||||
.news {
|
||||
padding: 1em;
|
||||
}
|
||||
.news .box
|
||||
{
|
||||
max-width: 35em;
|
||||
.news .box {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Items */
|
||||
|
||||
.news .item
|
||||
{
|
||||
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
|
||||
{
|
||||
.news .item .photo {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
height: 4.2em;
|
||||
width: 4.2em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
.news .item > button
|
||||
{
|
||||
float: right;
|
||||
margin: 0;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
<div id="form" class="news">
|
||||
<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">
|
||||
<custom>
|
||||
SELECT n.id, u.nickname, n.priority, n.image, n.title
|
||||
|
|
@ -20,30 +20,36 @@
|
|||
</custom>
|
||||
</db-model>
|
||||
<custom>
|
||||
<div class="item">
|
||||
<htk-button
|
||||
icon="edit"
|
||||
tip="_EditNew"
|
||||
on-click="this.onEditClick(iter.id)"/>
|
||||
<htk-button
|
||||
tip="_Remove"
|
||||
icon="delete"
|
||||
on-click="this.onDeleteClick($.iter)"/>
|
||||
<htk-image
|
||||
form="iter"
|
||||
column="image"
|
||||
class="photo"
|
||||
directory="news"
|
||||
subdir="200x200"
|
||||
full-dir="full"
|
||||
editable="true"
|
||||
conn="conn"/>
|
||||
<p class="important">
|
||||
{{iter.title}}
|
||||
</p>
|
||||
<p>{{iter.nickname}}</p>
|
||||
<p>{{iter.priority}}</p>
|
||||
</div>
|
||||
<a class="item"
|
||||
href="{{`#!form=news/new&new=${iter.id}`}}"
|
||||
title="_EditNew">
|
||||
<div class="side">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,19 @@
|
|||
|
||||
.items
|
||||
{
|
||||
.items {
|
||||
padding: 1em;
|
||||
}
|
||||
.items .box
|
||||
{
|
||||
max-width: 30em;
|
||||
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%;
|
||||
.items .box {
|
||||
max-width: 420px;
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.items .footer
|
||||
{
|
||||
.items .footer {
|
||||
text-align: center;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.items .footer > button
|
||||
{
|
||||
.items .footer > button {
|
||||
margin: 0 .2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,8 @@
|
|||
|
||||
.shelves
|
||||
{
|
||||
.shelves {
|
||||
padding: 1em;
|
||||
}
|
||||
.shelves .box
|
||||
{
|
||||
max-width: 30em;
|
||||
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%;
|
||||
.shelves .box {
|
||||
max-width: 420px;
|
||||
padding: 3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,16 +95,22 @@
|
|||
<htk-entry id="reportTitle"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><t>Show packing</t></label>
|
||||
<htk-check id="showPacking"/>
|
||||
<label>
|
||||
<htk-check id="showPacking"/>
|
||||
<t>Show packing</t>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><t>Stack different items</t></label>
|
||||
<htk-check id="stack"/>
|
||||
<label>
|
||||
<htk-check id="stack"/>
|
||||
<t>Stack different items</t>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><t>Use ids instead of names</t></label>
|
||||
<htk-check id="useIds"/>
|
||||
<label>
|
||||
<htk-check id="useIds"/>
|
||||
<t>Use ids instead of names</t>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -494,11 +494,11 @@ module.exports = new Class({
|
|||
,_onSupplantName: function(resultSet) {
|
||||
var userName = resultSet.fetchValue();
|
||||
Vn.Node.setText(this.$('supplanted'), userName);
|
||||
Vn.Node.show(this.$('supplant'));
|
||||
this.$('supplant').classList.toggle('show', true);
|
||||
}
|
||||
|
||||
,onSupplantExitClick: function() {
|
||||
Vn.Node.hide(this.$('supplant'));
|
||||
this.$('supplant').classList.toggle('show', false);
|
||||
this._conn.supplantEnd();
|
||||
sessionStorage.removeItem('supplantUser',
|
||||
sessionStorage.getItem('supplantUser'));
|
||||
|
|
|
|||
|
|
@ -34,23 +34,25 @@
|
|||
padding: 0 1em;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.menu-button:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
.menu-button img {
|
||||
vertical-align: middle;
|
||||
height: 1.8em;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
height: 1.8em;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
float: left;
|
||||
}
|
||||
.title h1 {
|
||||
font-weight: normal;
|
||||
font-size: 1.4em;
|
||||
padding: .8em .6em;
|
||||
padding-right: .3em;
|
||||
margin: 0;
|
||||
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
font-size: 1.4em;
|
||||
padding: .8em .6em;
|
||||
padding-right: .3em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.navbar > .htk-spinner {
|
||||
float: left;
|
||||
|
|
@ -100,11 +102,12 @@
|
|||
visibility: hidden;
|
||||
background-color: rgba(1, 1, 1, .7);
|
||||
opacity: 0;
|
||||
}
|
||||
& > .background.show {
|
||||
visibility: visible;
|
||||
transition: opacity 200ms ease-out;
|
||||
opacity: 1;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
transition: opacity 200ms ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Left panel */
|
||||
|
|
@ -157,14 +160,22 @@
|
|||
display: block;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
& > .htk-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.supplant {
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -179,9 +190,10 @@
|
|||
line-height: 2em;
|
||||
border-radius: .1em;
|
||||
text-align: center;
|
||||
}
|
||||
.test-link:hover {
|
||||
background-color: #4f61c5;
|
||||
|
||||
&:hover {
|
||||
background-color: #4f61c5;
|
||||
}
|
||||
}
|
||||
.dev-info {
|
||||
display: none;
|
||||
|
|
@ -191,12 +203,13 @@
|
|||
font-size: .9em;
|
||||
margin: .5em;
|
||||
border-radius: .1em;
|
||||
}
|
||||
.dev-info > p {
|
||||
margin: .2em 0;
|
||||
}
|
||||
.dev-info > .mode {
|
||||
color: #BBF;
|
||||
|
||||
& > p {
|
||||
margin: .2em 0;
|
||||
}
|
||||
& > .mode {
|
||||
color: #BBF;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@
|
|||
<div class="user-info">
|
||||
<div>
|
||||
<span id="user-name"/>
|
||||
<button class="logout" on-click="onLogoutClick">
|
||||
<button class="logout" on-click="this.onLogoutClick()">
|
||||
<htk-icon name="logout" alt="_Exit"/>
|
||||
</button>
|
||||
</div>
|
||||
<div id="supplant" class="supplant">
|
||||
<span id="supplanted"/>
|
||||
<button class="logout" on-click="onSupplantExitClick">
|
||||
<button class="logout" on-click="this.onSupplantExitClick()">
|
||||
<htk-icon name="logout" alt="_Exit"/>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -148,13 +148,15 @@ input[type=text]:disabled {
|
|||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
cursor: pointer;
|
||||
padding: .3em;
|
||||
margin-right: .6em;
|
||||
margin: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
select {
|
||||
@extend %clickable;
|
||||
background-color: white;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
line-height: 1em;
|
||||
}
|
||||
option {
|
||||
padding: .4em;
|
||||
|
|
@ -174,74 +176,23 @@ input[type=button],
|
|||
input[type=reset],
|
||||
button,
|
||||
.button {
|
||||
@extend %clickable;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: .5em;
|
||||
cursor: pointer;
|
||||
border-radius: 0.1em;
|
||||
padding: 10px;
|
||||
border-radius: 22px;
|
||||
margin: -0.5em;
|
||||
font-weight: bold;
|
||||
|
||||
&:disabled {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
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 */
|
||||
|
||||
|
|
@ -260,23 +211,25 @@ img.editable {
|
|||
.box {
|
||||
@extend %box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.box .header {
|
||||
padding: 0.6em 0.8em;
|
||||
margin: 0;
|
||||
background-color: #009688;
|
||||
color: white;
|
||||
}
|
||||
.box .header > h1 {
|
||||
color: white;
|
||||
text-align: left;
|
||||
font-size: 1.6em;
|
||||
line-height: 2em;
|
||||
font-weight: normal;
|
||||
display: inline;
|
||||
}
|
||||
.box .body {
|
||||
padding: 2em;
|
||||
|
||||
.header {
|
||||
padding: 0.6em 0.8em;
|
||||
margin: 0;
|
||||
background-color: #009688;
|
||||
color: white;
|
||||
|
||||
& > h1 {
|
||||
color: white;
|
||||
text-align: left;
|
||||
font-size: 1.6em;
|
||||
line-height: 2em;
|
||||
font-weight: normal;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.body {
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form */
|
||||
|
|
@ -289,24 +242,25 @@ img.editable {
|
|||
}
|
||||
.form-group {
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-group > label {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: .2em;
|
||||
color: #222;
|
||||
}
|
||||
.form-group > input[type=text],
|
||||
.form-group > input[type=password],
|
||||
.form-group > input[type=file],
|
||||
.form-group > input[type=number],
|
||||
.form-group > select,
|
||||
.form-group > textarea {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& > label {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: .2em;
|
||||
color: #222;
|
||||
}
|
||||
& > input[type=text],
|
||||
& > input[type=password],
|
||||
& > input[type=file],
|
||||
& > input[type=number],
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form */
|
||||
|
|
@ -366,13 +320,13 @@ img.icon {
|
|||
|
||||
.htk-social-bar {
|
||||
text-align: center;
|
||||
}
|
||||
.htk-social-bar a {
|
||||
display: inline-block;
|
||||
margin: 0 .1em;
|
||||
}
|
||||
.htk-social-bar img {
|
||||
height: 1.8em;
|
||||
width: 1.8em;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0 .1em;
|
||||
}
|
||||
img {
|
||||
height: 1.8em;
|
||||
width: 1.8em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@ module.exports = new Class({
|
|||
},
|
||||
|
||||
render: function(tr) {
|
||||
var td = this.parent(tr);
|
||||
const td = this.parent(tr);
|
||||
|
||||
var button;
|
||||
let button;
|
||||
|
||||
if (this.href == null) {
|
||||
button = this.createElement('button');
|
||||
|
|
@ -54,18 +54,16 @@ module.exports = new Class({
|
|||
button.target = this.target;
|
||||
}
|
||||
|
||||
if (this.tip)
|
||||
button.title = _(this.tip);
|
||||
|
||||
button.disabled = this.disabled;
|
||||
td.appendChild(button);
|
||||
|
||||
var span = this.createElement('span');
|
||||
span.className = 'material-symbols-rounded icon';
|
||||
span.innerText = this._icon;
|
||||
button.appendChild(span);
|
||||
|
||||
if (this.tip) {
|
||||
button.title = _(this.tip);
|
||||
span.title = _(this.tip);
|
||||
}
|
||||
const icon = new Htk.Icon({
|
||||
name: this._icon
|
||||
});
|
||||
button.appendChild(icon.node);
|
||||
|
||||
return td;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
module.exports = new Class({
|
||||
Extends: Htk.Field
|
||||
,Tag: 'htk-button'
|
||||
,Properties:
|
||||
{
|
||||
,Properties: {
|
||||
image: {
|
||||
type: String
|
||||
,set: function(x) {
|
||||
|
|
@ -19,11 +18,7 @@ module.exports = new Class({
|
|||
tip: {
|
||||
type: String
|
||||
,set: function(x) {
|
||||
if (x) {
|
||||
this.node.title = _(x);
|
||||
this.iconNode.title = _(x);
|
||||
}
|
||||
|
||||
this.node.title = x ? _(x) : '';
|
||||
this.renderContent();
|
||||
}
|
||||
,get: function() {
|
||||
|
|
@ -32,7 +27,7 @@ module.exports = new Class({
|
|||
},
|
||||
showText: {
|
||||
type: Boolean
|
||||
,set: function(x) {
|
||||
,set: function(x) {
|
||||
this._showText = x;
|
||||
this.renderContent();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
var Calendar = require ('./calendar');
|
||||
var Calendar = require('./calendar');
|
||||
|
||||
module.exports = new Class
|
||||
({
|
||||
|
|
@ -10,80 +10,65 @@ module.exports = new Class
|
|||
,calendar: null
|
||||
,ignoreCalendarChange: false
|
||||
|
||||
,render: function ()
|
||||
{
|
||||
var node = this.createRoot ('div');
|
||||
node.className = 'htk-date-chooser';
|
||||
|
||||
this.label = this.createElement ('span');
|
||||
this.node.appendChild (this.label);
|
||||
,render: function() {
|
||||
const node = this.createRoot('button');
|
||||
node.className = 'htk-date-chooser input';
|
||||
node.addEventListener('click', this._onClick.bind(this));
|
||||
|
||||
this.setEditable (this._editable);
|
||||
this.label = this.createElement('span');
|
||||
node.appendChild(this.label);
|
||||
|
||||
const dropDown = new Htk.Icon({
|
||||
name: 'expand_more'
|
||||
});
|
||||
node.appendChild(dropDown.node);
|
||||
|
||||
this.setEditable(this._editable);
|
||||
}
|
||||
|
||||
,putValue: function (value)
|
||||
{
|
||||
,putValue: function(value) {
|
||||
var dateString;
|
||||
|
||||
if (value instanceof Date)
|
||||
dateString = Vn.Date.strftime (value, this.format);
|
||||
dateString = Vn.Date.strftime(value, this.format);
|
||||
else
|
||||
dateString = '';
|
||||
|
||||
Vn.Node.setText (this.label, dateString);
|
||||
Vn.Node.setText(this.label, dateString);
|
||||
}
|
||||
|
||||
,setEditable: function (editable)
|
||||
{
|
||||
Vn.Node.remove (this.label);
|
||||
|
||||
if (this.calendar)
|
||||
{
|
||||
this.node.removeChild (this.button);
|
||||
|
||||
this.calendar.disconnectByInstance (this);
|
||||
,setEditable: function(editable) {
|
||||
if (this.calendar) {
|
||||
this.calendar.disconnectByInstance(this);
|
||||
this.calendar = null;
|
||||
}
|
||||
|
||||
if (editable && !this.calendar)
|
||||
{
|
||||
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));
|
||||
if (editable) {
|
||||
this.calendar = new Calendar();
|
||||
this.calendar.on('changed', this._onCalendarChange.bind(this));
|
||||
|
||||
this.popup = new Htk.Popup ();
|
||||
this.popup = new Htk.Popup();
|
||||
this.popup.child = this.calendar;
|
||||
}
|
||||
else if (!editable)
|
||||
this.node.appendChild (this.label);
|
||||
}
|
||||
|
||||
,_onCalendarChange: function (calendar)
|
||||
{
|
||||
,_onCalendarChange: function(calendar) {
|
||||
if (this.ignoreCalendarChange)
|
||||
return;
|
||||
|
||||
this.popup.hide ();
|
||||
this.popup.hide();
|
||||
|
||||
var newDate = calendar.value;
|
||||
this.putValue (newDate);
|
||||
this.valueChanged (newDate);
|
||||
this.putValue(newDate);
|
||||
this.valueChanged(newDate);
|
||||
}
|
||||
|
||||
,_onClick: function (event)
|
||||
{
|
||||
,_onClick: function() {
|
||||
this.ignoreCalendarChange = true;
|
||||
this.calendar.value = this._value;
|
||||
this.calendar.goToSelectedMonth ();
|
||||
this.calendar.goToSelectedMonth();
|
||||
this.ignoreCalendarChange = false;
|
||||
|
||||
this.popup.show (this.button);
|
||||
this.popup.show(this.node);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,29 @@
|
|||
|
||||
module.exports = new Class
|
||||
({
|
||||
module.exports = new Class({
|
||||
Extends: Htk.Field
|
||||
,Tag: 'htk-search-entry'
|
||||
|
||||
,render: function ()
|
||||
{
|
||||
var div = this.createRoot ('div');
|
||||
,render: function() {
|
||||
var div = this.createRoot('div');
|
||||
div.className = 'htk-search-entry';
|
||||
|
||||
var icon = new Htk.Icon ({
|
||||
icon: 'search',
|
||||
var icon = new Htk.Icon({
|
||||
name: '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.type = 'text';
|
||||
input.placeholder = _('Search');
|
||||
input.addEventListener ('change', this._onChange.bind (this));
|
||||
div.appendChild (input);
|
||||
input.addEventListener('change', this._onChange.bind(this));
|
||||
div.appendChild(input);
|
||||
|
||||
this._input = input;
|
||||
}
|
||||
|
||||
,_onChange: function (event)
|
||||
{
|
||||
,_onChange: function() {
|
||||
var newValue;
|
||||
|
||||
if (this._input.value === '')
|
||||
|
|
@ -34,19 +31,17 @@ module.exports = new Class
|
|||
else
|
||||
newValue = this._input.value;
|
||||
|
||||
this.valueChanged (newValue);
|
||||
this.valueChanged(newValue);
|
||||
}
|
||||
|
||||
,putValue: function (value)
|
||||
{
|
||||
,putValue: function(value) {
|
||||
if (!value)
|
||||
this._input.value = '';
|
||||
else
|
||||
this._input.value = value;
|
||||
}
|
||||
|
||||
,setEditable: function (editable)
|
||||
{
|
||||
,setEditable: function(editable) {
|
||||
this.node.readOnly = !editable;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
,Implements: Db.Iterator
|
||||
,Tag: 'htk-combo'
|
||||
|
|
@ -10,49 +9,44 @@ module.exports = new Class
|
|||
{
|
||||
/**
|
||||
* The model associated to this form.
|
||||
**/
|
||||
*/
|
||||
model:
|
||||
{
|
||||
type: Db.Model
|
||||
,set: function (x)
|
||||
{
|
||||
this.link ({_model: x}, {'status-changed-after': this._onModelChange});
|
||||
this._onModelChange ();
|
||||
,set: function(x) {
|
||||
this.link({_model: x}, {'status-changed-after': this._onModelChange});
|
||||
this._onModelChange();
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
,get: function() {
|
||||
return this._model;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The row where the form positioned, has -1 if the row is unselected.
|
||||
**/
|
||||
*/
|
||||
row:
|
||||
{
|
||||
type: Number
|
||||
,set: function (x)
|
||||
{
|
||||
,set: function(x) {
|
||||
if (!this._model || this._model.numRows <= x || x < -1)
|
||||
x = -1;
|
||||
if (x == this._row)
|
||||
return;
|
||||
|
||||
this._row = x;
|
||||
this.iterChanged ();
|
||||
this.iterChanged();
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
,get: function() {
|
||||
return this._row;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The number of rows in the form.
|
||||
**/
|
||||
*/
|
||||
numRows:
|
||||
{
|
||||
type: Number
|
||||
,get: function ()
|
||||
{
|
||||
,get: function() {
|
||||
if (this._model)
|
||||
return this._model.numRows;
|
||||
|
||||
|
|
@ -61,43 +55,38 @@ module.exports = new Class
|
|||
},
|
||||
/**
|
||||
* Checks if the form data is ready.
|
||||
**/
|
||||
*/
|
||||
ready:
|
||||
{
|
||||
type: Boolean
|
||||
,get: function ()
|
||||
{
|
||||
,get: function() {
|
||||
return this._model && this._model.ready;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Checks if the form data is ready.
|
||||
**/
|
||||
*/
|
||||
placeholder:
|
||||
{
|
||||
type: String
|
||||
,set: function (x)
|
||||
{
|
||||
,set: function(x) {
|
||||
this._placeholder = x;
|
||||
this._refreshShowText (x);
|
||||
this._refreshShowText(x);
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
,get: function() {
|
||||
return this._placeholder;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Wether to allow null values.
|
||||
**/
|
||||
*/
|
||||
notNull:
|
||||
{
|
||||
type: Boolean
|
||||
,set: function (x)
|
||||
{
|
||||
,set: function(x) {
|
||||
this._notNull = x;
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
,get: function() {
|
||||
return this._notNull;
|
||||
}
|
||||
}
|
||||
|
|
@ -112,75 +101,75 @@ module.exports = new Class
|
|||
,_notNull: true
|
||||
,_webkitRefresh: false
|
||||
|
||||
,render: function ()
|
||||
{
|
||||
var button = this.createRoot ('button');
|
||||
,render: function() {
|
||||
const button = this.createRoot('button');
|
||||
button.type = 'button';
|
||||
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)
|
||||
{
|
||||
switch (id)
|
||||
{
|
||||
,on: function(id, callback, instance) {
|
||||
switch (id) {
|
||||
case 'click':
|
||||
case 'mousedown':
|
||||
case 'focusout':
|
||||
this.node.addEventListener (id,
|
||||
callback.bind (instance, this));
|
||||
this.node.addEventListener(id,
|
||||
callback.bind(instance, this));
|
||||
break;
|
||||
default:
|
||||
this.parent (id, callback, instance);
|
||||
this.parent(id, callback, instance);
|
||||
}
|
||||
}
|
||||
|
||||
,_setRow: function (row)
|
||||
{
|
||||
,_setRow: function(row) {
|
||||
this._row = row;
|
||||
this._refreshShowText ();
|
||||
this.iterChanged ();
|
||||
this._refreshShowText();
|
||||
this.iterChanged();
|
||||
}
|
||||
|
||||
,_onButtonMouseDown: function (e)
|
||||
{
|
||||
if (this._popup)
|
||||
{
|
||||
this._popup.hide ();
|
||||
,_onButtonMouseDown: function(e) {
|
||||
if (this._popup) {
|
||||
this._popup.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var model = this._model;
|
||||
|
||||
var menu = this.createElement ('div');
|
||||
var menu = this.createElement('div');
|
||||
menu.className = 'htk-select-menu';
|
||||
|
||||
var grid = new Htk.Grid ({showHeader: false});
|
||||
menu.appendChild (grid.node);
|
||||
var grid = new Htk.Grid({showHeader: false});
|
||||
menu.appendChild(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});
|
||||
grid.appendColumn (column);
|
||||
var column = new ColumnText({columnIndex: this.showColumnIndex});
|
||||
grid.appendColumn(column);
|
||||
grid.model = model;
|
||||
|
||||
var popup = this._popup = new Htk.Popup ({childNode: menu});
|
||||
popup.on ('closed', this._onPopupClose.bind (this));
|
||||
popup.show (this.node);
|
||||
var popup = this._popup = new Htk.Popup({childNode: menu});
|
||||
popup.on('closed', this._onPopupClose.bind(this));
|
||||
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 parentNode = target.parentNode;
|
||||
|
||||
while (parentNode !== grid.tbody)
|
||||
{
|
||||
while (parentNode !== grid.tbody) {
|
||||
target = parentNode;
|
||||
parentNode = parentNode.parentNode;
|
||||
}
|
||||
|
|
@ -189,29 +178,27 @@ module.exports = new Class
|
|||
var row = target.rowIndex - 1;
|
||||
|
||||
if (row >= 0)
|
||||
value = this._model.getByIndex (row, this.valueColumnIndex);
|
||||
value = this._model.getByIndex(row, this.valueColumnIndex);
|
||||
else
|
||||
value = null;
|
||||
|
||||
this._setRow (row);
|
||||
this.valueChanged (value);
|
||||
this._popup.hide ();
|
||||
this._setRow(row);
|
||||
this.valueChanged(value);
|
||||
this._popup.hide();
|
||||
|
||||
e.stopPropagation ();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
,_onPopupClose: function ()
|
||||
{
|
||||
,_onPopupClose: function() {
|
||||
this._popup = null;
|
||||
this.signalEmit ('menu-hide');
|
||||
this.signalEmit('menu-hide');
|
||||
}
|
||||
|
||||
,_refreshShowText: function ()
|
||||
{
|
||||
,_refreshShowText: function() {
|
||||
var model = this._model;
|
||||
|
||||
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)
|
||||
var showText = _('Loading...');
|
||||
else if (this._placeholder)
|
||||
|
|
@ -219,45 +206,39 @@ module.exports = new Class
|
|||
else
|
||||
var showText = '';
|
||||
|
||||
Vn.Node.setText (this.node, showText);
|
||||
Vn.Node.setText(this.label, showText);
|
||||
}
|
||||
|
||||
,_onModelChange: function ()
|
||||
{
|
||||
,_onModelChange: function() {
|
||||
var model = this._model;
|
||||
this.signalEmit ('status-changed');
|
||||
this.signalEmit('status-changed');
|
||||
|
||||
if (this._popup)
|
||||
this._popup.reset ();
|
||||
this._popup.reset();
|
||||
|
||||
if (model && model.ready)
|
||||
{
|
||||
this._selectOption ();
|
||||
this.signalEmit ('ready');
|
||||
}
|
||||
else
|
||||
this._setRow (-1);
|
||||
if (model && model.ready) {
|
||||
this._selectOption();
|
||||
this.signalEmit('ready');
|
||||
} else
|
||||
this._setRow(-1);
|
||||
}
|
||||
|
||||
,setEditable: function (editable)
|
||||
{
|
||||
,setEditable: function(editable) {
|
||||
this.node.disabled = !editable;
|
||||
}
|
||||
|
||||
,_selectOption: function ()
|
||||
{
|
||||
,_selectOption: function() {
|
||||
var row;
|
||||
|
||||
if (this._model && this._model.ready)
|
||||
row = this._model.searchByIndex (this.valueColumnIndex, this._value);
|
||||
row = this._model.searchByIndex(this.valueColumnIndex, this._value);
|
||||
else
|
||||
row = -1;
|
||||
|
||||
this._setRow (row);
|
||||
this._setRow(row);
|
||||
}
|
||||
|
||||
,putValue: function (value)
|
||||
{
|
||||
this._selectOption ();
|
||||
,putValue: function(value) {
|
||||
this._selectOption();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
background-color: white;
|
||||
}
|
||||
%clickable {
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms ease-out;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-hover-cd;
|
||||
outline: none;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $color-hover-cd;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,22 @@
|
|||
@import "variables";
|
||||
@import "classes";
|
||||
|
||||
/* Icon */
|
||||
|
||||
.htk-icon {}
|
||||
|
||||
/* Button */
|
||||
|
||||
.htk-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
& > .htk-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
|
||||
.htk-grid {
|
||||
|
|
@ -10,7 +26,7 @@
|
|||
|
||||
& > thead > tr,
|
||||
& > tfoot > tr {
|
||||
background-color: #8cc63f;
|
||||
background-color: $color-primary;
|
||||
vertical-align: middle;
|
||||
height: 3em;
|
||||
}
|
||||
|
|
@ -98,18 +114,25 @@ th.cell-radio {
|
|||
text-align: center;
|
||||
}
|
||||
td.cell-button {
|
||||
max-width: 1em;
|
||||
max-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
td.cell-button > button,
|
||||
td.cell-button > a {
|
||||
display: inline-block;
|
||||
@extend %clickable;
|
||||
display: block;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
margin: 0 auto;
|
||||
padding: .5em;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-radius: .1em;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > .htk-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
td.cell-button > button:hover,
|
||||
td.cell-button > a:hover {
|
||||
|
|
@ -134,52 +157,64 @@ td.cell-image .htk-image {
|
|||
|
||||
/* 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 {
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
text-align: left;
|
||||
}
|
||||
.htk-select-menu {
|
||||
height: 100%;
|
||||
max-height: 80em;
|
||||
overflow: auto;
|
||||
min-width: 14em;
|
||||
}
|
||||
.htk-select-menu tbody > tr {
|
||||
border-top: none;
|
||||
height: 2.5em;
|
||||
}
|
||||
.htk-select-menu td.message {
|
||||
padding: 1em;
|
||||
}
|
||||
.htk-select-menu tr:hover {
|
||||
background-color: rgba(1, 1, 1, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.htk-select-menu td {
|
||||
max-width: 11em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
|
||||
.htk-icon {}
|
||||
tbody > tr {
|
||||
border-top: none;
|
||||
height: 2.5em;
|
||||
}
|
||||
td.message {
|
||||
padding: 1em;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: rgba(1, 1, 1, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
td {
|
||||
max-width: 11em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* List */
|
||||
|
||||
.htk-list {
|
||||
.item {
|
||||
a.item,
|
||||
.item.clickable {
|
||||
@extend %clickable;
|
||||
}
|
||||
.item {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(1, 1, 1, 0.05);
|
||||
}
|
||||
& > .side {
|
||||
flex: none;
|
||||
}
|
||||
|
|
@ -198,6 +233,7 @@ td.cell-image .htk-image {
|
|||
& > .actions {
|
||||
flex: none;
|
||||
display: none;
|
||||
align-items: center;
|
||||
|
||||
& > .htk-button {
|
||||
margin: 0;
|
||||
|
|
@ -212,28 +248,13 @@ td.cell-image .htk-image {
|
|||
}
|
||||
}
|
||||
.item:hover > .actions {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
.item:last-child {
|
||||
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 */
|
||||
|
||||
.htk-calendar {
|
||||
|
|
@ -306,21 +327,25 @@ td.cell-image .htk-image {
|
|||
margin: 0 auto;
|
||||
color: #555;
|
||||
}
|
||||
div.disabled {
|
||||
color: #bbb;
|
||||
}
|
||||
div.today {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
div.selected {
|
||||
color: white;
|
||||
background-color: #8cc63f;
|
||||
}
|
||||
div.enabled:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(140, 198, 63, 0.8);
|
||||
color: white;
|
||||
div {
|
||||
&.disabled {
|
||||
color: #bbb;
|
||||
}
|
||||
&.today {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
&.selected {
|
||||
color: white;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
&.enabled {
|
||||
@extend %clickable;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(140, 198, 63, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -329,43 +354,46 @@ td.cell-image .htk-image {
|
|||
.htk-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.htk-image.clickable:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.htk-image > img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.htk-image > button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: .15em;
|
||||
display: none;
|
||||
}
|
||||
.htk-image:hover > button {
|
||||
display: block;
|
||||
}
|
||||
.htk-image > button > img {
|
||||
display: block;
|
||||
height: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
&.clickable:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
}
|
||||
& > img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
& > button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: .15em;
|
||||
display: none;
|
||||
}
|
||||
&:hover > button {
|
||||
display: block;
|
||||
}
|
||||
& > button > img {
|
||||
display: block;
|
||||
height: 1.2em;
|
||||
height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Full image */
|
||||
|
||||
.htk-full-image img {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.htk-full-image .htk-spinner {
|
||||
background-color: #FFF;
|
||||
margin: .6em;
|
||||
display: block;
|
||||
.htk-full-image {
|
||||
img {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.htk-spinner {
|
||||
background-color: #FFF;
|
||||
margin: .6em;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Image editor */
|
||||
|
|
@ -374,31 +402,33 @@ td.cell-image .htk-image {
|
|||
width: 18em;
|
||||
margin: 0 auto;
|
||||
padding: 1.5em;
|
||||
}
|
||||
.htk-image-editor h2 {
|
||||
color: white;
|
||||
background-color: #009688;
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.7em;
|
||||
font-weight: normal;
|
||||
padding: 0.6em 0.8em;
|
||||
margin: 0;
|
||||
}
|
||||
.htk-image-editor iframe {
|
||||
display: none;
|
||||
}
|
||||
.htk-image-editor .footer {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.htk-image-editor .footer > .htk-spinner {
|
||||
padding-right: 1.2em;
|
||||
height: 1.3em;
|
||||
width: 1.3em;
|
||||
}
|
||||
.htk-image-editor .footer > .htk-spinner,
|
||||
.htk-image-editor .footer > input {
|
||||
float: right;
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
background-color: #009688;
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.7em;
|
||||
font-weight: normal;
|
||||
padding: 0.6em 0.8em;
|
||||
margin: 0;
|
||||
}
|
||||
iframe {
|
||||
display: none;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 2em;
|
||||
|
||||
& > .htk-spinner {
|
||||
padding-right: 1.2em;
|
||||
height: 1.3em;
|
||||
width: 1.3em;
|
||||
}
|
||||
& > .htk-spinner,
|
||||
& > input {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
|
|
@ -415,38 +445,40 @@ td.cell-image .htk-image {
|
|||
overflow: auto;
|
||||
max-height: 40em;
|
||||
overflow: visible;
|
||||
}
|
||||
.htk-toast > div {
|
||||
margin: .5em 0;
|
||||
padding: .5em 2%;
|
||||
border-radius: 0.1em;
|
||||
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
|
||||
width: 96%;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateZ(0) translateY(-1em);
|
||||
-webkit-transform: translateZ(0) translateY(-1em);
|
||||
& > div {
|
||||
margin: .5em 0;
|
||||
padding: .5em 2%;
|
||||
border-radius: 0.1em;
|
||||
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
|
||||
width: 96%;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateZ(0) translateY(-1em);
|
||||
-webkit-transform: translateZ(0) translateY(-1em);
|
||||
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.htk-toast > div.show {
|
||||
opacity: 1;
|
||||
transform: translateZ(0) translateY(0em);
|
||||
-webkit-transform: translateZ(0) translateY(0em);
|
||||
}
|
||||
.htk-toast > .message {
|
||||
background-color: #BBFFBB;
|
||||
color: #363;
|
||||
}
|
||||
.htk-toast > .warning {
|
||||
background-color: #FFE0B2;
|
||||
color: #C30;
|
||||
}
|
||||
.htk-toast > .error {
|
||||
background-color: #FFCDD2;
|
||||
color: #A00;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translateZ(0) translateY(0em);
|
||||
-webkit-transform: translateZ(0) translateY(0em);
|
||||
}
|
||||
}
|
||||
& > .message {
|
||||
background-color: #BBFFBB;
|
||||
color: #363;
|
||||
}
|
||||
& > .warning {
|
||||
background-color: #FFE0B2;
|
||||
color: #C30;
|
||||
}
|
||||
& > .error {
|
||||
background-color: #FFCDD2;
|
||||
color: #A00;
|
||||
}
|
||||
}
|
||||
|
||||
/* Popup */
|
||||
|
|
@ -471,15 +503,16 @@ td.cell-image .htk-image {
|
|||
border-radius: 10px;
|
||||
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.htk-popup.modal {
|
||||
position: absolute;
|
||||
font-size: 1.2em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.htk-popup > * {
|
||||
border-radius: 0.1em;
|
||||
|
||||
&.modal {
|
||||
position: absolute;
|
||||
font-size: 1.2em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
& > * {
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
|
|
@ -489,23 +522,24 @@ td.cell-image .htk-image {
|
|||
max-width: 20em;
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
}
|
||||
.htk-dialog p {
|
||||
margin: 0;
|
||||
}
|
||||
.htk-dialog img {
|
||||
float: left;
|
||||
height: 3em;
|
||||
margin-top: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.htk-dialog p {
|
||||
padding: 0;
|
||||
}
|
||||
.htk-dialog .button-bar > button {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
margin-top: .5em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
height: 3em;
|
||||
margin-top: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
p {
|
||||
padding: 0;
|
||||
}
|
||||
.button-bar > button {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Assistant */
|
||||
|
|
@ -595,30 +629,36 @@ td.cell-image .htk-image {
|
|||
/* Search entry */
|
||||
|
||||
.htk-search-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: white;
|
||||
height: 2.8em;
|
||||
border-radius: 1.4em;
|
||||
padding: 0 1.4em;
|
||||
}
|
||||
.htk-search-entry > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.htk-search-entry > img {
|
||||
margin: 0;
|
||||
height: 1.5em;
|
||||
margin-right: .6em;
|
||||
}
|
||||
.htk-search-entry > .entry {
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: 8em;
|
||||
box-shadow: none;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.htk-search-entry > .entry:focus {
|
||||
background-color: initial;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
padding: 0 15px;
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
& > .htk-icon {
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: gray;
|
||||
}
|
||||
& > .entry {
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: 100px;
|
||||
box-shadow: none;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
height: inherit;
|
||||
}
|
||||
& > .entry:focus {
|
||||
background-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
|
|
@ -628,23 +668,24 @@ td.cell-image .htk-image {
|
|||
height: 1.8em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.htk-spinner > .spinner {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: .3em solid transparent;
|
||||
border-top-color: #666;
|
||||
border-left-color: #666;
|
||||
animation: spinner 1s linear infinite;
|
||||
-webkit-animation: spinner 1s linear infinite;
|
||||
}
|
||||
.htk-spinner.dark > .spinner {
|
||||
border-top-color: white;
|
||||
border-left-color: white;
|
||||
|
||||
& > .spinner {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #666;
|
||||
border-left-color: #666;
|
||||
animation: spinner 1s linear infinite;
|
||||
-webkit-animation: spinner 1s linear infinite;
|
||||
}
|
||||
&.dark > .spinner {
|
||||
border-top-color: white;
|
||||
border-left-color: white;
|
||||
}
|
||||
}
|
||||
@keyframes spinner {
|
||||
to {transform: rotate(360deg);}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
|
||||
$color-primary: #8cc63f;
|
||||
$color-hover-cd: rgba(255, 255, 255, .1);
|
||||
$color-hover-cd: rgba(0, 0, 0, .05);
|
||||
|
|
|
|||
Loading…
Reference in New Issue