1
0
Fork 0
mirror of synced 2024-06-27 02:31:04 +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>
<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>
<li>
<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>
<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 class="margin-bottom toggle" data-ls-ui-open>
<i class="icon-plus pull-end margin-top-tiny"></i>
<i class="icon-minus pull-end margin-top-tiny"></i>
<h2 class="margin-bottom">
Advanced Options
<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 class="col span-2">
<button type="button" data-remove class="reverse danger round pull-end"><i class="icon-cancel"></i></button>
</div>
</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 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>
<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>
</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>
</form>
@ -209,7 +218,7 @@ use Utopia\Locale\Locale;
</div>
<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>
<h1>Add Task</h1>
@ -260,47 +269,55 @@ use Utopia\Locale\Locale;
<input type="url" class="full-width" id="httpUrl" name="httpUrl" required autocomplete="off" placeholder="https://example.com/callback" />
</div>
</div>
<div class="margin-bottom toggle" data-ls-ui-open>
<i class="icon-plus pull-end margin-top-tiny"></i>
<i class="icon-minus pull-end margin-top-tiny"></i>
<h2 class="margin-bottom">
Advanced Options
<small class="note text-size-small">(optional)</small>
</h2>
<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>
<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>
<label for="secure" class="margin-bottom">SSL / TLS
<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-no" type="radio" value="0" required /> &nbsp; <span>Disabled</span>
</label>
<label for="secure" class="margin-bottom">SSL / TLS
<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-no" type="radio" value="0" required /> &nbsp; <span>Disabled</span>
</label>
<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>
</p>
<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>
</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="col span-6">
<label for="httpUser">User</label>
<input type="text" class="full-width" id="httpUser" name="httpUser" autocomplete="off" />
</div>
<div class="col span-6">
<label for="httpPass">Password</label>
<input type="password" class="full-width" id="httpPass" name="httpPass" autocomplete="off" />
<div class="row thin">
<div class="col span-6">
<label for="httpUser">User</label>
<input type="text" class="full-width" id="httpUser" name="httpUser" autocomplete="off" />
</div>
<div class="col span-6">
<label for="httpPass">Password</label>
<input type="password" class="full-width" id="httpPass" name="httpPass" autocomplete="off" />
</div>
</div>
</div>
<hr />
<button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</form>

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);});}
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);}
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');}
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');});}
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;}}
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;}
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;}}

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);});}
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);}
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');}
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');});}
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;}}
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;}
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;}}

File diff suppressed because one or more lines are too long

View file

@ -4,10 +4,11 @@
repeat: false,
controller: function(element, window) {
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 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() {
@ -18,6 +19,7 @@
button.innerText = buttonText;
button.className = buttonClass;
button.tabIndex = 1;
button.type = 'button';
if(buttonIcon) {
let icon = window.document.createElement('i');
@ -75,8 +77,11 @@
}
return null;
};
if(blur) {
button.addEventListener('blur', closeDelay);
}
button.addEventListener('blur', closeDelay);
element.addEventListener('click', function (event) {
let target = findParent('a', event.target);

View file

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

View file

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