From d6257e3a7b9b1652386451756faa19d03a22cb69 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Mon, 2 Nov 2020 10:53:52 -0800
Subject: [PATCH] Add database/table actions to pattern portfolio

Refs #1066, #1077
---
 datasette/templates/_close_open_menus.html | 16 ++++
 datasette/templates/base.html              | 18 +----
 datasette/templates/patterns.html          | 91 ++++++++++------------
 3 files changed, 60 insertions(+), 65 deletions(-)
 create mode 100644 datasette/templates/_close_open_menus.html

diff --git a/datasette/templates/_close_open_menus.html b/datasette/templates/_close_open_menus.html
new file mode 100644
index 00000000..65eebddf
--- /dev/null
+++ b/datasette/templates/_close_open_menus.html
@@ -0,0 +1,16 @@
+<script>
+document.body.addEventListener('click', (ev) => {
+    /* Close any open details elements that this click is outside of */
+    var target = ev.target;
+    var detailsClickedWithin = null;
+    while (target && target.tagName != 'DETAILS') {
+        target = target.parentNode;
+    }
+    if (target && target.tagName == 'DETAILS') {
+        detailsClickedWithin = target;
+    }
+    Array.from(document.getElementsByTagName('details')).filter(
+        (details) => details.open && details != detailsClickedWithin
+    ).forEach(details => details.open = false);
+});
+</script>
diff --git a/datasette/templates/base.html b/datasette/templates/base.html
index 611ba9f6..3ed67164 100644
--- a/datasette/templates/base.html
+++ b/datasette/templates/base.html
@@ -59,22 +59,8 @@
 
 <footer class="ft">{% block footer %}{% include "_footer.html" %}{% endblock %}</footer>
 
-<script>
-document.body.addEventListener('click', (ev) => {
-    /* Close any open details elements that this click is outside of */
-    var target = ev.target;
-    var detailsClickedWithin = null;
-    while (target && target.tagName != 'DETAILS') {
-        target = target.parentNode;
-    }
-    if (target && target.tagName == 'DETAILS') {
-        detailsClickedWithin = target;
-    }
-    Array.from(document.getElementsByTagName('details')).filter(
-        (details) => details.open && details != detailsClickedWithin
-    ).forEach(details => details.open = false);
-});
-</script>
+{% include "_close_open_menus.html" %}
+
 {% for body_script in body_scripts %}
     <script>{{ body_script }}</script>
 {% endfor %}
diff --git a/datasette/templates/patterns.html b/datasette/templates/patterns.html
index 25fb6008..4ef2c29f 100644
--- a/datasette/templates/patterns.html
+++ b/datasette/templates/patterns.html
@@ -62,15 +62,6 @@
 <p class="message-warning">Example message</p>
 <p class="message-error">Example message</p>
 
-
-
-
-
-
-
-
-
-
 <h2 class="pattern-heading">.bd for /</h2>
 <section class="content">
     <h1>Datasette Fixtures</h1>
@@ -101,15 +92,27 @@
     <p><a href="/data/names" title="6 rows">names</a>, <a href="/data/foo">foo</a></p>
 </section>
 
-
-
-
-
-
-
 <h2 class="pattern-heading">.bd for /database</h2>
 <section class="content">
-    <h1 style="padding-left: 10px; border-left: 10px solid #ff0000">fixtures</h1>
+    <div class="page-header" style="border-color: #ff0000">
+        <h1>fixtures</h1>
+        <details class="actions-menu-links">
+            <summary><svg aria-labelledby="actions-menu-links-title" role="img"
+                    style="color: #666" xmlns="http://www.w3.org/2000/svg"
+                    width="28" height="28" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <title id="actions-menu-links-title">Table actions</title>
+                <circle cx="12" cy="12" r="3"></circle>
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg></summary>
+            <div class="dropdown-menu">
+                <ul>
+                    <li><a href="#">Database action</a></li>
+                </ul>
+            </div>
+        </details>
+    </div>
+
     <div class="metadata-description">
             Test tables description
     </div>
@@ -150,14 +153,28 @@
     </div>
 </section>
 
