1
0
Fork 0
mirror of synced 2024-07-01 20:50:49 +12:00

Hide advanced options

This commit is contained in:
eldadfux 2019-08-09 09:28:16 +03:00
parent eb6fbdf779
commit b0220fc0e8
8 changed files with 143 additions and 104 deletions

View file

@ -129,7 +129,7 @@ $graph = $this->getParam('graph', false);
<a data-ls-attrs="href=/console/keys?project={{router.params.project}}" class="pull-end">Manage Your API Keys</a> <a data-ls-attrs="href=/console/keys?project={{router.params.project}}" class="pull-end">Manage Your API Keys</a>
<div class="drop-list pull-start" data-ls-ui-open="" data-button-text="Add Platform" data-button-class="button" tabindex="1"> <div class="drop-list pull-start" data-ls-ui-open="" data-button-text="Add Platform" data-button-class="button" data-blur="1" tabindex="1">
<ul> <ul>
<li> <li>
<div class="link web-new"><img src="/images/clients/web.png" alt="Web Platform Logo" class="avatar xs margin-end" /> New Website</div> <div class="link web-new"><img src="/images/clients/web.png" alt="Web Platform Logo" class="avatar xs margin-end" /> New Website</div>

View file

@ -127,60 +127,69 @@ use Utopia\Locale\Locale;
</div> </div>
</div> </div>
<label for="httpHeaders">HTTP Headers</label> <div class="margin-bottom toggle" data-ls-ui-open>
<div class="margin-bottom-small"> <i class="icon-plus pull-end margin-top-tiny"></i>
<div data-ls-loop="task.httpHeaders" data-ls-as="header" style="overflow: hidden"> <i class="icon-minus pull-end margin-top-tiny"></i>
<div class="margin-bottom-small">
<div data-forms-remove class="row thin"> <h2 class="margin-bottom">
<div class="col span-10"> Advanced Options
<input type="hidden" name="httpHeaders" data-forms-headers data-ls-bind="{{header}}" data-cast-to="array" /> <small class="note text-size-small">(optional)</small>
</h2>
<label for="httpHeaders">HTTP Headers</label>
<div class="margin-bottom-small">
<div data-ls-loop="task.httpHeaders" data-ls-as="header" style="overflow: hidden">
<div class="margin-bottom-small">
<div data-forms-remove class="row thin">
<div class="col span-10">
<input type="hidden" name="httpHeaders" data-forms-headers data-ls-bind="{{header}}" data-cast-to="array" />
</div>
<div class="col span-2">
<button type="button" data-remove class="reverse danger round pull-end"><i class="icon-cancel"></i></button>
</div>
</div> </div>
<div class="col span-2"> </div>
<button type="button" data-remove class="reverse danger round pull-end"><i class="icon-cancel"></i></button> </div>
<div data-forms-clone="" data-label="Add Header" data-first="0">
<div class="">
<div data-forms-remove class="row thin margin-bottom-small">
<div class="col span-10">
<input type="hidden" name="httpHeaders" data-forms-headers data-cast-to="array" />
</div>
<div class="col span-2">
<button type="button" data-remove class="reverse danger round pull-end"><i class="icon-cancel"></i></button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div data-forms-clone="" data-label="Add Header" data-first="0"> <label data-ls-attrs="for=security-{{task.$uid}}" class="margin-bottom">SSL / TLS
<div class=""> <p class="note">Certificate verification</p>
<div data-forms-remove class="row thin margin-bottom-small"> <input name="security" type="radio" required data-ls-bind="{{task.security}}" value="1" /> &nbsp; <span>Enabled</span>
<div class="col span-10"> <input name="security" type="radio" required data-ls-bind="{{task.security}}" value="0" /> &nbsp; <span>Disabled</span>
<input type="hidden" name="httpHeaders" data-forms-headers data-cast-to="array" /> </label>
</div>
<div class="col span-2"> <p class="note margin-bottom"><span class="tag red">Warning</span> &nbsp; Untrusted or self-signed certificates may not be secure.
<button type="button" data-remove class="reverse danger round pull-end"><i class="icon-cancel"></i></button> <a href="https://en.wikipedia.org/wiki/Self-signed_certificate" target="_blank" rel="noopener">Learn more<i class="icon-link-ext"></i></a>
</div> </p>
</div>
<h3>HTTP Authentication <span class="tooltip" data-tooltip="Use to secure your endpoint from untrusted sources"><i class="icon-question"></i></span> &nbsp;<small>(optional)</small></h3>
<div class="row thin">
<div class="col span-6">
<label data-ls-attrs="for=httpUser-{{task.$uid}}">User</label>
<input type="text" class="full-width" data-ls-attrs="id=httpUser-{{task.$uid}}" name="httpUser" autocomplete="off" data-ls-bind="{{task.httpUser}}" />
</div>
<div class="col span-6">
<label data-ls-attrs="for=httpPass-{{task.$uid}}">Password</label>
<input type="password" class="full-width" data-ls-attrs="id=httpPass-{{task.$uid}}" name="httpPass" autocomplete="off" data-ls-bind="{{task.httpPass}}" />
</div> </div>
</div> </div>
</div> </div>
<label data-ls-attrs="for=security-{{task.$uid}}" class="margin-bottom">SSL / TLS
<p class="note">Certificate verification</p>
<input name="security" type="radio" required data-ls-bind="{{task.security}}" value="1" /> &nbsp; <span>Enabled</span>
<input name="security" type="radio" required data-ls-bind="{{task.security}}" value="0" /> &nbsp; <span>Disabled</span>
</label>
<p class="note margin-bottom"><span class="tag red">Warning</span> &nbsp; Untrusted or self-signed certificates may not be secure.
<a href="https://en.wikipedia.org/wiki/Self-signed_certificate" target="_blank" rel="noopener">Learn more<i class="icon-link-ext"></i></a>
</p>
<h3>HTTP Authentication <span class="tooltip" data-tooltip="Use to secure your endpoint from untrusted sources"><i class="icon-question"></i></span> &nbsp;<small>(optional)</small></h3>
<div class="row thin">
<div class="col span-6">
<label data-ls-attrs="for=httpUser-{{task.$uid}}">User</label>
<input type="text" class="full-width" data-ls-attrs="id=httpUser-{{task.$uid}}" name="httpUser" autocomplete="off" data-ls-bind="{{task.httpUser}}" />
</div>
<div class="col span-6">
<label data-ls-attrs="for=httpPass-{{task.$uid}}">Password</label>
<input type="password" class="full-width" data-ls-attrs="id=httpPass-{{task.$uid}}" name="httpPass" autocomplete="off" data-ls-bind="{{task.httpPass}}" />
</div>
</div>
<hr />
<button type="submit">Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button> <button type="submit">Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</form> </form>
@ -209,7 +218,7 @@ use Utopia\Locale\Locale;
</div> </div>
<div class="clear"> <div class="clear">
<div data-ui-modal class="modal box close" data-button-text="Add Task"> <div data-ui-modal class="modal close" data-button-text="Add Task">
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button> <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
<h1>Add Task</h1> <h1>Add Task</h1>
@ -261,47 +270,55 @@ use Utopia\Locale\Locale;
</div> </div>
</div> </div>
<label for="httpHeaders">HTTP Headers</label> <div class="margin-bottom toggle" data-ls-ui-open>
<div class="margin-bottom-small"> <i class="icon-plus pull-end margin-top-tiny"></i>
<div data-forms-clone="" data-label="Add Header" data-first="0"> <i class="icon-minus pull-end margin-top-tiny"></i>
<div class="">
<div data-forms-remove class="row thin margin-bottom-small"> <h2 class="margin-bottom">
<div class="col span-10"> Advanced Options
<input type="hidden" name="httpHeaders" data-forms-headers data-cast-to="array" /> <small class="note text-size-small">(optional)</small>
</div> </h2>
<div class="col span-2">
<button type="button" data-remove class="reverse danger round pull-end"><i class="icon-cancel"></i></button> <label for="httpHeaders">HTTP Headers</label>
<div class="margin-bottom-small">
<div data-forms-clone="" data-label="Add Header" data-first="0">
<div class="">
<div data-forms-remove class="row thin margin-bottom-small">
<div class="col span-10">
<input type="hidden" name="httpHeaders" data-forms-headers data-cast-to="array" />
</div>
<div class="col span-2">
<button type="button" data-remove class="reverse danger round pull-end"><i class="icon-cancel"></i></button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<label for="secure" class="margin-bottom">SSL / TLS <label for="secure" class="margin-bottom">SSL / TLS
<p class="note">Certificate verification</p> <p class="note">Certificate verification</p>
<input name="security" data-ls-attrs="id=secure-yes" type="radio" value="1" checked="checked" required /> &nbsp; <span>Enabled</span> <input name="security" data-ls-attrs="id=secure-yes" type="radio" value="1" checked="checked" required /> &nbsp; <span>Enabled</span>
<input name="security" data-ls-attrs="id=secure-no" type="radio" value="0" required /> &nbsp; <span>Disabled</span> <input name="security" data-ls-attrs="id=secure-no" type="radio" value="0" required /> &nbsp; <span>Disabled</span>
</label> </label>
<p class="note margin-bottom"><span class="tag red">Warning</span> Untrusted or self-signed certificates may not be secure. <p class="note margin-bottom"><span class="tag red">Warning</span> Untrusted or self-signed certificates may not be secure.
<a href="https://en.wikipedia.org/wiki/Self-signed_certificate" target="_blank" rel="noopener">Learn more<i class="icon-link-ext"></i></a> <a href="https://en.wikipedia.org/wiki/Self-signed_certificate" target="_blank" rel="noopener">Learn more<i class="icon-link-ext"></i></a>
</p> </p>
<h3>HTTP Authentication <span class="tooltip" data-tooltip="Use to secure your endpoint from untrusted sources"><i class="icon-question"></i></span> &nbsp;<small>(optional)</small></h3> <h3>HTTP Authentication <span class="tooltip" data-tooltip="Use to secure your endpoint from untrusted sources"><i class="icon-question"></i></span> &nbsp;<small>(optional)</small></h3>
<div class="row thin"> <div class="row thin">
<div class="col span-6"> <div class="col span-6">
<label for="httpUser">User</label> <label for="httpUser">User</label>
<input type="text" class="full-width" id="httpUser" name="httpUser" autocomplete="off" /> <input type="text" class="full-width" id="httpUser" name="httpUser" autocomplete="off" />
</div> </div>
<div class="col span-6"> <div class="col span-6">
<label for="httpPass">Password</label> <label for="httpPass">Password</label>
<input type="password" class="full-width" id="httpPass" name="httpPass" autocomplete="off" /> <input type="password" class="full-width" id="httpPass" name="httpPass" autocomplete="off" />
</div>
</div> </div>
</div> </div>
<hr />
<button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button> <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</form> </form>
</div> </div>

