From f4a5023387a99885e4f23fb594cd4b3c229bac34 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sat, 4 Jun 2022 21:04:15 +0200 Subject: [PATCH 01/11] Gallery(ui): add action buttons to gallery on mainpage Adapted changes by Markus Rothgaenger from https://github.com/Moarqi/photobooth Optimized integration to only be visible on main page while be hidden on standalone gallery and at livechroma. Change-Id: I322f6575a8a93b9705d79e8b9650391b4a54eefb --- gallery.php | 2 ++ index.php | 1 + livechroma.php | 9 +++++---- src/sass/classic_style.scss | 8 ++++++++ src/sass/partials/_button.scss | 10 ++++++++++ src/sass/partials/_gallery.scss | 18 +++++++++++++++--- src/sass/partials/_modern_button.scss | 1 + template/gallery.template.php | 26 ++++++++++++++++++++++++++ 8 files changed, 68 insertions(+), 7 deletions(-) diff --git a/gallery.php b/gallery.php index 0d122e403..1d0809f1a 100644 --- a/gallery.php +++ b/gallery.php @@ -19,6 +19,8 @@ } $imagelist = ($config['gallery']['newest_first'] === true) ? array_reverse($images) : $images; + +$GALLERY_FOOTER = false; ?> diff --git a/index.php b/index.php index 41e78e74c..d660174e1 100644 --- a/index.php +++ b/index.php @@ -40,6 +40,7 @@ $btnClass2 = ''; $galleryIcon = 'fa-th'; } + $GALLERY_FOOTER = true; } else { header('location: ' . $config['protect']['index_redirect']); exit(); diff --git a/livechroma.php b/livechroma.php index 202a8d320..29bef4eee 100644 --- a/livechroma.php +++ b/livechroma.php @@ -18,13 +18,14 @@ } $imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images; - if ($config['ui']['style'] === 'modern') { - $btnClass1 = 'round-btn'; - $btnClass2 = 'round-btn'; - } else { + if ($config['ui']['style'] === 'classic') { $btnClass1 = 'btn btn--small btn--flex'; $btnClass2 = 'btn'; + } else { + $btnClass1 = 'round-btn'; + $btnClass2 = 'round-btn'; } + $GALLERY_FOOTER = false; } else { header('location: ' . $config['protect']['index_redirect']); exit(); diff --git a/src/sass/classic_style.scss b/src/sass/classic_style.scss index 36719d411..5ac6dd0de 100644 --- a/src/sass/classic_style.scss +++ b/src/sass/classic_style.scss @@ -463,6 +463,14 @@ hr.small { } } +.buttongroup { + display: flex; + justify-content: center; + gap: 50px; + padding-top: 10px; + padding-bottom: 5px; +} + .gallery__close:active, .gallery__close:hover, .gallery__close:focus, diff --git a/src/sass/partials/_button.scss b/src/sass/partials/_button.scss index ebe10c0fe..8e9379c30 100644 --- a/src/sass/partials/_button.scss +++ b/src/sass/partials/_button.scss @@ -1,3 +1,4 @@ +.gal-action-btn, .btn { padding: 20px 40px; border: 0 none; @@ -40,6 +41,15 @@ } } +.gal-action-btn { + background: $hoverColor; + &:active, + &:focus, + &:hover { + opacity: 0.6; + } +} + .btn.save-btn, .btn.install-btn { position: absolute; diff --git a/src/sass/partials/_gallery.scss b/src/sass/partials/_gallery.scss index 928d06f9c..72dbf62a0 100644 --- a/src/sass/partials/_gallery.scss +++ b/src/sass/partials/_gallery.scss @@ -11,8 +11,8 @@ z-index: 1000; h1 { - margin-top: 10px; - margin-left: 30px; + margin: auto; + text-align: center; } &--open { @@ -47,10 +47,22 @@ } } + &__footer { + width: 100%; + height: 100px; + align-self: flex-end; + bottom: 0; + margin-top: auto; + display: flex; + justify-content: center; + background: $mainColor; + box-shadow: 0 0 15px rgb(40, 40, 40); + } + &__body { display: flex; flex-wrap: wrap; - overflow-y: auto; + overflow-y: scroll; justify-content: center; a { diff --git a/src/sass/partials/_modern_button.scss b/src/sass/partials/_modern_button.scss index 59cf8bc55..644209def 100644 --- a/src/sass/partials/_modern_button.scss +++ b/src/sass/partials/_modern_button.scss @@ -1,3 +1,4 @@ +.gal-action-btn, .round-btn { width: 5em; height: 5em; diff --git a/template/gallery.template.php b/template/gallery.template.php index ee74986f1..0d122c866 100644 --- a/template/gallery.template.php +++ b/template/gallery.template.php @@ -48,5 +48,31 @@ + +
+
+ + CUPS + + + +
+ +
+ + + + + + + + + + + + +
+
+ From b0a9ae96f4e17537bf1cd6944f44afc5c982f999 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Wed, 8 Jun 2022 07:12:55 +0200 Subject: [PATCH 02/11] gallery(actions): remove CUPS button from gallery actions Change-Id: I5f2164ea37b6d2d56480cf6c4752b5f684979e87 --- template/gallery.template.php | 4 ---- 1 file changed, 4 deletions(-) diff --git a/template/gallery.template.php b/template/gallery.template.php index 0d122c866..92c2dec80 100644 --- a/template/gallery.template.php +++ b/template/gallery.template.php @@ -51,10 +51,6 @@
- - CUPS - -
From f9bdeb4f73d3f44ef0defda1995654e6b2d2f014 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Wed, 8 Jun 2022 08:03:32 +0200 Subject: [PATCH 03/11] gallery(actions): remove fullscreen button from gallery actions Change-Id: Icd52cb150abe80efed47f1ecf69bd678ca740fb1 --- template/gallery.template.php | 3 --- 1 file changed, 3 deletions(-) diff --git a/template/gallery.template.php b/template/gallery.template.php index 92c2dec80..48b15a759 100644 --- a/template/gallery.template.php +++ b/template/gallery.template.php @@ -64,9 +64,6 @@ - - -
From 5f31da726fc77447282a954dcc7fa743dcf656e7 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 5 Jun 2022 11:58:42 +0200 Subject: [PATCH 04/11] standalone gallery: use UI dependent stylesheet Change-Id: Ifa029301b9526925b3f9ef122963155eb1ccda0a --- gallery.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gallery.php b/gallery.php index 1d0809f1a..56d4a015e 100644 --- a/gallery.php +++ b/gallery.php @@ -48,7 +48,7 @@ - + From 27ac95a1b70e556f25cec0438b98c925cfeffe8e Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 5 Jun 2022 11:37:05 +0200 Subject: [PATCH 05/11] UI: Add squared style theme inspired by Markus Rothgaenger Adapted changes from: - https://github.com/Moarqi/photobooth/commit/f762fc49d56b604905e88817377c0e1fd98289dc - https://github.com/Moarqi/photobooth/commit/6f5c5c8eb239e3386c1c76202376810d020f70f6 Changes by Andreas Blaesius: - code rewritten to be optional available via admin panel - adjusted scss files from custom_ to modern_squared - use modern stylesheets via import function Change-Id: I8836455b0ccb0bfe6bf3f95a34fab3083433b7a9 --- chromakeying.php | 8 +- index.php | 10 +-- lib/configsetup.inc.php | 1 + resources/lang/en.json | 2 +- src/sass/modern_squared_chromakeying.scss | 1 + .../modern_squared_live_chromakeying.scss | 39 ++++++++ src/sass/modern_squared_style.scss | 11 +++ src/sass/partials/_squared_gallery.scss | 54 +++++++++++ template/modern_squared.template.php | 89 +++++++++++++++++++ 9 files changed, 205 insertions(+), 10 deletions(-) create mode 100644 src/sass/modern_squared_chromakeying.scss create mode 100644 src/sass/modern_squared_live_chromakeying.scss create mode 100644 src/sass/modern_squared_style.scss create mode 100644 src/sass/partials/_squared_gallery.scss create mode 100644 template/modern_squared.template.php diff --git a/chromakeying.php b/chromakeying.php index 8007d30b4..5fcca5b19 100644 --- a/chromakeying.php +++ b/chromakeying.php @@ -5,12 +5,12 @@ die('No or invalid file provided'); } -if ($config['ui']['style'] === 'modern') { - $btnClass1 = 'round-btn'; - $btnClass2 = 'round-btn'; -} else { +if ($config['ui']['style'] === 'classic') { $btnClass1 = 'btn btn--flex'; $btnClass2 = 'btn'; +} else { + $btnClass1 = 'round-btn'; + $btnClass2 = 'round-btn'; } $filename = $_GET['filename']; diff --git a/index.php b/index.php index d660174e1..9d7cb8c6b 100644 --- a/index.php +++ b/index.php @@ -31,14 +31,14 @@ $imagelist = $config['gallery']['newest_first'] === true ? array_reverse($images) : $images; - if ($config['ui']['style'] === 'modern') { - $btnClass1 = 'round-btn'; - $btnClass2 = 'round-btn'; - $galleryIcon = 'fa-picture-o'; - } else { + if ($config['ui']['style'] === 'classic') { $btnClass1 = 'btn'; $btnClass2 = ''; $galleryIcon = 'fa-th'; + } else { + $btnClass1 = 'round-btn'; + $btnClass2 = 'round-btn'; + $galleryIcon = 'fa-picture-o'; } $GALLERY_FOOTER = true; } else { diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php index e20bdf75e..473dc0e94 100644 --- a/lib/configsetup.inc.php +++ b/lib/configsetup.inc.php @@ -1841,6 +1841,7 @@ 'options' => [ 'classic' => 'classic', 'modern' => 'modern', + 'modern_squared' => 'squared', 'custom' => 'custom', ], 'value' => $config['ui']['style'], diff --git a/resources/lang/en.json b/resources/lang/en.json index ac090982f..91b00edd3 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -569,7 +569,7 @@ "really_delete": "Really reset according to your settings? This cannot be undone!", "really_delete_image": "will be deleted! This cannot be undone! Really delete picture?", "reboot_button": "Reboot", - "reload": "Reload Page", + "reload": "Reload", "remotebuzzer": "Hardware Button", "remotebuzzer:remotebuzzer_collagebutton": "Collage Button", "remotebuzzer:remotebuzzer_collagetime": "Seconds to trigger collage", diff --git a/src/sass/modern_squared_chromakeying.scss b/src/sass/modern_squared_chromakeying.scss new file mode 100644 index 000000000..d6e7bc3d9 --- /dev/null +++ b/src/sass/modern_squared_chromakeying.scss @@ -0,0 +1 @@ +@import 'modern_chromakeying'; diff --git a/src/sass/modern_squared_live_chromakeying.scss b/src/sass/modern_squared_live_chromakeying.scss new file mode 100644 index 000000000..57d262694 --- /dev/null +++ b/src/sass/modern_squared_live_chromakeying.scss @@ -0,0 +1,39 @@ +@import 'modern_live_chromakeying'; +@import 'partials/squared_gallery'; + +.round-btn { + border: none; + border-radius: 15%; + margin: unset; + flex: none; + span { + display: block; + position: absolute; + bottom: 10%; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + } + .fa { + top: 35%; + } +} + +.closebtn { + margin: auto; + text-align: center; + span { + display: none; + bottom: unset; + } + .fa { + font-size: 2em; + margin: 0; + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } +} diff --git a/src/sass/modern_squared_style.scss b/src/sass/modern_squared_style.scss new file mode 100644 index 000000000..94cb64ea8 --- /dev/null +++ b/src/sass/modern_squared_style.scss @@ -0,0 +1,11 @@ +@import 'modern_style'; +@import 'partials/squared_gallery'; +.divinnen2 { + position: absolute; + bottom: 0; + right: 0; + left: 0; + padding: 10px; + margin-left: auto; + margin-right: auto; +} diff --git a/src/sass/partials/_squared_gallery.scss b/src/sass/partials/_squared_gallery.scss new file mode 100644 index 000000000..d85d9554f --- /dev/null +++ b/src/sass/partials/_squared_gallery.scss @@ -0,0 +1,54 @@ +.gallery { + &__header { + background: none; + > a { + top: 13px; + border-radius: 15%; + border: 2px solid $galleryButtonColor; + background: none; + > .fa { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + } + } + &__body { + img { + border: none; + border-radius: 8px; + box-shadow: 0 0 7px rgb(27, 27, 27); + } + figcaption { + background-color: unset; + border: none; + border-radius: 8px; + box-shadow: 0 0 7px rgb(27, 27, 27); + } + } +} +.pswp__button--close { + border-radius: 15%; +} + +.gal-action-btn, +.round-btn { + border: none; + border-radius: 15%; + margin: unset; + flex: none; + span { + display: block; + position: absolute; + bottom: 10%; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + } + .fa { + top: 35%; + } +} diff --git a/template/modern_squared.template.php b/template/modern_squared.template.php new file mode 100644 index 000000000..495a6fb9e --- /dev/null +++ b/template/modern_squared.template.php @@ -0,0 +1,89 @@ + +
+
+
+
+
+ +
+ +
+
+ +
+

+ + + + +
+ + +

+ +

+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +

+ + +

+ +
+ +
+
+ +
+ +
+ + CUPS + + + +
+ +
+ + + + + + + + + + + + + + + + +
+
+ + + +
+
+
+ + + Fork me on GitHub + +
From dd54ff6d82a0c90c54be90ac7c69b6383d51cfef Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 5 Jun 2022 12:17:31 +0200 Subject: [PATCH 06/11] UI(squared): adjust close and gallery button on livechroma.php Change-Id: I9098dcb8a50e0ef3c8716876b0e9f058380c3989 --- src/sass/partials/_squared_gallery.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/sass/partials/_squared_gallery.scss b/src/sass/partials/_squared_gallery.scss index d85d9554f..9a804337c 100644 --- a/src/sass/partials/_squared_gallery.scss +++ b/src/sass/partials/_squared_gallery.scss @@ -52,3 +52,13 @@ top: 35%; } } + +.gallerybtn { + left: 1em; + margin: auto; +} + +.closebtn { + right: 1em; + margin: auto; +} From c53e42059a0c71d3a96adefdbaa179a8638f7a5c Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 5 Jun 2022 17:49:18 +0200 Subject: [PATCH 07/11] UI(squared): add border for buttons Change-Id: I2a44a87d11ee485726104c6de0359574a8a5ebe9 --- src/sass/partials/_squared_gallery.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sass/partials/_squared_gallery.scss b/src/sass/partials/_squared_gallery.scss index 9a804337c..dd5f7777a 100644 --- a/src/sass/partials/_squared_gallery.scss +++ b/src/sass/partials/_squared_gallery.scss @@ -35,7 +35,7 @@ .gal-action-btn, .round-btn { - border: none; + border: 2px solid $fontColor; border-radius: 15%; margin: unset; flex: none; From 057fa8d3ab4181157d724300ee695a68dd8093ed Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 5 Jun 2022 21:34:44 +0200 Subject: [PATCH 08/11] UI(rounded): apply rounded style to action buttons inside gallery Change-Id: I28cd5ef516eae4df07b087fb6d9467ad6b5782f1 --- src/sass/rounded.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sass/rounded.scss b/src/sass/rounded.scss index ae4bce5da..1822b2b55 100644 --- a/src/sass/rounded.scss +++ b/src/sass/rounded.scss @@ -29,7 +29,8 @@ } } -.btn { +.btn, +.gal-action-btn { border-radius: 10px; } From 8cdb9066ea1298602010f1a8e9c204223c238e0a Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 5 Jun 2022 21:41:16 +0200 Subject: [PATCH 09/11] UI(admin): use style specific stylesheet Change-Id: If2a2ffb1e7fbaeac098dd819cd181f2dc6908e82 --- admin/debugpanel.php | 8 ++++---- admin/index.php | 2 +- api/admin.php | 3 +++ src/sass/{admin.scss => classic_admin.scss} | 0 src/sass/modern_admin.scss | 21 +++++++++++++++++++++ src/sass/modern_squared_admin.scss | 1 + 6 files changed, 30 insertions(+), 5 deletions(-) rename src/sass/{admin.scss => classic_admin.scss} (100%) create mode 100644 src/sass/modern_admin.scss create mode 100644 src/sass/modern_squared_admin.scss diff --git a/admin/debugpanel.php b/admin/debugpanel.php index cfc71f3c0..a840c18c8 100644 --- a/admin/debugpanel.php +++ b/admin/debugpanel.php @@ -38,10 +38,10 @@ - - - - + + + + diff --git a/admin/index.php b/admin/index.php index 228cc38cf..2d26d1def 100644 --- a/admin/index.php +++ b/admin/index.php @@ -33,7 +33,7 @@ - + diff --git a/api/admin.php b/api/admin.php index d96750612..fa557748e 100644 --- a/api/admin.php +++ b/api/admin.php @@ -120,6 +120,9 @@ if (!file_exists('../resources/css/custom_style.css')) { copy('../resources/css/modern_style.css', '../resources/css/custom_style.css'); } + if (!file_exists('../resources/css/custom_admin.css')) { + copy('../resources/css/modern_admin.css', '../resources/css/custom_admin.css'); + } if (!file_exists('../resources/css/custom_chromakeying.css')) { copy('../resources/css/modern_chromakeying.css', '../resources/css/custom_chromakeying.css'); } diff --git a/src/sass/admin.scss b/src/sass/classic_admin.scss similarity index 100% rename from src/sass/admin.scss rename to src/sass/classic_admin.scss diff --git a/src/sass/modern_admin.scss b/src/sass/modern_admin.scss new file mode 100644 index 000000000..8c65a7a85 --- /dev/null +++ b/src/sass/modern_admin.scss @@ -0,0 +1,21 @@ +@import 'classic_admin'; + +a.adminnavlistelement, +div.setting_section, +.setting_section_heading, +.save-btn, +.adminpanel-setting-btn, +.selectize-control.multi .selectize-input { + border-radius: 10px; +} + +.settinginput { + width: 100%; + border-radius: 5px; +} + +.settinginput.color { + width: 30%; + display: block; + border-radius: 5px; +} diff --git a/src/sass/modern_squared_admin.scss b/src/sass/modern_squared_admin.scss new file mode 100644 index 000000000..7944d00b9 --- /dev/null +++ b/src/sass/modern_squared_admin.scss @@ -0,0 +1 @@ +@import 'modern_admin'; From 0416f2bf3d17ef17053d02910abc3b0918393287 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 5 Jun 2022 22:00:40 +0200 Subject: [PATCH 10/11] UI(gallery): apply modern design on more places Change-Id: I2073a9b711c618d57b2888cc1a16427adfcec088 --- src/sass/modern_style.scss | 1 + src/sass/partials/_modern_gallery.scss | 53 ++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 src/sass/partials/_modern_gallery.scss diff --git a/src/sass/modern_style.scss b/src/sass/modern_style.scss index 55960e51a..d2adc2500 100644 --- a/src/sass/modern_style.scss +++ b/src/sass/modern_style.scss @@ -1,5 +1,6 @@ @import 'classic_style'; @import 'partials/modern_button'; +@import 'partials/modern_gallery'; html, body { diff --git a/src/sass/partials/_modern_gallery.scss b/src/sass/partials/_modern_gallery.scss new file mode 100644 index 000000000..6262f9937 --- /dev/null +++ b/src/sass/partials/_modern_gallery.scss @@ -0,0 +1,53 @@ +.gallery { + &__header { + background: none; + > a { + top: 13px; + border-radius: 10%; + border: 2px solid $galleryButtonColor; + background: none; + > .fa { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + } + } + &__body { + img { + border: 2px solid $galleryButtonColor; + border-radius: 8px; + } + figcaption { + background-color: unset; + border: 2px solid $galleryButtonColor; + border-radius: 8px; + margin-top: 6px; + } + } +} + +a.gallery__reload, +a.gallery__close { + border: 2px solid $galleryButtonColor; + border-radius: 50%; + background: radial-gradient(grey, $mainColor, $hoverColor); +} + +.pswp__button--close { + border-radius: 50%; +} + +.gallerybtn { + border-radius: 50%; + left: 1em; + margin: auto; +} + +.closebtn { + border-radius: 50%; + right: 1em; + margin: auto; +} From 4e799f68fc1f80053c84b7f2398623838dc7de8d Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Mon, 4 Jul 2022 22:43:22 +0200 Subject: [PATCH 11/11] REAMDE: add Moarqi to contributors Change-Id: I297a5df4f611818d2a02e66623030d5b2f90d0b6 --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 58cad1380..e50a5ec25 100644 --- a/README.md +++ b/README.md @@ -182,3 +182,4 @@ If you like my work and like to keep me motivated you can buy me a coconut water - [mhellmeier](https://github.com/mhellmeier) - [Uwe Pieper](https://github.com/up-87) - [s-dinda](https://github.com/s-dinda) +- [Moarqi](https://github.com/Moarqi)