-
-
-
-
-
 <h2 class="pattern-heading">.bd for /database/table</h2>
+
 <section class="content">
-    <h1 style="padding-left: 10px; border-left: 10px solid #ff0000">roadside_attraction_characteristics</h1>
+    <div class="page-header" style="border-color: #ff0000">
+        <h1>roadside_attraction_characteristics</h1>
+        <details class="actions-menu-links">
+            <summary><svg aria-labelledby="actions-menu-links-title" role="img"
+                    style="color: #666" xmlns="http://www.w3.org/2000/svg"
+                    width="28" height="28" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <title id="actions-menu-links-title">Table actions</title>
+                <circle cx="12" cy="12" r="3"></circle>
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg></summary>
+            <div class="dropdown-menu">
+                <ul>
+                    <li><a href="#">Table action</a></li>
+                </ul>
+            </div>
+        </details>
+    </div>
+
     <p>
     Data license:
             <a href="https://github.com/simonw/datasette/blob/master/LICENSE">Apache License 2.0</a>
@@ -257,7 +274,6 @@
     </div>
   </form>
 
-
   <div class="extra-wheres">
     <h3>2 extra where clauses</h3>
     <ul>
@@ -269,7 +285,6 @@
     </ul>
   </div>
 
-
   <p><a class="not-underlined" title="select rowid, attraction_id, characteristic_id from roadside_attraction_characteristics where &#34;characteristic_id&#34; = :p0 order by rowid limit 101" href="/fixtures?sql=select+rowid%2C+attraction_id%2C+characteristic_id+from+roadside_attraction_characteristics+where+%22characteristic_id%22+%3D+%3Ap0+order+by+rowid+limit+101&amp;p0=2">&#x270e; <span class="underlined">View and edit SQL</span></a></p>
 
   <p class="export-links">This data as <a href="/fixtures/roadside_attraction_characteristics.json?characteristic_id=2&amp;_labels=on">json</a>, <a href="/fixtures/roadside_attraction_characteristics.csv?characteristic_id=2&amp;_labels=on&amp;_size=max">CSV</a> (<a href="#export">advanced</a>)</p>
@@ -278,11 +293,6 @@
         Suggested facets: <a href="http://latest.datasette.io/fixtures/facetable?_where=planet_int%3D1&amp;_where=state%3D%27CA%27&amp;_facet=city_id&amp;_facet=created&amp;_facet=complex_array&amp;_facet=tags#facet-tags">tags</a>, <a href="http://latest.datasette.io/fixtures/facetable?_where=planet_int%3D1&amp;_where=state%3D%27CA%27&amp;_facet=city_id&amp;_facet=created&amp;_facet=complex_array&amp;_facet_date=created#facet-created">created</a> (date), <a href="http://latest.datasette.io/fixtures/facetable?_where=planet_int%3D1&amp;_where=state%3D%27CA%27&amp;_facet=city_id&amp;_facet=created&amp;_facet=complex_array&amp;_facet_array=tags#facet-tags">tags</a> (array)
     </p>
 
-
-
-
-
-
     <div class="facet-results">
 
             <div class="facet-info facet-fixtures-facetable-tags" id="facet-tags">
@@ -420,16 +430,6 @@
 );</pre>
 </section>
 
-
-
-
-
-
-
-
-
-
-
 <h2 class="pattern-heading">.bd for /database/table/row</h2>
 <section class="content">
     <h1 style="padding-left: 10px; border-left: 10px solid #ff0000">roadside_attractions: 2</h1>
@@ -474,16 +474,6 @@
     </ul>
 </section>
 
-
-
-
-
-
-
-
-
-
-
 <h2 class="pattern-heading">.ft</h2>
 
 <footer class="ft">Powered by <a href="https://github.com/simonw/datasette" title="Datasette v0+unknown">Datasette</a>
@@ -498,5 +488,8 @@
             <a href="https://github.com/simonw/datasette">
         About Datasette</a>
 </footer>
+
+{% include "_close_open_menus.html" %}
+
 </body>
 </html>