Skip to content
This repository has been archived by the owner on Aug 27, 2022. It is now read-only.

Commit

Permalink
ui: rework UI style handling, make UI and button style independent
Browse files Browse the repository at this point in the history 
Change-Id: I6a12c936f2fdea4d0571778fa5e9fb7a0fbc3587
  • Loading branch information
@andi34
andi34 committed Jul 7, 2022
1 parent 6f905eb commit 42964e7
Show file tree
Hide file tree
Showing 53 changed files with 365 additions and 404 deletions.
20 changes: 12 additions & 8 deletions admin/debugpanel.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
header('location: ../login');
exit();
}

$shapeClass = 'shape--' . $config['ui']['style'];
$btnShape = 'shape--' . $config['ui']['button'];
$btnClass = 'adminnavlistelement ' . $btnShape . ' noborder';
?>
<!DOCTYPE html>
<html>
Expand Down Expand Up @@ -89,13 +93,13 @@ function html_src_indent($num)
echo '<ul class="adminnavlist" id="navlist">';
html_src_indent(++$indent);

echo '<li><a class="adminnavlistelement" href="#myconfig" id="nav-myconfig"><div><span data-i18n="myconfig">myconfig</span></div></a></li>';
echo '<li><a class="adminnavlistelement" href="#remotebuzzerlog" id="nav-remotebuzzerlog"><div><span data-i18n="remotebuzzer">remotebuzzer</span></div></a></li>';
echo '<li><a class="adminnavlistelement" href="#synctodrivelog" id="nav-synctodrivelog"><div><span data-i18n="synctodrive">synctodrive</span></div></a></li>';
echo '<li><a class="adminnavlistelement" href="#devlog" id="nav-devlog"><div><span data-i18n="devlog">devlog</span></div></a></li>';
echo '<li><a class="adminnavlistelement" href="#serverprocesses" id="nav-serverprocesses"><div><span data-i18n="serverprocesses">serverprocesses</span></div></a></li>';
echo '<li><a class="adminnavlistelement" href="#bootconfig" id="nav-bootconfig"><div><span data-i18n="bootconfig">bootconfig</span></div></a></li>';
echo '<li><a class="adminnavlistelement" href="#githead" id="nav-githead"><div><span data-i18n="githead">githead</span></div></a></li>';
echo '<li><a class="'. $btnClass .'" href="#myconfig" id="nav-myconfig"><div><span data-i18n="myconfig">myconfig</span></div></a></li>';
echo '<li><a class="'. $btnClass .'" href="#remotebuzzerlog" id="nav-remotebuzzerlog"><div><span data-i18n="remotebuzzer">remotebuzzer</span></div></a></li>';
echo '<li><a class="'. $btnClass .'" href="#synctodrivelog" id="nav-synctodrivelog"><div><span data-i18n="synctodrive">synctodrive</span></div></a></li>';
echo '<li><a class="'. $btnClass .'" href="#devlog" id="nav-devlog"><div><span data-i18n="devlog">devlog</span></div></a></li>';
echo '<li><a class="'. $btnClass .'" href="#serverprocesses" id="nav-serverprocesses"><div><span data-i18n="serverprocesses">serverprocesses</span></div></a></li>';
echo '<li><a class="'. $btnClass .'" href="#bootconfig" id="nav-bootconfig"><div><span data-i18n="bootconfig">bootconfig</span></div></a></li>';
echo '<li><a class="'. $btnClass .'" href="#githead" id="nav-githead"><div><span data-i18n="githead">githead</span></div></a></li>';

html_src_indent(--$indent);
echo '</ul>';
Expand All @@ -104,7 +108,7 @@ function html_src_indent($num)
<!-- Settings page content -->
<form autocomplete="off">
<div class="admincontent" id="admincontentpage">
<div class="debugcontent">
<div class="debugcontent <?php echo $shapeClass; ?>">
</div>
</div>
<script src="../node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
Expand Down
11 changes: 5 additions & 6 deletions admin/diskusage.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
exit();
}

$btnShape = 'shape--' . $config['ui']['button'];
$shapeClass = 'shape--' . $config['ui']['style'];
?>

<!DOCTYPE html>
Expand Down Expand Up @@ -43,19 +45,16 @@
<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css" />
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="../resources/css/login.css" />
<?php if ($config['ui']['rounded_corners']): ?>
<link rel="stylesheet" href="../resources/css/rounded.css" />
<?php endif; ?>
<?php if (is_file("../private/overrides.css")): ?>
<link rel="stylesheet" href="../private/overrides.css" />
<?php endif; ?>
</head>

