Added theme color
This commit is contained in:
parent
152a82a2b4
commit
b4c79b5d54
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
3
public/dist/scripts/app-all.js
vendored
3
public/dist/scripts/app-all.js
vendored
|
@ -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);}});}
|
||||
|
|
3
public/dist/scripts/app.js
vendored
3
public/dist/scripts/app.js
vendored
|
@ -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);}});}
|
||||
|
|
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
23
public/scripts/views/general/theme.js
Normal file
23
public/scripts/views/general/theme.js
Normal 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);
|
|
@ -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;
|
||||
|
|
|
@ -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
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue