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.
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
<div id="actions">
|
||||
<htk-button
|
||||
image="image/dark/shipping.svg"
|
||||
image="image/dark/place.svg"
|
||||
tip="_Addresses"
|
||||
on-click="onAddressesClick"
|
||||
showText="true"/>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,22 @@ Vn.Connections = new Class
|
|||
({
|
||||
Extends: Vn.Form
|
||||
|
||||
,_intervalId: null
|
||||
|
||||
,activate: function ()
|
||||
,_timeoutId: null
|
||||
|
||||
,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 ()
|
||||
{
|
||||
clearTimeout (this._intervalId);
|
||||
clearTimeout (this._timeoutId);
|
||||
}
|
||||
|
||||
,onRefreshClick: function ()
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div id="form" class="connections">
|
||||
<div class="box">
|
||||
<htk-repeater form-id="iter">
|
||||
<db-model property="model" id="sessions">
|
||||
<db-model property="model" id="sessions" on-status-changed="onModelStatusChange">
|
||||
<custom>
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
|
||||
/* News panel */
|
||||
|
||||
.home
|
||||
{
|
||||
margin: .5em;
|
||||
}
|
||||
.column
|
||||
{
|
||||
margin: .5em;
|
||||
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 */
|
||||
|
||||
|
|
@ -19,7 +27,7 @@
|
|||
color: #222;
|
||||
border: none;
|
||||
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;
|
||||
}
|
||||
.new .top
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
</div>
|
||||
<div id="actions" class="catalog-actions">
|
||||
<htk-button
|
||||
class="start-order"
|
||||
image="image/dark/new-order.svg"
|
||||
tip="_Start order"
|
||||
on-click="onStartOrderClick"
|
||||
|
|
@ -11,31 +12,32 @@
|
|||
</div>
|
||||
<div id="form" class="home">
|
||||
<div class="column mansonry" id="news-column">
|
||||
<htk-repeater form-id="new">
|
||||
<db-model property="model">
|
||||
<htk-repeater form-id="new">
|
||||
<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>
|
||||
SELECT title, date_time, text, image, id FROM news
|
||||
WHERE tag != 'course'
|
||||
ORDER BY priority, date_time DESC
|
||||
</custom>
|
||||
</db-model>
|
||||
<custom>
|
||||
<div class="masonry-box">
|
||||
<div class="new">
|
||||
<div class="top">
|
||||
<h2><htk-text form="new" column="title"/></h2>
|
||||
<!-- <p class="new-info">
|
||||
<htk-text format="_%a, %e %b %Y" form="new" column="date_time"/>
|
||||
</p>
|
||||
--> <div class="new-text">
|
||||
<htk-html form="new" column="text"/>
|
||||
<div class="masonry-box">
|
||||
<div class="new">
|
||||
<div class="top">
|
||||
<h2><htk-text form="new" column="title"/></h2>
|
||||
<!-- <p class="new-info">
|
||||
<htk-text format="_%a, %e %b %Y" form="new" column="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>
|
||||
<htk-image directory="news/full" form="new" column="image" editable="false"/>
|
||||
</div>
|
||||
</div>
|
||||
</custom>
|
||||
</htk-repeater>
|
||||
</div>
|
||||
</custom>
|
||||
</htk-repeater>
|
||||
<div class="clear"/>
|
||||
</div>
|
||||
</div>
|
||||
</vn>
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ Vn.Catalog = new Class
|
|||
{
|
||||
if (!this._menuShown)
|
||||
return;
|
||||
|
||||
|
||||
this.gui.hideBackground ();
|
||||
Vn.Node.removeClass (this.$('right-panel'), 'show');
|
||||
document.removeEventListener ('click', this.hideMenuCallback);
|
||||
|
|
@ -469,7 +469,7 @@ Vn.Filter = new Class
|
|||
this.parent (props);
|
||||
}
|
||||
|
||||
,_onClick: function ()
|
||||
,_onClick: function (e)
|
||||
{
|
||||
if (this._model && this._model.status === Db.Model.Status.CLEAN)
|
||||
this._model.refresh ();
|
||||
|
|
|
|||
|
|
@ -1,30 +1,13 @@
|
|||
.catalog
|
||||
{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 25em;
|
||||
}
|
||||
.catalog div.center
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 17em;
|
||||
margin-right: 17em;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
.catalog div.main
|
||||
.catalog > .main
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
padding: .4em;
|
||||
padding: .5em;
|
||||
}
|
||||
.htk-toast
|
||||
{
|
||||
|
|
@ -43,7 +26,7 @@
|
|||
|
||||
.right-panel
|
||||
{
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 3.9em;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
@ -96,7 +79,6 @@
|
|||
}
|
||||
.right-panel select
|
||||
{
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.vn-filter > ul
|
||||
|
|
@ -308,9 +290,9 @@ td.third-category
|
|||
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>
|
||||
</div>
|
||||
<div id="form" class="catalog">
|
||||
<div class="center">
|
||||
<div id="main" class="main"/>
|
||||
</div>
|
||||
<div id="main" class="main"/>
|
||||
</div>
|
||||
<div id="list-view" class="list-view">
|
||||
<div class="box">
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
{
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.answers select
|
||||
.answers .htk-select
|
||||
{
|
||||
min-width: 8em;
|
||||
max-width: 8em;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 1.6em;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
{
|
||||
color: white;
|
||||
}
|
||||
.htk-assistant button
|
||||
.htk-assistant .thin
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,27 +62,29 @@ Vn.Confirm = new Class
|
|||
|
||||
,onConfirm: function (query, resultSet)
|
||||
{
|
||||
this.disableButtons (false);
|
||||
|
||||
var res = resultSet.fetchResult ();
|
||||
var debt = resultSet.fetchValue ();
|
||||
|
||||
if (res)
|
||||
{
|
||||
Vn.Cookie.unset ('order');
|
||||
this.pay = debt > this.$('order-form').get ('credit');
|
||||
|
||||
this.popup = new Htk.Popup ();
|
||||
this.popup.setChildNode (this.$('success-dialog'));
|
||||
this.popup.showCenter ();
|
||||
var debt = resultSet.fetchValue ();
|
||||
this._pay = debt > this.$('order-form').get ('credit');
|
||||
|
||||
this.$('success-dialog').show ();
|
||||
}
|
||||
else
|
||||
this.disableButtons (false);
|
||||
}
|
||||
|
||||
,onAcceptClick: function ()
|
||||
{
|
||||
this.popup.hide ();
|
||||
|
||||
if (this.pay)
|
||||
this.$('success-dialog').hide ();
|
||||
}
|
||||
|
||||
,onPopupClose: function ()
|
||||
{
|
||||
if (this._pay)
|
||||
Vn.Tpv.pay (this.conn, this.$('total').value,
|
||||
this.$('order-form').get ('company_id'));
|
||||
else
|
||||
|
|
|
|||
|
|
@ -14,11 +14,10 @@
|
|||
.confirm .form
|
||||
{
|
||||
margin: 0 auto;
|
||||
padding: 3em 4em;
|
||||
padding: 2.5em 3em;
|
||||
color: #555;
|
||||
}
|
||||
.confirm .form p,
|
||||
.confirm .form select,
|
||||
.confirm .form p.important,
|
||||
.confirm .form button
|
||||
{
|
||||
font-size: 1.4em;
|
||||
|
|
@ -31,10 +30,6 @@
|
|||
{
|
||||
margin: .2em 0;
|
||||
}
|
||||
.confirm .form p.small
|
||||
{
|
||||
font-size: 1em;
|
||||
}
|
||||
.button-bar
|
||||
{
|
||||
margin-top: 2em;
|
||||
|
|
@ -52,26 +47,17 @@
|
|||
|
||||
.success-dialog
|
||||
{
|
||||
padding: 2em;
|
||||
min-width: 30em;
|
||||
padding: 1em;
|
||||
max-width: 35em;
|
||||
}
|
||||
.success-dialog *
|
||||
{
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
}
|
||||
.success-dialog p,
|
||||
.success-dialog button
|
||||
{
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.success-dialog img
|
||||
{
|
||||
float: left;
|
||||
height: 3em;
|
||||
margin-top: 0;
|
||||
margin-right: 1.5em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.success-dialog p
|
||||
{
|
||||
|
|
|
|||
|
|
@ -40,33 +40,33 @@
|
|||
<div class="box">
|
||||
<div class="form">
|
||||
<div class="section">
|
||||
<p>
|
||||
<p class="important">
|
||||
<t>Arrival</t>
|
||||
<htk-text format="_%A, %e of %B" form="order-form" column="date_send"/>
|
||||
</p>
|
||||
<p class="small">
|
||||
<p>
|
||||
<span id="method"><t>Agency</t></span>
|
||||
<htk-text form="order-form" column="agency"/>
|
||||
</p>
|
||||
</div>
|
||||
<div id="address" class="section">
|
||||
<p>
|
||||
<p class="important">
|
||||
<htk-text form="order-form" column="consignee"/>
|
||||
</p>
|
||||
<p class="small">
|
||||
<p>
|
||||
<htk-text form="order-form" column="address"/>
|
||||
</p>
|
||||
<p class="small">
|
||||
<p>
|
||||
<htk-text form="order-form" column="zip_code"/>,
|
||||
<htk-text form="order-form" column="city"/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>
|
||||
<p class="important">
|
||||
<t>Total</t>
|
||||
<htk-text id="total" format="%.2d€"/>
|
||||
</p>
|
||||
<p class="small">
|
||||
<p>
|
||||
(<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€"/>)
|
||||
</p>
|
||||
|
|
@ -83,15 +83,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="success-dialog" class="success-dialog">
|
||||
<div>
|
||||
<img src="image/ok.svg" alt="_Ok"/>
|
||||
<p><t>OrderPlacedSuccessfully</t></p>
|
||||
<htk-popup id="success-dialog" modal="true" on-closed="onPopupClose">
|
||||
<div property="child-node" class="success-dialog">
|
||||
<div>
|
||||
<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>
|
||||
<button on-click="onAcceptClick" class="thin confirm-order">
|
||||
<t>Accept</t>
|
||||
</button>
|
||||
<div class="clear"/>
|
||||
</div>
|
||||
</htk-popup>
|
||||
</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"
|
||||
id="svg11927"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.5 r10040"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="youtube.svg">
|
||||
<defs
|
||||
id="defs3" />
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="7.919596"
|
||||
inkscape:cx="64.326307"
|
||||
inkscape:cy="46.777283"
|
||||
inkscape:zoom="34.458339"
|
||||
inkscape:cx="12"
|
||||
inkscape:cy="11.999998"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="mm"
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1014"
|
||||
inkscape:window-height="1016"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1" />
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
|
|
@ -59,8 +59,8 @@
|
|||
id="layer1"
|
||||
transform="translate(-65.660672,-187.08936)">
|
||||
<path
|
||||
style="fill:#c30000;fill-opacity:1;stroke:none;display:inline"
|
||||
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"
|
||||
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.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"
|
||||
inkscape:connector-curvature="0"
|
||||
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._conn = new Db.Conn ();
|
||||
var conn = new Db.Conn ();
|
||||
this.link ({_conn: conn}, {'error': this._onConnError});
|
||||
}
|
||||
|
||||
,run: function ()
|
||||
{
|
||||
var guest = Vn.Cookie.check ('hedera_guest');
|
||||
|
||||
if (Vn.Cookie.check ('vn_pass'))
|
||||
{
|
||||
this._conn.open (null, null, null,
|
||||
this._onAutoLogin.bind (this));
|
||||
}
|
||||
else if (this._isGuest.value || Vn.Cookie.check ('hedera_guest'))
|
||||
else if (this._isGuest.value || guest)
|
||||
{
|
||||
this._guestLogin ();
|
||||
}
|
||||
|
|
@ -38,6 +41,9 @@ Vn.App = new Class
|
|||
login.on ('login', this._onLogin, this);
|
||||
login.show ();
|
||||
}
|
||||
|
||||
if (guest)
|
||||
Vn.Cookie.unset ('hedera_guest');
|
||||
}
|
||||
|
||||
,_onGuestChange: function ()
|
||||
|
|
@ -62,7 +68,6 @@ Vn.App = new Class
|
|||
if (!success)
|
||||
{
|
||||
this._isGuest.value = false;
|
||||
Vn.Cookie.unset ('hedera_guest');
|
||||
this.run ();
|
||||
}
|
||||
else
|
||||
|
|
@ -117,6 +122,61 @@ Vn.App = new Class
|
|||
{
|
||||
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)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ Vn.Form = new Class
|
|||
|
||||
if (this.node)
|
||||
{
|
||||
this.gui.formHolder.appendChild (this.node);
|
||||
this.gui.setForm (this.node);
|
||||
this.gui.setTitle (res.$('title'));
|
||||
this.gui.setActions (res.$('actions'));
|
||||
this.activate ();
|
||||
|
|
|
|||
|
|
@ -1,39 +1,38 @@
|
|||
|
||||
.vn-gui
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
/* Font */
|
||||
|
||||
.vn-gui .welcome,
|
||||
.vn-gui .supplant > span,
|
||||
.vn-gui .menu-title,
|
||||
.vn-gui .main-menu a
|
||||
{
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
/* Navigation bar */
|
||||
|
||||
.vn-gui .top-bar,
|
||||
.vn-gui .navbar,
|
||||
.vn-gui .exit
|
||||
{
|
||||
height: 3.9em;
|
||||
}
|
||||
.vn-gui .top-bar
|
||||
.vn-gui .navbar
|
||||
{
|
||||
position: relative;
|
||||
position: fixed;
|
||||
background-color: #009688;
|
||||
width: 100%;
|
||||
left: 15em;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0.1em 0.1em rgba(1, 1, 1, 0.3);
|
||||
}
|
||||
.vn-gui .top-bar
|
||||
.vn-gui .navbar
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -68,7 +67,7 @@
|
|||
padding-right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.vn-gui .top-bar > .htk-spinner
|
||||
.vn-gui .navbar > .htk-spinner
|
||||
{
|
||||
float: left;
|
||||
margin: 1.05em .8em;
|
||||
|
|
@ -124,27 +123,40 @@
|
|||
height: 1.4em;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
/* Background */
|
||||
|
||||
.vn-gui > .body
|
||||
.vn-gui > .background
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 15em;
|
||||
right: 0;
|
||||
}
|
||||
.vn-gui .content
|
||||
{
|
||||
position: absolute;
|
||||
top: 3.9em;
|
||||
bottom: 0;
|
||||
left: 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 */
|
||||
|
||||
.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
|
||||
{
|
||||
background-color: #333;
|
||||
|
|
@ -171,8 +183,6 @@
|
|||
}
|
||||
.vn-gui .supplant > span
|
||||
{
|
||||
font-size: 1.1em;
|
||||
|
||||
max-width: 10em;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -184,34 +194,12 @@
|
|||
float: right;
|
||||
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 .main-menu > li,
|
||||
.vn-gui ul.submenu
|
||||
{
|
||||
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
|
||||
{
|
||||
position: absolute;
|
||||
|
|
@ -313,28 +301,41 @@
|
|||
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
|
||||
{
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
height: inherit;
|
||||
opacity: 0;
|
||||
transform: translateZ(0) translateX(-2em);
|
||||
}
|
||||
.vn-gui .form-holder.show
|
||||
{
|
||||
transition: 250ms ease-out all;
|
||||
opacity: 1;
|
||||
transform: translateZ(0) translateX(0em);
|
||||
}
|
||||
|
||||
/* Transitions */
|
||||
|
||||
.vn-gui > .body
|
||||
{
|
||||
transition-property: left, right;
|
||||
transition-property: margin-left, margin-right;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.vn-gui .top-bar
|
||||
.vn-gui >.navbar
|
||||
{
|
||||
transition: background-color 300ms;
|
||||
transition-property: left, background-color;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
|
|
@ -360,10 +361,14 @@
|
|||
{
|
||||
display: none;
|
||||
}
|
||||
.vn-gui > .body
|
||||
.vn-gui > .navbar
|
||||
{
|
||||
left: 0;
|
||||
}
|
||||
.vn-gui > .body
|
||||
{
|
||||
margin-left: 0;
|
||||
}
|
||||
.vn-gui .menu-button
|
||||
{
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -13,10 +13,7 @@ Vn.Gui = new Class
|
|||
,set: function (x)
|
||||
{
|
||||
this.link ({_conn: x},
|
||||
{
|
||||
'error': this.onConnError
|
||||
,'loading-changed': this._onConnLoadChange
|
||||
});
|
||||
{'loading-changed': this._onConnLoadChange });
|
||||
|
||||
var sql = 'SELECT default_form, image_dir, image_host FROM config;'
|
||||
+'SELECT production_domain, test_domain FROM config;'
|
||||
|
|
@ -48,7 +45,6 @@ Vn.Gui = new Class
|
|||
this.builderInit ('js/hedera/gui.xml');
|
||||
|
||||
this.loadingCount = 0;
|
||||
this.formHolder = this.$('form-holder');
|
||||
|
||||
this.hash = Vn.Hash;
|
||||
this.hashParam = new Vn.HashParam ({key: 'form'});
|
||||
|
|
@ -88,6 +84,11 @@ Vn.Gui = new Class
|
|||
Vn.Node.remove (this.node);
|
||||
}
|
||||
|
||||
,logout: function ()
|
||||
{
|
||||
this.onLogoutClick ();
|
||||
}
|
||||
|
||||
,onLogoutClick: function ()
|
||||
{
|
||||
this._conn.close (this.onConnClose.bind (this));
|
||||
|
|
@ -100,12 +101,12 @@ Vn.Gui = new Class
|
|||
|
||||
,showBackground: function ()
|
||||
{
|
||||
Vn.Node.show (this.$('background'));
|
||||
Vn.Node.addClass (this.$('background'), 'show');
|
||||
}
|
||||
|
||||
,hideBackground: function ()
|
||||
{
|
||||
Vn.Node.hide (this.$('background'));
|
||||
Vn.Node.removeClass (this.$('background'), 'show');
|
||||
}
|
||||
|
||||
,showMenu: function ()
|
||||
|
|
@ -197,54 +198,6 @@ Vn.Gui = new Class
|
|||
|
||||
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)
|
||||
{
|
||||
|
|
@ -273,33 +226,6 @@ Vn.Gui = new Class
|
|||
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
|
||||
|
||||
,createMenu: function (res, sectionMap, parent, ul)
|
||||
|
|
@ -428,6 +354,23 @@ Vn.Gui = new Class
|
|||
|
||||
this.activeForm = new formInfo.klass (this, formInfo);
|
||||
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)
|
||||
|
|
@ -450,6 +393,7 @@ Vn.Gui = new Class
|
|||
{
|
||||
if (this.activeForm)
|
||||
{
|
||||
Vn.Node.removeClass (this.$('form-holder'), 'show');
|
||||
this.activeForm.close ();
|
||||
this.activeForm.unref ();
|
||||
this.activeForm = null;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
<vn>
|
||||
<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 class="menu-overflow">
|
||||
<div class="menu-header" id="menu-header">
|
||||
|
|
@ -31,20 +42,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div id="top-bar" class="top-bar">
|
||||
<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 id="form-holder" class="form-holder"/>
|
||||
</div>
|
||||
<div id="background" class="background"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,48 @@
|
|||
|
||||
.vn-login,
|
||||
.vn-login label,
|
||||
.vn-login button,
|
||||
.vn-login input,
|
||||
.vn-login textarea,
|
||||
.vn-login p,
|
||||
.vn-login a
|
||||
body
|
||||
{
|
||||
font-size: 1.1em;
|
||||
font-weight: normal;
|
||||
/* text-shadow: 0 0.2em 0.2em #AAA; */
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
.vn-login
|
||||
{
|
||||
color: #333;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
height: inherit;
|
||||
}
|
||||
.vn-login .header
|
||||
|
||||
/* Navigation bar */
|
||||
|
||||
.vn-login .navbar
|
||||
{
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
background-color: #333;
|
||||
width: 100%;
|
||||
height: 3.5em;
|
||||
top: 0;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.vn-login .header div
|
||||
.vn-login .navbar div
|
||||
{
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.vn-login .header a
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
|
||||
.vn-login .body
|
||||
{
|
||||
position: absolute;
|
||||
top: 3.5em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* background-image: url("background.png");
|
||||
background-repeat: repeat;
|
||||
*/
|
||||
height: inherit;
|
||||
|
||||
}
|
||||
.vn-login .column
|
||||
{
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
max-width: 40em;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
|
|
@ -66,7 +54,7 @@
|
|||
.vn-login .login
|
||||
{
|
||||
position: absolute;
|
||||
margin-top: -17em;
|
||||
margin-top: -16em;
|
||||
padding: 1em;
|
||||
max-width: 45em;
|
||||
top: 50%;
|
||||
|
|
@ -74,6 +62,20 @@
|
|||
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
|
||||
{
|
||||
display: block;
|
||||
|
|
@ -87,25 +89,24 @@
|
|||
text-align: right;
|
||||
margin: 0.2em auto;
|
||||
font-weight: bold;
|
||||
height: 1.6em;
|
||||
height: 1.4em;
|
||||
}
|
||||
.vn-login .form-inputs
|
||||
{
|
||||
margin: 0 auto;
|
||||
max-width: 16em;
|
||||
max-width: 15em;
|
||||
}
|
||||
.vn-login label
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
.vn-login div.form-group label
|
||||
.vn-login .form-group label
|
||||
{
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
}
|
||||
.vn-login input
|
||||
{
|
||||
border-radius: 0.1em;
|
||||
box-shadow: 0 0.1em 0.1em #AAA;
|
||||
margin: 0.3em;
|
||||
}
|
||||
.vn-login input[type=text],
|
||||
|
|
@ -118,6 +119,13 @@
|
|||
border: 1px solid #AAA;
|
||||
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
|
||||
{
|
||||
text-align: left;
|
||||
|
|
@ -178,8 +186,14 @@
|
|||
margin-top: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.vn-login .links a
|
||||
{
|
||||
display: inline-block;
|
||||
margin: 0 .1em;
|
||||
}
|
||||
.vn-login .links img
|
||||
{
|
||||
height: 1.8em;
|
||||
width: 1.8em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ Vn.Login = new Class
|
|||
,show: function ()
|
||||
{
|
||||
document.body.appendChild (this.node);
|
||||
|
||||
|
||||
if (Vn.Cookie.check ('vn_user'))
|
||||
this.$('user').value = Vn.Cookie.get ('vn_user');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<vn>
|
||||
<div id="main" class="vn-login">
|
||||
<div class="header">
|
||||
<div class="navbar">
|
||||
<div>
|
||||
<a href="#!form=cms/about&guest=true">
|
||||
<t>I want to know more</t>
|
||||
|
|
|
|||
|
|
@ -64,10 +64,6 @@ Vn.Report = new Class
|
|||
{
|
||||
Htk.Toast.showError (
|
||||
_('Please unlock popups and try again'));
|
||||
|
||||
if (callback)
|
||||
callback (null);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
{
|
||||
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; }
|
||||
}
|
||||
|
|
@ -23,8 +27,8 @@
|
|||
body
|
||||
{
|
||||
color: #333;
|
||||
margin: 0;
|
||||
font-family: 'Open Sans', 'Verdana', 'Sans';
|
||||
margin: 0;
|
||||
}
|
||||
label,
|
||||
button,
|
||||
|
|
@ -35,13 +39,13 @@ option
|
|||
{
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
iframe
|
||||
{
|
||||
border: none;
|
||||
}
|
||||
fieldset,
|
||||
div
|
||||
fieldset
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -58,7 +62,7 @@ a:link,
|
|||
a:visited,
|
||||
a:active
|
||||
{
|
||||
color: #000;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover
|
||||
|
|
@ -70,6 +74,10 @@ a img
|
|||
{
|
||||
padding: 1px;
|
||||
}
|
||||
a img:hover
|
||||
{
|
||||
opacity: 0.9;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
margin: 0;
|
||||
|
|
@ -90,7 +98,9 @@ p
|
|||
|
||||
/* Focus outline */
|
||||
|
||||
*:focus
|
||||
a:focus,
|
||||
input:focus,
|
||||
button:focus
|
||||
{
|
||||
outline: 1px solid rgba(1, 1, 1, 0.15);
|
||||
-moz-outline-radius: .1em;
|
||||
|
|
@ -104,7 +114,6 @@ input[type=reset]::-moz-focus-inner
|
|||
}
|
||||
select:-moz-focusring
|
||||
{
|
||||
outline: none;
|
||||
/* color: transparent;
|
||||
text-shadow: 0 0 0 #333;*/
|
||||
}
|
||||
|
|
@ -121,17 +130,18 @@ select,
|
|||
{
|
||||
border: none;
|
||||
border-bottom: 1px solid #999;
|
||||
margin: .2em;
|
||||
margin: .2em 0;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
/* border-radius: 0.1em;
|
||||
border: .1em solid #CCD;
|
||||
box-shadow: 0 0.1em 0.1em #CCC;*/
|
||||
border-radius: 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=number],
|
||||
textarea
|
||||
textarea,
|
||||
.input
|
||||
{
|
||||
padding: 0 .2em;
|
||||
}
|
||||
|
|
@ -139,7 +149,8 @@ input[type=text],
|
|||
input[type=password],
|
||||
input[type=file],
|
||||
input[type=number],
|
||||
select
|
||||
select,
|
||||
.input
|
||||
{
|
||||
height: 2.2em;
|
||||
}
|
||||
|
|
@ -152,7 +163,8 @@ input[type=text]:focus,
|
|||
input[type=password]:focus,
|
||||
input[type=file]:focus,
|
||||
input[type=number]:focus,
|
||||
textarea:focus
|
||||
textarea:focus,
|
||||
.input:focus
|
||||
{
|
||||
border-color: #333;
|
||||
}
|
||||
|
|
@ -193,7 +205,6 @@ input[type=reset]
|
|||
{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
border-radius: 0.1em;
|
||||
|
|
@ -233,15 +244,9 @@ input.button:disabled
|
|||
|
||||
button.thin
|
||||
{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #008D77;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
button.thin:hover
|
||||
{
|
||||
background-color: rgba(1,1,1,0.1);
|
||||
}
|
||||
button.thin:disabled
|
||||
{
|
||||
color: gray;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
Htk.Select = new Class
|
||||
({
|
||||
Extends: Htk.Field
|
||||
|
|
@ -13,7 +14,7 @@ Htk.Select = new Class
|
|||
type: Db.Model
|
||||
,set: function (x)
|
||||
{
|
||||
this.link ({_model: x}, {'status-changed': this._onModelChange});
|
||||
this.link ({_model: x}, {'status-changed-after': this._onModelChange});
|
||||
this._onModelChange ();
|
||||
}
|
||||
,get: function ()
|
||||
|
|
@ -76,9 +77,7 @@ Htk.Select = new Class
|
|||
,set: function (x)
|
||||
{
|
||||
this._placeholder = x;
|
||||
|
||||
if (this._placeholderNode)
|
||||
Vn.Node.setText (this._placeholderNode, x);
|
||||
this._refreshShowText (x);
|
||||
}
|
||||
,get: function ()
|
||||
{
|
||||
|
|
@ -113,15 +112,10 @@ Htk.Select = new Class
|
|||
|
||||
,initialize: function (props)
|
||||
{
|
||||
var select = this.createElement ('select');
|
||||
select.addEventListener ('change', this._onChange.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);
|
||||
var button = this.createElement ('button');
|
||||
button.className = 'htk-select input';
|
||||
button.addEventListener ('mousedown', this._onButtonMouseDown.bind (this));
|
||||
|
||||
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._refreshShowText ();
|
||||
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 row = this.node.selectedIndex - this.getIndexIncrement ();
|
||||
var row = target.rowIndex - 1;
|
||||
|
||||
if (row >= 0)
|
||||
value = this._model.getByIndex (row, this.valueColumnIndex);
|
||||
else
|
||||
value = null;
|
||||
|
||||
this.setRow (row);
|
||||
this._setRow (row);
|
||||
this.valueChanged (value);
|
||||
}
|
||||
|
||||
,getIndexIncrement: function ()
|
||||
{
|
||||
var inc = 0;
|
||||
|
||||
if (this._placeholder)
|
||||
inc++;
|
||||
if (!this._notNull)
|
||||
inc++;
|
||||
|
||||
return inc;
|
||||
}
|
||||
|
||||
,addOption: function (value, text)
|
||||
{
|
||||
var option = document.createElement ('option');
|
||||
option.value = value;
|
||||
this._popup.hide ();
|
||||
|
||||
if (text)
|
||||
option.appendChild (document.createTextNode (text));
|
||||
|
||||
this.node.appendChild (option);
|
||||
e.stopPropagation ();
|
||||
}
|
||||
|
||||
,_addPlaceholder: function (text)
|
||||
,_onPopupClose: function ()
|
||||
{
|
||||
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;
|
||||
this._popup = null;
|
||||
this.signalEmit ('menu-hide');
|
||||
}
|
||||
|
||||
,_refreshShowText: function ()
|
||||
{
|
||||
if (this._row !== -1)
|
||||
var showText = this._model.getByIndex (this._row, this.showColumnIndex);
|
||||
else if (this._placeholder)
|
||||
var showText = this._placeholder;
|
||||
else
|
||||
var showText = '';
|
||||
|
||||
Vn.Node.setText (this.node, showText);
|
||||
}
|
||||
|
||||
,_onModelChange: function ()
|
||||
{
|
||||
var placeholder = null;
|
||||
var model = this._model;
|
||||
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)
|
||||
{
|
||||
var data = model.data;
|
||||
|
||||
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._selectOption ();
|
||||
this.signalEmit ('ready');
|
||||
|
||||
}
|
||||
else
|
||||
this.setRow (-1);
|
||||
|
||||
this._webkitRefreshOptions ();
|
||||
this._setRow (-1);
|
||||
}
|
||||
|
||||
,setEditable: function (editable)
|
||||
|
|
@ -250,7 +239,7 @@ Htk.Select = new Class
|
|||
this.node.disabled = !editable;
|
||||
}
|
||||
|
||||
,selectOption: function ()
|
||||
,_selectOption: function ()
|
||||
{
|
||||
var row;
|
||||
|
||||
|
|
@ -259,46 +248,11 @@ Htk.Select = new Class
|
|||
else
|
||||
row = -1;
|
||||
|
||||
this.setRow (row);
|
||||
this._setRow (row);
|
||||
}
|
||||
|
||||
,putValue: function (value)
|
||||
{
|
||||
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;
|
||||
this._selectOption ();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,8 +5,61 @@ Htk.Popup = new Class
|
|||
({
|
||||
Extends: Htk.Widget
|
||||
,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
|
||||
,_modal: false
|
||||
,_isOpen: false
|
||||
,_child: null
|
||||
|
||||
,initialize: function (props)
|
||||
{
|
||||
|
|
@ -29,78 +82,126 @@ Htk.Popup = new Class
|
|||
|
||||
,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.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 ();
|
||||
}
|
||||
|
||||
,reset: function ()
|
||||
{
|
||||
if (!this._parent)
|
||||
if (!this._isOpen)
|
||||
return;
|
||||
|
||||
var spacing = 5;
|
||||
var rect = this._parent.getBoundingClientRect ();
|
||||
var left = rect.left;
|
||||
var top = rect.top + spacing + this._parent.offsetHeight;
|
||||
|
||||
var margin = 20;
|
||||
var dblMargin = margin * 2;
|
||||
var width = this.node.offsetWidth;
|
||||
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 ())
|
||||
left -= width - this._parent.offsetWidth;
|
||||
if (top + height > Vn.Browser.getInnerHeight ())
|
||||
top -= height + this._parent.offsetHeight + spacing * 2;
|
||||
|
||||
if (left < 0)
|
||||
left = 0;
|
||||
if (top < 0)
|
||||
top = 0;
|
||||
if (width + dblMargin > innerWidth)
|
||||
{
|
||||
width = innerWidth - dblMargin;
|
||||
style.width = width +'px';
|
||||
}
|
||||
if (height + dblMargin > innerHeight)
|
||||
{
|
||||
height = innerHeight - dblMargin;
|
||||
style.height = height +'px';
|
||||
}
|
||||
|
||||
this.node.style.top = (top) +'px';
|
||||
this.node.style.left = (left) +'px';
|
||||
}
|
||||
|
||||
,showCenter: function ()
|
||||
{
|
||||
this._parent = null;
|
||||
|
||||
this.background = document.createElement ('div');
|
||||
this.background.className = 'htk-background';
|
||||
document.body.appendChild (this.background);
|
||||
|
||||
document.body.appendChild (this.node);
|
||||
|
||||
var width = this.node.offsetWidth;
|
||||
var height = this.node.offsetHeight;
|
||||
if (this.isModal ())
|
||||
{
|
||||
style.top = '50%';
|
||||
style.left = '50%';
|
||||
|
||||
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.marginLeft = (-this.node.offsetWidth / 2) +'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;
|
||||
|
||||
if (left + width > innerWidth)
|
||||
left -= (left + width) - Vn.Browser.getInnerWidth () + margin;
|
||||
if (top + height > innerHeight)
|
||||
top -= height + this._parent.offsetHeight + spacing * 2;
|
||||
|
||||
if (left < 0)
|
||||
left = margin;
|
||||
if (top < 0)
|
||||
top = margin;
|
||||
|
||||
style.top = (top) +'px';
|
||||
style.left = (left) +'px';
|
||||
}
|
||||
}
|
||||
|
||||
,hide: function ()
|
||||
{
|
||||
if (this.background)
|
||||
Vn.Node.remove (this.background);
|
||||
if (!this._isOpen)
|
||||
return;
|
||||
|
||||
if (this._background)
|
||||
{
|
||||
Vn.Node.remove (this._background);
|
||||
Vn.Node.removeClass (this.node, 'modal');
|
||||
}
|
||||
|
||||
this.node.removeEventListener ('mousedown', this.stopEvent)
|
||||
document.removeEventListener ('mousedown', this.hideHandler);
|
||||
this.node.removeEventListener ('mousedown', this._stopEvent)
|
||||
document.removeEventListener ('mousedown', this._hideHandler);
|
||||
Vn.Node.remove (this.node);
|
||||
this._parent = null;
|
||||
this._isOpen = false;
|
||||
this.signalEmit ('closed');
|
||||
}
|
||||
|
||||
,stopEvent: function (event)
|
||||
,_stopEvent: function (e)
|
||||
{
|
||||
event.stopPropagation ();
|
||||
e.stopPropagation ();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -132,11 +132,41 @@ td.cell-image img
|
|||
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 */
|
||||
|
|
@ -248,17 +278,6 @@ td.cell-image img
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* Date chooser */
|
||||
|
||||
.htk-date-chooser > button
|
||||
{
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
padding: .4em .2em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
|
||||
.htk-image.editable:hover
|
||||
|
|
@ -342,8 +361,18 @@ td.cell-image img
|
|||
position: fixed;
|
||||
background-color: white;
|
||||
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
|
||||
{
|
||||
position: fixed;
|
||||
|
|
@ -353,6 +382,8 @@ td.cell-image img
|
|||
bottom: 0;
|
||||
z-index: 190;
|
||||
background-color: rgba(1, 1, 1, 0.7);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
/* Image editor */
|
||||
|
|
|
|||
Loading…
Reference in New Issue