From 86b61816d2569b151969cef6e8d5173359dd2310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Mon, 23 Dec 2019 16:39:51 +0100
Subject: [PATCH] update click anywhere popup with new design and share button

---
 src/c3nav/site/static/site/css/c3nav.scss | 63 ++++++++++++++++-------
 src/c3nav/site/static/site/js/c3nav.js    | 22 +++++---
 src/c3nav/site/templates/site/map.html    | 19 +++++--
 3 files changed, 74 insertions(+), 30 deletions(-)

diff --git a/src/c3nav/site/static/site/css/c3nav.scss b/src/c3nav/site/static/site/css/c3nav.scss
index e186ee87..cc35277c 100644
--- a/src/c3nav/site/static/site/css/c3nav.scss
+++ b/src/c3nav/site/static/site/css/c3nav.scss
@@ -734,26 +734,51 @@ main:not([data-view=route-result]) #route-dots {
     margin: 15px 10px 10px;
     padding: 0;
 }
-.location-popup .leaflet-popup-content .location {
-    padding: 0 0 0 42px;
-    height: auto;
-    margin-bottom: 10px;
-    position: relative;
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
 }
-.location-popup .leaflet-popup-content .icon {
-    top: 3px;
-    left: 0;
-}
-.location-popup .leaflet-popup-content .button-clear {
-    display:block;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-}
-.location-popup a.leaflet-popup-close-button {
-    font-size: 24px;
-    width: 22px;
-    top: 2px;
+.location-popup {
+    .leaflet-popup-content-wrapper {
+        padding: 0;
+    }
+    .leaflet-popup-content {
+        margin: 0;
+
+        .buttons {
+            border: 0 #dddddd solid;
+            border-top-width: 1px;
+        }
+        .location {
+            margin-right: 12px;
+        }
+        .button-clear {
+            display:block;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+        }
+        .as-location .material-icons {
+            transform: rotate(-45deg);
+        }
+    }
+    a.leaflet-popup-close-button {
+        font-size: 24px;
+        width: 22px;
+        top: 2px;
+    }
+    .leaflet-popup-tip-container::after {
+        content: "";
+        border: 0 #dddddd solid;
+        border-top-width: 1px;
+        display: block;
+        width: 28px;
+        height: 20px;
+        top: 0;
+        left: 11px;
+        margin: auto;
+        position: absolute;
+    }
 }
 
 .buttons {
diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js
index 38ba7aa4..b05b55bd 100644
--- a/src/c3nav/site/static/site/js/c3nav.js
+++ b/src/c3nav/site/static/site/js/c3nav.js
@@ -732,7 +732,7 @@ c3nav = {
         if ($(this).is('.save')) {
             $.post('/api/routing/options/', options);
         }
-        c3nav.next_route_options = options
+        c3nav.next_route_options = options;
         c3nav.update_state(null, null, null, false);
     },
     _location_buttons_route_click: function () {
@@ -759,7 +759,7 @@ c3nav = {
     },
     _popup_button_click: function (e) {
         e.stopPropagation();
-        var $location = $(this).siblings('.location'),
+        var $location = $(this).parent().siblings('.location'),
             location = c3nav.locations_by_id[parseInt($location.attr('data-id'))],
             $origin = $('#origin-input'),
             $destination = $('#destination-input');
@@ -769,6 +769,8 @@ c3nav = {
         if ($(this).is('.as-location')) {
             c3nav._locationinput_set($destination, location);
             c3nav.update_state(false);
+        } else if ($(this).is('.share')) {
+            c3nav._buttons_share_click(location);
         } else {
             var $locationinput = $(this).is('.as-origin') ? $origin : $destination,
                 $other_locationinput = $(this).is('.as-origin') ? $destination : $origin,
@@ -783,18 +785,22 @@ c3nav = {
     },
 
     // share logic
-    _buttons_share_click: function () {
+    _buttons_share_click: function (location) {
         c3nav.open_modal($('main > .share-ui')[0].outerHTML);
-        c3nav._update_share_ui();
+        c3nav._update_share_ui(false, location);
     },
-    _update_share_ui: function(with_position) {
+    _update_share_ui: function(with_position, location) {
         var $share = $('#modal').find('.share-ui'),
             state = $.extend({}, c3nav.state),
             url;
-        if (!with_position) {
-            state.center = null;
+        if (location) {
+            url = '/' + location.slug + '/';
+        } else {
+            if (!with_position) {
+                state.center = null;
+            }
+            url = c3nav._build_state_url(state);
         }
-        url = c3nav._build_state_url(state);
         $share.find('img').attr('src', '/qr' + url);
         $share.find('input').val(window.location.protocol + '//' + window.location.host + url);
         if (!window.mobileclient) $share.find('input')[0].select();
diff --git a/src/c3nav/site/templates/site/map.html b/src/c3nav/site/templates/site/map.html
index 53364edf..16620d5b 100644
--- a/src/c3nav/site/templates/site/map.html
+++ b/src/c3nav/site/templates/site/map.html
@@ -30,9 +30,22 @@
         {% if not embed %}
             <section id="messages">{% include 'site/fragment_messages.html' %}</section>
             <section id="popup-buttons">
-                <button class="button-clear as-location">{% trans 'Select this location' %}</button>
-                <button class="button-clear as-destination">{% trans 'Route to here' %}</button>
-                <button class="button-clear as-origin">{% trans 'Route from here' %}</button>
+                <div class="buttons">
+                    <button class="button-clear as-location">
+                        <i class="material-icons">arrow_upward</i>
+                        {% trans 'Select' %}
+                    </button>
+                    <button class="button-clear share">
+                        <i class="material-icons">share</i>
+                        {% trans 'Share' %}
+                    </button>
+                </div>
+                <div class="buttons">
+                    <button class="button-clear as-destination"><i class="material-icons">directions</i> {% trans 'Route to here' %}</button>
+                </div>
+                <div class="buttons">
+                    <button class="button-clear as-origin"><i class="material-icons">directions</i> {% trans 'Route from here' %}</button>
+                </div>
             </section>
             <section class="share-ui">
                 <h3>{% trans 'Share' %}</h3>