Fix #552 -- Add icon to expansible panels (#560)

* Ref #552 -- Add icon to expansible panels

Offer informative feedback to user by showing icons to indicate
expansible panels.

* Fix wrongly removed JavaScript line

src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html

@@ -4,8 +4,9 @@
 <div class="panel panel-default">
     <div class="panel-heading">
         <h4 class="panel-title">
-            <a data-toggle="collapse" href="#{{ pid }}">
+            <a class="collapsed" data-toggle="collapse" href="#{{ pid }}">
                 <strong>{% trans title %}</strong>
+                <i class="fa fa-angle-down collapse-indicator"></i>
             </a>
         </h4>
     </div>

src/pretix/control/templates/pretixcontrol/event/payment.html

@@ -29,15 +29,12 @@
             {% for provider in providers %}
                 <div class="panel panel-default">
                     <div class="panel-heading">
-                        <div class="row">
-                            <div class="col-sm-10">
-                                <h3 class="panel-title">
-                                    <a data-toggle="collapse" href="#{{ provider.identifier }}">
-                                        {{ provider.verbose_name }}
-                                    </a>
-                                </h3>
-                            </div>
-                        </div>
+                        <h3 class="panel-title">
+                            <a class="collapsed" data-toggle="collapse" href="#{{ provider.identifier }}">
+                                {{ provider.verbose_name }}  
+                                <i class="fa fa-angle-down collapse-indicator"></i>
+                            </a>
+                        </h3>
                     </div>
                     <div id="{{ provider.identifier }}" class="panel-collapse collapse">
                         <div class="panel-body">

src/pretix/presale/templates/pretixpresale/event/checkout_addons.html

@@ -15,10 +15,10 @@
                     <div class="panel-heading">
                         <h4 class="panel-title">
                             <a data-toggle="collapse" href="#cp{{ form.cartpos.pk }}">
-                                <strong>{{ form.item.name }}</strong>
-                                {% if form.variation %}
+                                <strong>{{ form.item.name }}{% if form.variation %}
                                     – {{ form.variation }}
-                                {% endif %}
+                                {% endif %}</strong>
+                                <i class="fa fa-angle-down collapse-indicator"></i>
                             </a>
                         </h4>
                     </div>

src/pretix/presale/templates/pretixpresale/event/checkout_questions.html

@@ -13,10 +13,11 @@
                     <h4 class="panel-title">
                         <a data-toggle="collapse" href="#contact">
                             <strong>{% trans "Contact information" %}</strong>
+                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </a>
                     </h4>
                 </div>
-                <div id="contact" class="panel-collapse collapsed in">
+                <div id="contact" class="panel-collapse collapse in">
                     <div class="panel-body">
                         {% bootstrap_form contact_form layout="horizontal" %}
                     </div>
@@ -26,15 +27,16 @@
                 <div class="panel panel-default">
                     <div class="panel-heading">
                         <h4 class="panel-title">
-                            <a data-toggle="collapse" href="#invoice">
-                                <strong>{% trans "Invoice information" %}</strong>
-                                {% if not event.settings.invoice_address_required %}
+                            <a class="{% if not event.settings.invoice_address_required %} collapsed {% endif %}" data-toggle="collapse" href="#invoice">
+                                <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
                                     {% trans "(optional)" %}
-                                {% endif %}
+                                {% endif %}</strong>
+                                
+                                <i class="fa fa-angle-down collapse-indicator"></i>
                             </a>
                         </h4>
                     </div>
-                    <div id="invoice" class="panel-collapse collapsed {% if event.settings.invoice_address_required %} in {% endif %}">
+                    <div id="invoice" class="panel-collapse collapse {% if event.settings.invoice_address_required %} in {% endif %}">
                         <div class="panel-body">
                             {% bootstrap_form invoice_form layout="horizontal" %}
                         </div>