View file

@ -2458,13 +2458,14 @@ element.classList.add('modal');if(!buttonAlias){buttonElements.forEach((button)=
let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});} let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
if(openEvent){document.addEventListener(openEvent,open);} if(openEvent){document.addEventListener(openEvent,open);}
buttonElements.forEach((button)=>{button.addEventListener('click',open);});document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);} buttonElements.forEach((button)=>{button.addEventListener('click',open);});document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);}
document.addEventListener('modal-close',close);element.addEventListener('submit',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);} document.addEventListener('modal-close',close);element.addEventListener('submit',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass']||'ls-ui-open';let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let blur=element.hasAttribute('data-blur');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;button.type='button';if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
if(def==='close'){element.classList.add('close');element.classList.remove('open');} if(def==='close'){element.classList.add('close');element.classList.remove('open');}
else{element.classList.add('open');element.classList.remove('close');} else{element.classList.add('open');element.classList.remove('close');}
button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});} button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});}
let close=function(){element.classList.add('close');element.classList.remove('open');};let closeDelay=function(){window.setTimeout(function(){close();},150);};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;} let close=function(){element.classList.add('close');element.classList.remove('open');};let closeDelay=function(){window.setTimeout(function(){close();},150);};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}
while(el=el.parentNode){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}} while(el=el.parentNode){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}}
return null;};button.addEventListener('blur',closeDelay);element.addEventListener('click',function(event){let target=findParent('a',event.target);if(!target){return false;} return null;};if(blur){button.addEventListener('blur',closeDelay);}
element.addEventListener('click',function(event){let target=findParent('a',event.target);if(!target){return false;}
if(!target.href){return false;} if(!target.href){return false;}
closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-paging',repeat:true,controller:function(document,element,expression){var sum=expression.parse(element.dataset['sum'])||0;var offset=expression.parse(element.dataset['offset'])||0;var limit=expression.parse(element.dataset['limit'])||0;if(offset===0||limit===0){element.innerHTML='1 / 1';return true;} closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-paging',repeat:true,controller:function(document,element,expression){var sum=expression.parse(element.dataset['sum'])||0;var offset=expression.parse(element.dataset['offset'])||0;var limit=expression.parse(element.dataset['limit'])||0;if(offset===0||limit===0){element.innerHTML='1 / 1';return true;}
var total=Math.ceil(sum/limit);var current=Math.ceil(offset/limit)+1;element.innerHTML=(total>0)?current+' / '+total:'';}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-phases',controller:function(element,window,document,expression,view){var tabs=document.createElement('ul');var container=document.createElement('div');var titles=Array.prototype.slice.call(element.getElementsByTagName('h2'));var next=Array.prototype.slice.call(element.querySelectorAll('[data-next]'));var previous=Array.prototype.slice.call(element.querySelectorAll('[data-previous]'));var position=0;for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset['state']||'');if(tabState===window.location.pathname+window.location.search){position=i;}} var total=Math.ceil(sum/limit);var current=Math.ceil(offset/limit)+1;element.innerHTML=(total>0)?current+' / '+total:'';}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-phases',controller:function(element,window,document,expression,view){var tabs=document.createElement('ul');var container=document.createElement('div');var titles=Array.prototype.slice.call(element.getElementsByTagName('h2'));var next=Array.prototype.slice.call(element.querySelectorAll('[data-next]'));var previous=Array.prototype.slice.call(element.querySelectorAll('[data-previous]'));var position=0;for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset['state']||'');if(tabState===window.location.pathname+window.location.search){position=i;}}

View file

@ -365,13 +365,14 @@ element.classList.add('modal');if(!buttonAlias){buttonElements.forEach((button)=
let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});} let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
if(openEvent){document.addEventListener(openEvent,open);} if(openEvent){document.addEventListener(openEvent,open);}
buttonElements.forEach((button)=>{button.addEventListener('click',open);});document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);} buttonElements.forEach((button)=>{button.addEventListener('click',open);});document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);}
document.addEventListener('modal-close',close);element.addEventListener('submit',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);} document.addEventListener('modal-close',close);element.addEventListener('submit',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass']||'ls-ui-open';let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let blur=element.hasAttribute('data-blur');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;button.type='button';if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
if(def==='close'){element.classList.add('close');element.classList.remove('open');} if(def==='close'){element.classList.add('close');element.classList.remove('open');}
else{element.classList.add('open');element.classList.remove('close');} else{element.classList.add('open');element.classList.remove('close');}
button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});} button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});}
let close=function(){element.classList.add('close');element.classList.remove('open');};let closeDelay=function(){window.setTimeout(function(){close();},150);};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;} let close=function(){element.classList.add('close');element.classList.remove('open');};let closeDelay=function(){window.setTimeout(function(){close();},150);};let findParent=function(tagName,el){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}
while(el=el.parentNode){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}} while(el=el.parentNode){if((el.nodeName||el.tagName).toLowerCase()===tagName.toLowerCase()){return el;}}
return null;};button.addEventListener('blur',closeDelay);element.addEventListener('click',function(event){let target=findParent('a',event.target);if(!target){return false;} return null;};if(blur){button.addEventListener('blur',closeDelay);}
element.addEventListener('click',function(event){let target=findParent('a',event.target);if(!target){return false;}
if(!target.href){return false;} if(!target.href){return false;}
closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-paging',repeat:true,controller:function(document,element,expression){var sum=expression.parse(element.dataset['sum'])||0;var offset=expression.parse(element.dataset['offset'])||0;var limit=expression.parse(element.dataset['limit'])||0;if(offset===0||limit===0){element.innerHTML='1 / 1';return true;} closeDelay();});element.insertBefore(button,element.firstChild);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-paging',repeat:true,controller:function(document,element,expression){var sum=expression.parse(element.dataset['sum'])||0;var offset=expression.parse(element.dataset['offset'])||0;var limit=expression.parse(element.dataset['limit'])||0;if(offset===0||limit===0){element.innerHTML='1 / 1';return true;}
var total=Math.ceil(sum/limit);var current=Math.ceil(offset/limit)+1;element.innerHTML=(total>0)?current+' / '+total:'';}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-phases',controller:function(element,window,document,expression,view){var tabs=document.createElement('ul');var container=document.createElement('div');var titles=Array.prototype.slice.call(element.getElementsByTagName('h2'));var next=Array.prototype.slice.call(element.querySelectorAll('[data-next]'));var previous=Array.prototype.slice.call(element.querySelectorAll('[data-previous]'));var position=0;for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset['state']||'');if(tabState===window.location.pathname+window.location.search){position=i;}} var total=Math.ceil(sum/limit);var current=Math.ceil(offset/limit)+1;element.innerHTML=(total>0)?current+' / '+total:'';}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-phases',controller:function(element,window,document,expression,view){var tabs=document.createElement('ul');var container=document.createElement('div');var titles=Array.prototype.slice.call(element.getElementsByTagName('h2'));var next=Array.prototype.slice.call(element.querySelectorAll('[data-next]'));var previous=Array.prototype.slice.call(element.querySelectorAll('[data-previous]'));var position=0;for(var i=0;i<element.children.length;i++){var tabState=expression.parse(element.children[i].dataset['state']||'');if(tabState===window.location.pathname+window.location.search){position=i;}}

File diff suppressed because one or more lines are too long

View file

@ -4,10 +4,11 @@
repeat: false, repeat: false,
controller: function(element, window) { controller: function(element, window) {
let def = (element.classList.contains('open')) ? 'open' : 'close'; let def = (element.classList.contains('open')) ? 'open' : 'close';
let buttonClass = element.dataset['buttonClass']; let buttonClass = element.dataset['buttonClass'] || 'ls-ui-open';
let buttonText = element.dataset['buttonText'] || ''; let buttonText = element.dataset['buttonText'] || '';
let buttonIcon = element.dataset['buttonIcon'] || ''; let buttonIcon = element.dataset['buttonIcon'] || '';
let hover = element.hasAttribute('data-hover'); let hover = element.hasAttribute('data-hover');
let blur = element.hasAttribute('data-blur');
let button = window.document.createElement('button'); let button = window.document.createElement('button');
let isTouch = function() { let isTouch = function() {
@ -18,6 +19,7 @@
button.innerText = buttonText; button.innerText = buttonText;
button.className = buttonClass; button.className = buttonClass;
button.tabIndex = 1; button.tabIndex = 1;
button.type = 'button';
if(buttonIcon) { if(buttonIcon) {
let icon = window.document.createElement('i'); let icon = window.document.createElement('i');
@ -76,7 +78,10 @@
return null; return null;
}; };
button.addEventListener('blur', closeDelay); if(blur) {
button.addEventListener('blur', closeDelay);
}
element.addEventListener('click', function (event) { element.addEventListener('click', function (event) {
let target = findParent('a', event.target); let target = findParent('a', event.target);

View file

@ -66,34 +66,48 @@
border-bottom: solid 1px #efefef; border-bottom: solid 1px #efefef;
} }
.card { .toggle {
margin: 0 0 20px 0;
height: 30px;
width: 30px;
padding: 0;
background: @config-color-focus-fade;
border-radius: 50%;
position: relative; position: relative;
border-top: 2px solid #f6f7f8;
border-bottom: 2px solid #f6f7f8;
margin: 0 -30px;
padding: 30px;
height: 35px;
overflow: hidden; overflow: hidden;
text-align: center;
&.xdatabase { button.ls-ui-open {
background: #b97fc6; position: absolute;
top: 0;
.func-start(0);
width: 100%;
height: 95px;
background: transparent;
opacity: .5;
border-radius: 0;
} }
&.xstorage { .icon-minus {
background: #f2942c; display: none;
} }
&.xusers { .content {
background: #89e8da; display: none;
} }
i { &.open {
font-size: 15px; height: auto;
line-height: 30px;
color: #000000; .icon-minus {
opacity: 0.08; display: block;
}
.icon-plus {
display: none;
}
.content {
display: block;
}
} }
} }

View file

@ -74,7 +74,7 @@
display: block; display: block;
} }
&.close { &button.close {
display: none; display: none;
} }
@ -93,6 +93,7 @@
h1, h2, h3, h4 , h5, h6 { h1, h2, h3, h4 , h5, h6 {
color: inherit!important; color: inherit!important;
line-height: 35px;
} }
form, .main { form, .main {
@ -128,7 +129,7 @@
border-bottom: solid 1px #eaf2f7; border-bottom: solid 1px #eaf2f7;
} }
.close { button.close {
width: 30px; width: 30px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;