From 3a2f9fac72d141f6a5e2e56133a5ae77d6972680 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 20 Feb 2022 20:31:50 +0100 Subject: initial work on settings page This only has the actual UI for the settings page in place, no actual functionality has been implemented yet. I made several changes not directly related to the settings page, such as changes the CSS color variables to use RGB, as to easily add an alpha channel to colors. I also changed the way the Browser is toggled in some respects and many other changes that makes it easy to re-use the browser code to create the settings UI --- src/app/main.css | 134 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 98 insertions(+), 36 deletions(-) (limited to 'src/app/main.css') diff --git a/src/app/main.css b/src/app/main.css index dcc4e8a..09dc4b3 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -1,17 +1,17 @@ :root { - --red: #C7777F; - --blue: #81A1C1; - --orange: #D59783; + --red: 199, 119, 127; + --blue: 129, 161, 193; + --orange: 213, 151, 131; --padding: 25px; --bg: rgba(0, 0, 0, 0.5); --selbg: rgba(80, 80, 80, 0.5); - --redbg: linear-gradient(45deg, var(--red), #FA4343); - --bluebg: linear-gradient(45deg, var(--blue), #7380ED); + --redbg: linear-gradient(45deg, rgb(var(--red)), #FA4343); + --bluebg: linear-gradient(45deg, rgb(var(--blue)), #7380ED); } -#browser, #modsdiv { +.popup, #modsdiv { outline: 1px solid #444444; border: 3px solid var(--bg); } @@ -27,12 +27,12 @@ ::-webkit-scrollbar-thumb { border-radius: 10px; - background: var(--red); + background: rgb(var(--red)); } ::selection { color: black; - background: var(--red); + background: rgb(var(--red)); } body { @@ -66,7 +66,7 @@ button { cursor: pointer; } -#browser { +.popup { --spacing: var(--padding); z-index: 2; @@ -85,7 +85,7 @@ button { transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; } -#browser.shown { +.popup.shown { opacity: 1.0; pointer-events: all; transform: scale(1.0); @@ -114,7 +114,7 @@ button { 100% {opacity: 1.0} } -#browser .el, #browser #misc, #browser .loading { +.popup .el, .popup .misc, .popup .loading { --spacing: calc(var(--padding) / 2); --height: calc(var(--padding) * 3); --mischeight: calc(var(--padding) * 1.5); @@ -129,7 +129,7 @@ button { transition: 0.15s ease-in-out; } -#browser .el, #browser #search, #browser #close { +.popup .el, .popup #search, .option .actions input, .popup #close, .popup .misc button { color: white; display: flex; align-items: center; @@ -141,41 +141,48 @@ button { width: calc(100% - var(--spacing) * 4); } -#browser #misc, #browser #search { +.popup .misc, .popup #search, .option .actions input { --height: var(--mischeight); } -#browser #misc { +.popup .misc { display: flex; } -#browser #search { +.popup #search, .option .actions input { border: none; outline: none; transition: filter 0.15s ease-in-out; width: calc(100% - var(--spacing) * 2); } -#browser #search:focus { +.popup #search:focus, .option .actions input:focus, .option .actions button:active { filter: brightness(1.5); } -#browser #close { +.popup .misc button { --height: calc(var(--padding) * 1.5); padding: 0px; margin-left: 0px; - width: var(--height); + padding: 0px !important; + width: var(--height) !important; } -#browser #close img { +.popup .misc button img { opacity: 0.6; width: var(--height); - height: var(--height); transform: scale(0.6); + height: var(--height) !important; +} + +#options.popup .misc button { + margin-left: 0px; + width: auto !important; + padding-right: calc(var(--padding) / 2) !important; } -#browser .loading { +.popup .loading { width: 100%; color: white; display: flex; @@ -185,38 +192,92 @@ button { height: calc(100% - var(--mischeight) - var(--height)); } -#browser .message { +.popup .message { color: white; text-align: center; margin: var(--padding); width: calc(100% - var(--padding)); } -#browser .el .image, #browser .el .image img { +.popup .el .image, .popup .el .image img { width: var(--height); height: var(--height); margin-right: var(--spacing); border-radius: var(--spacing); } -#browser .el .text { +.popup .el .text { overflow: hidden; } -#browser .el .title, #browser .el .description { +.popup .el .title, .popup .el .description { height: 1.2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -#browser .el .title {font-size: 1.2em} -#browser .el .description {font-size: 0.8em} -#browser .el button { - background: var(--blue); +.popup .el .title {font-size: 1.2em} +.popup .el .description {font-size: 0.8em} +.popup .el button { + background: rgb(var(--blue)); margin-top: var(--spacing); } +.popup .options { + color: white; + margin: calc(var(--padding) / 2); +} + +.popup .options .option { + width: 100%; + display: flex; + margin-bottom: var(--padding); + justify-content: space-between; +} + +.option .actions text {opacity: 0.8} + +.option .actions input { + width: 100%; + margin: 0px; + --spacing: calc(var(--padding) / 3); +} + +.option .actions button { + 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)); +} + #winbtns { z-index: 2; display: flex; @@ -237,9 +298,10 @@ button { #winbtns #close {background-image: url("icons/close.png")} #winbtns #minimize {background-image: url("icons/minimize.png")} +#winbtns #settings {background-image: url("icons/settings.png")} #winbtns div:hover {opacity: 1.0} -#winbtns div:active {transform: scale(0.98)} +#winbtns div:active {transform: scale(0.95)} button:hover {filter: brightness(110%)} button:active {filter: brightness(90%)} @@ -388,7 +450,7 @@ img {pointer-events: none} text-align: center; position: relative; border-radius: 50px; - background: var(--red); + background: rgb(var(--red)); left: calc(50% - 15px); transition: 0.2s ease-in-out; } @@ -453,7 +515,7 @@ img {pointer-events: none} } a { - color: var(--red); + color: rgb(var(--red)); text-decoration: none; transition: filter 0.2s ease-in; } @@ -500,12 +562,12 @@ a:hover { } .simplebar-scrollbar:before { - background: var(--red) !important; + background: rgb(var(--red)) !important; } -#installmod {background: var(--blue)} -#togglemod, #toggleall {background: var(--orange)} -#northstar, #removeall, #removemod {background: var(--red)} +#installmod {background: rgb(var(--blue))} +#togglemod, #toggleall {background: rgb(var(--orange))} +#northstar, #removeall, #removemod {background: rgb(var(--red))} button:disabled { opacity: 0.5; pointer-events: none; -- cgit v1.2.3 From 43122069a282f4594653ede9402ba330b7f39e84 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 20 Feb 2022 20:59:58 +0100 Subject: more UI changes I added descriptions and options for excluding files. --- src/app/index.html | 24 ++++++++++++++++++++++-- src/app/main.css | 9 ++++++++- 2 files changed, 30 insertions(+), 3 deletions(-) (limited to 'src/app/main.css') diff --git a/src/app/index.html b/src/app/index.html index 5ca9306..7a919b1 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -40,6 +40,9 @@
Launch options +
+ Here you can add launch options for Northstar/Titanfall. +
@@ -48,7 +51,10 @@

Updates

- Northstar Auto-Updates + Viper Auto-Updates +
+ Viper will automatically keep itself up-to-date. +
@@ -56,12 +62,26 @@
- Viper Auto-Updates + Northstar Auto-Updates +
+ Viper will automatically keep Northstar up-to-date, however it can still manually be updated through the Northstar page. +
+
+
+ Retain files on update +
+ When Northstar is updated, files specified here will not be overwritten by files from the new Northstar update, unless you know what you're changing, you should probably not change anything here. +
+
+
+ +
+
diff --git a/src/app/main.css b/src/app/main.css index 09dc4b3..0d4b9ad 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -236,7 +236,14 @@ button { justify-content: space-between; } -.option .actions text {opacity: 0.8} +.option .text {font-weight: 600} +.option .text .desc { + opacity: 0.8; + font-weight: 500; + font-size: 0.9em; + max-width: 400px; + margin-top: calc(var(--padding) / 3); +} .option .actions input { width: 100%; -- cgit v1.2.3 From 68579acd60b284eeeb619595abb44a04e93887e0 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Thu, 24 Feb 2022 00:40:55 +0100 Subject: localized all strings I localized all strings for English, then went ahead and made array options have a wider input and more word spacing, since they're all space separated. --- src/app/index.html | 22 +++++++++++----------- src/app/main.css | 5 +++++ src/lang/en.json | 13 +++++++++++++ 3 files changed, 29 insertions(+), 11 deletions(-) (limited to 'src/app/main.css') diff --git a/src/app/index.html b/src/app/index.html index f605136..ac1e276 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -28,20 +28,20 @@

Northstar

- Launch options + %%gui.settings.nsargs.title%%
- Here you can add launch options for Northstar/Titanfall. + %%gui.settings.nsargs.desc%%
@@ -51,9 +51,9 @@

Updates

- Viper Auto-Updates + %%gui.settings.autoupdate.title%%
- Viper will automatically keep itself up-to-date. + %%gui.settings.autoupdate.desc%%
@@ -62,9 +62,9 @@
- Northstar Auto-Updates + %%gui.settings.nsupdate.title%%
- Viper will automatically keep Northstar up-to-date, however it can still manually be updated through the Northstar page. + %%gui.settings.nsupdate.desc%%
@@ -73,13 +73,13 @@
- Retain files on update + %%gui.settings.excludes.title%%
- When Northstar is updated, files specified here will not be overwritten by files from the new Northstar update, unless you know what you're changing, you should probably not change anything here. + %%gui.settings.excludes.desc%%
- +
diff --git a/src/app/main.css b/src/app/main.css index 0d4b9ad..734f60b 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -251,6 +251,11 @@ button { --spacing: calc(var(--padding) / 3); } +.option[type=array] .actions input { + word-spacing: 15px; + margin-right: 15vw; +} + .option .actions button { background: var(--selbg); } diff --git a/src/lang/en.json b/src/lang/en.json index 45bf7c0..47e18c0 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -73,6 +73,19 @@ "gui.browser.loading": "Loading mods...", "gui.browser.endoflist": "Maximum packages has been loaded.
Use the search for finding other packages!", + "gui.settings.save": "Save", + "gui.settings.discard": "Discard", + "gui.settings.title.ns": "Northstar", + "gui.settings.title.updates": "Updates", + "gui.settings.nsargs.title": "Launch options", + "gui.settings.nsargs.desc": "Here you can add launch options for Northstar/Titanfall.", + "gui.settings.autoupdate.title": "Viper Auto-Updates", + "gui.settings.autoupdate.desc": "Viper will automatically keep itself up-to-date.", + "gui.settings.nsupdate.title": "Northstar Auto-Updates", + "gui.settings.nsupdate.desc": "Viper will automatically keep Northstar up-to-date, however it can still manually be updated through the Northstar page.", + "gui.settings.excludes.title": "Retain files on update", + "gui.settings.excludes.desc": "When Northstar is updated, files specified here will not be overwritten by files from the new Northstar update, unless you know what you're changing, you should probably not change anything here. Each file is separated with a space.", + "gui.update.downloading": "Downloading...", "gui.update.extracting": "Extracting update...", "gui.update.finished": "Done! Ready to play!", -- cgit v1.2.3