AS1024/itflow
1
0
Fork 0
mirror of https://github.com/itflow-org/itflow synced 2026-08-15 20:15:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Theme select to use new bootstrap 5 radio button

Browse Source
This commit is contained in:
johnnyq
2026-08-15 13:17:32 -04:00
parent 72c037c581
commit 56d9e04eac
2 changed files with 100 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
admin/settings_theme.php
View File

@@ -1,25 +1,26 @@
<?php
require_once "includes/inc_all_admin.php";
$theme_colors_array = array (
// Keep in step with the .theme-<name> blocks in css/itflow_custom.css - a name
// listed here with no matching block renders as an uncoloured, dead choice.
$theme_colors_array = array(
'lightblue',
'blue',
'cyan',
'green',
'olive',
'teal',
'red',
'maroon',
'pink',
'purple',
'navy',
'indigo',
'purple',
'fuchsia',
'yellow',
'pink',
'maroon',
'red',
'orange',
'yellow',
'black',
'navy',
'gray'
'olive',
'green',
'teal',
'cyan',
'gray',
'black'
);
?>
@@ -32,8 +33,9 @@ $theme_colors_array = array (
<form action="post.php" method="post" autocomplete="off">
<input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
<label>Select a Theme</label>
<div class="row g-2">
<p class="text-muted">Sets the colour of the top bar, links, buttons and highlights.</p>
<div class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 g-3">
<?php
@@ -41,17 +43,20 @@ $theme_colors_array = array (
?>
<div class="col-4 text-center mb-3">
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" onchange="this.form.submit()" id="customRadio<?= $theme_color ?>" name="edit_theme_settings" value="<?= $theme_color ?>" <?php if ($config_theme == $theme_color) { echo "checked"; } ?>>
<label for="customRadio<?= $theme_color ?>" class="form-check-label">
<i class="fa fa-fw fa-6x fa-circle text-<?= $theme_color ?>"></i>
<br>
<?= $theme_color ?>
</label>
</div>
</div>
<div class="col">
<input type="radio" class="btn-check" onchange="this.form.submit()"
id="theme-<?= $theme_color ?>" name="edit_theme_settings"
value="<?= $theme_color ?>"
<?php if ($config_theme == $theme_color) { echo "checked"; } ?>>
<label class="itflow-theme-swatch" for="theme-<?= $theme_color ?>">
<?php /* the circle paints itself from --itflow-accent, so it can
never drift out of step with the stylesheet */ ?>
<span class="itflow-theme-circle theme-<?= $theme_color ?>">
<i class="fas fa-circle"></i>
<i class="fas fa-check itflow-theme-tick"></i>
</span>
<span class="itflow-theme-name"><?= escapeHtml($theme_color) ?></span>
</label>
</div>
<?php } ?>

70
css/itflow_custom.css
View File

@@ -134,6 +134,7 @@
.theme-purple { --itflow-accent: #6f42c1; }
.theme-red { --itflow-accent: #dc3545; }
.theme-teal { --itflow-accent: #20c997; }
.theme-yellow { --itflow-accent: #ffc107; }
/* top navbar takes the theme colour */
.app-header.navbar {
@@ -483,6 +484,7 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
.bg-purple { background-color: rgba(111,66,193,.9) !important; }
.bg-red { background-color: rgba(231,76,60,.9) !important; }
.bg-teal { background-color: rgba(32,201,151,.9) !important; }
.bg-yellow { background-color: rgba(243,156,18,.9) !important; }
/* --- Flatpickr date-filter preset panel ---------------------------------
Flatpickr has no preset-ranges feature; js/date_filter.js injects this
@@ -586,6 +588,7 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
.theme-purple .btn-primary, .theme-purple .btn-outline-primary { --bs-btn-focus-shadow-rgb: 111, 66, 193; }
.theme-red .btn-primary, .theme-red .btn-outline-primary { --bs-btn-focus-shadow-rgb: 220, 53, 69; }
.theme-teal .btn-primary, .theme-teal .btn-outline-primary { --bs-btn-focus-shadow-rgb: 32, 201, 151; }
.theme-yellow .btn-primary, .theme-yellow .btn-outline-primary { --bs-btn-focus-shadow-rgb: 255, 193, 7; }
/* Text colour on a solid primary button. Threshold derived from Bootstrap's
own palette (white up to L=0.183, black from L=0.486), so only these two
@@ -594,10 +597,13 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
.theme-orange .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
.theme-teal .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; }
.theme-teal .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
.theme-yellow .btn-primary { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; }
.theme-yellow .btn-outline-primary { --bs-btn-hover-color: #000; --bs-btn-active-color: #000; }
/* Same L>0.335 contrast cut as the primary button. */
.theme-orange .nav-pills,
.theme-teal .nav-pills {
.theme-teal .nav-pills,
.theme-yellow .nav-pills {
--bs-nav-pills-link-active-color: #000;
}
@@ -622,3 +628,65 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
.text-purple { color: #6f42c1 !important; }
.text-red { color: #dc3545 !important; }
.text-teal { color: #20c997 !important; }
.text-yellow { color: #ffc107 !important; }
/* --- Theme picker (admin/settings_theme.php) -----------------------------
Keeps the coloured circles - the radio button beside each one is what was
in the way, so the input is now a visually hidden .btn-check and the label
is the control. Selection reads as a tick in the circle plus a bolder name.
The circle carries .theme-<name> and paints itself from --itflow-accent, so
it always shows the colour that theme will actually apply - add a theme to
the stylesheet and its swatch is correct with no extra rule. */
.itflow-theme-swatch {
display: block;
padding: .5rem .25rem;
text-align: center;
cursor: pointer;
border-radius: .5rem;
transition: background-color .15s ease;
}
.itflow-theme-swatch:hover {
background-color: var(--bs-secondary-bg);
}
.itflow-theme-circle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.itflow-theme-circle .fa-circle {
font-size: 3.5rem;
color: var(--itflow-accent, #007bff);
}
.itflow-theme-tick {
position: absolute;
font-size: 1.35rem;
color: #fff;
opacity: 0;
transition: opacity .15s ease;
}
/* light circles need a dark tick - same L>0.335 cut as the buttons */
.itflow-theme-circle.theme-yellow .itflow-theme-tick,
.itflow-theme-circle.theme-orange .itflow-theme-tick,
.itflow-theme-circle.theme-teal .itflow-theme-tick {
color: #000;
}
.itflow-theme-name {
display: block;
margin-top: .4rem;
font-size: .8125rem;
text-transform: capitalize;
}
.btn-check:checked + .itflow-theme-swatch .itflow-theme-tick {
opacity: 1;
}
.btn-check:checked + .itflow-theme-swatch .itflow-theme-name {
font-weight: 600;
}
.btn-check:focus-visible + .itflow-theme-swatch {
outline: 2px solid var(--itflow-accent, #007bff);
outline-offset: 2px;
}