image: implement removing

5 files changed, 92 insertions, 15 deletions

diff --git a/static/api/images.js b/static/api/images.js
index aa783e9..3b8c394 100644
--- a/static/api/images.js
+++ b/static/api/images.js
@@ -76,3 +76,8 @@ export function list() {
 			return r.images;
 		});
 }
+
+
+export function remove(id) {
+	return rest.post('/api/image/remove', { id: id });
+}
diff --git a/static/pages/image-viewer/index.css b/static/pages/image-viewer/index.css
index 4b1eb9b..ec98173 100644
--- a/static/pages/image-viewer/index.css
+++ b/static/pages/image-viewer/index.css
@@ -6,16 +6,23 @@
 	display: grid;
 	gap: 10px;
 	padding: 10px;
+	padding-bottom: 50%;
 }
 
 #container sfw-image {
 	margin: auto;
-	max-width: 700px;
-	width: 100%;
-	border-radius: var(--border-radius);
-	box-shadow: #223223aa 1px 1px 4px;
 }
 
-#container img.hidden {
-	filter: brightness(0) invert();
+#subtitle {
+	text-align: center;
+	color: #7e8fa8;
+	font-size: 0.8em;
+	font-weight: lighter;
+	padding-top: 10px;
+}
+
+#subtitle i {
+	font-family: 'Pacifico';
+	font-style: normal;
+	color: var(--fg-disabled);
 }
diff --git a/static/pages/image-viewer/index.js b/static/pages/image-viewer/index.js
index 0cf8598..e418e6f 100644
--- a/static/pages/image-viewer/index.js
+++ b/static/pages/image-viewer/index.js
@@ -7,6 +7,7 @@ const css = await sfw.css(import.meta.url, './index.css')
 
 export default class ImageViewer extends sfw.element.Container {
 	#container
+	#subtitle
 
 	constructor() {
 		super({ css });
@@ -15,15 +16,24 @@ export default class ImageViewer extends sfw.element.Container {
 		this.onolder = () => {}
 
 		this.body.append(
-			this.#container = Div.new({ id: 'container' })
+			this.#container = Div.new({
+				id: 'container',
+				children: [
+					this.#subtitle = Div.new({
+						id: 'subtitle',
+						innerHTML: 'Powered by <i>Memora<i>'
+					})
+				],
+			})
 		);
 	}
 
 	add(id) {
-		this.#container.append(Image.new({ id }))
+		this.#container.insertBefore(Image.new({ id }), this.#subtitle);
 	}
 
 	clear() {
 		this.#container.innerHTML = '';
+		this.#container.append(this.#subtitle);
 	}
 }
diff --git a/static/widgets/image/index.css b/static/widgets/image/index.css
index f4e2dce..730a324 100644
--- a/static/widgets/image/index.css
+++ b/static/widgets/image/index.css
@@ -1,15 +1,18 @@
 #container {
 	position: relative;
-	background: var(--card-background);
 	height: 100%;
+	min-height: 100px;
+	border-radius: var(--border-radius);
+	overflow: none;
+	box-shadow: #223223aa 1px 1px 4px;
 }
 
 #container img {
+	border-radius: var(--border-radius);
 	max-width: 700px;
 	width: 100%;
-	border-radius: var(--border-radius);
-	box-shadow: #223223aa 1px 1px 4px;
 	visibility: hidden;
+	margin-bottom: -5px;
 }
 
 #container.loaded img {
@@ -17,9 +20,6 @@
 }
 
 @keyframes loader {
-}
-
-@keyframes loader {
 	0% {
 		width: 60px;
 		height: 60px;
@@ -57,3 +57,36 @@
 .loaded #loading {
 	display: none;
 }
+
+#menu {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	height: 100%;
+	width: 0px;
+	background: #efefef99;
+	backdrop-filter: blur(5px);
+	border-radius: var(--border-radius);
+	transition: width 0.2s ease, padding 0.2s ease;
+	overflow: hidden;
+	align-content: center;
+	overflow: hidden;
+	padding: 0px;
+}
+
+#menu.open {
+	width: 100%;
+	padding: 10px;
+}
+
+#delete {
+	background: #ee5151;
+	padding: 10px;
+	color: #fff;
+	font-weight: bold;
+	margin: auto;
+	width: min-content;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+	user-select: none;
+}
diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
index ad77c4e..7111ec7 100644
--- a/static/widgets/image/index.js
+++ b/static/widgets/image/index.js
@@ -1,11 +1,15 @@
 import * as sfw from 'sfw';
 const { Div, Img } = sfw.element.native;
 
+import * as api from '../../api/index.js';
+
 const css = await sfw.css(import.meta.url, './index.css')
 
 export default class Image extends sfw.element.Container {
 	#container
 	#image
+	#menu
+	#id
 
 	constructor() {
 		super ({ css })
@@ -17,13 +21,31 @@ export default class Image extends sfw.element.Container {
 					this.#image = Img.new({
 						onload: () => this.#container.classList.add('loaded'),
 					}),
-					Div.new({ id: 'loading' })
+					Div.new({ id: 'loading' }),
+					this.#menu = Div.new({
+						id: 'menu',
+						children: [
+							Div.new({
+								id: 'delete',
+								innerText: 'Delete',
+								onclick: () => {
+									api.images.remove(this.#id);
+									this.parentNode.removeChild(this);
+								}
+							}),
+						]
+					})
 				],
+				oncontextmenu: (e) => {
+					this.#menu.classList.toggle('open');
+					e.preventDefault();
+				}
 			})
 		);
 	}
 
 	set id(id) {
+		this.#id = id;
 		this.#container.classList.remove('loaded');
 		this.#image.src = `/api/image/load/${id}`;
 	}