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

Added console loading screen

Browse Source
This commit is contained in:
Eldad Fux
2020-02-18 07:25:28 +02:00
parent fa8214556b
commit 483bfc55e5
10 changed files with 123 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/console/comps/header.phtml
+9 -1
View File
@@ -22,6 +22,8 @@
data-name="account"
data-scope="console"
data-event="load"
data-success="trigger"
data-success-param-trigger-events="account.get"
data-failure="trigger"
data-failure-param-trigger-events="account.deleteSession">
@@ -35,7 +37,7 @@
</a>
</div>
<div class="pull-end margin-end-tiny switch-theme">
<div class="pull-end margin-end switch-theme">
<button data-general-theme
data-analytics-event="click"
data-analytics-category="console/header"
@@ -168,6 +170,12 @@
data-event="load"
data-scope="console"></div>
<div class="load-screen" data-ls-ui-loader>
<div class="animation"><div></div><div></div><div></div><div></div></div>
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
</div>
<div data-ui-modal class="modal box close" data-button-alias=".setup-new" data-button-icon="icon-plus" data-button-class="project-only" data-open-event="create-project">
<h1>Create Project</h1>
gulpfile.js
+1
View File
@@ -63,6 +63,7 @@ const configApp = {
'public/scripts/views/paging/next.js',
'public/scripts/views/ui/highlight.js',
'public/scripts/views/ui/loader.js',
'public/scripts/views/ui/modal.js',
'public/scripts/views/ui/open.js',
'public/scripts/views/ui/phases.js',
public/dist/scripts/app-all.js
Vendored
+2 -2
View File
@@ -2397,7 +2397,7 @@ children[prop]=template.cloneNode(true);element.appendChild(children[prop]);(ind
container.set('$index',originalIndex,true,false);container.set('$prefix',originalPrefix,true,false);container.set('$as',originalAs,true,false);element.dispatchEvent(new Event('looped'));};let template=(element.children.length===1)?element.children[0]:window.document.createElement('li');echo();container.bind(element,expr+'.length',echo);let path=(expr+'.length').split('.');while(path.length){container.bind(element,path.join('.'),echo);path.pop();}}});window.ls.container.get('view').add({selector:'data-ls-template',template:false,repeat:true,controller:function(element,view,http,expression,document){let template=expression.parse(element.getAttribute('data-ls-template'));let type=element.getAttribute('data-type')||'url';element.innerHTML='';if('script'===type){let inlineTemplate=document.getElementById(template);if(inlineTemplate&&inlineTemplate.innerHTML){element.innerHTML=inlineTemplate.innerHTML;element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));}
else{element.innerHTML='<span style="color: red">Missing template "'+template+'"</span>';}
return;}
http.get(template).then(function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));}}(element),function(){throw new Error('Failed loading template');});}});window.ls.error=function(){return function(error){console.error("ERROR-APP",error);};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",formData,true,true);promise.then(function(){window.location='/console';},function(error){window.location='/auth/signup?failure=1';});});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
http.get(template).then(function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));}}(element),function(){throw new Error('Failed loading template');});}});window.ls.error=function(){return function(error){console.error("ERROR-APP",error);};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",{},true,true);promise.then(function(){window.location='/console';},function(error){window.location='/auth/signup?failure=1';});});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
if(time>0){window.setTimeout(function(message){return function(){scope.remove(message.id)}}(message),time);}
return message.id;},remove:function(id){let scope=this;for(let index=0;index<scope.list.length;index++){let obj=scope.list[index];if(obj.id===parseInt(id)){scope.counter--;if(typeof obj.callback==="function"){obj.callback();}
scope.list.splice(index,1);};}}};},true,true);})(window);(function(window){"use strict";window.ls.container.set('console',function(window){var sdk=new window.Appwrite();sdk.setEndpoint(APP_ENV.API).setProject('console').setLocale(APP_ENV.LOCALE);return sdk;},true);})(window);(function(window){"use strict";window.ls.container.set('date',function(){function format(format,timestamp){var jsdate,f
@@ -2658,7 +2658,7 @@ if(element.value===router.params.project){return;}
return router.change("/console/home?project="+element.value);};element.addEventListener("change",function(){check();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-general-theme",controller:function(element,router,document){let toggle=function(c){if(document.body.classList.contains('theme-light')){document.body.classList.remove('theme-light');document.body.classList.add('theme-dark');window.localStorage.setItem('user-theme','theme-dark')}
else{document.body.classList.remove('theme-dark');document.body.classList.add('theme-light');window.localStorage.setItem('user-theme','theme-light')}};element.addEventListener("click",function(){toggle();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let sum=parseInt(expression.parse(element.dataset["sum"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=sum){element.disabled=true;}else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset["lsHref"]||"");list.push(links[i]);}
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add("selected");if(selected!==null){list[selected].classList.remove("selected");}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=element.dataset["name"]||null;let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonClass=element.dataset["buttonClass"]||"button-class";let buttonIcon=element.dataset["buttonIcon"]||null;let buttonEvent=element.dataset["buttonEvent"]||"";let buttonAlias=element.dataset["buttonAlias"]||"";let buttonElements=!buttonAlias?[document.createElement("button")]:document.querySelectorAll(buttonAlias);let openEvent=element.dataset["openEvent"]||null;let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-loader",controller:function(element,document){document.addEventListener('account.get',function(){element.classList.add('loaded');});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=element.dataset["name"]||null;let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonClass=element.dataset["buttonClass"]||"button-class";let buttonIcon=element.dataset["buttonIcon"]||null;let buttonEvent=element.dataset["buttonEvent"]||"";let buttonAlias=element.dataset["buttonAlias"]||"";let buttonElements=!buttonAlias?[document.createElement("button")]:document.querySelectorAll(buttonAlias);let openEvent=element.dataset["openEvent"]||null;let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
if(!buttonAlias){buttonElements.forEach(button=>{button.innerText=buttonText;button.className=buttonClass;button.type="button";if(buttonIcon){let iconElement=document.createElement("i");iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
if(buttonEvent){buttonElements.forEach(button=>{button.addEventListener("click",function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});});}
element.classList.add("modal");if(!buttonAlias){buttonElements.forEach(button=>{element.parentNode.insertBefore(button,element);});}
public/dist/scripts/app.js
Vendored
+2 -2
View File
@@ -123,7 +123,7 @@ children[prop]=template.cloneNode(true);element.appendChild(children[prop]);(ind
container.set('$index',originalIndex,true,false);container.set('$prefix',originalPrefix,true,false);container.set('$as',originalAs,true,false);element.dispatchEvent(new Event('looped'));};let template=(element.children.length===1)?element.children[0]:window.document.createElement('li');echo();container.bind(element,expr+'.length',echo);let path=(expr+'.length').split('.');while(path.length){container.bind(element,path.join('.'),echo);path.pop();}}});window.ls.container.get('view').add({selector:'data-ls-template',template:false,repeat:true,controller:function(element,view,http,expression,document){let template=expression.parse(element.getAttribute('data-ls-template'));let type=element.getAttribute('data-type')||'url';element.innerHTML='';if('script'===type){let inlineTemplate=document.getElementById(template);if(inlineTemplate&&inlineTemplate.innerHTML){element.innerHTML=inlineTemplate.innerHTML;element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));}
else{element.innerHTML='<span style="color: red">Missing template "'+template+'"</span>';}
return;}
http.get(template).then(function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));}}(element),function(){throw new Error('Failed loading template');});}});window.ls.error=function(){return function(error){console.error("ERROR-APP",error);};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",formData,true,true);promise.then(function(){window.location='/console';},function(error){window.location='/auth/signup?failure=1';});});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
http.get(template).then(function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent('template-loaded',{bubbles:true,cancelable:false}));}}(element),function(){throw new Error('Failed loading template');});}});window.ls.error=function(){return function(error){console.error("ERROR-APP",error);};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",{},true,true);promise.then(function(){window.location='/console';},function(error){window.location='/auth/signup?failure=1';});});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
if(time>0){window.setTimeout(function(message){return function(){scope.remove(message.id)}}(message),time);}
return message.id;},remove:function(id){let scope=this;for(let index=0;index<scope.list.length;index++){let obj=scope.list[index];if(obj.id===parseInt(id)){scope.counter--;if(typeof obj.callback==="function"){obj.callback();}
scope.list.splice(index,1);};}}};},true,true);})(window);(function(window){"use strict";window.ls.container.set('console',function(window){var sdk=new window.Appwrite();sdk.setEndpoint(APP_ENV.API).setProject('console').setLocale(APP_ENV.LOCALE);return sdk;},true);})(window);(function(window){"use strict";window.ls.container.set('date',function(){function format(format,timestamp){var jsdate,f
@@ -384,7 +384,7 @@ if(element.value===router.params.project){return;}
return router.change("/console/home?project="+element.value);};element.addEventListener("change",function(){check();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-general-theme",controller:function(element,router,document){let toggle=function(c){if(document.body.classList.contains('theme-light')){document.body.classList.remove('theme-light');document.body.classList.add('theme-dark');window.localStorage.setItem('user-theme','theme-dark')}
else{document.body.classList.remove('theme-dark');document.body.classList.add('theme-light');window.localStorage.setItem('user-theme','theme-light')}};element.addEventListener("click",function(){toggle();});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-back",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());if(offset-limit<0){element.disabled=true;}else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-paging-next",controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset["offset"])||"0");paths=paths.concat(expression.getPaths());let sum=parseInt(expression.parse(element.dataset["sum"])||"0");paths=paths.concat(expression.getPaths());if(offset+limit>=sum){element.disabled=true;}else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-highlight",controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName("a");let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset["lsHref"]||"");list.push(links[i]);}
list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add("selected");if(selected!==null){list[selected].classList.remove("selected");}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=element.dataset["name"]||null;let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonClass=element.dataset["buttonClass"]||"button-class";let buttonIcon=element.dataset["buttonIcon"]||null;let buttonEvent=element.dataset["buttonEvent"]||"";let buttonAlias=element.dataset["buttonAlias"]||"";let buttonElements=!buttonAlias?[document.createElement("button")]:document.querySelectorAll(buttonAlias);let openEvent=element.dataset["openEvent"]||null;let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
selected=i;}else{list[i].classList.remove("selected");}}};document.addEventListener("state-changed",check);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ls-ui-loader",controller:function(element,document){document.addEventListener('account.get',function(){element.classList.add('loaded');});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-ui-modal",controller:function(document,element,expression){let name=element.dataset["name"]||null;let buttonText=expression.parse(element.dataset["buttonText"]||"");let buttonClass=element.dataset["buttonClass"]||"button-class";let buttonIcon=element.dataset["buttonIcon"]||null;let buttonEvent=element.dataset["buttonEvent"]||"";let buttonAlias=element.dataset["buttonAlias"]||"";let buttonElements=!buttonAlias?[document.createElement("button")]:document.querySelectorAll(buttonAlias);let openEvent=element.dataset["openEvent"]||null;let background=document.getElementById("modal-bg");if(!background){background=document.createElement("div");background.id="modal-bg";background.className="modal-bg";document.body.appendChild(background);background.addEventListener("click",function(){document.dispatchEvent(new CustomEvent("modal-close",{bubbles:false,cancelable:true}));});}
if(!buttonAlias){buttonElements.forEach(button=>{button.innerText=buttonText;button.className=buttonClass;button.type="button";if(buttonIcon){let iconElement=document.createElement("i");iconElement.className=buttonIcon;button.insertBefore(iconElement,button.firstChild);}});}
if(buttonEvent){buttonElements.forEach(button=>{button.addEventListener("click",function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});});}
element.classList.add("modal");if(!buttonAlias){buttonElements.forEach(button=>{element.parentNode.insertBefore(button,element);});}
public/dist/styles/default-ltr.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
public/dist/styles/default-rtl.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
public/scripts/init.js
+1 -1
View File
@@ -21,7 +21,7 @@ document.addEventListener("account.create", function() {
let promise = sdk.account.createSession(form.email, form.password);
container.set("serviceForm", formData, true, true); // Remove sensetive data when not needed
container.set("serviceForm", {}, true, true); // Remove sensetive data when not needed
promise.then(function () {
window.location = '/console';
public/scripts/views/ui/loader.js
+10
View File
@@ -0,0 +1,10 @@
(function(window) {
window.ls.container.get("view").add({
selector: "data-ls-ui-loader",
controller: function(element, document) {
document.addEventListener('account.get', function() {
element.classList.add('loaded');
});
}
});
})(window);
public/styles/comps/loader.less
+88
View File
@@ -58,3 +58,91 @@
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.load-screen {
z-index: 100000;
position: fixed;
height: 100%;
width: 100%;
background-color: var(--config-color-background-focus);
top: 0;
.func-start(0);
&.loaded {
transition: opacity 1s ease-in-out, top 1s .7s;
opacity: 0;
top: -100%;
}
.animation {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%) translateZ(1px);
width: 140px;
height: 140px;
}
.animation div {
box-sizing: border-box;
display: block;
position: absolute;
width: 124px;
height: 124px;
margin: 10px;
border: 10px solid var(--config-color-focus);
border-radius: 50%;
animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--config-color-focus) transparent transparent transparent;
}
.animation div:nth-child(1) {
animation-delay: -0.45s;
}
.animation div:nth-child(2) {
animation-delay: -0.3s;
}
.animation div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// .animation > div {
// display: inline-block;
// width: 64px;
// height: 64px;
// margin: 8px;
// border-radius: 50%;
// background: var(--config-color-focus);
// animation: animation 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
// }
// @keyframes animation {
// 0%, 100% {
// animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
// }
// 0% {
// transform: rotateY(0deg);
// }
// 50% {
// transform: rotateY(1800deg);
// animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
// }
// 100% {
// transform: rotateY(3600deg);
// }
// }
img {
position: absolute;
height: 20px;
bottom: 60px;
left: 50%;
transform: translate(-50%,-50%);
}
}
public/styles/forms.less
+8 -8
View File
@@ -1157,28 +1157,28 @@ ol {
.switch-theme {
background: var(--config-switch-background);
border-radius: 19px;
height: 32px;
width: 56px;
margin: 6px 0;
height: 26px;
width: 44px;
margin: 9px 0;
button {
padding: 3px;
display: block;
background: transparent;
height: 32px;
height: 26px;
width: 100%;
}
i {
background: var(--config-color-background-fade);
border-radius: 50%;
height: 26px;
width: 26px;
line-height: 26px;
height: 18px;
width: 18px;
line-height: 18px;
font-size: 12px;
padding: 0;
margin: 0;
color: var(--config-color-normal);
color: var(--config-color-fade);
&.force-light {
.pull-end;