From bb9d6ee8fc7af9e6845a446869cc1878c6a2f619 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Sat, 20 Mar 2021 03:22:08 +0100
Subject: [PATCH] Added dialog to add stashes.

---
 assets/components/dialog/dialog.vue     |  9 +++++
 assets/components/stashes/add-stash.vue | 49 +++++++++++++++++++++++++
 assets/components/users/stash.vue       | 10 ++++-
 assets/components/users/user.vue        | 46 ++++++++++++++++++++---
 assets/css/_inputs.scss                 |  1 +
 assets/img/icons/checkmark2.svg         |  5 +++
 assets/img/icons/minus.svg              |  5 +++
 assets/img/icons/minus2.svg             |  5 +++
 assets/img/icons/minus3.svg             |  5 +++
 assets/img/icons/plus.svg               |  5 +++
 assets/img/icons/plus2.svg              |  5 +++
 assets/img/icons/plus3.svg              |  5 +++
 12 files changed, 143 insertions(+), 7 deletions(-)
 create mode 100644 assets/components/stashes/add-stash.vue
 create mode 100644 assets/img/icons/checkmark2.svg
 create mode 100644 assets/img/icons/minus.svg
 create mode 100644 assets/img/icons/minus2.svg
 create mode 100644 assets/img/icons/minus3.svg
 create mode 100644 assets/img/icons/plus.svg
 create mode 100644 assets/img/icons/plus2.svg
 create mode 100644 assets/img/icons/plus3.svg

diff --git a/assets/components/dialog/dialog.vue b/assets/components/dialog/dialog.vue
index 22782689..99230394 100644
--- a/assets/components/dialog/dialog.vue
+++ b/assets/components/dialog/dialog.vue
@@ -103,4 +103,13 @@ export default {
 	flex-grow: 1;
 	overflow: auto;
 }
+
+::v-deep(.dialog-actions) {
+	display: flex;
+	padding: .5rem 0;
+
+	&.right {
+		justify-content: flex-end;
+	}
+}
 </style>
diff --git a/assets/components/stashes/add-stash.vue b/assets/components/stashes/add-stash.vue
new file mode 100644
index 00000000..c39a5cb8
--- /dev/null
+++ b/assets/components/stashes/add-stash.vue
@@ -0,0 +1,49 @@
+<template>
+	<Dialog
+		title="Add stash"
+		@close="$emit('close')"
+	>
+		<form @submit.prevent="addStash">
+			<input
+				ref="name"
+				v-model="name"
+				type="input"
+				placeholder="Name"
+				class="input"
+			>
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Add</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function addStash() {
+	await this.$store.dispatch('createStash', {
+		name: this.name,
+	});
+
+	this.$emit('close');
+}
+
+function mounted() {
+	this.$refs.name.focus();
+}
+
+export default {
+	data() {
+		return {
+			name: null,
+		};
+	},
+	mounted,
+	methods: {
+		addStash,
+	},
+};
+</script>
diff --git a/assets/components/users/stash.vue b/assets/components/users/stash.vue
index c53ce950..6e0e41f1 100644
--- a/assets/components/users/stash.vue
+++ b/assets/components/users/stash.vue
@@ -103,12 +103,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.stash {
+	min-width: 0;
+	height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak);
+}
+
 .stash-section {
 	display: flex;
 	align-items: center;
 	padding: .5rem;
 
-	&:not(:last-child) {
+	&:not(:last-child),
+	&.stash-header {
 		border-bottom: solid 1px var(--shadow-hint);
 	}
 }
diff --git a/assets/components/users/user.vue b/assets/components/users/user.vue
index 640a471e..431b7286 100644
--- a/assets/components/users/user.vue
+++ b/assets/components/users/user.vue
@@ -17,7 +17,6 @@
 				<li
 					v-for="stash in user.stashes"
 					:key="stash.id"
-					class="stash"
 				>
 					<Stash
 						:stash="stash"
@@ -25,18 +24,33 @@
 						@publish="() => fetchUser()"
 					/>
 				</li>
+
+				<li
+					v-if="isMe"
+					class="stashes-add"
+					@click="showAddStash = true"
+				>
+					<Icon icon="plus2" />
+				</li>
 			</ul>
 		</section>
+
+		<AddStash
+			v-if="showAddStash"
+			@close="fetchUser"
+		/>
 	</div>
 </template>
 
 <script>
 import Stash from './stash.vue';
+import AddStash from '../stashes/add-stash.vue';
 
 async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
 	this.isMe = this.user.id === this.$store.state.auth.user?.id;
 
+	this.showAddStash = false;
 	this.pageTitle = this.user?.username;
 }
 
