Improved themes
This commit is contained in:
parent
131ed31b50
commit
cc38f04dd6
@ -14,7 +14,7 @@ npm start
|
|||||||
|
|
||||||
## Extras
|
## Extras
|
||||||
|
|
||||||
- Download additional [themes](https://github.com/hundredrabbits/Themes).
|
- This application supports the [Ecosystem Theme](https://github.com/hundredrabbits/Themes).
|
||||||
- Support this project through [Patreon](https://patreon.com/100).
|
- Support this project through [Patreon](https://patreon.com/100).
|
||||||
- See the [License](LICENSE.md) file for license rights and limitations (MIT).
|
- See the [License](LICENSE.md) file for license rights and limitations (MIT).
|
||||||
- Pull Requests are welcome!
|
- Pull Requests are welcome!
|
||||||
|
@ -78,9 +78,8 @@
|
|||||||
dotgrid.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
|
dotgrid.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
|
||||||
dotgrid.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
|
dotgrid.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
|
||||||
|
|
||||||
dotgrid.controller.add("default","Theme","Default",() => { dotgrid.theme.default(); },"CmdOrCtrl+Shift+1");
|
dotgrid.controller.add("default","Theme","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+1");
|
||||||
dotgrid.controller.add("default","Theme","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+2");
|
dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+2");
|
||||||
dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+3");
|
|
||||||
dotgrid.controller.add("default","Theme","Invert",() => { dotgrid.theme.invert(); },"CmdOrCtrl+Shift+I");
|
dotgrid.controller.add("default","Theme","Invert",() => { dotgrid.theme.invert(); },"CmdOrCtrl+Shift+I");
|
||||||
dotgrid.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); });
|
dotgrid.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); });
|
||||||
|
|
||||||
|
@ -6,6 +6,7 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
|
|||||||
|
|
||||||
this.el = document.createElement("style")
|
this.el = document.createElement("style")
|
||||||
this.el.type = 'text/css'
|
this.el.type = 'text/css'
|
||||||
|
|
||||||
this.callback;
|
this.callback;
|
||||||
this.active;
|
this.active;
|
||||||
|
|
||||||
@ -22,40 +23,31 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.start = function()
|
this.start = function()
|
||||||
{
|
|
||||||
this.restore();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.restore = function()
|
|
||||||
{
|
{
|
||||||
let storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default;
|
let storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default;
|
||||||
|
|
||||||
this.load(!storage.background ? this.collection.default : storage)
|
this.load(!storage.background ? this.collection.default : storage)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.parse = function(any)
|
this.save = function(theme)
|
||||||
{
|
{
|
||||||
let theme;
|
this.active = theme;
|
||||||
|
localStorage.setItem("theme", JSON.stringify(theme));
|
||||||
if(any && any.data){ return any; }
|
|
||||||
else if(any && is_json(any)){ return JSON.parse(any); }
|
|
||||||
else if(any && is_html(any)){ return this.extract(any); }
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.unwrap = function(t)
|
|
||||||
{
|
|
||||||
return t.data ? t.data : t;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.load = function(theme, fall_back = this.collection.noir)
|
this.load = function(theme, fall_back = this.collection.noir)
|
||||||
{
|
{
|
||||||
if(!theme || !theme.background){ console.warn("Theme","Not a theme",theme); return; }
|
if(!theme || !theme.background){ console.warn("Theme","Not a theme",theme); return; }
|
||||||
|
|
||||||
this.active = theme;
|
this.save(theme);
|
||||||
localStorage.setItem("theme", JSON.stringify(theme));
|
this.apply(theme);
|
||||||
|
|
||||||
|
if(this.callback){
|
||||||
|
this.callback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.apply = function(theme)
|
||||||
|
{
|
||||||
this.el.innerHTML = `
|
this.el.innerHTML = `
|
||||||
:root {
|
:root {
|
||||||
--background: ${theme.background};
|
--background: ${theme.background};
|
||||||
@ -68,41 +60,19 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
|
|||||||
--b_low: ${theme.b_low};
|
--b_low: ${theme.b_low};
|
||||||
--b_inv: ${theme.b_inv};
|
--b_inv: ${theme.b_inv};
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
if(this.callback){
|
|
||||||
this.callback();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.reset = function()
|
this.parse = function(any)
|
||||||
{
|
{
|
||||||
this.load(this.collection.default);
|
let theme;
|
||||||
|
|
||||||
|
if(any && any.data){ return any; }
|
||||||
|
else if(any && is_json(any)){ return JSON.parse(any); }
|
||||||
|
else if(any && is_html(any)){ return this.extract(any); }
|
||||||
|
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Defaults
|
|
||||||
|
|
||||||
this.default = function()
|
|
||||||
{
|
|
||||||
this.load(this.collection.default)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.pale = function()
|
|
||||||
{
|
|
||||||
this.load(this.collection.pale)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.noir = function()
|
|
||||||
{
|
|
||||||
this.load(this.collection.noir)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.invert = function()
|
|
||||||
{
|
|
||||||
this.load(this.active.background == this.collection.noir.data.background ? this.collection.pale : this.collection.noir)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Parser
|
|
||||||
|
|
||||||
this.extract = function(text)
|
this.extract = function(text)
|
||||||
{
|
{
|
||||||
let svg = new DOMParser().parseFromString(text,"text/xml")
|
let svg = new DOMParser().parseFromString(text,"text/xml")
|
||||||
@ -125,6 +95,28 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.reset = function()
|
||||||
|
{
|
||||||
|
this.load(this.collection.default);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Defaults
|
||||||
|
|
||||||
|
this.pale = function()
|
||||||
|
{
|
||||||
|
this.load(this.collection.pale)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.noir = function()
|
||||||
|
{
|
||||||
|
this.load(this.collection.noir)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.invert = function()
|
||||||
|
{
|
||||||
|
this.load(this.active.background == this.collection.noir.data.background ? this.collection.pale : this.collection.noir)
|
||||||
|
}
|
||||||
|
|
||||||
// Drag
|
// Drag
|
||||||
|
|
||||||
this.drag = function(e)
|
this.drag = function(e)
|
||||||
@ -146,8 +138,7 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
|
|||||||
|
|
||||||
let reader = new FileReader();
|
let reader = new FileReader();
|
||||||
reader.onload = function(e){
|
reader.onload = function(e){
|
||||||
let theme = themer.parse(e.target.result);
|
themer.load(themer.parse(e.target.result));
|
||||||
themer.load(theme);
|
|
||||||
};
|
};
|
||||||
reader.readAsText(file);
|
reader.readAsText(file);
|
||||||
}
|
}
|
||||||
@ -157,5 +148,4 @@ function Theme(default_theme = {background: "#222", f_high: "#fff", f_med: "#777
|
|||||||
|
|
||||||
function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } }
|
function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } }
|
||||||
function is_html(text){ try{ new DOMParser().parseFromString(text,"text/xml"); return true; } catch (error){ return false; } }
|
function is_html(text){ try{ new DOMParser().parseFromString(text,"text/xml"); return true; } catch (error){ return false; } }
|
||||||
function is_embed(text){ return text.indexOf("<!-- THEME") > -1 && text.indexOf("-->") > -1; }
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user