mirror of
https://github.com/romancm/gamebrary
synced 2024-09-20 05:41:57 +00:00
WIP profiles and wallpapers refactor
This commit is contained in:
gamebrary
parent
2b52e09aac
commit
d668357918
20 changed files with 307 additions and 347 deletions
|
|
@ -326,15 +326,6 @@ agent-base@6:
|
|||
dependencies:
|
||||
debug "4"
|
||||
|
||||
apicalypse@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/apicalypse/-/apicalypse-0.2.0.tgz#dcb1b3447bbb2768f131980864f869fea16bab9c"
|
||||
integrity sha512-KJeyO2vHGOLkb90fNeuEytx0zG65Ifcplr1dk9mnngzsS4J6ksHB0PyNvu0dehsc8rAaLx+OW+L4raU7UDlpFw==
|
||||
dependencies:
|
||||
axios "^0.21.1"
|
||||
better-queue "^3.8.10"
|
||||
better-queue-memory "^1.0.4"
|
||||
|
||||
array-buffer-byte-length@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
|
||||
|
|
@ -365,32 +356,11 @@ axios@^0.19.0:
|
|||
dependencies:
|
||||
follow-redirects "1.5.10"
|
||||
|
||||
axios@^0.21.1:
|
||||
version "0.21.4"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
|
||||
integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
|
||||
dependencies:
|
||||
follow-redirects "^1.14.0"
|
||||
|
||||
base64-js@^1.3.0:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
|
||||
integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
|
||||
|
||||
better-queue-memory@^1.0.1, better-queue-memory@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/better-queue-memory/-/better-queue-memory-1.0.4.tgz#f390d6b30bb3b36aaf2ce52b37a483e8a7a81a22"
|
||||
integrity sha512-SWg5wFIShYffEmJpI6LgbL8/3Dqhku7xI1oEiy6FroP9DbcZlG0ZDjxvPdP9t7hTGW40IpIcC6zVoGT1oxjOuA==
|
||||
|
||||
better-queue@^3.8.10:
|
||||
version "3.8.12"
|
||||
resolved "https://registry.yarnpkg.com/better-queue/-/better-queue-3.8.12.tgz#15c18923d0f9778be94f19c3ef2bd85c632d0db3"
|
||||
integrity sha512-D9KZ+Us+2AyaCz693/9AyjTg0s8hEmkiM/MB3i09cs4MdK1KgTSGJluXRYmOulR69oLZVo2XDFtqsExDt8oiLA==
|
||||
dependencies:
|
||||
better-queue-memory "^1.0.1"
|
||||
node-eta "^0.9.0"
|
||||
uuid "^9.0.0"
|
||||
|
||||
bignumber.js@^9.0.0:
|
||||
version "9.1.2"
|
||||
resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
|
||||
|
|
@ -778,11 +748,6 @@ follow-redirects@1.5.10:
|
|||
dependencies:
|
||||
debug "=3.1.0"
|
||||
|
||||
follow-redirects@^1.14.0:
|
||||
version "1.15.3"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
|
||||
integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
|
||||
|
||||
for-each@^0.3.3:
|
||||
version "0.3.3"
|
||||
resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
|
||||
|
|
@ -1370,11 +1335,6 @@ negotiator@0.6.3:
|
|||
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
|
||||
integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
|
||||
|
||||
node-eta@^0.9.0:
|
||||
version "0.9.0"
|
||||
resolved "https://registry.yarnpkg.com/node-eta/-/node-eta-0.9.0.tgz#9fb0b099bcd2a021940e603c64254dc003d9a7a8"
|
||||
integrity sha512-mTCTZk29tmX1OGfVkPt63H3c3VqXrI2Kvua98S7iUIB/Gbp0MNw05YtUomxQIxnnKMyRIIuY9izPcFixzhSBrA==
|
||||
|
||||
node-fetch@^2.2.0, node-fetch@^2.3.0, node-fetch@^2.6.0, node-fetch@^2.6.7:
|
||||
version "2.7.0"
|
||||
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
|
||||
|
|
@ -1809,11 +1769,6 @@ uuid@^7.0.0:
|
|||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
|
||||
integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
|
||||
|
||||
uuid@^9.0.0:
|
||||
version "9.0.1"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
|
||||
integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
|
||||
|
||||
vary@^1, vary@~1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
|
||||
|
|
|
|||
|
|
@ -47,6 +47,8 @@ Elevate your gaming experience with PlayStats – because your gaming journey is
|
|||
<router-view class="viewport" />
|
||||
<KeyboardShortcutsModal />
|
||||
<markdown-cheatsheet />
|
||||
<!-- TODO: finish wallpapers -->
|
||||
<WallpaperDetailsSidebar :wallpaper="activeWallpaper" />
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -56,6 +58,7 @@ import MarkdownCheatsheet from '@/components/MarkdownCheatsheet';
|
|||
import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
|
||||
import PageDock from '@/components/PageDock';
|
||||
import MainMenu from '@/components/MainMenu';
|
||||
import WallpaperDetailsSidebar from '@/components/Wallpapers/WallpaperDetailsSidebar';
|
||||
import { initializeApp } from "firebase/app";
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import { KEYBOARD_SHORTCUTS, FIREBASE_CONFIG, IGDB_QUERIES } from '@/constants';
|
||||
|
|
@ -70,6 +73,7 @@ export default {
|
|||
MainMenu,
|
||||
MarkdownCheatsheet,
|
||||
KeyboardShortcutsModal,
|
||||
WallpaperDetailsSidebar,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-b-modal.keyboard-shortcuts
|
||||
v-b-toggle.keyboard-shortcuts-sidebar
|
||||
:variant="darkTheme ? 'dark' : 'light'"
|
||||
title="Keyboard Shortcuts"
|
||||
size="sm"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- TODO: link to create page if profile not created -->
|
||||
<template>
|
||||
<div
|
||||
class="py-3 d-flex flex-column text-center"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,45 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<portal to="pageTitle">
|
||||
<h3>Profile</h3>
|
||||
</portal>
|
||||
<b-sidebar
|
||||
id="profile-sidebar"
|
||||
scrollable
|
||||
right
|
||||
width="380px"
|
||||
shadow
|
||||
visible
|
||||
no-header
|
||||
backdrop
|
||||
body-class="p-3"
|
||||
:bg-variant="darkTheme ? 'dark' : 'light'"
|
||||
:text-variant="darkTheme ? 'light' : 'dark'"
|
||||
>
|
||||
<h3>Edit Profile</h3>
|
||||
|
||||
<b-spinner v-if="loading" class="spinner-centered" />
|
||||
|
||||
<b-form
|
||||
v-else-if="profile"
|
||||
class="pb-3 small-container"
|
||||
@submit.prevent="save"
|
||||
>
|
||||
<b-spinner v-if="uploading" />
|
||||
|
||||
<!-- TODO: add v-else -->
|
||||
<div class="text-center mb-5">
|
||||
<div class="text-center">
|
||||
<b-avatar
|
||||
v-if="avatarImage"
|
||||
:src="avatarImage"
|
||||
class="mx-auto mt-5 mb-2 cursor-pointer"
|
||||
class="mx-auto cursor-pointer"
|
||||
size="200"
|
||||
@click.native="triggerFileUpload"
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<b-link>
|
||||
Remove profile picture
|
||||
</b-link>
|
||||
|
||||
<strong>@{{ profile.userName }}</strong>
|
||||
</div>
|
||||
|
||||
<pre>{{ file }}</pre>
|
||||
|
||||
<b-form-file
|
||||
class="d-none file-input"
|
||||
v-model="file"
|
||||
|
|
@ -165,19 +176,21 @@
|
|||
class="mb-3"
|
||||
/>
|
||||
|
||||
<b-button class="mb-3" v-b-modal.boardWallpaper>
|
||||
<b-button class="mb-3" v-b-toggle.boardWallpaper>
|
||||
{{ wallpaperImage ? 'Change wallpaper' : 'Set wallpaper' }}
|
||||
</b-button>
|
||||
|
||||
<b-modal
|
||||
<b-sidebar
|
||||
id="boardWallpaper"
|
||||
size="xl"
|
||||
scrollable
|
||||
hide-footer
|
||||
:header-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:header-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
:body-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:body-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
right
|
||||
width="380px"
|
||||
shadow
|
||||
no-header
|
||||
backdrop
|
||||
body-class="p-3"
|
||||
:bg-variant="darkTheme ? 'dark' : 'light'"
|
||||
:text-variant="darkTheme ? 'light' : 'dark'"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
|
|
@ -188,12 +201,12 @@
|
|||
</modal-header>
|
||||
</template>
|
||||
|
||||
<wallpapers-list
|
||||
<WallpapersList
|
||||
selectable
|
||||
@select="selectWallpaper"
|
||||
/>
|
||||
<!-- :selected="board.backgroundUrl" -->
|
||||
</b-modal>
|
||||
</b-sidebar>
|
||||
|
||||
<footer class="my-3">
|
||||
<b-button
|
||||
|
|
@ -216,6 +229,7 @@
|
|||
</footer>
|
||||
</b-form>
|
||||
|
||||
<!-- TODO: move to create profile page -->
|
||||
<b-form
|
||||
v-else
|
||||
autocomplete="off"
|
||||
|
|
@ -278,7 +292,7 @@
|
|||
|
||||
<hr class="my-3" />
|
||||
</b-form>
|
||||
</div>
|
||||
</b-sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -386,6 +400,7 @@ export default {
|
|||
|
||||
this.avatarImage = await this.$store.dispatch('LOAD_FIREBASE_IMAGE', this.profile.avatar);
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.$bvToast.toast('There was an error uploading wallpaper', { variant: 'danger' });
|
||||
}
|
||||
|
||||
|
|
@ -1,20 +1,15 @@
|
|||
<template lang="html">
|
||||
<b-modal
|
||||
id="keyboard-shortcuts"
|
||||
title="BootstrapVue"
|
||||
:header-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:header-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
:body-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:body-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
hide-footer
|
||||
<b-sidebar
|
||||
id="keyboard-shortcuts-sidebar"
|
||||
shadow
|
||||
no-header
|
||||
backdrop
|
||||
width="380px"
|
||||
body-class="p-3"
|
||||
:bg-variant="darkTheme ? 'dark' : 'light'"
|
||||
:text-variant="darkTheme ? 'light' : 'dark'"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Keyboard Shortcuts"
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<h3 class="mb-3">Keyboard Shortcuts</h3>
|
||||
<p>
|
||||
<kbd class="mr-1">Esc </kbd>
|
||||
Close modal
|
||||
|
|
@ -34,7 +29,7 @@
|
|||
|
||||
{{ $t(`shortcuts.${name.substr(6)}`) }}
|
||||
</p>
|
||||
</b-modal>
|
||||
</b-sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<!-- TODO: get better (and) colorized icons for active state -->
|
||||
<!-- TODO: bring settings to nav, remove page. -->
|
||||
<!-- TODO: highlight menu item if active -->
|
||||
<!-- TODO: put login/logout button at top right corner -->
|
||||
<template lang="html">
|
||||
<nav :class="[`nav-${navPosition}`, darkTheme ? 'bg-dark' : 'bg-light']" >
|
||||
<b-button
|
||||
|
|
|
|||
|
|
@ -59,10 +59,10 @@
|
|||
<script>
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import firebase from 'firebase/compat/app';
|
||||
// move to actions
|
||||
import { FIREBASE_CONFIG } from '@/constants';
|
||||
// TODO: finish and test delete account
|
||||
// import { FIREBASE_CONFIG } from '@/constants';
|
||||
|
||||
const app = initializeApp(FIREBASE_CONFIG);
|
||||
// const app = initializeApp(FIREBASE_CONFIG);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1,184 +0,0 @@
|
|||
<template lang="html">
|
||||
<b-modal
|
||||
id="previewWallpaper"
|
||||
hide-footer
|
||||
scrollable
|
||||
:header-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:header-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
:body-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:body-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
size="xl"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="wallpaper.name"
|
||||
subtitle="Wallpaper"
|
||||
@close="close"
|
||||
>
|
||||
<b-dropdown
|
||||
:variant="darkTheme ? 'black' : 'light'"
|
||||
no-caret
|
||||
right
|
||||
>
|
||||
<template #button-content>
|
||||
<b-spinner v-if="saving || deleting" small />
|
||||
<i v-else class="fas fa-ellipsis-h" aria-hidden="true" />
|
||||
</template>
|
||||
|
||||
<b-dropdown-item v-b-modal.setAsWallpaper>Set as wallpaper</b-dropdown-item>
|
||||
|
||||
<b-modal
|
||||
id="setAsWallpaper"
|
||||
size="lg"
|
||||
:header-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:header-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
:body-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:body-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Apply wallpaper to board"
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="board-grid mx-2">
|
||||
<MiniBoard
|
||||
v-for="board in formattedBoards"
|
||||
:key="board.id"
|
||||
:board="board"
|
||||
@click.native="setAsWallpaper(board)"
|
||||
/>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<b-dropdown-divider />
|
||||
<b-dropdown-item
|
||||
variant="danger"
|
||||
v-b-modal.deleteConfirm
|
||||
>
|
||||
Delete wallpaper
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
||||
<b-modal
|
||||
id="deleteConfirm"
|
||||
:header-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:header-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
:body-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:body-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
hide-footer
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Are you sure?"
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<p>Wallpaper will be permanently removed</p>
|
||||
|
||||
<b-alert v-if="boardsWithWallpaper.length" show variant="warning">
|
||||
This wallpaper is being used by {{ boardsWithWallpaper.length }} boards.
|
||||
</b-alert>
|
||||
|
||||
<b-button @click="deleteFile(wallpaper)" variant="danger">
|
||||
<b-spinner v-if="deleting" small />
|
||||
<template v-else>Delete</template>
|
||||
</b-button>
|
||||
</b-modal>
|
||||
</modal-header>
|
||||
</template>
|
||||
|
||||
<b-img
|
||||
v-if="wallpaper.url"
|
||||
:src="wallpaper.url"
|
||||
class="mw-100 rounded"
|
||||
/>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import MiniBoard from '@/components/Board/MiniBoard';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
deleting: false,
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
MiniBoard,
|
||||
},
|
||||
|
||||
props: {
|
||||
wallpaper: {
|
||||
type: [Object, Boolean],
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['boards', 'wallpapers']),
|
||||
...mapGetters(['darkTheme']),
|
||||
|
||||
formattedBoards() {
|
||||
return this.boards.map((board) => ({ ...board, backgroundUrl: this.getWallpaperUrl(board.backgroundUrl) }));
|
||||
},
|
||||
|
||||
wallpaperUrl() {
|
||||
return this.wallpaper?.url;
|
||||
},
|
||||
|
||||
boardsWithWallpaper() {
|
||||
return this.boards.filter(({ backgroundUrl }) => backgroundUrl === this.wallpaper?.fullPath) || [];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getWallpaperUrl(url) {
|
||||
if (!url) return null;
|
||||
if (url?.includes('igdb.com')) return url;
|
||||
|
||||
return this.wallpapers?.find(({ ref }) => ref === url)?.url;
|
||||
},
|
||||
|
||||
async deleteFile(file) {
|
||||
this.deleting = true;
|
||||
|
||||
await this.$store.dispatch('DELETE_WALLPAPER', file)
|
||||
.catch(() => {
|
||||
this.$bvToast.toast('There was an error deleting wallpaper', { variant: 'danger' });
|
||||
});
|
||||
|
||||
this.deleting = false;
|
||||
this.$bvModal.hide('previewWallpaper');
|
||||
},
|
||||
|
||||
async setAsWallpaper(board) {
|
||||
try {
|
||||
this.saving = true;
|
||||
|
||||
this.$store.commit('SET_ACTIVE_BOARD', { ...board, backgroundUrl: this.wallpaper.fullPath });
|
||||
|
||||
await this.$store.dispatch('SAVE_BOARD');
|
||||
} catch (e) {
|
||||
this.saving = false;
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
this.$bvModal.hide('previewWallpaper');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.board-thumbnail {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
177
src/components/Wallpapers/WallpaperDetailsSidebar.vue
Normal file
177
src/components/Wallpapers/WallpaperDetailsSidebar.vue
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
<template lang="html">
|
||||
<b-sidebar
|
||||
id="wallpaper-details-sidebar"
|
||||
scrollable
|
||||
right
|
||||
width="380px"
|
||||
shadow
|
||||
:visible="visible"
|
||||
no-header
|
||||
backdrop
|
||||
body-class="px-3 pb-3"
|
||||
:bg-variant="darkTheme ? 'dark' : 'light'"
|
||||
:text-variant="darkTheme ? 'light' : 'dark'"
|
||||
@hidden="closeSidebar"
|
||||
>
|
||||
<div
|
||||
class="active-wallpaper pt-3"
|
||||
:class="darkTheme ? 'bg-dark' : 'bg-light'"
|
||||
>
|
||||
<b-img
|
||||
v-if="activeWallpaper.url"
|
||||
:src="activeWallpaper.url"
|
||||
class="mw-100 rounded mb-2"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-between pb-2">
|
||||
<div>
|
||||
<i class="fa-solid fa-file-png fa-fw" />
|
||||
{{ activeWallpaper.name }}
|
||||
<!-- {{ activeWallpaper.size }} -->
|
||||
<!-- {{ activeWallpaper.timeCreated }} -->
|
||||
</div>
|
||||
|
||||
<b-dropdown id="wallpaperOptions">
|
||||
<b-dropdown-item v-b-toggle.boards-list>
|
||||
Set as wallpaper
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item v-b-modal.deleteConfirm variant="danger">
|
||||
Delete wallpaper
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<b-collapse id="boards-list" class="mt-2">
|
||||
<MiniBoard
|
||||
v-for="board in formattedBoards"
|
||||
:key="board.id"
|
||||
:board="board"
|
||||
@click.native="setAsWallpaper(board)"
|
||||
/>
|
||||
</b-collapse>
|
||||
|
||||
<b-modal
|
||||
id="deleteConfirm"
|
||||
:header-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:header-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
:body-bg-variant="darkTheme ? 'dark' : 'transparent'"
|
||||
:body-text-variant="darkTheme ? 'white' : 'dark'"
|
||||
hide-footer
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Are you sure?"
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<p>Wallpaper will be permanently removed</p>
|
||||
|
||||
<b-alert v-if="boardsWithWallpaper.length" show variant="warning">
|
||||
This wallpaper is being used by {{ boardsWithWallpaper.length }} boards.
|
||||
</b-alert>
|
||||
|
||||
<b-button @click="deleteFile(wallpaper)" variant="danger">
|
||||
<b-spinner v-if="deleting" small />
|
||||
<template v-else>Delete</template>
|
||||
</b-button>
|
||||
</b-modal>
|
||||
</b-sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import MiniBoard from '@/components/Board/MiniBoard';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
deleting: false,
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
MiniBoard,
|
||||
},
|
||||
|
||||
props: {
|
||||
wallpaper: {
|
||||
type: [Object, Boolean],
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['boards', 'wallpapers', 'activeWallpaper']),
|
||||
...mapGetters(['darkTheme']),
|
||||
|
||||
formattedBoards() {
|
||||
return this.boards.map((board) => ({ ...board, backgroundUrl: this.getWallpaperUrl(board.backgroundUrl) }));
|
||||
},
|
||||
|
||||
wallpaperUrl() {
|
||||
return this.wallpaper?.url;
|
||||
},
|
||||
|
||||
boardsWithWallpaper() {
|
||||
return this.boards.filter(({ backgroundUrl }) => backgroundUrl === this.wallpaper?.fullPath) || [];
|
||||
},
|
||||
|
||||
visible() {
|
||||
return Boolean(this.activeWallpaper?.fullPath);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeSidebar() {
|
||||
this.$store.commit('CLEAR_ACTIVE_WALLPAPER');
|
||||
},
|
||||
|
||||
getWallpaperUrl(url) {
|
||||
if (!url) return null;
|
||||
if (url?.includes('igdb.com')) return url;
|
||||
|
||||
return this.wallpapers?.find(({ ref }) => ref === url)?.url;
|
||||
},
|
||||
|
||||
async deleteFile(file) {
|
||||
this.deleting = true;
|
||||
|
||||
await this.$store.dispatch('DELETE_WALLPAPER', file)
|
||||
.catch(() => {
|
||||
this.$bvToast.toast('There was an error deleting wallpaper', { variant: 'danger' });
|
||||
});
|
||||
|
||||
this.deleting = false;
|
||||
this.$bvModal.hide('wallpaper-details-sidebar');
|
||||
},
|
||||
|
||||
async setAsWallpaper(board) {
|
||||
try {
|
||||
this.saving = true;
|
||||
|
||||
this.$store.commit('SET_ACTIVE_BOARD', { ...board, backgroundUrl: this.wallpaper.fullPath });
|
||||
|
||||
await this.$store.dispatch('SAVE_BOARD');
|
||||
} catch (e) {
|
||||
this.saving = false;
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
this.$bvModal.hide('wallpaper-details-sidebar');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.active-wallpaper {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +1,39 @@
|
|||
<template lang="html">
|
||||
<section>
|
||||
<PreviewWallpaperModal :wallpaper="activeWallpaper" />
|
||||
|
||||
<masonry
|
||||
:cols="{ default: 5, 1200: 4, 768: 3, 480: 2 }"
|
||||
gutter="16px"
|
||||
>
|
||||
<b-img
|
||||
<b-list-group>
|
||||
<b-list-group-item
|
||||
v-for="wallpaper in sortedWallpapers"
|
||||
:variant="darkTheme ? 'dark' : 'light'"
|
||||
:key="wallpaper.name"
|
||||
button
|
||||
@click="handleClick(wallpaper)"
|
||||
class="flex-column align-items-start"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<b-img
|
||||
:src="wallpaper.url"
|
||||
class="mb-3"
|
||||
rounded
|
||||
fluid
|
||||
@click="handleClick(wallpaper)"
|
||||
width="200"
|
||||
/>
|
||||
</masonry>
|
||||
</section>
|
||||
|
||||
<!-- <small>{{ wallpaper.size }}</small> -->
|
||||
</div>
|
||||
|
||||
<p class="mb-1">
|
||||
{{ wallpaper.name }}
|
||||
{{ wallpaper.timeCreated }}
|
||||
</p>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sortby from 'lodash.sortby';
|
||||
import { THUMBNAIL_PREFIX } from '@/constants';
|
||||
import PreviewWallpaperModal from '@/components/Wallpapers/PreviewWallpaperModal';
|
||||
import { mapState } from 'vuex';
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PreviewWallpaperModal,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -36,14 +42,10 @@ export default {
|
|||
saving: Boolean,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeWallpaper: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['wallpapers']),
|
||||
...mapGetters(['darkTheme']),
|
||||
|
||||
|
||||
sortedWallpapers() {
|
||||
const wallpapers = this.wallpapers?.filter((wallpaper) => !wallpaper?.fullPath?.includes(THUMBNAIL_PREFIX));
|
||||
|
|
@ -63,19 +65,8 @@ export default {
|
|||
},
|
||||
|
||||
openPreview(wallpaper) {
|
||||
this.activeWallpaper = wallpaper;
|
||||
this.$bvModal.show('previewWallpaper');
|
||||
this.$store.commit('SET_ACTIVE_WALLPAPER', wallpaper);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.wallpaper-card {
|
||||
height: 140px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
<div v-else>
|
||||
<portal to="pageTitle">
|
||||
Boards
|
||||
<h3>Boards</h3>
|
||||
</portal>
|
||||
|
||||
<portal to="headerActions">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</modal-header>
|
||||
</template>
|
||||
|
||||
<wallpapers-list selectable :selected="board.backgroundUrl" @select="selectWallpaper" />
|
||||
<WallpapersList selectable :selected="board.backgroundUrl" @select="selectWallpaper" />
|
||||
</b-modal>
|
||||
|
||||
<b-form-group label="Board name" label-for="name">
|
||||
|
|
|
|||
|
|
@ -10,11 +10,14 @@
|
|||
<b-button
|
||||
v-if="isProfileOwner"
|
||||
variant="primary"
|
||||
:to="{ name: 'profile' }"
|
||||
v-b-toggle.profile-sidebar
|
||||
>
|
||||
Edit profile
|
||||
</b-button>
|
||||
</portal>
|
||||
|
||||
<EditProfileSidebar />
|
||||
|
||||
<div class="text-center">
|
||||
<b-avatar
|
||||
:src="avatarImage"
|
||||
|
|
@ -90,12 +93,14 @@
|
|||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import MiniBoard from '@/components/Board/MiniBoard';
|
||||
import EditProfileSidebar from '@/components/EditProfileSidebar';
|
||||
import EmptyState from '@/components/EmptyState';
|
||||
import { getImageThumbnail } from '@/utils';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MiniBoard,
|
||||
EditProfileSidebar,
|
||||
EmptyState,
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<UploadWallpaperButton v-if="user" />
|
||||
</empty-state>
|
||||
|
||||
<wallpapers-list v-else />
|
||||
<WallpapersList v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -38,7 +38,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
file: null,
|
||||
saving: false,
|
||||
loading: false,
|
||||
wallpaperUrls: [],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -100,14 +100,6 @@ const routes = [
|
|||
title: 'Settings',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'profile',
|
||||
path: '/profile',
|
||||
component: () => import(/* webpackChunkName: "settings" */ '@/pages/EditProfilePage'),
|
||||
meta: {
|
||||
title: 'Profile',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'steam',
|
||||
path: '/steam',
|
||||
|
|
|
|||
|
|
@ -171,17 +171,23 @@ export default {
|
|||
commit("SET_SETTINGS", docSnap.data());
|
||||
},
|
||||
|
||||
// TODO: get legacy notes, add UI to migrate?
|
||||
// const docSnap = await getDoc(doc(db, "notes", state.user.uid));
|
||||
|
||||
async LOAD_NOTES({ commit, state }) {
|
||||
const q = query(collection(db, "notes-v2"), where("owner", "==", state.user.uid));
|
||||
// const q = query(collection(db, "notes-v2"), where("owner", "==", state.user.uid));
|
||||
|
||||
const querySnapshot = await getDocs(q);
|
||||
// const querySnapshot = await getDocs(q);
|
||||
|
||||
const notes = querySnapshot.docs.map((doc) => ({
|
||||
...doc.data(),
|
||||
id: doc.id,
|
||||
}));
|
||||
// const notes = querySnapshot.docs.map((doc) => ({
|
||||
// ...doc.data(),
|
||||
// id: doc.id,
|
||||
// }));
|
||||
|
||||
commit("SET_NOTES", notes);
|
||||
// commit("SET_NOTES", notes);
|
||||
const docSnap = await getDoc(doc(db, "notes", state.user.uid));
|
||||
|
||||
commit("SET_NOTES", docSnap.data());
|
||||
},
|
||||
|
||||
async LOAD_NOTE({ state }, noteId) {
|
||||
|
|
@ -337,7 +343,7 @@ export default {
|
|||
async UPLOAD_WALLPAPER({ state, commit }, file) {
|
||||
const storageRef = ref(storage, `${state.user.uid}/wallpapers/${file.name}`);
|
||||
|
||||
uploadBytes(storageRef, file).then(async ({ metadata }) => {
|
||||
const { metadata } = await uploadBytes(storageRef, file);
|
||||
const downloadURL = await getDownloadURL(ref(storage, metadata.fullPath));
|
||||
|
||||
const wallpaper = {
|
||||
|
|
@ -348,8 +354,7 @@ export default {
|
|||
url: downloadURL,
|
||||
};
|
||||
|
||||
commit("ADD_WALLPAPER", wallpaper);
|
||||
});
|
||||
return commit("ADD_WALLPAPER", wallpaper);
|
||||
},
|
||||
|
||||
// EXTERNAL, clean up, use await, etc...
|
||||
|
|
|
|||
|
|
@ -21,6 +21,14 @@ export default {
|
|||
state.twitchToken = token;
|
||||
},
|
||||
|
||||
SET_ACTIVE_WALLPAPER(state, activeWallpaper) {
|
||||
state.activeWallpaper = activeWallpaper;
|
||||
},
|
||||
|
||||
CLEAR_ACTIVE_WALLPAPER(state) {
|
||||
state.activeWallpaper = {};
|
||||
},
|
||||
|
||||
SET_HIGHLIGHTED_GAME(state, gameId) {
|
||||
state.highlightedGame = gameId;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,5 +20,6 @@ export default {
|
|||
twitchToken: null,
|
||||
user: null,
|
||||
wallpapers: [],
|
||||
activeWallpaper: {},
|
||||
menuOpen: true,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue