1
0
Fork 0
mirror of synced 2024-06-02 10:54:44 +12:00

Added theme color

This commit is contained in:
Eldad Fux 2020-02-11 13:55:57 +02:00
parent 152a82a2b4
commit b4c79b5d54
12 changed files with 79 additions and 21 deletions

View file

@ -1,3 +1,11 @@
<div class="logo text-align-center">
<a href="/"><img src="/images/appwrite.svg" alt="Appwrite Logo" /></a>
<a href="/">
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer.svg" alt="Appwrite Dark Logo" class="force-dark" />
</a>
<button data-general-theme class="theme-button trans text-fade">
<i class="icon-sun-inv force-dark"></i>
<i class="icon-moon-inv force-light"></i>
</button>
</div>

View file

@ -102,7 +102,15 @@ if(!empty($platforms)) {
<?php echo $this->exec($this->getParam('head', [])); ?>
</head>
<body class="light-theme" data-general-scroll-to data-general-scroll-direction>
<body class="theme-light" data-general-scroll-to data-general-scroll-direction>
<script>
let theme = window.localStorage.getItem('user-theme');
if(theme === 'theme-dark') {
document.body.classList.remove('theme-light');
document.body.classList.add('theme-dark');
}
</script>
<?php echo $this->exec($this->getParam('header', [])); ?>
<main data-ls-router data-first-from-server="true" data-acl data-analytics-pageview>

View file

@ -57,6 +57,7 @@ const configApp = {
'public/scripts/views/general/scroll-direction.js',
'public/scripts/views/general/setup.js',
'public/scripts/views/general/switch.js',
'public/scripts/views/general/theme.js',
'public/scripts/views/paging/back.js',
'public/scripts/views/paging/next.js',

View file

@ -2655,7 +2655,8 @@ element.classList.add('scroll-to-top')}
position=direction;let current=Math.ceil(direction/window.innerHeight);element.setAttribute('data-views-total',Math.ceil(element.scrollHeight/window.innerHeight));element.setAttribute('data-views-current',current);if(element.scrollHeight<=(direction+element.offsetHeight+300)&&direction>0){element.classList.add('scroll-end')}
else{element.classList.remove('scroll-end')}};window.addEventListener('scroll',check,false);window.addEventListener('resize',check,false);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-setup",controller:function(element,console,form,alerts){element.addEventListener("submit",function(event){event.preventDefault();let loaderId=alerts.add({text:'Creating new project...',class:""},0);let formData=form.toJson(element);formData["name"]=formData["name"]||(element.dataset["defaultName"]||"");console.teams.create(formData["name"]||"").then(function(data){let team=data["$uid"];formData=JSON.parse(JSON.stringify(formData).replace(new RegExp("{{teamId}}","g"),team));console.projects.create(formData["name"],team).then(function(project){alerts.remove(loaderId);window.location.href="/console/home?project="+project["$uid"];},function(){throw new Error("Failed to setup project");});},function(){throw new Error("Setup failed creating project team");});});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-switch",controller:function(element,router,document){let check=function(c){if(!element.value){return;}
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-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]);}
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}));});}
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);}});}

View file

@ -381,7 +381,8 @@ element.classList.add('scroll-to-top')}
position=direction;let current=Math.ceil(direction/window.innerHeight);element.setAttribute('data-views-total',Math.ceil(element.scrollHeight/window.innerHeight));element.setAttribute('data-views-current',current);if(element.scrollHeight<=(direction+element.offsetHeight+300)&&direction>0){element.classList.add('scroll-end')}
else{element.classList.remove('scroll-end')}};window.addEventListener('scroll',check,false);window.addEventListener('resize',check,false);check();}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-setup",controller:function(element,console,form,alerts){element.addEventListener("submit",function(event){event.preventDefault();let loaderId=alerts.add({text:'Creating new project...',class:""},0);let formData=form.toJson(element);formData["name"]=formData["name"]||(element.dataset["defaultName"]||"");console.teams.create(formData["name"]||"").then(function(data){let team=data["$uid"];formData=JSON.parse(JSON.stringify(formData).replace(new RegExp("{{teamId}}","g"),team));console.projects.create(formData["name"],team).then(function(project){alerts.remove(loaderId);window.location.href="/console/home?project="+project["$uid"];},function(){throw new Error("Failed to setup project");});},function(){throw new Error("Setup failed creating project team");});});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-switch",controller:function(element,router,document){let check=function(c){if(!element.value){return;}
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-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]);}
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}));});}
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);}});}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,23 @@
(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);

View file

@ -36,7 +36,7 @@
--config-social-discord: #7189dc;
--config-social-facebook: #4070b4;
.dark-theme {
.theme-dark {
--config-color-background-fade: #1c2138;
--config-color-background-focus: #1F253F;
--config-color-link: rgb(76, 174, 219);
@ -68,18 +68,26 @@
}
}
.light-theme {
.theme-light {
.force-light {
display: block;
}
}
.dark-theme {
.theme-dark {
.force-dark {
display: block;
}
}
.force-dark {
display: none;
}
.force-light {
display: none;
}
@watch: ~"only screen and (max-width: 260px)";
@phones: ~"only screen and (max-width: 550px)";
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1200px)";
@ -144,14 +152,6 @@ ul {
}
}
.force-dark {
display: none;
}
.force-light {
display: none;
}
.force-left {
direction: ltr;
text-align: left;

View file

@ -625,6 +625,18 @@
"search": [
"discord-logo-black"
]
},
{
"uid": "c2152732d525871cf35345955854f711",
"css": "moon-inv",
"code": 59464,
"src": "iconic"
},
{
"uid": "48050e07077b01021f7fbdbbec8f7de7",
"css": "sun-inv",
"code": 59465,
"src": "iconic"
}
]
}

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,7 @@
html.home {
body {
padding: 0 50px;
color: var(--config-color-normal)
}
.logo {
@ -16,7 +17,8 @@ html.home {
img {
max-height: 35px;
margin: 45px 25px 25px 25px;
width: 198px;
margin: 45px auto 25px auto;
}
}