From e593237b6a8531d1c4d41f6487d4496334d5f278 Mon Sep 17 00:00:00 2001
From: mgermerie <73115044+mgermerie@users.noreply.github.com>
Date: Tue, 15 Mar 2022 17:39:07 +0100
Subject: [PATCH] examples: change view source button style

---
 examples/css/example.css               | 22 ++++++++++++-
 examples/images/code-logo.svg          | 43 ++++++++++++++++++++++++++
 examples/index.html                    | 10 +++---
 examples/misc_orthographic_camera.html |  2 +-
 examples/view_25d_map.html             |  2 +-
 examples/view_2d_map.html              |  2 +-
 examples/view_3d_map.html              |  2 +-
 examples/widgets_scale.html            |  2 +-
 8 files changed, 74 insertions(+), 11 deletions(-)
 create mode 100644 examples/images/code-logo.svg

diff --git a/examples/css/example.css b/examples/css/example.css
index 727bc484bf..e294991bc1 100644
--- a/examples/css/example.css
+++ b/examples/css/example.css
@@ -75,8 +75,28 @@ body {
 
 #view-source {
     position: fixed;
-    right: 10px;
+    right: 25px;
     bottom: 10px;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    box-sizing: border-box;
+
+    border: 1px solid #222222;
+    border-radius: 7px;
+    background-color: #313336bb;
+
+    background-image: url('../images/code-logo.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 90%;
+}
+
+#view-source:hover {
+    cursor: pointer;
+}
+#view-source:active {
+    background-color: #222222;
 }
 
 /* NAVIGATION (LEFT) */
diff --git a/examples/images/code-logo.svg b/examples/images/code-logo.svg
new file mode 100644
index 0000000000..93f6f1f82c
--- /dev/null
+++ b/examples/images/code-logo.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24px"
+   height="24px"
+   viewBox="0 0 24 24"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="code-logo.svg"
+   inkscape:version="1.1.2 (76b9e6a115, 2022-02-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="32"
+     inkscape:cx="10.78125"
+     inkscape:cy="13.359375"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="1920"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     fill="none"
+     d="M0 0h24v24H0V0z"
+     id="path2" />
+  <path
+     d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>
diff --git a/examples/index.html b/examples/index.html
index 2395aa9c97..7f6ef34aa5 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -11,7 +11,7 @@
 
 <div id="main">
     <iframe id="content" class="scroll-section" frameborder="0" height="100%"></iframe>
-    <div id="view-source" class="text"></div>
+    <button id="view-source" class="text" title="View source"></button>
 </div>
 
 <nav class="scroll-section">
@@ -50,10 +50,10 @@
         iframe.src = url.replace('index.html', '');
         iframe.focus();
 
-        var viewSrc = '<a href="https://github.com/iTowns/itowns/blob/master/examples/';
-        viewSrc += window.location.hash.substr(1) || 'view_3d_map';
-        viewSrc += '.html" target="_blank">View source</a>';
-        document.getElementById('view-source').innerHTML = viewSrc;
+        let viewSrc = `https://github.com/iTowns/itowns/blob/master/examples/${
+            window.location.hash.substr(1) || 'view_3d_map'
+        }.html`;
+        document.getElementById('view-source').onclick = () => { window.open(viewSrc); };
     }
 
     function initNavigation(list) {
diff --git a/examples/misc_orthographic_camera.html b/examples/misc_orthographic_camera.html
index 4900cb857c..eaf68a8ea7 100644
--- a/examples/misc_orthographic_camera.html
+++ b/examples/misc_orthographic_camera.html
@@ -77,7 +77,7 @@
             // Add a scale :
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });
 
             // request redraw
diff --git a/examples/view_25d_map.html b/examples/view_25d_map.html
index d2a7a4140d..9a11f84e21 100644
--- a/examples/view_25d_map.html
+++ b/examples/view_25d_map.html
@@ -128,7 +128,7 @@
             // Add a scale :
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });
 
             // Request redraw
diff --git a/examples/view_2d_map.html b/examples/view_2d_map.html
index 0ea741727a..4b88a1454a 100644
--- a/examples/view_2d_map.html
+++ b/examples/view_2d_map.html
@@ -70,7 +70,7 @@
             // Add a scale :
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });
 
             // Request redraw
diff --git a/examples/view_3d_map.html b/examples/view_3d_map.html
index 4dac7d8e29..77b1eb6361 100644
--- a/examples/view_3d_map.html
+++ b/examples/view_3d_map.html
@@ -79,7 +79,7 @@
             // ---------- ADD SOME WIDGETS : ----------
 
             // ADD A SCALE :
-            const scale = new itowns_widgets.Scale(view, { position: 'bottom-right', translate: { x: -120 } });
+            const scale = new itowns_widgets.Scale(view, { position: 'bottom-right', translate: { x: -80 } });
 
             // ADD A MINIMAP :
             const minimap = new itowns_widgets.Minimap(
diff --git a/examples/widgets_scale.html b/examples/widgets_scale.html
index 4935717184..b08c66d528 100644
--- a/examples/widgets_scale.html
+++ b/examples/widgets_scale.html
@@ -80,7 +80,7 @@
 
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });