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

ui: rework UI style handling, make UI and button style independent #442

Merged
merged 18 commits into from
Jul 10, 2022
Merged

ui: rework UI style handling, make UI and button style independent #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
adbd9b9
Adapt dark UI style from Markus Rothgaenger
andi34 Jun 5, 2022
58fe4c5
sass: move more basic definitions
andi34 Jun 8, 2022
1e0cbd9
UI(scss): move shutter animation style to it's own partial
andi34 Jun 6, 2022
23037eb
UI(scss): move preview styles to it's own partial
andi34 Jun 6, 2022
eb6e8b6
UI(scss): move countdown related styles to it's own partial
andi34 Jun 6, 2022
aac35a4
UI(scss): reorganize button style definition
andi34 Jun 6, 2022
ac0f6ee
sass(chromakeying): move chroma related button styles to button partial
andi34 Jun 7, 2022
dc7c622
scss: apply classic style related button classes only on classic buttons
andi34 Jun 18, 2022
e825a72
UI: allow to choose a button style
andi34 Jun 19, 2022
2ba1e70
template(classic): change take picture and take collage order
andi34 Jun 20, 2022
b9cc9ea
template(classic): add icon for CUPS button
andi34 Jun 20, 2022
7935e29
scss: move button positions to it's general stylesheet
andi34 Jun 19, 2022
6ec1c20
sass: simpify more definitions
andi34 Jun 20, 2022
4082276
ui: rework UI style handling, make UI and button style independent
andi34 Jun 20, 2022
0f24b3f
style(squared): use box-shadow instead of border
andi34 Jul 10, 2022
dadbbe2
manual: remove style class from panel class
andi34 Jul 10, 2022
52596cc
gallery: allow to disable action button footer
andi34 Jul 10, 2022
b9986db
ui(gallery): no margin on close & reload button
andi34 Jul 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions admin/debugpanel.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
header('location: ../login');
exit();
}

$uiShape = '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 $uiShape; ?>">
</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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
exit();
}

$btnShape = 'shape--' . $config['ui']['button'];
$uiShape = '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 $uiShape; ?>">
<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
Open in desktop
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'];
$uiShape = '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-btn" id="save-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). $uiShape . ' 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 '. $uiShape . ' 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 ' . $uiShape . '-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 ' . $uiShape . '-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 ' . $btnShape . ' 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 ' . $uiShape . '-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
29 changes: 11 additions & 18 deletions chromakeying.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@
die('No or invalid file provided');
}

if ($config['ui']['style'] === 'classic') {
$btnClass1 = 'btn btn--flex';
$btnClass2 = 'btn';
} else {
$btnClass1 = 'round-btn';
$btnClass2 = 'round-btn';
}

$filename = $_GET['filename'];
$keyingimage = $config['foldersRoot']['keying'] . DIRECTORY_SEPARATOR . $filename;

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

$btnClass = 'btn btn--' . $config['ui']['button'];
$btnShape = 'shape--' . $config['ui']['button'];
$uiShape = 'shape--' . $config['ui']['style'];
?>
<!doctype html>
<html>
Expand All @@ -54,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 $uiShape; ?> noborder initial">
<canvas class="<?php echo $uiShape; ?>" id="mainCanvas"></canvas>
</div>

<div style="padding-top:10px;text-align:center;">
Expand All @@ -74,25 +67,25 @@
$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 '. $uiShape .' rotaryfocus" onclick="setBackgroundImage(this.src)">';
}
}
?>
</div>

<div class="chroma-control-bar">
<a class="<?php echo $btnClass1; ?> rotaryfocus" id="save-btn" href="#"><i class="fa fa-floppy-o"></i> <span data-i18n="save"></span></a>
<a class="<?php echo $btnClass; ?> rotaryfocus" id="save-chroma-btn" href="#"><i class="fa fa-floppy-o"></i> <span data-i18n="save"></span></a>

<?php if ($config['print']['from_chromakeying']): ?>
<a class="<?php echo $btnClass1; ?> rotaryfocus" id="print-btn" href="#"><i class="fa fa-print"></i> <span data-i18n="print"></span></a>
<a class="<?php echo $btnClass; ?> rotaryfocus" id="print-btn" href="#"><i class="fa fa-print"></i> <span data-i18n="print"></span></a>
<?php endif; ?>

<a class="<?php echo $btnClass1; ?> rotaryfocus" id="close-btn" href="#"><i class="fa fa-times"></i> <span data-i18n="close"></span></a>
<a class="<?php echo $btnClass; ?> rotaryfocus" id="close-btn" href="#"><i class="fa fa-times"></i> <span data-i18n="close"></span></a>
</div>
<?php else:?>
<div style="text-align:center;padding-top:250px">
<h1 style="color: red;" data-i18n="keyingerror"></h1>
<a class="<?php echo $btnClass2; ?>" href="./"><span data-i18n="close"></span></a>
<a class="<?php echo $btnClass; ?>" href="./"><span data-i18n="close"></span></a>
</div>
<?php endif; ?>

Expand Down
15 changes: 9 additions & 6 deletions config/config.inc.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@
$config['gallery']['scrollbar'] = false;
$config['gallery']['bottom_bar'] = true;
$config['gallery']['figcaption'] = true;
$config['gallery']['action_footer'] = true;
$config['pswp']['clickToCloseNonZoomable'] = false;
$config['pswp']['closeOnScroll'] = false;
$config['pswp']['closeOnOutsideClick'] = false;
Expand Down Expand Up @@ -308,27 +309,29 @@
// U S E R I N T E R F A C E
// possible style values: "classic", "modern", "custom"
$config['ui']['style'] = 'modern';
// possible button values: "rounded", "modern", "modern_squared", "custom"
$config['ui']['button'] = 'modern';
$config['ui']['shutter_animation'] = true;
$config['button']['show_fs'] = false;
$config['button']['homescreen'] = true;
$config['ui']['result_buttons'] = true;
$config['ui']['font_size'] = '16px';
$config['colors']['countdown'] = '#ffffff';
$config['colors']['background_countdown'] = '#214852';
$config['colors']['background_countdown'] = '#2e2e2e';
$config['colors']['cheese'] = '#ffffff';
$config['background']['defaults'] = null;
$config['background']['admin'] = null;
$config['background']['chroma'] = null;
$config['ui']['decore_lines'] = true;
$config['ui']['rounded_corners'] = false;
$config['colors']['primary'] = '#0a6071';
$config['colors']['secondary'] = '#214852';
$config['colors']['primary'] = '#2e2e2e';
$config['colors']['secondary'] = '#212121';
$config['colors']['highlight'] = '#C0C0C0';
$config['colors']['font'] = '#79bad9';
$config['colors']['font'] = '#c9c9c9';
$config['colors']['button_font'] = '#ffffff';
$config['colors']['start_font'] = '#ffffff';
$config['colors']['panel'] = '#2d4157';
$config['colors']['hover_panel'] = '#446781';
$config['colors']['panel'] = '#212121';
$config['colors']['hover_panel'] = '#2e2e2e';
$config['colors']['border'] = '#eeeeee';
$config['colors']['box'] = '#f8f9fc';
$config['colors']['gallery_button'] = '#ffffff';
Expand Down
13 changes: 7 additions & 6 deletions dependencies.php
View file
Open in desktop
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'];
$uiShape = '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 $uiShape; ?>" id="white-box">
<h2><?=$config['ui']['branding']?> dependencies check</h2>
<p><span data-i18n="os_check"></span></p>
</div>

<div>
<a href="./" class="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"><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
Loading