DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/components/form/toggle.vue
View File

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

66
assets/components/stashes/stash.vue
View File

@ -6,11 +6,36 @@
<div class="stash-header"> <div class="stash-header">
<h2 class="stash-name">{{ stash.name }}</h2> <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 <router-link
v-if="stash.user" v-if="stash.user"
:to="{ name: 'user', params: { username: stash.user.username } }" :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> ><Icon icon="user3" />{{ stash.user.username }}</router-link>
</span>
</div> </div>
<div class="content-inner"> <div class="content-inner">
@ -38,9 +63,20 @@
<script> <script>
import Actor from '../actors/tile.vue'; import Actor from '../actors/tile.vue';
import Releases from '../releases/releases.vue'; import Releases from '../releases/releases.vue';
import Toggle from '../form/toggle.vue';
async function fetchStash() { async function fetchStash() {
this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId); 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() { async function mounted() {
@ -51,15 +87,18 @@ export default {
components: { components: {
Actor, Actor,
Releases, Releases,
Toggle,
}, },
data() { data() {
return { return {
stash: null, stash: null,
isMine: false,
}; };
}, },
mounted, mounted,
methods: { methods: {
fetchStash, fetchStash,
publishStash,
}, },
}; };
</script> </script>
@ -71,6 +110,26 @@ export default {
align-items: center; align-items: center;
background: var(--profile); background: var(--profile);
color: var(--text-light); 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, .stash-name,
@ -80,11 +139,6 @@ export default {
padding: .5rem 1rem; padding: .5rem 1rem;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
.icon {
fill: var(--text-light);
margin: -.1rem .5rem 0 0;
}
} }
.stash-section:not(:last-child) { .stash-section:not(:last-child) {