From b72efcb2ce6ed14f675139844227b01a146932a4 Mon Sep 17 00:00:00 2001 From: Nemesis Date: Wed, 26 Sep 2018 20:03:55 +0200 Subject: [PATCH] Advanced theme customization (#16) * Add modal, preview of the actual theme, set colors * Add reset btn and add feedback to the user * Update README and update version ![preview](https://puu.sh/BBnmY/ec362017c8.png) ![preview](https://puu.sh/BBnoA/b117370050.gif) Beautiful, isn't it ? --- README.md | 8 ++--- package.json | 2 +- src/assets/css/index.css | 38 ++++++++++++++++++++- src/index.html | 51 +++++++++++++++++++++++++++-- src/renderer.js | 71 +++++++++++++++++++++++++++++++++++++++- 5 files changed, 160 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 503ea2f..e1844d0 100644 --- a/README.md +++ b/README.md @@ -29,15 +29,13 @@ * [x] Search images (10 to 100 per request) * [x] 3 cards layout -* [x] Dark & Light mode +* [x] Advanced Theme Customization * [x] Rating (Safe, Explicit, Questionable) * [x] Pagination * [x] Save image -* [x] Browse all -* [x] Top images -* [x] Hot images +* [x] Browse all, see Top images and Hot images * [x] Blacklist (Exclude tags) -* [ ] Endless scrolling +* [ ] Endless scrolling (in progress [see #15](https://github.com/KeziahMoselle/gelbooru-client/pull/15)) ## Download Note: gelbooru-client is developped on Windows, but you can follow the `Installing` part to build the .dmg for MacOS, it should work. diff --git a/package.json b/package.json index f3b6507..b041d66 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gelbooru-client", - "version": "0.8.0", + "version": "0.9.0", "description": "You already know what it is.", "main": "main.js", "dependencies": { diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 7362c18..a8b17be 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -1,6 +1,5 @@ :root { --primary: #35385B; - --primary-dark: #303252; --accent: #6688EC; --dark: #242424; } @@ -152,6 +151,27 @@ div#loading { padding: 0 32px; } +/** + * THEME CUSTOMIZATION + */ + + .preview-color { + height: 90px; + width: auto; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + display: inline-block; + background-color: #EEE; + } + + #themeCustomization.modal h1 { + font-weight: 600; + margin-bottom: 40px; + } + /* * MATERIALIZE CSS */ @@ -348,6 +368,22 @@ textarea.materialize-textarea:focus:not([readonly]) { box-shadow: 0 1px 0 0 var(--accent); } +input:not([type]):focus:not([readonly]) + label, +input[type=text]:not(.browser-default):focus:not([readonly]) + label, +input[type=password]:not(.browser-default):focus:not([readonly]) + label, +input[type=email]:not(.browser-default):focus:not([readonly]) + label, +input[type=url]:not(.browser-default):focus:not([readonly]) + label, +input[type=time]:not(.browser-default):focus:not([readonly]) + label, +input[type=date]:not(.browser-default):focus:not([readonly]) + label, +input[type=datetime]:not(.browser-default):focus:not([readonly]) + label, +input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label, +input[type=tel]:not(.browser-default):focus:not([readonly]) + label, +input[type=number]:not(.browser-default):focus:not([readonly]) + label, +input[type=search]:not(.browser-default):focus:not([readonly]) + label, +textarea.materialize-textarea:focus:not([readonly]) + label { + color: var(--accent); +} + .no-content-img { height: 400px; width: auto; diff --git a/src/index.html b/src/index.html index 9e0d8ed..d80c2a7 100644 --- a/src/index.html +++ b/src/index.html @@ -48,7 +48,7 @@
Gelbooru Client - +
  • Pages
    • @@ -58,6 +58,7 @@
  • labelExclude tags
  • Settings
    • +
  • paletteCustomization

    • @@ -137,6 +138,52 @@

    Your Blacklist

    + + + + @@ -183,7 +230,7 @@

    Your Blacklist

    main.style.paddingTop = '90px'; navSearch.style.marginTop = '0px'; }); - + require('electron-connect').client.create() })(); diff --git a/src/renderer.js b/src/renderer.js index e811549..0ac4b1c 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -28,7 +28,14 @@ let tags, // Store const store = new Store({ - defaults: {theme: 'dark-theme'} + defaults: { + theme: 'dark-theme', + themeCustomization : { + "primary": "#35385B", + "accent": "#6688EC", + "dark": "#242424" + } + } }); // Minimize @@ -117,6 +124,22 @@ function openBlacklistModal() instanceBlacklistModal.open(); } +function openThemeCustomizationModal() +{ + // Get themes colors from the store + let primaryColor = store.get('themeCustomization.primary'), + accentColor = store.get('themeCustomization.accent'), + darkColor = store.get('themeCustomization.dark'); + // Set the color of the three div.preview-color + document.getElementById('primaryColor-preview').style.backgroundColor = primaryColor; + document.getElementById('accentColor-preview').style.backgroundColor = accentColor; + document.getElementById('darkColor-preview').style.backgroundColor = darkColor; + // Open Modal + const themeCustomization = document.querySelector('#themeCustomization.modal'); + const instancethemeCustomization = M.Modal.init(themeCustomization); + instancethemeCustomization.open(); +} + // Update 'tagsBlacklist' let function updateBlacklist() { @@ -147,6 +170,52 @@ function updateBlacklist() M.toast({html: 'Blacklist updated !'}); } +/* + *--primary: #35385B; + --accent: #6688EC; + --dark: #242424; + */ +function updateTheme() +{ + let primaryColor = document.getElementById('primaryColor').value || store.get(themeCustomization.primary), + accentColor = document.getElementById('accentColor').value || store.get(themeCustomization.accent), + darkColor = document.getElementById('darkColor').value || store.get(themeCustomization.dark); + // Update CSS var + document.documentElement.style.setProperty('--primary', primaryColor); + document.documentElement.style.setProperty('--accent', accentColor); + document.documentElement.style.setProperty('--dark', darkColor); + // Persist data to the store + store.set('themeCustomization.primary', primaryColor); + store.set('themeCustomization.accent', accentColor); + store.set('themeCustomization.dark', darkColor); + // Feedback + M.toast({html: 'The color palette has been updated !'}) +} + +function resetTheme() +{ + // Update CSS var + document.documentElement.style.setProperty('--primary', "#35385B"); + document.documentElement.style.setProperty('--accent', "#6688EC"); + document.documentElement.style.setProperty('--dark', "#242424"); + // Persist data to the store + store.set('themeCustomization.primary', "#35385B"); + store.set('themeCustomization.accent', "#6688EC"); + store.set('themeCustomization.dark', "#242424"); + // Feedback + M.toast({html: 'The color palette has been restored !'}) +} + +// Update at launch the theme + // Get themes colors from the store + let primaryColor = store.get('themeCustomization.primary'), + accentColor = store.get('themeCustomization.accent'), + darkColor = store.get('themeCustomization.dark'); + // Update CSS var + document.documentElement.style.setProperty('--primary', primaryColor); + document.documentElement.style.setProperty('--accent', accentColor); + document.documentElement.style.setProperty('--dark', darkColor); + // Sidenav image details function openImageDetails(event) {