From a37417b021a9cd8b0f29bff814fa4a93e51f9076 Mon Sep 17 00:00:00 2001 From: Andy Damevin Date: Tue, 9 Jan 2024 12:02:22 +0100 Subject: [PATCH] Make favicon and loading style customisable (#1260) --- .../src/main/resources/application.properties | 1 + .../resources/web/community-app/theme.scss | 32 +++++++------- base/src/main/resources/web/index.html | 44 ++----------------- base/src/main/resources/web/lib/index.ts | 2 + base/src/main/resources/web/lib/loading.scss | 34 ++++++++++++++ deploy/openshift/code-quarkus.yaml | 3 -- 6 files changed, 58 insertions(+), 58 deletions(-) create mode 100644 base/src/main/resources/web/lib/loading.scss diff --git a/base/src/main/resources/application.properties b/base/src/main/resources/application.properties index ac34b180c..cba11b551 100644 --- a/base/src/main/resources/application.properties +++ b/base/src/main/resources/application.properties @@ -20,6 +20,7 @@ quarkus.web-bundler.bundle.community-app.key=main %dev.quarkus.web-bundler.bundle.community-app=true %playwright.quarkus.web-bundler.bundle.lib=true %playwright.quarkus.web-bundler.bundle.community-app=true +%dev.quarkus.http.static-resources.caching-enabled=false # http quarkus.http.enable-compression=true diff --git a/base/src/main/resources/web/community-app/theme.scss b/base/src/main/resources/web/community-app/theme.scss index 49bfd78fd..3fbbe1af9 100644 --- a/base/src/main/resources/web/community-app/theme.scss +++ b/base/src/main/resources/web/community-app/theme.scss @@ -10,6 +10,8 @@ --background2: black; --background3: #282A39; + --textColor: white; + --primary: #71aeef; --secondary: #4695eb; --tertiary: #be9100; @@ -27,7 +29,7 @@ --buttonBorderColor: var(--primary); // Top container - --topContainerTextColor: white; + --topContainerTextColor: var(--textColor); --topContainerBg: var(--background); --topContainerBgImage: url("./media/bg-form-1920.jpeg"); --topContainerBgImageWide: url("./media/bg-form-3000.jpeg"); @@ -37,10 +39,10 @@ --fieldTextColor: var(--topContainerTextColor); --selectOptionsTextColor: black; - --extensionsCartButtonTextColor: white; + --extensionsCartButtonTextColor: var(--textColor);; --extensionsCartButtonBgColor: var(--background); - --generateButtonTextColor: white; + --generateButtonTextColor: var(--textColor);; --generateButtonBgColor: var(--secondary); --generateButtonBorderColorOnHover: white; --generateButtonDisabledBgAndBorderColor: rgba(90, 149, 235, 0.342); @@ -51,12 +53,12 @@ --resetToDefaultButtonColor: var(--warningColor); // Main container - --mainContainerTextColor: white; + --mainContainerTextColor: var(--textColor);; --mainContainerBg: var(--background); // Next steps Modal --modalBg: var(--background); - --modalTextColor: white; + --modalTextColor: var(--textColor);; --modalBorderColor: var(--secondary); --modalTitleColor: var(--secondary); --modalLinkColor: var(--linkTextColor); @@ -65,14 +67,14 @@ --modalCloseButtonBgHover: rgba(70, 149, 235, 0.548); --nextStepsModalDownloadButtonBg: var(--secondary); - --nextStepsModalDownloadButtonTextColor: white; + --nextStepsModalDownloadButtonTextColor: var(--textColor);; --nextStepsModalDownloadButtonBorderColorOnHover: white; --modalFooterButtonBg: black; --modalFooterButtonTextColor: var(--secondary); --codeBg: black; - --codeTextColor: white; + --codeTextColor: var(--textColor);; // Extensions picker --switchOriginSelectedTextColor: var(--mainContainerTextColor); @@ -91,7 +93,7 @@ --extensionsPickerDescriptionTextColorOnTablet: #ccc; --dropdownMenuBg: #363a50; - --dropdownMenuTextColor: white; + --dropdownMenuTextColor: var(--textColor);; --extensionsPickerCategoryTextColor: var(--mainContainerTextColor); --extensionsPickerCategoryUnderlineColor: var(--secondary); @@ -111,23 +113,23 @@ --headerBackgroundColor: var(--background); --headerBackgroundImage: url("./media/bg-header-1920.jpeg"); --headerBackgroundImageWide: url("./media/bg-header-3000.jpeg"); - --headerTextColor: white; + --headerTextColor: var(--textColor);; - --headerMenuLinkTextColor: white; + --headerMenuLinkTextColor: var(--textColor);; - --headerMenuStartCodingButtonTextColor: white; + --headerMenuStartCodingButtonTextColor: var(--textColor);; --headerMenuStartCodingButtonBorderColor: var(--secondary); --headerMenuStartCodingButtonBg: var(--secondary); - --headerSupportButtonTextColor: white; + --headerSupportButtonTextColor: var(--textColor);; --headerSupportButtonBorderColor: white; --headerSupportButtonBackgroundColor: transparent; --headerSupportPanelBackgroundColor: var(--background3); - --headerSupportPanelTextColor: white; + --headerSupportPanelTextColor: var(--textColor);; // StreamPicker - --streamPickerStreamIdTextColor: white; + --streamPickerStreamIdTextColor: var(--textColor);; --streamPickerPlatformKeyTextColor: var(--primary); --streamPickerBorderColor: var(--streamPickerPlatformKeyTextColor); --streamPickerDropdownStreamIdTextColor: var(--streamPickerStreamIdTextColor); @@ -137,7 +139,7 @@ // Blurb --blurbBg: #193E62; - --blurbTextColor: white; + --blurbTextColor: var(--textColor);; --blurbLinkTextColor: var(--linkTextColor); --blurbInfoIconColor: var(--primary); } \ No newline at end of file diff --git a/base/src/main/resources/web/index.html b/base/src/main/resources/web/index.html index 32cd1d3e0..4be2442cf 100755 --- a/base/src/main/resources/web/index.html +++ b/base/src/main/resources/web/index.html @@ -7,53 +7,17 @@ - + Quarkus - Start coding with {config:property("io.quarkus.code.name")} - - - + {#bundle tag="style" /} - {#bundle /} + + {#bundle tag="script" /} diff --git a/base/src/main/resources/web/lib/index.ts b/base/src/main/resources/web/lib/index.ts index b031dbc22..5f8a623f3 100644 --- a/base/src/main/resources/web/lib/index.ts +++ b/base/src/main/resources/web/lib/index.ts @@ -1,4 +1,6 @@ +import './loading.scss'; export * from './core/types'; export * from './core/analytics'; export * from './core/components'; export * from './components'; + diff --git a/base/src/main/resources/web/lib/loading.scss b/base/src/main/resources/web/lib/loading.scss new file mode 100644 index 000000000..384edbbd9 --- /dev/null +++ b/base/src/main/resources/web/lib/loading.scss @@ -0,0 +1,34 @@ +body { + background: var(--background); +} + +#loading { + position: absolute; + top: 50%; + left: 50%; + margin-top: -87.5px; + margin-left: -120px; + width: 240px; + height: 175px; + display: flex; + flex-direction: column; + align-items: center; + font-family: monospace; + text-align: center; + justify-content: center; + padding: 20px; + color: var(--textColor); + font-size: 1.5rem; + line-height: 20px; + box-sizing: border-box; +} + +#loading span:nth-child(3) { + color: var(--primary); +} + +#loading img { + height: 75px; + display: block; + margin: 20px auto; +} \ No newline at end of file diff --git a/deploy/openshift/code-quarkus.yaml b/deploy/openshift/code-quarkus.yaml index bd2bd9d9b..3cb2e1ca8 100644 --- a/deploy/openshift/code-quarkus.yaml +++ b/deploy/openshift/code-quarkus.yaml @@ -69,8 +69,6 @@ objects: value: ${IO_QUARKUS_CODE_LOG_LEVEL} - name: IO_QUARKUS_CODE_HOSTNAME value: ${IO_QUARKUS_CODE_HOSTNAME} - - name: IO_QUARKUS_CODE_FEATURES - value: ${IO_QUARKUS_CODE_FEATURES} - name: IO_QUARKUS_CODE_QUARKUS_PLATFORMS_RELOAD_CRON_EXPR value: ${IO_QUARKUS_CODE_QUARKUS_PLATFORMS_RELOAD_CRON_EXPR} - name: IO_QUARKUS_CODE_SENTRY_FRONTEND_DSN @@ -130,7 +128,6 @@ objects: type: ClusterIP parameters: - name: IO_QUARKUS_CODE_ENVIRONMENT - - name: IO_QUARKUS_CODE_FEATURES - name: IO_QUARKUS_CODE_HOSTNAME - name: IO_QUARKUS_CODE_SEGMENT_FLUSH_QUEUE_SIZE - name: IO_QUARKUS_CODE_SEGMENT_FLUSH_INTERVAL_SECONDS