@@ -51,6 +53,7 @@
                                 {% if pos.variation %}
                                     – {{ pos.variation }}
                                 {% endif %}
+                                <i class="fa fa-angle-down collapse-indicator"></i>
                             </a>
                             {% if forloop.counter > 1 %}
                                 <span class="text-right pull-right">
@@ -60,7 +63,7 @@
                         </h4>
                     </div>
                     <div id="cp{{ pos.id }}"
-                            class="panel-collapse collapsed in">
+                            class="panel-collapse collapse in">
                         <div class="panel-body" data-idx="{{ forloop.counter0 }}">
                             {% for form in forms %}
                                 {% if form.pos.item != pos.item %}

src/pretix/presale/templates/pretixpresale/event/order_modify.html

@@ -22,10 +22,10 @@
                     <div class="panel-heading">
                         <h4 class="panel-title">
                             <a data-toggle="collapse" href="#invoice" data-parent="#questions_accordion">
-                                <strong>{% trans "Invoice information" %}</strong>
-                                {% if not event.settings.invoice_address_required %}
+                                <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
                                     {% trans "(optional)" %}
-                                {% endif %}
+                                {% endif %}</strong>
+                                <i class="fa fa-angle-down collapse-indicator"></i>
                             </a>
                         </h4>
                     </div>
@@ -41,10 +41,10 @@
                     <div class="panel-heading">
                         <h4 class="panel-title">
                             <a data-toggle="collapse" href="#cp{{ pos.id }}">
-                                <strong>{{ pos.item.name }}</strong>
-                                {% if pos.variation %}
+                                <strong>{{ pos.item.name }}{% if pos.variation %}
                                     – {{ pos.variation }}
-                                {% endif %}
+                                {% endif %}</strong>
+                                <i class="fa fa-angle-down collapse-indicator"></i>
                             </a>
                         </h4>
                     </div>

src/pretix/static/pretixcontrol/scss/main.scss

@@ -370,3 +370,28 @@ body.loading #wrapper {
 .dl-horizontal dt  {
     white-space: normal;
 }
+
+.collapse-indicator {
+    -webkit-transition: all 150ms ease-in 0s;
+    transition: all 150ms ease-in 0s;
+}
+
+.panel-title a:not(.collapsed) .collapse-indicator {
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.panel-title a[data-toggle="collapse"] {
+    display: flex;
+    padding: 10px 15px;
+    margin: -10px -15px;
+    align-items: center;
+    justify-content: space-between;
+    outline: 0;
+    text-decoration: none;
+}
+
+.panel-title a[data-toggle="collapse"]:hover {
+    background-color: #eeeeee;
+}

src/pretix/static/pretixpresale/js/ui/main.js

@@ -26,7 +26,7 @@ $(function () {
         $(this).parent().parent().parent().find(".variations").slideToggle();
         e.preventDefault();
     });
-    $(".collapsed").removeClass("collapsed").addClass("collapse");
+     $("div.collapsed").removeClass("collapsed").addClass("collapse");
 
     $("#voucher-box").hide();
     $("#voucher-toggle").show();

src/pretix/static/pretixpresale/scss/main.scss

@@ -176,3 +176,31 @@ body.loading .container {
 .dl-horizontal dt  {
     white-space: normal;
 }
+
+.collapse-indicator {
+    -moz-transition: all 150ms ease-in 0s;
+    -webkit-transition: all 150ms ease-in 0s;
+    -o-transition: all 150ms ease-in 0s;
+    transition: all 150ms ease-in 0s;
+}
+
+.panel-title a:not(.collapsed) .collapse-indicator {
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.panel-title a[data-toggle="collapse"] {
+    display: flex;
+    padding: 10px 15px;
+    margin: -10px -15px;
+    align-items: center;
+    justify-content: space-between;
+    outline: 0;
+    text-decoration: none;
+}
+
+.panel-title a[data-toggle="collapse"]:hover {
+    background-color: #eeeeee;
+}