mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-11 17:24:46 +02:00
Code Issues Releases Wiki Activity

A few small updates to default AdminThemeUikit theme module config

Browse Source
This commit is contained in:
Ryan Cramer
2025-05-23 16:35:32 -04:00
parent 050fb0aa0c
commit 44e6c89e35
3 changed files with 61 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js
View File

@@ -30,7 +30,13 @@ $(document).ready(function() {
function getMainColor() {
var $wrap = $('#wrap_defaultMainColor');
var $f = $wrap.find('input:checked');
if($f.val() === 'custom') return $('#defaultMainColorCustom').val();
if($f.val() === 'custom') {
if($('body').hasClass('dark-theme')) {
return $('#defaultMainColorCustomDark').val();
} else {
return $('#defaultMainColorCustom').val();
}
}
return $f.closest('label').find('.defaultMainColorLabel').css('background-color');
}
@@ -41,6 +47,9 @@ $(document).ready(function() {
*
*/
function setMainColor(value) {
if(typeof value === 'undefined') value = getMainColor();
console.log('setMainColor', value);
$('#main-color-custom').remove();
$('.pw-logo-native').css('color', value);
@@ -57,6 +66,12 @@ $(document).ready(function() {
"</style>");
}
function updateToggles() {
var $use2Colors = $('#defaultToggles_use2Colors');
var hidden = !$('#defaultMainColor_custom').prop('checked');
$use2Colors.parent('label').prop('hidden', hidden);
}
function setButtonColor(value) {
$('.ui-button').css('background-color', value);
}
@@ -64,20 +79,27 @@ $(document).ready(function() {
$('#wrap_defaultStyleName').on('input', 'input', function() {
var styleName = $(this).val();
$body.removeClass(styleClasses).addClass(styleName + '-theme');
$('#defaultMainColor').trigger('input');
setButtonColor(styleName === 'light' ? 'black' : getMainColor());
//$('#defaultMainColor input').eq(0).trigger('input');
var color = getMainColor();
setMainColor(color);
setButtonColor(styleName === 'light' ? 'black' : color);
});
$('#wrap_defaultMainColor').on('input', 'input', function() {
var value = 'main-color-' + $(this).val();
var color;
if(value === 'main-color-custom') {
if($('#defaultToggles_use2Colors').prop('checked')) {
color = $('body').hasClass('dark-theme') ? $('#defaultMainColorCustomDark').val() : $('#defaultMainColorCustom').val();
} else {
color = $('#defaultMainColorCustom').val();
}
} else {
color = $(this).closest('label').find('.defaultMainColorLabel').css('background');
}
$body.removeClass(colorClasses).addClass(value);
setMainColor(color);
updateToggles();
});
$('#defaultMainColorCustom, #defaultMainColorCustomDark').on('input', function() {
@@ -86,7 +108,11 @@ $(document).ready(function() {
if($(this).attr('id') === 'defaultMainColorCustomDark') {
if($('body').hasClass('dark-theme')) setMainColor(value);
} else {
if($('body').hasClass('light-theme')) setMainColor(value);
if($('body').hasClass('light-theme')) {
setMainColor(value);
} else if(!$('#defaultToggles_use2Colors').prop('checked')) {
setMainColor(value);
}
}
});
@@ -103,4 +129,14 @@ $(document).ready(function() {
$('#defaultMainColorCustom, #defaultMainColorCustomDark').trigger('input');
}
});
$('#defaultToggles_use2Colors').on('change', function() {
if($(this).prop('checked')) {
$('#defaultMainColorCustomDark').trigger('input');
} else {
$('#defaultMainColorCustom').trigger('input');
}
});
updateToggles();
});

31
wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php
View File

@@ -28,6 +28,22 @@ if(empty($value)) $value = 'auto';
$f->val($value);
$inputfields->add($f);
$f = $inputfields->InputfieldCheckboxes;
$f->attr('id+name', 'defaultToggles');
$f->label = __('Toggles');
$f->addOption('noUserMenu',
__('Disable light/dark/auto setting in user tools menu?') . ' ' .
'[span.detail] ' . __('(this prevents users from making their own dark/light mode selection)') . ' [/span]'
);
$f->addOption('use2Colors',
__('Define separate main color pickers for light mode and dark mode') . ' ' .
'[span.detail] ' . __('(use for more contrast in light or dark mode)') . ' [/span]',
[ 'hidden' => 'hidden' ]
);
$value = $adminTheme->get($f->name);
if(is_array($value)) $f->val($value);
$inputfields->add($f);
$f = $inputfields->InputfieldRadios;
$f->attr('id+name', 'defaultMainColor');
$f->label = __('Main color');
@@ -45,7 +61,7 @@ $inputfields->add($f);
$f = $inputfields->InputfieldText;
$f->attr('id+name', 'defaultMainColorCustom');
$f->label = __('Custom main color (light mode)');
$f->label = __('Custom main color');
$f->attr('type', 'color');
$f->showIf = 'defaultMainColor=custom';
$f->attr('style', 'width: 45px; padding: 1px 4px');
@@ -60,23 +76,12 @@ $f = $inputfields->InputfieldText;
$f->attr('id+name', 'defaultMainColorCustomDark');
$f->label = __('Custom main color (dark mode)');
$f->attr('type', 'color');
$f->showIf = 'defaultMainColor=custom';
$f->attr('style', 'width: 45px; padding: 1px 4px');
$value = (string) $adminTheme->get($f->attr('name'));
if(empty($value)) $value = $customColorValue;
if(ctype_alnum(ltrim($value, '#'))) $f->val($value);
$f->columnWidth = 50;
$inputfields->add($f);
$f = $inputfields->InputfieldCheckboxes;
$f->attr('id+name', 'defaultToggles');
$f->label = __('Toggles');
$f->addOption('noUserMenu',
__('Disable light/dark/auto setting in user tools menu?') . ' ' .
'[span.detail] ' . __('(this prevents users from making their own dark/light mode selection)') . ' [/span]'
);
$value = $adminTheme->get($f->name);
if(is_array($value)) $f->val($value);
$f->showIf = 'defaultMainColor=custom, defaultToggles=use2Colors';
$inputfields->add($f);
$url = $adminTheme->url() . 'themes/default/examples/';

3
wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php
View File

@@ -49,7 +49,8 @@ $adminTheme->addBodyClass("main-color-$mainColor");
$mainColorCode = isset($mainColors[$mainColor]) ? $mainColors[$mainColor] : $mainColors['red'];
if(strpos($mainColorCode, '#') === 0 && ctype_alnum(ltrim($mainColorCode, '#'))) {
$mainDarkCode = $mainColors['customDark'];
if($mainColor === 'custom' && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) {
$use2Colors = $mainColor === 'custom' && in_array('use2Colors', $adminTheme->defaultToggles);
if($use2Colors && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) {
$css = "--main-color: light-dark($mainColorCode, $mainDarkCode);";
} else {
$css = "--main-color: $mainColorCode";