diff options
| -rw-r--r-- | src/app/css/grid.css | 12 | ||||
| -rw-r--r-- | src/app/css/popups.css | 34 | ||||
| -rw-r--r-- | src/app/index.html | 2 | ||||
| -rw-r--r-- | src/app/js/browser.js | 2 | ||||
| -rw-r--r-- | src/app/js/mods.js | 18 | ||||
| -rw-r--r-- | src/app/main.css | 37 |
6 files changed, 65 insertions, 40 deletions
diff --git a/src/app/css/grid.css b/src/app/css/grid.css index 5c4019c..6622762 100644 --- a/src/app/css/grid.css +++ b/src/app/css/grid.css @@ -1,3 +1,5 @@ +@import "theming.css"; + .grid .el, .popup .misc, .popup .loading { --spacing: calc(var(--padding) / 2); --height: calc(var(--padding) * 3.5); @@ -138,7 +140,6 @@ .grid .el .description {font-size: 0.8em} .grid .el button { - background: rgb(var(--blue)); margin-top: var(--spacing); } @@ -146,3 +147,12 @@ background: rgb(var(--blue2)); } +.grid .el .switch { + top: 3px; + position: relative; + background: var(--bg); +} + +.grid .el .switch:not(.grid .el .switch.on)::after { + background: var(--selbg); +} diff --git a/src/app/css/popups.css b/src/app/css/popups.css index 8f47d0a..5147aaf 100644 --- a/src/app/css/popups.css +++ b/src/app/css/popups.css @@ -167,40 +167,6 @@ background: var(--selbg); } -.switch { - width: 50px; - height: 25px; - border-radius: 50px; -} - -.switch.on { - background: rgba(var(--red), 0.2) !important; -} - -.switch::after { - left: -5px; - width: 15px; - height: 15px; - content: " "; - display: block; - background: red; - position: relative; - border-radius: 50px; - background: var(--bg); - transition: 0.2s ease-in-out; -} - -.switch.on::after { - left: 15px; - width: 20px; - opacity: 0.5; - background: rgb(var(--red)); -} - -.switch.on:hover::after { - transform: scale(1.2); -} - .title { display: flex; margin-top: calc(var(--padding) * 2); diff --git a/src/app/index.html b/src/app/index.html index d9e8e14..0e96486 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -231,7 +231,7 @@ <div class="text" id="modcount">%%gui.mods%%</div> <div class="buttons modbtns"> <button id="removeall" class="red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button> - <button id="toggleall" class="orange2" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button> + <button id="toggleall" class="orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button> <button id="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button> <button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button> </div> diff --git a/src/app/js/browser.js b/src/app/js/browser.js index fcb79a2..05bf01d 100644 --- a/src/app/js/browser.js +++ b/src/app/js/browser.js @@ -362,7 +362,7 @@ function BrowserEl(properties) { <div class="text"> <div class="title">${properties.title}</div> <div class="description">${properties.description}</div> - <button class="install" onclick=''>${installstr}</button> + <button class="install blue" onclick=''>${installstr}</button> <button class="info" onclick="Preview.set('${properties.url}')">${lang('gui.browser.view')}</button> <button class="visual">${properties.version}</button> <button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button> diff --git a/src/app/js/mods.js b/src/app/js/mods.js index 39e904e..6c2fc22 100644 --- a/src/app/js/mods.js +++ b/src/app/js/mods.js @@ -11,7 +11,14 @@ mods.load = (mods_obj) => { normalized_names.push(normalized_name); - if (document.getElementById(normalized_name)) { + let el = document.getElementById(normalized_name); + if (el) { + if (mod.Disabled) { + el.querySelector(".switch").classList.remove("on"); + } else { + el.querySelector(".switch").classList.add("on"); + } + return; } @@ -27,12 +34,21 @@ mods.load = (mods_obj) => { <div class="text"> <div class="title">${mod.Name}</div> <div class="description">${mod.Description}</div> + <button class="switch on"></button> <button class="red" onclick="mods.remove('${mod.Name}')">Remove</button> <button class="visual">${mod.Version}</button> <button class="visual">by ${mod.Author || "Unknown"}</button> </div> `; + if (mod.Disabled) { + div.querySelector(".switch").classList.remove("on"); + } + + div.querySelector(".switch").addEventListener("click", () => { + mods.toggle(mod.Name); + }) + if (! image_url) { div.querySelector(".image").remove(); } diff --git a/src/app/main.css b/src/app/main.css index 17ed3ee..671be13 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -107,10 +107,43 @@ a, button, #close, #nsRelease, #vpReleaseNotes, -webkit-app-region: no-drag; } -/* grids */ - .grid { display: flex; flex-wrap: wrap; } +.switch { + width: 50px; + height: 25px; + border-radius: 50px; + background: var(--selbg); +} + +.switch.on { + background: rgba(var(--red), 0.2) !important; +} + +.switch::after { + left: -5px; + width: 15px; + height: 15px; + content: " "; + display: block; + background: red; + position: relative; + border-radius: 50px; + background: var(--bg); + transition: 0.2s ease-in-out; +} + +.switch.on::after { + left: 15px; + width: 20px; + opacity: 0.5; + background: rgb(var(--red)); +} + +.switch.on:hover::after { + transform: scale(1.2); +} + |