From bc8a5b4de7272c859398471c5dae94febe684d70 Mon Sep 17 00:00:00 2001 From: Jonas Date: Thu, 11 Jan 2024 04:04:49 +0100 Subject: [PATCH] Added Titlebar Style Selector in Onboarding --- src/assets/icons/iconist/README.md | 1 - src/assets/icons/iconist/search_iconist.svg | 3 -- src/assets/icons/macStyle.png | Bin 0 -> 6721 bytes src/assets/icons/winStyle.png | Bin 0 -> 5537 bytes src/main.tsx | 2 + src/screens/Onboarding/OnboardingStep1.tsx | 26 ++++----- src/screens/Onboarding/OnboardingStep3.tsx | 56 ++++++++++++++------ src/screens/Onboarding/OnboardingStep4.tsx | 55 +++++++++++++++++++ tailwind.config.js | 3 ++ 9 files changed, 114 insertions(+), 32 deletions(-) delete mode 100644 src/assets/icons/iconist/README.md delete mode 100644 src/assets/icons/iconist/search_iconist.svg create mode 100644 src/assets/icons/macStyle.png create mode 100644 src/assets/icons/winStyle.png create mode 100644 src/screens/Onboarding/OnboardingStep4.tsx diff --git a/src/assets/icons/iconist/README.md b/src/assets/icons/iconist/README.md deleted file mode 100644 index de4e3e4..0000000 --- a/src/assets/icons/iconist/README.md +++ /dev/null @@ -1 +0,0 @@ -... License Stuff here ... \ No newline at end of file diff --git a/src/assets/icons/iconist/search_iconist.svg b/src/assets/icons/iconist/search_iconist.svg deleted file mode 100644 index 2d9a4e3..0000000 --- a/src/assets/icons/iconist/search_iconist.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/macStyle.png b/src/assets/icons/macStyle.png new file mode 100644 index 0000000000000000000000000000000000000000..fc9e235a4646bcfd8558f78be61014e8d2e70566 GIT binary patch literal 6721 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 U!i0O**Pkmcj_wy59Dcd=Z#AuBd;kCd literal 0 HcmV?d00001 diff --git a/src/assets/icons/winStyle.png b/src/assets/icons/winStyle.png new file mode 100644 index 0000000000000000000000000000000000000000..5aff4864c071e704a69538a21e9e00116d588b64 GIT binary patch literal 5537 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 OdH$^1nFgoe8~+A|2dzB- literal 0 HcmV?d00001 diff --git a/src/main.tsx b/src/main.tsx index 75a094e..81ce506 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -20,6 +20,7 @@ import CauseError from "./screens/ErrorBoundary/CauseError"; import UpdateAvailable from "./screens/App/updateChecker/UpdateAvailable"; import JenkinsConnectionFailedView from "./screens/App/JenkinsConnectionChecker/JenkinsConnectionFailedView"; import FullConsoleLog from "./screens/Jarvis/Views/ConsoleView/FullConsoleLogView"; +import OnboardingStep4 from "./screens/Onboarding/OnboardingStep4"; function AppContainer() { return ( @@ -33,6 +34,7 @@ function AppContainer() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/screens/Onboarding/OnboardingStep1.tsx b/src/screens/Onboarding/OnboardingStep1.tsx index 33a9dda..d848198 100644 --- a/src/screens/Onboarding/OnboardingStep1.tsx +++ b/src/screens/Onboarding/OnboardingStep1.tsx @@ -48,7 +48,7 @@ const OnboardingStep1: React.FC = () => { }); return; } - + if (username === "") { notification.showNotification("Invalid Username", "Please check again.", "error", { soundOn: true, @@ -56,7 +56,7 @@ const OnboardingStep1: React.FC = () => { }); return; } - + if (apiToken === "") { notification.showNotification("Invalid API Token", "Please check again.", "error", { soundOn: true, @@ -64,9 +64,9 @@ const OnboardingStep1: React.FC = () => { }); return; } - + const response = await checkAuthentication(baseUrl, username, apiToken); - + if (response === false) { notification.showNotification("Authentication failed", "Please check your Credentials.", "error", { soundOn: true, @@ -106,7 +106,7 @@ const OnboardingStep1: React.FC = () => { transition={{ duration: 0.5, delay: 0.5 }} > { >
{ transition={{ duration: 0.5, delay: 1.5 }} > { } }} > - Continue + Continue {/* Help Modal */} @@ -180,7 +180,7 @@ const OnboardingStep1: React.FC = () => { onClick={() => setShowHelpModal(true)} className="absolute bottom-4 right-8 text-sm text-comment-color transition hover:brightness-75 active:brightness-90" > - Need help? + Need help?

{showHelpModal && ( @@ -221,16 +221,16 @@ const OnboardingStep1: React.FC = () => {

You can create an API Token by goint to

- Profile + Profile {">"} {" "} - Configure + Configure {">"} {" "} - API Token + API Token {">"} {" "} - Add new Token + Add new Token

diff --git a/src/screens/Onboarding/OnboardingStep3.tsx b/src/screens/Onboarding/OnboardingStep3.tsx index 19450b9..8868d43 100644 --- a/src/screens/Onboarding/OnboardingStep3.tsx +++ b/src/screens/Onboarding/OnboardingStep3.tsx @@ -6,33 +6,59 @@ import "./Onboarding.css"; import { useNavigate } from "react-router-dom"; import { motion } from "framer-motion"; +import macStyle from "@assets/icons/macStyle.png" +import windowsStyle from "@assets/icons/winStyle.png" +import StorageManager from "@/helpers/StorageManager"; + const OnboardingStep3: React.FC = () => { const navigate = useNavigate(); + const [titlebarStyle, setTitlebarStyle] = React.useState(""); useEffect(() => { - // Set screen size to 300px width and 400px height - const size = new LogicalSize(700, 550); - appWindow.setSize(size).then(() => appWindow.center()); + const init = async () => { + // Set screen size to 300px width and 400px height + const size = new LogicalSize(700, 550); + appWindow.setSize(size).then(() => appWindow.center()); + + const titlebarStyle = await StorageManager.get("titlebarStyle") + setTitlebarStyle(titlebarStyle || "macStyle") + } + + init() }, []); + const setTitlebarStyleAndSave = async (style: string) => { + await StorageManager.save("titlebarStyle", style) + setTitlebarStyle(style) + } + const continueOnboarding = async () => { - navigate("/onboarding/complete"); + navigate("/onboarding/step_4"); }; return (
Welcome icon +

Selected Titlebar Style

+
+
setTitlebarStyleAndSave("macStyle")} + className={`w-2/3 rounded-xl space-y-2 onboarding-custom-scroll border-border border-2 min-h-[200px] transition hover:bg-background-card-selected ${titlebarStyle === "macStyle" ? "bg-background-card-selected" : ""}`} + style={{ + backgroundImage: `url(${macStyle})`, + backgroundSize: "cover", + }}> +
+
setTitlebarStyleAndSave("winStyle")} + className={`w-2/3 rounded-xl space-y-2 onboarding-custom-scroll border-border border-2 min-h-[200px] transition hover:bg-background-card-selected ${titlebarStyle === "winStyle" ? "bg-background-card-selected" : ""}`} + style={{ + backgroundImage: `url(${windowsStyle})`, + backgroundSize: "cover", + }}> +
+
- { } }} > - Continue + Continue
); diff --git a/src/screens/Onboarding/OnboardingStep4.tsx b/src/screens/Onboarding/OnboardingStep4.tsx new file mode 100644 index 0000000..276d138 --- /dev/null +++ b/src/screens/Onboarding/OnboardingStep4.tsx @@ -0,0 +1,55 @@ +import React, { useEffect } from "react"; +import { appWindow, LogicalSize } from "@tauri-apps/api/window"; +import icon from "../../assets/brand/ico_bow.svg"; + +import "./Onboarding.css"; +import { useNavigate } from "react-router-dom"; +import { motion } from "framer-motion"; + +const OnboardingStep4: React.FC = () => { + const navigate = useNavigate(); + + useEffect(() => { + // Set screen size to 300px width and 400px height + const size = new LogicalSize(700, 550); + appWindow.setSize(size).then(() => appWindow.center()); + }, []); + + const continueOnboarding = async () => { + navigate("/onboarding/complete"); + }; + + return ( +
+ Welcome icon + + + + continueOnboarding()} + onKeyPress={(e) => { + if (e.key === "Enter") { + continueOnboarding(); + } + }} + > + Continue + +
+ ); +}; + +export default OnboardingStep4; diff --git a/tailwind.config.js b/tailwind.config.js index 365636b..3963ff6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -37,6 +37,9 @@ export default { class: { "big-sidebar": "bg-red-200", }, + backgroundImage: { + "windowStyleIcons": "url('/assets/images/windowStyleIcons.png')", + } }, }, plugins: [],