From 8abcdf4206d7957d45663b3def72a8a659794342 Mon Sep 17 00:00:00 2001 From: Mustafa Gezen Date: Thu, 23 Feb 2023 05:46:30 +0100 Subject: [PATCH] Add light mode support --- apollo/server/server.py | 19 ++++++- apollo/server/static/theme.scss | 52 +++++++++++++++++-- apollo/server/templates/advisory.jinja | 16 +++--- apollo/server/templates/layout.jinja | 21 ++++++-- apollo/server/templates/light_icon.jinja | 27 ++++++++++ .../server/templates/red_hat_advisory.jinja | 16 +++--- 6 files changed, 127 insertions(+), 24 deletions(-) create mode 100644 apollo/server/templates/light_icon.jinja diff --git a/apollo/server/server.py b/apollo/server/server.py index 5bfb5b0..22a88e9 100644 --- a/apollo/server/server.py +++ b/apollo/server/server.py @@ -6,7 +6,7 @@ Tortoise.init_models(["apollo.db"], "models") # noqa # pylint: disable=wrong-im from fastapi import FastAPI, Request, Depends from fastapi.openapi.utils import get_openapi -from fastapi.responses import JSONResponse +from fastapi.responses import JSONResponse, RedirectResponse from starlette.middleware.sessions import SessionMiddleware from fastapi_pagination import add_pagination @@ -88,6 +88,23 @@ async def health(): return {"status": "ok"} +@app.get("/_/set_color") +async def set_color(request: Request): + valid_colors = ["dark", "light"] + color = request.query_params.get("color") + response = RedirectResponse( + request.headers["referer"] if "referer" in request.headers else "/" + ) + + # First check if the color is valid + # If valid, set the color in the cookie, then + # redirect back to referrer + if color in valid_colors: + response.set_cookie("color", color) + + return response + + @app.exception_handler(404) async def not_found_handler(request, exc): # pylint: disable=unused-argument if request.url.path.startswith("/api" diff --git a/apollo/server/static/theme.scss b/apollo/server/static/theme.scss index 11e0a93..0dd624b 100644 --- a/apollo/server/static/theme.scss +++ b/apollo/server/static/theme.scss @@ -6,12 +6,56 @@ $feature-flags: ( @use 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/themes'; @import 'carbon-components/scss/globals/scss/styles.scss'; -:root { - @include carbon--theme($carbon--theme--g90, true); +@mixin dark-mode-non-root { + a { + color: map-get($carbon--theme--g90, 'link-01'); + } + + #color-switcher-dark { + display: var(--display-dark-switcher); + } } -a { - color: map-get($carbon--theme--g90, 'link-01'); +@mixin dark-mode { + :root { + @include carbon--theme($carbon--theme--g90, true); + --display-dark-switcher: none; + --display-light-switcher: block; + } + + @include dark-mode-non-root; +} + +@mixin light-mode { + :root, + :root.light { + @include carbon--theme($carbon--theme--white, true); + --display-light-switcher: none; + --display-dark-switcher: block; + } + + bx-side-nav { + border-right: 1px solid var(--cds-ui-03); + } + + #color-switcher-light { + display: var(--display-light-switcher); + } +} + +@include light-mode; + +@media (prefers-color-scheme: dark) { + @include dark-mode; +} + +:root.dark { + @include carbon--theme($carbon--theme--g90, true); + + @include dark-mode-non-root; + + --display-dark-switcher: none; + --display-light-switcher: block; } .bx--inline-notification__text-wrapper { diff --git a/apollo/server/templates/advisory.jinja b/apollo/server/templates/advisory.jinja index bb92270..a41559a 100644 --- a/apollo/server/templates/advisory.jinja +++ b/apollo/server/templates/advisory.jinja @@ -40,19 +40,19 @@
-
-

Synopsis

+
+

Synopsis

{{ advisory.synopsis }}



-

Description

+

Description

{% set description = advisory.description.split("\n") %} {% for line in description %}

{{ line }}

{% endfor %}

-

Affected products

+

Affected products

{% for product in advisory.affected_products %} {{ product.name }} @@ -60,7 +60,7 @@

-

Fixes

+

Fixes

{% for fix in advisory.fixes %} @@ -70,7 +70,7 @@

-

CVEs

+

CVEs

{% for cve in advisory.cves %} @@ -83,8 +83,8 @@
-
-

Affected packages

+
+

Affected packages

{% for product_repo_name, nevras in package_map.items() %}

{{ product_repo_name }}

diff --git a/apollo/server/templates/layout.jinja b/apollo/server/templates/layout.jinja index 200a13f..c9134ea 100644 --- a/apollo/server/templates/layout.jinja +++ b/apollo/server/templates/layout.jinja @@ -1,9 +1,18 @@ - +{% set theme = "" %} +{% if "color" in request.cookies %} +{% if request.cookies["color"] == "light" %} +{% set theme = "light" %} +{% elif request.cookies["color"] == "dark" %} +{% set theme = "dark" %} +{% endif %} +{% endif %} + + {% block title %}Peridot Apollo{% endblock %} @@ -25,8 +34,8 @@ .apollo-outer bx-inline-notification { margin: 0; - color: #ffffff; - --cds-inverse-01: #ffffff; + color: var(--cds-text-01); + --cds-inverse-01: var(--cds-text-01); background: var(--cds-button-separator); } @@ -95,6 +104,12 @@ {% endif %} + + {% include "light_icon.jinja" %} + + + {% include "light_icon.jinja" %} + {% if request.session.get("user.name") %} {{ request.session.get("user.name") }} Logout diff --git a/apollo/server/templates/light_icon.jinja b/apollo/server/templates/light_icon.jinja new file mode 100644 index 0000000..c73fa2a --- /dev/null +++ b/apollo/server/templates/light_icon.jinja @@ -0,0 +1,27 @@ + + + + + light + + + + + + + + + + + \ No newline at end of file diff --git a/apollo/server/templates/red_hat_advisory.jinja b/apollo/server/templates/red_hat_advisory.jinja index 99e0d21..5460094 100644 --- a/apollo/server/templates/red_hat_advisory.jinja +++ b/apollo/server/templates/red_hat_advisory.jinja @@ -69,19 +69,19 @@
-
-

Synopsis

+
+

Synopsis

{{ advisory.synopsis }}



-

Description

+

Description

{% set description = advisory.description.split("\n") %} {% for line in description %}

{{ line }}

{% endfor %}

-

Affected products

+

Affected products

{% for product in advisory.affected_products %} @@ -92,7 +92,7 @@

-

Fixes

+

Fixes

{% for ticket in advisory.bugzilla_tickets %} @@ -104,7 +104,7 @@

-

CVEs

+

CVEs

{% for cve in advisory.cves %} @@ -117,7 +117,7 @@
-
+
{% set pkg_list = {} %} {% for pkg in advisory.packages %} {% if pkg.repo_name in pkg_list %} @@ -127,7 +127,7 @@ {% endif %} {% endfor %} -

Affected packages

+

Affected packages

{% for repo_name, pkg in pkg_list.items() %}

{{ repo_name }}