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

Commit

Permalink
UI(scss): reorganize button style definition
Browse files Browse the repository at this point in the history 
Change-Id: Ic97eaf7c0af60d4e1137e0a8bace40d0b988f82e
  • Loading branch information
@andi34
andi34 committed Jun 8, 2022
1 parent d7ea666 commit 30bda9a
Show file tree
Hide file tree
Showing 23 changed files with 432 additions and 480 deletions.
2 changes: 1 addition & 1 deletion admin/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,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" 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 Down
17 changes: 5 additions & 12 deletions chromakeying.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,7 @@
die('No or invalid file provided');
}

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

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

Expand Down Expand Up @@ -81,18 +74,18 @@
</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
4 changes: 2 additions & 2 deletions dependencies.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@
</div>

<div>
<a href="./" class="btn"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
<a href="./" class="btn btn--<?php echo $config['ui']['style']; ?> dependencies-btn"><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="btn btn--<?php echo $config['ui']['style']; ?> dependencies-btn"><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: 11 additions & 14 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,11 @@
$imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images;

if ($config['ui']['style'] === 'classic') {
$btnClass1 = 'btn';
$btnClass2 = '';
$galleryIcon = 'fa-th';
} else {
$btnClass1 = 'round-btn';
$btnClass2 = 'round-btn';
$galleryIcon = 'fa-picture-o';
}
$btnClass = 'btn btn--' . $config['ui']['style'];
$GALLERY_FOOTER = true;
} else {
header('location: ' . $config['protect']['index_redirect']);
Expand Down Expand Up @@ -94,7 +91,7 @@
<!-- image Filter Pane -->
<?php if ($config['filters']['enabled']): ?>
<div id="mySidenav" class="dragscroll sidenav rotarygroup">
<a href="#" class="closebtn <?php echo $btnClass2; ?> rotaryfocus"><i class="fa fa-times"></i></a>
<a href="#" class="closebtn <?php echo $btnClass; ?> 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 Expand Up @@ -130,43 +127,43 @@
<div class="stages rotarygroup" id="result">

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

<div class="resultInner hidden">
<?php if ($config['gallery']['enabled']): ?>
<a href="#" class="<?php echo $btnClass1; ?> gallery-button rotaryfocus" ><i class="fa <?php echo $galleryIcon; ?>"></i> <span data-i18n="gallery"></span></a>
<a href="#" class="<?php echo $btnClass; ?> gallery-button rotaryfocus" ><i class="fa <?php echo $galleryIcon; ?>"></i> <span data-i18n="gallery"></span></a>
<?php endif; ?>

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

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

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

<?php if (!$config['button']['force_buzzer']): ?>
<?php if (!($config['collage']['enabled'] && $config['collage']['only'])): ?>
<a href="#" class="<?php echo $btnClass1; ?> newpic rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="newPhoto"></span></a>
<a href="#" class="<?php echo $btnClass; ?> newpic rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="newPhoto"></span></a>
<?php endif; ?>

<?php if ($config['collage']['enabled']): ?>
<a href="#" class="<?php echo $btnClass1; ?> newcollage rotaryfocus"><i class="fa fa-th-large"></i> <span
<a href="#" class="<?php echo $btnClass; ?> newcollage rotaryfocus"><i class="fa fa-th-large"></i> <span
data-i18n="newCollage"></span></a>
<?php endif; ?>
<?php endif; ?>

<?php if ($config['filters']['enabled']): ?>
<a href="#" class="<?php echo $btnClass1; ?> imageFilter rotaryfocus"><i class="fa fa-magic"></i> <span data-i18n="selectFilter"></span></a>
<a href="#" class="<?php echo $btnClass; ?> imageFilter rotaryfocus"><i class="fa fa-magic"></i> <span data-i18n="selectFilter"></span></a>
<?php endif; ?>

<?php if ($config['picture']['allow_delete']): ?>
<a href="#" class="<?php echo $btnClass1; ?> deletebtn <?php if ($config['delete']['no_request']){ echo 'rotaryfocus';} ?> "><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
<a href="#" class="<?php echo $btnClass; ?> deletebtn <?php if ($config['delete']['no_request']){ echo 'rotaryfocus';} ?> "><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
<?php endif; ?>
</div>

Expand Down
18 changes: 6 additions & 12 deletions livechroma.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,7 @@
}
$imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images;

