Appwrite/appwrite
1
0
Fork 0
mirror of https://github.com/appwrite/appwrite.git synced 2026-05-26 13:51:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix for modal close window

Browse Source
This commit is contained in:
eldadfux
2019-05-12 23:27:33 +03:00
parent 733ceb4264
commit 166d8abcb9
8 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/console/account/index.phtml
+2 -2
View File
@@ -73,7 +73,7 @@ use Utopia\Locale\Locale;
<input name="password" type="password" class="full-width" autocomplete="off" placeholder="" required>
<footer>
<button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update'); ?></button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
<button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update'); ?></button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
</footer>
</div>
</div>
@@ -102,7 +102,7 @@ use Utopia\Locale\Locale;
<input name="password" type="password" class="full-width" autocomplete="off" placeholder="" required data-forms-password-meter>
<footer>
<button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update-password'); ?></button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
<button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update-password'); ?></button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
</footer>
</form>
</div>
app/views/console/comps/header.phtml
+1 -1
View File
@@ -147,7 +147,7 @@
<br />
<footer>
<button type="submit">Create</button> &nbsp; <button data-ls-trigger="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>
</footer>
</form>
</div>
app/views/console/home/index.phtml
+4 -4
View File
@@ -80,7 +80,7 @@
<li class="clear">
<div data-ui-modal class="modal close" data-button-text="Update" data-button-class="pull-end">
<button type="button" class="close pull-end" data-ls-trigger="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>Update Platform</h1>
@@ -143,7 +143,7 @@
</div>
<div data-ui-modal class="modal close" data-button-alias="web-new">
<button type="button" class="close pull-end" data-ls-trigger="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>New Website</h1>
@@ -190,7 +190,7 @@
</div>
<div class="margin-top">
<button type="submit">Register</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
<button type="submit">Register</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</div>
</form>
</div>
@@ -242,7 +242,7 @@
</div>
<div class="margin-top">
<button type="submit">Update</button> &nbsp; <button data-ls-trigger="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>
</div>
</form>
</script>
app/views/console/settings/index.phtml
+16 -16
View File
@@ -194,7 +194,7 @@ $scopes = [ // TODO sync with project list
<ul data-ls-loop="console-keys" data-ls-as="key" class="list">
<li class="clear">
<div data-ui-modal class="modal close" data-button-text="Update" data-button-class="pull-end">
<button type="button" class="close pull-end" data-ls-trigger="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>Update API Key</h1>
@@ -228,7 +228,7 @@ $scopes = [ // TODO sync with project list
</div>
<div>
<button type="submit">Save</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
<button type="submit">Save</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</div>
</form>
</div>
@@ -253,7 +253,7 @@ $scopes = [ // TODO sync with project list
<div class="margin-bottom-tiny"><span data-ls-bind="{{key.name}}"></span> <span class="note">(<span data-ls-bind="{{key.scopes.length}}"></span> scopes granted)</span></div>
<div data-ui-modal class="modal close" data-button-text="Show Secret" data-button-class="link margin-top-small" data-button-icon="icon-right-open">
<button type="button" class="close pull-end" data-ls-trigger="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>API Key Secret</h1>
@@ -262,7 +262,7 @@ $scopes = [ // TODO sync with project list
<textarea disabled style="height: 130px; line-height: 26px" data-forms-copy data-ls-bind="{{key.secret}}"></textarea>
</div>
<div>
<button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
<button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</div>
</form>
</div>
@@ -272,7 +272,7 @@ $scopes = [ // TODO sync with project list
<div class="clear">
<div data-ui-modal class="modal close" data-button-text="Add API Key">
<button type="button" class="close pull-end" data-ls-trigger="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 API Keys</h1>
@@ -307,7 +307,7 @@ $scopes = [ // TODO sync with project list
<br />
<div>
<button type="submit">Create</button> &nbsp; <button data-ls-trigger="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>
</div>
</form>
</div>
@@ -340,7 +340,7 @@ $scopes = [ // TODO sync with project list
<li class="clear">
<div data-ui-modal class="modal close" data-button-text="Update" data-button-class="pull-end">
<button type="button" class="close pull-end" data-ls-trigger="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>Update Webhook</h1>
@@ -406,7 +406,7 @@ $scopes = [ // TODO sync with project list
<br />
<div>
<button type="submit">Save</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
<button type="submit">Save</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</div>
</form>
</div>
@@ -439,7 +439,7 @@ $scopes = [ // TODO sync with project list
<div class="clear">
<div data-ui-modal class="modal close" data-button-text="Add Webhook">
<button type="button" class="close pull-end" data-ls-trigger="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 Webhook</h1>
@@ -504,7 +504,7 @@ $scopes = [ // TODO sync with project list
<br />
<div>
<button type="submit">Create</button> &nbsp; <button data-ls-trigger="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>
</div>
</form>
</div>
@@ -585,7 +585,7 @@ $scopes = [ // TODO sync with project list
</td>
<td>
<div data-ui-modal class="modal close" data-button-text="" data-button-class="pull-end reverse round" data-button-icon="icon-cog">
<button type="button" class="close pull-end" data-ls-trigger="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>Update Task</h1>
@@ -688,7 +688,7 @@ $scopes = [ // TODO sync with project list
</div>
<div>
<button type="submit">Update</button> &nbsp; <button data-ls-trigger="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>
</div>
</form>
@@ -717,7 +717,7 @@ $scopes = [ // TODO sync with project list
<div class="clear">
<div data-ui-modal class="modal close" data-button-text="Add Task">
<button type="button" class="close pull-end" data-ls-trigger="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>
@@ -806,7 +806,7 @@ $scopes = [ // TODO sync with project list
</div>
<div>
<button type="submit">Create</button> &nbsp; <button data-ls-trigger="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>
</div>
</form>
</div>
@@ -872,7 +872,7 @@ $scopes = [ // TODO sync with project list
</div>
<div data-ui-modal class="modal close width-small" data-button-text="<?php echo Locale::getText('console.settings.section.members.labels.invite'); ?>" data-button-class="">
<button type="button" class="close pull-end" data-ls-trigger="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><?php echo Locale::getText('console.settings.section.members.labels.invite'); ?></h1>
@@ -900,7 +900,7 @@ $scopes = [ // TODO sync with project list
<div class="clear">
<button><?php echo Locale::getText('console.settings.section.members.labels.send'); ?></button>
&nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse"><?php echo Locale::getText('console.settings.section.members.labels.cancel'); ?></button>
&nbsp; <button data-ui-modal-close="" type="button" class="reverse"><?php echo Locale::getText('console.settings.section.members.labels.cancel'); ?></button>
</div>
</form>
</div>
app/views/console/users/index.phtml
+6 -6
View File
@@ -19,7 +19,7 @@ $providers = $this->getParam('providers', []);
<div class="col span-2">
<div class="clear">
<div data-ui-modal class="modal close" data-button-text="" data-button-class="pull-end round" data-button-icon="icon-plus">
<button type="button" class="close pull-end" data-ls-trigger="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>Create User</h1>
@@ -40,7 +40,7 @@ $providers = $this->getParam('providers', []);
<label for="user-password">Password</label>
<input type="password" class="full-width" id="user-password" name="password" required autocomplete="off" />
<button type="submit">Create</button> &nbsp; <button data-ls-trigger="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>
</div>
</div>
@@ -142,7 +142,7 @@ $providers = $this->getParam('providers', []);
<div class="row responsive force-reverse clear margin-bottom-tiny">
<div class="col span-2">
<div data-ui-modal class="modal close" data-button-text="" data-button-class="pull-end round" data-button-icon="icon-plus">
<button type="button" class="close pull-end" data-ls-trigger="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>Create Team</h1>
@@ -157,7 +157,7 @@ $providers = $this->getParam('providers', []);
<label for="user-name">Name</label>
<input type="text" class="full-width" id="user-name" name="name" required autocomplete="off" />
<button type="submit">Create</button> &nbsp; <button data-ls-trigger="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>
</div>
</div>
@@ -227,7 +227,7 @@ $providers = $this->getParam('providers', []);
<label for="name">Name</label>
<input name="name" id="name" type="text" autocomplete="off" data-ls-bind="{{team.name}}">
<button>Update</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
<button>Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</form>
</div>
</td>
@@ -299,7 +299,7 @@ $providers = $this->getParam('providers', []);
</div>
</div>
<button>Update</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
<button>Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</form>
</div>
public/dist/scripts/app-all.js
Vendored
+3 -2
View File
@@ -2287,9 +2287,10 @@ else{list[i].classList.remove('selected');}}};document.addEventListener('state-c
if(!buttonAlias){buttonElement.innerText=buttonText;buttonElement.className=buttonClass;buttonElement.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;buttonElement.insertBefore(iconElement,buttonElement.firstChild);}}
if(buttonEvent){buttonElement.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});}
element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(buttonElement,element);}
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');};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);}
buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));}});element.addEventListener('blur',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});document.addEventListener('modal-close',function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');});}});})(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);}
buttonElement.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);}});})(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);}
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');});}
public/dist/scripts/app.js
Vendored
+3 -2
View File
@@ -345,9 +345,10 @@ else{list[i].classList.remove('selected');}}};document.addEventListener('state-c
if(!buttonAlias){buttonElement.innerText=buttonText;buttonElement.className=buttonClass;buttonElement.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;buttonElement.insertBefore(iconElement,buttonElement.firstChild);}}
if(buttonEvent){buttonElement.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});}
element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(buttonElement,element);}
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');};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);}
buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));}});element.addEventListener('blur',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});document.addEventListener('modal-close',function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');});}});})(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);}
buttonElement.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);}});})(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);}
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');});}
public/scripts/views/ui/modal.js
+15 -15
View File
@@ -68,6 +68,13 @@
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);
@@ -82,26 +89,19 @@
document.addEventListener('keydown', function(event) {
if (event.which === 27) {
document.dispatchEvent(new CustomEvent('modal-close', {
bubbles: false,
cancelable: true
}));
close();
}
});
element.addEventListener('blur', function() {
document.dispatchEvent(new CustomEvent('modal-close', {
bubbles: false,
cancelable: true
}));
});
element.addEventListener('blur', close);
document.addEventListener('modal-close', function () {
document.documentElement.classList.remove('modal-open');
let closeButtons = element.querySelectorAll('[data-ui-modal-close]');
element.classList.add('close');
element.classList.remove('open');
});
for(let i =0; i < closeButtons.length; i++){
closeButtons[i].addEventListener('click', close);
}
document.addEventListener('modal-close', close);
}
}
);