add download button

2 files changed, 69 insertions, 19 deletions

diff --git a/static/widgets/image/index.css b/static/widgets/image/index.css
index f265644..063e5b1 100644
--- a/static/widgets/image/index.css
+++ b/static/widgets/image/index.css
@@ -76,6 +76,9 @@
 	align-content: center;
 	overflow: hidden;
 	padding: 0px;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 10px;
 }
 
 #menu.open {
@@ -88,21 +91,43 @@
 	padding: 10px;
 	color: #fff;
 	font-weight: bold;
-	margin: auto;
-	width: min-content;
 	border-radius: var(--border-radius);
 	cursor: pointer;
 	user-select: none;
 }
 
-#date {
-	background: #efefef99;
+#download {
+	background: var(--primary);
 	padding: 10px;
-	font-weight: bold;
-	margin: auto;
-	width: min-content;
 	border-radius: var(--border-radius);
+	color: #fff;
+	font-weight: bold;
+	user-select: none;
 	cursor: pointer;
+}
+
+#label {
+	display: grid;
+	grid-template-columns: 55px auto;
+}
+
+#label #title {
+	padding: 10px;
+	background: var(--primary);
+	border-top-left-radius: var(--border-radius);
+	border-bottom-left-radius: var(--border-radius);
+	color: #fff;
+	font-weight: bold;
+	user-select: none;
+}
+
+.element {
+	background: #efefef99;
+	padding: 10px;
+	font-weight: bold;
+	overflow-x: auto;
 	user-select: none;
-	margin-bottom: 10px;
+	white-space: nowrap;
+	border-top-right-radius: var(--border-radius);
+	border-bottom-right-radius: var(--border-radius);
 }
diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
index e9e1507..76419ea 100644
--- a/static/widgets/image/index.js
+++ b/static/widgets/image/index.js
@@ -1,7 +1,7 @@
 import * as api from 'api';
 import * as sfw from 'sfw';
 import Month from '../../month.js';
-const { Div, Img } = sfw.element.native;
+const { Div, Img, A: Link } = sfw.element.native;
 
 const css = await sfw.css(import.meta.url, './index.css')
 
@@ -12,6 +12,7 @@ export default class Image extends sfw.element.Container {
 	#id
 	#month
 	#date
+	#id_element
 
 	constructor() {
 		super ({ css })
@@ -27,7 +28,31 @@ export default class Image extends sfw.element.Container {
 					this.#menu = Div.new({
 						id: 'menu',
 						children: [
-							this.#date = Div.new({ id: 'date' }),
+							Div.new({
+								id: 'label',
+								children: [
+									Div.new({ id: 'title', innerText: 'Id' }),
+									this.#id_element = Div.new({ className: 'element id' }),
+								],
+							}),
+							Div.new({
+								id: 'label',
+								children: [
+									Div.new({ id: 'title', innerText: 'Date' }),
+									this.#date = Div.new({ className: 'element' }),
+								],
+							}),
+							Div.new({
+								id: 'download',
+								innerText: 'Download',
+								onclick: () => {
+									const a = Link.new({
+										href: `/api/image/load/${this.#id}`,
+										download: `${this.#id}.jpeg`
+									})
+									a.click()
+								}
+							}),
 							Div.new({
 								id: 'delete',
 								innerText: 'Delete',
@@ -36,13 +61,14 @@ export default class Image extends sfw.element.Container {
 									this.parentNode.removeChild(this);
 								}
 							}),
-						]
+						],
+						ondblclick: (e) => {
+							if (e.target != this.#menu) {
+								e.stopPropagation();
+							}
+						}
 					})
 				],
-				oncontextmenu: (e) => {
-					this.#menu.classList.toggle('open');
-					e.preventDefault();
-				},
 				ondblclick: (e) => {
 					this.#menu.classList.toggle('open');
 					e.preventDefault();
@@ -56,13 +82,12 @@ export default class Image extends sfw.element.Container {
 		this.#id = image.id;
 		this.#month = Month.from_unix(image.timestamp);
 		this.#container.classList.remove('loaded');
-		this.#date.innerText = date.toLocaleDateString()
+		this.#date.innerText = date.toLocaleString();
+		this.#id_element.innerText = image.id;
 	}
 
 	load() {
-		if (!this.#image.src) {
-			this.#image.src = `/api/image/load/${this.#id}`;
-		}
+		this.#image.src = `/api/image/load/${this.#id}`;
 	}
 
 	get month() {