resf/distro-tools
1
0
Fork 0
mirror of https://github.com/resf/distro-tools.git synced 2024-12-22 02:48:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add light mode support

Browse Source
This commit is contained in:
Mustafa Gezen 2023-02-23 05:46:30 +01:00
parent bb5159cf1c
commit 8abcdf4206
Signed by untrusted user who does not match committer: mustafa
GPG Key ID: DCDF010D946438C1
6 changed files with 127 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apollo/server/server.py
View File

@ -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"

52
apollo/server/static/theme.scss
View File

@ -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 {

16
apollo/server/templates/advisory.jinja
View File

@ -40,19 +40,19 @@
<div class="bx--grid bx--grid--full-width" style="margin:3rem 0;">
<div class="bx--row">
<div class="bx--col-lg-10">
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Synopsis</h3>
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Synopsis</h3>
<p>{{ advisory.synopsis }}</p>
<br /><br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Description</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Description</h3>
{% set description = advisory.description.split("\n") %}
{% for line in description %}
<p>{{ line }}</p>
{% endfor %}
<br /><br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected products</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected products</h3>
<bx-ordered-list>
{% for product in advisory.affected_products %}
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">{{ product.name }}</bx-list-item>
@ -60,7 +60,7 @@
</bx-ordered-list>
<br /> <br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Fixes</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Fixes</h3>
<bx-ordered-list>
{% for fix in advisory.fixes %}
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@ -70,7 +70,7 @@
</bx-ordered-list>
<br /> <br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">CVEs</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">CVEs</h3>
<bx-ordered-list>
{% for cve in advisory.cves %}
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@ -83,8 +83,8 @@
</div>
</div>
<div class="bx--col-lg-6">
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
<h3 style="font-weight:600;color:var(--cds-text-04);">Affected packages</h3>
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
<h3 style="font-weight:600;color:var(--cds-text-01);">Affected packages</h3>
{% for product_repo_name, nevras in package_map.items() %}
<h4 style="padding-bottom:0.3rem;font-weight:400;padding-top:0.3rem;">{{ product_repo_name }}</h4>
<bx-ordered-list>

21
apollo/server/templates/layout.jinja
View File

@ -1,9 +1,18 @@
<!DOCTYPE html>
<html lang="en">
{% 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 %}
<html lang="en" class="{{theme}}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Peridot Apollo{% endblock %}</title>
@ -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 %}
</bx-header-nav>
<bx-header-nav style="margin-left:auto;padding-left:0">
<bx-header-nav-item href="/_/set_color?color=light" id="color-switcher-light">
{% include "light_icon.jinja" %}
</bx-header-nav-item>
<bx-header-nav-item href="/_/set_color?color=dark" id="color-switcher-dark">
{% include "light_icon.jinja" %}
</bx-header-nav-item>
{% if request.session.get("user.name") %}
<bx-header-nav-item>{{ request.session.get("user.name") }}</bx-header-nav-item>
<bx-header-nav-item href="/logout/">Logout</bx-header-nav-item>

27
apollo/server/templates/light_icon.jinja Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;display:block;"
xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
}
</style>
<title>light</title>
<rect fill="currentColor" x="7.5" y="1" width="1" height="2.5" />
<rect fill="currentColor" x="10.8" y="3.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.7526 9.6636)" width="2.5"
height="1" />
<rect fill="currentColor" x="12.5" y="7.5" width="2.5" height="1" />
<rect fill="currentColor" x="11.6" y="10.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.9774 12.0652)" width="1"
height="2.5" />
<rect fill="currentColor" x="7.5" y="12.5" width="1" height="2.5" />
<rect fill="currentColor" x="2.7" y="11.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.3811 6.3373)" width="2.5"
height="1" />
<rect fill="currentColor" x="1" y="7.5" width="2.5" height="1" />
<rect fill="currentColor" x="3.4" y="2.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.6512 3.9356)" width="1"
height="2.5" />
<path fill="currentColor"
d="M8,6c1.1,0,2,0.9,2,2s-0.9,2-2,2S6,9.1,6,8S6.9,6,8,6 M8,5C6.3,5,5,6.3,5,8s1.3,3,3,3s3-1.3,3-3S9.7,5,8,5z" />
<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
apollo/server/templates/red_hat_advisory.jinja
View File

@ -69,19 +69,19 @@
<div class="bx--grid bx--grid--full-width" style="margin:3rem 0;">
<div class="bx--row">
<div class="bx--col-lg-10">
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Synopsis</h3>
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Synopsis</h3>
<p>{{ advisory.synopsis }}</p>
<br /><br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Description</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Description</h3>
{% set description = advisory.description.split("\n") %}
{% for line in description %}
<p>{{ line }}</p>
{% endfor %}
<br /><br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected products</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected products</h3>
<bx-ordered-list>
{% for product in advisory.affected_products %}
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@ -92,7 +92,7 @@
</bx-ordered-list>
<br /> <br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Fixes</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Fixes</h3>
<bx-ordered-list>
{% for ticket in advisory.bugzilla_tickets %}
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@ -104,7 +104,7 @@
</bx-ordered-list>
<br /> <br />
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">CVEs</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">CVEs</h3>
<bx-ordered-list>
{% for cve in advisory.cves %}
<bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@ -117,7 +117,7 @@
</div>
</div>
<div class="bx--col-lg-6">
<div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
<div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
{% set pkg_list = {} %}
{% for pkg in advisory.packages %}
{% if pkg.repo_name in pkg_list %}
@ -127,7 +127,7 @@
{% endif %}
{% endfor %}
<h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected packages</h3>
<h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected packages</h3>
{% for repo_name, pkg in pkg_list.items() %}
<h4 style="padding-bottom:0.3rem;font-weight:400;">{{ repo_name }}</h4>
<bx-ordered-list>