Feature: buttons inside gallery on bottom

config/config.inc.php

@@ -121,6 +121,7 @@
 $config['scrollbar'] = false;
 $config['show_date'] = false; // only works if file_format_date = true
 $config['gallery']['date_format'] = 'd.m.Y - G:i';
+$config['gallery_bottom_bar'] = true;
 
 // SLIDESHOW
 $config['slideshow_refreshTime'] = '60';

gallery.php

@@ -33,6 +33,9 @@
 	<link rel="stylesheet" href="node_modules/photoswipe/dist/photoswipe.css" />
 	<link rel="stylesheet" href="node_modules/photoswipe/dist/default-skin/default-skin.css" />
 	<link rel="stylesheet" href="resources/css/style.css" />
+	<?php if ($config['gallery_bottom_bar']): ?>
+	<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
+	<?php endif; ?>
 	<?php if ($config['rounded_corners']): ?>
 	<link rel="stylesheet" href="resources/css/rounded.css" />
 	<?php endif; ?>

index.php

@@ -35,6 +35,9 @@
 	<link rel="stylesheet" href="node_modules/photoswipe/dist/photoswipe.css" />
 	<link rel="stylesheet" href="node_modules/photoswipe/dist/default-skin/default-skin.css" />
 	<link rel="stylesheet" href="resources/css/style.css" />
+	<?php if ($config['gallery_bottom_bar']): ?>
+	<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
+	<?php endif; ?>
 	<?php if ($config['rounded_corners']): ?>
 	<link rel="stylesheet" href="resources/css/rounded.css" />
 	<?php endif; ?>

lib/configsetup.inc.php

@@ -691,6 +691,11 @@
 			'placeholder' => $defaultConfig['gallery']['date_format'],
 			'name' => 'gallery[date_format]',
 			'value' => $config['gallery']['date_format']
+		],
+		'gallery_bottom_bar' => [
+			'type' => 'checkbox',
+			'name' => 'gallery_bottom_bar',
+			'value' => $config['gallery_bottom_bar']
 		]
 	],
 	'mail' => [

resources/lang/de.json

@@ -40,6 +40,7 @@
   "folders_tmp": "tmp Ordner",
   "force_buzzer": "Verstecke Auslöse-Taste",
   "gallery": "Galerie",
+  "gallery_bottom_bar": "Die Schaltflächenleiste in der Galerie unten anzeigen",
   "gallery_date_format": "Datumsstil",
   "gallery_no_image": "Die Galerie ist noch leer. Mache doch ein paar Bilder!",
   "general": "Allgemein",
@@ -120,6 +121,7 @@
   "manual_folders_thumbs": "Geben Sie den Pfad und den Namen ein, die für die Thumbnails verwendet werden. Dies sollte ein Unterordner Ihres Datenordners sein!",
   "manual_folders_tmp": "Geben Sie den Pfad und den Namen ein, die für den TEMP-Ordner verwendet werden. Dies sollte ein Unterordner Ihres Datenordners sein!",
   "manual_force_buzzer": "Wenn diese Option aktiviert ist, verschwinden die Schaltflächen zum Aufnehmen von Bildern und Collagen. Sie erhalten jetzt eine Schaltfläche, mit der Sie aufgefordert werden, mit einem Buzzer ein Bild oder eine Collage aufzunehmen.",
+  "manual_gallery_bottom_bar": "Wenn aktiviert, wird die Schaltflächenleiste in der Galerie unten angezeigt.",
   "manual_gallery_date_format": "Geben Sie Ihren Datumsstil ein.",
   "manual_general_camera_mode": "Wählen Sie den Kameramodus Ihrer Gerätekamera (Kamera mit Blick nach vorne oder hinten).",
   "manual_general_cheese_time": "Legen Sie eine Zeit fest zur Anzeige von \"Cheeeeeeeese!\" nach dem Countdown.",

resources/lang/en.json

@@ -41,6 +41,7 @@
   "folders_tmp": "tmp Folder",
   "force_buzzer": "Hide trigger button",
   "gallery": "Gallery",
+  "gallery_bottom_bar": "Show button bar inside gallery on bottom",
   "gallery_date_format": "Date style",
   "gallery_no_image": "The gallery is still empty. Take some pictures!",
   "general": "General",
@@ -122,6 +123,7 @@
   "manual_folders_thumbs": "Enter the path and name used for the Thumbnail Folder. This should be a subfolder of your \"data\" folder!",
   "manual_folders_tmp": "Enter the path and name used for the TEMP Folder. This should be a subfolder of your \"data\" folder!",
   "manual_force_buzzer": "If enabled, the take picture and collage buttons disappear. You now get a button which tells to use a buzzer to take a picture or collage.",
+  "manual_gallery_bottom_bar": "If enabled, the button bar is shown in the gallery below.",
   "manual_gallery_date_format": "Enter your date style.",
   "manual_general_camera_mode": "Choose between front- or back facing camera mode of your device cam.",
   "manual_general_cheese_time": "Set a time to display \"Cheeeeeeeese!\" after the countdown.",

resources/sass/photoswipe-bottom.scss

@@ -0,0 +1,74 @@
+@import "modules/theme";
+
+.pswp__button--qrcode,
+.pswp__button--print,
+.pswp__button--print-chroma-keying,
+.pswp__button--download,
+.pswp__button--mail,
+.pswp__button--playpause {
+    left: 40%;
+}
+
+.pswp__button--close {
+  top: 24px;
+  right: 30px;
+  left: auto;
+  position: fixed;
+  width: calc(2 * 1em);
+  height: calc(2 * 1em);
+  line-height: calc(2 * 1em);
+  border: 2px solid $galleryButtonColor;
+}
+
+.pswp__top-bar {
+  height: calc(7 * 1em);
+  top: auto;
+  bottom: 0;
+}
+
+.pswp__button {
+  float: left;
+}
+
+.pswp__counter {
+  left: 20%;
+  height: calc(4.375 * 1em);
+  font-size: 1.5em;
+  line-height: calc(5 * 1em);
+  padding: 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .pswp__counter {
+    left: 5%;
+    height: calc(2 * 1em);
+    font-size: 1.2em;
+    line-height: calc(3 * 1em);
+    padding: 0 5px;
+  }
+
+  .pswp__button {
+    left: 15%;
+    margin: auto;
+  }
+
+  .pswp__button--close,
+  .pswp__button--qrcode,
+  .pswp__button--print,
+  .pswp__button--print-chroma-keying,
+  .pswp__button--download,
+  .pswp__button--mail,
+  .pswp__button--playpause {
+    width: calc(2 * 1em);
+    height: calc(2 * 1em);
+    line-height: calc(2 * 1em);
+  }
+
+  .pswp__button--close {
+    left: auto;
+  }
+
+  .pswp__top-bar {
+    height: calc(3 * 1em);
+  }
+}

resources/sass/vendor/_photoswipe.scss

@@ -9,9 +9,9 @@
     background: transparent !important;
     font-size: 1.625em;
     text-align: center;
-    width: 50px;
-    height: 50px;
-    line-height: 50px;
+    width: calc(4.375 * 1em);
+    height: calc(4.375 * 1em);
+    line-height: calc(4.375 * 1em);
 
     &:hover {
         opacity: 1;