<body class="loginbody">
<div class="login-panel">
<div class="login-panel <?php echo $shapeClass; ?>">
<h2><?=$config['ui']['branding']?> <span data-i18n="disk_usage"></span></h2>
<a class="btn btn--tiny btn--flex back-to-admin" href="./"><i class="fa fa-arrow-left"></i></a>
<button class="download-zip-btn btn btn--tiny btn--flex">
<a class="btn btn--tiny btn--flex <?php echo $btnShape; ?> back-to-admin" href="./"><i class="fa fa-arrow-left"></i></a>
<button class="btn btn--tiny btn--flex <?php echo $btnShape; ?> download-zip-btn ">
<span data-i18n="download_zip"></span>
</button>
<hr>
Expand Down
27 changes: 15 additions & 12 deletions admin/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
header('location: ../login');
exit();
}

$btnShape = 'shape--' . $config['ui']['button'];
$shapeClass = 'shape--' . $config['ui']['style'];
?>
<!DOCTYPE html>
<html>
Expand All @@ -34,9 +37,9 @@
<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="../node_modules/selectize/dist/css/selectize.css">
<link rel="stylesheet" type="text/css" href="../resources/css/<?php echo $config['ui']['style']; ?>_admin.css">
<?php if (is_file("../private/overrides.css")): ?>
<link rel="stylesheet" href="../private/overrides.css" />
<?php endif; ?>
<?php if (is_file("../private/overrides.css")): ?>
<link rel="stylesheet" href="../private/overrides.css" />
<?php endif; ?>
</head>
<body>
<!-- NavBar content -->
Expand Down Expand Up @@ -130,7 +133,7 @@ function isElementHidden($element_class, $setting)
*/


echo '<li><a class="'.isElementHidden('adminnavlistelement',$fields).'" href="#'.$section.'" id="nav-'.$section.'"><div><span data-i18n="'.$section.'">'.$section.'</span></div></a></li>';
echo '<li><a class="'.isElementHidden('adminnavlistelement ',$fields). $btnShape . ' noborder" href="#'.$section.'" id="nav-'.$section.'"><div><span data-i18n="'.$section.'">'.$section.'</span></div></a></li>';

}

Expand All @@ -142,7 +145,7 @@ function isElementHidden($element_class, $setting)
<form autocomplete="off">

<div class="admincontent" id="admincontentpage">
<button class="save-admin-btn" id="save-admin-btn">
<button class="save-admin-btn <?php echo $btnShape; ?>" id="save-admin-btn">
<span class="save"><span data-i18n="save"></span></span>
<span class="saving"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i><span data-i18n="saving"></span></span>
<span class="success"><i class="fa fa-check"></i><span data-i18n="success"></span></span>
Expand All @@ -160,10 +163,10 @@ function isElementHidden($element_class, $setting)
html_src_indent($indent++);

echo '<!-- SECTION '.$section.'-->';
echo '<div class="'.isElementHidden('setting_section',$fields).'" id="'.$section.'">';
echo '<div class="'.isElementHidden('setting_section ',$fields). $shapeClass . ' noborder" id="'.$section.'">';

html_src_indent($indent);
echo '<h1 class="setting_section_heading"> <span data-i18n="'.$section.'">'.$section.'</span></h1>';
echo '<h1 class="setting_section_heading '. $shapeClass . ' noborder"> <span data-i18n="'.$section.'">'.$section.'</span></h1>';

$col = 0;
foreach($fields as $key => $setting)
Expand All @@ -189,7 +192,7 @@ function isElementHidden($element_class, $setting)
echo '<div class="tooltip">';
echo '<label class="settinglabel" data-i18n="'.$i18ntag.'">'.$i18ntag.'</label>';
echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';
echo '<input class="settinginput" type="'.($setting['type'] === 'number' ? 'number' : 'text').'" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
echo '<input class="settinginput ' . $shapeClass . '-s noborder" type="'.($setting['type'] === 'number' ? 'number' : 'text').'" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
break;
case 'range':
echo '<div class="tooltip">';
Expand All @@ -201,7 +204,7 @@ function isElementHidden($element_class, $setting)
break;
case 'color':
echo '<label class="settinglabel" data-i18n="'.$i18ntag.'"> '.$i18ntag.'</label>';
echo '<input class="settinginput color" type="color" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
echo '<input class="settinginput color ' . $shapeClass . '-s noborder" type="color" name="'.$setting['name'].'" value="'.$setting['value'].'" placeholder="'.$setting['placeholder'].'"/>';
break;
case 'hidden':
echo '<input type="hidden" name="'.$setting['name'].'" value="'.$setting['value'].'"/>';
Expand All @@ -210,7 +213,7 @@ function isElementHidden($element_class, $setting)
echo '<div class="tooltip"><label class="settinglabel"><span data-i18n="'.$i18ntag.'">'.$i18ntag.'</span></label>';
echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';
echo '<label class="toggle settinginput"> <input type="checkbox" '.(($setting['value'] == 'true')?' checked="checked"':'').' name="'.$setting['name'].'" value="true"/>';
echo '<span class="slider">';
echo '<span class="slider ' . $shapeClass . ' noborder">';
if ($setting['value'] == 'true')
{
echo '<label class="toggleTextON" data-i18n="adminpanel_toggletextON"></label><label class="toggleTextOFF hidden" data-i18n="adminpanel_toggletextOFF"></label>';
Expand All @@ -225,7 +228,7 @@ function isElementHidden($element_class, $setting)
echo '<div class="tooltip">';
echo '<label class="settinglabel" data-i18n="'.$i18ntag.'">'.$i18ntag.'</label>';
echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';
echo '<select class="settinginput'.($setting['type'] === 'multi-select' ? ' multi-select' : '');
echo '<select class="settinginput ' . $shapeClass . '-s noborder ' .($setting['type'] === 'multi-select' ? ' multi-select' : '');
echo '" name="'.$setting['name'] . ($setting['type'] === 'multi-select' ? '[]' : '');
echo '"' . ($setting['type'] === 'multi-select' ? ' multiple="multiple"' : '') . '>';
foreach($setting['options'] as $val => $option) {
Expand All @@ -241,7 +244,7 @@ function isElementHidden($element_class, $setting)
echo '<div class="tooltip">';
echo '<label class="settinglabel" data-i18n="'.$i18ntag.'">'.$i18ntag.'</label>';
echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';
echo '<div><button class="adminpanel-setting-btn" id="'.$setting['value'].'">';
echo '<div><button class="adminpanel-setting-btn '. $btnShape .'" id="'.$setting['value'].'">';
switch ($key) {
case 'reset_button':
echo '<span class="save"><span data-i18n="reset"></span></span>';
Expand Down
14 changes: 7 additions & 7 deletions chromakeying.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
die('No or invalid file provided');
}

$btnClass = 'btn btn--' . $config['ui']['button'];
$filename = $_GET['filename'];
$keyingimage = $config['foldersRoot']['keying'] . DIRECTORY_SEPARATOR . $filename;

Expand All @@ -24,6 +23,10 @@
$keying_possible = false;
$mainimage = 'resources/img/bg.jpg';
}

$btnClass = 'btn btn--' . $config['ui']['button'];
$btnShape = 'shape--' . $config['ui']['button'];
$shapeClass = 'shape--' . $config['ui']['style'];
?>
<!doctype html>
<html>
Expand All @@ -47,18 +50,15 @@
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_chromakeying.css" />
<?php if ($config['ui']['rounded_corners']): ?>
<link rel="stylesheet" href="resources/css/rounded.css" />
<?php endif; ?>
<?php if (is_file("private/overrides.css")): ?>
<link rel="stylesheet" href="private/overrides.css" />
<?php endif; ?>
</head>
<body data-main-image="<?=$mainimage?>">
<div class="chromawrapper rotarygroup">
<?php if ($keying_possible): ?>
<div class="canvasWrapper initial">
<canvas id="mainCanvas"></canvas>
<div class="canvasWrapper <?php echo $shapeClass; ?> noborder initial">
<canvas class="<?php echo $shapeClass; ?>" id="mainCanvas"></canvas>
</div>

<div style="padding-top:10px;text-align:center;">
Expand All @@ -67,7 +67,7 @@
$cdir = scandir($dir);
foreach ($cdir as $key => $value) {
if (!in_array($value, array(".","..")) && !is_dir($dir.$value)) {
echo '<img src="'.$dir.$value.'" class="backgroundPreview rotaryfocus" onclick="setBackgroundImage(this.src)">';
echo '<img src="'.$dir.$value.'" class="backgroundPreview '. $shapeClass .' rotaryfocus" onclick="setBackgroundImage(this.src)">';
}
}
?>
Expand Down
13 changes: 7 additions & 6 deletions dependencies.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
header('location: login');
exit();
}

$btnClass = 'btn btn--' . $config['ui']['button'] . ' dependencies-btn';
$btnShape = 'shape--' . $config['ui']['button'];
$shapeClass = 'shape--' . $config['ui']['style'];
?>
<!DOCTYPE html>
<html>
Expand Down Expand Up @@ -43,25 +47,22 @@
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="resources/css/<?php echo $config['ui']['style']; ?>_style.css" />
<link rel="stylesheet" href="resources/css/update.css" />
<?php if ($config['ui']['rounded_corners'] && $config['ui']['style'] === 'classic'): ?>
<link rel="stylesheet" href="resources/css/rounded.css" />
<?php endif; ?>
<?php if (is_file("private/overrides.css")): ?>
<link rel="stylesheet" href="private/overrides.css" />
<?php endif; ?>
</head>

<body class="updatewrapper">

<div class="white-box" id="white-box">
<div class="white-box <?php echo $shapeClass; ?>" id="white-box">
<h2><?=$config['ui']['branding']?> dependencies check</h2>
<p><span data-i18n="os_check"></span></p>
</div>

<div>
<a href="./" class="btn btn--<?php echo $config['ui']['button']; ?> dependencies-btn"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
<a href="./" class="<?php echo $btnClass; ?>"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>

<a href="admin" class="btn btn--<?php echo $config['ui']['button']; ?> dependencies-btn"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a>
<a href="admin" class="<?php echo $btnClass; ?>"><i class="fa fa-cog"></i> <span data-i18n="admin_panel"></span></a>
</div>

<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
Expand Down
7 changes: 4 additions & 3 deletions gallery.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@

$imagelist = ($config['gallery']['newest_first'] === true) ? array_reverse($images) : $images;

$btnShape = 'shape--' . $config['ui']['button'];
$shapeClass = 'shape--' . $config['ui']['style'];
$btnClass = 'btn btn--' . $config['ui']['button'];

$GALLERY_FOOTER = false;
?>
<!DOCTYPE html>
Expand Down Expand Up @@ -52,9 +56,6 @@
<?php if ($config['gallery']['bottom_bar']): ?>
<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
<?php endif; ?>
<?php if ($config['ui']['rounded_corners']): ?>
<link rel="stylesheet" href="resources/css/rounded.css" />
<?php endif; ?>
<?php if (is_file("private/overrides.css")): ?>
<link rel="stylesheet" href="private/overrides.css" />
<?php endif; ?>
Expand Down
7 changes: 3 additions & 4 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@
$galleryIcon = 'fa-picture-o';
}
$btnClass = 'btn btn--' . $config['ui']['button'];
$btnShape = 'shape--' . $config['ui']['button'];
$shapeClass = 'shape--' . $config['ui']['style'];
$GALLERY_FOOTER = true;
} else {
header('location: ' . $config['protect']['index_redirect']);
Expand Down Expand Up @@ -73,9 +75,6 @@
<?php if ($config['gallery']['bottom_bar']): ?>
<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
<?php endif; ?>
<?php if ($config['ui']['rounded_corners'] && $config['ui']['style'] === 'classic'): ?>
<link rel="stylesheet" href="resources/css/rounded.css" />
<?php endif; ?>
<?php if (is_file("private/overrides.css")): ?>
<link rel="stylesheet" href="private/overrides.css" />
<?php endif; ?>
Expand All @@ -91,7 +90,7 @@
<!-- image Filter Pane -->
<?php if ($config['filters']['enabled']): ?>
<div id="mySidenav" class="dragscroll sidenav rotarygroup">
<a href="#" class="closebtn <?php echo $btnClass; ?> rotaryfocus"><i class="fa fa-times"></i></a>
<a href="#" class="<?php echo $btnClass; ?> closebtn rotaryfocus"><i class="fa fa-times"></i></a>

<?php foreach(AVAILABLE_FILTERS as $filter => $name): ?>
<?php if (!in_array($filter, $config['filters']['disabled'])): ?>
Expand Down
8 changes: 2 additions & 6 deletions lib/configsetup.inc.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1840,6 +1840,7 @@
'placeholder' => $defaultConfig['ui']['style'],
'options' => [
'classic' => 'classic',
'classic_rounded' => 'classic rounded',
'modern' => 'modern',
'modern_squared' => 'squared',
'custom' => 'custom',
Expand All @@ -1853,6 +1854,7 @@
'placeholder' => $defaultConfig['ui']['button'],
'options' => [
'classic' => 'classic',
'classic_rounded' => 'classic_rounded',
'modern' => 'modern',
'modern_squared' => 'squared',
'custom' => 'custom',
Expand Down Expand Up @@ -1938,12 +1940,6 @@
'name' => 'ui[decore_lines]',
'value' => $config['ui']['decore_lines'],
],
'ui_rounded_corners' => [
'view' => 'expert',
'type' => 'checkbox',
'name' => 'ui[rounded_corners]',
'value' => $config['ui']['rounded_corners'],
],
'colors_primary' => [
'view' => 'expert',
'type' => 'color',
Expand Down
Loading

0 comments on commit 42964e7

Please sign in to comment.