Added dialog to add stashes.

This commit is contained in:
DebaucheryLibrarian 2021-03-20 03:22:08 +01:00
parent e88cf4e3f4
commit bb9d6ee8fc
12 changed files with 143 additions and 7 deletions

View File

@ -103,4 +103,13 @@ export default {
flex-grow: 1; flex-grow: 1;
overflow: auto; overflow: auto;
} }
::v-deep(.dialog-actions) {
display: flex;
padding: .5rem 0;
&.right {
justify-content: flex-end;
}
}
</style> </style>

View File

@ -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>

View File

@ -103,12 +103,20 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.stash {
min-width: 0;
height: 100%;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
}
.stash-section { .stash-section {
display: flex; display: flex;
align-items: center; align-items: center;
padding: .5rem; padding: .5rem;
&:not(:last-child) { &:not(:last-child),
&.stash-header {
border-bottom: solid 1px var(--shadow-hint); border-bottom: solid 1px var(--shadow-hint);
} }
} }

View File

@ -17,7 +17,6 @@
<li <li
v-for="stash in user.stashes" v-for="stash in user.stashes"
:key="stash.id" :key="stash.id"
class="stash"
> >
<Stash <Stash
:stash="stash" :stash="stash"
@ -25,18 +24,33 @@
@publish="() => fetchUser()" @publish="() => fetchUser()"
/> />
</li> </li>
<li
v-if="isMe"
class="stashes-add"
@click="showAddStash = true"
>
<Icon icon="plus2" />
</li>
</ul> </ul>
</section> </section>
<AddStash
v-if="showAddStash"
@close="fetchUser"
/>
</div> </div>
</template> </template>
<script> <script>
import Stash from './stash.vue'; import Stash from './stash.vue';
import AddStash from '../stashes/add-stash.vue';
async function fetchUser() { async function fetchUser() {
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username); this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
this.isMe = this.user.id === this.$store.state.auth.user?.id; this.isMe = this.user.id === this.$store.state.auth.user?.id;
this.showAddStash = false;
this.pageTitle = this.user?.username; this.pageTitle = this.user?.username;
} }
@ -46,6 +60,7 @@ async function mounted() {
export default { export default {
components: { components: {
AddStash,
Stash, Stash,
}, },
data() { data() {
@ -55,6 +70,7 @@ export default {
: null, : null,
isMe: false, isMe: false,
pageTitle: null, pageTitle: null,
showAddStash: false,
}; };
}, },
mounted, mounted,
@ -86,17 +102,35 @@ export default {
.stashes { .stashes {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-auto-rows: 15fr;
grid-gap: 1rem;
} }
.heading { .heading {
color: var(--primary); color: var(--primary);
} }
.stash { .stashes-add {
min-width: 0; height: 100%;
background: var(--background); display: flex;
margin: 0 0 1rem 0; align-items: center;
box-shadow: 0 0 3px var(--shadow-weak); 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) { @media(max-width: $breakpoint-kilo) {

View File

@ -29,6 +29,7 @@
border: none; border: none;
background: none; background: none;
padding: .5rem; padding: .5rem;
font-size: .9rem;
font-weight: bold; font-weight: bold;
&:hover { &:hover {

View File

@ -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>

After

Width:  |  Height:  |  Size: 353 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 192 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 303 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 196 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 210 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 442 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 211 B