Added public visibility toggle to stash page.

This commit is contained in:
DebaucheryLibrarian 2021-03-20 02:15:31 +01:00
parent 4bc6ff846d
commit 292faa1e48
2 changed files with 74 additions and 10 deletions

View File

@ -53,6 +53,16 @@ export default {
.toggle-container {
display: inline-block;
cursor: pointer;
&.light {
.toggle {
background: var(--lighten-weak);
}
.toggle-input:checked + .toggle {
background: var(--lighten);
}
}
}
.toggle {

View File

@ -6,11 +6,36 @@
<div class="stash-header">
<h2 class="stash-name">{{ stash.name }}</h2>
<span class="header-section">
<label
v-if="isMine"
v-tooltip="'Public'"
:class="{ public: stash.public }"
class="header-item stash-public"
>
<Icon
v-show="stash.public"
icon="eye"
/>
<Icon
v-show="!stash.public"
icon="eye-blocked"
/>
<Toggle
:checked="stash.public"
class="light"
@change="checked => publishStash(checked)"
/>
</label>
<router-link
v-if="stash.user"
:to="{ name: 'user', params: { username: stash.user.username } }"
class="stash-username nolink"
class="header-item stash-username nolink"
><Icon icon="user3" />{{ stash.user.username }}</router-link>
</span>
</div>
<div class="content-inner">
@ -38,9 +63,20 @@
<script>
import Actor from '../actors/tile.vue';
import Releases from '../releases/releases.vue';
import Toggle from '../form/toggle.vue';
async function fetchStash() {
this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
}
async function publishStash(isPublic) {
await this.$store.dispatch('updateStash', {
stashId: this.stash.id,
stash: { public: isPublic },
});
this.fetchStash();
}
async function mounted() {
@ -51,15 +87,18 @@ export default {
components: {
Actor,
Releases,
Toggle,
},
data() {
return {
stash: null,
isMine: false,
};
},
mounted,
methods: {
fetchStash,
publishStash,
},
};
</script>
@ -71,6 +110,26 @@ export default {
align-items: center;
background: var(--profile);
color: var(--text-light);
.icon {
fill: var(--text-light);
margin: -.1rem .5rem 0 0;
}
}
.header-section,
.header-item {
display: flex;
align-items: center;
}
.header-item:not(:last-child) {
margin: 0 1rem 0 0;
}
.stash-public .icon {
margin: 0 .75rem 0 0;
cursor: pointer;
}
.stash-name,
@ -80,11 +139,6 @@ export default {
padding: .5rem 1rem;
margin: 0;
font-weight: bold;
.icon {
fill: var(--text-light);
margin: -.1rem .5rem 0 0;
}
}
.stash-section:not(:last-child) {