aboutsummaryrefslogtreecommitdiff
path: root/src/site/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/site/components')
-rw-r--r--src/site/components/grid/Grid.vue32
-rw-r--r--src/site/components/image-modal/ImageInfo.vue179
-rw-r--r--src/site/components/imageInfo/ImageInfo.vue0
3 files changed, 207 insertions, 4 deletions
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 90c196b..1b62097 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -75,7 +75,7 @@
</a>
</b-tooltip>
<b-tooltip label="Albums" position="is-top">
- <a class="btn" @click="openAlbumModal(item)">
+ <a class="btn" @click="handleFileModal(item)">
<i class="icon-interface-window" />
</a>
</b-tooltip>
@@ -121,7 +121,7 @@
<b-table-column field="purge" centered>
<b-tooltip label="Albums" position="is-top">
- <a class="btn" @click="openAlbumModal(props.row)">
+ <a class="btn" @click="handleFileModal(props.row)">
<i class="icon-interface-window" />
</a>
</b-tooltip>
@@ -153,7 +153,10 @@
</template>
</b-table>
</div>
- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
+ <b-modal :active.sync="isAlbumsModalActive" scroll="keep">
+ <ImageInfo :file="modalData.file" />
+ </b-modal>
+ <!-- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
<div class="card albumsModal">
<div class="card-content">
<div class="content">
@@ -176,7 +179,7 @@
</div>
</div>
</div>
- </b-modal>
+ </b-modal> -->
</div>
</template>
@@ -184,10 +187,12 @@
import { mapState } from 'vuex';
import Waterfall from './waterfall/Waterfall.vue';
+import ImageInfo from '~/components/image-modal/ImageInfo.vue';
export default {
components: {
Waterfall,
+ ImageInfo,
},
props: {
files: {
@@ -230,6 +235,11 @@ export default {
filesOffsetWaterfall: 0,
filesOffsetEndWaterfall: 50,
filesPerPageWaterfall: 50,
+ modalData: {
+ file: null,
+ tags: null,
+ albums: null,
+ },
};
},
computed: {
@@ -318,6 +328,20 @@ export default {
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;
+ },
mouseOver(id) {
const foundIndex = this.hoveredItems.indexOf(id);
if (foundIndex > -1) return;
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
new file mode 100644
index 0000000..c9dba1a
--- /dev/null
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -0,0 +1,179 @@
+<template>
+ <div class="container has-background-lolisafe">
+ <div class="columns is-marginless">
+ <div class="column fucking-opl-shut-up">
+ <img src="https://placehold.it/1024x10024">
+ </div>
+ <div class="column 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">
+ Albums
+ </div>
+
+ <div class="divider is-lolisafe has-text-light">
+ Tags
+ </div>
+ <b-field label="Add some tags">
+ <b-taginput
+ v-model="tags"
+ class="lolisafe"
+ ellipsis
+ icon="label"
+ placeholder="Add a tag" />
+ </b-field>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+ props: {
+ file: {
+ type: Object,
+ default: () => ({}),
+ },
+ },
+ data() {
+ return {
+ tags: [],
+ };
+ },
+ computed: mapState(['images']),
+ 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]}`;
+ },
+ },
+};
+</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;
+}
+</style>
diff --git a/src/site/components/imageInfo/ImageInfo.vue b/src/site/components/imageInfo/ImageInfo.vue
deleted file mode 100644
index e69de29..0000000
--- a/src/site/components/imageInfo/ImageInfo.vue
+++ /dev/null
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-15 09:47:46 +0000