@@ -46,6 +60,7 @@ async function mounted() {
 
 export default {
 	components: {
+		AddStash,
 		Stash,
 	},
 	data() {
@@ -55,6 +70,7 @@ export default {
 				: null,
 			isMe: false,
 			pageTitle: null,
+			showAddStash: false,
 		};
 	},
 	mounted,
@@ -86,17 +102,35 @@ export default {
 .stashes {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
+	grid-auto-rows: 15fr;
+	grid-gap: 1rem;
 }
 
 .heading {
 	color: var(--primary);
 }
 
-.stash {
-	min-width: 0;
-	background: var(--background);
-	margin: 0 0 1rem 0;
-	box-shadow: 0 0 3px var(--shadow-weak);
+.stashes-add {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--shadow-hint);
+
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: var(--shadow-weak);
+	}
+
+	&:hover {
+		background: var(--shadow-weak);
+		cursor: pointer;
+
+		.icon {
+			fill: var(--shadow);
+		}
+	}
 }
 
 @media(max-width: $breakpoint-kilo) {
diff --git a/assets/css/_inputs.scss b/assets/css/_inputs.scss
index 07d3e624..8f688931 100644
--- a/assets/css/_inputs.scss
+++ b/assets/css/_inputs.scss
@@ -29,6 +29,7 @@
 	border: none;
 	background: none;
 	padding: .5rem;
+	font-size: .9rem;
 	font-weight: bold;
 
 	&:hover {
diff --git a/assets/img/icons/checkmark2.svg b/assets/img/icons/checkmark2.svg
new file mode 100644
index 00000000..acb3acd9
--- /dev/null
+++ b/assets/img/icons/checkmark2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>checkmark2</title>
+<path d="M6.21 14.339l-6.217-6.119 3.084-3.035 3.133 3.083 6.713-6.607 3.084 3.035-9.797 9.643zM1.686 8.22l4.524 4.453 8.104-7.976-1.391-1.369-6.713 6.607-3.133-3.083-1.391 1.369z"></path>
+</svg>
diff --git a/assets/img/icons/minus.svg b/assets/img/icons/minus.svg
new file mode 100644
index 00000000..4af24473
--- /dev/null
+++ b/assets/img/icons/minus.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>minus</title>
+<path d="M0 5h16v6h-16z"></path>
+</svg>
diff --git a/assets/img/icons/minus2.svg b/assets/img/icons/minus2.svg
new file mode 100644
index 00000000..7b2d6417
--- /dev/null
+++ b/assets/img/icons/minus2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>minus2</title>
+<path d="M0 6.5v3c0 0.276 0.224 0.5 0.5 0.5h15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5h-15c-0.276 0-0.5 0.224-0.5 0.5z"></path>
+</svg>
diff --git a/assets/img/icons/minus3.svg b/assets/img/icons/minus3.svg
new file mode 100644
index 00000000..116ad838
--- /dev/null
+++ b/assets/img/icons/minus3.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>minus3</title>
+<path d="M1 7h14v2h-14v-2z"></path>
+</svg>
diff --git a/assets/img/icons/plus.svg b/assets/img/icons/plus.svg
new file mode 100644
index 00000000..377b3ae3
--- /dev/null
+++ b/assets/img/icons/plus.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>plus</title>
+<path d="M16 5h-5v-5h-6v5h-5v6h5v5h6v-5h5z"></path>
+</svg>
diff --git a/assets/img/icons/plus2.svg b/assets/img/icons/plus2.svg
new file mode 100644
index 00000000..a14e500a
--- /dev/null
+++ b/assets/img/icons/plus2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>plus2</title>
+<path d="M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z"></path>
+</svg>
diff --git a/assets/img/icons/plus3.svg b/assets/img/icons/plus3.svg
new file mode 100644
index 00000000..62819610
--- /dev/null
+++ b/assets/img/icons/plus3.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>plus3</title>
+<path d="M15 7h-6v-6h-2v6h-6v2h6v6h2v-6h6z"></path>
+</svg>