aboutsummaryrefslogtreecommitdiff
path: root/src/site/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/site/components')
-rw-r--r--src/site/components/album/AlbumDetails.vue62
-rw-r--r--src/site/components/album/AlbumEntry.vue41
-rw-r--r--src/site/components/grid/Grid.vue4
-rw-r--r--src/site/components/loading/CubeShadow.vue17
-rw-r--r--src/site/components/loading/Origami.vue18
-rw-r--r--src/site/components/loading/PingPong.vue26
-rw-r--r--src/site/components/loading/RotateSquare.vue13
-rw-r--r--src/site/components/uploader/Uploader.vue1
8 files changed, 106 insertions, 76 deletions
diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index f117f2f..b411f13 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -6,34 +6,43 @@
:data="details.links || []"
:mobile-cards="true">
<template slot-scope="props">
- <b-table-column field="identifier"
+ <b-table-column
+ field="identifier"
label="Link"
centered>
- <a :href="`${config.URL}/a/${props.row.identifier}`"
+ <a
+ :href="`${config.URL}/a/${props.row.identifier}`"
target="_blank">
{{ props.row.identifier }}
</a>
</b-table-column>
- <b-table-column field="views"
+ <b-table-column
+ field="views"
label="Views"
centered>
{{ props.row.views }}
</b-table-column>
- <b-table-column field="enableDownload"
+ <b-table-column
+ field="enableDownload"
label="Allow download"
centered>
- <b-switch v-model="props.row.enableDownload"
+ <b-switch
+ v-model="props.row.enableDownload"
@input="updateLinkOptions(albumId, props.row)" />
</b-table-column>
- <b-table-column field="enabled"
+ <b-table-column
+ field="enabled"
numeric>
- <button :class="{ 'is-loading': isDeleting(props.row.identifier) }"
+ <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>
+ @click="promptDeleteAlbumLink(albumId, props.row.identifier)">
+ Delete link
+ </button>
</b-table-column>
</template>
<template slot="empty">
@@ -49,10 +58,13 @@
<div class="level is-paddingless">
<div class="level-left">
<div class="level-item">
- <button :class="{ 'is-loading': isCreatingLink }"
+ <button
+ :class="{ 'is-loading': isCreatingLink }"
class="button is-primary"
style="float: left"
- @click="createLink(albumId)">Create new link</button>
+ @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>
@@ -61,9 +73,12 @@
<div class="level-right">
<div class="level-item">
- <button class="button is-danger"
+ <button
+ class="button is-danger"
style="float: right"
- @click="promptDeleteAlbum(albumId)">Delete album</button>
+ @click="promptDeleteAlbum(albumId)">
+ Delete album
+ </button>
</div>
</div>
</div>
@@ -79,18 +94,18 @@ export default {
props: {
albumId: {
type: Number,
- default: 0
+ default: 0,
},
details: {
type: Object,
- default: () => ({})
+ default: () => ({}),
},
},
data() {
return {
isCreatingLink: false,
isDeletingLinks: [],
- }
+ };
},
computed: mapState(['config']),
methods: {
@@ -99,20 +114,20 @@ export default {
deleteAlbumLinkAction: 'albums/deleteLink',
updateLinkOptionsAction: 'albums/updateLinkOptions',
createLinkAction: 'albums/createLink',
- alert: 'alert/set'
+ 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)
+ 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)
+ onConfirm: () => this.deleteAlbumLink(albumId, identifier),
});
},
async deleteAlbum(id) {
@@ -122,7 +137,7 @@ export default {
this.alert({ text: response.message, error: false });
} catch (e) {
this.alert({ text: e.message, error: true });
- }
+ }
},
async deleteAlbumLink(albumId, identifier) {
this.isDeletingLinks.push(identifier);
@@ -133,7 +148,7 @@ export default {
} catch (e) {
this.alert({ text: e.message, error: true });
} finally {
- this.isDeletingLinks = this.isDeletingLinks.filter(e => e !== identifier);
+ this.isDeletingLinks = this.isDeletingLinks.filter((e) => e !== identifier);
}
},
async createLink(albumId) {
@@ -155,12 +170,12 @@ export default {
this.alert({ text: response.message, error: false });
} catch (e) {
this.alert({ text: e.message, error: true });
- }
+ }
},
isDeleting(identifier) {
return this.isDeletingLinks.indexOf(identifier) > -1;
- }
- }
+ },
+ },
};
</script>
@@ -184,7 +199,6 @@ export default {
}
</style>
-
<style lang="scss">
@import '~/assets/styles/_colors.scss';
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 28e434a..2723b49 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -1,8 +1,10 @@
<template>
<div class="album">
- <div class="arrow-container"
+ <div
+ class="arrow-container"
@click="toggleDetails(album)">
- <i :class="{ active: isExpanded }"
+ <i
+ :class="{ active: isExpanded }"
class="icon-arrow" />
</div>
<div class="thumb">
@@ -12,7 +14,9 @@
</div>
<div class="info">
<h4>
- <router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
+ <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>
@@ -21,19 +25,24 @@
</div>
<div class="latest is-hidden-mobile">
<template v-if="album.fileCount > 0">
- <div v-for="file of album.files"
+ <div
+ v-for="file of album.files"
:key="file.id"
class="thumb">
<figure class="image is-64x64">
- <a :href="file.url"
+ <a
+ :href="file.url"
target="_blank">
<img :src="file.thumbSquare">
</a>
</figure>
</div>
- <div v-if="album.fileCount > 5"
+ <div
+ v-if="album.fileCount > 5"
class="thumb more no-background">
- <router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
+ <router-link :to="`/dashboard/albums/${album.id}`">
+ {{ album.fileCount - 5 }}+ more
+ </router-link>
</div>
</template>
<template v-else>
@@ -41,7 +50,8 @@
</template>
</div>
- <AlbumDetails v-if="isExpanded"
+ <AlbumDetails
+ v-if="isExpanded"
:details="getDetails(album.id)"
:albumId="album.id" />
</div>
@@ -53,22 +63,22 @@ import AlbumDetails from '~/components/album/AlbumDetails.vue';
export default {
components: {
- AlbumDetails
+ AlbumDetails,
},
props: {
album: {
type: Object,
- default: () => ({})
- }
+ default: () => ({}),
+ },
},
computed: {
...mapGetters({
isExpandedGetter: 'albums/isExpanded',
- getDetails: 'albums/getDetails'
+ getDetails: 'albums/getDetails',
}),
isExpanded() {
return this.isExpandedGetter(this.album.id);
- }
+ },
},
methods: {
async toggleDetails(album) {
@@ -76,8 +86,8 @@ export default {
await this.$store.dispatch('albums/fetchDetails', album.id);
}
this.$store.commit('albums/toggleExpandedState', album.id);
- }
- }
+ },
+ },
};
</script>
@@ -175,4 +185,3 @@ export default {
div.no-background { background: none !important; }
</style>
-
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 42dcc6b..84c0b11 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -163,7 +163,7 @@
<hr>
<div class="albums-container">
- <div v-for="(album, index) in albums" :key="album.id" class="album">
+ <div v-for="album in albums" :key="album.id" class="album">
<div class="field">
<b-checkbox
:value="isAlbumSelected(album.id)"
@@ -252,7 +252,7 @@ export default {
methods: {
async search() {
const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
- console.log('> Search result data', data);
+ console.log('> Search result data', data); // eslint-disable-line no-console
},
deleteFile(file) {
// this.$emit('delete', file);
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index af31dac..bbfdb52 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>
@@ -8,16 +9,16 @@ export default {
props: {
size: {
type: String,
- default: '60px'
+ default: '60px',
},
background: {
type: String,
- default: '#9C27B0'
+ default: '#9C27B0',
},
duration: {
type: String,
- default: '1.8s'
- }
+ default: '1.8s',
+ },
},
computed: {
styles() {
@@ -25,10 +26,10 @@ export default {
width: this.size,
height: this.size,
backgroundColor: this.background,
- animationDuration: this.duration
+ animationDuration: this.duration,
};
- }
- }
+ },
+ },
};
</script>
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index d1b523d..cd1c087 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" />
@@ -18,21 +20,21 @@ export default {
props: {
size: {
type: String,
- default: '40px'
- }
+ default: '40px',
+ },
},
computed: {
innerStyles() {
- let size = parseInt(this.size);
+ const size = parseInt(this.size, 10);
return { transform: `scale(${(size / 60)})` };
},
styles() {
return {
width: this.size,
- height: this.size
+ height: this.size,
};
- }
- }
+ },
+ },
};
</script>
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index ac33e28..d562e9f 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>
@@ -17,22 +19,22 @@ export default {
props: {
size: {
type: String,
- default: '60px'
- }
+ default: '60px',
+ },
},
computed: {
innerStyles() {
- let size = parseInt(this.size);
+ const size = parseInt(this.size, 10);
return { transform: `scale(${size / 250})` };
},
styles() {
return {
width: this.size,
- height: this.size
+ height: this.size,
};
- }
- }
-}
+ },
+ },
+};
</script>
<style lang="scss" scoped>
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 4da8300..089e01a 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>
@@ -8,18 +9,18 @@ export default {
props: {
size: {
type: String,
- default: '40px'
- }
+ default: '40px',
+ },
},
computed: {
styles() {
return {
width: this.size,
height: this.size,
- display: 'inline-block'
+ display: 'inline-block',
};
- }
- }
+ },
+ },
};
</script>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index c7be372..7e2d446 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -172,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) {
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-17 03:03:22 +0000