Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui - refactor theme handling in templates to use a unified 'theme' variable and move upgrade to pro button

Browse source
This commit is contained in:
Théophile Diot 2024-11-13 14:47:00 +01:00
parent d107dd4223
commit 1052e1564a
No known key found for this signature in database
GPG key ID: FA995104A0BA376A
15 changed files with 82 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/ui/app/static/css/overrides.css
View file

@ -171,10 +171,7 @@ button.list-group-item-secondary.active {
}
.buy-now .btn-buy-now {
position: fixed;
bottom: 3rem;
right: 1.625rem;
z-index: 1080;
position: unset;
box-shadow: 0 1px 20px 1px var(--bs-primary); /* Initial shadow */
background-color: var(--bs-bw-green); /* Initial background color */
color: #fff;
@ -306,10 +303,16 @@ button.list-group-item-secondary.active {
animation: fadeIn 1.5s infinite alternate;
} */
.btn-responsive {
padding: 6px 14px;
font-size: 90%;
line-height: 1.2;
}
@media (max-width: 768px) {
.btn-responsive {
padding: 4px 9px;
font-size: 80%;
padding: 2px 6px;
font-size: 70%;
line-height: 1;
}
@ -321,9 +324,9 @@ button.list-group-item-secondary.active {
@media (min-width: 769px) and (max-width: 992px) {
.btn-responsive {
padding: 8px 18px;
font-size: 90%;
line-height: 1.2;
padding: 4px 9px;
font-size: 80%;
line-height: 1.1;
}
}

2
src/ui/app/static/js/utils.js
View file

@ -439,6 +439,7 @@ $(document).ready(() => {
.addClass("bg-dark-subtle")
.removeClass("bg-light-subtle");
$("html").attr("data-bs-theme", "dark");
$(".dark-mode-toggle-icon").removeClass("bx-sun").addClass("bx-moon");
} else {
$("html").removeClass("dark-style").addClass("light-style");
$(".btn-outline-light")
@ -450,6 +451,7 @@ $(document).ready(() => {
.addClass("bg-light-subtle")
.removeClass("bg-dark-subtle");
$("html").attr("data-bs-theme", null);
$(".dark-mode-toggle-icon").removeClass("bx-moon").addClass("bx-sun");
}
$("#theme").val(darkMode ? "dark" : "light");

8
src/ui/app/templates/base.html
View file

@ -24,9 +24,9 @@
} %}
<!DOCTYPE html>
<html lang="en"
class="{{ current_user.theme }}-style layout-navbar-fixed layout-menu-fixed"
class="{{ theme }}-style layout-navbar-fixed layout-menu-fixed"
data-theme="theme-default"
{% if current_user.theme == 'dark' %}data-bs-theme="dark"{% endif %}>
{% if theme == 'dark' %}data-bs-theme="dark"{% endif %}>
<head>
<meta charset="utf-8" />
<meta name="viewport"
@ -67,7 +67,7 @@
<link rel="stylesheet"
href="{{ url_for('static', filename='libs/flatpickr/themes/airbnb.css') }}"
nonce="{{ style_nonce }}" />
{% if current_user.theme == 'dark' %}
{% if theme == 'dark' %}
<link rel="stylesheet"
href="{{ url_for('static', filename='libs/flatpickr/themes/airbnb.dark.css') }}"
nonce="{{ style_nonce }}" />
@ -126,7 +126,7 @@
</head>
<body>
<input type="hidden" id="is-read-only" value="{{ is_readonly }}" />
<input type="hidden" id="theme" value="{{ current_user.theme }}" />
<input type="hidden" id="theme" value="{{ theme }}" />
<!-- prettier-ignore -->
{% if current_endpoint != "loading" %}
{% include "flash.html" %}

23
src/ui/app/templates/dashboard.html
View file

@ -28,7 +28,7 @@
</button>
<!-- Collapsible floating menu -->
<div class="collapse mt-2" id="mode-selection-floating">
<ul class="nav nav-pills flex-column bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} p-2 rounded shadow-sm mode-selection-menu"
<ul class="nav nav-pills flex-column bg-{% if theme == 'light' %}white{% else %}dark{% endif %} p-2 rounded shadow-sm mode-selection-menu"
role="tablist">
{% if current_endpoint != "global-config" %}
<li class="nav-item mb-1" role="presentation">
@ -122,7 +122,7 @@
<ul class="d-flex mb-0 list-unstyled">
<li class="me-3">
<a role="button"
class="btn btn-sm btn-outline-{% if current_user.theme == 'light' %}dark{% else %}light{% endif %} d-flex align-items-center h-100"
class="btn btn-sm btn-outline-{% if theme == 'light' %}dark{% else %}light{% endif %} d-flex align-items-center h-100"
aria-pressed="true"
href="https://panel.bunkerweb.io/order/support/?utm_campaign=self&utm_source=ui"
target="_blank"
@ -153,7 +153,7 @@
<li class="position-relative">
<button id="news-button"
type="button"
class="btn btn-sm btn-{% if current_user.theme == 'light' %}dark{% else %}light{% endif %} text-uppercase d-flex align-items-center"
class="btn btn-sm btn-{% if theme == 'light' %}dark{% else %}light{% endif %} text-uppercase d-flex align-items-center"
aria-pressed="true"
data-bs-toggle="offcanvas"
data-bs-target="#side-offcanvas-news"
@ -170,23 +170,6 @@
{% include "footer.html" %}
{% include "sidebar-notifications.html" %}
{% include "sidebar-news.html" %}
{% if not is_pro_version %}
<div class="buy-now courier-prime">
<a class="btn btn-responsive btn-buy-now"
role="button"
aria-pressed="true"
href="https://panel.bunkerweb.io/order/bunkerweb-pro?utm_campaign=self&utm_source=ui"
target="_blank"
rel="noopener">
<span class="me-1 me-md-2 d-flex h-100 justify-content-center align-items-center">
<img src="{{ url_for('static', filename='img/diamond-white.svg') }}"
alt="Pro plugin"
width="18px"
height="15.5px">
</span>
Upgrade to PRO</a>
</div>
{% endif %}
<div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->

2
src/ui/app/templates/flash.html
View file

@ -8,7 +8,7 @@
{% endif %}
<!-- flash message-->
{% for category, message in messages %}
<div class="bs-toast toast fade show bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}"
<div class="bs-toast toast fade show bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}"
role="alert"
aria-live="assertive"
aria-atomic="true">

2
src/ui/app/templates/instances.html
View file

@ -141,7 +141,7 @@
</table>
</div>
<div id="feedback-toast"
class="bs-toast toast fade bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border"
class="bs-toast toast fade bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border"
role="alert"
aria-live="assertive"
aria-atomic="true"

2
src/ui/app/templates/loading.html
View file

@ -1,6 +1,6 @@
{% extends "base.html" %}
{% block page %}
<div class="bg-{% if current_user.theme == 'light' %}light{% else %}dark{% endif %}-subtle">
<div class="bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle">
<div class="login-background">
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">

2
src/ui/app/templates/login.html
View file

@ -13,7 +13,7 @@
class="form-check-input"
type="checkbox"
role="switch"
{% if current_user.theme == "dark" %}checked{% endif %} />
{% if theme == "dark" %}checked{% endif %} />
</div>
<label class="setting-checkbox-label mb-0 fw-bold text-secondary"
for="dark-mode-toggle">Dark</label>

28
src/ui/app/templates/menu.html
View file

@ -30,6 +30,34 @@
"logs": {"url": url_for('logs'), "icon": "bx-file-find"},
} %}
<ul class="menu-inner py-1">
<!-- Dark mode toggle -->
<li class="menu-item mt-1 mb-1">
<div class="menu-link">
<input type="hidden"
id="csrf_token"
name="csrf_token"
value="{{ csrf_token() }}" />
<i class="menu-icon tf-icons dark-mode-toggle-icon bx bx-{% if theme == "light" %}sun{% else %}moon{% endif %}"></i>
<div class="d-flex align-items-center justify-content-center w-100 h-100">
<label class="setting-checkbox-label me-2 mb-0"
for="dark-mode-toggle">Light</label>
<div class="form-check form-switch mb-0"
{% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The database is in readonly mode, therefore the theme cannot be changed"{% endif %}>
<input id="dark-mode-toggle"
name="dark-mode-toggle"
class="form-check-input"
type="checkbox"
role="switch"
data-root-url="{{ url_for('profile') }}"
{% if theme == "dark" %}checked{% endif %}
{% if is_readonly %}disabled{% endif %} />
</div>
<label class="setting-checkbox-label mb-0"
for="dark-mode-toggle">Dark</label>
</div>
</div>
</li>
<!--/ Dark mode toggle -->
{% for endpoint, item in menu_items.items() %}
<li class="menu-item{% if endpoint == current_endpoint or endpoint != 'plugins' and endpoint in request.path.split('/')[1] %} active{% endif %}{% if item.get('sub') and item.get('open', True) %} open{% endif %}">
<a href="{{ item['url'] }}"

46
src/ui/app/templates/navbar.html
View file

@ -32,7 +32,7 @@
{% elif current_endpoint == 'pro' %}
{% set documentation_endpoint = "/professional-services" %}
{% endif %}
<div class="navbar-nav align-items-center">
<div class="d-none d-md-inline navbar-nav align-items-center">
<div class="nav-item d-flex align-items-center">
<a role="button"
class="btn btn-text-secondary p-1 p-md-2"
@ -41,7 +41,7 @@
target="_blank"
rel="noopener">
<span class="tf-icons bx bx-file me-md-2"></span>
<span class="d-none d-md-inline">Documentation</span>
<span class="d-none d-lg-inline">Documentation</span>
</a>
<a role="button"
class="btn btn-outline-github p-1 p-md-2 ms-1 ms-md-2"
@ -50,7 +50,7 @@
target="_blank"
rel="noreferrer">
<i class="tf-icons bx bxl-github me-md-2"></i>
<span class="d-none d-md-inline">Github</span>
<span class="d-none d-lg-inline">Github</span>
</a>
<a role="button"
class="btn btn-outline-discord p-1 p-md-2 ms-1 ms-md-2"
@ -59,37 +59,31 @@
target="_blank"
rel="noopener">
<i class="tf-icons bx bxl-discord me-md-2"></i>
<span class="d-none d-md-inline">Discord</span>
<span class="d-none d-lg-inline">Discord</span>
</a>
</div>
</div>
<!-- /Buttons -->
<ul class="navbar-nav flex-row align-items-center ms-auto">
<!-- Dark mode toggle -->
{% if not is_pro_version %}
<li class="nav-item lh-1 me-4">
<div class="d-flex mt-1">
<input type="hidden"
id="csrf_token"
name="csrf_token"
value="{{ csrf_token() }}" />
<label class="setting-checkbox-label d-flex align-items-center ps-0"
for="dark-mode-toggle">Light</label>
<div class="form-switch ms-2 mb-1"
{% if is_readonly %}data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The database is in readonly mode, therefore the theme cannot be changed"{% endif %}>
<input id="dark-mode-toggle"
name="dark-mode-toggle"
class="form-check-input"
type="checkbox"
role="switch"
data-root-url="{{ url_for('profile') }}"
{% if current_user.theme == "dark" %}checked{% endif %}
{% if is_readonly %}disabled{% endif %} />
</div>
<label class="setting-checkbox-label d-flex align-items-center ps-0"
for="dark-mode-toggle">Dark</label>
<div class="buy-now courier-prime">
<a class="btn btn-responsive btn-buy-now"
role="button"
aria-pressed="true"
href="https://panel.bunkerweb.io/order/bunkerweb-pro?utm_campaign=self&utm_source=ui"
target="_blank"
rel="noopener">
<span class="me-1 me-md-2 d-flex h-100 justify-content-center align-items-center">
<img src="{{ url_for('static', filename='img/diamond-white.svg') }}"
alt="Pro plugin"
width="18px"
height="15.5px">
</span>
Upgrade to PRO</a>
</div>
</li>
<!--/ Dark mode toggle -->
{% endif %}
<!-- Stars -->
<li class="d-none d-md-inline nav-item lh-1 me-4">
<a class="github-button"

6
src/ui/app/templates/profile.html
View file

@ -173,7 +173,7 @@
<div class="col-md-6">
<!-- Theme -->
<div class="card position-relative">
<i class='bx bx-{% if current_user.theme == 'light' %}sun{% else %}moon{% endif %} bx-sm position-absolute top-0 end-0 m-3'></i>
<i class='bx bx-{% if theme == 'light' %}sun{% else %}moon{% endif %} bx-sm position-absolute top-0 end-0 m-3'></i>
<h5 class="card-header">Change Theme</h5>
<div class="card-body pb-4">
<form method="POST" action="{{ profile_url }}/edit">
@ -182,10 +182,10 @@
<div class="col-md-12 form-floating">
<select class="form-select" id="theme" name="theme">
<option value="light"
{% if current_user.theme == "light" %}selected{% endif %}>
{% if theme == "light" %}selected{% endif %}>
Light
</option>
<option value="dark" {% if current_user.theme == "dark" %}selected{% endif %}>Dark</option>
<option value="dark" {% if theme == "dark" %}selected{% endif %}>Dark</option>
</select>
<label for="theme">Theme</label>
</div>

4
src/ui/app/templates/setup.html
View file

@ -25,7 +25,7 @@
class="form-check-input"
type="checkbox"
role="switch"
{% if current_user.theme == "dark" %}checked{% endif %} />
{% if theme == "dark" %}checked{% endif %} />
</div>
<label class="setting-checkbox-label mb-0 fw-bold text-secondary"
for="dark-mode-toggle">Dark</label>
@ -949,7 +949,7 @@
</div>
</div>
<div id="feedback-toast"
class="bs-toast toast fade bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border"
class="bs-toast toast fade bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border"
role="alert"
aria-live="assertive"
aria-atomic="true"

2
src/ui/app/templates/sidebar-news.html
View file

@ -57,7 +57,7 @@
</div>
</div>
<!-- Newsletter Signup Section -->
<div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if current_user.theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
<div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
<h5 class="mb-3 text-primary">Join the Newsletter</h5>
<form action="https://bunkerity.us1.list-manage.com/subscribe/post?u=ec5b1577cf427972b9bd491a6&id=37076d9d67"
method="POST">

4
src/ui/app/templates/sidebar-notifications.html
View file

@ -54,7 +54,7 @@
{% set content = message[0] %}
{% set category = message[1] %}
{% set datetime = message[2] %}
<div class="col-12 bs-toast toast show bg-{% if current_user.theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}">
<div class="col-12 bs-toast toast show bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border{% if category == 'error' %} border-danger{% elif category == 'warning' %} border-warning{% else %} border-primary{% endif %}">
<div class="toast-header d-flex align-items-center{% if category == 'error' %} text-danger{% elif category == 'warning' %} text-warning{% else %} text-primary{% endif %}">
<i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell me-2"></i>
<span class="fw-medium me-auto">
@ -78,7 +78,7 @@
{% endif %}
</div>
<!-- Newsletter Signup Section -->
<div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if current_user.theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
<div class="newsletter-signup position-sticky bottom-0 start-0 w-100 p-4 bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle border-top">
<h5 class="mb-3 text-primary">Join the Newsletter</h5>
<form action="https://bunkerity.us1.list-manage.com/subscribe/post?u=ec5b1577cf427972b9bd491a6&id=37076d9d67"
method="POST">

1
src/ui/main.py
View file

@ -176,6 +176,7 @@ def inject_variables():
plugins=BW_CONFIG.get_plugins(),
flash_messages=session.get("flash_messages", []),
is_readonly=DATA.get("READONLY_MODE", False),
theme=current_user.theme if current_user.is_authenticated else "dark",
)