diff options
Diffstat (limited to 'src/site/components')
20 files changed, 2229 insertions, 656 deletions
diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue new file mode 100644 index 0000000..4067853 --- /dev/null +++ b/src/site/components/album/AlbumDetails.vue @@ -0,0 +1,270 @@ +<template> + <div class="details"> + <h2>Public links for this album:</h2> + + <b-table + :data="details.links || []" + :mobile-cards="true"> + <b-table-column + v-slot="props" + field="identifier" + label="Link" + centered> + <a + :href="`${config.URL}/a/${props.row.identifier}`" + target="_blank"> + {{ props.row.identifier }} + </a> + </b-table-column> + + <b-table-column + v-slot="props" + field="views" + label="Views" + centered> + {{ props.row.views }} + </b-table-column> + + <b-table-column + v-slot="props" + field="enableDownload" + label="Allow download" + centered> + <b-switch + v-model="props.row.enableDownload" + @input="updateLinkOptions(albumId, props.row)" /> + </b-table-column> + + <b-table-column + v-slot="props" + field="enabled" + numeric> + <button + :class="{ 'is-loading': isDeleting(props.row.identifier) }" + class="button is-danger" + :disabled="isDeleting(props.row.identifier)" + @click="promptDeleteAlbumLink(albumId, props.row.identifier)"> + Delete link + </button> + </b-table-column> + + <template slot="empty"> + <div class="has-text-centered"> + <i class="icon-misc-mood-sad" /> + </div> + <div class="has-text-centered"> + Nothing here + </div> + </template> + + <template slot="footer"> + <div class="level is-paddingless"> + <div class="level-left"> + <div class="level-item"> + <b-field v-if="auth.user.isAdmin"> + <p class="control"> + <button + :class="{ 'is-loading': isCreatingLink }" + class="button is-primary reset-font-size-button" + style="float: left" + @click="createLink(albumId)"> + Create new link + </button> + </p> + <p class="control"> + <b-dropdown> + <button slot="trigger" class="button is-primary reset-font-size-button"> + <b-icon icon="menu-down" /> + </button> + + <b-dropdown-item @click="createCustomLink(albumId)"> + Custom link + </b-dropdown-item> + </b-dropdown> + </p> + </b-field> + <button + v-else + :class="{ 'is-loading': isCreatingLink }" + class="button is-primary" + style="float: left" + @click="createLink(albumId)"> + Create new link + </button> + </div> + <div class="level-item"> + <span class="has-text-default">{{ details.links.length }} / {{ config.maxLinksPerAlbum }} links created</span> + </div> + </div> + + <div class="level-right"> + <div class="level-item"> + <button + class="button is-danger" + style="float: right" + @click="promptDeleteAlbum(albumId)"> + Delete album + </button> + </div> + </div> + </div> + </template> + </b-table> + </div> +</template> + +<script> +import { mapState, mapActions } from 'vuex'; + +export default { + props: { + albumId: { + type: Number, + default: 0 + }, + details: { + type: Object, + default: () => ({}) + } + }, + data() { + return { + isCreatingLink: false, + isDeletingLinks: [] + }; + }, + computed: mapState(['config', 'auth']), + methods: { + ...mapActions({ + deleteAlbumAction: 'albums/deleteAlbum', + deleteAlbumLinkAction: 'albums/deleteLink', + updateLinkOptionsAction: 'albums/updateLinkOptions', + createLinkAction: 'albums/createLink', + createCustomLinkAction: 'albums/createCustomLink', + alert: 'alert/set' + }), + promptDeleteAlbum(id) { + this.$buefy.dialog.confirm({ + type: 'is-danger', + message: 'Are you sure you want to delete this album?', + onConfirm: () => this.deleteAlbum(id) + }); + }, + promptDeleteAlbumLink(albumId, identifier) { + this.$buefy.dialog.confirm({ + type: 'is-danger', + message: 'Are you sure you want to delete this album link?', + onConfirm: () => this.deleteAlbumLink(albumId, identifier) + }); + }, + async deleteAlbum(id) { + try { + const response = await this.deleteAlbumAction(id); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); + } + }, + async deleteAlbumLink(albumId, identifier) { + this.isDeletingLinks.push(identifier); + try { + const response = await this.deleteAlbumLinkAction({ albumId, identifier }); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); + } finally { + this.isDeletingLinks = this.isDeletingLinks.filter((e) => e !== identifier); + } + }, + async createLink(albumId) { + this.isCreatingLink = true; + try { + const response = await this.createLinkAction(albumId); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); + } finally { + this.isCreatingLink = false; + } + }, + async updateLinkOptions(albumId, linkOpts) { + try { + const response = await this.updateLinkOptionsAction({ albumId, linkOpts }); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); + } + }, + async createCustomLink(albumId) { + this.$buefy.dialog.prompt({ + message: 'Custom link identifier', + inputAttrs: { + placeholder: '', + maxlength: 10 + }, + trapFocus: true, + onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value }) + }); + }, + isDeleting(identifier) { + return this.isDeletingLinks.indexOf(identifier) > -1; + } + } +}; +</script> + +<style lang="scss" scoped> + @import '~/assets/styles/_colors.scss'; + + .reset-font-size-button { + font-size: 1rem; + height: 2.25em; + } + + div.details { + flex: 0 1 100%; + padding-left: 2em; + padding-top: 1em; + min-height: 50px; + + .b-table { + padding: 2em 0em; + + .table-wrapper { + -webkit-box-shadow: $boxShadowLight; + box-shadow: $boxShadowLight; + } + } + } +</style> + +<style lang="scss"> + @import '~/assets/styles/_colors.scss'; + + .b-table { + .table-wrapper { + -webkit-box-shadow: $boxShadowLight; + box-shadow: $boxShadowLight; + } + } + + .dialog.modal .modal-card-body input { + border: 2px solid #21252d; + border-radius: 0.3em !important; + background: rgba(0, 0, 0, 0.15); + padding: 1rem; + color: $textColor; + height: 3rem; + &:focus, + &:hover { + border: 2px solid #21252d; + } + &::placeholder { + color: $textColor; + } + } +</style> diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue new file mode 100644 index 0000000..1e1b2cf --- /dev/null +++ b/src/site/components/album/AlbumEntry.vue @@ -0,0 +1,187 @@ +<template> + <div class="album"> + <div + class="arrow-container" + @click="toggleDetails(album)"> + <i + :class="{ active: isExpanded }" + class="icon-arrow" /> + </div> + <div class="thumb"> + <figure class="image is-64x64 thumb"> + <img src="~/assets/images/blank_darker.png"> + </figure> + </div> + <div class="info"> + <h4> + <router-link :to="`/dashboard/albums/${album.id}`"> + {{ album.name }} + </router-link> + </h4> + <span> + Created <span class="is-inline has-text-weight-semibold"><timeago :since="album.createdAt" /></span> + </span> + <span>{{ album.fileCount || 0 }} files</span> + </div> + <div class="latest is-hidden-mobile"> + <template v-if="album.fileCount > 0"> + <div + v-for="file of album.files" + :key="file.id" + class="thumb"> + <figure class="image is-64x64"> + <a + :href="file.url" + target="_blank"> + <img :src="file.thumbSquare"> + </a> + </figure> + </div> + <div + v-if="album.fileCount > 5" + class="thumb more no-background"> + <router-link :to="`/dashboard/albums/${album.id}`"> + {{ album.fileCount - 5 }}+ more + </router-link> + </div> + </template> + <template v-else> + <span class="no-files">Nothing to show here</span> + </template> + </div> + + <AlbumDetails + v-if="isExpanded" + :details="getDetails(album.id)" + :albumId="album.id" /> + </div> +</template> + +<script> +import { mapGetters } from 'vuex'; +import AlbumDetails from '~/components/album/AlbumDetails.vue'; + +export default { + components: { + AlbumDetails + }, + props: { + album: { + type: Object, + default: () => ({}) + } + }, + computed: { + ...mapGetters({ + isExpandedGetter: 'albums/isExpanded', + getDetails: 'albums/getDetails' + }), + isExpanded() { + return this.isExpandedGetter(this.album.id); + } + }, + methods: { + async toggleDetails(album) { + if (!this.isExpanded) { + await this.$store.dispatch('albums/fetchDetails', album.id); + } + this.$store.commit('albums/toggleExpandedState', album.id); + } + } +}; +</script> + +<style lang="scss" scoped> + @import '~/assets/styles/_colors.scss'; + + div.album { + display: flex; + flex-wrap: wrap; + margin-bottom: 10px; + + div.arrow-container { + width: 2em; + height: 64px; + position: relative; + cursor: pointer; + + i { + border: 2px solid $defaultTextColor; + border-right: 0; + border-top: 0; + display: block; + height: 1em; + position: absolute; + transform: rotate(-135deg); + transform-origin: center; + width: 1em; + z-index: 4; + top: 22px; + + -webkit-transition: transform 0.1s linear; + -moz-transition: transform 0.1s linear; + -ms-transition: transform 0.1s linear; + -o-transition: transform 0.1s linear; + transition: transform 0.1s linear; + + &.active { + transform: rotate(-45deg); + } + } + } + + div.thumb { + width: 64px; + height: 64px; + -webkit-box-shadow: $boxShadowLight; + box-shadow: $boxShadowLight; + } + + div.info { + margin-left: 15px; + text-align: left; + h4 { + font-size: 1.5rem; + a { + color: $defaultTextColor; + font-weight: 400; + &:hover { text-decoration: underline; } + } + } + span { display: block; } + span:nth-child(3) { + font-size: 0.9rem; + } + } + + div.latest { + flex-grow: 1; + justify-content: flex-end; + display: flex; + margin-left: 15px; + + span.no-files { + font-size: 1.5em; + color: #b1b1b1; + padding-top: 17px; + } + + div.more { + width: 64px; + height: 64px; + background: white; + display: flex; + align-items: center; + padding: 10px; + text-align: center; + a { + line-height: 1rem; + color: $defaultTextColor; + &:hover { text-decoration: underline; } + } + } + } + } + + div.no-background { background: none !important; } +</style> diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue index 9f51fee..b409cf5 100644 --- a/src/site/components/footer/Footer.vue +++ b/src/site/components/footer/Footer.vue @@ -1,12 +1,18 @@ <template> + <!-- eslint-disable max-len --> <footer> - <svg viewBox="0 0 1920 250" + <svg + viewBox="0 0 1920 250" class="waves"> - <path d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239" + + <path + d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239" class="wave-1" /> - <path d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z" + <path + d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z" class="wave-2" /> - <path d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z" + <path + d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z" class="wave-3" /> </svg> <div> @@ -15,7 +21,8 @@ <div class="column is-narrow"> <h4>lolisafe</h4> <span>© 2017-2020 - <a href="https://github.com/pitu" + <a + href="https://github.com/pitu" class="no-block">Pitu</a> </span><br> <span>v{{ version }}</span> @@ -24,22 +31,33 @@ <div class="columns is-gapless"> <div class="column" /> <div class="column"> - <nuxt-link to="/">Home</nuxt-link> - <nuxt-link to="/faq">FAQ</nuxt-link> + <nuxt-link to="/"> + Home + </nuxt-link> + <nuxt-link to="/faq"> + FAQ + </nuxt-link> </div> <div class="column"> - <nuxt-link to="/dashboard">Dashboard</nuxt-link> - <nuxt-link to="/dashboard">Files</nuxt-link> - <nuxt-link to="/dashboard/albums">Albums</nuxt-link> - <nuxt-link to="/dashboard/account">Account</nuxt-link> + <nuxt-link to="/dashboard"> + Dashboard + </nuxt-link> + <nuxt-link to="/dashboard"> + Files + </nuxt-link> + <nuxt-link to="/dashboard/albums"> + Albums + </nuxt-link> + <nuxt-link to="/dashboard/account"> + Account + </nuxt-link> </div> <div class="column"> <a href="https://github.com/weebdev/lolisafe">GitHub</a> - <a href="https://patreon.com/pitu">Patreon</a> - <a href="https://discord.gg/5g6vgwn">Discord</a> </div> <div class="column"> - <a v-if="loggedIn" + <a + v-if="loggedIn" @click="createShareXThing">ShareX Config</a> <a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a> </div> @@ -50,27 +68,32 @@ </div> </footer> </template> + <script> +/* eslint-disable no-restricted-globals */ + +import { mapState, mapGetters } from 'vuex'; import { saveAs } from 'file-saver'; + export default { computed: { - loggedIn() { - return this.$store.state.loggedIn; - }, - version() { - return this.$store.state.config.version; - } + ...mapGetters({ loggedIn: 'auth/isLoggedIn' }), + ...mapState({ + version: (state) => state.config.version, + serviceName: (state) => state.config.serviceName, + token: (state) => state.auth.token + }) }, methods: { createShareXThing() { const sharexFile = `{ - "Name": "${this.$store.state.config.serviceName}", + "Name": "${this.serviceName}", "DestinationType": "ImageUploader, FileUploader", "RequestType": "POST", "RequestURL": "${location.origin}/api/upload", "FileFormName": "files[]", "Headers": { - "authorization": "Bearer ${this.$store.state.token}", + "authorization": "Bearer ${this.token}", "accept": "application/vnd.lolisafe.json" }, "ResponseType": "Text", @@ -83,6 +106,7 @@ export default { } }; </script> + <style lang="scss" scoped> @import '~/assets/styles/_colors.scss'; footer { diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue index d0a5ea3..ea568f0 100644 --- a/src/site/components/grid/Grid.vue +++ b/src/site/components/grid/Grid.vue @@ -1,163 +1,135 @@ <template> <div> - <div v-if="enableToolbar" - class="toolbar"> - <div class="block"> - <b-radio v-model="showList" - name="name" - :native-value="true"> - List - </b-radio> - <b-radio v-model="showList" - name="name" - :native-value="false"> - Grid - </b-radio> + <nav class="level"> + <div class="level-left"> + <div class="level-item"> + <slot name="pagination" /> + </div> </div> - </div> + <!-- TODO: Externalize this so it can be saved as an user config (and between re-renders) --> + <div v-if="enableToolbar" class="level-right toolbar"> + <div class="level-item"> + <div class="block"> + <b-radio v-model="showList" name="name" :native-value="true"> + List + </b-radio> + <b-radio v-model="showList" name="name" :native-value="false"> + Grid + </b-radio> + </div> + </div> + </div> + </nav> - <template v-if="!showList"> - <Waterfall :gutterWidth="10" - :gutterHeight="4"> - <!-- - TODO: Implement search based on originalName, albumName and tags - <input v-if="enableSearch" - v-model="searchTerm" - type="text" - placeholder="Search..." - @input="search()" - @keyup.enter="search()"> - --> - - <!-- TODO: Implement pagination --> - - <WaterfallItem v-for="(item, index) in gridFiles" - v-if="showWaterfall" - :key="index" - :width="width" - move-class="item-move"> + <template v-if="!images.showList"> + <Waterfall + :gutterWidth="10" + :gutterHeight="4" + :options="{fitWidth: true}" + :itemWidth="width" + :items="gridFiles"> + <template v-slot="{item}"> <template v-if="isPublic"> - <a :href="`${item.url}`" - target="_blank"> + <a + :href="`${item.url}`" + class="preview-container" + target="_blank" + @mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)" + @mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)"> + <img :src="item.thumb ? item.thumb : blank"> - <span v-if="!item.thumb && item.name" - class="extension">{{ item.name.split('.').pop() }}</span> + <div v-if="item.preview && isHovered(item.id)" class="preview"> + <video ref="video" class="preview" autoplay loop muted> + <source :src="item.preview" type="video/mp4"> + </video> + </div> + + <span v-if="!item.thumb && item.name" class="extension">{{ + item.name.split('.').pop() + }}</span> </a> </template> <template v-else> <img :src="item.thumb ? item.thumb : blank"> - <span v-if="!item.thumb && item.name" - class="extension">{{ item.name.split('.').pop() }}</span> - <div v-if="!isPublic" + <div v-if="item.preview && isHovered(item.id)" class="preview"> + <video ref="video" class="preview" autoplay loop muted> + <source :src="item.preview" type="video/mp4"> + </video> + </div> + + <span v-if="!item.thumb && item.name" class="extension">{{ item.name.split('.').pop() }}</span> + <div + v-if="!isPublic" :class="{ fixed }" - class="actions"> - <b-tooltip label="Link" - position="is-top"> - <a :href="`${item.url}`" - target="_blank" - class="btn"> - <i class="icon-web-code" /> - </a> - </b-tooltip> - <b-tooltip label="Albums" - position="is-top"> - <a class="btn" - @click="openAlbumModal(item)"> - <i class="icon-interface-window" /> + class="actions" + @mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)" + @mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)"> + <b-tooltip label="Link" position="is-top"> + <a :href="`${item.url}`" target="_blank" class="btn"> + <i class="mdi mdi-open-in-new" /> </a> </b-tooltip> - <!-- - <b-tooltip label="Tags" - position="is-top"> - <a @click="manageTags(item)"> - <i class="icon-ecommerce-tag-c" /> + <b-tooltip label="Edit" position="is-top"> + <a class="btn" @click="handleFileModal(item)"> + <i class="mdi mdi-pencil" /> </a> </b-tooltip> - --> - <b-tooltip label="Delete" - position="is-top"> - <a class="btn" - @click="deleteFile(item, index)"> - <i class="icon-editorial-trash-a-l" /> + <b-tooltip label="Delete" position="is-top"> + <a class="btn" @click="deleteFile(item)"> + <i class="mdi mdi-delete" /> </a> </b-tooltip> - <b-tooltip v-if="user && user.isAdmin" - label="More info" - position="is-top" - class="more"> + <b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more"> <nuxt-link :to="`/dashboard/admin/file/${item.id}`"> - <i class="icon-interface-more" /> + <i class="mdi mdi-dots-horizontal" /> </nuxt-link> </b-tooltip> </div> </template> - </WaterfallItem> + </template> </Waterfall> - <button - v-if="moreFiles" - class="button is-primary" - @click="loadMoreFiles">Load more</button> </template> <div v-else> - <b-table - :data="gridFiles || []" - :mobile-cards="true"> - <template slot-scope="props"> - <template v-if="!props.row.hideFromList"> - <b-table-column field="url" - label="URL"> - <a :href="props.row.url" - target="_blank">{{ props.row.url }}</a> - </b-table-column> - - <b-table-column field="albums" - label="Albums" - centered> - <template v-for="(album, index) in props.row.albums"> - <nuxt-link :key="index" - :to="`/dashboard/albums/${album.id}`"> - {{ album.name }} - </nuxt-link> - <template v-if="index < props.row.albums.length - 1">, </template> - </template> - - {{ props.row.username }} - </b-table-column> - - <b-table-column field="uploaded" - label="Uploaded" - centered> - <span><timeago :since="props.row.createdAt" /></span> - </b-table-column> - - <b-table-column field="purge" - centered> - <b-tooltip label="Albums" - position="is-top"> - <a class="btn" - @click="openAlbumModal(props.row)"> - <i class="icon-interface-window" /> - </a> - </b-tooltip> - <b-tooltip label="Delete" - position="is-top" - class="is-danger"> - <a class="is-danger" - @click="deleteFile(props.row)"> - <i class="icon-editorial-trash-a-l" /> - </a> - </b-tooltip> - <b-tooltip v-if="user && user.isAdmin" - label="More info" - position="is-top" - class="more"> - <nuxt-link :to="`/dashboard/admin/file/${props.row.id}`"> - <i class="icon-interface-more" /> - </nuxt-link> - </b-tooltip> - </b-table-column> + <b-table :data="gridFiles || []" :mobile-cards="true"> + <b-table-column v-slot="props" field="url" label="URL"> + <a :href="props.row.url" target="_blank">{{ props.row.url }}</a> + </b-table-column> + + <b-table-column v-slot="props" field="albums" label="Albums" centered> + <template v-for="(album, index) in props.row.albums"> + <nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`"> + {{ album.name }} + </nuxt-link> + <template v-if="index < props.row.albums.length - 1"> + , + </template> </template> - </template> + + {{ props.row.username }} + </b-table-column> + + <b-table-column v-slot="props" field="uploaded" label="Uploaded" centered> + <span><timeago :since="props.row.createdAt" /></span> + </b-table-column> + + <b-table-column v-slot="props" field="purge" centered> + <b-tooltip label="Edit" position="is-top"> + <a class="btn" @click="handleFileModal(props.row)"> + <i class="mdi mdi-pencil" /> + </a> + </b-tooltip> + <b-tooltip label="Delete" position="is-top" class="is-danger"> + <a class="is-danger" @click="deleteFile(props.row)"> + <i class="mdi mdi-delete" /> + </a> + </b-tooltip> + <b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more"> + <nuxt-link :to="`/dashboard/admin/file/${props.row.id}`"> + <i class="mdi mdi-dots-horizontal" /> + </nuxt-link> + </b-tooltip> + </b-table-column> + <template slot="empty"> <div class="has-text-centered"> <i class="icon-misc-mood-sad" /> @@ -167,54 +139,39 @@ </div> </template> <template slot="footer"> - <div class="has-text-right"> - {{ files.length }} files + <div class="has-text-right has-text-default"> + Showing {{ files.length }} files ({{ total }} total) </div> </template> </b-table> - <button - v-if="moreFiles" - class="button is-primary mt2" - @click="loadMoreFiles">Load more</button> </div> - <b-modal :active.sync="isAlbumsModalActive" - :width="640" - scroll="keep"> - <div class="card albumsModal"> - <div class="card-content"> - <div class="content"> - <h3 class="subtitle">Select the albums this file should be a part of</h3> - <hr> - <div class="albums-container"> - <div v-for="(album, index) in albums" - :key="index" - class="album"> - <div class="field"> - <b-checkbox :value="isAlbumSelected(album.id)" - @input="albumCheckboxClicked($event, album.id)">{{ album.name }}</b-checkbox> - </div> - </div> - </div> - </div> - </div> - </div> + + <b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive"> + <ImageInfo :file="modalData.file" :albums="modalData.albums" :tags="modalData.tags" /> </b-modal> </div> </template> + <script> +import { mapState } from 'vuex'; + import Waterfall from './waterfall/Waterfall.vue'; -import WaterfallItem from './waterfall/WaterfallItem.vue'; +import ImageInfo from '~/components/image-modal/ImageInfo.vue'; export default { components: { Waterfall, - WaterfallItem + ImageInfo }, props: { files: { type: Array, default: () => [] }, + total: { + type: Number, + default: 0 + }, fixed: { type: Boolean, default: false @@ -238,212 +195,309 @@ export default { }, data() { return { - showWaterfall: true, searchTerm: null, showList: false, - albums: [], + hoveredItems: [], isAlbumsModalActive: false, showingModalForFile: null, - filesOffset: 0, - filesOffsetEnd: 50, - filesPerPage: 50 + filesOffsetWaterfall: 0, + filesOffsetEndWaterfall: 50, + filesPerPageWaterfall: 50, + modalData: { + file: null, + tags: null, + albums: null + } }; }, computed: { - user() { - return this.$store.state.user; - }, + ...mapState({ + user: (state) => state.auth.user, + albums: (state) => state.albums.tinyDetails, + images: (state) => state.images + }), blank() { - return require('@/assets/images/blank2.jpg'); + // eslint-disable-next-line global-require, import/no-unresolved + return require('@/assets/images/blank.png'); }, gridFiles() { - return this.files.slice(this.filesOffset, this.filesOffsetEnd); - }, - moreFiles() { - return this.files.length > this.filesOffsetEnd; + return (this.files || []).filter((v) => !v.hideFromList); } }, + watch: { + showList: 'displayTypeChange' + }, + created() { + // TODO: Create a middleware for this + this.getAlbums(); + this.getTags(); + + this.showList = this.images.showList; + }, methods: { - loadMoreFiles() { - this.filesOffsetEnd = this.filesOffsetEnd + this.filesPerPage; - }, async search() { - const data = await this.$search.do(this.searchTerm, [ - 'name', - 'original', - 'type', - 'albums:name' - ]); - console.log('> Search result data', data); + const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']); + console.log('> Search result data', data); // eslint-disable-line no-console }, - deleteFile(file, index) { + deleteFile(file) { + // this.$emit('delete', file); this.$buefy.dialog.confirm({ title: 'Deleting file', message: 'Are you sure you want to <b>delete</b> this file?', confirmText: 'Delete File', type: 'is-danger', - hasIcon: true, onConfirm: async () => { - const response = await this.$axios.$delete(`file/${file.id}`); - if (this.showList) { - file.hideFromList = true; - this.$forceUpdate(); - } else { - this.showWaterfall = false; - this.files.splice(index, 1); - this.$nextTick(() => { - this.showWaterfall = true; - }); + try { + const response = await this.$store.dispatch('images/deleteFile', file.id); + + this.$buefy.toast.open(response.message); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); } - return this.$buefy.toast.open(response.message); } }); }, isAlbumSelected(id) { - if (!this.showingModalForFile) return; - const found = this.showingModalForFile.albums.find(el => el.id === id); - return found ? found.id ? true : false : false; + if (!this.showingModalForFile) return false; + const found = this.showingModalForFile.albums.find((el) => el.id === id); + return !!(found && found.id); }, async openAlbumModal(file) { + const { id } = file; this.showingModalForFile = file; this.showingModalForFile.albums = []; - this.isAlbumsModalActive = true; - const response = await this.$axios.$get(`file/${file.id}/albums`); - this.showingModalForFile.albums = response.albums; + try { + await this.$store.dispatch('images/getFileAlbums', id); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + this.showingModalForFile.albums = this.images.fileAlbumsMap[id]; - this.getAlbums(); + this.isAlbumsModalActive = true; }, - async albumCheckboxClicked(value, id) { - const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, { - albumId: id, - fileId: this.showingModalForFile.id - }); - this.$buefy.toast.open(response.message); + async albumCheckboxClicked(add, id) { + try { + let response; + if (add) { + response = await this.$store.dispatch('images/addToAlbum', { + albumId: id, + fileId: this.showingModalForFile.id + }); + } else { + response = await this.$store.dispatch('images/removeFromAlbum', { + albumId: id, + fileId: this.showingModalForFile.id + }); + } - // Not the prettiest solution to refetch on each click but it'll do for now - this.$parent.getFiles(); + this.$buefy.toast.open(response.message); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } }, async getAlbums() { - const response = await this.$axios.$get(`albums/dropdown`); - this.albums = response.albums; - this.$forceUpdate(); + try { + await this.$store.dispatch('albums/getTinyDetails'); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + }, + async handleFileModal(file) { + const { id } = file; + + try { + await this.$store.dispatch('images/fetchFileMeta', id); + this.modalData.file = this.images.fileExtraInfoMap[id]; + this.modalData.albums = this.images.fileAlbumsMap[id]; + this.modalData.tags = this.images.fileTagsMap[id]; + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + + this.isAlbumsModalActive = true; + }, + async getTags() { + try { + await this.$store.dispatch('tags/fetch'); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + }, + mouseOver(id) { + const foundIndex = this.hoveredItems.indexOf(id); + if (foundIndex > -1) return; + this.hoveredItems.push(id); + }, + mouseOut(id) { + const foundIndex = this.hoveredItems.indexOf(id); + if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1); + }, + isHovered(id) { + return this.hoveredItems.includes(id); + }, + displayTypeChange(showList) { + this.$store.commit('images/setShowList', showList); } } }; </script> + <style lang="scss" scoped> - @import '~/assets/styles/_colors.scss'; - .item-move { - transition: all .25s cubic-bezier(.55,0,.1,1); - } +@import '~/assets/styles/_colors.scss'; +.item-move { + transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1); +} - div.toolbar { - padding: 1rem; +div.toolbar { + padding: 1rem; - .block { - text-align: right; - } + .block { + text-align: right; } +} - span.extension { - position: absolute; - width: 100%; - height: 100%; - z-index: 0; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 2rem; - pointer-events: none; - opacity: .75; - max-width: 150px; - } +span.extension { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + pointer-events: none; + opacity: 0.75; + max-width: 150px; +} - div.actions { - opacity: 0; - -webkit-transition: opacity 0.1s linear; - -moz-transition: opacity 0.1s linear; - -ms-transition: opacity 0.1s linear; - -o-transition: opacity 0.1s linear; - transition: opacity 0.1s linear; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: calc(100% - 6px); - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - - span { - padding: 3px; - &.more { - position: absolute; - top: 0; - right: 0; - } +div.preview { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: calc(100% - 6px); + overflow: hidden; +} - &:nth-child(1), &:nth-child(2) { - align-items: flex-end; - } +.preview-container { + display: inline-block; +} - &:nth-child(1), &:nth-child(3) { - justify-content: flex-end; - } - a { +div.actions { + opacity: 0; + -webkit-transition: opacity 0.1s linear; + -moz-transition: opacity 0.1s linear; + -ms-transition: opacity 0.1s linear; + -o-transition: opacity 0.1s linear; + transition: opacity 0.1s linear; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: calc(100% - 6px); + // background: rgba(0, 0, 0, 0.5); + background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 60px), + linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 45px); + display: flex; + justify-content: center; + align-items: flex-end; + + span { + padding: 3px; + + &.more { + position: absolute; + top: 0; + right: 0; + } + + &:nth-child(1), + &:nth-child(2) { + align-items: flex-end; + padding-bottom: 10px; + } + + &:nth-child(3), + &:nth-child(4) { + justify-content: flex-end; + padding-bottom: 10px; + } + + a { + width: 30px; + height: 30px; + color: white; + justify-content: center; + align-items: center; + display: flex; + &.btn:before { + content: ''; width: 30px; height: 30px; - color: white; - justify-content: center; - align-items: center; - display: flex; - &.btn:before { - content: ''; - width: 30px; - height: 30px; - border: 1px solid white; - border-radius: 50%; - position: absolute; - } + border: 1px solid white; + border-radius: 50%; + position: absolute; } } + } - &.fixed { - position: relative; - opacity: 1; - background: none; - - a { - width: auto; - height: auto; - color: $defaultTextColor; - &:before { - display: none; - } - } + &.fixed { + position: relative; + opacity: 1; + background: none; + a { + width: auto; + height: auto; + color: $defaultTextColor; + &:before { + display: none; + } } } +} - .albums-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - .album { - flex-basis: 33%; - text-align: left; - } +.albums-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + .album { + flex-basis: 33%; + text-align: left; } -</style> +} + +.hidden { + display: none; +} + +.waterfall { + margin: 0 auto; +} + +.waterfall-item:hover { + div.actions { + opacity: 1; + } +} + +.imageinfo-modal::-webkit-scrollbar { + width: 0px; /* Remove scrollbar space */ + background: transparent; /* Optional: just make scrollbar invisible */ +} + +i.mdi { + font-size: 16px; +} -<style lang="scss"> - .waterfall-item:hover { - div.actions { - opacity: 1 +.imageinfo-modal{ + ::v-deep .modal-content { + @media screen and (max-width: 768px) { + min-height: 100vh; } } +} </style> diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue index 8631ea5..af2af3f 100644 --- a/src/site/components/grid/waterfall/Waterfall.vue +++ b/src/site/components/grid/waterfall/Waterfall.vue @@ -1,180 +1,134 @@ -<style> - .waterfall { - position: relative; - } -</style> <template> - <div class="waterfall"> - <slot /> + <div ref="waterfall" class="waterfall"> + <WaterfallItem + v-for="item in items" + :key="item.id" + :style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }" + :width="itemWidth"> + <slot :item="item" /> + </WaterfallItem> </div> </template> <script> -// import {quickSort, getMinIndex, _, sum} from './util' +import WaterfallItem from './WaterfallItem.vue'; -const quickSort = (arr, type) => { - const left = []; - const right = []; - if (arr.length <= 1) { - return arr; - } - const povis = arr[0]; - for (let i = 1; i < arr.length; i++) { - if (arr[i][type] < povis[type]) { - left.push(arr[i]); - } else { - right.push(arr[i]); - } - } - return quickSort(left, type).concat(povis, quickSort(right, type)) -}; +const isBrowser = typeof window !== 'undefined'; +// eslint-disable-next-line global-require +const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null; +const imagesloaded = isBrowser ? require('imagesloaded') : null; -const getMinIndex = arr => { - let pos = 0; - for (let i = 0; i < arr.length; i++) { - if (arr[pos] > arr[i]) { - pos = i; - } - } - return pos; -}; - -const _ = { - on(el, type, func, capture = false) { - el.addEventListener(type, func, capture); - }, - off(el, type, func, capture = false) { - el.removeEventListener(type, func, capture); - } -}; - -const sum = arr => arr.reduce((sum, val) => sum + val); export default { name: 'Waterfall', + components: { + WaterfallItem + }, props: { - gutterWidth: { - type: Number, - default: 0 - }, - gutterHeight: { - type: Number, - default: 0 - }, - resizable: { - type: Boolean, - default: true + options: { + type: Object, + default: () => {} }, - align: { - type: String, - default: 'center' + items: { + type: Array, + default: () => [] }, - fixWidth: { - type: Number - }, - minCol: { + itemWidth: { type: Number, - default: 1 + default: 150 }, - maxCol: { - type: Number + gutterWidth: { + type: Number, + default: 10 }, - percent: { - type: Array + gutterHeight: { + type: Number, + default: 4 } }, - data() { - return { - timer: null, - colNum: 0, - lastWidth: 0, - percentWidthArr: [] - }; + mounted() { + this.initializeMasonry(); + this.imagesLoaded(); }, - created() { - this.$on('itemRender', () => { - if (this.timer) { - clearTimeout(this.timer); - } - this.timer = setTimeout(() => { - this.render(); - }, 0); - }); + updated() { + this.performLayout(); + this.imagesLoaded(); }, - mounted() { - this.resizeHandle(); - this.$watch('resizable', this.resizeHandle); + unmounted() { + this.masonry.destroy(); }, methods: { - calulate(arr) { - let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth; - // 百分比布局计算 - if (this.percent) { - this.colNum = this.percent.length; - const total = sum(this.percent); - this.percentWidthArr = this.percent.map(value => (value / total) * pageWidth); - this.lastWidth = 0; - // 正常布局计算 - } else { - this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth)); - if (this.minCol && this.colNum < this.minCol) { - this.colNum = this.minCol; - this.lastWidth = 0; - } else if (this.maxCol && this.colNum > this.maxCol) { - this.colNum = this.maxCol; - this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth; - } else { - this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth; + imagesLoaded() { + const node = this.$refs.waterfall; + imagesloaded( + node, + () => { + this.masonry.layout(); } + ); + }, + performLayout() { + const diff = this.diffDomChildren(); + if (diff.removed.length > 0) { + this.masonry.remove(diff.removed); + this.masonry.reloadItems(); + } + if (diff.appended.length > 0) { + this.masonry.appended(diff.appended); + this.masonry.reloadItems(); } + if (diff.prepended.length > 0) { + this.masonry.prepended(diff.prepended); + } + if (diff.moved.length > 0) { + this.masonry.reloadItems(); + } + this.masonry.layout(); }, - resizeHandle() { - if (this.resizable) { - _.on(window, 'resize', this.render, false); - } else { - _.off(window, 'resize', this.render, false); + diffDomChildren() { + const oldChildren = this.domChildren.filter((element) => !!element.parentNode); + const newChildren = this.getNewDomChildren(); + const removed = oldChildren.filter((oldChild) => !newChildren.includes(oldChild)); + const domDiff = newChildren.filter((newChild) => !oldChildren.includes(newChild)); + const prepended = domDiff.filter((newChild, index) => newChildren[index] === newChild); + const appended = domDiff.filter((el) => !prepended.includes(el)); + let moved = []; + if (removed.length === 0) { + moved = oldChildren.filter((child, index) => index !== newChildren.indexOf(child)); } + this.domChildren = newChildren; + return { + old: oldChildren, + new: newChildren, + removed, + appended, + prepended, + moved + }; }, - render() { - // 重新排序 - let childArr = []; - childArr = this.$children.map(child => child.getMeta()); - childArr = quickSort(childArr, 'order'); - // 计算列数 - this.calulate(childArr[0]) - let offsetArr = Array(this.colNum).fill(0); - // 渲染 - childArr.forEach(child => { - let position = getMinIndex(offsetArr); - // 百分比布局渲染 - if (this.percent) { - let left = 0; - child.el.style.width = `${this.percentWidthArr[position]}px`; - if (position === 0) { - left = 0; - } else { - for (let i = 0; i < position; i++) { - left += this.percentWidthArr[i]; - } - } - child.el.style.left = `${left}px`; - // 正常布局渲染 - } else { - if (this.align === 'left') { // eslint-disable-line no-lonely-if - child.el.style.left = `${position * (child.width + this.gutterWidth)}px`; - } else if (this.align === 'right') { - child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth}px`; - } else { - child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth / 2}px`; + initializeMasonry() { + if (!this.masonry) { + this.masonry = new Masonry( + this.$refs.waterfall, + { + columnWidth: this.itemWidth, + gutter: this.gutterWidth, + ...this.options } - } - if (child.height === 0) { - return; - } - child.el.style.top = `${offsetArr[position]}px`; - offsetArr[position] += (child.height + this.gutterHeight); - this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`; - }); - this.$emit('rendered', this); + ); + this.domChildren = this.getNewDomChildren(); + } + }, + getNewDomChildren() { + const node = this.$refs.waterfall; + const children = this.options && this.options.itemSelector + ? node.querySelectorAll(this.options.itemSelector) : node.children; + return Array.prototype.slice.call(children); } } }; </script> + +<style lang="scss" scoped> +.wfi { + +} +</style> diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue index a02ea1f..2a18606 100644 --- a/src/site/components/grid/waterfall/WaterfallItem.vue +++ b/src/site/components/grid/waterfall/WaterfallItem.vue @@ -1,60 +1,10 @@ -<style> - .waterfall-item { - position: absolute; - } -</style> <template> <div class="waterfall-item"> <slot /> </div> </template> <script> -import imagesLoaded from 'imagesloaded'; export default { - name: 'WaterfallItem', - props: { - order: { - type: Number, - default: 0 - }, - width: { - type: Number, - default: 150 - } - }, - data() { - return { - itemWidth: 0, - height: 0 - }; - }, - created() { - this.$watch(() => this.height, this.emit); - }, - mounted() { - this.$el.style.display = 'none'; - this.$el.style.width = `${this.width}px`; - this.emit(); - imagesLoaded(this.$el, () => { - this.$el.style.left = '-9999px'; - this.$el.style.top = '-9999px'; - this.$el.style.display = 'block'; - this.height = this.$el.offsetHeight; - this.itemWidth = this.$el.offsetWidth; - }); - }, - methods: { - emit() { - this.$parent.$emit('itemRender'); - }, - getMeta() { - return { - el: this.$el, - height: this.height, - width: this.itemWidth, - order: this.order - }; - } - } -} + name: 'WaterfallItem' +}; </script> diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue index 41bd271..b20649f 100644 --- a/src/site/components/home/links/Links.vue +++ b/src/site/components/home/links/Links.vue @@ -1,6 +1,7 @@ <template> <div class="links"> - <a href="https://github.com/WeebDev/lolisafe" + <a + href="https://github.com/WeebDev/lolisafe" target="_blank" class="link"> <header class="bd-footer-star-header"> @@ -8,15 +9,21 @@ <p class="bd-footer-subtitle">Deploy your own lolisafe</p> </header> </a> - <div v-if="loggedIn" + <div + v-if="loggedIn" class="link" @click="createShareXThing"> <header class="bd-footer-star-header"> - <h4 class="bd-footer-title">ShareX</h4> - <p class="bd-footer-subtitle">Upload from your Desktop</p> + <h4 class="bd-footer-title"> + ShareX + </h4> + <p class="bd-footer-subtitle"> + Upload from your Desktop + </p> </header> </div> - <a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" + <a + href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" target="_blank" class="link"> <header class="bd-footer-star-header"> @@ -24,17 +31,23 @@ <p class="bd-footer-subtitle">Upload from any website</p> </header> </a> - <router-link to="/faq" + <router-link + to="/faq" class="link"> <header class="bd-footer-star-header"> - <h4 class="bd-footer-title">FAQ</h4> - <p class="bd-footer-subtitle">We got you covered</p> + <h4 class="bd-footer-title"> + FAQ + </h4> + <p class="bd-footer-subtitle"> + We got you covered + </p> </header> </router-link> </div> </template> <script> import { saveAs } from 'file-saver'; + export default { computed: { loggedIn() { diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue new file mode 100644 index 0000000..17c375a --- /dev/null +++ b/src/site/components/image-modal/AlbumInfo.vue @@ -0,0 +1,92 @@ +<template> + <b-dropdown + v-model="selectedOptions" + multiple + expanded + scrollable + inline + aria-role="list" + max-height="500px"> + <button slot="trigger" class="button is-primary" type="button"> + <span>Albums ({{ selectedOptions.length }})</span> + <b-icon icon="menu-down" /> + </button> + + <b-dropdown-item + v-for="album in orderedAlbums" + :key="album.id" + :value="album.id" + aria-role="listitem" + @click="handleClick(album.id)"> + <span>{{ album.name }}</span> + </b-dropdown-item> + </b-dropdown> +</template> + +<script> +import { mapState } from 'vuex'; + +export default { + name: 'Albuminfo', + props: { + imageId: { + type: Number, + default: 0 + }, + imageAlbums: { + type: Array, + default: () => [] + }, + albums: { + type: Array, + default: () => [] + } + }, + data() { + return { + selectedOptions: [], + orderedAlbums: [] + }; + }, + created() { + this.orderedAlbums = this.getOrderedAlbums(); + // we're sorting here instead of computed because we want sort on creation + // then the array's values should be frozen + this.selectedOptions = this.imageAlbums.map((e) => e.id); + }, + methods: { + getOrderedAlbums() { + return [...this.albums].sort( + (a, b) => { + const selectedA = this.imageAlbums.findIndex(({ name }) => name === a.name) !== -1; + const selectedB = this.imageAlbums.findIndex(({ name }) => name === b.name) !== -1; + + if (selectedA !== selectedB) { + return selectedA ? -1 : 1; + } + return a.name.localeCompare(b.name); + } + ); + }, + isAlbumSelected(id) { + if (!this.showingModalForFile) return false; + const found = this.showingModalForFile.albums.find((el) => el.id === id); + return !!(found && found.id); + }, + async handleClick(id) { + // here the album should be already removed from the selected list + if (this.selectedOptions.indexOf(id) > -1) { + this.$handler.executeAction('images/addToAlbum', { + albumId: id, + fileId: this.imageId + }); + } else { + this.$handler.executeAction('images/removeFromAlbum', { + albumId: id, + fileId: this.imageId + }); + } + } + } +}; +</script> diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue new file mode 100644 index 0000000..73b6339 --- /dev/null +++ b/src/site/components/image-modal/ImageInfo.vue @@ -0,0 +1,210 @@ +<template> + <div class="container has-background-lolisafe"> + <div class="columns is-marginless"> + <div class="column image-col has-centered-items"> + <img v-if="!isVideo(file.type)" class="col-img" :src="file.url"> + <video v-else class="col-vid" controls> + <source :src="file.url" :type="file.type"> + </video> + </div> + <div class="column data-col is-one-third"> + <div class="sticky"> + <div class="divider is-lolisafe has-text-light"> + File information + </div> + <b-field + label="ID" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <span class="fake-input">{{ file.id }}</span> + </div> + </b-field> + <b-field + label="Name" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <span class="fake-input">{{ file.name }}</span> + </div> + </b-field> + + <b-field + label="Original Name" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <span class="fake-input">{{ file.original }}</span> + </div> + </b-field> + + <b-field + label="IP" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <span class="fake-input">{{ file.ip }}</span> + </div> + </b-field> + + <b-field + label="Link" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <a + class="fake-input" + :href="file.url" + target="_blank">{{ file.url }}</a> + </div> + </b-field> + + <b-field + label="Size" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <span class="fake-input">{{ formatBytes(file.size) }}</span> + </div> + </b-field> + + <b-field + label="Hash" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <span class="fake-input">{{ file.hash }}</span> + </div> + </b-field> + + <b-field + label="Uploaded" + label-position="on-border" + type="is-lolisafe" + class="lolisafe-on-border"> + <div class="control"> + <span class="fake-input"><timeago :since="file.createdAt" /></span> + </div> + </b-field> + + <div class="divider is-lolisafe has-text-light"> + Tags + </div> + <Taginfo :imageId="file.id" :imageTags="tags" /> + + <div class="divider is-lolisafe has-text-light"> + Albums + </div> + <Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" /> + </div> + </div> + </div> + </div> +</template> + +<script> +import { mapState } from 'vuex'; + +import Albuminfo from './AlbumInfo.vue'; +import Taginfo from './TagInfo.vue'; + +export default { + components: { + Taginfo, + Albuminfo + }, + props: { + file: { + type: Object, + default: () => ({}) + }, + albums: { + type: Array, + default: () => ([]) + }, + tags: { + type: Array, + default: () => ([]) + } + }, + computed: mapState({ + images: (state) => state.images, + tinyDetails: (state) => state.albums.tinyDetails + }), + methods: { + formatBytes(bytes, decimals = 2) { + if (bytes === 0) return '0 Bytes'; + + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + + const i = Math.floor(Math.log(bytes) / Math.log(k)); + + return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`; + }, + isVideo(type) { + return type.startsWith('video'); + } + } +}; +</script> + +<style lang="scss" scoped> +@import '~/assets/styles/_colors.scss'; +.modal-content, .modal-card { + max-height: 100%; +} + +.fake-input { + font-size: 1rem !important; + height: 2.5rem; + border-color: #323846; /* $lolisafe */ + max-width: 100%; + width: 100%; + border-radius: 4px; + display: inline-block; + font-size: 1rem; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); + background-color: #21252d; + border: 2px solid #21252d; + border-radius: 0.3em !important; + + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.divider:first-child { + margin: 10px 0 25px; +} + +.col-vid { + width: 100%; +} + +.image-col { + align-items: start; +} + +.data-col { + @media screen and (min-width: 769px) { + padding-right: 1.5rem; + } + @media screen and (max-width: 769px) { + padding-bottom: 3rem; + } +} +</style> diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue new file mode 100644 index 0000000..59d01f5 --- /dev/null +++ b/src/site/components/image-modal/TagInfo.vue @@ -0,0 +1,95 @@ +<template> + <b-field label="Add some tags"> + <b-taginput + :value="selectedTags" + :data="filteredTags" + class="lolisafe taginp" + ellipsis + icon="label" + placeholder="Add a tag" + autocomplete + allow-new + @typing="getFilteredTags" + @add="tagAdded" + @remove="tagRemoved" /> + </b-field> +</template> + +<script> +import { mapState } from 'vuex'; + +export default { + name: 'Taginfo', + props: { + imageId: { + type: Number, + default: 0 + }, + imageTags: { + type: Array, + default: () => [] + } + }, + data() { + return { + filteredTags: [] + }; + }, + computed: { + ...mapState({ + tags: (state) => state.tags.tagsList + }), + selectedTags() { return this.imageTags.map((e) => e.name); }, + lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); } + }, + methods: { + getFilteredTags(str) { + this.filteredTags = this.tags.map((e) => e.name).filter((e) => { + // check if the search string matches any of the tags + const sanitezedTag = e.toString().toLowerCase(); + const matches = sanitezedTag.indexOf(str.toLowerCase()) >= 0; + + // check if this tag is already added to our image, to avoid duplicates + if (matches) { + const foundIndex = this.lowercaseTags.indexOf(sanitezedTag); + if (foundIndex === -1) { + return true; + } + } + + return false; + }); + }, + async tagAdded(tag) { + if (!tag) return; + + // normalize into NFC form (diactirics and moonrunes) + // replace all whitespace with _ + // replace multiple __ with a single one + tag = tag.normalize('NFC').replace(/\s/g, '_').replace(/_+/g, '_'); + + const foundIndex = this.tags.findIndex(({ name }) => name === tag); + + if (foundIndex === -1) { + await this.$handler.executeAction('tags/createTag', tag); + } + + await this.$handler.executeAction('images/addTag', { fileId: this.imageId, tagName: tag }); + }, + tagRemoved(tag) { + this.$handler.executeAction('images/removeTag', { fileId: this.imageId, tagName: tag }); + } + } +}; +</script> + +<style lang="scss" scoped> +@import '~/assets/styles/_colors.scss'; + +.taginp { + ::v-deep .dropdown-content { + background-color: #323846; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + } +} +</style> diff --git a/src/site/components/loading/BulmaLoading.vue b/src/site/components/loading/BulmaLoading.vue new file mode 100644 index 0000000..37cc5a5 --- /dev/null +++ b/src/site/components/loading/BulmaLoading.vue @@ -0,0 +1,33 @@ +<template> + <div class="loader-wrapper"> + <div class="loader is-loading" /> + </div> +</template> + +<style lang="scss" scoped> + .loader-wrapper { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: #fff; + opacity: 0; + z-index: -1; + transition: opacity .3s; + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; + + .loader { + height: 80px; + width: 80px; + } + + &.is-active { + opacity: 1; + z-index: 1; + } + } +</style> diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue index af31dac..71b5da5 100644 --- a/src/site/components/loading/CubeShadow.vue +++ b/src/site/components/loading/CubeShadow.vue @@ -1,5 +1,6 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner--cube-shadow" /> </template> diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue index d1b523d..59c5d8f 100644 --- a/src/site/components/loading/Origami.vue +++ b/src/site/components/loading/Origami.vue @@ -1,7 +1,9 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner-origami"> - <div :style="innerStyles" + <div + :style="innerStyles" class="spinner-inner loading"> <span class="slice" /> <span class="slice" /> @@ -23,7 +25,7 @@ export default { }, computed: { innerStyles() { - let size = parseInt(this.size); + const size = parseInt(this.size, 10); return { transform: `scale(${(size / 60)})` }; }, styles() { diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue index ac33e28..c04ae72 100644 --- a/src/site/components/loading/PingPong.vue +++ b/src/site/components/loading/PingPong.vue @@ -1,12 +1,14 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner--ping-pong"> - <div :style="innerStyles" + <div + :style="innerStyles" class="spinner-inner"> <div class="board"> - <div class="left"/> - <div class="right"/> - <div class="ball"/> + <div class="left" /> + <div class="right" /> + <div class="ball" /> </div> </div> </div> @@ -22,7 +24,7 @@ export default { }, computed: { innerStyles() { - let size = parseInt(this.size); + const size = parseInt(this.size, 10); return { transform: `scale(${size / 250})` }; }, styles() { @@ -32,7 +34,7 @@ export default { }; } } -} +}; </script> <style lang="scss" scoped> diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue index 4da8300..7bc9bb0 100644 --- a/src/site/components/loading/RotateSquare.vue +++ b/src/site/components/loading/RotateSquare.vue @@ -1,5 +1,6 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner--rotate-square-2" /> </template> diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue index 48dfeb1..22d41d4 100644 --- a/src/site/components/navbar/Navbar.vue +++ b/src/site/components/navbar/Navbar.vue @@ -1,70 +1,74 @@ <template> - <nav :class="{ isWhite }" - class="navbar is-transparent"> - <div class="navbar-brand"> - <a role="button" - class="navbar-burger burger" - aria-label="menu" - aria-expanded="false" - data-target="navbarBasicExample"> - <span aria-hidden="true" /> - <span aria-hidden="true" /> - <span aria-hidden="true" /> - </a> - </div> - <div class="navbar-menu"> - <div class="navbar-end"> + <b-navbar + :class="{ isWhite }" + transparent> + <template slot="end"> + <b-navbar-item tag="div"> <router-link to="/" class="navbar-item no-active" exact> Home </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <router-link - to="/" + to="/faq" class="navbar-item no-active" exact> Docs </router-link> - <template v-if="loggedIn"> + </b-navbar-item> + <template v-if="loggedIn"> + <b-navbar-item tag="div"> <router-link to="/dashboard" class="navbar-item no-active" exact> Uploads </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <router-link to="/dashboard/albums" class="navbar-item no-active" exact> Albums </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <router-link to="/dashboard/account" class="navbar-item no-active" exact> Account </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <router-link to="/" class="navbar-item no-active" @click.native="logOut"> Logout </router-link> - </template> - <template v-else> + </b-navbar-item> + </template> + <template v-else> + <b-navbar-item tag="div"> <router-link class="navbar-item" to="/login"> Login </router-link> - </template> - </div> - </div> - </nav> + </b-navbar-item> + </template> + </template> + </b-navbar> </template> <script> +import { mapState, mapGetters } from 'vuex'; + export default { props: { isWhite: { @@ -76,20 +80,18 @@ export default { return { hamburger: false }; }, computed: { - loggedIn() { - return this.$store.state.loggedIn; - }, - config() { - return this.$store.state.config; - } + ...mapGetters({ loggedIn: 'auth/isLoggedIn' }), + ...mapState(['config']) }, methods: { - logOut() { - this.$store.dispatch('logout'); + async logOut() { + await this.$store.dispatch('auth/logout'); + this.$router.replace('/login'); } } }; </script> + <style lang="scss" scoped> @import '~/assets/styles/_colors.scss'; nav.navbar { @@ -135,4 +137,8 @@ export default { } } } + + .no-active { + text-decoration: none !important; + } </style> diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue new file mode 100644 index 0000000..1c5b983 --- /dev/null +++ b/src/site/components/search-input/SearchInput.vue @@ -0,0 +1,516 @@ +<template> + <div + class="autocomplete control" + :class="{'is-expanded': expanded}"> + <b-input + ref="input" + v-model="newValue" + type="text" + :size="size" + :loading="loading" + :rounded="rounded" + :icon="icon" + :icon-right="newIconRight" + :icon-right-clickable="newIconRightClickable" + :icon-pack="iconPack" + :maxlength="maxlength" + :autocomplete="newAutocomplete" + :use-html5-validation="false" + v-bind="$attrs" + @input="onInput" + @focus="focused" + @blur="onBlur" + @keyup.native.esc.prevent="isActive = false" + @keydown.native.tab="tabPressed" + @keydown.native.enter.prevent="enterPressed" + @keydown.native.up.prevent="keyArrows('up')" + @keydown.native.down.prevent="keyArrows('down')" + @icon-right-click="rightIconClick" + @icon-click="(event) => $emit('icon-click', event)" /> + + <transition name="fade"> + <div + v-show="isActive && (data.length > 0 || hasEmptySlot || hasHeaderSlot)" + ref="dropdown" + class="dropdown-menu" + :class="{ 'is-opened-top': isOpenedTop && !appendToBody }" + :style="style"> + <div + v-show="isActive" + class="dropdown-content" + :style="contentStyle"> + <div + v-if="hasHeaderSlot" + class="dropdown-item"> + <slot name="header" /> + </div> + <a + v-for="(option, index) in data" + :key="index" + class="dropdown-item" + :class="{ 'is-hovered': option === hovered }" + @click="setSelected(option, undefined, $event)"> + + <slot + v-if="hasDefaultSlot" + :option="option" + :index="index" /> + <span v-else> + {{ getValue(option, true) }} + </span> + </a> + <div + v-if="data.length === 0 && hasEmptySlot" + class="dropdown-item is-disabled"> + <slot name="empty" /> + </div> + <div + v-if="hasFooterSlot" + class="dropdown-item"> + <slot name="footer" /> + </div> + </div> + </div> + </transition> + </div> +</template> + +<script> +/* eslint-disable no-underscore-dangle */ +/* eslint-disable vue/require-default-prop */ +/* eslint-disable vue/no-reserved-keys */ +import { getValueByPath, removeElement, createAbsoluteElement } from '../../../../node_modules/buefy/src/utils/helpers'; +import FormElementMixin from '../../../../node_modules/buefy/src/utils/FormElementMixin'; + +export default { + name: 'SearchInput', + mixins: [FormElementMixin], + inheritAttrs: false, + props: { + value: [Number, String], + data: { + type: Array, + default: () => [] + }, + field: { + type: String, + default: 'value' + }, + keepFirst: Boolean, + clearOnSelect: Boolean, + openOnFocus: Boolean, + customFormatter: Function, + checkInfiniteScroll: Boolean, + keepOpen: Boolean, + clearable: Boolean, + maxHeight: [String, Number], + dropdownPosition: { + type: String, + default: 'auto' + }, + iconRight: String, + iconRightClickable: Boolean, + appendToBody: Boolean, + customSelector: Function + }, + data() { + return { + selected: null, + hovered: null, + isActive: false, + newValue: this.value, + newAutocomplete: this.autocomplete || 'off', + isListInViewportVertically: true, + hasFocus: false, + style: {}, + _isAutocomplete: true, + _elementRef: 'input', + _bodyEl: undefined // Used to append to body + }; + }, + computed: { + /** + * White-listed items to not close when clicked. + * Add input, dropdown and all children. + */ + whiteList() { + const whiteList = []; + whiteList.push(this.$refs.input.$el.querySelector('input')); + whiteList.push(this.$refs.dropdown); + // Add all chidren from dropdown + if (this.$refs.dropdown !== undefined) { + const children = this.$refs.dropdown.querySelectorAll('*'); + for (const child of children) { + whiteList.push(child); + } + } + if (this.$parent.$data._isTaginput) { + // Add taginput container + whiteList.push(this.$parent.$el); + // Add .tag and .delete + const tagInputChildren = this.$parent.$el.querySelectorAll('*'); + for (const tagInputChild of tagInputChildren) { + whiteList.push(tagInputChild); + } + } + return whiteList; + }, + /** + * Check if exists default slot + */ + hasDefaultSlot() { + return !!this.$scopedSlots.default; + }, + /** + * Check if exists "empty" slot + */ + hasEmptySlot() { + return !!this.$slots.empty; + }, + /** + * Check if exists "header" slot + */ + hasHeaderSlot() { + return !!this.$slots.header; + }, + /** + * Check if exists "footer" slot + */ + hasFooterSlot() { + return !!this.$slots.footer; + }, + /** + * Apply dropdownPosition property + */ + isOpenedTop() { + return this.dropdownPosition === 'top' || (this.dropdownPosition === 'auto' && !this.isListInViewportVertically); + }, + newIconRight() { + if (this.clearable && this.newValue) { + return 'close-circle'; + } + return this.iconRight; + }, + newIconRightClickable() { + if (this.clearable) { + return true; + } + return this.iconRightClickable; + }, + contentStyle() { + return { + // eslint-disable-next-line no-nested-ternary + maxHeight: this.maxHeight === undefined + // eslint-disable-next-line no-restricted-globals + ? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`) + }; + } + }, + watch: { + /** + * When dropdown is toggled, check the visibility to know when + * to open upwards. + */ + isActive(active) { + if (this.dropdownPosition === 'auto') { + if (active) { + this.calcDropdownInViewportVertical(); + } else { + // Timeout to wait for the animation to finish before recalculating + setTimeout(() => { + this.calcDropdownInViewportVertical(); + }, 100); + } + } + if (active) this.$nextTick(() => this.setHovered(null)); + }, + /** + * When updating input's value + * 1. Emit changes + * 2. If value isn't the same as selected, set null + * 3. Close dropdown if value is clear or else open it + */ + newValue(value) { + this.$emit('input', value); + // Check if selected is invalid + const currentValue = this.getValue(this.selected); + if (currentValue && currentValue !== value) { + this.setSelected(null, false); + } + // Close dropdown if input is clear or else open it + if (this.hasFocus && (!this.openOnFocus || value)) { + this.isActive = !!value; + } + }, + /** + * When v-model is changed: + * 1. Update internal value. + * 2. If it's invalid, validate again. + */ + value(value) { + this.newValue = value; + }, + /** + * Select first option if "keep-first + */ + data(value) { + // Keep first option always pre-selected + if (this.keepFirst) { + this.selectFirstOption(value); + } + } + }, + created() { + if (typeof window !== 'undefined') { + document.addEventListener('click', this.clickedOutside); + if (this.dropdownPosition === 'auto') window.addEventListener('resize', this.calcDropdownInViewportVertical); + } + }, + mounted() { + if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) { + const list = this.$refs.dropdown.querySelector('.dropdown-content'); + list.addEventListener('scroll', () => this.checkIfReachedTheEndOfScroll(list)); + } + if (this.appendToBody) { + this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown); + this.updateAppendToBody(); + } + }, + beforeDestroy() { + if (typeof window !== 'undefined') { + document.removeEventListener('click', this.clickedOutside); + if (this.dropdownPosition === 'auto') window.removeEventListener('resize', this.calcDropdownInViewportVertical); + } + if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) { + const list = this.$refs.dropdown.querySelector('.dropdown-content'); + list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll); + } + if (this.appendToBody) { + removeElement(this.$data._bodyEl); + } + }, + methods: { + /** + * Set which option is currently hovered. + */ + setHovered(option) { + if (option === undefined) return; + this.hovered = option; + }, + /** + * Set which option is currently selected, update v-model, + * update input value and close dropdown. + */ + setSelected(option, closeDropdown = true, event = undefined) { + if (option === undefined) return; + this.selected = option; + this.$emit('select', this.selected, event); + if (this.selected !== null) { + if (this.customSelector) { + this.newValue = this.clearOnSelect ? '' : this.customSelector(this.selected, this.newValue); + } else { + this.newValue = this.clearOnSelect ? '' : this.getValue(this.selected); + } + this.setHovered(null); + } + // eslint-disable-next-line no-unused-expressions + closeDropdown && this.$nextTick(() => { this.isActive = false; }); + this.checkValidity(); + }, + /** + * Select first option + */ + selectFirstOption(options) { + this.$nextTick(() => { + if (options.length) { + // If has visible data or open on focus, keep updating the hovered + if (this.openOnFocus || (this.newValue !== '' && this.hovered !== options[0])) { + this.setHovered(options[0]); + } + } else { + this.setHovered(null); + } + }); + }, + /** + * Enter key listener. + * Select the hovered option. + */ + enterPressed(event) { + if (this.hovered === null) return; + this.setSelected(this.hovered, !this.keepOpen, event); + }, + /** + * Tab key listener. + * Select hovered option if it exists, close dropdown, then allow + * native handling to move to next tabbable element. + */ + tabPressed(event) { + if (this.hovered === null) { + this.isActive = false; + return; + } + this.setSelected(this.hovered, !this.keepOpen, event); + }, + /** + * Close dropdown if clicked outside. + */ + clickedOutside(event) { + if (this.whiteList.indexOf(event.target) < 0) this.isActive = false; + }, + /** + * Return display text for the input. + * If object, get value from path, or else just the value. + */ + getValue(option) { + if (option === null) return; + if (typeof this.customFormatter !== 'undefined') { + // eslint-disable-next-line consistent-return + return this.customFormatter(option); + } + // eslint-disable-next-line consistent-return + return typeof option === 'object' + ? getValueByPath(option, this.field) + : option; + }, + /** + * Check if the scroll list inside the dropdown + * reached it's end. + */ + checkIfReachedTheEndOfScroll(list) { + if (list.clientHeight !== list.scrollHeight + && list.scrollTop + list.clientHeight >= list.scrollHeight) { + this.$emit('infinite-scroll'); + } + }, + /** + * Calculate if the dropdown is vertically visible when activated, + * otherwise it is openened upwards. + */ + calcDropdownInViewportVertical() { + this.$nextTick(() => { + /** + * this.$refs.dropdown may be undefined + * when Autocomplete is conditional rendered + */ + if (this.$refs.dropdown === undefined) return; + const rect = this.$refs.dropdown.getBoundingClientRect(); + this.isListInViewportVertically = ( + rect.top >= 0 + && rect.bottom <= (window.innerHeight + || document.documentElement.clientHeight) + ); + if (this.appendToBody) { + this.updateAppendToBody(); + } + }); + }, + /** + * Arrows keys listener. + * If dropdown is active, set hovered option, or else just open. + */ + keyArrows(direction) { + const sum = direction === 'down' ? 1 : -1; + if (this.isActive) { + let index = this.data.indexOf(this.hovered) + sum; + index = index > this.data.length - 1 ? this.data.length : index; + index = index < 0 ? 0 : index; + this.setHovered(this.data[index]); + const list = this.$refs.dropdown.querySelector('.dropdown-content'); + const element = list.querySelectorAll('a.dropdown-item:not(.is-disabled)')[index]; + if (!element) return; + const visMin = list.scrollTop; + const visMax = list.scrollTop + list.clientHeight - element.clientHeight; + if (element.offsetTop < visMin) { + list.scrollTop = element.offsetTop; + } else if (element.offsetTop >= visMax) { + list.scrollTop = ( + element.offsetTop + - list.clientHeight + + element.clientHeight + ); + } + } else { + this.isActive = true; + } + }, + /** + * Focus listener. + * If value is the same as selected, select all text. + */ + focused(event) { + if (this.getValue(this.selected) === this.newValue) { + this.$el.querySelector('input').select(); + } + if (this.openOnFocus) { + this.isActive = true; + if (this.keepFirst) { + this.selectFirstOption(this.data); + } + } + this.hasFocus = true; + this.$emit('focus', event); + }, + /** + * Blur listener. + */ + onBlur(event) { + this.hasFocus = false; + this.$emit('blur', event); + }, + onInput() { + const currentValue = this.getValue(this.selected); + if (currentValue && currentValue === this.newValue) return; + this.$emit('typing', this.newValue); + this.checkValidity(); + }, + rightIconClick(event) { + if (this.clearable) { + this.newValue = ''; + if (this.openOnFocus) { + this.$el.focus(); + } + } else { + this.$emit('icon-right-click', event); + } + }, + checkValidity() { + if (this.useHtml5Validation) { + this.$nextTick(() => { + this.checkHtml5Validity(); + }); + } + }, + updateAppendToBody() { + const dropdownMenu = this.$refs.dropdown; + const trigger = this.$refs.input.$el; + if (dropdownMenu && trigger) { + // update wrapper dropdown + const root = this.$data._bodyEl; + root.classList.forEach((item) => root.classList.remove(item)); + root.classList.add('autocomplete'); + root.classList.add('control'); + if (this.expandend) { + root.classList.add('is-expandend'); + } + const rect = trigger.getBoundingClientRect(); + let top = rect.top + window.scrollY; + const left = rect.left + window.scrollX; + if (!this.isOpenedTop) { + top += trigger.clientHeight; + } else { + top -= dropdownMenu.clientHeight; + } + this.style = { + position: 'absolute', + top: `${top}px`, + left: `${left}px`, + width: `${trigger.clientWidth}px`, + maxWidth: `${trigger.clientWidth}px`, + zIndex: '99' + }; + } + } + } +}; +</script> diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue new file mode 100644 index 0000000..778474c --- /dev/null +++ b/src/site/components/search/Search.vue @@ -0,0 +1,136 @@ +<template> + <div class="level-right"> + <div class="level-item"> + <b-field> + <SearchInput + ref="autocomplete" + v-model="query" + :data="filteredHints" + :customSelector="handleSelect" + field="name" + class="lolisafe-input search" + placeholder="Search" + type="search" + open-on-focus + @typing="handleTyping" + @keydown.native.enter="onSubmit"> + <template slot-scope="props"> + <b>{{ props.option.name }}:</b> + <small> + {{ props.option.valueFormat }} + </small> + </template> + </SearchInput> + <p class="control"> + <b-button type="is-lolisafe" @click="onSubmit"> + Search + </b-button> + </p> + </b-field> + </div> + </div> +</template> + +<script> +import SearchInput from '~/components/search-input/SearchInput.vue'; + +export default { + components: { + SearchInput + }, + props: { + hiddenHints: { + type: Array, + default: () => [] + } + }, + data() { + return { + query: '', + hints: [ + { + 'name': 'tag', + 'valueFormat': 'name', + 'hint': '' + }, + { + 'name': 'album', + 'valueFormat': 'name', + 'hint': '' + }, + { + 'name': 'before', + 'valueFormat': 'specific date', + 'hint': '' + }, + { + 'name': 'during', + 'valueFormat': 'specific date', + 'hint': '' + }, + { + 'name': 'after', + 'valueFormat': 'specific date', + 'hint': '' + }, + { + 'name': 'file', + 'valueFormat': 'generated name', + 'hint': '' + } + ], + filteredHints: [] + }; + }, + created() { + this.hints = this.hints.filter(({ name }) => this.hiddenHints.indexOf(name) === -1); + this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load + }, + methods: { + handleSelect(selected, currentValue) { + this.$refs.autocomplete.focus(); + if (!currentValue) { return `${selected.name}:`; } + if (/[^:][\s|;|,]+$/gi.test(currentValue)) return `${currentValue}${selected.name}:`; + return currentValue.replace(/\w+$/gi, `${selected.name}:`); + }, + handleTyping(qry) { + qry = qry || ''; + // get the last word or group of words + let lastWord = (qry.match(/("[^"]*")|[^\s]+/g) || ['']).pop().toLowerCase(); + // if there's an open/unbalanced quote, don't autosuggest + if (/^[^"]*("[^"]*"[^"]*)*(")[^"]*$/.test(qry)) { this.filteredHints = []; return; } + // don't autosuggest if we have an open query but no text yet + if (/:\s+$/gi.test(qry)) { this.filteredHints = []; return; } + // if the above query didn't match (all quotes are balanced + // and the previous tag has value + // check if we're about to start a new tag + if (/\s+$/gi.test(qry)) { this.filteredHints = this.hints; return; } + + // ignore starting `-` from lastword, because - is used to + // exclude something, so -alb should autosuggest album + lastWord = lastWord.replace(/^-/, ''); + + // if we got here, then we handled all special cases + // now take last word, and check if we can autosuggest a tag + this.filteredHints = this.hints.filter((hint) => hint.name + .toString() + .toLowerCase() + .indexOf(lastWord) === 0); + }, + onSubmit(event) { + if (event.key === 'Enter') { + if (/:$/gi.test(this.query)) { return; } + } + this.$emit('search', this.query, event); + } + } +}; +</script> + +<style lang="scss" scoped> + .search { + ::v-deep .dropdown-content { + background-color: #323846; + } + } +</style> diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue index a2ad3f4..e0c8fa2 100644 --- a/src/site/components/sidebar/Sidebar.vue +++ b/src/site/components/sidebar/Sidebar.vue @@ -1,64 +1,80 @@ <template> - <div class="dashboard-menu"> - <router-link to="/dashboard"> - <i class="icon-com-pictures" />Files - </router-link> - <router-link to="/dashboard/albums"> - <i class="icon-interface-window" />Albums - </router-link> - <!-- - <router-link to="/dashboard/tags"> - <i class="icon-ecommerce-tag-c" />Tags - </router-link> - --> - <router-link to="/dashboard/account"> - <i class="icon-ecommerce-tag-c" />Account - </router-link> - <template v-if="user && user.isAdmin"> - <router-link to="/dashboard/admin/users"> - <i class="icon-setting-gear-a" />Users - </router-link> - <!-- - TODO: Dont wanna deal with this now - <router-link to="/dashboard/admin/settings"> - <i class="icon-setting-gear-a" />Settings - </router-link> - --> - </template> - </div> + <b-menu class="dashboard-menu"> + <b-menu-list label="Menu"> + <b-menu-item + class="item" + icon="information-outline" + label="Dashboard" + tag="nuxt-link" + to="/dashboard" + exact /> + <b-menu-item + class="item" + icon="image-multiple-outline" + label="Albums" + tag="nuxt-link" + to="/dashboard/albums" + exact /> + <b-menu-item + class="item" + icon="tag-outline" + label="Tags" + tag="nuxt-link" + to="/dashboard/tags" + exact /> + <b-menu-item icon="menu" expanded> + <template slot="label" slot-scope="props"> + Administration + <b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" /> + </template> + <b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact /> + <b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact /> + </b-menu-item> + <b-menu-item + class="item" + icon="account-cog-outline" + label="My account" + tag="nuxt-link" + to="/dashboard/account" + exact /> + </b-menu-list> + <b-menu-list label="Actions"> + <b-menu-item icon="exit-to-app" label="Logout" tag="nuxt-link" to="/logout" exact /> + </b-menu-list> + </b-menu> </template> <script> +import { mapState } from 'vuex'; + export default { - computed: { - user() { - return this.$store.state.user; + computed: mapState({ + user: (state) => state.auth.user + }), + methods: { + isRouteActive(id) { + if (this.$route.path.includes(id)) { + return true; + } + return false; } } }; + </script> <style lang="scss" scoped> @import '~/assets/styles/_colors.scss'; .dashboard-menu { - padding: 2rem; - border-radius: 8px; + ::v-deep a:hover { + cursor: pointer; + text-decoration: none; + } - a { - display: block; - font-weight: 700; - color: $textColor; - position: relative; - padding-left: 40px; - height: 35px; - &:hover{ - color: white; - } + ::v-deep .icon { + margin-right: 0.5rem; + } - i { - position: absolute; - font-size: 1.5em; - top: -4px; - left: 5px; - } + ::v-deep .icon.is-pulled-right { + margin-right: 0; } hr { margin-top: 0.6em; } diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue index 1b03ff8..2740bee 100644 --- a/src/site/components/uploader/Uploader.vue +++ b/src/site/components/uploader/Uploader.vue @@ -1,7 +1,9 @@ <template> - <div :class="{ 'has-files': alreadyAddedFiles }" + <div + :class="{ 'has-files': alreadyAddedFiles }" class="uploader-wrapper"> - <b-select v-if="loggedIn" + <b-select + v-if="loggedIn" v-model="selectedAlbum" placeholder="Upload to album" size="is-medium" @@ -13,7 +15,8 @@ {{ album.name }} </option> </b-select> - <dropzone v-if="showDropzone" + <dropzone + v-if="showDropzone" id="dropzone" ref="el" :options="dropzoneOptions" @@ -25,16 +28,22 @@ Add or drop more files </label> - <div id="template" + <div + id="template" ref="template"> <div class="dz-preview dz-file-preview"> <div class="dz-details"> - <div class="dz-filename"><span data-dz-name /></div> - <div class="dz-size"><span data-dz-size /></div> + <div class="dz-filename"> + <span data-dz-name /> + </div> + <div class="dz-size"> + <span data-dz-size /> + </div> </div> <div class="result"> <div class="openLink"> - <a class="link" + <a + class="link" target="_blank"> Link </a> @@ -43,14 +52,16 @@ <div class="error"> <div> <span> - <span class="error-message" + <span + class="error-message" data-dz-errormessage /> <i class="icon-web-warning" /> </span> </div> </div> <div class="dz-progress"> - <span class="dz-upload" + <span + class="dz-upload" data-dz-uploadprogress /> </div> <!-- @@ -64,6 +75,8 @@ </template> <script> +import { mapState, mapGetters } from 'vuex'; + import Dropzone from 'nuxt-dropzone'; import '~/assets/styles/dropzone.scss'; @@ -75,20 +88,15 @@ export default { files: [], dropzoneOptions: {}, showDropzone: false, - albums: [], selectedAlbum: null }; }, computed: { - config() { - return this.$store.state.config; - }, - token() { - return this.$store.state.token; - }, - loggedIn() { - return this.$store.state.loggedIn; - } + ...mapState({ + config: (state) => state.config, + albums: (state) => state.albums.tinyDetails + }), + ...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }) }, watch: { loggedIn() { @@ -129,8 +137,11 @@ export default { Get all available albums so the user can upload directly to one (or several soon™) of them. */ async getAlbums() { - const response = await this.$axios.$get(`albums/dropdown`); - this.albums = response.albums; + try { + await this.$store.dispatch('albums/getTinyDetails'); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } this.updateDropzoneConfig(); }, @@ -150,7 +161,7 @@ export default { /* Dropzone stuff */ - dropzoneFilesAdded(files) { + dropzoneFilesAdded() { this.alreadyAddedFiles = true; }, dropzoneSuccess(file, response) { @@ -161,6 +172,7 @@ export default { text: 'There was an error uploading this file. Check the console.', error: true }); + // eslint-disable-next-line no-console console.error(file, message, xhr); }, async dropzoneChunksUploaded(file, done) { @@ -175,7 +187,6 @@ export default { }); this.processResult(file, data); - this.$forceUpdate(); return done(); }, |