From e19594f50097159c56df0a80fc5650116e9a0a82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <jan.h.boehmer@gmx.de>
Date: Wed, 27 May 2020 22:51:43 +0200
Subject: [PATCH] Show additional infos about the part picture, when hovering
 it.

---
 assets/css/app.css                      | 37 +++++++++++++++++++++++++
 src/Twig/TypeLabelExtension.php         | 27 ++++++++++++++++++
 templates/Parts/info/_picture.html.twig | 17 ++++++++++--
 3 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 src/Twig/TypeLabelExtension.php

diff --git a/assets/css/app.css b/assets/css/app.css
index 595dca29..16bb8591 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -837,4 +837,41 @@ div.dataTables_wrapper div.dataTables_info {
 .scanner-video {
     max-width: 500px;
     max-height: 250px;
+}
+
+/*******************************************
+ * Hovering carousel gallery
+ *******************************************/
+.carousel-caption-hover {
+    display: none;
+}
+
+.carousel .mask {
+    display: none;
+}
+
+.carousel:hover .mask {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: .5s ease;
+    background-color: #0a0909;
+    opacity: 0.7;
+    border: 1px solid #dee2e6;
+    border-radius: .25rem;
+}
+
+.carousel-control {
+    display: none;
+}
+
+.carousel:hover .carousel-caption-hover {
+    display: block;
+}
+
+.carousel:hover .carousel-control {
+    display: flex;
 }
\ No newline at end of file
diff --git a/src/Twig/TypeLabelExtension.php b/src/Twig/TypeLabelExtension.php
new file mode 100644
index 00000000..1b398dda
--- /dev/null
+++ b/src/Twig/TypeLabelExtension.php
@@ -0,0 +1,27 @@
+<?php
+
+
+namespace App\Twig;
+
+
+use App\Services\ElementTypeNameGenerator;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+final class TypeLabelExtension extends AbstractExtension
+{
+    private $nameGenerator;
+
+    public function __construct(ElementTypeNameGenerator $elementTypeNameGenerator)
+    {
+        $this->nameGenerator = $elementTypeNameGenerator;
+    }
+
+    public function getFunctions()
+    {
+        return [
+                new TwigFunction('elementType', [$this->nameGenerator, 'getLocalizedTypeLabel']),
+                new TwigFunction('elementTypeName', [$this->nameGenerator, 'getTypeNameCombination']),
+            ];
+    }
+}
\ No newline at end of file
diff --git a/templates/Parts/info/_picture.html.twig b/templates/Parts/info/_picture.html.twig
index 5290cd1b..3977845b 100644
--- a/templates/Parts/info/_picture.html.twig
+++ b/templates/Parts/info/_picture.html.twig
@@ -4,17 +4,28 @@
     <div id="pictureCarousel" class="carousel slide mb-2" data-interval="false">
         <div class="carousel-inner">
             {% for pic in pictures %}
+                {# @var pic App\Entity\Attachments\Attachment #}
                 <div class="carousel-item  {% if loop.first %}active{% endif %}">
-                    <img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ pic | entityURL('file_view') }}" alt="">
+                    <a href="{{ pic | entityURL('file_view') }}" data-no-ajax target="_blank" rel="noopener">
+                        <img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ pic | entityURL('file_view') }}" alt="">
+                        <div class="mask"></div>
+                        <div class="carousel-caption-hover">
+                            <div class="carousel-caption">
+                                <div><b>{{ pic.name }}</b></div>
+                                <div>{% if pic.filename %}({{ pic.filename }}) {% endif %}</div>
+                                <div>{{ elementTypeName(pic.element) }}</div>
+                            </div>
+                        </div>
+                    </a>
                 </div>
             {% endfor %}
         </div>
         {% if pictures | length > 1 %}
-            <a class="carousel-control-prev" href="#pictureCarousel" role="button" data-slide="prev">
+            <a class="carousel-control-prev carousel-control" href="#pictureCarousel" role="button" data-slide="prev">
                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                 <span class="sr-only">{% trans %}part.info.prev_picture{% endtrans %}</span>
             </a>
-            <a class="carousel-control-next" href="#pictureCarousel" role="button" data-slide="next">
+            <a class="carousel-control-next carousel-control" href="#pictureCarousel" role="button" data-slide="next">
                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
                 <span class="sr-only">{% trans %}part.info.next_picture{% endtrans %}</span>
             </a>