From 02786f4801b3a39e775b5dc917cc0e5a38142ab7 Mon Sep 17 00:00:00 2001
From: Daniel <daniellee468@gmail.com>
Date: Mon, 17 Jul 2017 18:29:47 +0800
Subject: [PATCH] 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
---
 .../event/mail_settings_fragment.html         |  3 +-
 .../pretixcontrol/event/payment.html          | 15 ++++------
 .../pretixpresale/event/checkout_addons.html  |  6 ++--
 .../event/checkout_questions.html             | 17 ++++++-----
 .../pretixpresale/event/order_modify.html     | 12 ++++----
 .../static/pretixcontrol/scss/main.scss       | 25 +++++++++++++++++
 src/pretix/static/pretixpresale/js/ui/main.js |  2 +-
 .../static/pretixpresale/scss/main.scss       | 28 +++++++++++++++++++
 8 files changed, 81 insertions(+), 27 deletions(-)

diff --git a/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html b/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
index d243bdbd4..a0a54fc62 100644
--- a/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
+++ b/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>
diff --git a/src/pretix/control/templates/pretixcontrol/event/payment.html b/src/pretix/control/templates/pretixcontrol/event/payment.html
index 125c5a233..8ef810ae5 100644
--- a/src/pretix/control/templates/pretixcontrol/event/payment.html
+++ b/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">
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html b/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
index 554265037..d617312fe 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
+++ b/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>
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html b/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
index 8116cce30..1a5b52983 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
+++ b/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 %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/order_modify.html b/src/pretix/presale/templates/pretixpresale/event/order_modify.html
index 5954cac4a..f426a0fb1 100644
--- a/src/pretix/presale/templates/pretixpresale/event/order_modify.html
+++ b/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>
diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss
index 490323e8a..40e15a4be 100644
--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/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;
+}
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index 8db92d2e5..6e6419479 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/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();
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index 888de6594..a33ff2092 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/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;
+}