if ($config['ui']['style'] === 'classic') {
$btnClass1 = 'btn btn--small btn--flex';
$btnClass2 = 'btn';
} else {
$btnClass1 = 'round-btn';
$btnClass2 = 'round-btn';
}
$btnClass = 'btn btn--' . $config['ui']['style'] . ' livechroma-btn';
$GALLERY_FOOTER = false;
} else {
header('location: ' . $config['protect']['index_redirect']);
Expand Down Expand Up @@ -72,11 +66,11 @@
<div class="rotarygroup" id="start">
<div class="top-bar">
<?php if (!$config['live_keying']['enabled']): ?>
<a href="index.php" class="<?php echo $btnClass1; ?> closebtn rotaryfocus"><i class="fa fa-times"></i></a>
<a href="index.php" class="<?php echo $btnClass; ?> closebtn rotaryfocus"><i class="fa fa-times"></i></a>
<?php endif; ?>

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

</div>
Expand Down Expand Up @@ -123,11 +117,11 @@
</div>

<div class="chroma-control-bar">
<a href="#" class="<?php echo $btnClass2; ?> takeChroma rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="takePhoto"></span></a>
<a href="#" class="<?php echo $btnClass; ?> takeChroma rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="takePhoto"></span></a>
<?php if ($config['picture']['allow_delete']): ?>
<a href="#" class="<?php echo $btnClass2; ?> deletebtn"><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
<a href="#" class="<?php echo $btnClass; ?> deletebtn"><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
<?php endif; ?>
<a href="#" class="reloadPage <?php echo $btnClass2; ?> rotaryfocus"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
<a href="#" class="reloadPage <?php echo $btnClass; ?> rotaryfocus"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
</div>
</div>
<div class="rotarygroup">
Expand Down
2 changes: 1 addition & 1 deletion src/js/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ $(function () {
}
});

$('#save-btn').on('click', function (e) {
$('#save-admin-btn').on('click', function (e) {
e.preventDefault();
const elem = $(this);
elem.addClass('saving');
Expand Down
4 changes: 2 additions & 2 deletions src/js/chromakeying.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ function saveImageHandler(ev) {
saveImage(() => {
setTimeout(function () {
photoboothTools.modal.close('#save_mesg');
$('#save-btn').blur();
$('#save-chroma-btn').blur();
}, 2000);
});
}, 1000);
Expand All @@ -314,7 +314,7 @@ $(document).on('keyup', function (ev) {
});

$(document).ready(function () {
$('#save-btn').on('click', saveImageHandler);
$('#save-chroma-btn').on('click', saveImageHandler);
$('#print-btn').on('click', printImageHandler);
$('#close-btn').on('click', closeHandler);

Expand Down
134 changes: 1 addition & 133 deletions src/sass/classic_admin.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
@import 'modules/theme';
@import 'partials/basic';

$error: #e74c3c;
$success: #2ecc71;
@import 'partials/button_animated';

body {
display: block;
Expand Down Expand Up @@ -269,136 +267,6 @@ div.setting_element {
visibility: visible;
}

/***************
* SAVE button
***************/

.save-btn {
width: 15%;
max-width: 15em;
min-width: 6em;
height: 3em;
position: fixed;
right: 10px;
top: 0.5em;
z-index: 300;
background: $mainColor;
color: $buttonFontColor;
cursor: pointer;
transition: background 0.7s ease;

&:hover {
background: $hoverColor;
}

.saving,
.success,
.error {
display: none;
}

&.saving {
.saving {
display: inline-block;
}

.save,
.success,
.error {
display: none;
}
}

&.success {
background: $success;
.success {
display: inline-block;
}

.save,
.saving,
.error {
display: none;
}
}

&.error {
background: $error;
.error {
display: inline-block;
}

.save,
.saving,
.success {
display: none;
}
}
}

/*****************************
* Embedded ADMIN PANEL button
*****************************/

.adminpanel-setting-btn {
cursor: pointer;
width: 10em;
height: 2.5em;
background: $mainColor;
color: $buttonFontColor;
transition: background 0.7s ease;
z-index: 300;
float: left;

&:hover {
background: $hoverColor;
}

.saving,
.success,
.error {
display: none;
}

&.saving {
.saving {
display: inline-block;
}

.save,
.success,
.error {
display: none;
}
}

&.success {
background: $success;
.success {
display: inline-block;
}

.save,
.saving,
.error {
display: none;
}
}

&.error {
background: $error;
.error {
display: inline-block;
}

.save,
.saving,
.success {
display: none;
}
}
}

/*****************
* Toggle Button
*****************/
Expand Down
Loading

0 comments on commit 30bda9a

Please sign in to comment.