mirror of
https://github.com/unraid/webgui.git
synced 2026-01-10 03:30:03 -06:00
Merge pull request #2131 from unraid/feat/theme-helper-class
feat: implement ThemeHelper class to centralize theme usage
This commit is contained in:
tom mortensen
@@ -21,8 +21,8 @@ Nchan="docker_load:stop"
|
||||
<?
|
||||
require_once "$docroot/plugins/dynamix.docker.manager/include/DockerClient.php";
|
||||
|
||||
$width = in_array($theme,['white','black']) ? -58: -44;
|
||||
$top = in_array($theme,['white','black']) ? 40 : 20;
|
||||
$width = $themeHelper->isTopNavTheme() ? -58: -44; // $themeHelper set in DefaultPageLayout.php
|
||||
$top = $themeHelper->isTopNavTheme() ? 40 : 20;
|
||||
$busy = "<i class='fa fa-spin fa-circle-o-notch'></i> "._('Please wait')."... "._('starting up containers');
|
||||
$cpus = cpu_list();
|
||||
?>
|
||||
@@ -82,7 +82,7 @@ function LockButton() {
|
||||
$('#resetsort').removeClass('nohand').addClass('hand');
|
||||
$('i.mover').show();
|
||||
$('#docker_list .sortable').css({'cursor':'move'});
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
$('div.nav-item.LockButton').find('a').prop('title',"_(Lock sortable items)_");
|
||||
$('div.nav-item.LockButton').find('b').removeClass('icon-u-lock green-text').addClass('icon-u-lock-open red-text');
|
||||
<?endif;?>
|
||||
@@ -99,7 +99,7 @@ function LockButton() {
|
||||
$('#resetsort').removeClass('hand').addClass('nohand');
|
||||
$('i.mover').hide();
|
||||
$('#docker_list .sortable').css({'cursor':'default'});
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
$('div.nav-item.LockButton').find('a').prop('title',"_(Unlock sortable items)_");
|
||||
$('div.nav-item.LockButton').find('b').removeClass('icon-u-lock-open red-text').addClass('icon-u-lock green-text');
|
||||
<?endif;?>
|
||||
|
||||
@@ -123,7 +123,7 @@ function hide_eth($network) {
|
||||
return in_array($network,$mgmt_port) && lan_port('wlan0',true)==1;
|
||||
}
|
||||
|
||||
$bgcolor = strstr('white,azure',$display['theme']) ? '#f2f2f2' : '#1c1c1c';
|
||||
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c'; // $themeHelper set in DefaultPageLayout.php
|
||||
|
||||
//Check if docker.cfg does exist
|
||||
$no_dockercfg = !is_file('/boot/config/docker.cfg');
|
||||
|
||||
@@ -318,7 +318,8 @@ $authoringMode = $dockercfg['DOCKER_AUTHORING_MODE'] == "yes" ? true : false;
|
||||
$authoring = $authoringMode ? 'advanced' : 'noshow';
|
||||
$disableEdit = $authoringMode ? 'false' : 'true';
|
||||
$showAdditionalInfo = '';
|
||||
$bgcolor = strstr('white,azure',$display['theme']) ? '#f2f2f2' : '#1c1c1c';
|
||||
|
||||
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c'; // $themeHelper set in DefaultPageLayout.php
|
||||
|
||||
# Search for existing TAILSCALE_ entries in the Docker template
|
||||
$TS_existing_vars = false;
|
||||
|
||||
@@ -32,7 +32,7 @@ var browserName = (function(agent){
|
||||
})(window.navigator.userAgent.toLowerCase());
|
||||
|
||||
$(function(){
|
||||
<?if ($themes2):?>
|
||||
<?if ($themeHelper->isSidebarTheme()):?>
|
||||
$('.nav-item.gui_search').hover(function(){gui_search();},function(e){closeSearchBox(e);});
|
||||
<?endif;?>
|
||||
$.post('/plugins/dynamix.gui.search/include/exec.php',function(data) {
|
||||
@@ -51,7 +51,7 @@ function setupGUIsearch() {
|
||||
window.addEventListener('keydown',function(e){
|
||||
if (!e.shiftKey && !e.altKey && (navigator.appVersion.indexOf('Mac')==-1 ? e.ctrlKey : e.metaKey) && e.keyCode==75) {
|
||||
e.preventDefault();
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
if (guiSearchBoxSpan()) closeSearchBox(e); else gui_search();
|
||||
<?endif;?>
|
||||
}
|
||||
@@ -63,7 +63,7 @@ function setupGUIsearch() {
|
||||
}
|
||||
|
||||
function gui_search() {
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
languageVisible = $('.nav-item.LanguageButton').is(':visible');
|
||||
$('.nav-tile.right').prepend("<?=$guiSearchBoxSpan?>").css('overflow','visible');
|
||||
$('.nav-item.util,.nav-user.show').hide();
|
||||
@@ -86,7 +86,7 @@ function gui_search() {
|
||||
function closeSearchBox(e) {
|
||||
e.stopPropagation();
|
||||
$('#guiSearchBoxSpan').remove();
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
$('.nav-tile.right').css({'overflow-x':'auto','overflow-y':'hidden'});
|
||||
$('.nav-item.util,.nav-user.show').show();
|
||||
if (!languageVisible) $('.nav-item.LanguageButton').hide();
|
||||
|
||||
@@ -20,12 +20,13 @@ Markdown="false"
|
||||
<?
|
||||
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
|
||||
require_once "$docroot/plugins/dynamix.vm.manager/include/libvirt_helpers.php";
|
||||
$themeName = $themeHelper->getThemeName();
|
||||
|
||||
$cpus = cpu_list();
|
||||
$hover = in_array($theme,['white','azure']) ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)';
|
||||
$bgcolor = in_array($theme,['white','azure']) ? '#f2f2f2' : '#1c1c1c';
|
||||
$fgcolor = in_array($theme,['white','azure']) ? '#1c1c1c' : '#f2f2f2';
|
||||
$incolor = $theme!='gray' ? $bgcolor : '#121510';
|
||||
$hover = $themeHelper->isLightTheme() ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)';
|
||||
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c';
|
||||
$fgcolor = $themeHelper->isLightTheme() ? '#1c1c1c' : '#f2f2f2';
|
||||
$incolor = $themeName !== 'gray' ? $bgcolor : '#121510';
|
||||
|
||||
function showCPUs($uuid) {
|
||||
global $cpus;
|
||||
@@ -403,7 +404,7 @@ function LockButton() {
|
||||
$('#resetsort').removeClass('nohand').addClass('hand');
|
||||
$('i.mover').show();
|
||||
$('#kvm_list .sortable').css({'cursor':'move'});
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
$('div.nav-item.LockButton a').prop('title',"_(Lock sortable items)_");
|
||||
$('div.nav-item.LockButton b').removeClass('icon-u-lock green-text').addClass('icon-u-lock-open red-text');
|
||||
<?endif;?>
|
||||
@@ -426,7 +427,7 @@ function LockButton() {
|
||||
$('#resetsort').removeClass('hand').addClass('nohand');
|
||||
$('i.mover').hide();
|
||||
$('#kvm_list .sortable').css({'cursor':'default'});
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
$('div.nav-item.LockButton a').prop('title',"_(Unlock sortable items)_");
|
||||
$('div.nav-item.LockButton b').removeClass('icon-u-lock-open red-text').addClass('icon-u-lock green-text');
|
||||
<?endif;?>
|
||||
|
||||
@@ -92,7 +92,7 @@ if (is_file('/boot/syslinux/syslinux.cfg')) {
|
||||
$arrValidNetworks = getValidNetworks();
|
||||
$pcie_acs_override = detect($bootcfg, $bootenv, 'pcie_acs_override');
|
||||
$vfio_allow_unsafe = detect($bootcfg, $bootenv, 'allow_unsafe_interrupts');
|
||||
$bgcolor = strstr('white,azure',$display['theme']) ? '#f2f2f2' : '#1c1c1c';
|
||||
$bgcolor = $themeHelper->isLightTheme() ? '#f2f2f2' : '#1c1c1c';
|
||||
$started = $var['fsState']=='Started';
|
||||
$libvirt_up = $libvirt_running=='yes';
|
||||
$libvirt_log = file_exists("/var/log/libvirt/libvirtd.log");
|
||||
|
||||
@@ -22,7 +22,7 @@ if (substr($_SERVER['REQUEST_URI'],0,4) != '/VMs') {
|
||||
require_once "$docroot/webGui/include/Translations.php";
|
||||
}
|
||||
|
||||
switch ($display['theme']) {
|
||||
switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout.php
|
||||
case 'gray' : $bgcolor = '#121510'; $border = '#606e7f'; $top = -44; break;
|
||||
case 'azure': $bgcolor = '#edeaef'; $border = '#606e7f'; $top = -44; break;
|
||||
case 'black': $bgcolor = '#212121'; $border = '#2b2b2b'; $top = -64; break;
|
||||
|
||||
@@ -50,8 +50,7 @@ function customTiles($column) {
|
||||
}
|
||||
|
||||
// adjust the text color in log window
|
||||
$fgcolor = in_array($theme,['white','azure']) ? '#1c1c1c' : '#f2f2f2';
|
||||
exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:$fgcolor;/' $docroot/plugins/dynamix.docker.manager/log.htm >/dev/null &");
|
||||
$themeHelper->updateDockerLogColor($docroot); // $themeHelper set in DefaultPageLayout.php
|
||||
exec("/etc/rc.d/rc.docker status >/dev/null",$dummy,$dockerd);
|
||||
exec("/etc/rc.d/rc.libvirt status >/dev/null",$dummy,$libvirtd);
|
||||
|
||||
@@ -200,7 +199,7 @@ $ramsize = my_scale($total,$unit,0,-1,1024)." $unit";
|
||||
$low = $memory_maximum < $memory_installed;
|
||||
if ($low) $memory_maximum = pow(2,ceil(log($memory_installed)/log(2)));
|
||||
|
||||
switch ($theme) {
|
||||
switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout.php
|
||||
case 'white': $color = '#1c1b1b'; $grid = '#e3e3e3'; $c0 = '#a8a8a8'; $c1 = '#dcdcdc'; break;
|
||||
case 'black': $color = '#f2f2f2'; $grid = '#2b2b2b'; $c0 = '#787878'; $c1 = '#444444'; break;
|
||||
case 'azure': $color = '#606e7f'; $grid = '#f3f0f4'; $c0 = '#606e7f'; $c1 = '#eceaec'; break;
|
||||
@@ -1563,7 +1562,7 @@ var sortableHelper = function(e,ui){
|
||||
function LockButton() {
|
||||
if ($.cookie('lockbutton') == null) {
|
||||
$.cookie('lockbutton','lockbutton');
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
$('div.nav-item.LockButton a').prop('title',"_(Lock sortable items)_");
|
||||
$('div.nav-item.LockButton b').removeClass('icon-u-lock green-text').addClass('icon-u-lock-open red-text');
|
||||
<?endif;?>
|
||||
@@ -1595,7 +1594,7 @@ function LockButton() {
|
||||
}});
|
||||
} else {
|
||||
$.removeCookie('lockbutton');
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
$('div.nav-item.LockButton a').prop('title',"_(Unlock sortable items)_");
|
||||
$('div.nav-item.LockButton b').removeClass('icon-u-lock-open red-text').addClass('icon-u-lock green-text');
|
||||
<?endif;?>
|
||||
|
||||
@@ -3,7 +3,7 @@ Title="Display Settings"
|
||||
Icon="icon-display"
|
||||
Tag="desktop"
|
||||
---
|
||||
<?PHP
|
||||
<?php
|
||||
/* Copyright 2005-2025, Lime Technology
|
||||
* Copyright 2012-2025, Bergware International.
|
||||
*
|
||||
@@ -15,7 +15,7 @@ Tag="desktop"
|
||||
* all copies or substantial portions of the Software.
|
||||
*/
|
||||
?>
|
||||
<?
|
||||
<?php
|
||||
$void = "<img src='/webGui/images/banner.png' id='image' width='330' height='30' onclick='$("#drop").click()' style='cursor:pointer' title='_(Click to select PNG file)_'>";
|
||||
$icon = "<i class='fa fa-trash top' title='_(Restore default image)_' onclick='restore()'></i>";
|
||||
$plugins = '/var/log/plugins';
|
||||
@@ -129,8 +129,8 @@ $(function() {
|
||||
|
||||
_(Display width)_:
|
||||
: <select name="width">
|
||||
<?=mk_option($display['width'], "",_('Boxed'))?>
|
||||
<?=mk_option($display['width'], "1",_('Unlimited'))?>
|
||||
<?=mk_option($display['width'], "", _('Boxed'))?>
|
||||
<?=mk_option($display['width'], "1", _('Unlimited'))?>
|
||||
</select>
|
||||
|
||||
:display_width_help:
|
||||
@@ -148,124 +148,123 @@ _(Language)_:
|
||||
|
||||
_(Font size)_:
|
||||
: <select name="font" id='font'>
|
||||
<?=mk_option($display['font'], "50",_('Very small'))?>
|
||||
<?=mk_option($display['font'], "56.25",_('Small'))?>
|
||||
<?=mk_option($display['font'], "",_('Normal'))?>
|
||||
<?=mk_option($display['font'], "68.75",_('Large'))?>
|
||||
<?=mk_option($display['font'], "75",_('Very large'))?>
|
||||
<?=mk_option($display['font'], "80",_('Huge'))?>
|
||||
<?=mk_option($display['font'], "50", _('Very small'))?>
|
||||
<?=mk_option($display['font'], "56.25", _('Small'))?>
|
||||
<?=mk_option($display['font'], "", _('Normal'))?>
|
||||
<?=mk_option($display['font'], "68.75", _('Large'))?>
|
||||
<?=mk_option($display['font'], "75", _('Very large'))?>
|
||||
<?=mk_option($display['font'], "80", _('Huge'))?>
|
||||
</select>
|
||||
|
||||
:display_font_size_help:
|
||||
|
||||
_(Terminal font size)_:
|
||||
: <select name="tty" id="tty">
|
||||
<?=mk_option($display['tty'], "11",_('Very small'))?>
|
||||
<?=mk_option($display['tty'], "13",_('Small'))?>
|
||||
<?=mk_option($display['tty'], "15",_('Normal'))?>
|
||||
<?=mk_option($display['tty'], "17",_('Large'))?>
|
||||
<?=mk_option($display['tty'], "19",_('Very large'))?>
|
||||
<?=mk_option($display['tty'], "21",_('Huge'))?>
|
||||
<?=mk_option($display['tty'], "11", _('Very small'))?>
|
||||
<?=mk_option($display['tty'], "13", _('Small'))?>
|
||||
<?=mk_option($display['tty'], "15", _('Normal'))?>
|
||||
<?=mk_option($display['tty'], "17", _('Large'))?>
|
||||
<?=mk_option($display['tty'], "19", _('Very large'))?>
|
||||
<?=mk_option($display['tty'], "21", _('Huge'))?>
|
||||
</select>
|
||||
|
||||
:display_tty_size_help:
|
||||
|
||||
_(Number format)_:
|
||||
: <select name="number">
|
||||
<?=mk_option($display['number'], ".,",_('[D] dot : [G] comma'))?>
|
||||
<?=mk_option($display['number'], ". ",_('[D] dot : [G] space'))?>
|
||||
<?=mk_option($display['number'], ".",_('[D] dot : [G] none'))?>
|
||||
<?=mk_option($display['number'], ",.",_('[D] comma : [G] dot'))?>
|
||||
<?=mk_option($display['number'], ", ",_('[D] comma : [G] space'))?>
|
||||
<?=mk_option($display['number'], ",",_('[D] comma : [G] none'))?>
|
||||
<?=mk_option($display['number'], ".,", _('[D] dot : [G] comma'))?>
|
||||
<?=mk_option($display['number'], ". ", _('[D] dot : [G] space'))?>
|
||||
<?=mk_option($display['number'], ".", _('[D] dot : [G] none'))?>
|
||||
<?=mk_option($display['number'], ",.", _('[D] comma : [G] dot'))?>
|
||||
<?=mk_option($display['number'], ", ", _('[D] comma : [G] space'))?>
|
||||
<?=mk_option($display['number'], ",", _('[D] comma : [G] none'))?>
|
||||
</select>
|
||||
|
||||
_(Number scaling)_:
|
||||
: <select name="scale">
|
||||
<?=mk_option($display['scale'], "-1",_('Automatic'))?>
|
||||
<?=mk_option($display['scale'], "0",_('Disabled'))?>
|
||||
<?=mk_option($display['scale'], "1",_('KB'))?>
|
||||
<?=mk_option($display['scale'], "2",_('MB'))?>
|
||||
<?=mk_option($display['scale'], "3",_('GB'))?>
|
||||
<?=mk_option($display['scale'], "4",_('TB'))?>
|
||||
<?=mk_option($display['scale'], "5",_('PB'))?>
|
||||
<?=mk_option($display['scale'], "-1", _('Automatic'))?>
|
||||
<?=mk_option($display['scale'], "0", _('Disabled'))?>
|
||||
<?=mk_option($display['scale'], "1", _('KB'))?>
|
||||
<?=mk_option($display['scale'], "2", _('MB'))?>
|
||||
<?=mk_option($display['scale'], "3", _('GB'))?>
|
||||
<?=mk_option($display['scale'], "4", _('TB'))?>
|
||||
<?=mk_option($display['scale'], "5", _('PB'))?>
|
||||
</select>
|
||||
|
||||
_(Page view)_:
|
||||
: <select name="tabs">
|
||||
<?=mk_option($display['tabs'], "0",_('Tabbed'))?>
|
||||
<?=mk_option($display['tabs'], "1",_('Non-tabbed'))?>
|
||||
<?=mk_option($display['tabs'], "0", _('Tabbed'))?>
|
||||
<?=mk_option($display['tabs'], "1", _('Non-tabbed'))?>
|
||||
</select>
|
||||
|
||||
:display_page_view_help:
|
||||
|
||||
_(Placement of Users menu)_:
|
||||
: <select name="users">
|
||||
<?=mk_option($display['users'], "Tasks:3",_('Header menu'))?>
|
||||
<?=mk_option($display['users'], "UserPreferences",_('Settings menu'))?>
|
||||
<?=mk_option($display['users'], "Tasks:3", _('Header menu'))?>
|
||||
<?=mk_option($display['users'], "UserPreferences", _('Settings menu'))?>
|
||||
</select>
|
||||
|
||||
:display_users_menu_help:
|
||||
|
||||
_(Listing height)_:
|
||||
: <select name="resize">
|
||||
<?=mk_option($display['resize'], "0",_('Automatic'))?>
|
||||
<?=mk_option($display['resize'], "1",_('Fixed'))?>
|
||||
<?=mk_option($display['resize'], "0", _('Automatic'))?>
|
||||
<?=mk_option($display['resize'], "1", _('Fixed'))?>
|
||||
</select>
|
||||
|
||||
:display_listing_height_help:
|
||||
|
||||
_(Display device name)_:
|
||||
: <select name="raw">
|
||||
<?=mk_option($display['raw'], "",_('Normalized'))?>
|
||||
<?=mk_option($display['raw'], "1",_('Raw'))?>
|
||||
<?=mk_option($display['raw'], "", _('Normalized'))?>
|
||||
<?=mk_option($display['raw'], "1", _('Raw'))?>
|
||||
</select>
|
||||
|
||||
_(Display world-wide-name in device ID)_:
|
||||
: <select name="wwn">
|
||||
<?=mk_option($display['wwn'], "0",_('Disabled'))?>
|
||||
<?=mk_option($display['wwn'], "1",_('Automatic'))?>
|
||||
<?=mk_option($display['wwn'], "0", _('Disabled'))?>
|
||||
<?=mk_option($display['wwn'], "1", _('Automatic'))?>
|
||||
</select>
|
||||
|
||||
:display_wwn_device_id_help:
|
||||
|
||||
_(Display array totals)_:
|
||||
: <select name="total">
|
||||
<?=mk_option($display['total'], "0",_('No'))?>
|
||||
<?=mk_option($display['total'], "1",_('Yes'))?>
|
||||
<?=mk_option($display['total'], "0", _('No'))?>
|
||||
<?=mk_option($display['total'], "1", _('Yes'))?>
|
||||
</select>
|
||||
|
||||
_(Show array utilization indicator)_:
|
||||
: <select name="usage">
|
||||
<?=mk_option($display['usage'], "0",_('No'))?>
|
||||
<?=mk_option($display['usage'], "1",_('Yes'))?>
|
||||
<?=mk_option($display['usage'], "0", _('No'))?>
|
||||
<?=mk_option($display['usage'], "1", _('Yes'))?>
|
||||
</select>
|
||||
|
||||
_(Temperature unit)_:
|
||||
: <select name="unit">
|
||||
<?=mk_option($display['unit'], "C",_('Celsius'))?>
|
||||
<?=mk_option($display['unit'], "F",_('Fahrenheit'))?>
|
||||
<?=mk_option($display['unit'], "C", _('Celsius'))?>
|
||||
<?=mk_option($display['unit'], "F", _('Fahrenheit'))?>
|
||||
</select>
|
||||
|
||||
:display_temperature_unit_help:
|
||||
|
||||
_(Dynamix color theme)_:
|
||||
: <select name="theme">
|
||||
<?foreach (glob("$docroot/webGui/styles/themes/*.css") as $themes):?>
|
||||
<?$theme = basename($themes, '.css');?>
|
||||
<?=mk_option($display['theme'], $theme, _(ucfirst($theme)))?>
|
||||
<?endforeach;?>
|
||||
<?foreach ($themeHelper->getThemesFromFileSystem($docroot) as $guiTheme):?>
|
||||
<?=mk_option($themeHelper->getThemeName(), $guiTheme, _(ucfirst($guiTheme)))?>
|
||||
<?endforeach; // $themeHelper set in DefaultPageLayout.php ?>
|
||||
</select>
|
||||
|
||||
_(Used / Free columns)_:
|
||||
: <select name="text">
|
||||
<?=mk_option($display['text'], "0",_('Text'))?>
|
||||
<?=mk_option($display['text'], "1",_('Bar (gray)'))?>
|
||||
<?=mk_option($display['text'], "2",_('Bar (color)'))?>
|
||||
<?=mk_option($display['text'], "10",_('Text - Bar (gray)'))?>
|
||||
<?=mk_option($display['text'], "20",_('Text - Bar (color)'))?>
|
||||
<?=mk_option($display['text'], "11",_('Bar (gray) - Text'))?>
|
||||
<?=mk_option($display['text'], "21",_('Bar (color) - Text'))?>
|
||||
<?=mk_option($display['text'], "0", _('Text'))?>
|
||||
<?=mk_option($display['text'], "1", _('Bar (gray)'))?>
|
||||
<?=mk_option($display['text'], "2", _('Bar (color)'))?>
|
||||
<?=mk_option($display['text'], "10", _('Text - Bar (gray)'))?>
|
||||
<?=mk_option($display['text'], "20", _('Text - Bar (color)'))?>
|
||||
<?=mk_option($display['text'], "11", _('Bar (gray) - Text'))?>
|
||||
<?=mk_option($display['text'], "21", _('Bar (color) - Text'))?>
|
||||
</select>
|
||||
|
||||
_(Header custom text color)_:
|
||||
@@ -283,14 +282,14 @@ _(Header custom background color)_:
|
||||
|
||||
_(Header show description)_:
|
||||
: <select name="headerdescription">
|
||||
<?=mk_option($display['headerdescription'], "yes",_('Yes'))?>
|
||||
<?=mk_option($display['headerdescription'], "no",_('No'))?>
|
||||
<?=mk_option($display['headerdescription'], "yes", _('Yes'))?>
|
||||
<?=mk_option($display['headerdescription'], "no", _('No'))?>
|
||||
</select>
|
||||
|
||||
_(Show banner)_:
|
||||
: <select name="banner" onchange="presetBanner(this.form)">
|
||||
<?=mk_option($display['banner'], "",_('No'))?>
|
||||
<?=mk_option($display['banner'], "image",_('Yes'))?>
|
||||
<?=mk_option($display['banner'], "", _('No'))?>
|
||||
<?=mk_option($display['banner'], "image", _('Yes'))?>
|
||||
</select>
|
||||
|
||||
<div class="js-bannerSettings" markdown="1" style="display:none">
|
||||
@@ -310,23 +309,23 @@ _(Custom banner)_:
|
||||
<div class="js-bannerSettings" markdown="1" style="display:none">
|
||||
_(Show banner background color fade)_:
|
||||
: <select name="showBannerGradient">
|
||||
<?=mk_option($display['showBannerGradient'], "no",_('No'))?>
|
||||
<?=mk_option($display['showBannerGradient'], "yes",_('Yes'))?>
|
||||
<?=mk_option($display['showBannerGradient'], "no", _('No'))?>
|
||||
<?=mk_option($display['showBannerGradient'], "yes", _('Yes'))?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
_(Favorites enabled)_:
|
||||
: <select name="favorites">
|
||||
<?=mk_option($display['favorites'], "yes",_('Yes'))?>
|
||||
<?=mk_option($display['favorites'], "no",_('No'))?>
|
||||
<?=mk_option($display['favorites'], "yes", _('Yes'))?>
|
||||
<?=mk_option($display['favorites'], "no", _('No'))?>
|
||||
</select>
|
||||
|
||||
:display_favorites_enabled_help:
|
||||
|
||||
_(Allow realtime updates on inactive browsers)_:
|
||||
: <select name='liveUpdate'>
|
||||
<?=mk_option($display['liveUpdate'],"no",_('No'))?>
|
||||
<?=mk_option($display['liveUpdate'],"yes",_('Yes'))?>
|
||||
<?=mk_option($display['liveUpdate'], "no", _('No'))?>
|
||||
<?=mk_option($display['liveUpdate'], "yes", _('Yes'))?>
|
||||
</select>
|
||||
|
||||
<input type="submit" name="#default" value="_(Default)_" onclick="filename='reset'">
|
||||
|
||||
@@ -163,7 +163,10 @@ $myFile = "case-model.cfg";
|
||||
$myCase = file_exists("$boot/$myFile") ? file_get_contents("$boot/$myFile") : false;
|
||||
|
||||
extract(parse_plugin_cfg('dynamix', true));
|
||||
$theme_dark = in_array($display['theme'], ['black', 'gray']);
|
||||
|
||||
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
|
||||
$themeHelper = new ThemeHelper($display['theme']);
|
||||
$isDarkTheme = $themeHelper->isDarkTheme();
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -201,8 +204,8 @@ $theme_dark = in_array($display['theme'], ['black', 'gray']);
|
||||
/
|
||||
/************************/
|
||||
body {
|
||||
background: <?=$theme_dark ? '#1C1B1B' : '#F2F2F2'?>;
|
||||
color: <?=$theme_dark ? '#fff' : '#1c1b1b'?>;
|
||||
background: <?=$isDarkTheme?'#1C1B1B':'#F2F2F2'?>;
|
||||
color: <?=$isDarkTheme?'#fff':'#1c1b1b'?>;
|
||||
font-family: clear-sans, sans-serif;
|
||||
font-size: .875rem;
|
||||
padding: 0;
|
||||
@@ -286,7 +289,7 @@ $theme_dark = in_array($display['theme'], ['black', 'gray']);
|
||||
width: 500px;
|
||||
margin: 6rem auto;
|
||||
border-radius: 10px;
|
||||
background: <?=$theme_dark ? '#2B2A29' : '#fff'?>;
|
||||
background: <?=$isDarkTheme?'#2B2A29':'#fff'?>;
|
||||
}
|
||||
#login::after {
|
||||
content: "";
|
||||
@@ -378,7 +381,7 @@ $theme_dark = in_array($display['theme'], ['black', 'gray']);
|
||||
/************************/
|
||||
@media (max-width: 500px) {
|
||||
body {
|
||||
background: <?=$theme_dark ? '#2B2A29' : '#fff'?>;
|
||||
background: <?=$isDarkTheme?'#2B2A29':'#fff'?>;
|
||||
}
|
||||
[type=email], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], textarea {
|
||||
font-size: 16px; /* This prevents the mobile browser from zooming in on the input-field. */
|
||||
|
||||
@@ -40,7 +40,9 @@ if (!empty($_POST['password']) && !empty($_POST['confirmPassword'])) {
|
||||
return $POST_ERROR = $VALIDATION_MESSAGES['saveError'];
|
||||
}
|
||||
|
||||
$THEME_DARK = in_array($display['theme'],['black','gray']);
|
||||
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
|
||||
$themeHelper = new ThemeHelper($display['theme']);
|
||||
$isDarkTheme = $themeHelper->isDarkTheme();
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@@ -78,13 +80,13 @@ $THEME_DARK = in_array($display['theme'],['black','gray']);
|
||||
/
|
||||
/************************/
|
||||
:root {
|
||||
--body-bg: <?= $THEME_DARK ? '#1c1b1b' : '#f2f2f2' ?>;
|
||||
--body-text-color: <?= $THEME_DARK ? '#fff' : '#1c1b1b' ?>;
|
||||
--section-bg: <?= $THEME_DARK ? '#1c1b1b' : '#f2f2f2' ?>;
|
||||
--shadow: <?= $THEME_DARK ? 'rgba(115,115,115,.12)' : 'rgba(0,0,0,.12)' ?>;
|
||||
--form-text-color: <?= $THEME_DARK ? '#f2f2f2' : '#1c1b1b' ?>;
|
||||
--form-bg-color: <?= $THEME_DARK ? 'rgba(26,26,26,0.4)' : '#f2f2f2' ?>;
|
||||
--form-border-color: <?= $THEME_DARK ? '#2B2A29' : '#ccc' ?>;
|
||||
--body-bg: <?= $isDarkTheme ? '#1c1b1b' : '#f2f2f2' ?>;
|
||||
--body-text-color: <?= $isDarkTheme ? '#fff' : '#1c1b1b' ?>;
|
||||
--section-bg: <?= $isDarkTheme ? '#1c1b1b' : '#f2f2f2' ?>;
|
||||
--shadow: <?= $isDarkTheme ? 'rgba(115,115,115,.12)' : 'rgba(0,0,0,.12)' ?>;
|
||||
--form-text-color: <?= $isDarkTheme ? '#f2f2f2' : '#1c1b1b' ?>;
|
||||
--form-bg-color: <?= $isDarkTheme ? 'rgba(26,26,26,0.4)' : '#f2f2f2' ?>;
|
||||
--form-border-color: <?= $isDarkTheme ? '#2B2A29' : '#ccc' ?>;
|
||||
}
|
||||
body {
|
||||
background: var(--body-bg);
|
||||
|
||||
@@ -24,13 +24,10 @@ $var = parse_ini_file("/var/local/emhttp/var.ini");
|
||||
/**
|
||||
* Just like DefaultPageLayout.php
|
||||
*/
|
||||
$theme = strtok($display['theme'],'-');
|
||||
$themes1 = in_array($theme,['black','white']);
|
||||
$themes2 = in_array($theme,['gray','azure']);
|
||||
$themeHtmlClass = "Theme--$theme";
|
||||
if ($themes2) {
|
||||
$themeHtmlClass .= " Theme--sidebar";
|
||||
}
|
||||
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
|
||||
$themeHelper = new ThemeHelper($display['theme']);
|
||||
$themeName = $themeHelper->getThemeName();
|
||||
$themeHtmlClass = $themeHelper->getThemeHtmlClass();
|
||||
?>
|
||||
<!DOCTYPE HTML>
|
||||
<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>" class="<?= $themeHtmlClass ?>">
|
||||
@@ -46,7 +43,7 @@ if ($themes2) {
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$themeName}.css")?>">
|
||||
|
||||
<style>
|
||||
.boot-title {
|
||||
|
||||
@@ -11,25 +11,24 @@
|
||||
*/
|
||||
?>
|
||||
<?
|
||||
require_once "$docroot/plugins/dynamix/include/ThemeHelper.php";
|
||||
$themeHelper = new ThemeHelper($display['theme']);
|
||||
$theme = $themeHelper->getThemeName(); // keep $theme, $themes1, $themes2 vars for plugin backwards compatibility for the time being
|
||||
$themes1 = $themeHelper->isTopNavTheme();
|
||||
$themes2 = $themeHelper->isSidebarTheme();
|
||||
$themeHtmlClass = $themeHelper->getThemeHtmlClass();
|
||||
$themeHelper->updateDockerLogColor($docroot);
|
||||
|
||||
$display['font'] = filter_var($_COOKIE['fontSize'] ?? $display['font'] ?? '',FILTER_SANITIZE_NUMBER_FLOAT,FILTER_FLAG_ALLOW_FRACTION);
|
||||
$theme = strtok($display['theme'],'-');
|
||||
|
||||
$header = $display['header'];
|
||||
$backgnd = $display['background'];
|
||||
$themes1 = in_array($theme,['black','white']);
|
||||
$themes2 = in_array($theme,['gray','azure']);
|
||||
$themeHtmlClass = "Theme--$theme";
|
||||
if ($themes2) {
|
||||
$themeHtmlClass .= " Theme--sidebar";
|
||||
}
|
||||
|
||||
$config = "/boot/config";
|
||||
$entity = $notify['entity'] & 1 == 1;
|
||||
$alerts = '/tmp/plugins/my_alerts.txt';
|
||||
$wlan0 = file_exists('/sys/class/net/wlan0');
|
||||
|
||||
// adjust the text color in docker log window
|
||||
$fgcolor = in_array($theme,['white','azure']) ? '#1c1c1c' : '#f2f2f2';
|
||||
exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:$fgcolor;/' $docroot/plugins/dynamix.docker.manager/log.htm >/dev/null &");
|
||||
|
||||
function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text\n",str_repeat("#",strlen($text)),"\n-->\n";}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
@@ -54,17 +53,18 @@ function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-dynamix.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix/styles/dynamix-jquery-ui.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$theme}.css")?>">
|
||||
|
||||
<style>
|
||||
<?if (empty($display['width'])):?>
|
||||
@media (max-width:1280px){#displaybox{min-width:1280px;max-width:1280px;margin:0}}
|
||||
@media (min-width:1281px){#displaybox{min-width:1280px;max-width:1920px;margin:0 <?=$themes1?'10px':'auto'?>}}
|
||||
@media (min-width:1281px){#displaybox{min-width:1280px;max-width:1920px;margin:0 <?=$themeHelper->isTopNavTheme()?'10px':'auto'?>}}
|
||||
@media (min-width:1921px){#displaybox{min-width:1280px;max-width:1920px;margin:0 auto}}
|
||||
<?else:?>
|
||||
@media (max-width:1280px){#displaybox{min-width:1280px;margin:0}}
|
||||
@media (min-width:1281px){#displaybox{min-width:1280px;margin:0 <?=$themes1?'10px':'auto'?>}}
|
||||
@media (min-width:1921px){#displaybox{min-width:1280px;margin:0 <?=$themes1?'20px':'auto'?>}}
|
||||
@media (min-width:1281px){#displaybox{min-width:1280px;margin:0 <?=$themeHelper->isTopNavTheme()?'10px':'auto'?>}}
|
||||
@media (min-width:1921px){#displaybox{min-width:1280px;margin:0 <?=$themeHelper->isTopNavTheme()?'20px':'auto'?>}}
|
||||
<?endif;?>
|
||||
|
||||
<?if ($display['font']):?>
|
||||
@@ -78,7 +78,7 @@ html{font-size:<?=$display['font']?>%}
|
||||
|
||||
<?if ($backgnd):?>
|
||||
#header{background-color:#<?=$backgnd?>}
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
.nav-tile{background-color:#<?=$backgnd?>}
|
||||
<?if ($header):?>
|
||||
.nav-item a,.nav-user a{color:#<?=$header?>}
|
||||
@@ -97,7 +97,7 @@ $banner = "$config/plugins/dynamix/banner.png";
|
||||
echo "#header.image{background-image:url(";
|
||||
echo file_exists($banner) ? autov($banner) : '/webGui/images/banner.png';
|
||||
echo ")}\n";
|
||||
if ($themes2) {
|
||||
if ($themeHelper->isSidebarTheme()) {
|
||||
foreach ($tasks as $button) if (isset($button['Code'])) echo ".nav-item a[href='/{$button['name']}']:before{content:'\\{$button['Code']}'}\n";
|
||||
echo ".nav-item.LockButton a:before{content:'\\e955'}\n";
|
||||
foreach ($buttons as $button) if (isset($button['Code'])) echo ".nav-item.{$button['name']} a:before{content:'\\{$button['Code']}'}\n";
|
||||
@@ -711,7 +711,7 @@ $.ajaxPrefilter(function(s, orig, xhr){
|
||||
<?
|
||||
// Build page menus
|
||||
echo "<div id='menu'>";
|
||||
if ($themes2) echo "<div id='nav-block'>";
|
||||
if ($themeHelper->isSidebarTheme()) echo "<div id='nav-block'>";
|
||||
echo "<div class='nav-tile'>";
|
||||
foreach ($tasks as $button) {
|
||||
$page = $button['name'];
|
||||
@@ -725,7 +725,7 @@ unset($tasks);
|
||||
echo "</div>";
|
||||
echo "<div class='nav-tile right'>";
|
||||
if (isset($myPage['Lock'])) {
|
||||
$title = $themes2 ? "" : _('Unlock sortable items');
|
||||
$title = $themeHelper->isSidebarTheme() ? "" : _('Unlock sortable items');
|
||||
echo "<div class='nav-item LockButton util'><a href='#' class='hand' onclick='LockButton();return false;' title=\"$title\"><b class='icon-u-lock system green-text'></b><span>"._('Unlock sortable items')."</span></a></div>";
|
||||
}
|
||||
if ($display['usage']) my_usage();
|
||||
@@ -741,7 +741,7 @@ foreach ($buttons as $button) {
|
||||
if (substr($icon,0,3)!='fa-') $icon = "fa-$icon";
|
||||
$icon = "<b class='fa $icon system'></b>";
|
||||
}
|
||||
$title = $themes2 ? "" : " title=\""._($button['Title'])."\"";
|
||||
$title = $themeHelper->isSidebarTheme() ? "" : " title=\""._($button['Title'])."\"";
|
||||
echo "<div class='nav-item {$button['name']} util'><a href='"._var($button,'Href','#')."' onclick='{$button['name']}();return false;'{$title}>$icon<span>"._($button['Title'])."</span></a></div>";
|
||||
} else {
|
||||
echo "<div class='{$button['Link']}'></div>";
|
||||
@@ -752,14 +752,14 @@ foreach ($buttons as $button) {
|
||||
|
||||
echo "<div class='nav-user show'><a id='board' href='#' class='hand'><b id='bell' class='icon-u-bell system'></b></a></div>";
|
||||
|
||||
if ($themes2) echo "</div>";
|
||||
if ($themeHelper->isSidebarTheme()) echo "</div>";
|
||||
echo "</div></div>";
|
||||
foreach ($buttons as $button) {
|
||||
annotate($button['file']);
|
||||
// include page specific stylesheets (if existing)
|
||||
$css = "/{$button['root']}/sheets/{$button['name']}";
|
||||
$css_stock = "$css.css";
|
||||
$css_theme = "$css-$theme.css";
|
||||
$css_theme = "$css-$theme.css"; // @todo add syslog for deprecation notice
|
||||
if (is_file($docroot.$css_stock)) echo '<link type="text/css" rel="stylesheet" href="',autov($css_stock),'">',"\n";
|
||||
if (is_file($docroot.$css_theme)) echo '<link type="text/css" rel="stylesheet" href="',autov($css_theme),'">',"\n";
|
||||
// create page content
|
||||
@@ -1114,7 +1114,7 @@ $(window).scroll(function() {
|
||||
} else {
|
||||
$('.back_to_top').fadeOut(scrollDuration);
|
||||
}
|
||||
<?if ($themes1):?>
|
||||
<?if ($themeHelper->isTopNavTheme()):?>
|
||||
var top = $('div#header').height()-1; // header height has 1 extra pixel to cover overlap
|
||||
$('div#menu').css($(this).scrollTop() > top ? {position:'fixed',top:'0'} : {position:'absolute',top:top+'px'});
|
||||
// banner
|
||||
|
||||
120
emhttp/plugins/dynamix/include/ThemeHelper.php
Normal file
120
emhttp/plugins/dynamix/include/ThemeHelper.php
Normal file
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
class ThemeHelper {
|
||||
/**
|
||||
* @todo instead of hardcoding the themes, we should get them from the themes directory and extract the text and background colors from the css file
|
||||
* Ideally we don't need to be hardcoding any values here, but it's a quick fix to get the themes working with the current codebase
|
||||
*/
|
||||
private const THEME_BLACK = 'black';
|
||||
private const THEME_WHITE = 'white';
|
||||
private const THEME_GRAY = 'gray';
|
||||
private const THEME_AZURE = 'azure';
|
||||
private const COLOR_BLACK = '#1c1c1c';
|
||||
private const COLOR_WHITE = '#f2f2f2';
|
||||
|
||||
private const TOP_NAV_THEMES = [self::THEME_BLACK, self::THEME_WHITE];
|
||||
private const SIDEBAR_THEMES = [self::THEME_GRAY, self::THEME_AZURE];
|
||||
|
||||
private const DARK_THEMES = [self::THEME_BLACK, self::THEME_GRAY];
|
||||
private const LIGHT_THEMES = [self::THEME_WHITE, self::THEME_AZURE];
|
||||
|
||||
private const FGCOLORS = [
|
||||
self::THEME_BLACK => self::COLOR_BLACK,
|
||||
self::THEME_WHITE => self::COLOR_BLACK,
|
||||
self::THEME_GRAY => self::COLOR_WHITE,
|
||||
self::THEME_AZURE => self::COLOR_WHITE
|
||||
];
|
||||
|
||||
private const INIT_ERROR = 'ThemeHelper not initialized. Call initWithCurrentThemeSetting() first.';
|
||||
|
||||
private string $themeName;
|
||||
private bool $topNavTheme;
|
||||
private bool $sidebarTheme;
|
||||
private bool $darkTheme;
|
||||
private bool $lightTheme;
|
||||
private string $themeHtmlClass;
|
||||
private string $fgcolor;
|
||||
|
||||
/**
|
||||
* Constructor for ThemeHelper
|
||||
*
|
||||
* @param string|null $theme The theme name (optional)
|
||||
*/
|
||||
public function __construct(?string $theme = null) {
|
||||
if ($theme === null) {
|
||||
throw new \RuntimeException(self::INIT_ERROR);
|
||||
}
|
||||
$this->initWithCurrentThemeSetting($theme);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize theme properties
|
||||
*
|
||||
* @param string $theme The theme name
|
||||
* @return void
|
||||
*/
|
||||
public function initWithCurrentThemeSetting(string $theme): void {
|
||||
$this->themeName = strtok($theme, '-');
|
||||
|
||||
$this->topNavTheme = in_array($this->themeName, self::TOP_NAV_THEMES);
|
||||
$this->sidebarTheme = in_array($this->themeName, self::SIDEBAR_THEMES);
|
||||
$this->darkTheme = in_array($this->themeName, self::DARK_THEMES);
|
||||
$this->lightTheme = in_array($this->themeName, self::LIGHT_THEMES);
|
||||
|
||||
$this->themeHtmlClass = "Theme--{$this->themeName}";
|
||||
if ($this->sidebarTheme) {
|
||||
$this->themeHtmlClass .= " Theme--sidebar";
|
||||
}
|
||||
|
||||
$this->fgcolor = self::FGCOLORS[$this->themeName] ?? self::COLOR_BLACK;
|
||||
}
|
||||
|
||||
public function getThemeName(): string {
|
||||
return $this->themeName;
|
||||
}
|
||||
|
||||
public function isTopNavTheme(): bool {
|
||||
return $this->topNavTheme;
|
||||
}
|
||||
|
||||
public function isSidebarTheme(): bool {
|
||||
return $this->sidebarTheme;
|
||||
}
|
||||
|
||||
public function isDarkTheme(): bool {
|
||||
return $this->darkTheme;
|
||||
}
|
||||
|
||||
public function isLightTheme(): bool {
|
||||
return $this->lightTheme;
|
||||
}
|
||||
|
||||
public function getThemeHtmlClass(): string {
|
||||
return $this->themeHtmlClass;
|
||||
}
|
||||
|
||||
public function getFgColor(): string {
|
||||
return $this->fgcolor;
|
||||
}
|
||||
|
||||
public function updateDockerLogColor(string $docroot): void {
|
||||
exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:{$this->fgcolor};/' $docroot/plugins/dynamix.docker.manager/log.htm >/dev/null &");
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all available theme names from the themes directory
|
||||
*
|
||||
* @param string $docroot The document root path
|
||||
* @return array Array of theme names
|
||||
*/
|
||||
public static function getThemesFromFileSystem(string $docroot): array {
|
||||
$themes = [];
|
||||
$themeFiles = glob("$docroot/webGui/styles/themes/*.css");
|
||||
|
||||
foreach ($themeFiles as $themeFile) {
|
||||
$themeName = basename($themeFile, '.css');
|
||||
$themes[] = $themeName;
|
||||
}
|
||||
|
||||
return $themes;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user