From 7dac8c1272fde4a10ede3e5bda9d7327df623eb8 Mon Sep 17 00:00:00 2001 From: Vilius Date: Mon, 23 Jul 2018 17:47:37 +0300 Subject: [PATCH] themes support --- src/css/layout.css | 75 +++++++++++++++++--------------- src/css/popup.css | 9 ++-- src/css/reset.css | 45 +++++++++++++++---- src/js/config.js | 7 +++ src/js/core/base-gui.js | 26 ++++++++++- src/js/core/gui/gui-preview.js | 14 +++--- src/js/libs/popup.js | 16 +++++++ src/js/modules/tools/settings.js | 24 +++++++++- 8 files changed, 160 insertions(+), 56 deletions(-) diff --git a/src/css/layout.css b/src/css/layout.css index b66eaf65..2ef59d9c 100644 --- a/src/css/layout.css +++ b/src/css/layout.css @@ -53,36 +53,35 @@ user-select: none; /* Non-prefixed version */ } .block{ + position: relative; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-medium); + background-color: var(--background-color-area); border: 1px solid rgba(0, 0, 0, 0.5); - border: 1px solid var(--background-color-border); - padding:5px; + border: 1px solid var(--border-color); margin-bottom: 10px; user-select: none; } +.sidebar_right .block{ + background-color: #68727b; + background-color: var(--background-color-section); +} .block:last-child{ margin-bottom: 0; } .block h2{ position: relative; - margin: -5px -5px 10px -5px; padding: 2px 5px; + margin: 0; font-size: 110%; background-color: rgba(255, 255, 255, 0.3); - background-color: var(--background-color-light); + background-color: var(--background-color-header); border-bottom: #555; } -.block h2:after{ - position:absolute; - content:''; - height:0; - left:0; - right:0; - bottom: -2px; - border-top: 1px solid #aaa; +.block.toggled h2, .block h2.toggled:after{ + border: none; } .block h2.toggle:before{ + /* icon */ position:absolute; content:''; width: 0; @@ -94,9 +93,13 @@ border-color: transparent transparent #333333 transparent; } .block h2.toggled:before{ + /* icon */ border-width: 6px 5px 0 5px; border-color: #333333 transparent transparent transparent; } +.block .content{ + padding:5px; +} .error{ padding:20px; margin:10px; @@ -113,11 +116,14 @@ display: inline-block; float: left; height: 30px; + width: 110px; padding: 5px 5px 5px 36px; margin: 5px; + font-size: 14px; text-decoration: none; font-weight: bold; color: #ffffff; + color: var(--text-color); } .logo:after{ position:absolute; @@ -148,7 +154,7 @@ transform: translate(5px 0px); } 30%, 50%, 70%{ - transform: translate(0px 0px;); + transform: translate(0px 0px); } 40%, 60%{ transform: translate(6px 0px); @@ -159,12 +165,12 @@ .submenu{ height:40px; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-medium); + background-color: var(--background-color-section); overflow: hidden; } .attributes{ float: left; - width: calc(100% - 115px); + width: calc(100% - 125px); height: 30px; margin-top: 5px; padding: 3px 10px 0 10px; @@ -182,12 +188,13 @@ display: inline-block; padding: 3px 10px; border: 1px solid #444; - background-color: transparent; + border-color: var(--border-color); + background-color: var(--background-color-button); margin-right: 5px; } .attributes button:hover{ background-color: rgba(255, 255, 255, 0.3); - background-color: var(--background-color-light); + background-color: var(--background-color-hover); } .attributes button.active{ background-color: #419147; @@ -202,23 +209,22 @@ top: 45px; width: 40px; padding: 0 5px; - background-color: var(--background-color-medium); + background-color: var(--background-color-section); } .sidebar_left .item{ display:block; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-medium); + background-color: var(--background-color-area); background-image: url(images/sprites.png); background-repeat: no-repeat; height: 25px; margin: 5px 0 5px 0; overflow: hidden; cursor: pointer; - /*filter: grayscale(1);*/ } .sidebar_left .item:hover{ background-color: rgba(255, 255, 255, 0.5); - background-color: var(--background-color-lightest); + background-color: var(--background-color-hover); } .sidebar_left .item.active{ background-color: #419147; @@ -282,6 +288,9 @@ height:100px; margin-bottom:10px; } +.canvas_preview_details{ + padding: 0 5px; +} .preview canvas{ cursor: pointer; } @@ -292,9 +301,10 @@ /* color */ .color_area{ border: 1px solid #444; - width: 100%; + width: calc(100% - 10px); height: 40px; cursor: pointer; + margin: 5px; } .colors .content{ margin-top: 10px; @@ -343,9 +353,8 @@ float:right; margin-left:5px; padding:1px 8px; - background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-medium); border:1px solid #444; + border-color: var(--border-color); text-decoration:none; color:#000000; font-size:12px; @@ -356,6 +365,7 @@ background-color: #419147; background-color: var(--background-color-active); border:1px solid #444; + border-color: var(--border-color); cursor:pointer; text-decoration:none; } @@ -368,7 +378,9 @@ height:19px; overflow:hidden; background-color:#989898; + background-color: var(--background-color-area); border:1px solid #393939; + border-color: var(--border-color); border-radius:3px; cursor:pointer; overflow:hidden; @@ -420,21 +432,13 @@ bottom:0; width: 20px; } - .sidebar_right .label{ display: inline-block; width: 60px; } -.sidebar_right button.extra{ - border: 1px solid #444; - background-color: var(--background-color-medium); -} .info .toggle.toggled{ margin-bottom: -3px; } -.toggle-full.toggle.toggled{ - margin-bottom: -3px; -} .block.details .row{ clear:both; margin-bottom: 2px; @@ -450,7 +454,6 @@ .block.details button{ height: 23px; border: 1px solid #444; - background-color: var(--background-color-medium); } .block.details button.reset{ width: 25px; @@ -486,7 +489,7 @@ } .canvas_wrapper canvas{ position: absolute; - border: 1px solid #393939; + border: 1px solid var(--border-color); box-sizing: content-box; } #mouse{ @@ -541,7 +544,7 @@ canvas{ pointer-events:none; } .group{ - border:1px solid #888888; + border:1px solid #999999; margin: 5px 0px 5px 0px; padding:5px 8px; } diff --git a/src/css/popup.css b/src/css/popup.css index be871777..e2bb7a4f 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -4,8 +4,9 @@ top: 20vh; left: calc(50% - 500px / 2); background-color: #7A838B; + background-color: var(--background-color-section); border: 1px solid rgba(0, 0, 0, 0.5); - border: 1px solid var(--background-color-border); + border: 1px solid var(--border-color); width:500px; max-width: 100%; max-height: calc(80vh); @@ -30,7 +31,7 @@ padding: 6px 10px; font-size: 18px; background-color: rgba(255, 255, 255, 0.3); - background-color: var(--background-color-light); + background-color: var(--background-color-header); /*cursor:move;*/ } #popup .buttons{ @@ -58,10 +59,10 @@ #popup .button{ margin: 0 3px; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-medium); + background-color: var(--background-color-button); min-width:60px; border:1px solid rgba(0, 0, 0, 0.5); - border:1px solid var(--background-color-border); + border:1px solid var(--border-color); padding: 5px 10px; } #popup input[type="text"], #popup input[type="number"], #popup textarea{ diff --git a/src/css/reset.css b/src/css/reset.css index 20f4a826..5ac09bd8 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -3,21 +3,47 @@ background-repeat: no-repeat; } :root { - /* default */ - --background-color: #424F5A; - --background-color-medium: rgba(255, 255, 255, 0.2); - --background-color-light: rgba(255, 255, 255, 0.3); - --background-color-lightest: rgba(255, 255, 255, 0.5); - --background-color-border: rgba(0, 0, 0, 0.5); - --background-color-active: #419147; + /* original - default */ + --background: #424F5A; --text-color: #000000; + --background-color-section: #68727b; + --background-color-area: #868e95; + --background-color-header: #a2a8ae; + --background-color-button: #959ca2; + --background-color-active: #419147; + --background-color-hover: #b4b9bd; + --border-color: #3c3c3c; +} +body.theme-light{ + /* light */ + --background: #f9f9fa; + --text-color: #0c0c0d; + --background-color-section: #f1f1f1; + --background-color-area: #ccc; + --background-color-header: #dcdcdc; + --background-color-button: #f9f9fa; + --background-color-active: #0a84ff; + --background-color-hover: #e1e1e2; + --border-color: #c1c1c1; +} +body.theme-green{ + /* green */ + --background: #050702; + --text-color: #acc3a9; + --background-color-section: #1c2e04; + --background-color-area: #3b5f11; + --background-color-header: #2b460f; + --background-color-button: #2e4a0d; + --background-color-active: #58960e; + --background-color-hover: #58960e; + --border-color: #4d6b1e; } body{ margin: 0px; padding: 0px; padding-top: 30px; background-color: #424F5A; - background-color: var(--background-color); + background: var(--background); font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: #000000; @@ -65,6 +91,7 @@ hr{ } input[type="text"], input[type="button"], select, input[type="number"], textarea{ border:1px solid #393939; + border-color: var(--border-color); padding: 3px 5px; font-size: 13px; } @@ -87,6 +114,8 @@ input[type="button"]:disabled{ button{ border-radius: 0; cursor: pointer; + background-color: var(--background-color-button); + color: var(--color-text); } label{ display: inline-block; diff --git a/src/js/config.js b/src/js/config.js index 90a68d8f..57319872 100644 --- a/src/js/config.js +++ b/src/js/config.js @@ -18,6 +18,13 @@ config.layer = null; config.need_render = false; config.mouse = {}; +//requires styles in reset.css +config.themes = [ + 'dark', + 'light', + 'green', +]; + config.TOOLS = [ { name: 'select', diff --git a/src/js/core/base-gui.js b/src/js/core/base-gui.js index 00ed2efb..d06954d7 100644 --- a/src/js/core/base-gui.js +++ b/src/js/core/base-gui.js @@ -49,7 +49,7 @@ class Base_gui_class { [1600, 1200, 'UXGA'], [1920, 1080, 'Full HD, 1080p'], [3840, 2160, '4K UHD'], - //[7680,4320, '8K UHD'], + //[7680,4320, '8K UHD'], ]; this.GUI_tools = new GUI_tools_class(this); @@ -103,6 +103,7 @@ class Base_gui_class { render_main_gui() { this.autodetect_dimensions(); + this.change_theme(); this.prepare_canvas(); this.GUI_tools.render_main_tools(); this.GUI_preview.render_main_preview(); @@ -375,6 +376,29 @@ class Base_gui_class { }; } + /** + * change theme or set automatically from cookie if possible + * + * @param {string} theme_name + */ + change_theme(theme_name){ + if(theme_name == undefined){ + //auto detect + var theme_cookie = this.Helper.getCookie('theme'); + if (theme_cookie) { + theme_name = theme_cookie; + } + else { + theme_name = config.themes[0]; + } + } + + for(var i in config.themes){ + document.querySelector('body').classList.remove('theme-' + config.themes[i]); + } + document.querySelector('body').classList.add('theme-' + theme_name); + } + } export default Base_gui_class; diff --git a/src/js/core/gui/gui-preview.js b/src/js/core/gui/gui-preview.js index af5fb58c..d706f1e4 100644 --- a/src/js/core/gui/gui-preview.js +++ b/src/js/core/gui/gui-preview.js @@ -13,13 +13,15 @@ var template = `
-
- - - - +
+
+ + + + +
+
- `; /** diff --git a/src/js/libs/popup.js b/src/js/libs/popup.js index eb98b917..d92a0726 100644 --- a/src/js/libs/popup.js +++ b/src/js/libs/popup.js @@ -20,6 +20,7 @@ * on_load: function(params){...}, * on_change: function(params, canvas_preview, w, h){...}, * on_finish: function(params){...}, + * on_cancel: function(params){...}, * }; * this.POP.show(settings); * @@ -72,6 +73,7 @@ class Dialog_class { this.active = false; this.title = null; this.onfinish = false; + this.oncancel = false; this.preview = false; this.onload = false; this.onchange = false; @@ -107,6 +109,7 @@ class Dialog_class { this.title = config.title || ''; this.parameters = config.params || []; this.onfinish = config.on_finish || false; + this.oncancel = config.on_cancel || false; this.preview = config.preview || false; this.onchange = config.on_change || false; this.onload = config.on_load || false; @@ -132,6 +135,7 @@ class Dialog_class { this.className = ''; this.comment = ''; this.onfinish = false; + this.oncancel = false; } /* ----------------- private functions ---------------------------------- */ @@ -192,6 +196,15 @@ class Dialog_class { this.hide(); } + + //"Cancel" pressed + cancel() { + var params = this.get_params(); + + if (this.oncancel) { + this.oncancel(params); + } + } get_params() { var response = {}; @@ -297,6 +310,9 @@ class Dialog_class { document.getElementById('popup_ok').addEventListener('click', function (event) { _this.save(); }); + document.getElementById('popup_cancel').addEventListener('click', function (event) { + _this.cancel(); + }); var targets = document.querySelectorAll('#popup input'); for (var i = 0; i < targets.length; i++) { targets[i].addEventListener('keyup', function (event) { diff --git a/src/js/modules/tools/settings.js b/src/js/modules/tools/settings.js index e5980211..c92e5f52 100644 --- a/src/js/modules/tools/settings.js +++ b/src/js/modules/tools/settings.js @@ -35,6 +35,15 @@ class Tools_settings_class { else { var save_resolution = false; } + + //theme + var theme_cookie = this.Helper.getCookie('theme'); + if (theme_cookie) { + var theme = theme_cookie; + } + else { + var theme = config.themes[0]; + } var t_values = ['squares', 'green', 'grey']; @@ -42,9 +51,17 @@ class Tools_settings_class { title: 'Settings', params: [ {name: "transparency", title: "Transparent:", value: transparency}, - {name: "transparency_type", title: "Transparency background:", value: config.TRANSPARENCY_TYPE, values: t_values}, + {name: "transparency_type", title: "Transparency background:", + value: config.TRANSPARENCY_TYPE, values: t_values}, + {name: "theme", title: "Theme", values: config.themes, value: theme}, {name: "save_resolution", title: "Save resolution:", value: save_resolution}, ], + on_change: function (params) { + this.Base_gui.change_theme(params.theme); + }, + on_cancel: function (params) { + this.Base_gui.change_theme(theme); + }, on_finish: function (params) { _this.save_values(params); }, @@ -55,6 +72,7 @@ class Tools_settings_class { save_values(params) { var save_resolution = params.save_resolution; var transparency = params.transparency; + var theme = params.theme; //save_resolution if (save_resolution) { @@ -73,6 +91,10 @@ class Tools_settings_class { this.Helper.setCookie('transparency', 0); config.TRANSPARENCY = false; } + + //save theme + this.Helper.setCookie('theme', theme); + this.Base_gui.change_theme(theme); //transparency_type config.TRANSPARENCY_TYPE = params.transparency_type;