Diseño responsive mejorado, añadidos efectos mediante transiciones CSS, errores en Safari solucionados, errores de estilo solucionados, CSS optimizado
This commit is contained in:
Juan Ferrer Toribio
parent
ff13874901
commit
d5cd84d22b
|
|
@ -1,4 +1,4 @@
|
||||||
hedera-web (1.305-deb8) stable; urgency=low
|
hedera-web (1.312-deb8) stable; urgency=low
|
||||||
|
|
||||||
* Initial Release.
|
* Initial Release.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="actions">
|
<div id="actions">
|
||||||
<htk-button
|
<htk-button
|
||||||
image="image/dark/shipping.svg"
|
image="image/dark/place.svg"
|
||||||
tip="_Addresses"
|
tip="_Addresses"
|
||||||
on-click="onAddressesClick"
|
on-click="onAddressesClick"
|
||||||
showText="true"/>
|
showText="true"/>
|
||||||
|
|
|
||||||
|
|
@ -3,16 +3,22 @@ Vn.Connections = new Class
|
||||||
({
|
({
|
||||||
Extends: Vn.Form
|
Extends: Vn.Form
|
||||||
|
|
||||||
,_intervalId: null
|
,_timeoutId: null
|
||||||
|
|
||||||
,activate: function ()
|
,onModelStatusChange: function (model, status)
|
||||||
{
|
{
|
||||||
this._intervalId = setInterval (this.onRefreshClick.bind (this), 60000);
|
if (!model.ready)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (this._timeoutId)
|
||||||
|
clearTimeout (this._timeoutId);
|
||||||
|
|
||||||
|
this._timeoutId = setTimeout (this.onRefreshClick.bind (this), 60000);
|
||||||
}
|
}
|
||||||
|
|
||||||
,deactivate: function ()
|
,deactivate: function ()
|
||||||
{
|
{
|
||||||
clearTimeout (this._intervalId);
|
clearTimeout (this._timeoutId);
|
||||||
}
|
}
|
||||||
|
|
||||||
,onRefreshClick: function ()
|
,onRefreshClick: function ()
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
<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">
|
||||||
<db-model property="model" id="sessions">
|
<db-model property="model" id="sessions" on-status-changed="onModelStatusChange">
|
||||||
<custom>
|
<custom>
|
||||||
SELECT s.id, e.user_id, c.Cliente, e.date_time login, is_new,
|
SELECT s.id, e.user_id, c.Cliente, e.date_time login, is_new,
|
||||||
s.date_time last_activity, a.platform, a.browser, a.version
|
s.date_time last_activity, a.platform, a.browser, a.version
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,22 @@
|
||||||
|
|
||||||
/* News panel */
|
/* News panel */
|
||||||
|
|
||||||
.home
|
|
||||||
{
|
|
||||||
margin: .5em;
|
|
||||||
}
|
|
||||||
.column
|
.column
|
||||||
{
|
{
|
||||||
|
margin: .5em;
|
||||||
max-width: 120em;
|
max-width: 120em;
|
||||||
}
|
}
|
||||||
|
.action-bar button.start-order
|
||||||
|
{
|
||||||
|
background-color: #EF5350;
|
||||||
|
margin: .7em .4em;
|
||||||
|
padding: .5em;
|
||||||
|
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.4);
|
||||||
|
}
|
||||||
|
.action-bar button.start-order:hover
|
||||||
|
{
|
||||||
|
background-color: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
/* New */
|
/* New */
|
||||||
|
|
||||||
|
|
@ -19,7 +27,7 @@
|
||||||
color: #222;
|
color: #222;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.1em;
|
border-radius: 0.1em;
|
||||||
box-shadow: 0 0.2em 0.2em #CCC;
|
box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.2);
|
||||||
margin: .5em;
|
margin: .5em;
|
||||||
}
|
}
|
||||||
.new .top
|
.new .top
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="actions" class="catalog-actions">
|
<div id="actions" class="catalog-actions">
|
||||||
<htk-button
|
<htk-button
|
||||||
|
class="start-order"
|
||||||
image="image/dark/new-order.svg"
|
image="image/dark/new-order.svg"
|
||||||
tip="_Start order"
|
tip="_Start order"
|
||||||
on-click="onStartOrderClick"
|
on-click="onStartOrderClick"
|
||||||
|
|
@ -11,31 +12,32 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="form" class="home">
|
<div id="form" class="home">
|
||||||
<div class="column mansonry" id="news-column">
|
<div class="column mansonry" id="news-column">
|
||||||
<htk-repeater form-id="new">
|
<htk-repeater form-id="new">
|
||||||
<db-model property="model">
|
<db-model property="model">
|
||||||
|
<custom>
|
||||||
|
SELECT title, date_time, text, image, id FROM news
|
||||||
|
WHERE tag != 'course'
|
||||||
|
ORDER BY priority, date_time DESC
|
||||||
|
</custom>
|
||||||
|
</db-model>
|
||||||
<custom>
|
<custom>
|
||||||
SELECT title, date_time, text, image, id FROM news
|
<div class="masonry-box">
|
||||||
WHERE tag != 'course'
|
<div class="new">
|
||||||
ORDER BY priority, date_time DESC
|
<div class="top">
|
||||||
</custom>
|
<h2><htk-text form="new" column="title"/></h2>
|
||||||
</db-model>
|
<!-- <p class="new-info">
|
||||||
<custom>
|
<htk-text format="_%a, %e %b %Y" form="new" column="date_time"/>
|
||||||
<div class="masonry-box">
|
</p>
|
||||||
<div class="new">
|
--> <div class="new-text">
|
||||||
<div class="top">
|
<htk-html form="new" column="text"/>
|
||||||
<h2><htk-text form="new" column="title"/></h2>
|
</div>
|
||||||
<!-- <p class="new-info">
|
|
||||||
<htk-text format="_%a, %e %b %Y" form="new" column="date_time"/>
|
|
||||||
</p>
|
|
||||||
--> <div class="new-text">
|
|
||||||
<htk-html form="new" column="text"/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<htk-image directory="news/full" form="new" column="image" editable="false"/>
|
||||||
</div>
|
</div>
|
||||||
<htk-image directory="news/full" form="new" column="image" editable="false"/>
|
</div>
|
||||||
</div>
|
</custom>
|
||||||
</div>
|
</htk-repeater>
|
||||||
</custom>
|
<div class="clear"/>
|
||||||
</htk-repeater>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</vn>
|
</vn>
|
||||||
|
|
|
||||||
|
|
@ -469,7 +469,7 @@ Vn.Filter = new Class
|
||||||
this.parent (props);
|
this.parent (props);
|
||||||
}
|
}
|
||||||
|
|
||||||
,_onClick: function ()
|
,_onClick: function (e)
|
||||||
{
|
{
|
||||||
if (this._model && this._model.status === Db.Model.Status.CLEAN)
|
if (this._model && this._model.status === Db.Model.Status.CLEAN)
|
||||||
this._model.refresh ();
|
this._model.refresh ();
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,13 @@
|
||||||
.catalog
|
.catalog
|
||||||
{
|
{
|
||||||
position: relative;
|
margin-right: 17em;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 25em;
|
|
||||||
}
|
|
||||||
.catalog div.center
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 17em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main */
|
/* Main */
|
||||||
|
|
||||||
.catalog div.main
|
.catalog > .main
|
||||||
{
|
{
|
||||||
position: absolute;
|
padding: .5em;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
overflow: auto;
|
|
||||||
padding: .4em;
|
|
||||||
}
|
}
|
||||||
.htk-toast
|
.htk-toast
|
||||||
{
|
{
|
||||||
|
|
@ -43,7 +26,7 @@
|
||||||
|
|
||||||
.right-panel
|
.right-panel
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 3.9em;
|
top: 3.9em;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -96,7 +79,6 @@
|
||||||
}
|
}
|
||||||
.right-panel select
|
.right-panel select
|
||||||
{
|
{
|
||||||
margin: 0 auto;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.vn-filter > ul
|
.vn-filter > ul
|
||||||
|
|
@ -308,9 +290,9 @@ td.third-category
|
||||||
transform: translateZ(0) translateX(-17em);
|
transform: translateZ(0) translateX(-17em);
|
||||||
-webkit-transform: translateZ(0) translateX(-17em);
|
-webkit-transform: translateZ(0) translateX(-17em);
|
||||||
}
|
}
|
||||||
.catalog div.center
|
.catalog
|
||||||
{
|
{
|
||||||
right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -121,9 +121,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="form" class="catalog">
|
<div id="form" class="catalog">
|
||||||
<div class="center">
|
<div id="main" class="main"/>
|
||||||
<div id="main" class="main"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="list-view" class="list-view">
|
<div id="list-view" class="list-view">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
|
|
|
||||||
|
|
@ -18,9 +18,9 @@
|
||||||
{
|
{
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
}
|
}
|
||||||
.answers select
|
.answers .htk-select
|
||||||
{
|
{
|
||||||
min-width: 8em;
|
max-width: 8em;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
{
|
{
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.htk-assistant button
|
.htk-assistant .thin
|
||||||
{
|
{
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -62,27 +62,29 @@ Vn.Confirm = new Class
|
||||||
|
|
||||||
,onConfirm: function (query, resultSet)
|
,onConfirm: function (query, resultSet)
|
||||||
{
|
{
|
||||||
|
this.disableButtons (false);
|
||||||
|
|
||||||
var res = resultSet.fetchResult ();
|
var res = resultSet.fetchResult ();
|
||||||
var debt = resultSet.fetchValue ();
|
|
||||||
|
|
||||||
if (res)
|
if (res)
|
||||||
{
|
{
|
||||||
Vn.Cookie.unset ('order');
|
Vn.Cookie.unset ('order');
|
||||||
this.pay = debt > this.$('order-form').get ('credit');
|
|
||||||
|
|
||||||
this.popup = new Htk.Popup ();
|
var debt = resultSet.fetchValue ();
|
||||||
this.popup.setChildNode (this.$('success-dialog'));
|
this._pay = debt > this.$('order-form').get ('credit');
|
||||||
this.popup.showCenter ();
|
|
||||||
|
this.$('success-dialog').show ();
|
||||||
}
|
}
|
||||||
else
|
|
||||||
this.disableButtons (false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
,onAcceptClick: function ()
|
,onAcceptClick: function ()
|
||||||
{
|
{
|
||||||
this.popup.hide ();
|
this.$('success-dialog').hide ();
|
||||||
|
}
|
||||||
|
|
||||||
if (this.pay)
|
,onPopupClose: function ()
|
||||||
|
{
|
||||||
|
if (this._pay)
|
||||||
Vn.Tpv.pay (this.conn, this.$('total').value,
|
Vn.Tpv.pay (this.conn, this.$('total').value,
|
||||||
this.$('order-form').get ('company_id'));
|
this.$('order-form').get ('company_id'));
|
||||||
else
|
else
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,10 @@
|
||||||
.confirm .form
|
.confirm .form
|
||||||
{
|
{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 3em 4em;
|
padding: 2.5em 3em;
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
.confirm .form p,
|
.confirm .form p.important,
|
||||||
.confirm .form select,
|
|
||||||
.confirm .form button
|
.confirm .form button
|
||||||
{
|
{
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
|
|
@ -31,10 +30,6 @@
|
||||||
{
|
{
|
||||||
margin: .2em 0;
|
margin: .2em 0;
|
||||||
}
|
}
|
||||||
.confirm .form p.small
|
|
||||||
{
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
.button-bar
|
.button-bar
|
||||||
{
|
{
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
|
|
@ -52,26 +47,17 @@
|
||||||
|
|
||||||
.success-dialog
|
.success-dialog
|
||||||
{
|
{
|
||||||
padding: 2em;
|
padding: 1em;
|
||||||
min-width: 30em;
|
|
||||||
max-width: 35em;
|
max-width: 35em;
|
||||||
}
|
|
||||||
.success-dialog *
|
|
||||||
{
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
.success-dialog p,
|
|
||||||
.success-dialog button
|
|
||||||
{
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
||||||
.success-dialog img
|
.success-dialog img
|
||||||
{
|
{
|
||||||
float: left;
|
float: left;
|
||||||
height: 3em;
|
height: 3em;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-right: 1.5em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
.success-dialog p
|
.success-dialog p
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -40,33 +40,33 @@
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<p>
|
<p class="important">
|
||||||
<t>Arrival</t>
|
<t>Arrival</t>
|
||||||
<htk-text format="_%A, %e of %B" form="order-form" column="date_send"/>
|
<htk-text format="_%A, %e of %B" form="order-form" column="date_send"/>
|
||||||
</p>
|
</p>
|
||||||
<p class="small">
|
<p>
|
||||||
<span id="method"><t>Agency</t></span>
|
<span id="method"><t>Agency</t></span>
|
||||||
<htk-text form="order-form" column="agency"/>
|
<htk-text form="order-form" column="agency"/>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="address" class="section">
|
<div id="address" class="section">
|
||||||
<p>
|
<p class="important">
|
||||||
<htk-text form="order-form" column="consignee"/>
|
<htk-text form="order-form" column="consignee"/>
|
||||||
</p>
|
</p>
|
||||||
<p class="small">
|
<p>
|
||||||
<htk-text form="order-form" column="address"/>
|
<htk-text form="order-form" column="address"/>
|
||||||
</p>
|
</p>
|
||||||
<p class="small">
|
<p>
|
||||||
<htk-text form="order-form" column="zip_code"/>,
|
<htk-text form="order-form" column="zip_code"/>,
|
||||||
<htk-text form="order-form" column="city"/>
|
<htk-text form="order-form" column="city"/>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<p>
|
<p class="important">
|
||||||
<t>Total</t>
|
<t>Total</t>
|
||||||
<htk-text id="total" format="%.2d€"/>
|
<htk-text id="total" format="%.2d€"/>
|
||||||
</p>
|
</p>
|
||||||
<p class="small">
|
<p>
|
||||||
(<t>TaxBase</t> <htk-text form="total-form" column="tax_base" format="%.2d€"/> +
|
(<t>TaxBase</t> <htk-text form="total-form" column="tax_base" format="%.2d€"/> +
|
||||||
<t>VAT</t> <htk-text form="total-form" column="vat" format="%.2d€"/>)
|
<t>VAT</t> <htk-text form="total-form" column="vat" format="%.2d€"/>)
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -83,15 +83,17 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="success-dialog" class="success-dialog">
|
<htk-popup id="success-dialog" modal="true" on-closed="onPopupClose">
|
||||||
<div>
|
<div property="child-node" class="success-dialog">
|
||||||
<img src="image/ok.svg" alt="_Ok"/>
|
<div>
|
||||||
<p><t>OrderPlacedSuccessfully</t></p>
|
<img src="image/ok.svg" alt="_Ok"/>
|
||||||
|
<p><t>OrderPlacedSuccessfully</t></p>
|
||||||
|
<div class="clear"/>
|
||||||
|
</div>
|
||||||
|
<button on-click="onAcceptClick" class="thin confirm-order">
|
||||||
|
<t>Accept</t>
|
||||||
|
</button>
|
||||||
<div class="clear"/>
|
<div class="clear"/>
|
||||||
</div>
|
</div>
|
||||||
<button on-click="onAcceptClick" class="thin confirm-order">
|
</htk-popup>
|
||||||
<t>Accept</t>
|
|
||||||
</button>
|
|
||||||
<div class="clear"/>
|
|
||||||
</div>
|
|
||||||
</vn>
|
</vn>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
|
@ -13,7 +13,7 @@
|
||||||
height="23.999996"
|
height="23.999996"
|
||||||
id="svg11927"
|
id="svg11927"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
inkscape:version="0.48.5 r10040"
|
inkscape:version="0.91 r13725"
|
||||||
sodipodi:docname="youtube.svg">
|
sodipodi:docname="youtube.svg">
|
||||||
<defs
|
<defs
|
||||||
id="defs3" />
|
id="defs3" />
|
||||||
|
|
@ -25,9 +25,9 @@
|
||||||
borderopacity="1.0"
|
borderopacity="1.0"
|
||||||
inkscape:pageopacity="0.0"
|
inkscape:pageopacity="0.0"
|
||||||
inkscape:pageshadow="2"
|
inkscape:pageshadow="2"
|
||||||
inkscape:zoom="7.919596"
|
inkscape:zoom="34.458339"
|
||||||
inkscape:cx="64.326307"
|
inkscape:cx="12"
|
||||||
inkscape:cy="46.777283"
|
inkscape:cy="11.999998"
|
||||||
inkscape:current-layer="layer1"
|
inkscape:current-layer="layer1"
|
||||||
showgrid="false"
|
showgrid="false"
|
||||||
units="mm"
|
units="mm"
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
fit-margin-right="0"
|
fit-margin-right="0"
|
||||||
fit-margin-bottom="0"
|
fit-margin-bottom="0"
|
||||||
inkscape:window-width="1920"
|
inkscape:window-width="1920"
|
||||||
inkscape:window-height="1014"
|
inkscape:window-height="1016"
|
||||||
inkscape:window-x="1920"
|
inkscape:window-x="1920"
|
||||||
inkscape:window-y="27"
|
inkscape:window-y="27"
|
||||||
inkscape:window-maximized="1" />
|
inkscape:window-maximized="1" />
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
<dc:format>image/svg+xml</dc:format>
|
<dc:format>image/svg+xml</dc:format>
|
||||||
<dc:type
|
<dc:type
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
<dc:title />
|
<dc:title></dc:title>
|
||||||
</cc:Work>
|
</cc:Work>
|
||||||
</rdf:RDF>
|
</rdf:RDF>
|
||||||
</metadata>
|
</metadata>
|
||||||
|
|
@ -59,8 +59,8 @@
|
||||||
id="layer1"
|
id="layer1"
|
||||||
transform="translate(-65.660672,-187.08936)">
|
transform="translate(-65.660672,-187.08936)">
|
||||||
<path
|
<path
|
||||||
style="fill:#c30000;fill-opacity:1;stroke:none;display:inline"
|
style="display:inline;fill:#c30000;fill-opacity:1;stroke:none"
|
||||||
d="m 68.556274,210.90728 c -2.293676,-0.68242 -2.880675,-2.99702 -2.89518,-11.41603 -0.01025,-5.94721 0.16327,-7.96905 0.8512,-9.91843 0.533461,-1.51166 1.175311,-1.99041 3.044687,-2.27101 1.814868,-0.27242 11.459518,-0.28621 15.293323,-0.0219 5.345509,0.48245 4.737665,4.05194 4.797521,11.13 0.06208,7.3381 -0.07728,8.93495 -0.942901,10.80584 -0.857753,1.85393 -0.528524,1.79528 -10.467487,1.86487 -5.046388,0.0354 -9.231633,-0.0396 -9.681163,-0.17336 z m 14.0137,-11.9128 c -9.225924,-6.1861 1.31465,0.90117 -8.167349,-5.4762 0.0541,2.97456 0.0086,8.38462 0.04076,11.04998 9.474932,-6.37668 -1.004697,0.69337 8.126587,-5.57378 z"
|
d="m 68.556274,210.90728 c -2.293676,-0.68242 -2.880675,-2.99702 -2.89518,-11.41603 -0.01025,-5.94721 0.16327,-7.96905 0.8512,-9.91843 0.533461,-1.51166 1.175311,-1.99041 3.044687,-2.271 1.814867,-0.27243 11.459517,-0.28622 15.293322,-0.0219 5.345509,0.48245 4.737665,4.05194 4.797522,11.13 0.06208,7.3381 -0.07728,8.93495 -0.942902,10.80584 -0.857753,1.85393 -0.528524,1.79528 -10.467486,1.86487 -5.046389,0.0354 -9.231633,-0.0396 -9.681163,-0.17336 z m 14.013699,-11.9128 c -9.225923,-6.1861 1.31465,0.90117 -8.167348,-5.4762 0.0541,2.97456 0.0086,8.38462 0.04076,11.04998 9.474933,-6.37668 -1.004697,0.69337 8.126587,-5.57378 z"
|
||||||
id="path11905"
|
id="path11905"
|
||||||
inkscape:connector-curvature="0"
|
inkscape:connector-curvature="0"
|
||||||
sodipodi:nodetypes="cssscccsccccc" />
|
sodipodi:nodetypes="cssscccsccccc" />
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
|
@ -18,17 +18,20 @@ Vn.App = new Class
|
||||||
});
|
});
|
||||||
this._isGuest.on ('changed', this._onGuestChange, this);
|
this._isGuest.on ('changed', this._onGuestChange, this);
|
||||||
|
|
||||||
this._conn = new Db.Conn ();
|
var conn = new Db.Conn ();
|
||||||
|
this.link ({_conn: conn}, {'error': this._onConnError});
|
||||||
}
|
}
|
||||||
|
|
||||||
,run: function ()
|
,run: function ()
|
||||||
{
|
{
|
||||||
|
var guest = Vn.Cookie.check ('hedera_guest');
|
||||||
|
|
||||||
if (Vn.Cookie.check ('vn_pass'))
|
if (Vn.Cookie.check ('vn_pass'))
|
||||||
{
|
{
|
||||||
this._conn.open (null, null, null,
|
this._conn.open (null, null, null,
|
||||||
this._onAutoLogin.bind (this));
|
this._onAutoLogin.bind (this));
|
||||||
}
|
}
|
||||||
else if (this._isGuest.value || Vn.Cookie.check ('hedera_guest'))
|
else if (this._isGuest.value || guest)
|
||||||
{
|
{
|
||||||
this._guestLogin ();
|
this._guestLogin ();
|
||||||
}
|
}
|
||||||
|
|
@ -38,6 +41,9 @@ Vn.App = new Class
|
||||||
login.on ('login', this._onLogin, this);
|
login.on ('login', this._onLogin, this);
|
||||||
login.show ();
|
login.show ();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (guest)
|
||||||
|
Vn.Cookie.unset ('hedera_guest');
|
||||||
}
|
}
|
||||||
|
|
||||||
,_onGuestChange: function ()
|
,_onGuestChange: function ()
|
||||||
|
|
@ -62,7 +68,6 @@ Vn.App = new Class
|
||||||
if (!success)
|
if (!success)
|
||||||
{
|
{
|
||||||
this._isGuest.value = false;
|
this._isGuest.value = false;
|
||||||
Vn.Cookie.unset ('hedera_guest');
|
|
||||||
this.run ();
|
this.run ();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
|
|
@ -118,6 +123,61 @@ Vn.App = new Class
|
||||||
this.unref ();
|
this.unref ();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
,_onConnError: function (conn, error)
|
||||||
|
{
|
||||||
|
if (error instanceof Vn.Error)
|
||||||
|
switch (error.domain)
|
||||||
|
{
|
||||||
|
case 'Auth':
|
||||||
|
Htk.Toast.showError (_('You\'ve been too idle'));
|
||||||
|
if (this._gui)
|
||||||
|
this._gui.logout ();
|
||||||
|
break;
|
||||||
|
case 'Version':
|
||||||
|
this._newVersion (error);
|
||||||
|
break;
|
||||||
|
case 'User':
|
||||||
|
Htk.Toast.showError (error.message);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error (error.message);
|
||||||
|
Htk.Toast.showError (_('There was an internal error'));
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
console.error (error);
|
||||||
|
Htk.Toast.showError (_('There was an internal error'));
|
||||||
|
this._notifyError (error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
,_newVersion: function (error)
|
||||||
|
{
|
||||||
|
if (this.newVersionBlock || this.skipVersion)
|
||||||
|
return;
|
||||||
|
|
||||||
|
this.newVersionBlock = true;
|
||||||
|
|
||||||
|
var reload;
|
||||||
|
var message = _('New version available') +"\n\n"+ error.message;
|
||||||
|
|
||||||
|
if (error.code == 'criticalVersion')
|
||||||
|
{
|
||||||
|
alert (message)
|
||||||
|
reload = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
reload = confirm (message);
|
||||||
|
this.skipVersion = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (reload)
|
||||||
|
location.reload ();
|
||||||
|
|
||||||
|
this.newVersionBlock = false;
|
||||||
|
}
|
||||||
|
|
||||||
,_notifyError: function (error)
|
,_notifyError: function (error)
|
||||||
{
|
{
|
||||||
if (error instanceof Error)
|
if (error instanceof Error)
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ Vn.Form = new Class
|
||||||
|
|
||||||
if (this.node)
|
if (this.node)
|
||||||
{
|
{
|
||||||
this.gui.formHolder.appendChild (this.node);
|
this.gui.setForm (this.node);
|
||||||
this.gui.setTitle (res.$('title'));
|
this.gui.setTitle (res.$('title'));
|
||||||
this.gui.setActions (res.$('actions'));
|
this.gui.setActions (res.$('actions'));
|
||||||
this.activate ();
|
this.activate ();
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,38 @@
|
||||||
|
|
||||||
.vn-gui
|
.vn-gui
|
||||||
{
|
{
|
||||||
position: absolute;
|
height: inherit;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Font */
|
/* Font */
|
||||||
|
|
||||||
.vn-gui .welcome,
|
.vn-gui .welcome,
|
||||||
|
.vn-gui .supplant > span,
|
||||||
.vn-gui .menu-title,
|
.vn-gui .menu-title,
|
||||||
.vn-gui .main-menu a
|
.vn-gui .main-menu a
|
||||||
{
|
{
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Navigation bar */
|
||||||
|
|
||||||
.vn-gui .top-bar,
|
.vn-gui .navbar,
|
||||||
.vn-gui .exit
|
.vn-gui .exit
|
||||||
{
|
{
|
||||||
height: 3.9em;
|
height: 3.9em;
|
||||||
}
|
}
|
||||||
.vn-gui .top-bar
|
.vn-gui .navbar
|
||||||
{
|
{
|
||||||
position: relative;
|
position: fixed;
|
||||||
background-color: #009688;
|
background-color: #009688;
|
||||||
width: 100%;
|
left: 15em;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 0.1em 0.1em rgba(1, 1, 1, 0.3);
|
box-shadow: 0 0.1em 0.1em rgba(1, 1, 1, 0.3);
|
||||||
}
|
}
|
||||||
.vn-gui .top-bar
|
.vn-gui .navbar
|
||||||
{
|
{
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
@ -68,7 +67,7 @@
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.vn-gui .top-bar > .htk-spinner
|
.vn-gui .navbar > .htk-spinner
|
||||||
{
|
{
|
||||||
float: left;
|
float: left;
|
||||||
margin: 1.05em .8em;
|
margin: 1.05em .8em;
|
||||||
|
|
@ -124,27 +123,40 @@
|
||||||
height: 1.4em;
|
height: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Body */
|
/* Background */
|
||||||
|
|
||||||
.vn-gui > .body
|
.vn-gui > .background
|
||||||
{
|
{
|
||||||
position: absolute;
|
z-index: 10;
|
||||||
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
|
||||||
left: 15em;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.vn-gui .content
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
top: 3.9em;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
background-color: rgba(1, 1, 1, 0.7);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.vn-gui > .background.show
|
||||||
|
{
|
||||||
|
visibility: visible;
|
||||||
|
transition: opacity 200ms ease-out;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left panel */
|
/* Left panel */
|
||||||
|
|
||||||
|
.vn-gui .left-panel
|
||||||
|
{
|
||||||
|
z-index: 20;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 20;
|
||||||
|
box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.4);
|
||||||
|
}
|
||||||
.vn-gui .menu-header
|
.vn-gui .menu-header
|
||||||
{
|
{
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
|
@ -171,8 +183,6 @@
|
||||||
}
|
}
|
||||||
.vn-gui .supplant > span
|
.vn-gui .supplant > span
|
||||||
{
|
{
|
||||||
font-size: 1.1em;
|
|
||||||
|
|
||||||
max-width: 10em;
|
max-width: 10em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -184,34 +194,12 @@
|
||||||
float: right;
|
float: right;
|
||||||
padding: .2em;
|
padding: .2em;
|
||||||
}
|
}
|
||||||
.vn-gui .background
|
|
||||||
{
|
|
||||||
z-index: 10;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgba(10, 10, 10, 0.6);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.vn-gui .left-panel,
|
.vn-gui .left-panel,
|
||||||
.vn-gui .main-menu > li,
|
.vn-gui .main-menu > li,
|
||||||
.vn-gui ul.submenu
|
.vn-gui ul.submenu
|
||||||
{
|
{
|
||||||
width: 15em;
|
width: 15em;
|
||||||
}
|
}
|
||||||
.vn-gui .left-panel
|
|
||||||
{
|
|
||||||
z-index: 20;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
|
||||||
background-color: white;
|
|
||||||
z-index: 20;
|
|
||||||
box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.4);
|
|
||||||
}
|
|
||||||
.vn-gui .menu-overflow
|
.vn-gui .menu-overflow
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -313,28 +301,41 @@
|
||||||
height: 1.8em;
|
height: 1.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Form holder */
|
/* Body */
|
||||||
|
|
||||||
|
.vn-gui > .body
|
||||||
|
{
|
||||||
|
margin-left: 15em;
|
||||||
|
padding-top: 3.9em;
|
||||||
|
height: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
.vn-gui .form-holder
|
.vn-gui .form-holder
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: 0em;
|
height: inherit;
|
||||||
bottom: 0;
|
opacity: 0;
|
||||||
right: 0;
|
transform: translateZ(0) translateX(-2em);
|
||||||
left: 0;
|
}
|
||||||
overflow: auto;
|
.vn-gui .form-holder.show
|
||||||
|
{
|
||||||
|
transition: 250ms ease-out all;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateZ(0) translateX(0em);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Transitions */
|
/* Transitions */
|
||||||
|
|
||||||
.vn-gui > .body
|
.vn-gui > .body
|
||||||
{
|
{
|
||||||
transition-property: left, right;
|
transition-property: margin-left, margin-right;
|
||||||
transition-duration: 200ms;
|
transition-duration: 200ms;
|
||||||
}
|
}
|
||||||
.vn-gui .top-bar
|
.vn-gui >.navbar
|
||||||
{
|
{
|
||||||
transition: background-color 300ms;
|
transition-property: left, background-color;
|
||||||
|
transition-duration: 200ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop */
|
/* Desktop */
|
||||||
|
|
@ -360,10 +361,14 @@
|
||||||
{
|
{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.vn-gui > .body
|
.vn-gui > .navbar
|
||||||
{
|
{
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
.vn-gui > .body
|
||||||
|
{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
.vn-gui .menu-button
|
.vn-gui .menu-button
|
||||||
{
|
{
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,7 @@ Vn.Gui = new Class
|
||||||
,set: function (x)
|
,set: function (x)
|
||||||
{
|
{
|
||||||
this.link ({_conn: x},
|
this.link ({_conn: x},
|
||||||
{
|
{'loading-changed': this._onConnLoadChange });
|
||||||
'error': this.onConnError
|
|
||||||
,'loading-changed': this._onConnLoadChange
|
|
||||||
});
|
|
||||||
|
|
||||||
var sql = 'SELECT default_form, image_dir, image_host FROM config;'
|
var sql = 'SELECT default_form, image_dir, image_host FROM config;'
|
||||||
+'SELECT production_domain, test_domain FROM config;'
|
+'SELECT production_domain, test_domain FROM config;'
|
||||||
|
|
@ -48,7 +45,6 @@ Vn.Gui = new Class
|
||||||
this.builderInit ('js/hedera/gui.xml');
|
this.builderInit ('js/hedera/gui.xml');
|
||||||
|
|
||||||
this.loadingCount = 0;
|
this.loadingCount = 0;
|
||||||
this.formHolder = this.$('form-holder');
|
|
||||||
|
|
||||||
this.hash = Vn.Hash;
|
this.hash = Vn.Hash;
|
||||||
this.hashParam = new Vn.HashParam ({key: 'form'});
|
this.hashParam = new Vn.HashParam ({key: 'form'});
|
||||||
|
|
@ -88,6 +84,11 @@ Vn.Gui = new Class
|
||||||
Vn.Node.remove (this.node);
|
Vn.Node.remove (this.node);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
,logout: function ()
|
||||||
|
{
|
||||||
|
this.onLogoutClick ();
|
||||||
|
}
|
||||||
|
|
||||||
,onLogoutClick: function ()
|
,onLogoutClick: function ()
|
||||||
{
|
{
|
||||||
this._conn.close (this.onConnClose.bind (this));
|
this._conn.close (this.onConnClose.bind (this));
|
||||||
|
|
@ -100,12 +101,12 @@ Vn.Gui = new Class
|
||||||
|
|
||||||
,showBackground: function ()
|
,showBackground: function ()
|
||||||
{
|
{
|
||||||
Vn.Node.show (this.$('background'));
|
Vn.Node.addClass (this.$('background'), 'show');
|
||||||
}
|
}
|
||||||
|
|
||||||
,hideBackground: function ()
|
,hideBackground: function ()
|
||||||
{
|
{
|
||||||
Vn.Node.hide (this.$('background'));
|
Vn.Node.removeClass (this.$('background'), 'show');
|
||||||
}
|
}
|
||||||
|
|
||||||
,showMenu: function ()
|
,showMenu: function ()
|
||||||
|
|
@ -198,54 +199,6 @@ Vn.Gui = new Class
|
||||||
this._onFormChange ();
|
this._onFormChange ();
|
||||||
}
|
}
|
||||||
|
|
||||||
,notifyError: function (error)
|
|
||||||
{
|
|
||||||
if (error instanceof Error)
|
|
||||||
{
|
|
||||||
var httpRequest = new Vn.HttpRequest ()
|
|
||||||
httpRequest.add
|
|
||||||
({
|
|
||||||
'file': error.fileName
|
|
||||||
,'line': error.lineNumber
|
|
||||||
,'message': error.message
|
|
||||||
,'stack': error.stack
|
|
||||||
});
|
|
||||||
httpRequest.send ('log.php');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
,errorHandler: function (error)
|
|
||||||
{
|
|
||||||
if (error instanceof Vn.Error)
|
|
||||||
switch (error.domain)
|
|
||||||
{
|
|
||||||
case 'Auth':
|
|
||||||
Htk.Toast.showError (_('You\'ve been too idle'));
|
|
||||||
this.signalEmit ('logout');
|
|
||||||
break;
|
|
||||||
case 'Version':
|
|
||||||
this.newVersion (error);
|
|
||||||
break;
|
|
||||||
case 'User':
|
|
||||||
Htk.Toast.showError (error.message);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.error (error.message);
|
|
||||||
Htk.Toast.showError (_('There was an internal error'));
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
console.error (error);
|
|
||||||
Htk.Toast.showError (_('There was an internal error'));
|
|
||||||
this.notifyError (error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
,onConnError: function (conn, error)
|
|
||||||
{
|
|
||||||
this.errorHandler (error);
|
|
||||||
}
|
|
||||||
|
|
||||||
,_onConnLoadChange: function (conn, isLoading)
|
,_onConnLoadChange: function (conn, isLoading)
|
||||||
{
|
{
|
||||||
if (isLoading)
|
if (isLoading)
|
||||||
|
|
@ -273,33 +226,6 @@ Vn.Gui = new Class
|
||||||
this.$('loader').stop ();
|
this.$('loader').stop ();
|
||||||
}
|
}
|
||||||
|
|
||||||
,newVersion: function (error)
|
|
||||||
{
|
|
||||||
if (this.newVersionBlock || this.skipVersion)
|
|
||||||
return;
|
|
||||||
|
|
||||||
this.newVersionBlock = true;
|
|
||||||
|
|
||||||
var reload;
|
|
||||||
var message = _('New version available') +"\n\n"+ error.message;
|
|
||||||
|
|
||||||
if (error.code == 'criticalVersion')
|
|
||||||
{
|
|
||||||
alert (message)
|
|
||||||
reload = true;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
reload = confirm (message);
|
|
||||||
this.skipVersion = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (reload)
|
|
||||||
location.reload ();
|
|
||||||
|
|
||||||
this.newVersionBlock = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Menu
|
//++++++++++++++++++++++++++++++++++++++++++++++++++++++ Menu
|
||||||
|
|
||||||
,createMenu: function (res, sectionMap, parent, ul)
|
,createMenu: function (res, sectionMap, parent, ul)
|
||||||
|
|
@ -428,6 +354,23 @@ Vn.Gui = new Class
|
||||||
|
|
||||||
this.activeForm = new formInfo.klass (this, formInfo);
|
this.activeForm = new formInfo.klass (this, formInfo);
|
||||||
this.activeForm.open ();
|
this.activeForm.open ();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
,setForm: function (form)
|
||||||
|
{
|
||||||
|
Vn.Node.removeChilds (this.$('form-holder'));
|
||||||
|
|
||||||
|
if (form)
|
||||||
|
{
|
||||||
|
this.$('form-holder').appendChild (form);
|
||||||
|
setTimeout (this._onSetFormTimeout.bind (this), 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
,_onSetFormTimeout: function ()
|
||||||
|
{
|
||||||
|
Vn.Node.addClass (this.$('form-holder'), 'show');
|
||||||
}
|
}
|
||||||
|
|
||||||
,setTitle: function (title)
|
,setTitle: function (title)
|
||||||
|
|
@ -450,6 +393,7 @@ Vn.Gui = new Class
|
||||||
{
|
{
|
||||||
if (this.activeForm)
|
if (this.activeForm)
|
||||||
{
|
{
|
||||||
|
Vn.Node.removeClass (this.$('form-holder'), 'show');
|
||||||
this.activeForm.close ();
|
this.activeForm.close ();
|
||||||
this.activeForm.unref ();
|
this.activeForm.unref ();
|
||||||
this.activeForm = null;
|
this.activeForm = null;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,16 @@
|
||||||
<vn>
|
<vn>
|
||||||
<div id="main" class="vn-gui">
|
<div id="main" class="vn-gui">
|
||||||
|
<div id="top-bar" class="navbar">
|
||||||
|
<button id="menu-button" class="menu-button">
|
||||||
|
<img src="image/dark/menu.svg" alt="_Menu"/>
|
||||||
|
</button>
|
||||||
|
<button class="exit" on-click="onLogoutClick" title="_Exit">
|
||||||
|
<img src="image/dark/exit.svg" alt="_Exit"/>
|
||||||
|
</button>
|
||||||
|
<div id="action-bar" class="action-bar"/>
|
||||||
|
<div id="title" class="title"/>
|
||||||
|
<htk-spinner id="loader" class="loader dark"/>
|
||||||
|
</div>
|
||||||
<div id="left-panel" class="left-panel">
|
<div id="left-panel" class="left-panel">
|
||||||
<div class="menu-overflow">
|
<div class="menu-overflow">
|
||||||
<div class="menu-header" id="menu-header">
|
<div class="menu-header" id="menu-header">
|
||||||
|
|
@ -31,20 +42,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div id="top-bar" class="top-bar">
|
<div id="form-holder" class="form-holder"/>
|
||||||
<button id="menu-button" class="menu-button">
|
|
||||||
<img src="image/dark/menu.svg" alt="_Menu"/>
|
|
||||||
</button>
|
|
||||||
<button class="exit" on-click="onLogoutClick" title="_Exit">
|
|
||||||
<img src="image/dark/exit.svg" alt="_Exit"/>
|
|
||||||
</button>
|
|
||||||
<div id="action-bar" class="action-bar"/>
|
|
||||||
<div id="title" class="title"/>
|
|
||||||
<htk-spinner id="loader" class="loader dark"/>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div id="form-holder" class="form-holder"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="background" class="background"/>
|
<div id="background" class="background"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,48 @@
|
||||||
|
|
||||||
.vn-login,
|
body
|
||||||
.vn-login label,
|
|
||||||
.vn-login button,
|
|
||||||
.vn-login input,
|
|
||||||
.vn-login textarea,
|
|
||||||
.vn-login p,
|
|
||||||
.vn-login a
|
|
||||||
{
|
{
|
||||||
font-size: 1.1em;
|
overflow: auto;
|
||||||
font-weight: normal;
|
height: 100%;
|
||||||
/* text-shadow: 0 0.2em 0.2em #AAA; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
|
||||||
|
|
||||||
.vn-login
|
.vn-login
|
||||||
{
|
{
|
||||||
color: #333;
|
color: #333;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: normal;
|
||||||
|
height: inherit;
|
||||||
}
|
}
|
||||||
.vn-login .header
|
|
||||||
|
/* Navigation bar */
|
||||||
|
|
||||||
|
.vn-login .navbar
|
||||||
{
|
{
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.5em;
|
height: 3.5em;
|
||||||
|
top: 0;
|
||||||
|
color: white;
|
||||||
|
|
||||||
}
|
}
|
||||||
.vn-login .header div
|
.vn-login .navbar div
|
||||||
{
|
{
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.vn-login .header a
|
|
||||||
{
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Body */
|
/* Body */
|
||||||
|
|
||||||
.vn-login .body
|
.vn-login .body
|
||||||
{
|
{
|
||||||
position: absolute;
|
height: inherit;
|
||||||
top: 3.5em;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
/* background-image: url("background.png");
|
|
||||||
background-repeat: repeat;
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
.vn-login .column
|
.vn-login .column
|
||||||
{
|
{
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow: auto;
|
|
||||||
max-width: 40em;
|
max-width: 40em;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -66,7 +54,7 @@
|
||||||
.vn-login .login
|
.vn-login .login
|
||||||
{
|
{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: -17em;
|
margin-top: -16em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
max-width: 45em;
|
max-width: 45em;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
@ -74,6 +62,20 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@media (max-height: 700px)
|
||||||
|
{
|
||||||
|
.vn-login
|
||||||
|
{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.vn-login .login
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
margin-top: 3.5em;
|
||||||
|
padding: 1.5em 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
.vn-login .logo img
|
.vn-login .logo img
|
||||||
{
|
{
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -87,25 +89,24 @@
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin: 0.2em auto;
|
margin: 0.2em auto;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 1.6em;
|
height: 1.4em;
|
||||||
}
|
}
|
||||||
.vn-login .form-inputs
|
.vn-login .form-inputs
|
||||||
{
|
{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 16em;
|
max-width: 15em;
|
||||||
}
|
}
|
||||||
.vn-login label
|
.vn-login label
|
||||||
{
|
{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.vn-login div.form-group label
|
.vn-login .form-group label
|
||||||
{
|
{
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
.vn-login input
|
.vn-login input
|
||||||
{
|
{
|
||||||
border-radius: 0.1em;
|
|
||||||
box-shadow: 0 0.1em 0.1em #AAA;
|
|
||||||
margin: 0.3em;
|
margin: 0.3em;
|
||||||
}
|
}
|
||||||
.vn-login input[type=text],
|
.vn-login input[type=text],
|
||||||
|
|
@ -118,6 +119,13 @@
|
||||||
border: 1px solid #AAA;
|
border: 1px solid #AAA;
|
||||||
height: 2.6em;
|
height: 2.6em;
|
||||||
}
|
}
|
||||||
|
.vn-login input[type=text],
|
||||||
|
.vn-login input[type=password],
|
||||||
|
.vn-login input[type=submit]
|
||||||
|
{
|
||||||
|
border-radius: 0.1em;
|
||||||
|
box-shadow: 0 0.1em 0.1em #AAA;
|
||||||
|
}
|
||||||
.vn-login td.entry
|
.vn-login td.entry
|
||||||
{
|
{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
@ -178,8 +186,14 @@
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.vn-login .links a
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 .1em;
|
||||||
|
}
|
||||||
.vn-login .links img
|
.vn-login .links img
|
||||||
{
|
{
|
||||||
height: 1.8em;
|
height: 1.8em;
|
||||||
|
width: 1.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<vn>
|
<vn>
|
||||||
<div id="main" class="vn-login">
|
<div id="main" class="vn-login">
|
||||||
<div class="header">
|
<div class="navbar">
|
||||||
<div>
|
<div>
|
||||||
<a href="#!form=cms/about&guest=true">
|
<a href="#!form=cms/about&guest=true">
|
||||||
<t>I want to know more</t>
|
<t>I want to know more</t>
|
||||||
|
|
|
||||||
|
|
@ -64,10 +64,6 @@ Vn.Report = new Class
|
||||||
{
|
{
|
||||||
Htk.Toast.showError (
|
Htk.Toast.showError (
|
||||||
_('Please unlock popups and try again'));
|
_('Please unlock popups and try again'));
|
||||||
|
|
||||||
if (callback)
|
|
||||||
callback (null);
|
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,11 @@
|
||||||
{
|
{
|
||||||
body { font-size: 11pt; }
|
body { font-size: 11pt; }
|
||||||
}
|
}
|
||||||
@media (min-resolution: 95dpi) and (max-resolution: 119dpi)
|
@media (max-resolution: 119dpi) and (min-device-width: 1340px)
|
||||||
|
{
|
||||||
|
body { font-size: 12pt; }
|
||||||
|
}
|
||||||
|
@media (max-resolution: 119dpi) and (min-device-width: 1900px)
|
||||||
{
|
{
|
||||||
body { font-size: 13pt; }
|
body { font-size: 13pt; }
|
||||||
}
|
}
|
||||||
|
|
@ -23,8 +27,8 @@
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
color: #333;
|
color: #333;
|
||||||
margin: 0;
|
|
||||||
font-family: 'Open Sans', 'Verdana', 'Sans';
|
font-family: 'Open Sans', 'Verdana', 'Sans';
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
label,
|
label,
|
||||||
button,
|
button,
|
||||||
|
|
@ -35,13 +39,13 @@ option
|
||||||
{
|
{
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
iframe
|
iframe
|
||||||
{
|
{
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
fieldset,
|
fieldset
|
||||||
div
|
|
||||||
{
|
{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -58,7 +62,7 @@ a:link,
|
||||||
a:visited,
|
a:visited,
|
||||||
a:active
|
a:active
|
||||||
{
|
{
|
||||||
color: #000;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
a:hover
|
a:hover
|
||||||
|
|
@ -70,6 +74,10 @@ a img
|
||||||
{
|
{
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
a img:hover
|
||||||
|
{
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
h1, h2, h3, h4, h5, h6
|
h1, h2, h3, h4, h5, h6
|
||||||
{
|
{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -90,7 +98,9 @@ p
|
||||||
|
|
||||||
/* Focus outline */
|
/* Focus outline */
|
||||||
|
|
||||||
*:focus
|
a:focus,
|
||||||
|
input:focus,
|
||||||
|
button:focus
|
||||||
{
|
{
|
||||||
outline: 1px solid rgba(1, 1, 1, 0.15);
|
outline: 1px solid rgba(1, 1, 1, 0.15);
|
||||||
-moz-outline-radius: .1em;
|
-moz-outline-radius: .1em;
|
||||||
|
|
@ -104,7 +114,6 @@ input[type=reset]::-moz-focus-inner
|
||||||
}
|
}
|
||||||
select:-moz-focusring
|
select:-moz-focusring
|
||||||
{
|
{
|
||||||
outline: none;
|
|
||||||
/* color: transparent;
|
/* color: transparent;
|
||||||
text-shadow: 0 0 0 #333;*/
|
text-shadow: 0 0 0 #333;*/
|
||||||
}
|
}
|
||||||
|
|
@ -121,17 +130,18 @@ select,
|
||||||
{
|
{
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid #999;
|
border-bottom: 1px solid #999;
|
||||||
margin: .2em;
|
margin: .2em 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #333;
|
color: #333;
|
||||||
/* border-radius: 0.1em;
|
border-radius: 0;
|
||||||
border: .1em solid #CCD;
|
text-align: left;
|
||||||
box-shadow: 0 0.1em 0.1em #CCC;*/
|
width: 100%;
|
||||||
}
|
}
|
||||||
input[type=text],
|
input[type=text],
|
||||||
input[type=password],
|
input[type=password],
|
||||||
input[type=number],
|
input[type=number],
|
||||||
textarea
|
textarea,
|
||||||
|
.input
|
||||||
{
|
{
|
||||||
padding: 0 .2em;
|
padding: 0 .2em;
|
||||||
}
|
}
|
||||||
|
|
@ -139,7 +149,8 @@ input[type=text],
|
||||||
input[type=password],
|
input[type=password],
|
||||||
input[type=file],
|
input[type=file],
|
||||||
input[type=number],
|
input[type=number],
|
||||||
select
|
select,
|
||||||
|
.input
|
||||||
{
|
{
|
||||||
height: 2.2em;
|
height: 2.2em;
|
||||||
}
|
}
|
||||||
|
|
@ -152,7 +163,8 @@ input[type=text]:focus,
|
||||||
input[type=password]:focus,
|
input[type=password]:focus,
|
||||||
input[type=file]:focus,
|
input[type=file]:focus,
|
||||||
input[type=number]:focus,
|
input[type=number]:focus,
|
||||||
textarea:focus
|
textarea:focus,
|
||||||
|
.input:focus
|
||||||
{
|
{
|
||||||
border-color: #333;
|
border-color: #333;
|
||||||
}
|
}
|
||||||
|
|
@ -193,7 +205,6 @@ input[type=reset]
|
||||||
{
|
{
|
||||||
border: none;
|
border: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: white;
|
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0.1em;
|
border-radius: 0.1em;
|
||||||
|
|
@ -233,15 +244,9 @@ input.button:disabled
|
||||||
|
|
||||||
button.thin
|
button.thin
|
||||||
{
|
{
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
color: #008D77;
|
color: #008D77;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
button.thin:hover
|
|
||||||
{
|
|
||||||
background-color: rgba(1,1,1,0.1);
|
|
||||||
}
|
|
||||||
button.thin:disabled
|
button.thin:disabled
|
||||||
{
|
{
|
||||||
color: gray;
|
color: gray;
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
Htk.Select = new Class
|
Htk.Select = new Class
|
||||||
({
|
({
|
||||||
Extends: Htk.Field
|
Extends: Htk.Field
|
||||||
|
|
@ -13,7 +14,7 @@ Htk.Select = new Class
|
||||||
type: Db.Model
|
type: Db.Model
|
||||||
,set: function (x)
|
,set: function (x)
|
||||||
{
|
{
|
||||||
this.link ({_model: x}, {'status-changed': this._onModelChange});
|
this.link ({_model: x}, {'status-changed-after': this._onModelChange});
|
||||||
this._onModelChange ();
|
this._onModelChange ();
|
||||||
}
|
}
|
||||||
,get: function ()
|
,get: function ()
|
||||||
|
|
@ -76,9 +77,7 @@ Htk.Select = new Class
|
||||||
,set: function (x)
|
,set: function (x)
|
||||||
{
|
{
|
||||||
this._placeholder = x;
|
this._placeholder = x;
|
||||||
|
this._refreshShowText (x);
|
||||||
if (this._placeholderNode)
|
|
||||||
Vn.Node.setText (this._placeholderNode, x);
|
|
||||||
}
|
}
|
||||||
,get: function ()
|
,get: function ()
|
||||||
{
|
{
|
||||||
|
|
@ -113,15 +112,10 @@ Htk.Select = new Class
|
||||||
|
|
||||||
,initialize: function (props)
|
,initialize: function (props)
|
||||||
{
|
{
|
||||||
var select = this.createElement ('select');
|
var button = this.createElement ('button');
|
||||||
select.addEventListener ('change', this._onChange.bind (this));
|
button.className = 'htk-select input';
|
||||||
|
button.addEventListener ('mousedown', this._onButtonMouseDown.bind (this));
|
||||||
|
|
||||||
// Webkit bug: Does not refresh select options
|
|
||||||
if (navigator.userAgent.match (/WebKit/))
|
|
||||||
select.addEventListener ('mousedown',
|
|
||||||
this._onWebkitMouseDown.bind (this));
|
|
||||||
|
|
||||||
this._addPlaceholder (this._placeholder);
|
|
||||||
this.parent (props);
|
this.parent (props);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -140,109 +134,104 @@ Htk.Select = new Class
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
,setRow: function (row)
|
,_setRow: function (row)
|
||||||
{
|
{
|
||||||
if (row != -1)
|
|
||||||
this.node.selectedIndex = row + this.getIndexIncrement ();
|
|
||||||
else if (this._placeholder)
|
|
||||||
this.node.selectedIndex = 0;
|
|
||||||
else
|
|
||||||
this.node.selectedIndex = -1;
|
|
||||||
|
|
||||||
this._row = row;
|
this._row = row;
|
||||||
|
this._refreshShowText ();
|
||||||
this.iterChanged ();
|
this.iterChanged ();
|
||||||
}
|
}
|
||||||
|
|
||||||
,_onChange: function (event)
|
,_onButtonMouseDown: function (e)
|
||||||
{
|
{
|
||||||
|
if (this._popup)
|
||||||
|
{
|
||||||
|
this._popup.hide ();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var model = this._model;
|
||||||
|
|
||||||
|
var menu = document.createElement ('div');
|
||||||
|
menu.className = 'htk-select-menu';
|
||||||
|
|
||||||
|
var grid = new Htk.Grid ({showHeader: false});
|
||||||
|
menu.appendChild (grid.getNode ());
|
||||||
|
|
||||||
|
var gridNode = grid.getNode ();
|
||||||
|
gridNode.addEventListener ('click', this._onGridClicked.bind (this, grid));
|
||||||
|
|
||||||
|
var column = new Htk.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);
|
||||||
|
|
||||||
|
this.signalEmit ('menu-show');
|
||||||
|
|
||||||
|
e.stopPropagation ();
|
||||||
|
}
|
||||||
|
|
||||||
|
,_onGridClicked: function (grid, e)
|
||||||
|
{
|
||||||
|
var target = e.target;
|
||||||
|
var parentNode = target.parentNode;
|
||||||
|
|
||||||
|
while (parentNode !== grid.tbody)
|
||||||
|
{
|
||||||
|
target = parentNode;
|
||||||
|
parentNode = parentNode.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
var value;
|
var value;
|
||||||
var row = this.node.selectedIndex - this.getIndexIncrement ();
|
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 ();
|
||||||
|
|
||||||
|
e.stopPropagation ();
|
||||||
}
|
}
|
||||||
|
|
||||||
,getIndexIncrement: function ()
|
,_onPopupClose: function ()
|
||||||
{
|
{
|
||||||
var inc = 0;
|
this._popup = null;
|
||||||
|
this.signalEmit ('menu-hide');
|
||||||
if (this._placeholder)
|
|
||||||
inc++;
|
|
||||||
if (!this._notNull)
|
|
||||||
inc++;
|
|
||||||
|
|
||||||
return inc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
,addOption: function (value, text)
|
,_refreshShowText: function ()
|
||||||
{
|
{
|
||||||
var option = document.createElement ('option');
|
if (this._row !== -1)
|
||||||
option.value = value;
|
var showText = this._model.getByIndex (this._row, this.showColumnIndex);
|
||||||
|
else if (this._placeholder)
|
||||||
|
var showText = this._placeholder;
|
||||||
|
else
|
||||||
|
var showText = '';
|
||||||
|
|
||||||
if (text)
|
Vn.Node.setText (this.node, showText);
|
||||||
option.appendChild (document.createTextNode (text));
|
|
||||||
|
|
||||||
this.node.appendChild (option);
|
|
||||||
}
|
|
||||||
|
|
||||||
,_addPlaceholder: function (text)
|
|
||||||
{
|
|
||||||
var option = document.createElement ('option');
|
|
||||||
option.className = 'htk-option';
|
|
||||||
option.disabled = true;
|
|
||||||
option.selected = true;
|
|
||||||
option.value = null;
|
|
||||||
Vn.Node.setText (option, text ? text : '');
|
|
||||||
this.node.appendChild (option);
|
|
||||||
this._placeholderNode = option;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
,_onModelChange: function ()
|
,_onModelChange: function ()
|
||||||
{
|
{
|
||||||
var placeholder = null;
|
|
||||||
var model = this._model;
|
var model = this._model;
|
||||||
this.signalEmit ('status-changed');
|
this.signalEmit ('status-changed');
|
||||||
|
|
||||||
Vn.Node.removeChilds (this.node);
|
if (this._popup)
|
||||||
|
this._popup.reset ();
|
||||||
switch (model.status)
|
|
||||||
{
|
|
||||||
case Db.Model.Status.ERROR:
|
|
||||||
placeholder = _('Error');
|
|
||||||
break;
|
|
||||||
case Db.Model.Status.LOADING:
|
|
||||||
placeholder = _('Loading...');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
placeholder = this._placeholder;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (placeholder)
|
|
||||||
this._addPlaceholder (placeholder);
|
|
||||||
|
|
||||||
if (model.ready)
|
if (model.ready)
|
||||||
{
|
{
|
||||||
var data = model.data;
|
this._selectOption ();
|
||||||
|
|
||||||
if (!this.notNull)
|
|
||||||
this.addOption (null, null);
|
|
||||||
|
|
||||||
for (var i = 0; i < data.length; i++)
|
|
||||||
this.addOption (data[i][this.showColumnIndex], data[i][1]);
|
|
||||||
|
|
||||||
this.selectOption ();
|
|
||||||
this.signalEmit ('ready');
|
this.signalEmit ('ready');
|
||||||
|
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
this.setRow (-1);
|
this._setRow (-1);
|
||||||
|
|
||||||
this._webkitRefreshOptions ();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
,setEditable: function (editable)
|
,setEditable: function (editable)
|
||||||
|
|
@ -250,7 +239,7 @@ Htk.Select = new Class
|
||||||
this.node.disabled = !editable;
|
this.node.disabled = !editable;
|
||||||
}
|
}
|
||||||
|
|
||||||
,selectOption: function ()
|
,_selectOption: function ()
|
||||||
{
|
{
|
||||||
var row;
|
var row;
|
||||||
|
|
||||||
|
|
@ -259,46 +248,11 @@ Htk.Select = new Class
|
||||||
else
|
else
|
||||||
row = -1;
|
row = -1;
|
||||||
|
|
||||||
this.setRow (row);
|
this._setRow (row);
|
||||||
}
|
}
|
||||||
|
|
||||||
,putValue: function (value)
|
,putValue: function (value)
|
||||||
{
|
{
|
||||||
this.selectOption ();
|
this._selectOption ();
|
||||||
}
|
|
||||||
|
|
||||||
// Webkit bug: Does not refresh select options
|
|
||||||
|
|
||||||
,_webkitRefreshOptions: function ()
|
|
||||||
{
|
|
||||||
if (document.activeElement === this.node && this._webkitRefresh)
|
|
||||||
{
|
|
||||||
if (this._model.ready)
|
|
||||||
this._webkitRefresh = false;
|
|
||||||
|
|
||||||
this.node.blur();
|
|
||||||
this.node.focus ();
|
|
||||||
setTimeout (this._onWebkitTimeout.bind (this), 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
,_onWebkitMouseDown: function ()
|
|
||||||
{
|
|
||||||
if (this._webkitBlock)
|
|
||||||
return;
|
|
||||||
|
|
||||||
this._webkitRefresh = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
,_onWebkitTimeout: function ()
|
|
||||||
{
|
|
||||||
this._webkitBlock = true;
|
|
||||||
|
|
||||||
var e = document.createEvent('MouseEvents');
|
|
||||||
e.initMouseEvent ('mousedown',
|
|
||||||
true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
|
||||||
this.node.dispatchEvent(e);
|
|
||||||
|
|
||||||
this._webkitBlock = false;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,61 @@ Htk.Popup = new Class
|
||||||
({
|
({
|
||||||
Extends: Htk.Widget
|
Extends: Htk.Widget
|
||||||
,Tag: 'htk-popup'
|
,Tag: 'htk-popup'
|
||||||
|
,Properties:
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* The popup child.
|
||||||
|
**/
|
||||||
|
child:
|
||||||
|
{
|
||||||
|
type: Htk.Widget
|
||||||
|
,set: function (x)
|
||||||
|
{
|
||||||
|
this._child = x;
|
||||||
|
this.setChildNode (x.getNode ());
|
||||||
|
}
|
||||||
|
,get: function ()
|
||||||
|
{
|
||||||
|
return this._child;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* The popup child Node.
|
||||||
|
**/
|
||||||
|
,childNode:
|
||||||
|
{
|
||||||
|
type: Object
|
||||||
|
,set: function (x)
|
||||||
|
{
|
||||||
|
this._child = null;
|
||||||
|
this.setChildNode (x);
|
||||||
|
}
|
||||||
|
,get: function ()
|
||||||
|
{
|
||||||
|
return this.node.firstChild;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Indicates how the dialog must be displayed.
|
||||||
|
**/
|
||||||
|
,modal:
|
||||||
|
{
|
||||||
|
type: Boolean
|
||||||
|
,set: function (x)
|
||||||
|
{
|
||||||
|
this._modal = x;
|
||||||
|
}
|
||||||
|
,get: function ()
|
||||||
|
{
|
||||||
|
return this._modal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
,_parent: null
|
,_parent: null
|
||||||
|
,_modal: false
|
||||||
|
,_isOpen: false
|
||||||
|
,_child: null
|
||||||
|
|
||||||
,initialize: function (props)
|
,initialize: function (props)
|
||||||
{
|
{
|
||||||
|
|
@ -29,78 +82,126 @@ Htk.Popup = new Class
|
||||||
|
|
||||||
,show: function (parent)
|
,show: function (parent)
|
||||||
{
|
{
|
||||||
document.body.appendChild (this.node);
|
|
||||||
|
|
||||||
this.node.addEventListener ('mousedown', this.stopEvent);
|
|
||||||
|
|
||||||
this.hideHandler = this.hide.bind (this);
|
|
||||||
document.addEventListener ('mousedown', this.hideHandler);
|
|
||||||
|
|
||||||
this._parent = parent;
|
this._parent = parent;
|
||||||
|
this.open ();
|
||||||
|
}
|
||||||
|
|
||||||
|
,isModal: function ()
|
||||||
|
{
|
||||||
|
return this._modal || Vn.isMobile ();
|
||||||
|
}
|
||||||
|
|
||||||
|
,open: function ()
|
||||||
|
{
|
||||||
|
this.node.addEventListener ('mousedown', this._stopEvent);
|
||||||
|
|
||||||
|
this._hideHandler = this.hide.bind (this);
|
||||||
|
document.addEventListener ('mousedown', this._hideHandler);
|
||||||
|
|
||||||
|
if (this.isModal ())
|
||||||
|
{
|
||||||
|
this._background = document.createElement ('div');
|
||||||
|
this._background.className = 'htk-background';
|
||||||
|
document.body.appendChild (this._background);
|
||||||
|
|
||||||
|
setTimeout (this._onOpacityTimeout.bind (this), 0);
|
||||||
|
|
||||||
|
Vn.Node.addClass (this.node, 'modal');
|
||||||
|
}
|
||||||
|
|
||||||
|
this._isOpen = true;
|
||||||
|
document.body.appendChild (this.node);
|
||||||
|
this.reset ();
|
||||||
|
setTimeout (this._onResetTimeout.bind (this), 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
,_onOpacityTimeout: function ()
|
||||||
|
{
|
||||||
|
if (this._background)
|
||||||
|
this._background.style.opacity = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
,_onResetTimeout: function ()
|
||||||
|
{
|
||||||
this.reset ();
|
this.reset ();
|
||||||
}
|
}
|
||||||
|
|
||||||
,reset: function ()
|
,reset: function ()
|
||||||
{
|
{
|
||||||
if (!this._parent)
|
if (!this._isOpen)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
var spacing = 5;
|
var margin = 20;
|
||||||
var rect = this._parent.getBoundingClientRect ();
|
var dblMargin = margin * 2;
|
||||||
var left = rect.left;
|
|
||||||
var top = rect.top + spacing + this._parent.offsetHeight;
|
|
||||||
|
|
||||||
var width = this.node.offsetWidth;
|
var width = this.node.offsetWidth;
|
||||||
var height = this.node.offsetHeight;
|
var height = this.node.offsetHeight;
|
||||||
|
var innerWidth = Vn.Browser.getInnerWidth ();
|
||||||
|
var innerHeight = Vn.Browser.getInnerHeight ();
|
||||||
|
var style = this.node.style;
|
||||||
|
|
||||||
if (left + width > Vn.Browser.getInnerWidth ())
|
if (width + dblMargin > innerWidth)
|
||||||
left -= width - this._parent.offsetWidth;
|
{
|
||||||
if (top + height > Vn.Browser.getInnerHeight ())
|
width = innerWidth - dblMargin;
|
||||||
top -= height + this._parent.offsetHeight + spacing * 2;
|
style.width = width +'px';
|
||||||
|
}
|
||||||
|
if (height + dblMargin > innerHeight)
|
||||||
|
{
|
||||||
|
height = innerHeight - dblMargin;
|
||||||
|
style.height = height +'px';
|
||||||
|
}
|
||||||
|
|
||||||
if (left < 0)
|
if (this.isModal ())
|
||||||
left = 0;
|
{
|
||||||
if (top < 0)
|
style.top = '50%';
|
||||||
top = 0;
|
style.left = '50%';
|
||||||
|
|
||||||
this.node.style.top = (top) +'px';
|
style.marginLeft = (-this.node.offsetWidth / 2) +'px';
|
||||||
this.node.style.left = (left) +'px';
|
style.marginTop = (-this.node.offsetHeight / 2) +'px';
|
||||||
}
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var spacing = 4;
|
||||||
|
var rect = this._parent.getBoundingClientRect ();
|
||||||
|
var left = rect.left;
|
||||||
|
var top = rect.top + spacing + this._parent.offsetHeight;
|
||||||
|
|
||||||
,showCenter: function ()
|
if (left + width > innerWidth)
|
||||||
{
|
left -= (left + width) - Vn.Browser.getInnerWidth () + margin;
|
||||||
this._parent = null;
|
if (top + height > innerHeight)
|
||||||
|
top -= height + this._parent.offsetHeight + spacing * 2;
|
||||||
|
|
||||||
this.background = document.createElement ('div');
|
if (left < 0)
|
||||||
this.background.className = 'htk-background';
|
left = margin;
|
||||||
document.body.appendChild (this.background);
|
if (top < 0)
|
||||||
|
top = margin;
|
||||||
document.body.appendChild (this.node);
|
|
||||||
|
|
||||||
var width = this.node.offsetWidth;
|
|
||||||
var height = this.node.offsetHeight;
|
|
||||||
|
|
||||||
this.node.style.top = '50%';
|
|
||||||
this.node.style.left = '50%';
|
|
||||||
this.node.style.marginLeft = (-this.node.offsetWidth / 2) +'px';
|
|
||||||
this.node.style.marginTop = (-this.node.offsetHeight / 2) +'px';
|
|
||||||
|
|
||||||
|
style.top = (top) +'px';
|
||||||
|
style.left = (left) +'px';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
,hide: function ()
|
,hide: function ()
|
||||||
{
|
{
|
||||||
if (this.background)
|
if (!this._isOpen)
|
||||||
Vn.Node.remove (this.background);
|
return;
|
||||||
|
|
||||||
this.node.removeEventListener ('mousedown', this.stopEvent)
|
if (this._background)
|
||||||
document.removeEventListener ('mousedown', this.hideHandler);
|
{
|
||||||
|
Vn.Node.remove (this._background);
|
||||||
|
Vn.Node.removeClass (this.node, 'modal');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.node.removeEventListener ('mousedown', this._stopEvent)
|
||||||
|
document.removeEventListener ('mousedown', this._hideHandler);
|
||||||
Vn.Node.remove (this.node);
|
Vn.Node.remove (this.node);
|
||||||
this._parent = null;
|
this._parent = null;
|
||||||
|
this._isOpen = false;
|
||||||
this.signalEmit ('closed');
|
this.signalEmit ('closed');
|
||||||
}
|
}
|
||||||
|
|
||||||
,stopEvent: function (event)
|
,_stopEvent: function (e)
|
||||||
{
|
{
|
||||||
event.stopPropagation ();
|
e.stopPropagation ();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -132,11 +132,41 @@ td.cell-image img
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Combo */
|
/* Select */
|
||||||
|
|
||||||
.htk-option
|
.htk-select
|
||||||
{
|
{
|
||||||
/* color: #999;*/
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button */
|
/* Button */
|
||||||
|
|
@ -248,17 +278,6 @@ td.cell-image img
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Date chooser */
|
|
||||||
|
|
||||||
.htk-date-chooser > button
|
|
||||||
{
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
padding: .4em .2em;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image */
|
/* Image */
|
||||||
|
|
||||||
.htk-image.editable:hover
|
.htk-image.editable:hover
|
||||||
|
|
@ -342,8 +361,18 @@ td.cell-image img
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 0.1em;
|
border-radius: 0.1em;
|
||||||
box-shadow: 0 0 0.4em #666;
|
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
|
||||||
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
|
.htk-popup > *
|
||||||
|
{
|
||||||
|
border-radius: 0.1em;
|
||||||
|
}
|
||||||
|
.htk-popup.modal
|
||||||
|
{
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
.htk-background
|
.htk-background
|
||||||
{
|
{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -353,6 +382,8 @@ td.cell-image img
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 190;
|
z-index: 190;
|
||||||
background-color: rgba(1, 1, 1, 0.7);
|
background-color: rgba(1, 1, 1, 0.7);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Image editor */
|
/* Image editor */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue