forked from verdnatura/hedera-web
Checkpoint
This commit is contained in:
parent
dc0ba66257
commit
f515249329
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,6 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
.address .box {
|
.address .box {
|
||||||
max-width: 30em;
|
max-width: 420px;
|
||||||
padding: 3em;
|
padding: 3em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -11,23 +11,13 @@ 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,
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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&user=${iter.userId}`}}"
|
||||||
tip="_Access log"
|
title="_Access log">
|
||||||
icon="history"
|
<div class="content">
|
||||||
on-click="this.onAccessLogClick(iter.userId)"/>
|
<p class="important">
|
||||||
<htk-button
|
{{iter.nickname}}
|
||||||
tip="_Supplant user"
|
</p>
|
||||||
icon="supervisor_account"
|
<p>
|
||||||
on-click="this.onChangeUserClick(iter.user)"/>
|
{{Vn.Value.format(iter.stamp, '%a, %T')}} -
|
||||||
<p class="important">
|
{{Vn.Value.format(iter.lastUpdate, '%T')}}
|
||||||
{{iter.nickname}}
|
</p>
|
||||||
<htk-text form="iter" column="nickname"/>
|
<p>
|
||||||
</p>
|
{{iter.platform}} - {{iter.browser}} {{iter.version}}
|
||||||
<p>
|
</p>
|
||||||
{{Vn.Value.format(iter.stamp, '%a, %T')}} -
|
</div>
|
||||||
{{Vn.Value.format(iter.lastUpdate, '%T')}}
|
<div class="actions"
|
||||||
</p>
|
on-click="$event.preventDefault()">
|
||||||
<p>
|
<htk-button
|
||||||
{{iter.platform}} -
|
tip="_Supplant user"
|
||||||
{{iter.browser}}
|
icon="supervisor_account"
|
||||||
{{iter.version}}
|
on-click="this.onChangeUserClick(iter.user)"/>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</custom>
|
</custom>
|
||||||
</htk-repeater>
|
</htk-repeater>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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,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,30 +30,33 @@
|
||||||
</sql-batch>
|
</sql-batch>
|
||||||
</db-model>
|
</db-model>
|
||||||
<custom>
|
<custom>
|
||||||
<div class="row">
|
<div class="item">
|
||||||
<htk-image
|
<div class="side">
|
||||||
form="iter"
|
<htk-image
|
||||||
column="image"
|
form="iter"
|
||||||
stamp-column="updated"
|
column="image"
|
||||||
class="photo"
|
stamp-column="updated"
|
||||||
directory="catalog"
|
class="photo"
|
||||||
subdir="200x200"
|
directory="catalog"
|
||||||
full-dir="1600x900"
|
subdir="200x200"
|
||||||
editable="true"
|
full-dir="1600x900"
|
||||||
conn="conn"/>
|
editable="true"
|
||||||
<p class="concept">
|
conn="conn"/>
|
||||||
{{iter.longName}}
|
</div>
|
||||||
</p>
|
<div class="content">
|
||||||
<p class="tags">
|
<p class="important">
|
||||||
{{iter.value5}} {{iter.value6}} {{iter.value7}}
|
{{iter.longName}}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p class="tags">
|
||||||
{{iter.id}}
|
{{iter.value5}} {{iter.value6}} {{iter.value7}}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{{iter.image}}
|
{{iter.id}}
|
||||||
</p>
|
</p>
|
||||||
<div class="clear"/>
|
<p>
|
||||||
|
{{iter.image}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</custom>
|
</custom>
|
||||||
</htk-repeater>
|
</htk-repeater>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,31 +3,29 @@
|
||||||
<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>
|
|
||||||
SELECT image, name, description, link FROM link
|
|
||||||
ORDER BY name
|
|
||||||
</custom>
|
|
||||||
</db-model>
|
|
||||||
<custom>
|
<custom>
|
||||||
<a class="item"
|
SELECT image, name, description, link FROM link
|
||||||
href="{{iter.link}}"
|
ORDER BY name
|
||||||
target="_blank">
|
|
||||||
<htk-image
|
|
||||||
value="{{iter.image}}"
|
|
||||||
directory="link"
|
|
||||||
subdir="full"/>
|
|
||||||
<p class="important">
|
|
||||||
{{iter.name}}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
{{iter.description}}
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</custom>
|
</custom>
|
||||||
</htk-repeater>
|
</db-model>
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</vn>
|
</vn>
|
||||||
|
|
|
||||||
|
|
@ -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,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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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&user=${iter.id}`}}"
|
||||||
icon="history"
|
title="_Access log">
|
||||||
tip="_Access log"
|
<div class="content">
|
||||||
on-click="this.onAccessLogClick(iter.id)"/>
|
<p class="important">
|
||||||
<htk-button
|
{{iter.nickname}}
|
||||||
id="impersonate"
|
</p>
|
||||||
icon="supervisor_account"
|
<p>
|
||||||
tip="_Impersonate user"
|
#{{iter.id}} - {{iter.name}}
|
||||||
on-click="this.onChangeUserClick(iter.name)"/>
|
</p>
|
||||||
<span id="disabled" class="disabled">
|
</div>
|
||||||
<t>Disabled</t>
|
<div class="actions"
|
||||||
</span>
|
on-click="$event.preventDefault()">
|
||||||
<p class="important">
|
<span id="disabled" class="disabled">
|
||||||
<htk-text form="iter" column="nickname"/>
|
<t>Disabled</t>
|
||||||
</p>
|
</span>
|
||||||
<p>
|
<htk-button
|
||||||
#<htk-text form="iter" column="id"/> -
|
id="impersonate"
|
||||||
<htk-text form="iter" column="name"/>
|
icon="supervisor_account"
|
||||||
</p>
|
tip="_Impersonate user"
|
||||||
<div class="clear"/>
|
on-click="this.onChangeUserClick(iter.name)"/>
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
</custom>
|
</custom>
|
||||||
</htk-repeater>
|
</htk-repeater>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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 ?
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,20 +73,18 @@
|
||||||
</db-model>
|
</db-model>
|
||||||
<custom>
|
<custom>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<p class="important">
|
<div class="content">
|
||||||
<htk-text form="iter" column="browser"/>
|
<p class="important">
|
||||||
<htk-text form="iter" column="minVersion"/> -
|
{{iter.browser}} {{iter.minVersion}} - {{iter.maxVersion}}
|
||||||
<htk-text form="iter" column="maxVersion"/>
|
</p>
|
||||||
</p>
|
<p>
|
||||||
<p>
|
{{iter.visits}} <t>visits</t>,
|
||||||
<htk-text form="iter" column="visits"/>
|
{{iter.newVisits}} <t>news</t>
|
||||||
<t>visits</t>,
|
</p>
|
||||||
<htk-text form="iter" column="newVisits"/>
|
<p>
|
||||||
<t>news</t>
|
{{Vn.Value.format(iter.lastVisit, _('%a, %e %b %Y at %T'))}}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
</div>
|
||||||
<htk-text form="iter" column="lastVisit" format="_%a, %e %b %Y at %T"/>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</custom>
|
</custom>
|
||||||
</htk-repeater>
|
</htk-repeater>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@
|
||||||
}
|
}
|
||||||
.packages .box
|
.packages .box
|
||||||
{
|
{
|
||||||
max-width: 40em;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@
|
||||||
}
|
}
|
||||||
.provinces .box
|
.provinces .box
|
||||||
{
|
{
|
||||||
max-width: 40em;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
}
|
}
|
||||||
.contact .box
|
.contact .box
|
||||||
{
|
{
|
||||||
max-width: 30em;
|
max-width: 420px;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
}
|
}
|
||||||
.contact .form
|
.contact .form
|
||||||
|
|
|
||||||
|
|
@ -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,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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -258,7 +258,7 @@
|
||||||
|
|
||||||
.list-view
|
.list-view
|
||||||
{
|
{
|
||||||
max-width: 30em;
|
max-width: 420px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,30 +20,36 @@
|
||||||
</custom>
|
</custom>
|
||||||
</db-model>
|
</db-model>
|
||||||
<custom>
|
<custom>
|
||||||
<div class="item">
|
<a class="item"
|
||||||
<htk-button
|
href="{{`#!form=news/new&new=${iter.id}`}}"
|
||||||
icon="edit"
|
title="_EditNew">
|
||||||
tip="_EditNew"
|
<div class="side">
|
||||||
on-click="this.onEditClick(iter.id)"/>
|
<htk-image
|
||||||
<htk-button
|
form="iter"
|
||||||
tip="_Remove"
|
column="image"
|
||||||
icon="delete"
|
class="photo"
|
||||||
on-click="this.onDeleteClick($.iter)"/>
|
directory="news"
|
||||||
<htk-image
|
subdir="200x200"
|
||||||
form="iter"
|
full-dir="full"
|
||||||
column="image"
|
editable="true"
|
||||||
class="photo"
|
conn="conn"/>
|
||||||
directory="news"
|
</div>
|
||||||
subdir="200x200"
|
<div class="content">
|
||||||
full-dir="full"
|
<p class="important">
|
||||||
editable="true"
|
{{iter.title}}
|
||||||
conn="conn"/>
|
</p>
|
||||||
<p class="important">
|
<p>{{iter.nickname}}</p>
|
||||||
{{iter.title}}
|
<p>{{iter.priority}}</p>
|
||||||
</p>
|
</div>
|
||||||
<p>{{iter.nickname}}</p>
|
<div
|
||||||
<p>{{iter.priority}}</p>
|
class="actions"
|
||||||
</div>
|
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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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'));
|
||||||
|
|
|
||||||
|
|
@ -34,23 +34,25 @@
|
||||||
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;
|
||||||
|
|
@ -100,11 +102,12 @@
|
||||||
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,9 +190,10 @@
|
||||||
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;
|
||||||
|
|
@ -191,12 +203,13 @@
|
||||||
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 */
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
}
|
||||||
padding: 2em;
|
.body {
|
||||||
|
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 {
|
|
||||||
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) {
|
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;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
||||||
|
|
@ -32,7 +27,7 @@ module.exports = new Class({
|
||||||
},
|
},
|
||||||
showText: {
|
showText: {
|
||||||
type: Boolean
|
type: Boolean
|
||||||
,set: function(x) {
|
,set: function(x) {
|
||||||
this._showText = x;
|
this._showText = x;
|
||||||
this.renderContent();
|
this.renderContent();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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.node.appendChild (this.label);
|
|
||||||
|
|
||||||
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;
|
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) {
|
||||||
if (editable && !this.calendar)
|
this.calendar = new Calendar();
|
||||||
{
|
this.calendar.on('changed', this._onCalendarChange.bind(this));
|
||||||
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 = 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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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 ();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -9,12 +9,12 @@
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
%clickable {
|
%clickable {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 250ms ease-out;
|
transition: background-color 250ms ease-out;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: $color-hover-cd;
|
background-color: $color-hover-cd;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
|
||||||
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 */
|
tbody > tr {
|
||||||
|
border-top: none;
|
||||||
.htk-icon {}
|
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 */
|
/* 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 {
|
||||||
color: #bbb;
|
&.disabled {
|
||||||
}
|
color: #bbb;
|
||||||
div.today {
|
}
|
||||||
font-weight: bold;
|
&.today {
|
||||||
color: black;
|
font-weight: bold;
|
||||||
}
|
color: black;
|
||||||
div.selected {
|
}
|
||||||
color: white;
|
&.selected {
|
||||||
background-color: #8cc63f;
|
color: white;
|
||||||
}
|
background-color: $color-primary;
|
||||||
div.enabled:hover {
|
}
|
||||||
cursor: pointer;
|
&.enabled {
|
||||||
background-color: rgba(140, 198, 63, 0.8);
|
@extend %clickable;
|
||||||
color: white;
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(140, 198, 63, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -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 {
|
||||||
display: block;
|
img {
|
||||||
cursor: pointer;
|
display: block;
|
||||||
}
|
cursor: pointer;
|
||||||
.htk-full-image .htk-spinner {
|
}
|
||||||
background-color: #FFF;
|
.htk-spinner {
|
||||||
margin: .6em;
|
background-color: #FFF;
|
||||||
display: block;
|
margin: .6em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Image editor */
|
/* Image editor */
|
||||||
|
|
@ -374,31 +402,33 @@ 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;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
line-height: 1.7em;
|
line-height: 1.7em;
|
||||||
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,38 +445,40 @@ td.cell-image .htk-image {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
max-height: 40em;
|
max-height: 40em;
|
||||||
overflow: visible;
|
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;
|
& > div {
|
||||||
transform: translateZ(0) translateY(-1em);
|
margin: .5em 0;
|
||||||
-webkit-transform: translateZ(0) translateY(-1em);
|
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;
|
&.show {
|
||||||
transition-duration: 200ms;
|
opacity: 1;
|
||||||
transition-timing-function: ease-out;
|
transform: translateZ(0) translateY(0em);
|
||||||
}
|
-webkit-transform: translateZ(0) translateY(0em);
|
||||||
.htk-toast > div.show {
|
}
|
||||||
opacity: 1;
|
}
|
||||||
transform: translateZ(0) translateY(0em);
|
& > .message {
|
||||||
-webkit-transform: translateZ(0) translateY(0em);
|
background-color: #BBFFBB;
|
||||||
}
|
color: #363;
|
||||||
.htk-toast > .message {
|
}
|
||||||
background-color: #BBFFBB;
|
& > .warning {
|
||||||
color: #363;
|
background-color: #FFE0B2;
|
||||||
}
|
color: #C30;
|
||||||
.htk-toast > .warning {
|
}
|
||||||
background-color: #FFE0B2;
|
& > .error {
|
||||||
color: #C30;
|
background-color: #FFCDD2;
|
||||||
}
|
color: #A00;
|
||||||
.htk-toast > .error {
|
}
|
||||||
background-color: #FFCDD2;
|
|
||||||
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;
|
& > * {
|
||||||
vertical-align: middle;
|
display: inline-block;
|
||||||
}
|
vertical-align: middle;
|
||||||
.htk-search-entry > img {
|
}
|
||||||
margin: 0;
|
& > .htk-icon {
|
||||||
height: 1.5em;
|
display: block;
|
||||||
margin-right: .6em;
|
margin: 0;
|
||||||
}
|
color: gray;
|
||||||
.htk-search-entry > .entry {
|
}
|
||||||
margin: 0;
|
& > .entry {
|
||||||
border: none;
|
margin: 0;
|
||||||
width: 8em;
|
border: none;
|
||||||
box-shadow: none;
|
width: 100px;
|
||||||
padding-right: 0;
|
box-shadow: none;
|
||||||
padding-left: 0;
|
padding-right: 0;
|
||||||
}
|
padding-left: 0;
|
||||||
.htk-search-entry > .entry:focus {
|
height: inherit;
|
||||||
background-color: initial;
|
}
|
||||||
|
& > .entry:focus {
|
||||||
|
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);}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue