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 5, 2022
1 parent 6ae0d02 commit fcd99b1
Show file tree
Hide file tree
Showing 51 changed files with 368 additions and 418 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
25 changes: 5 additions & 20 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 All @@ -67,23 +68,7 @@

<?php include('template/pswp.template.php'); ?>

<div class="send-mail">
<i class="fa fa-times" id="send-mail-close"></i>
<p data-i18n="insertMail"></p>
<form id="send-mail-form" style="margin: 0;">
<input class="mail-form-input" size="35" type="email" name="sendTo">
<input id="mail-form-image" type="hidden" name="image" value="">

<?php if ($config['mail']['send_all_later']): ?>
<input type="checkbox" id="mail-form-send-link" name="send-link" value="yes">
<label data-i18n="sendAllMail" for="mail-form-send-link"></label>
<?php endif; ?>

<button class="mail-form-input btn" name="submit" type="submit" value="Send"><span data-i18n="send"></span></button>
</form>

<div id="mail-form-message" style="max-width: 75%"></div>
</div>
<?php include('template/send-mail.template.php'); ?>

<div class="modal" id="print_mesg">
<div class="modal__body"><span data-i18n="printing"></span></div>
Expand Down
Loading

0 comments on commit fcd99b1

Please sign in to comment.