From fe10a00ba9a3c30d8718ca004ccd19518466f5bd Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Sun, 16 Sep 2018 01:09:02 -0300
Subject: Site

---
 src/site/components/grid/Grid.vue                  | 166 ++++++++
 src/site/components/grid/waterfall/Waterfall.vue   | 181 +++++++++
 .../components/grid/waterfall/WaterfallItem.vue    |  60 +++
 .../grid/waterfall/old/waterfall-slot.vue          |  76 ++++
 .../components/grid/waterfall/old/waterfall.vue    | 442 +++++++++++++++++++++
 src/site/components/home/links/Links.vue           | 100 +++++
 src/site/components/loading/CubeShadow.vue         |  48 +++
 src/site/components/loading/Origami.vue            | 121 ++++++
 src/site/components/loading/PingPong.vue           |  98 +++++
 src/site/components/loading/RotateSquare.vue       |  87 ++++
 src/site/components/logo/Logo.vue                  |  59 +++
 src/site/components/navbar/Navbar.vue              | 119 ++++++
 src/site/components/sidebar/Sidebar.vue            |  43 ++
 src/site/components/uploader/Uploader.vue          | 251 ++++++++++++
 14 files changed, 1851 insertions(+)
 create mode 100644 src/site/components/grid/Grid.vue
 create mode 100644 src/site/components/grid/waterfall/Waterfall.vue
 create mode 100644 src/site/components/grid/waterfall/WaterfallItem.vue
 create mode 100644 src/site/components/grid/waterfall/old/waterfall-slot.vue
 create mode 100644 src/site/components/grid/waterfall/old/waterfall.vue
 create mode 100644 src/site/components/home/links/Links.vue
 create mode 100644 src/site/components/loading/CubeShadow.vue
 create mode 100644 src/site/components/loading/Origami.vue
 create mode 100644 src/site/components/loading/PingPong.vue
 create mode 100644 src/site/components/loading/RotateSquare.vue
 create mode 100644 src/site/components/logo/Logo.vue
 create mode 100644 src/site/components/navbar/Navbar.vue
 create mode 100644 src/site/components/sidebar/Sidebar.vue
 create mode 100644 src/site/components/uploader/Uploader.vue

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
new file mode 100644
index 0000000..09922c9
--- /dev/null
+++ b/src/site/components/grid/Grid.vue
@@ -0,0 +1,166 @@
+<style lang="scss" scoped>
+	@import '../../styles/_colors.scss';
+	.item-move {
+		transition: all .25s cubic-bezier(.55,0,.1,1);
+		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
+	}
+	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;
+
+			&:nth-child(1), &:nth-child(2) {
+				align-items: flex-end;
+			}
+
+			&:nth-child(1), &:nth-child(3) {
+				justify-content: flex-end;
+			}
+			a {
+				width: 30px;
+				height: 30px;
+				color: white;
+				justify-content: center;
+				align-items: center;
+				display: flex;
+				&:before {
+					content: '';
+					width: 30px;
+					height: 30px;
+					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;
+				}
+			}
+
+		}
+	}
+</style>
+
+<style lang="scss">
+	.waterfall-item:hover {
+		div.actions {
+			opacity: 1
+		}
+	}
+</style>
+
+<template>
+	<Waterfall
+		:gutterWidth="10"
+		:gutterHeight="4">
+		<WaterfallItem v-for="(item, index) in files"
+			v-if="showWaterfall && item.thumb"
+			:key="index"
+			move-class="item-move">
+			<img :src="`${item.thumb}`">
+			<div :class="{ fixed }"
+				class="actions">
+				<b-tooltip label="Link"
+					position="is-top">
+					<a :href="`${item.url}`"
+						target="_blank">
+						<i class="icon-web-code"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Albums"
+					position="is-top">
+					<a @click="manageAlbums(item)">
+						<i class="icon-interface-window"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Tags"
+					position="is-top">
+					<a @click="manageTags(item)">
+						<i class="icon-ecommerce-tag-c"/>
+					</a>
+				</b-tooltip>
+				<b-tooltip label="Delete"
+					position="is-top">
+					<a @click="deleteFile(item, index)">
+						<i class="icon-editorial-trash-a-l"/>
+					</a>
+				</b-tooltip>
+			</div>
+		</WaterfallItem>
+	</Waterfall>
+</template>
+<script>
+import Waterfall from './waterfall/Waterfall.vue';
+import WaterfallItem from './waterfall/WaterfallItem.vue';
+
+export default {
+	components: {
+		Waterfall,
+		WaterfallItem
+	},
+	props: {
+		files: {
+			type: Array,
+			default: null
+		},
+		fixed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return { showWaterfall: true };
+	},
+	mounted() {},
+	methods: {
+		deleteFile(file, index) {
+			this.$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 () => {
+					try {
+						const response = await this.axios.delete(`${this.$config.baseURL}/file/${file.id}`);
+						this.showWaterfall = false;
+						this.files.splice(index, 1);
+						this.$nextTick(() => {
+							this.showWaterfall = true;
+						});
+						return this.$toast.open(response.data.message);
+					} catch (error) {
+						return this.$onPromiseError(error);
+					}
+				}
+			});
+		}
+	}
+};
+</script>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
new file mode 100644
index 0000000..9827075
--- /dev/null
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -0,0 +1,181 @@
+<style>
+	.waterfall {
+		position: relative;
+	}
+</style>
+<template>
+	<div class="waterfall">
+		<slot/>
+	</div>
+</template>
+<script>
+// import {quickSort, getMinIndex, _, sum} from './util'
+
+const quickSort = (arr, type) => {
+	let left = [];
+	let right = [];
+	let povis;
+	if (arr.length <= 1) {
+		return arr;
+	}
+	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 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',
+	props: {
+		gutterWidth: {
+			type: Number,
+			default: 0
+		},
+		gutterHeight: {
+			type: Number,
+			default: 0
+		},
+		resizable: {
+			type: Boolean,
+			default: true
+		},
+		align: {
+			type: String,
+			default: 'center'
+		},
+		fixWidth: {
+			type: Number
+		},
+		minCol: {
+			type: Number,
+			default: 1
+		},
+		maxCol: {
+			type: Number
+		},
+		percent: {
+			type: Array
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			colNum: 0,
+			lastWidth: 0,
+			percentWidthArr: []
+		};
+	},
+	created() {
+		this.$on('itemRender', () => {
+			if (this.timer) {
+				clearTimeout(this.timer);
+			}
+			this.timer = setTimeout(() => {
+				this.render();
+			}, 0);
+		});
+	},
+	mounted() {
+		this.resizeHandle();
+		this.$watch('resizable', this.resizeHandle);
+	},
+	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;
+				}
+			}
+		},
+		resizeHandle() {
+			if (this.resizable) {
+				_.on(window, 'resize', this.render, false);
+			} else {
+				_.off(window, 'resize', this.render, false);
+			}
+		},
+		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`;
+					}
+				}
+				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);
+		}
+	}
+};
+</script>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
new file mode 100644
index 0000000..597cca6
--- /dev/null
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -0,0 +1,60 @@
+<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
+			};
+		}
+	}
+}
+</script>
diff --git a/src/site/components/grid/waterfall/old/waterfall-slot.vue b/src/site/components/grid/waterfall/old/waterfall-slot.vue
new file mode 100644
index 0000000..07ca268
--- /dev/null
+++ b/src/site/components/grid/waterfall/old/waterfall-slot.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="vue-waterfall-slot" v-show="isShow">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.vue-waterfall-slot {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+</style>
+
+<script>
+
+export default {
+  data: () => ({
+    isShow: false
+  }),
+  props: {
+    width: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    height: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    order: {
+      default: 0
+    },
+    moveClass: {
+      default: ''
+    }
+  },
+  methods: {
+    notify () {
+      this.$parent.$emit('reflow', this)
+    },
+    getMeta () {
+      return {
+        vm: this,
+        node: this.$el,
+        order: this.order,
+        width: this.width,
+        height: this.height,
+        moveClass: this.moveClass
+      }
+    }
+  },
+  created () {
+    this.rect = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }
+    this.$watch(() => (
+      this.width,
+      this.height
+    ), this.notify)
+  },
+  mounted () {
+    this.$parent.$once('reflowed', () => {
+      this.isShow = true
+    })
+    this.notify()
+  },
+  destroyed () {
+    this.notify()
+  }
+}
+
+</script>
diff --git a/src/site/components/grid/waterfall/old/waterfall.vue b/src/site/components/grid/waterfall/old/waterfall.vue
new file mode 100644
index 0000000..84e3c98
--- /dev/null
+++ b/src/site/components/grid/waterfall/old/waterfall.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="vue-waterfall" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.vue-waterfall {
+  position: relative;
+  /*overflow: hidden; cause clientWidth = 0 in IE if height not bigger than 0 */
+}
+</style>
+
+<script>
+
+const MOVE_CLASS_PROP = '_wfMoveClass'
+
+export default {
+  props: {
+    autoResize: {
+      default: true
+    },
+    interval: {
+      default: 200,
+      validator: (val) => val >= 0
+    },
+    align: {
+      default: 'left',
+      validator: (val) => ~['left', 'right', 'center'].indexOf(val)
+    },
+    line: {
+      default: 'v',
+      validator: (val) => ~['v', 'h'].indexOf(val)
+    },
+    lineGap: {
+      required: true,
+      validator: (val) => val >= 0
+    },
+    minLineGap: {
+      validator: (val) => val >= 0
+    },
+    maxLineGap: {
+      validator: (val) => val >= 0
+    },
+    singleMaxWidth: {
+      validator: (val) => val >= 0
+    },
+    fixedHeight: {
+      default: false
+    },
+    grow: {
+      validator: (val) => val instanceof Array
+    },
+    watch: {
+      default: () => ({})
+    }
+  },
+  data: () => ({
+    style: {
+      height: '',
+      overflow: ''
+    },
+    token: null
+  }),
+  methods: {
+    reflowHandler,
+    autoResizeHandler,
+    reflow
+  },
+  created () {
+    this.virtualRects = []
+    this.$on('reflow', () => {
+      this.reflowHandler()
+    })
+    this.$watch(() => (
+      this.align,
+      this.line,
+      this.lineGap,
+      this.minLineGap,
+      this.maxLineGap,
+      this.singleMaxWidth,
+      this.fixedHeight,
+      this.watch
+    ), this.reflowHandler)
+    this.$watch('grow', this.reflowHandler)
+  },
+  mounted () {
+    this.$watch('autoResize', this.autoResizeHandler)
+    on(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
+    this.autoResizeHandler(this.autoResize)
+  },
+  beforeDestroy () {
+    this.autoResizeHandler(false)
+    off(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
+  }
+}
+
+function autoResizeHandler (autoResize) {
+  if (autoResize === false || !this.autoResize) {
+    off(window, 'resize', this.reflowHandler, false)
+  } else {
+    on(window, 'resize', this.reflowHandler, false)
+  }
+}
+
+function tidyUpAnimations (event) {
+  let node = event.target
+  let moveClass = node[MOVE_CLASS_PROP]
+  if (moveClass) {
+    removeClass(node, moveClass)
+  }
+}
+
+function reflowHandler () {
+  clearTimeout(this.token)
+  this.token = setTimeout(this.reflow, this.interval)
+}
+
+function reflow () {
+  if (!this.$el) { return }
+  let width = this.$el.clientWidth
+  let metas = this.$children.map((slot) => slot.getMeta())
+  metas.sort((a, b) => a.order - b.order)
+  this.virtualRects = metas.map(() => ({}))
+  calculate(this, metas, this.virtualRects)
+  setTimeout(() => {
+    if (isScrollBarVisibilityChange(this.$el, width)) {
+      calculate(this, metas, this.virtualRects)
+    }
+    this.style.overflow = 'hidden'
+    render(this.virtualRects, metas)
+    this.$emit('reflowed', this)
+  }, 0)
+}
+
+function isScrollBarVisibilityChange (el, lastClientWidth) {
+  return lastClientWidth !== el.clientWidth
+}
+
+function calculate (vm, metas, styles) {
+  let options = getOptions(vm)
+  let processor = vm.line === 'h' ? horizontalLineProcessor : verticalLineProcessor
+  processor.calculate(vm, options, metas, styles)
+}
+
+function getOptions (vm) {
+  const maxLineGap = vm.maxLineGap ? +vm.maxLineGap : vm.lineGap
+  return {
+    align: ~['left', 'right', 'center'].indexOf(vm.align) ? vm.align : 'left',
+    line: ~['v', 'h'].indexOf(vm.line) ? vm.line : 'v',
+    lineGap: +vm.lineGap,
+    minLineGap: vm.minLineGap ? +vm.minLineGap : vm.lineGap,
+    maxLineGap: maxLineGap,
+    singleMaxWidth: Math.max(vm.singleMaxWidth || 0, maxLineGap),
+    fixedHeight: !!vm.fixedHeight,
+    grow: vm.grow && vm.grow.map(val => +val)
+  }
+}
+
+var verticalLineProcessor = (() => {
+
+  function calculate (vm, options, metas, rects) {
+    let width = vm.$el.clientWidth
+    let grow = options.grow
+    let strategy = grow
+      ? getRowStrategyWithGrow(width, grow)
+      : getRowStrategy(width, options)
+    let tops = getArrayFillWith(0, strategy.count)
+    metas.forEach((meta, index) => {
+      let offset = tops.reduce((last, top, i) => top < tops[last] ? i : last, 0)
+      let width = strategy.width[offset % strategy.count]
+      let rect = rects[index]
+      rect.top = tops[offset]
+      rect.left = strategy.left + (offset ? sum(strategy.width.slice(0, offset)) : 0)
+      rect.width = width
+      rect.height = meta.height * (options.fixedHeight ? 1 : width / meta.width)
+      tops[offset] = tops[offset] + rect.height
+    })
+    vm.style.height = Math.max.apply(Math, tops) + 'px'
+  }
+
+  function getRowStrategy (width, options) {
+    let count = width / options.lineGap
+    let slotWidth
+    if (options.singleMaxWidth >= width) {
+      count = 1
+      slotWidth = Math.max(width, options.minLineGap)
+    } else {
+      let maxContentWidth = options.maxLineGap * ~~count
+      let minGreedyContentWidth = options.minLineGap * ~~(count + 1)
+      let canFit = maxContentWidth >= width
+      let canFitGreedy = minGreedyContentWidth <= width
+      if (canFit && canFitGreedy) {
+        count = Math.round(count)
+        slotWidth = width / count
+      } else if (canFit) {
+        count = ~~count
+        slotWidth = width / count
+      } else if (canFitGreedy) {
+        count = ~~(count + 1)
+        slotWidth = width / count
+      } else {
+        count = ~~count
+        slotWidth = options.maxLineGap
+      }
+      if (count === 1) {
+        slotWidth = Math.min(width, options.singleMaxWidth)
+        slotWidth = Math.max(slotWidth, options.minLineGap)
+      }
+    }
+    return {
+      width: getArrayFillWith(slotWidth, count),
+      count: count,
+      left: getLeft(width, slotWidth * count, options.align)
+    }
+  }
+
+  function getRowStrategyWithGrow (width, grow) {
+    let total = sum(grow)
+    return {
+      width: grow.map(val => width * val / total),
+      count: grow.length,
+      left: 0
+    }
+  }
+
+  return {
+    calculate
+  }
+
+})()
+
+var horizontalLineProcessor = (() => {
+
+  function calculate (vm, options, metas, rects) {
+    let width = vm.$el.clientWidth
+    let total = metas.length
+    let top = 0
+    let offset = 0
+    while (offset < total) {
+      let strategy = getRowStrategy(width, options, metas, offset)
+      for (let i = 0, left = 0, meta, rect; i < strategy.count; i++) {
+        meta = metas[offset + i]
+        rect = rects[offset + i]
+        rect.top = top
+        rect.left = strategy.left + left
+        rect.width = meta.width * strategy.height / meta.height
+        rect.height = strategy.height
+        left += rect.width
+      }
+      offset += strategy.count
+      top += strategy.height
+    }
+    vm.style.height = top + 'px'
+  }
+
+  function getRowStrategy (width, options, metas, offset) {
+    let greedyCount = getGreedyCount(width, options.lineGap, metas, offset)
+    let lazyCount = Math.max(greedyCount - 1, 1)
+    let greedySize = getContentSize(width, options, metas, offset, greedyCount)
+    let lazySize = getContentSize(width, options, metas, offset, lazyCount)
+    let finalSize = chooseFinalSize(lazySize, greedySize, width)
+    let height = finalSize.height
+    let fitContentWidth = finalSize.width
+    if (finalSize.count === 1) {
+      fitContentWidth = Math.min(options.singleMaxWidth, width)
+      height = metas[offset].height * fitContentWidth / metas[offset].width
+    }
+    return {
+      left: getLeft(width, fitContentWidth, options.align),
+      count: finalSize.count,
+      height: height
+    }
+  }
+
+  function getGreedyCount (rowWidth, rowHeight, metas, offset) {
+    let count = 0
+    for (let i = offset, width = 0; i < metas.length && width <= rowWidth; i++) {
+      width += metas[i].width * rowHeight / metas[i].height
+      count++
+    }
+    return count
+  }
+
+  function getContentSize (rowWidth, options, metas, offset, count) {
+    let originWidth = 0
+    for (let i = count - 1; i >= 0; i--) {
+      let meta = metas[offset + i]
+      originWidth += meta.width * options.lineGap / meta.height
+    }
+    let fitHeight = options.lineGap * rowWidth / originWidth
+    let canFit = (fitHeight <= options.maxLineGap && fitHeight >= options.minLineGap)
+    if (canFit) {
+      return {
+        cost: Math.abs(options.lineGap - fitHeight),
+        count: count,
+        width: rowWidth,
+        height: fitHeight
+      }
+    } else {
+      let height = originWidth > rowWidth ? options.minLineGap : options.maxLineGap
+      return {
+        cost: Infinity,
+        count: count,
+        width: originWidth * height / options.lineGap,
+        height: height
+      }
+    }
+  }
+
+  function chooseFinalSize (lazySize, greedySize, rowWidth) {
+    if (lazySize.cost === Infinity && greedySize.cost === Infinity) {
+      return greedySize.width < rowWidth ? greedySize : lazySize
+    } else {
+      return greedySize.cost >= lazySize.cost ? lazySize : greedySize
+    }
+  }
+
+  return {
+    calculate
+  }
+
+})()
+
+function getLeft (width, contentWidth, align) {
+  switch (align) {
+    case 'right':
+      return width - contentWidth
+    case 'center':
+      return (width - contentWidth) / 2
+    default:
+      return 0
+  }
+}
+
+function sum (arr) {
+  return arr.reduce((sum, val) => sum + val)
+}
+
+function render (rects, metas) {
+  let metasNeedToMoveByTransform = metas.filter((meta) => meta.moveClass)
+  let firstRects = getRects(metasNeedToMoveByTransform)
+  applyRects(rects, metas)
+  let lastRects = getRects(metasNeedToMoveByTransform)
+  metasNeedToMoveByTransform.forEach((meta, i) => {
+    meta.node[MOVE_CLASS_PROP] = meta.moveClass
+    setTransform(meta.node, firstRects[i], lastRects[i])
+  })
+  document.body.clientWidth // forced reflow
+  metasNeedToMoveByTransform.forEach((meta) => {
+    addClass(meta.node, meta.moveClass)
+    clearTransform(meta.node)
+  })
+}
+
+function getRects (metas) {
+  return metas.map((meta) => meta.vm.rect)
+}
+
+function applyRects (rects, metas) {
+  rects.forEach((rect, i) => {
+    let style = metas[i].node.style
+    metas[i].vm.rect = rect
+    for (let prop in rect) {
+      style[prop] = rect[prop] + 'px'
+    }
+  })
+}
+
+function setTransform (node, firstRect, lastRect) {
+  let dx = firstRect.left - lastRect.left
+  let dy = firstRect.top - lastRect.top
+  let sw = firstRect.width / lastRect.width
+  let sh = firstRect.height / lastRect.height
+  node.style.transform =
+  node.style.WebkitTransform = `translate(${dx}px,${dy}px) scale(${sw},${sh})`
+  node.style.transitionDuration = '0s'
+}
+
+function clearTransform (node) {
+  node.style.transform = node.style.WebkitTransform = ''
+  node.style.transitionDuration = ''
+}
+
+function getTransitionEndEvent () {
+  let isWebkitTrans =
+    window.ontransitionend === undefined &&
+    window.onwebkittransitionend !== undefined
+  let transitionEndEvent = isWebkitTrans
+    ? 'webkitTransitionEnd'
+    : 'transitionend'
+  return transitionEndEvent
+}
+
+/**
+ * util
+ */
+
+function getArrayFillWith (item, count) {
+  let getter = (typeof item === 'function') ? () => item() : () => item
+  let arr = []
+  for (let i = 0; i < count; i++) {
+    arr[i] = getter()
+  }
+  return arr
+}
+
+function addClass (elem, name) {
+  if (!hasClass(elem, name)) {
+    let cur = attr(elem, 'class').trim()
+    let res = (cur + ' ' + name).trim()
+    attr(elem, 'class', res)
+  }
+}
+
+function removeClass (elem, name) {
+  let reg = new RegExp('\\s*\\b' + name + '\\b\\s*', 'g')
+  let res = attr(elem, 'class').replace(reg, ' ').trim()
+  attr(elem, 'class', res)
+}
+
+function hasClass (elem, name) {
+  return (new RegExp('\\b' + name + '\\b')).test(attr(elem, 'class'))
+}
+
+function attr (elem, name, value) {
+  if (typeof value !== 'undefined') {
+    elem.setAttribute(name, value)
+  } else {
+    return elem.getAttribute(name) || ''
+  }
+}
+
+function on (elem, type, listener, useCapture = false) {
+  elem.addEventListener(type, listener, useCapture)
+}
+
+function off (elem, type, listener, useCapture = false) {
+  elem.removeEventListener(type, listener, useCapture)
+}
+
+</script>
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
new file mode 100644
index 0000000..ba1e493
--- /dev/null
+++ b/src/site/components/home/links/Links.vue
@@ -0,0 +1,100 @@
+<style lang="scss" scoped>
+	@import '../../../styles/_colors.scss';
+	.links {
+		margin-bottom: 3em;
+		align-items: stretch;
+		display: flex;
+		justify-content: space-between;
+
+		div.link { cursor: pointer; }
+		.link {
+			background: $backgroundAccent;
+			display: block;
+			width: calc(25% - 2rem);
+			border-radius: 6px;
+			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
+			transition-duration: 86ms;
+			transition-property: box-shadow,-webkit-transform;
+			transition-property: box-shadow,transform;
+			transition-property: box-shadow,transform,-webkit-transform;
+			will-change: box-shadow,transform;
+
+			header.bd-footer-star-header {
+				padding: 1.5rem;
+
+				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
+
+				h4.bd-footer-title {
+					color: $textColorHighlight;
+					font-size: 1.5rem;
+					line-height: 1.25;
+					margin-bottom: .5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 700;
+				}
+
+				p.bd-footer-subtitle {
+					color: $textColor;
+					margin-top: -.5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 400;
+				}
+			}
+
+			&:hover {
+				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
+				-webkit-transform: translateY(-.5rem);
+				transform: translateY(-.5rem);
+			}
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.links {
+			display: block;
+			padding: 0px 2em;
+			.link {
+				width: 100%;
+				margin-bottom: 1.5em;
+			}
+		}
+	}
+</style>
+<template>
+	<div class="links">
+		<a href="https://github.com/WeebDev/lolisafe"
+			target="_blank"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">GitHub</h4>
+				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
+			</header>
+		</a>
+		<div class="link">
+			<header class="bd-footer-star-header">
+				<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"
+			target="_blank"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">Extension</h4>
+				<p class="bd-footer-subtitle">Upload from any website</p>
+			</header>
+		</a>
+		<router-link to="faq"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">FAQ</h4>
+				<p class="bd-footer-subtitle">dunno</p>
+			</header>
+		</router-link>
+	</div>
+</template>
+<script>
+export default {}
+</script>
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
new file mode 100644
index 0000000..af31dac
--- /dev/null
+++ b/src/site/components/loading/CubeShadow.vue
@@ -0,0 +1,48 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--cube-shadow" />
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '60px'
+		},
+		background: {
+			type: String,
+			default: '#9C27B0'
+		},
+		duration: {
+			type: String,
+			default: '1.8s'
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				width: this.size,
+				height: this.size,
+				backgroundColor: this.background,
+				animationDuration: this.duration
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.spinner{
+		animation: cube-shadow-spinner 1.8s cubic-bezier(0.75, 0, 0.5, 1) infinite;
+	}
+	@keyframes cube-shadow-spinner {
+		50% {
+			border-radius: 50%;
+			transform: scale(0.5) rotate(360deg);
+		}
+		100% {
+			transform: scale(1) rotate(720deg);
+		}
+	}
+</style>
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
new file mode 100644
index 0000000..d1b523d
--- /dev/null
+++ b/src/site/components/loading/Origami.vue
@@ -0,0 +1,121 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner-origami">
+		<div :style="innerStyles"
+			class="spinner-inner loading">
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+			<span class="slice" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '40px'
+		}
+	},
+	computed: {
+		innerStyles() {
+			let size = parseInt(this.size);
+			return { transform: `scale(${(size / 60)})` };
+		},
+		styles() {
+			return {
+				width: this.size,
+				height: this.size
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/colors.scss';
+
+@for $i from 1 through 6 {
+	@keyframes origami-show-#{$i}{
+		from{
+			transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+	@keyframes origami-hide-#{$i}{
+		to{
+			transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+
+	@keyframes origami-cycle-#{$i} {
+
+		$startIndex: $i*5;
+		$reverseIndex: (80 - $i*5);
+
+		#{$startIndex * 1%} {
+			transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+		#{$startIndex + 5%},
+		#{$reverseIndex * 1%} {
+			transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
+			border-left-color: #41b883;
+		}
+
+		#{$reverseIndex + 5%},
+		100%{
+			transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
+			border-left-color: #31855e;
+		}
+	}
+}
+
+.spinner{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	* {
+	line-height: 0;
+	box-sizing: border-box;
+	}
+}
+.spinner-inner{
+	display: block;
+	width: 60px;
+	height: 68px;
+	.slice {
+		border-top: 18px solid transparent;
+		border-right: none;
+		border-bottom: 16px solid transparent;
+		border-left: 30px solid #f7484e;
+		position: absolute;
+		top: 0px;
+		left: 50%;
+		transform-origin: left bottom;
+		border-radius: 3px 3px 0 0;
+	}
+
+	@for $i from 1 through 6 {
+		.slice:nth-child(#{$i}) {
+			transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
+			animation: .15s linear .9 - $i*.08s origami-hide-#{$i} both 1;
+		}
+	}
+
+	&.loading{
+		@for $i from 1 through 6 {
+			.slice:nth-child(#{$i}) {
+				transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
+				animation: 2s origami-cycle-#{$i} linear infinite both;
+			}
+		}
+	}
+
+}
+</style>
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
new file mode 100644
index 0000000..ac33e28
--- /dev/null
+++ b/src/site/components/loading/PingPong.vue
@@ -0,0 +1,98 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--ping-pong">
+		<div :style="innerStyles"
+			class="spinner-inner">
+			<div class="board">
+				<div class="left"/>
+				<div class="right"/>
+				<div class="ball"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '60px'
+		}
+	},
+	computed: {
+		innerStyles() {
+			let size = parseInt(this.size);
+			return { transform: `scale(${size / 250})` };
+		},
+		styles() {
+			return {
+				width: this.size,
+				height: this.size
+			};
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.spinner{
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		* {
+			line-height: 0;
+			box-sizing: border-box;
+		}
+	}
+	.board {
+		width:250px;
+		position: relative;
+	}
+	.left,
+	.right {
+		height:50px;
+		width:15px;
+		background:#41b883;
+		display: inline-block;
+		position:absolute;
+	}
+	.left {
+		left:0;
+		animation: pingpong-position1 2s linear infinite;
+	}
+	.right {
+		right:0;
+		animation: pingpong-position2 2s linear infinite;
+	}
+	.ball{
+		width:15px;
+		height:15px;
+		border-radius:50%;
+		background:#f7484e;
+		position:absolute;
+		animation: pingpong-bounce 2s linear infinite;
+	}
+	@keyframes pingpong-position1 {
+		0% {top:-60px;}
+		25% {top:0;}
+		50% {top:60px;}
+		75% {top:-60px;}
+		100% {top:-60px;}
+	}
+	@keyframes pingpong-position2 {
+		0% {top:60px;}
+		25% {top:0;}
+		50% {top:-60px;}
+		75% {top:-60px;}
+		100% {top:60px;}
+	}
+	@keyframes pingpong-bounce {
+		0% {top:-35px;left:10px;}
+		25% {top:25px;left:225px;}
+		50% {top:75px;left:10px;}
+		75% {top:-35px;left:225px;}
+		100% {top:-35px;left:10px;}
+	}
+</style>
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
new file mode 100644
index 0000000..4da8300
--- /dev/null
+++ b/src/site/components/loading/RotateSquare.vue
@@ -0,0 +1,87 @@
+<template>
+	<div :style="styles"
+		class="spinner spinner--rotate-square-2" />
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			type: String,
+			default: '40px'
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				width: this.size,
+				height: this.size,
+				display: 'inline-block'
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/colors.scss';
+
+.spinner {
+	position: relative;
+	* {
+		line-height: 0;
+		box-sizing: border-box;
+	}
+	&:before {
+		content: '';
+		width: 100%;
+		height: 20%;
+		min-width: 5px;
+		background: #000;
+		opacity: 0.1;
+		position: absolute;
+		bottom: 0%;
+		left: 0;
+		border-radius: 50%;
+		animation: rotate-square-2-shadow .5s linear infinite;
+	}
+	&:after {
+		content: '';
+		width: 100%;
+		height: 100%;
+		background: $basePink;
+		animation: rotate-square-2-animate .5s linear infinite;
+		position: absolute;
+		bottom:40%;
+		left: 0;
+		border-radius: 3px;
+	}
+}
+
+@keyframes rotate-square-2-animate {
+	17% {
+		border-bottom-right-radius: 3px;
+	}
+	25% {
+		transform: translateY(20%) rotate(22.5deg);
+	}
+	50% {
+		transform: translateY(40%) scale(1, .9) rotate(45deg);
+		border-bottom-right-radius: 50%;
+	}
+	75% {
+		transform: translateY(20%) rotate(67.5deg);
+	}
+	100% {
+		transform: translateY(0) rotate(90deg);
+	}
+}
+@keyframes rotate-square-2-shadow {
+	0%, 100% {
+		transform: scale(1, 1);
+	}
+	50% {
+		transform: scale(1.2, 1);
+	}
+}
+</style>
diff --git a/src/site/components/logo/Logo.vue b/src/site/components/logo/Logo.vue
new file mode 100644
index 0000000..d594c7e
--- /dev/null
+++ b/src/site/components/logo/Logo.vue
@@ -0,0 +1,59 @@
+<style lang="scss" scoped>
+	@import '../../styles/_colors.scss';
+	#logo {
+		-webkit-animation-delay: 0.5s;
+		animation-delay: 0.5s;
+		-webkit-animation-duration: 1.5s;
+		animation-duration: 1.5s;
+		-webkit-animation-fill-mode: both;
+		animation-fill-mode: both;
+		-webkit-animation-name: floatUp;
+		animation-name: floatUp;
+		-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+		animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+		border-radius: 24px;
+		display: inline-block;
+		height: 240px;
+		position: relative;
+		vertical-align: top;
+		width: 240px;
+		box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+		background: $backgroundAccent;
+		pointer-events: none;
+	}
+
+	#logo img {
+		height: 200px;
+		margin-top: 20px;
+	}
+
+	@keyframes floatUp {
+		0% {
+			opacity: 0;
+			box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
+			-webkit-transform: scale(0.86);
+			transform: scale(0.86);
+		}
+		25% { opacity: 100; }
+		67% {
+			box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+			-webkit-transform: scale(1);
+			transform: scale(1);
+		}
+		100% {
+			box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+			-webkit-transform: scale(1);
+			transform: scale(1);
+		}
+	}
+</style>
+
+<template>
+	<p id="logo">
+		<img src="../../../../public/images/logo.png">
+	</p>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
new file mode 100644
index 0000000..108c150
--- /dev/null
+++ b/src/site/components/navbar/Navbar.vue
@@ -0,0 +1,119 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	nav.navbar {
+		background: transparent;
+		box-shadow: none;
+
+		.navbar-brand {
+			width: 100%;
+			align-items: flex-start;
+			padding: 1em;
+
+			div.spacer { flex: 1 0 10px; }
+			a.navbar-item {
+				color: $defaultTextColor;
+				font-size: 16px;
+				font-weight: 700;
+				text-decoration-style: solid;
+			}
+			a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
+				text-decoration: underline;
+				background: transparent;
+			}
+
+			i {
+				font-size: 2em;
+				&.hidden {
+					width: 0px;
+					height: 1.5em;
+					pointer-events: none;
+				}
+			}
+		}
+
+		&.isWhite {
+			.navbar-brand {
+				a.navbar-item {
+					color: white;
+				}
+			}
+		}
+	}
+</style>
+
+<template>
+	<nav :class="{ isWhite }"
+		class="navbar is-transparent">
+		<div class="navbar-brand">
+			<router-link to="/"
+				class="navbar-item no-active">
+				<i class="icon-ecommerce-safebox"/> {{ config.serviceName }}
+			</router-link>
+
+			<!--
+			<template v-if="loggedIn">
+				<router-link
+					to="/dashboard/uploads"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Uploads</router-link>
+
+				<router-link
+					to="/dashboard/albums"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Albums</router-link>
+
+				<router-link
+					to="/dashboard/tags"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Tags</router-link>
+
+				<router-link
+					to="/dashboard/settings"
+					class="navbar-item no-active"
+					exact><i class="hidden"/>Settings</router-link>
+			</template>
+			-->
+
+			<div class="spacer" />
+
+			<router-link v-if="!loggedIn"
+				class="navbar-item"
+				to="/login"><i class="hidden"/>Login</router-link>
+
+			<router-link v-else
+				to="/dashboard"
+				class="navbar-item no-active"
+				exact><i class="hidden"/>Dashboard</router-link>
+		</div>
+	</nav>
+</template>
+
+<script>
+export default {
+	props: {
+		isWhite: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return { hamburger: false };
+	},
+	computed: {
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		},
+		user() {
+			return this.$store.state.user;
+		},
+		config() {
+			return this.$store.state.config;
+		}
+	},
+	methods: {
+		logOut() {
+			this.$emit('logout');
+		}
+	}
+};
+</script>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
new file mode 100644
index 0000000..861ebea
--- /dev/null
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -0,0 +1,43 @@
+<style lang="scss" scoped>
+	@import '../../styles/colors.scss';
+	.dashboard-menu {
+		a {
+			display: block;
+			font-weight: 700;
+			color: #868686;
+			position: relative;
+			padding-left: 40px;
+			height: 35px;
+			&:hover, &:first-child {
+				color: $defaultTextColor;
+			}
+
+			i {
+				position: absolute;
+				font-size: 1.5em;
+				top: -4px;
+				left: 5px;
+			}
+		}
+
+		hr { margin-top: 0.6em; }
+	}
+</style>
+<template>
+	<div class="dashboard-menu">
+		<router-link to="/"><i class="icon-ecommerce-safebox"/>lolisafe</router-link>
+		<hr>
+		<a><i class="icon-interface-cloud-upload"/>Upload files</a>
+		<hr>
+		<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>
+		<hr>
+		<router-link to="/dashboard/settings"><i class="icon-setting-gear-a"/>Settings</router-link>
+	</div>
+</template>
+<script>
+export default {
+
+}
+</script>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
new file mode 100644
index 0000000..fcb79cb
--- /dev/null
+++ b/src/site/components/uploader/Uploader.vue
@@ -0,0 +1,251 @@
+<template>
+	<div :class="{ hasFiles: files.length > 0 }"
+		class="uploader-wrapper">
+		<b-select v-if="loggedIn"
+			v-model="selectedAlbum"
+			placeholder="Upload to album"
+			size="is-medium"
+			expanded>
+			<option
+				v-for="album in albums"
+				:value="album.id"
+				:key="album.id">
+				{{ album.name }}
+			</option>
+		</b-select>
+		<dropzone v-if="showDropzone"
+			id="dropzone"
+			ref="el"
+			:options="dropzoneOptions"
+			:include-styling="false"
+			@vdropzone-success="dropzoneSuccess"
+			@vdropzone-error="dropzoneError"
+			@vdropzone-files-added="dropzoneFilesAdded" />
+
+		<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>
+				<div class="result">
+					<div class="copyLink">
+						<b-tooltip label="Copy link">
+							<i class="icon-web-code"/>
+						</b-tooltip>
+					</div>
+					<div class="openLink">
+						<b-tooltip label="Open file">
+							<a class="link"
+								target="_blank">
+								<i class="icon-web-url"/>
+							</a>
+						</b-tooltip>
+					</div>
+				</div>
+				<div class="error">
+					<div>
+						<span>
+							<span class="error-message"
+								data-dz-errormessage/>
+							<i class="icon-web-warning"/>
+						</span>
+					</div>
+				</div>
+				<div class="dz-progress">
+					<span class="dz-upload"
+						data-dz-uploadprogress/>
+				</div>
+				<!--
+				<div class="dz-error-message"><span data-dz-errormessage/></div>
+				<div class="dz-success-mark"><i class="fa fa-check"/></div>
+				<div class="dz-error-mark"><i class="fa fa-close"/></div>
+				-->
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Dropzone from 'nuxt-dropzone';
+import '../../styles/dropzone.scss';
+
+export default {
+	components: { Dropzone },
+	data() {
+		return {
+			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;
+		}
+	},
+	watch: {
+		loggedIn() {
+			this.getAlbums();
+		},
+		selectedAlbum() {
+			this.updateDropzoneConfig();
+		}
+	},
+	mounted() {
+		this.dropzoneOptions = {
+			url: `${this.$config.baseURL}/upload`,
+			autoProcessQueue: true,
+			addRemoveLinks: false,
+			parallelUploads: 5,
+			uploadMultiple: false,
+			maxFiles: 1000,
+			createImageThumbnails: false,
+			paramName: 'file',
+			chunking: true,
+			retryChunks: true,
+			retryChunksLimit: 3,
+			parallelChunkUploads: false,
+			chunkSize: this.config.chunkSize * 1000000,
+			chunksUploaded: this.dropzoneChunksUploaded,
+			maxFilesize: this.config.maxFileSize,
+			previewTemplate: this.$refs.template.innerHTML,
+			dictDefaultMessage: 'Drag & Drop your files or click to browse',
+			headers: { Accept: 'application/vnd.lolisafe.json' }
+		};
+		this.showDropzone = true;
+		if (this.loggedIn) this.getAlbums();
+	},
+	methods: {
+		/*
+			Get all available albums so the user can upload directly to one (or several soon™) of them.
+		*/
+		async getAlbums() {
+			try {
+				const response = await this.axios.get(`${this.$config.baseURL}/albums/dropdown`);
+				this.albums = response.data.albums;
+				this.updateDropzoneConfig();
+			} catch (error) {
+				this.$onPromiseError(error);
+			}
+		},
+
+		/*
+			This method needs to be called after the token or selectedAlbum changes
+			since dropzone doesn't seem to update the config values unless you force it.
+			Tch.
+		*/
+		updateDropzoneConfig() {
+			this.$refs.el.setOption('headers', {
+				Accept: 'application/vnd.lolisafe.json',
+				Authorization: this.token ? `Bearer ${this.token}` : '',
+				albumId: this.selectedAlbum ? this.selectedAlbum : null
+			});
+		},
+
+		/*
+			Dropzone stuff
+		*/
+		dropzoneFilesAdded(files) {
+			// console.log(files);
+		},
+		dropzoneSuccess(file, response) {
+			this.processResult(file, response);
+		},
+		dropzoneError(file, message, xhr) {
+			this.$showToast('There was an error uploading this file. Check the console.', true, 5000);
+			console.error(file, message, xhr);
+		},
+		dropzoneChunksUploaded(file, done) {
+			const response = JSON.parse(file.xhr.response);
+			if (!response.url) {
+				console.error('There was a problem uploading the file?');
+				return done();
+			}
+
+			this.processResult(file, response);
+			this.$forceUpdate();
+			return done();
+		},
+
+		/*
+			If upload/s was/were successfull we modify the template so that the buttons for
+			copying the returned url or opening it in a new window appear.
+		*/
+		processResult(file, response) {
+			if (!response.url) return;
+			file.previewTemplate.querySelector('.link').setAttribute('href', response.url);
+			file.previewTemplate.querySelector('.copyLink').addEventListener('click', () => {
+				this.$showToast('Link copied!', false, 1000);
+				this.$clipboard(response.url);
+			});
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+	#template { display: none; }
+	.uploader-wrapper {
+		display: block;
+		width: 400px;
+		margin: 0 auto;
+		max-width: 100%;
+		transition-duration: 86ms;
+		transition-property: box-shadow,-webkit-transform;
+		transition-property: box-shadow,transform;
+		transition-property: box-shadow,transform,-webkit-transform;
+		will-change: box-shadow,transform;
+
+		&:hover, &.hasFiles {
+			box-shadow: 0 1rem 3rem 0rem rgba(10, 10, 10, 0.25);
+			-webkit-transform: translateY(-.5rem);
+			transform: translateY(-.5rem);
+		}
+	}
+</style>
+<style lang="scss">
+	@import '../../styles/colors.scss';
+	.filepond--panel-root {
+		background: transparent;
+		border: 2px solid #2c3340;
+	}
+	.filepond--drop-label {
+		color: #c7ccd8;
+		pointer-events: none;
+	}
+
+	.filepond--item-panel {
+		background-color: #767b8b;
+	}
+
+	.filepond--root .filepond--drip-blob {
+		background-color: #7f8a9a
+	}
+
+	.filepond--drip {
+		background: black;
+	}
+
+	div.uploader-wrapper {
+		div.control {
+			margin-bottom: 5px;
+			span.select {
+				select {
+					border: 2px solid #2c3340;
+					background: rgba(0, 0, 0, 0.15);
+					border-radius: .3em;
+					color: $uploaderDropdownColor;
+				}
+			}
+		}
+	}
+</style>
-- 
cgit v1.2.3


From 072fec199db92543836fbdacc6088cd2f7b73eae Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Sun, 16 Sep 2018 05:27:10 -0300
Subject: Added logo

---
 src/site/components/logo/Logo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/logo/Logo.vue b/src/site/components/logo/Logo.vue
index d594c7e..2452b58 100644
--- a/src/site/components/logo/Logo.vue
+++ b/src/site/components/logo/Logo.vue
@@ -50,7 +50,7 @@
 
 <template>
 	<p id="logo">
-		<img src="../../../../public/images/logo.png">
+		<img src="../../public/images/logo.png">
 	</p>
 </template>
 
-- 
cgit v1.2.3


From c2c6e99878853fafdbd5e708c3163921f8529ae1 Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Mon, 17 Sep 2018 04:38:25 -0300
Subject: Public albums wooo!

---
 src/site/components/grid/Grid.vue | 77 ++++++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 30 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 09922c9..50e626b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -82,36 +82,46 @@
 		<WaterfallItem v-for="(item, index) in files"
 			v-if="showWaterfall && item.thumb"
 			:key="index"
+			:width="width"
 			move-class="item-move">
-			<img :src="`${item.thumb}`">
-			<div :class="{ fixed }"
-				class="actions">
-				<b-tooltip label="Link"
-					position="is-top">
-					<a :href="`${item.url}`"
-						target="_blank">
-						<i class="icon-web-code"/>
-					</a>
-				</b-tooltip>
-				<b-tooltip label="Albums"
-					position="is-top">
-					<a @click="manageAlbums(item)">
-						<i class="icon-interface-window"/>
-					</a>
-				</b-tooltip>
-				<b-tooltip label="Tags"
-					position="is-top">
-					<a @click="manageTags(item)">
-						<i class="icon-ecommerce-tag-c"/>
-					</a>
-				</b-tooltip>
-				<b-tooltip label="Delete"
-					position="is-top">
-					<a @click="deleteFile(item, index)">
-						<i class="icon-editorial-trash-a-l"/>
-					</a>
-				</b-tooltip>
-			</div>
+			<template v-if="isPublic">
+				<a :href="`${item.url}`"
+					target="_blank">
+					<img :src="`${item.thumb}`">
+				</a>
+			</template>
+			<template v-else>
+				<img :src="`${item.thumb}`">
+				<div v-if="!isPublic"
+					:class="{ fixed }"
+					class="actions">
+					<b-tooltip label="Link"
+						position="is-top">
+						<a :href="`${item.url}`"
+							target="_blank">
+							<i class="icon-web-code"/>
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Albums"
+						position="is-top">
+						<a @click="manageAlbums(item)">
+							<i class="icon-interface-window"/>
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Tags"
+						position="is-top">
+						<a @click="manageTags(item)">
+							<i class="icon-ecommerce-tag-c"/>
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Delete"
+						position="is-top">
+						<a @click="deleteFile(item, index)">
+							<i class="icon-editorial-trash-a-l"/>
+						</a>
+					</b-tooltip>
+				</div>
+			</template>
 		</WaterfallItem>
 	</Waterfall>
 </template>
@@ -132,12 +142,19 @@ export default {
 		fixed: {
 			type: Boolean,
 			default: false
+		},
+		isPublic: {
+			type: Boolean,
+			default: false
+		},
+		width: {
+			type: Number,
+			default: 150
 		}
 	},
 	data() {
 		return { showWaterfall: true };
 	},
-	mounted() {},
 	methods: {
 		deleteFile(file, index) {
 			this.$dialog.confirm({
-- 
cgit v1.2.3


From 41cb8ff9861a88366a65ecfcf6b077a3d5f1615c Mon Sep 17 00:00:00 2001
From: Pitu <7425261+Pitu@users.noreply.github.com>
Date: Tue, 18 Sep 2018 01:44:46 -0300
Subject: Add an add more files button to the uploader

---
 src/site/components/uploader/Uploader.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index fcb79cb..afafd55 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{ hasFiles: files.length > 0 }"
+	<div :class="{ 'has-files': alreadyAddedFiles }"
 		class="uploader-wrapper">
 		<b-select v-if="loggedIn"
 			v-model="selectedAlbum"
@@ -21,6 +21,9 @@
 			@vdropzone-success="dropzoneSuccess"
 			@vdropzone-error="dropzoneError"
 			@vdropzone-files-added="dropzoneFilesAdded" />
+		<label class="add-more">
+			Add more files
+		</label>
 
 		<div id="template"
 			ref="template">
@@ -75,6 +78,7 @@ export default {
 	components: { Dropzone },
 	data() {
 		return {
+			alreadyAddedFiles: false,
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
@@ -156,6 +160,7 @@ export default {
 			Dropzone stuff
 		*/
 		dropzoneFilesAdded(files) {
+			this.alreadyAddedFiles = true;
 			// console.log(files);
 		},
 		dropzoneSuccess(file, response) {
@@ -236,6 +241,20 @@ export default {
 	}
 
 	div.uploader-wrapper {
+		&.has-files {
+			#dropzone {
+				padding-bottom: 50px;
+			}
+			label.add-more {
+				position: absolute;
+				bottom: 23px;
+				width: 100%;
+				text-align: center;
+				color: #797979;
+				display: block;
+				pointer-events: none;
+			}
+		}
 		div.control {
 			margin-bottom: 5px;
 			span.select {
@@ -247,5 +266,6 @@ export default {
 				}
 			}
 		}
+		label.add-more { display: none; }
 	}
 </style>
-- 
cgit v1.2.3


From 430af8306b1ab17e59a6dabf8f65ab816d28695d Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Wed, 19 Sep 2018 04:45:50 -0300
Subject: Switch to Nuxt.js

---
 src/site/components/grid/Grid.vue                  |  17 +-
 src/site/components/grid/waterfall/Waterfall.vue   |   9 +-
 .../components/grid/waterfall/WaterfallItem.vue    |   2 +-
 .../grid/waterfall/old/waterfall-slot.vue          |  76 ----
 .../components/grid/waterfall/old/waterfall.vue    | 442 ---------------------
 src/site/components/home/links/Links.vue           |   4 +-
 src/site/components/logo/Logo.vue                  |   4 +-
 src/site/components/navbar/Navbar.vue              |   8 +-
 src/site/components/sidebar/Sidebar.vue            |  18 +-
 src/site/components/uploader/Uploader.vue          |  26 +-
 10 files changed, 45 insertions(+), 561 deletions(-)
 delete mode 100644 src/site/components/grid/waterfall/old/waterfall-slot.vue
 delete mode 100644 src/site/components/grid/waterfall/old/waterfall.vue

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 50e626b..615d68f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,5 +1,5 @@
 <style lang="scss" scoped>
-	@import '../../styles/_colors.scss';
+	@import '~/assets/styles/_colors.scss';
 	.item-move {
 		transition: all .25s cubic-bezier(.55,0,.1,1);
 		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
@@ -99,25 +99,25 @@
 						position="is-top">
 						<a :href="`${item.url}`"
 							target="_blank">
-							<i class="icon-web-code"/>
+							<i class="icon-web-code" />
 						</a>
 					</b-tooltip>
 					<b-tooltip label="Albums"
 						position="is-top">
 						<a @click="manageAlbums(item)">
-							<i class="icon-interface-window"/>
+							<i class="icon-interface-window" />
 						</a>
 					</b-tooltip>
 					<b-tooltip label="Tags"
 						position="is-top">
 						<a @click="manageTags(item)">
-							<i class="icon-ecommerce-tag-c"/>
+							<i class="icon-ecommerce-tag-c" />
 						</a>
 					</b-tooltip>
 					<b-tooltip label="Delete"
 						position="is-top">
 						<a @click="deleteFile(item, index)">
-							<i class="icon-editorial-trash-a-l"/>
+							<i class="icon-editorial-trash-a-l" />
 						</a>
 					</b-tooltip>
 				</div>
@@ -155,6 +155,11 @@ export default {
 	data() {
 		return { showWaterfall: true };
 	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		}
+	},
 	methods: {
 		deleteFile(file, index) {
 			this.$dialog.confirm({
@@ -165,7 +170,7 @@ export default {
 				hasIcon: true,
 				onConfirm: async () => {
 					try {
-						const response = await this.axios.delete(`${this.$config.baseURL}/file/${file.id}`);
+						const response = await this.axios.delete(`${this.config.baseURL}/file/${file.id}`);
 						this.showWaterfall = false;
 						this.files.splice(index, 1);
 						this.$nextTick(() => {
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 9827075..8631ea5 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -5,20 +5,19 @@
 </style>
 <template>
 	<div class="waterfall">
-		<slot/>
+		<slot />
 	</div>
 </template>
 <script>
 // import {quickSort, getMinIndex, _, sum} from './util'
 
 const quickSort = (arr, type) => {
-	let left = [];
-	let right = [];
-	let povis;
+	const left = [];
+	const right = [];
 	if (arr.length <= 1) {
 		return arr;
 	}
-	povis = arr[0];
+	const povis = arr[0];
 	for (let i = 1; i < arr.length; i++) {
 		if (arr[i][type] < povis[type]) {
 			left.push(arr[i]);
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 597cca6..a02ea1f 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -5,7 +5,7 @@
 </style>
 <template>
 	<div class="waterfall-item">
-		<slot/>
+		<slot />
 	</div>
 </template>
 <script>
diff --git a/src/site/components/grid/waterfall/old/waterfall-slot.vue b/src/site/components/grid/waterfall/old/waterfall-slot.vue
deleted file mode 100644
index 07ca268..0000000
--- a/src/site/components/grid/waterfall/old/waterfall-slot.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="vue-waterfall-slot" v-show="isShow">
-    <slot></slot>
-  </div>
-</template>
-
-<style>
-.vue-waterfall-slot {
-  position: absolute;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-</style>
-
-<script>
-
-export default {
-  data: () => ({
-    isShow: false
-  }),
-  props: {
-    width: {
-      required: true,
-      validator: (val) => val >= 0
-    },
-    height: {
-      required: true,
-      validator: (val) => val >= 0
-    },
-    order: {
-      default: 0
-    },
-    moveClass: {
-      default: ''
-    }
-  },
-  methods: {
-    notify () {
-      this.$parent.$emit('reflow', this)
-    },
-    getMeta () {
-      return {
-        vm: this,
-        node: this.$el,
-        order: this.order,
-        width: this.width,
-        height: this.height,
-        moveClass: this.moveClass
-      }
-    }
-  },
-  created () {
-    this.rect = {
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0
-    }
-    this.$watch(() => (
-      this.width,
-      this.height
-    ), this.notify)
-  },
-  mounted () {
-    this.$parent.$once('reflowed', () => {
-      this.isShow = true
-    })
-    this.notify()
-  },
-  destroyed () {
-    this.notify()
-  }
-}
-
-</script>
diff --git a/src/site/components/grid/waterfall/old/waterfall.vue b/src/site/components/grid/waterfall/old/waterfall.vue
deleted file mode 100644
index 84e3c98..0000000
--- a/src/site/components/grid/waterfall/old/waterfall.vue
+++ /dev/null
@@ -1,442 +0,0 @@
-<template>
-  <div class="vue-waterfall" :style="style">
-    <slot></slot>
-  </div>
-</template>
-
-<style>
-.vue-waterfall {
-  position: relative;
-  /*overflow: hidden; cause clientWidth = 0 in IE if height not bigger than 0 */
-}
-</style>
-
-<script>
-
-const MOVE_CLASS_PROP = '_wfMoveClass'
-
-export default {
-  props: {
-    autoResize: {
-      default: true
-    },
-    interval: {
-      default: 200,
-      validator: (val) => val >= 0
-    },
-    align: {
-      default: 'left',
-      validator: (val) => ~['left', 'right', 'center'].indexOf(val)
-    },
-    line: {
-      default: 'v',
-      validator: (val) => ~['v', 'h'].indexOf(val)
-    },
-    lineGap: {
-      required: true,
-      validator: (val) => val >= 0
-    },
-    minLineGap: {
-      validator: (val) => val >= 0
-    },
-    maxLineGap: {
-      validator: (val) => val >= 0
-    },
-    singleMaxWidth: {
-      validator: (val) => val >= 0
-    },
-    fixedHeight: {
-      default: false
-    },
-    grow: {
-      validator: (val) => val instanceof Array
-    },
-    watch: {
-      default: () => ({})
-    }
-  },
-  data: () => ({
-    style: {
-      height: '',
-      overflow: ''
-    },
-    token: null
-  }),
-  methods: {
-    reflowHandler,
-    autoResizeHandler,
-    reflow
-  },
-  created () {
-    this.virtualRects = []
-    this.$on('reflow', () => {
-      this.reflowHandler()
-    })
-    this.$watch(() => (
-      this.align,
-      this.line,
-      this.lineGap,
-      this.minLineGap,
-      this.maxLineGap,
-      this.singleMaxWidth,
-      this.fixedHeight,
-      this.watch
-    ), this.reflowHandler)
-    this.$watch('grow', this.reflowHandler)
-  },
-  mounted () {
-    this.$watch('autoResize', this.autoResizeHandler)
-    on(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
-    this.autoResizeHandler(this.autoResize)
-  },
-  beforeDestroy () {
-    this.autoResizeHandler(false)
-    off(this.$el, getTransitionEndEvent(), tidyUpAnimations, true)
-  }
-}
-
-function autoResizeHandler (autoResize) {
-  if (autoResize === false || !this.autoResize) {
-    off(window, 'resize', this.reflowHandler, false)
-  } else {
-    on(window, 'resize', this.reflowHandler, false)
-  }
-}
-
-function tidyUpAnimations (event) {
-  let node = event.target
-  let moveClass = node[MOVE_CLASS_PROP]
-  if (moveClass) {
-    removeClass(node, moveClass)
-  }
-}
-
-function reflowHandler () {
-  clearTimeout(this.token)
-  this.token = setTimeout(this.reflow, this.interval)
-}
-
-function reflow () {
-  if (!this.$el) { return }
-  let width = this.$el.clientWidth
-  let metas = this.$children.map((slot) => slot.getMeta())
-  metas.sort((a, b) => a.order - b.order)
-  this.virtualRects = metas.map(() => ({}))
-  calculate(this, metas, this.virtualRects)
-  setTimeout(() => {
-    if (isScrollBarVisibilityChange(this.$el, width)) {
-      calculate(this, metas, this.virtualRects)
-    }
-    this.style.overflow = 'hidden'
-    render(this.virtualRects, metas)
-    this.$emit('reflowed', this)
-  }, 0)
-}
-
-function isScrollBarVisibilityChange (el, lastClientWidth) {
-  return lastClientWidth !== el.clientWidth
-}
-
-function calculate (vm, metas, styles) {
-  let options = getOptions(vm)
-  let processor = vm.line === 'h' ? horizontalLineProcessor : verticalLineProcessor
-  processor.calculate(vm, options, metas, styles)
-}
-
-function getOptions (vm) {
-  const maxLineGap = vm.maxLineGap ? +vm.maxLineGap : vm.lineGap
-  return {
-    align: ~['left', 'right', 'center'].indexOf(vm.align) ? vm.align : 'left',
-    line: ~['v', 'h'].indexOf(vm.line) ? vm.line : 'v',
-    lineGap: +vm.lineGap,
-    minLineGap: vm.minLineGap ? +vm.minLineGap : vm.lineGap,
-    maxLineGap: maxLineGap,
-    singleMaxWidth: Math.max(vm.singleMaxWidth || 0, maxLineGap),
-    fixedHeight: !!vm.fixedHeight,
-    grow: vm.grow && vm.grow.map(val => +val)
-  }
-}
-
-var verticalLineProcessor = (() => {
-
-  function calculate (vm, options, metas, rects) {
-    let width = vm.$el.clientWidth
-    let grow = options.grow
-    let strategy = grow
-      ? getRowStrategyWithGrow(width, grow)
-      : getRowStrategy(width, options)
-    let tops = getArrayFillWith(0, strategy.count)
-    metas.forEach((meta, index) => {
-      let offset = tops.reduce((last, top, i) => top < tops[last] ? i : last, 0)
-      let width = strategy.width[offset % strategy.count]
-      let rect = rects[index]
-      rect.top = tops[offset]
-      rect.left = strategy.left + (offset ? sum(strategy.width.slice(0, offset)) : 0)
-      rect.width = width
-      rect.height = meta.height * (options.fixedHeight ? 1 : width / meta.width)
-      tops[offset] = tops[offset] + rect.height
-    })
-    vm.style.height = Math.max.apply(Math, tops) + 'px'
-  }
-
-  function getRowStrategy (width, options) {
-    let count = width / options.lineGap
-    let slotWidth
-    if (options.singleMaxWidth >= width) {
-      count = 1
-      slotWidth = Math.max(width, options.minLineGap)
-    } else {
-      let maxContentWidth = options.maxLineGap * ~~count
-      let minGreedyContentWidth = options.minLineGap * ~~(count + 1)
-      let canFit = maxContentWidth >= width
-      let canFitGreedy = minGreedyContentWidth <= width
-      if (canFit && canFitGreedy) {
-        count = Math.round(count)
-        slotWidth = width / count
-      } else if (canFit) {
-        count = ~~count
-        slotWidth = width / count
-      } else if (canFitGreedy) {
-        count = ~~(count + 1)
-        slotWidth = width / count
-      } else {
-        count = ~~count
-        slotWidth = options.maxLineGap
-      }
-      if (count === 1) {
-        slotWidth = Math.min(width, options.singleMaxWidth)
-        slotWidth = Math.max(slotWidth, options.minLineGap)
-      }
-    }
-    return {
-      width: getArrayFillWith(slotWidth, count),
-      count: count,
-      left: getLeft(width, slotWidth * count, options.align)
-    }
-  }
-
-  function getRowStrategyWithGrow (width, grow) {
-    let total = sum(grow)
-    return {
-      width: grow.map(val => width * val / total),
-      count: grow.length,
-      left: 0
-    }
-  }
-
-  return {
-    calculate
-  }
-
-})()
-
-var horizontalLineProcessor = (() => {
-
-  function calculate (vm, options, metas, rects) {
-    let width = vm.$el.clientWidth
-    let total = metas.length
-    let top = 0
-    let offset = 0
-    while (offset < total) {
-      let strategy = getRowStrategy(width, options, metas, offset)
-      for (let i = 0, left = 0, meta, rect; i < strategy.count; i++) {
-        meta = metas[offset + i]
-        rect = rects[offset + i]
-        rect.top = top
-        rect.left = strategy.left + left
-        rect.width = meta.width * strategy.height / meta.height
-        rect.height = strategy.height
-        left += rect.width
-      }
-      offset += strategy.count
-      top += strategy.height
-    }
-    vm.style.height = top + 'px'
-  }
-
-  function getRowStrategy (width, options, metas, offset) {
-    let greedyCount = getGreedyCount(width, options.lineGap, metas, offset)
-    let lazyCount = Math.max(greedyCount - 1, 1)
-    let greedySize = getContentSize(width, options, metas, offset, greedyCount)
-    let lazySize = getContentSize(width, options, metas, offset, lazyCount)
-    let finalSize = chooseFinalSize(lazySize, greedySize, width)
-    let height = finalSize.height
-    let fitContentWidth = finalSize.width
-    if (finalSize.count === 1) {
-      fitContentWidth = Math.min(options.singleMaxWidth, width)
-      height = metas[offset].height * fitContentWidth / metas[offset].width
-    }
-    return {
-      left: getLeft(width, fitContentWidth, options.align),
-      count: finalSize.count,
-      height: height
-    }
-  }
-
-  function getGreedyCount (rowWidth, rowHeight, metas, offset) {
-    let count = 0
-    for (let i = offset, width = 0; i < metas.length && width <= rowWidth; i++) {
-      width += metas[i].width * rowHeight / metas[i].height
-      count++
-    }
-    return count
-  }
-
-  function getContentSize (rowWidth, options, metas, offset, count) {
-    let originWidth = 0
-    for (let i = count - 1; i >= 0; i--) {
-      let meta = metas[offset + i]
-      originWidth += meta.width * options.lineGap / meta.height
-    }
-    let fitHeight = options.lineGap * rowWidth / originWidth
-    let canFit = (fitHeight <= options.maxLineGap && fitHeight >= options.minLineGap)
-    if (canFit) {
-      return {
-        cost: Math.abs(options.lineGap - fitHeight),
-        count: count,
-        width: rowWidth,
-        height: fitHeight
-      }
-    } else {
-      let height = originWidth > rowWidth ? options.minLineGap : options.maxLineGap
-      return {
-        cost: Infinity,
-        count: count,
-        width: originWidth * height / options.lineGap,
-        height: height
-      }
-    }
-  }
-
-  function chooseFinalSize (lazySize, greedySize, rowWidth) {
-    if (lazySize.cost === Infinity && greedySize.cost === Infinity) {
-      return greedySize.width < rowWidth ? greedySize : lazySize
-    } else {
-      return greedySize.cost >= lazySize.cost ? lazySize : greedySize
-    }
-  }
-
-  return {
-    calculate
-  }
-
-})()
-
-function getLeft (width, contentWidth, align) {
-  switch (align) {
-    case 'right':
-      return width - contentWidth
-    case 'center':
-      return (width - contentWidth) / 2
-    default:
-      return 0
-  }
-}
-
-function sum (arr) {
-  return arr.reduce((sum, val) => sum + val)
-}
-
-function render (rects, metas) {
-  let metasNeedToMoveByTransform = metas.filter((meta) => meta.moveClass)
-  let firstRects = getRects(metasNeedToMoveByTransform)
-  applyRects(rects, metas)
-  let lastRects = getRects(metasNeedToMoveByTransform)
-  metasNeedToMoveByTransform.forEach((meta, i) => {
-    meta.node[MOVE_CLASS_PROP] = meta.moveClass
-    setTransform(meta.node, firstRects[i], lastRects[i])
-  })
-  document.body.clientWidth // forced reflow
-  metasNeedToMoveByTransform.forEach((meta) => {
-    addClass(meta.node, meta.moveClass)
-    clearTransform(meta.node)
-  })
-}
-
-function getRects (metas) {
-  return metas.map((meta) => meta.vm.rect)
-}
-
-function applyRects (rects, metas) {
-  rects.forEach((rect, i) => {
-    let style = metas[i].node.style
-    metas[i].vm.rect = rect
-    for (let prop in rect) {
-      style[prop] = rect[prop] + 'px'
-    }
-  })
-}
-
-function setTransform (node, firstRect, lastRect) {
-  let dx = firstRect.left - lastRect.left
-  let dy = firstRect.top - lastRect.top
-  let sw = firstRect.width / lastRect.width
-  let sh = firstRect.height / lastRect.height
-  node.style.transform =
-  node.style.WebkitTransform = `translate(${dx}px,${dy}px) scale(${sw},${sh})`
-  node.style.transitionDuration = '0s'
-}
-
-function clearTransform (node) {
-  node.style.transform = node.style.WebkitTransform = ''
-  node.style.transitionDuration = ''
-}
-
-function getTransitionEndEvent () {
-  let isWebkitTrans =
-    window.ontransitionend === undefined &&
-    window.onwebkittransitionend !== undefined
-  let transitionEndEvent = isWebkitTrans
-    ? 'webkitTransitionEnd'
-    : 'transitionend'
-  return transitionEndEvent
-}
-
-/**
- * util
- */
-
-function getArrayFillWith (item, count) {
-  let getter = (typeof item === 'function') ? () => item() : () => item
-  let arr = []
-  for (let i = 0; i < count; i++) {
-    arr[i] = getter()
-  }
-  return arr
-}
-
-function addClass (elem, name) {
-  if (!hasClass(elem, name)) {
-    let cur = attr(elem, 'class').trim()
-    let res = (cur + ' ' + name).trim()
-    attr(elem, 'class', res)
-  }
-}
-
-function removeClass (elem, name) {
-  let reg = new RegExp('\\s*\\b' + name + '\\b\\s*', 'g')
-  let res = attr(elem, 'class').replace(reg, ' ').trim()
-  attr(elem, 'class', res)
-}
-
-function hasClass (elem, name) {
-  return (new RegExp('\\b' + name + '\\b')).test(attr(elem, 'class'))
-}
-
-function attr (elem, name, value) {
-  if (typeof value !== 'undefined') {
-    elem.setAttribute(name, value)
-  } else {
-    return elem.getAttribute(name) || ''
-  }
-}
-
-function on (elem, type, listener, useCapture = false) {
-  elem.addEventListener(type, listener, useCapture)
-}
-
-function off (elem, type, listener, useCapture = false) {
-  elem.removeEventListener(type, listener, useCapture)
-}
-
-</script>
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index ba1e493..0a5f218 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,5 +1,5 @@
 <style lang="scss" scoped>
-	@import '../../../styles/_colors.scss';
+	@import '~/assets/styles/_colors.scss';
 	.links {
 		margin-bottom: 3em;
 		align-items: stretch;
@@ -96,5 +96,5 @@
 	</div>
 </template>
 <script>
-export default {}
+export default {};
 </script>
diff --git a/src/site/components/logo/Logo.vue b/src/site/components/logo/Logo.vue
index 2452b58..b083cb4 100644
--- a/src/site/components/logo/Logo.vue
+++ b/src/site/components/logo/Logo.vue
@@ -1,5 +1,5 @@
 <style lang="scss" scoped>
-	@import '../../styles/_colors.scss';
+	@import '~/assets/styles/_colors.scss';
 	#logo {
 		-webkit-animation-delay: 0.5s;
 		animation-delay: 0.5s;
@@ -50,7 +50,7 @@
 
 <template>
 	<p id="logo">
-		<img src="../../public/images/logo.png">
+		<img src="~/assets/images/logo.png">
 	</p>
 </template>
 
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 108c150..5b422ae 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,5 @@
 <style lang="scss" scoped>
-	@import '../../styles/colors.scss';
+	@import '~/assets/styles/_colors.scss';
 	nav.navbar {
 		background: transparent;
 		box-shadow: none;
@@ -47,7 +47,7 @@
 		<div class="navbar-brand">
 			<router-link to="/"
 				class="navbar-item no-active">
-				<i class="icon-ecommerce-safebox"/> {{ config.serviceName }}
+				<i class="icon-ecommerce-safebox" /> {{ config.serviceName }}
 			</router-link>
 
 			<!--
@@ -78,12 +78,12 @@
 
 			<router-link v-if="!loggedIn"
 				class="navbar-item"
-				to="/login"><i class="hidden"/>Login</router-link>
+				to="/login"><i class="hidden" />Login</router-link>
 
 			<router-link v-else
 				to="/dashboard"
 				class="navbar-item no-active"
-				exact><i class="hidden"/>Dashboard</router-link>
+				exact><i class="hidden" />Dashboard</router-link>
 		</div>
 	</nav>
 </template>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 861ebea..77d0cdd 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,5 +1,5 @@
 <style lang="scss" scoped>
-	@import '../../styles/colors.scss';
+	@import '~/assets/styles/_colors.scss';
 	.dashboard-menu {
 		a {
 			display: block;
@@ -25,19 +25,17 @@
 </style>
 <template>
 	<div class="dashboard-menu">
-		<router-link to="/"><i class="icon-ecommerce-safebox"/>lolisafe</router-link>
+		<router-link to="/"><i class="icon-ecommerce-safebox" />lolisafe</router-link>
 		<hr>
-		<a><i class="icon-interface-cloud-upload"/>Upload files</a>
+		<a><i class="icon-interface-cloud-upload" />Upload files</a>
 		<hr>
-		<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"><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>
 		<hr>
-		<router-link to="/dashboard/settings"><i class="icon-setting-gear-a"/>Settings</router-link>
+		<router-link to="/dashboard/settings"><i class="icon-setting-gear-a" />Settings</router-link>
 	</div>
 </template>
 <script>
-export default {
-
-}
+export default {};
 </script>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index afafd55..bc157bb 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -8,8 +8,8 @@
 			expanded>
 			<option
 				v-for="album in albums"
-				:value="album.id"
-				:key="album.id">
+				:key="album.id"
+				:value="album.id">
 				{{ album.name }}
 			</option>
 		</b-select>
@@ -29,20 +29,20 @@
 			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="copyLink">
 						<b-tooltip label="Copy link">
-							<i class="icon-web-code"/>
+							<i class="icon-web-code" />
 						</b-tooltip>
 					</div>
 					<div class="openLink">
 						<b-tooltip label="Open file">
 							<a class="link"
 								target="_blank">
-								<i class="icon-web-url"/>
+								<i class="icon-web-url" />
 							</a>
 						</b-tooltip>
 					</div>
@@ -51,14 +51,14 @@
 					<div>
 						<span>
 							<span class="error-message"
-								data-dz-errormessage/>
-							<i class="icon-web-warning"/>
+								data-dz-errormessage />
+							<i class="icon-web-warning" />
 						</span>
 					</div>
 				</div>
 				<div class="dz-progress">
 					<span class="dz-upload"
-						data-dz-uploadprogress/>
+						data-dz-uploadprogress />
 				</div>
 				<!--
 				<div class="dz-error-message"><span data-dz-errormessage/></div>
@@ -72,7 +72,7 @@
 
 <script>
 import Dropzone from 'nuxt-dropzone';
-import '../../styles/dropzone.scss';
+import '~/assets/styles/dropzone.scss';
 
 export default {
 	components: { Dropzone },
@@ -107,7 +107,7 @@ export default {
 	},
 	mounted() {
 		this.dropzoneOptions = {
-			url: `${this.$config.baseURL}/upload`,
+			url: `${this.config.baseURL}/upload`,
 			autoProcessQueue: true,
 			addRemoveLinks: false,
 			parallelUploads: 5,
@@ -135,7 +135,7 @@ export default {
 		*/
 		async getAlbums() {
 			try {
-				const response = await this.axios.get(`${this.$config.baseURL}/albums/dropdown`);
+				const response = await this.axios.get(`${this.config.baseURL}/albums/dropdown`);
 				this.albums = response.data.albums;
 				this.updateDropzoneConfig();
 			} catch (error) {
@@ -218,7 +218,7 @@ export default {
 	}
 </style>
 <style lang="scss">
-	@import '../../styles/colors.scss';
+	@import '~/assets/styles/_colors.scss';
 	.filepond--panel-root {
 		background: transparent;
 		border: 2px solid #2c3340;
-- 
cgit v1.2.3


From 8be134c8d8b4cd588fdeef50a1e5d07f0564696c Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 26 Feb 2019 22:26:03 +0900
Subject: Settings page and other things

---
 src/site/components/sidebar/Sidebar.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 77d0cdd..3317eca 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -25,15 +25,32 @@
 </style>
 <template>
 	<div class="dashboard-menu">
-		<router-link to="/"><i class="icon-ecommerce-safebox" />lolisafe</router-link>
+		<router-link to="/">
+			<i class="icon-ecommerce-safebox" />lolisafe
+		</router-link>
 		<hr>
 		<a><i class="icon-interface-cloud-upload" />Upload files</a>
 		<hr>
-		<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">
+			<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>
 		<hr>
-		<router-link to="/dashboard/settings"><i class="icon-setting-gear-a" />Settings</router-link>
+		<router-link to="/dashboard/account">
+			<i class="icon-ecommerce-tag-c" />Account
+		</router-link>
+		<hr>
+		<router-link to="/dashboard/users">
+			<i class="icon-setting-gear-a" />Users
+		</router-link>
+		<router-link to="/dashboard/settings">
+			<i class="icon-setting-gear-a" />Settings
+		</router-link>
 	</div>
 </template>
 <script>
-- 
cgit v1.2.3


From 7a74647d3e5b5681b9d5d3fa9b6e12d062232683 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 26 Feb 2019 23:13:24 +0900
Subject: User management

---
 src/site/components/sidebar/Sidebar.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 3317eca..cf3fc4b 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -44,15 +44,23 @@
 		<router-link to="/dashboard/account">
 			<i class="icon-ecommerce-tag-c" />Account
 		</router-link>
-		<hr>
-		<router-link to="/dashboard/users">
-			<i class="icon-setting-gear-a" />Users
-		</router-link>
-		<router-link to="/dashboard/settings">
-			<i class="icon-setting-gear-a" />Settings
-		</router-link>
+		<template v-if="user.isAdmin">
+			<hr>
+			<router-link to="/dashboard/users">
+				<i class="icon-setting-gear-a" />Users
+			</router-link>
+			<router-link to="/dashboard/settings">
+				<i class="icon-setting-gear-a" />Settings
+			</router-link>
+		</template>
 	</div>
 </template>
 <script>
-export default {};
+export default {
+	computed: {
+		user() {
+			return this.$store.state.user;
+		}
+	},
+};
 </script>
-- 
cgit v1.2.3


From 9cba85c47cfde1decbee513e48f82deff27a438d Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Thu, 28 Feb 2019 23:52:04 +0900
Subject: changes

---
 src/site/components/sidebar/Sidebar.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/site/components')

diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index cf3fc4b..40213b5 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -49,9 +49,12 @@
 			<router-link to="/dashboard/users">
 				<i class="icon-setting-gear-a" />Users
 			</router-link>
+			<!--
+			TODO: Dont wanna deal with this now
 			<router-link to="/dashboard/settings">
 				<i class="icon-setting-gear-a" />Settings
 			</router-link>
+			-->
 		</template>
 	</div>
 </template>
-- 
cgit v1.2.3


From 0ed4624dd0da047d6a7f1f2330541a5788d574b8 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 2 Mar 2019 02:45:31 +0900
Subject: Allow downloading shareX config file

---
 src/site/components/home/links/Links.vue | 36 ++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 0a5f218..8668fda 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -72,7 +72,9 @@
 				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
 			</header>
 		</a>
-		<div class="link">
+		<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>
@@ -96,5 +98,35 @@
 	</div>
 </template>
 <script>
-export default {};
+import { saveAs } from 'file-saver';
+export default {
+	computed: {
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		},
+		token() {
+			return this.$store.state.token;
+		}
+	},
+	methods: {
+		createShareXThing() {
+			const sharexFile = `{
+				"Name": "${location.hostname}",
+				"DestinationType": "ImageUploader, FileUploader",
+				"RequestType": "POST",
+				"RequestURL": "${location.origin}/api/upload",
+				"FileFormName": "file",
+				"Headers": {
+					"authorization": "${this.token}",
+					"accept": "application/vnd.lolisafe.json"
+				},
+				"ResponseType": "Text",
+				"URL": "$json:url$",
+				"ThumbnailURL": "$json:url$"
+			}`;
+			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
+			saveAs(sharexBlob, `${location.hostname}.sxcu`);
+		}
+	}
+};
 </script>
-- 
cgit v1.2.3


From 0639c4e1bb57b5f7317edda0a258be7a7ae2941b Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 2 Mar 2019 02:55:11 +0900
Subject: Fix token

---
 src/site/components/home/links/Links.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 8668fda..4c408d7 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -117,7 +117,7 @@ export default {
 				"RequestURL": "${location.origin}/api/upload",
 				"FileFormName": "file",
 				"Headers": {
-					"authorization": "${this.token}",
+					"authorization": "Bearer ${this.token}",
 					"accept": "application/vnd.lolisafe.json"
 				},
 				"ResponseType": "Text",
-- 
cgit v1.2.3


From ce76a8ec7ba2084ab75fb901933b3d4d84505032 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 2 Mar 2019 22:07:24 +0900
Subject: Be able to add a file to multiple albums

---
 src/site/components/grid/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 615d68f..e136f90 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -104,7 +104,7 @@
 					</b-tooltip>
 					<b-tooltip label="Albums"
 						position="is-top">
-						<a @click="manageAlbums(item)">
+						<a @click="$parent.openAlbumModal(item)">
 							<i class="icon-interface-window" />
 						</a>
 					</b-tooltip>
-- 
cgit v1.2.3


From c6b0f62d13fc9f3614ac1f335ae46ecd46500ac3 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 12 Mar 2019 05:31:31 +0000
Subject: Put this on hold

---
 src/site/components/sidebar/Sidebar.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 40213b5..961c646 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -29,8 +29,6 @@
 			<i class="icon-ecommerce-safebox" />lolisafe
 		</router-link>
 		<hr>
-		<a><i class="icon-interface-cloud-upload" />Upload files</a>
-		<hr>
 		<router-link to="/dashboard">
 			<i class="icon-com-pictures" />Files
 		</router-link>
-- 
cgit v1.2.3


From dc4e6bf907e317cba9e6e5a04343523a5989b5d9 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 12 Mar 2019 06:43:17 +0000
Subject: Added faq

---
 src/site/components/home/links/Links.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 4c408d7..2d6cfc3 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -88,7 +88,7 @@
 				<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>
-- 
cgit v1.2.3


From ea3e503d13b7be477c064b02b9b2e5a9ef06c9a9 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 29 Mar 2019 00:35:58 +0900
Subject: Added middleware for pages and switched to $axios

---
 src/site/components/grid/Grid.vue         | 4 ++--
 src/site/components/sidebar/Sidebar.vue   | 4 ++--
 src/site/components/uploader/Uploader.vue | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index e136f90..027bdf2 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -170,13 +170,13 @@ export default {
 				hasIcon: true,
 				onConfirm: async () => {
 					try {
-						const response = await this.axios.delete(`${this.config.baseURL}/file/${file.id}`);
+						const response = await this.$axios.$delete(`file/${file.id}`);
 						this.showWaterfall = false;
 						this.files.splice(index, 1);
 						this.$nextTick(() => {
 							this.showWaterfall = true;
 						});
-						return this.$toast.open(response.data.message);
+						return this.$toast.open(response.message);
 					} catch (error) {
 						return this.$onPromiseError(error);
 					}
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 961c646..330ce89 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -42,7 +42,7 @@
 		<router-link to="/dashboard/account">
 			<i class="icon-ecommerce-tag-c" />Account
 		</router-link>
-		<template v-if="user.isAdmin">
+		<template v-if="user && user.isAdmin">
 			<hr>
 			<router-link to="/dashboard/users">
 				<i class="icon-setting-gear-a" />Users
@@ -62,6 +62,6 @@ export default {
 		user() {
 			return this.$store.state.user;
 		}
-	},
+	}
 };
 </script>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index bc157bb..d81df56 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -135,8 +135,8 @@ export default {
 		*/
 		async getAlbums() {
 			try {
-				const response = await this.axios.get(`${this.config.baseURL}/albums/dropdown`);
-				this.albums = response.data.albums;
+				const response = await this.$axios.$get(`albums/dropdown`);
+				this.albums = response.albums;
 				this.updateDropzoneConfig();
 			} catch (error) {
 				this.$onPromiseError(error);
-- 
cgit v1.2.3


From e9ce158e36051e8539edc18e912ea4b4931bd016 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 29 Mar 2019 03:28:16 +0000
Subject: Add flexsearch

---
 src/site/components/grid/Grid.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 027bdf2..eaeb4f7 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -79,6 +79,13 @@
 	<Waterfall
 		:gutterWidth="10"
 		:gutterHeight="4">
+		<!-- Gotta implement search and pagination here -->
+		<input v-model="searchTerm"
+			type="text"
+			placeholder="Search..."
+			@input="search()"
+			@keyup.enter="search()">
+
 		<WaterfallItem v-for="(item, index) in files"
 			v-if="showWaterfall && item.thumb"
 			:key="index"
@@ -153,14 +160,29 @@ export default {
 		}
 	},
 	data() {
-		return { showWaterfall: true };
+		return {
+			showWaterfall: true,
+			searchTerm: null
+		};
 	},
 	computed: {
 		config() {
 			return this.$store.state.config;
 		}
 	},
+	mounted() {
+		this.$search.items(this.files);
+	},
 	methods: {
+		async search() {
+			const data = await this.$search.do(this.searchTerm, [
+				'name',
+				'original',
+				'type',
+				'albums:name'
+			]);
+			console.log('> Search result data', data);
+		},
 		deleteFile(file, index) {
 			this.$dialog.confirm({
 				title: 'Deleting file',
-- 
cgit v1.2.3


From 3bd8d119ba88e940932eca50be406d50d73040fb Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Wed, 24 Apr 2019 08:36:28 +0000
Subject: Refactor a bit since we globally catch API exceptions

---
 src/site/components/grid/Grid.vue         | 18 +++++++-----------
 src/site/components/uploader/Uploader.vue | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 21 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index eaeb4f7..89ac125 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -191,17 +191,13 @@ export default {
 				type: 'is-danger',
 				hasIcon: true,
 				onConfirm: async () => {
-					try {
-						const response = await this.$axios.$delete(`file/${file.id}`);
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
-						return this.$toast.open(response.message);
-					} catch (error) {
-						return this.$onPromiseError(error);
-					}
+					const response = await this.$axios.$delete(`file/${file.id}`);
+					this.showWaterfall = false;
+					this.files.splice(index, 1);
+					this.$nextTick(() => {
+						this.showWaterfall = true;
+					});
+					return this.$toast.open(response.message);
 				}
 			});
 		}
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index d81df56..6a4da8b 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -134,13 +134,9 @@ export default {
 			Get all available albums so the user can upload directly to one (or several soon™) of them.
 		*/
 		async getAlbums() {
-			try {
-				const response = await this.$axios.$get(`albums/dropdown`);
-				this.albums = response.albums;
-				this.updateDropzoneConfig();
-			} catch (error) {
-				this.$onPromiseError(error);
-			}
+			const response = await this.$axios.$get(`albums/dropdown`);
+			this.albums = response.albums;
+			this.updateDropzoneConfig();
 		},
 
 		/*
@@ -161,13 +157,15 @@ export default {
 		*/
 		dropzoneFilesAdded(files) {
 			this.alreadyAddedFiles = true;
-			// console.log(files);
 		},
 		dropzoneSuccess(file, response) {
 			this.processResult(file, response);
 		},
 		dropzoneError(file, message, xhr) {
-			this.$showToast('There was an error uploading this file. Check the console.', true, 5000);
+			this.$store.dispatch('alert', {
+				text: 'There was an error uploading this file. Check the console.',
+				error: true
+			});
 			console.error(file, message, xhr);
 		},
 		dropzoneChunksUploaded(file, done) {
@@ -190,7 +188,9 @@ export default {
 			if (!response.url) return;
 			file.previewTemplate.querySelector('.link').setAttribute('href', response.url);
 			file.previewTemplate.querySelector('.copyLink').addEventListener('click', () => {
-				this.$showToast('Link copied!', false, 1000);
+				this.$store.dispatch('alert', {
+					text: 'Link copied!'
+				});
 				this.$clipboard(response.url);
 			});
 		}
-- 
cgit v1.2.3


From ca9e1c859d714b6646d010d099e318fff2ba5b70 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 30 Apr 2019 16:01:38 +0000
Subject: Add parallel chunks and raise timeout

---
 src/site/components/uploader/Uploader.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 6a4da8b..dda404f 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -108,6 +108,7 @@ export default {
 	mounted() {
 		this.dropzoneOptions = {
 			url: `${this.config.baseURL}/upload`,
+			timeout: 300000, // 5 minutes
 			autoProcessQueue: true,
 			addRemoveLinks: false,
 			parallelUploads: 5,
@@ -118,7 +119,7 @@ export default {
 			chunking: true,
 			retryChunks: true,
 			retryChunksLimit: 3,
-			parallelChunkUploads: false,
+			parallelChunkUploads: true,
 			chunkSize: this.config.chunkSize * 1000000,
 			chunksUploaded: this.dropzoneChunksUploaded,
 			maxFilesize: this.config.maxFileSize,
-- 
cgit v1.2.3


From 8e4f1b7838e3c43320f2e25e691c1808ae3c4089 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Mon, 30 Sep 2019 07:06:22 +0000
Subject: feature: album links

---
 src/site/components/grid/Grid.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 89ac125..07e5440 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -80,7 +80,8 @@
 		:gutterWidth="10"
 		:gutterHeight="4">
 		<!-- Gotta implement search and pagination here -->
-		<input v-model="searchTerm"
+		<input v-if="enableSearch"
+			v-model="searchTerm"
 			type="text"
 			placeholder="Search..."
 			@input="search()"
@@ -115,12 +116,14 @@
 							<i class="icon-interface-window" />
 						</a>
 					</b-tooltip>
+					<!--
 					<b-tooltip label="Tags"
 						position="is-top">
 						<a @click="manageTags(item)">
 							<i class="icon-ecommerce-tag-c" />
 						</a>
 					</b-tooltip>
+					-->
 					<b-tooltip label="Delete"
 						position="is-top">
 						<a @click="deleteFile(item, index)">
@@ -157,6 +160,10 @@ export default {
 		width: {
 			type: Number,
 			default: 150
+		},
+		enableSearch: {
+			type: Boolean,
+			default: true
 		}
 	},
 	data() {
-- 
cgit v1.2.3


From 0d36f0d69aaf10fad4608f630a8f7dfe263ea74c Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Mon, 30 Sep 2019 07:06:35 +0000
Subject: feature: tags logic

---
 src/site/components/sidebar/Sidebar.vue | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/site/components')

diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 330ce89..101a70b 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -35,9 +35,11 @@
 		<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>
+		-->
 		<hr>
 		<router-link to="/dashboard/account">
 			<i class="icon-ecommerce-tag-c" />Account
-- 
cgit v1.2.3


From 579e1e754ab59a69925b5114641174aa70d18555 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 1 Oct 2019 14:11:16 -0300
Subject: feature: uploader with chunks support

---
 src/site/components/uploader/Uploader.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index dda404f..d9ed46a 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -108,14 +108,15 @@ export default {
 	mounted() {
 		this.dropzoneOptions = {
 			url: `${this.config.baseURL}/upload`,
-			timeout: 300000, // 5 minutes
+			timeout: 600000, // 10 minutes
 			autoProcessQueue: true,
 			addRemoveLinks: false,
 			parallelUploads: 5,
 			uploadMultiple: false,
 			maxFiles: 1000,
 			createImageThumbnails: false,
-			paramName: 'file',
+			paramName: 'files[]',
+			forceChunking: false,
 			chunking: true,
 			retryChunks: true,
 			retryChunksLimit: 3,
@@ -169,14 +170,18 @@ export default {
 			});
 			console.error(file, message, xhr);
 		},
-		dropzoneChunksUploaded(file, done) {
-			const response = JSON.parse(file.xhr.response);
-			if (!response.url) {
-				console.error('There was a problem uploading the file?');
-				return done();
-			}
+		async dropzoneChunksUploaded(file, done) {
+			const { data } = await this.$axios.post(`${this.config.baseURL}/upload/chunks`, {
+				files: [{
+					uuid: file.upload.uuid,
+					original: file.name,
+					size: file.size,
+					type: file.type,
+					count: file.upload.totalChunkCount
+				}]
+			});
 
-			this.processResult(file, response);
+			this.processResult(file, data);
 			this.$forceUpdate();
 			return done();
 		},
-- 
cgit v1.2.3


From 3680432bdfe49fc2416e50b3e91a740bbe66cfa8 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 1 Oct 2019 14:20:37 -0300
Subject: chore: prepare for filepond

---
 src/site/components/uploader/Filepond.vue | 97 +++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 src/site/components/uploader/Filepond.vue

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Filepond.vue b/src/site/components/uploader/Filepond.vue
new file mode 100644
index 0000000..1ee5288
--- /dev/null
+++ b/src/site/components/uploader/Filepond.vue
@@ -0,0 +1,97 @@
+<template>
+	<file-pond
+		ref="pond"
+		name="test"
+		class="pond"
+		class-name="my-pond"
+		label-idle="Drop files here or click to browse"
+		:allow-multiple="true"
+		:files="myFiles"
+		:max-files="1000"
+		:chunk-uploads="true"
+		:chunk-size:="50 * 1000000"
+		:server="server"
+		@init="handleFilePondInit"
+		@error="handleFilePondError"
+		@addfile="handleFilePondAddFile" />
+</template>
+
+<script>
+// Import Vue FilePond
+import vueFilePond from 'vue-filepond';
+
+// Import FilePond styles
+import 'filepond/dist/filepond.min.css';
+
+// Import FilePond plugins
+// Please note that you need to install these plugins separately
+
+// Import image preview plugin styles
+// import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
+
+// Import image preview and file type validation plugins
+// import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+// import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
+
+// Create component
+const FilePond = vueFilePond(); // FilePondPluginFileValidateType, FilePondPluginImagePreview);
+
+export default {
+	components: {
+		FilePond
+	},
+	data() {
+		return {
+			myFiles: [],
+			server: {
+				url: 'http://localhost:5000',
+				process: {
+					url: '/api/upload',
+					method: 'POST',
+					headers: {
+						'Accept': 'application/vnd.lolisafe.json'
+					},
+					timeout: 300000, // 5 minutes
+					onload: response => console.log(response)
+				}
+			}
+		};
+	},
+	methods: {
+		handleFilePondInit() {
+			console.log('FilePond has initialized');
+			console.log(this.$refs.pond);
+			// FilePond instance methods are available on `this.$refs.pond`
+		},
+		handleFilePondError(error) {
+			console.log(error);
+		},
+		handleFilePondAddFile(error, file) {
+			console.log(error, file);
+		}
+	}
+};
+</script>
+<style lang="scss">
+.pond {
+	width: 400px;
+	margin: 0 auto;
+
+	.filepond--browser.filepond--browser {
+		height: 100%;
+		padding-top: 1.75rem;
+		top: 0;
+		left: 0;
+		width: 100%;
+		cursor: pointer;
+	}
+}
+
+.pond.mini {
+	position: absolute;
+	width: 300px;
+	height: auto;
+	top: calc(50% - 40px);
+	left: calc(50% - 150px);
+}
+</style>
-- 
cgit v1.2.3


From 391ee68e4a67aec640e25bc3506f9e31c77e58f5 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 12 Oct 2019 15:47:25 +0900
Subject: chore: Upgrade buefy to newest version

---
 src/site/components/grid/Grid.vue     | 4 ++--
 src/site/components/navbar/Navbar.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 07e5440..5f98b9d 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -191,7 +191,7 @@ export default {
 			console.log('> Search result data', data);
 		},
 		deleteFile(file, index) {
-			this.$dialog.confirm({
+			this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
@@ -204,7 +204,7 @@ export default {
 					this.$nextTick(() => {
 						this.showWaterfall = true;
 					});
-					return this.$toast.open(response.message);
+					return this.buefy.$toast.open(response.message);
 				}
 			});
 		}
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 5b422ae..a258e17 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -5,7 +5,7 @@
 		box-shadow: none;
 
 		.navbar-brand {
-			width: 100%;
+			width: calc(100% - 2em);
 			align-items: flex-start;
 			padding: 1em;
 
-- 
cgit v1.2.3


From 1177de9b041b759cc1c29fc3853599346079fded Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 12 Oct 2019 20:16:23 +0900
Subject: fix: update sharex snippet

---
 src/site/components/home/links/Links.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 2d6cfc3..1a1f077 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -103,21 +103,18 @@ export default {
 	computed: {
 		loggedIn() {
 			return this.$store.state.loggedIn;
-		},
-		token() {
-			return this.$store.state.token;
 		}
 	},
 	methods: {
 		createShareXThing() {
 			const sharexFile = `{
-				"Name": "${location.hostname}",
+				"Name": "${this.$store.state.config.serviceName}",
 				"DestinationType": "ImageUploader, FileUploader",
 				"RequestType": "POST",
 				"RequestURL": "${location.origin}/api/upload",
-				"FileFormName": "file",
+				"FileFormName": "files[]",
 				"Headers": {
-					"authorization": "Bearer ${this.token}",
+					"authorization": "Bearer ${this.$store.state.token}",
 					"accept": "application/vnd.lolisafe.json"
 				},
 				"ResponseType": "Text",
-- 
cgit v1.2.3


From 5ca3c353813bb49acfeb9f4630e9bb46bc33fa02 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 12 Oct 2019 20:16:38 +0900
Subject: Added new links to the navbar

---
 src/site/components/navbar/Navbar.vue | 39 ++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 8 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index a258e17..403d7c9 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -76,14 +76,37 @@
 
 			<div class="spacer" />
 
-			<router-link v-if="!loggedIn"
-				class="navbar-item"
-				to="/login"><i class="hidden" />Login</router-link>
-
-			<router-link v-else
-				to="/dashboard"
-				class="navbar-item no-active"
-				exact><i class="hidden" />Dashboard</router-link>
+			<template v-if="loggedIn">
+				<router-link
+					to="/dashboard"
+					class="navbar-item no-active"
+					exact>
+					<i class="hidden" />
+					Uploads
+				</router-link>
+				<router-link
+					to="/dashboard/albums"
+					class="navbar-item no-active"
+					exact>
+					<i class="hidden" />
+					Albums
+				</router-link>
+				<router-link
+					to="/dashboard/account"
+					class="navbar-item no-active"
+					exact>
+					<i class="hidden" />
+					Account
+				</router-link>
+			</template>
+			<template v-else>
+				<router-link
+					class="navbar-item"
+					to="/login">
+					<i class="hidden" />
+					Login
+				</router-link>
+			</template>
 		</div>
 	</nav>
 </template>
-- 
cgit v1.2.3


From bca8fbcd839d2239e3f6f141f662fbbc74726835 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 12 Oct 2019 21:14:19 +0900
Subject: refactor: removed useless code, cleaned up, fixed permissions

---
 src/site/components/grid/Grid.vue     |  5 -----
 src/site/components/navbar/Navbar.vue | 27 ---------------------------
 2 files changed, 32 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 5f98b9d..19acde9 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -172,11 +172,6 @@ export default {
 			searchTerm: null
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
 	mounted() {
 		this.$search.items(this.files);
 	},
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 403d7c9..78eb650 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -50,30 +50,6 @@
 				<i class="icon-ecommerce-safebox" /> {{ config.serviceName }}
 			</router-link>
 
-			<!--
-			<template v-if="loggedIn">
-				<router-link
-					to="/dashboard/uploads"
-					class="navbar-item no-active"
-					exact><i class="hidden"/>Uploads</router-link>
-
-				<router-link
-					to="/dashboard/albums"
-					class="navbar-item no-active"
-					exact><i class="hidden"/>Albums</router-link>
-
-				<router-link
-					to="/dashboard/tags"
-					class="navbar-item no-active"
-					exact><i class="hidden"/>Tags</router-link>
-
-				<router-link
-					to="/dashboard/settings"
-					class="navbar-item no-active"
-					exact><i class="hidden"/>Settings</router-link>
-			</template>
-			-->
-
 			<div class="spacer" />
 
 			<template v-if="loggedIn">
@@ -126,9 +102,6 @@ export default {
 		loggedIn() {
 			return this.$store.state.loggedIn;
 		},
-		user() {
-			return this.$store.state.user;
-		},
 		config() {
 			return this.$store.state.config;
 		}
-- 
cgit v1.2.3


From cba7bf8586f59a049f79aba586db201ac6f3530b Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sun, 13 Oct 2019 02:53:45 +0900
Subject: This commit adds a bunch of features for admins:

* banning IP
* see files from other users if you are admin
* be able to see details of an uploaded file and it's user
* improved display of thumbnails for non-image files
---
 src/site/components/grid/Grid.vue       | 290 ++++++++++++++++++++++++--------
 src/site/components/sidebar/Sidebar.vue |   4 +-
 2 files changed, 224 insertions(+), 70 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 19acde9..2e2f911 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -4,6 +4,30 @@
 		transition: all .25s cubic-bezier(.55,0,.1,1);
 		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
 	}
+
+	div.toolbar {
+		padding: 1rem;
+
+		.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;
+	}
+
 	div.actions {
 		opacity: 0;
 		-webkit-transition: opacity 0.1s linear;
@@ -23,6 +47,11 @@
 
 		span {
 			padding: 3px;
+			&.more {
+				position: absolute;
+				top: 0;
+				right: 0;
+			}
 
 			&:nth-child(1), &:nth-child(2) {
 				align-items: flex-end;
@@ -38,7 +67,7 @@
 				justify-content: center;
 				align-items: center;
 				display: flex;
-				&:before {
+				&.btn:before {
 					content: '';
 					width: 30px;
 					height: 30px;
@@ -76,64 +105,174 @@
 </style>
 
 <template>
-	<Waterfall
-		:gutterWidth="10"
-		:gutterHeight="4">
-		<!-- Gotta implement search and pagination here -->
-		<input v-if="enableSearch"
-			v-model="searchTerm"
-			type="text"
-			placeholder="Search..."
-			@input="search()"
-			@keyup.enter="search()">
-
-		<WaterfallItem v-for="(item, index) in files"
-			v-if="showWaterfall && item.thumb"
-			:key="index"
-			:width="width"
-			move-class="item-move">
-			<template v-if="isPublic">
-				<a :href="`${item.url}`"
-					target="_blank">
-					<img :src="`${item.thumb}`">
-				</a>
-			</template>
-			<template v-else>
-				<img :src="`${item.thumb}`">
-				<div v-if="!isPublic"
-					:class="{ fixed }"
-					class="actions">
-					<b-tooltip label="Link"
-						position="is-top">
-						<a :href="`${item.url}`"
-							target="_blank">
-							<i class="icon-web-code" />
-						</a>
-					</b-tooltip>
-					<b-tooltip label="Albums"
-						position="is-top">
-						<a @click="$parent.openAlbumModal(item)">
-							<i class="icon-interface-window" />
-						</a>
-					</b-tooltip>
-					<!--
-					<b-tooltip label="Tags"
-						position="is-top">
-						<a @click="manageTags(item)">
-							<i class="icon-ecommerce-tag-c" />
-						</a>
-					</b-tooltip>
-					-->
-					<b-tooltip label="Delete"
-						position="is-top">
-						<a @click="deleteFile(item, index)">
-							<i class="icon-editorial-trash-a-l" />
-						</a>
-					</b-tooltip>
-				</div>
-			</template>
-		</WaterfallItem>
-	</Waterfall>
+	<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>
+			</div>
+		</div>
+
+		<Waterfall v-if="!showList"
+			: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 files"
+				v-if="showWaterfall"
+				:key="index"
+				:width="width"
+				move-class="item-move">
+				<template v-if="isPublic">
+					<a :href="`${item.url}`"
+						target="_blank">
+						<img :src="item.thumb ? item.thumb : blank">
+					</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"
+						: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="$parent.openAlbumModal(item)">
+								<i class="icon-interface-window" />
+							</a>
+						</b-tooltip>
+						<!--
+						<b-tooltip label="Tags"
+							position="is-top">
+							<a @click="manageTags(item)">
+								<i class="icon-ecommerce-tag-c" />
+							</a>
+						</b-tooltip>
+						-->
+						<b-tooltip label="Delete"
+							position="is-top">
+							<a class="btn"
+								@click="deleteFile(item, index)">
+								<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/${item.id}`">
+								<i class="icon-interface-more" />
+							</nuxt-link>
+						</b-tooltip>
+					</div>
+				</template>
+			</WaterfallItem>
+		</Waterfall>
+		<div v-else>
+			<b-table
+				:data="files || []"
+				: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="$parent.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>
+					</template>
+				</template>
+				<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="has-text-right">
+						{{ files.length }} files
+					</div>
+				</template>
+			</b-table>
+		</div>
+	</div>
 </template>
 <script>
 import Waterfall from './waterfall/Waterfall.vue';
@@ -164,16 +303,26 @@ export default {
 		enableSearch: {
 			type: Boolean,
 			default: true
+		},
+		enableToolbar: {
+			type: Boolean,
+			default: true
 		}
 	},
 	data() {
 		return {
 			showWaterfall: true,
-			searchTerm: null
+			searchTerm: null,
+			showList: false
 		};
 	},
-	mounted() {
-		this.$search.items(this.files);
+	computed: {
+		user() {
+			return this.$store.state.user;
+		},
+		blank() {
+			return require('@/assets/images/blank.png');
+		}
 	},
 	methods: {
 		async search() {
@@ -194,12 +343,17 @@ export default {
 				hasIcon: true,
 				onConfirm: async () => {
 					const response = await this.$axios.$delete(`file/${file.id}`);
-					this.showWaterfall = false;
-					this.files.splice(index, 1);
-					this.$nextTick(() => {
-						this.showWaterfall = true;
-					});
-					return this.buefy.$toast.open(response.message);
+					if (this.showList) {
+						file.hideFromList = true;
+						this.$forceUpdate();
+					} else {
+						this.showWaterfall = false;
+						this.files.splice(index, 1);
+						this.$nextTick(() => {
+							this.showWaterfall = true;
+						});
+					}
+					return this.$buefy.toast.open(response.message);
 				}
 			});
 		}
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 101a70b..9fe1be5 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -46,12 +46,12 @@
 		</router-link>
 		<template v-if="user && user.isAdmin">
 			<hr>
-			<router-link to="/dashboard/users">
+			<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/settings">
+			<router-link to="/dashboard/admin/settings">
 				<i class="icon-setting-gear-a" />Settings
 			</router-link>
 			-->
-- 
cgit v1.2.3


From a957713e81eddf280b547de523b579bc16acde32 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 10 Apr 2020 23:40:22 +0900
Subject: chore: update deps

---
 src/site/components/grid/Grid.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 2e2f911..ca3d0f9 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -26,6 +26,7 @@
 		font-size: 2rem;
 		pointer-events: none;
 		opacity: .75;
+		max-width: 150px;
 	}
 
 	div.actions {
@@ -146,6 +147,8 @@
 					<a :href="`${item.url}`"
 						target="_blank">
 						<img :src="item.thumb ? item.thumb : blank">
+						<span v-if="!item.thumb && item.name"
+							class="extension">{{ item.name.split('.').pop() }}</span>
 					</a>
 				</template>
 				<template v-else>
-- 
cgit v1.2.3


From 05c129ec322216356456cdcae517cd6c879a844a Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 11 Apr 2020 00:52:06 +0900
Subject: chore: remove filepond

---
 src/site/components/uploader/Filepond.vue | 97 -------------------------------
 src/site/components/uploader/Uploader.vue | 20 -------
 2 files changed, 117 deletions(-)
 delete mode 100644 src/site/components/uploader/Filepond.vue

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Filepond.vue b/src/site/components/uploader/Filepond.vue
deleted file mode 100644
index 1ee5288..0000000
--- a/src/site/components/uploader/Filepond.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-	<file-pond
-		ref="pond"
-		name="test"
-		class="pond"
-		class-name="my-pond"
-		label-idle="Drop files here or click to browse"
-		:allow-multiple="true"
-		:files="myFiles"
-		:max-files="1000"
-		:chunk-uploads="true"
-		:chunk-size:="50 * 1000000"
-		:server="server"
-		@init="handleFilePondInit"
-		@error="handleFilePondError"
-		@addfile="handleFilePondAddFile" />
-</template>
-
-<script>
-// Import Vue FilePond
-import vueFilePond from 'vue-filepond';
-
-// Import FilePond styles
-import 'filepond/dist/filepond.min.css';
-
-// Import FilePond plugins
-// Please note that you need to install these plugins separately
-
-// Import image preview plugin styles
-// import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
-
-// Import image preview and file type validation plugins
-// import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
-// import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
-
-// Create component
-const FilePond = vueFilePond(); // FilePondPluginFileValidateType, FilePondPluginImagePreview);
-
-export default {
-	components: {
-		FilePond
-	},
-	data() {
-		return {
-			myFiles: [],
-			server: {
-				url: 'http://localhost:5000',
-				process: {
-					url: '/api/upload',
-					method: 'POST',
-					headers: {
-						'Accept': 'application/vnd.lolisafe.json'
-					},
-					timeout: 300000, // 5 minutes
-					onload: response => console.log(response)
-				}
-			}
-		};
-	},
-	methods: {
-		handleFilePondInit() {
-			console.log('FilePond has initialized');
-			console.log(this.$refs.pond);
-			// FilePond instance methods are available on `this.$refs.pond`
-		},
-		handleFilePondError(error) {
-			console.log(error);
-		},
-		handleFilePondAddFile(error, file) {
-			console.log(error, file);
-		}
-	}
-};
-</script>
-<style lang="scss">
-.pond {
-	width: 400px;
-	margin: 0 auto;
-
-	.filepond--browser.filepond--browser {
-		height: 100%;
-		padding-top: 1.75rem;
-		top: 0;
-		left: 0;
-		width: 100%;
-		cursor: pointer;
-	}
-}
-
-.pond.mini {
-	position: absolute;
-	width: 300px;
-	height: auto;
-	top: calc(50% - 40px);
-	left: calc(50% - 150px);
-}
-</style>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index d9ed46a..9974e1d 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -225,26 +225,6 @@ export default {
 </style>
 <style lang="scss">
 	@import '~/assets/styles/_colors.scss';
-	.filepond--panel-root {
-		background: transparent;
-		border: 2px solid #2c3340;
-	}
-	.filepond--drop-label {
-		color: #c7ccd8;
-		pointer-events: none;
-	}
-
-	.filepond--item-panel {
-		background-color: #767b8b;
-	}
-
-	.filepond--root .filepond--drip-blob {
-		background-color: #7f8a9a
-	}
-
-	.filepond--drip {
-		background: black;
-	}
 
 	div.uploader-wrapper {
 		&.has-files {
-- 
cgit v1.2.3


From bf37e04cb682bb561d595663d370ffcc2d15b4de Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Mon, 13 Apr 2020 01:17:03 +0900
Subject: feature: footer

---
 src/site/components/footer/Footer.vue | 135 ++++++++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 src/site/components/footer/Footer.vue

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
new file mode 100644
index 0000000..5df8ac3
--- /dev/null
+++ b/src/site/components/footer/Footer.vue
@@ -0,0 +1,135 @@
+<template>
+	<footer>
+		<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"
+				class="wave-1" />
+			<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"
+				class="wave-3" />
+		</svg>
+		<div>
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<h4>lolisafe</h4>
+						<span>© 2017-2020
+							<a href="https://github.com/pitu"
+								class="no-block">Pitu</a>
+						</span><br>
+						<span>v{{ version }}</span>
+					</div>
+					<div class="column">
+						<div class="columns is-gapless">
+							<div class="column" />
+							<div class="column">
+								<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>
+							</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"
+									@click="createShareXThing">ShareX Config</a>
+								<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</footer>
+</template>
+<script>
+import { saveAs } from 'file-saver';
+export default {
+	computed: {
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		},
+		version() {
+			return this.$store.state.config.version;
+		}
+	},
+	methods: {
+		createShareXThing() {
+			const sharexFile = `{
+				"Name": "${this.$store.state.config.serviceName}",
+				"DestinationType": "ImageUploader, FileUploader",
+				"RequestType": "POST",
+				"RequestURL": "${location.origin}/api/upload",
+				"FileFormName": "files[]",
+				"Headers": {
+					"authorization": "Bearer ${this.$store.state.token}",
+					"accept": "application/vnd.lolisafe.json"
+				},
+				"ResponseType": "Text",
+				"URL": "$json:url$",
+				"ThumbnailURL": "$json:url$"
+			}`;
+			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
+			saveAs(sharexBlob, `${location.hostname}.sxcu`);
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	footer {
+		svg.waves {
+			display: block;
+			bottom: -1px;
+			left: 0px;
+			right: 0px;
+			width: 100%;
+			background-color: transparent;
+			pointer-events: none;
+			user-select: none;
+			overflow: hidden;
+
+			.wave-1 {
+				fill: rgb(55, 61, 76);
+				transition: fill 400ms ease-in-out 0s;
+			}
+
+			.wave-2 {
+				fill: rgb(57, 64, 79);
+				transition: fill 400ms ease-in-out 0s;
+			}
+
+			.wave-3 {
+				fill: rgb(59, 66, 82);
+				transition: fill 400ms ease-in-out 0s;
+			}
+		}
+
+		> div {
+			background: rgb(59, 66, 82);
+			padding: 3em 0;
+			@media screen and (max-width: 1024px) {
+				padding: 3em 3em;
+			}
+		}
+
+		.container .column a {
+			display: block;
+			color: $textColor;
+			&:hover {
+				color: white
+			}
+			&.no-block {
+				display: inherit;
+			}
+		}
+	}
+</style>
-- 
cgit v1.2.3


From d63f1f57e9bd1314de204d92634ca1262d089111 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 28 Apr 2020 10:47:22 +0900
Subject: wip: * Dark theme by default * Re-arranged vue files structure *
 Re-arranged the layout file to make it easier to extend

---
 src/site/components/footer/Footer.vue     |  10 --
 src/site/components/home/links/Links.vue  | 130 ++++++++++++------------
 src/site/components/navbar/Navbar.vue     | 163 +++++++++++++++++-------------
 src/site/components/sidebar/Sidebar.vue   |  59 +++++------
 src/site/components/uploader/Uploader.vue |  32 ++----
 5 files changed, 192 insertions(+), 202 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 5df8ac3..9f51fee 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -87,16 +87,6 @@ export default {
 	@import '~/assets/styles/_colors.scss';
 	footer {
 		svg.waves {
-			display: block;
-			bottom: -1px;
-			left: 0px;
-			right: 0px;
-			width: 100%;
-			background-color: transparent;
-			pointer-events: none;
-			user-select: none;
-			overflow: hidden;
-
 			.wave-1 {
 				fill: rgb(55, 61, 76);
 				transition: fill 400ms ease-in-out 0s;
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 1a1f077..41bd271 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,67 +1,3 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.links {
-		margin-bottom: 3em;
-		align-items: stretch;
-		display: flex;
-		justify-content: space-between;
-
-		div.link { cursor: pointer; }
-		.link {
-			background: $backgroundAccent;
-			display: block;
-			width: calc(25% - 2rem);
-			border-radius: 6px;
-			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
-			transition-duration: 86ms;
-			transition-property: box-shadow,-webkit-transform;
-			transition-property: box-shadow,transform;
-			transition-property: box-shadow,transform,-webkit-transform;
-			will-change: box-shadow,transform;
-
-			header.bd-footer-star-header {
-				padding: 1.5rem;
-
-				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
-
-				h4.bd-footer-title {
-					color: $textColorHighlight;
-					font-size: 1.5rem;
-					line-height: 1.25;
-					margin-bottom: .5rem;
-					transition-duration: 86ms;
-					transition-property: color;
-					font-weight: 700;
-				}
-
-				p.bd-footer-subtitle {
-					color: $textColor;
-					margin-top: -.5rem;
-					transition-duration: 86ms;
-					transition-property: color;
-					font-weight: 400;
-				}
-			}
-
-			&:hover {
-				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
-				-webkit-transform: translateY(-.5rem);
-				transform: translateY(-.5rem);
-			}
-		}
-	}
-
-	@media screen and (max-width: 768px) {
-		.links {
-			display: block;
-			padding: 0px 2em;
-			.link {
-				width: 100%;
-				margin-bottom: 1.5em;
-			}
-		}
-	}
-</style>
 <template>
 	<div class="links">
 		<a href="https://github.com/WeebDev/lolisafe"
@@ -92,7 +28,7 @@
 			class="link">
 			<header class="bd-footer-star-header">
 				<h4 class="bd-footer-title">FAQ</h4>
-				<p class="bd-footer-subtitle">dunno</p>
+				<p class="bd-footer-subtitle">We got you covered</p>
 			</header>
 		</router-link>
 	</div>
@@ -127,3 +63,67 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	.links {
+		margin: 7rem 0 3rem 0;
+		align-items: stretch;
+		display: flex;
+		justify-content: space-between;
+
+		div.link { cursor: pointer; }
+		.link {
+			background: $backgroundAccent;
+			display: block;
+			width: calc(25% - 2rem);
+			border-radius: 6px;
+			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
+			transition-duration: 86ms;
+			transition-property: box-shadow,-webkit-transform;
+			transition-property: box-shadow,transform;
+			transition-property: box-shadow,transform,-webkit-transform;
+			will-change: box-shadow,transform;
+
+			header.bd-footer-star-header {
+				padding: 1.5rem;
+
+				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
+
+				h4.bd-footer-title {
+					color: $textColorHighlight;
+					font-size: 1.5rem;
+					line-height: 1.25;
+					margin-bottom: .5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 700;
+				}
+
+				p.bd-footer-subtitle {
+					color: $textColor;
+					margin-top: -.5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 400;
+				}
+			}
+
+			&:hover {
+				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
+				-webkit-transform: translateY(-.5rem);
+				transform: translateY(-.5rem);
+			}
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.links {
+			display: block;
+			padding: 0px 2em;
+			.link {
+				width: 100%;
+				margin-bottom: 1.5em;
+			}
+		}
+	}
+</style>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 78eb650..0b98af0 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,88 +1,59 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	nav.navbar {
-		background: transparent;
-		box-shadow: none;
-
-		.navbar-brand {
-			width: calc(100% - 2em);
-			align-items: flex-start;
-			padding: 1em;
-
-			div.spacer { flex: 1 0 10px; }
-			a.navbar-item {
-				color: $defaultTextColor;
-				font-size: 16px;
-				font-weight: 700;
-				text-decoration-style: solid;
-			}
-			a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
-				text-decoration: underline;
-				background: transparent;
-			}
-
-			i {
-				font-size: 2em;
-				&.hidden {
-					width: 0px;
-					height: 1.5em;
-					pointer-events: none;
-				}
-			}
-		}
-
-		&.isWhite {
-			.navbar-brand {
-				a.navbar-item {
-					color: white;
-				}
-			}
-		}
-	}
-</style>
-
 <template>
 	<nav :class="{ isWhite }"
 		class="navbar is-transparent">
 		<div class="navbar-brand">
-			<router-link to="/"
-				class="navbar-item no-active">
-				<i class="icon-ecommerce-safebox" /> {{ config.serviceName }}
-			</router-link>
-
-			<div class="spacer" />
-
-			<template v-if="loggedIn">
-				<router-link
-					to="/dashboard"
-					class="navbar-item no-active"
-					exact>
-					<i class="hidden" />
-					Uploads
-				</router-link>
+			<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">
 				<router-link
-					to="/dashboard/albums"
+					to="/"
 					class="navbar-item no-active"
 					exact>
-					<i class="hidden" />
-					Albums
+					Home
 				</router-link>
 				<router-link
-					to="/dashboard/account"
+					to="/"
 					class="navbar-item no-active"
 					exact>
-					<i class="hidden" />
-					Account
-				</router-link>
-			</template>
-			<template v-else>
-				<router-link
-					class="navbar-item"
-					to="/login">
-					<i class="hidden" />
-					Login
+					Docs
 				</router-link>
-			</template>
+				<template v-if="loggedIn">
+					<router-link
+						to="/dashboard"
+						class="navbar-item no-active"
+						exact>
+						Uploads
+					</router-link>
+					<router-link
+						to="/dashboard/albums"
+						class="navbar-item no-active"
+						exact>
+						Albums
+					</router-link>
+					<router-link
+						to="/dashboard/account"
+						class="navbar-item no-active"
+						exact>
+						Account
+					</router-link>
+				</template>
+				<template v-else>
+					<router-link
+						class="navbar-item"
+						to="/login">
+						Login
+					</router-link>
+				</template>
+			</div>
 		</div>
 	</nav>
 </template>
@@ -113,3 +84,49 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	nav.navbar {
+		background: transparent;
+		box-shadow: none;
+		.navbar-brand {
+			a.burger {
+				color: $defaultTextColor;
+			}
+		}
+		.navbar-menu {
+			height: 5rem;
+
+			.navbar-end {
+				padding-right: 2rem;
+			}
+			a.navbar-item {
+				color: $defaultTextColor;
+				font-size: 16px;
+				font-weight: 700;
+				text-decoration-style: solid;
+			}
+			a.navbar-item:hover, a.navbar-item.is-active, a.navbar-link:hover, a.navbar-link.is-active {
+				text-decoration: underline;
+				background: transparent;
+			}
+
+			i {
+				font-size: 2em;
+				&.hidden {
+					width: 0px;
+					height: 1.5em;
+					pointer-events: none;
+				}
+			}
+		}
+
+		&.isWhite {
+			.navbar-brand {
+				a.navbar-item {
+					color: white;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 9fe1be5..a2ad3f4 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,34 +1,5 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.dashboard-menu {
-		a {
-			display: block;
-			font-weight: 700;
-			color: #868686;
-			position: relative;
-			padding-left: 40px;
-			height: 35px;
-			&:hover, &:first-child {
-				color: $defaultTextColor;
-			}
-
-			i {
-				position: absolute;
-				font-size: 1.5em;
-				top: -4px;
-				left: 5px;
-			}
-		}
-
-		hr { margin-top: 0.6em; }
-	}
-</style>
 <template>
 	<div class="dashboard-menu">
-		<router-link to="/">
-			<i class="icon-ecommerce-safebox" />lolisafe
-		</router-link>
-		<hr>
 		<router-link to="/dashboard">
 			<i class="icon-com-pictures" />Files
 		</router-link>
@@ -40,12 +11,10 @@
 			<i class="icon-ecommerce-tag-c" />Tags
 		</router-link>
 		-->
-		<hr>
 		<router-link to="/dashboard/account">
 			<i class="icon-ecommerce-tag-c" />Account
 		</router-link>
 		<template v-if="user && user.isAdmin">
-			<hr>
 			<router-link to="/dashboard/admin/users">
 				<i class="icon-setting-gear-a" />Users
 			</router-link>
@@ -67,3 +36,31 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	.dashboard-menu {
+		padding: 2rem;
+		border-radius: 8px;
+
+		a {
+			display: block;
+			font-weight: 700;
+			color: $textColor;
+			position: relative;
+			padding-left: 40px;
+			height: 35px;
+			&:hover{
+				color: white;
+			}
+
+			i {
+				position: absolute;
+				font-size: 1.5em;
+				top: -4px;
+				left: 5px;
+			}
+		}
+
+		hr { margin-top: 0.6em; }
+	}
+</style>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 9974e1d..1b03ff8 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -22,7 +22,7 @@
 			@vdropzone-error="dropzoneError"
 			@vdropzone-files-added="dropzoneFilesAdded" />
 		<label class="add-more">
-			Add more files
+			Add or drop more files
 		</label>
 
 		<div id="template"
@@ -33,18 +33,11 @@
 					<div class="dz-size"><span data-dz-size /></div>
 				</div>
 				<div class="result">
-					<div class="copyLink">
-						<b-tooltip label="Copy link">
-							<i class="icon-web-code" />
-						</b-tooltip>
-					</div>
 					<div class="openLink">
-						<b-tooltip label="Open file">
-							<a class="link"
-								target="_blank">
-								<i class="icon-web-url" />
-							</a>
-						</b-tooltip>
+						<a class="link"
+							target="_blank">
+							Link
+						</a>
 					</div>
 				</div>
 				<div class="error">
@@ -193,12 +186,14 @@ export default {
 		processResult(file, response) {
 			if (!response.url) return;
 			file.previewTemplate.querySelector('.link').setAttribute('href', response.url);
+			/*
 			file.previewTemplate.querySelector('.copyLink').addEventListener('click', () => {
 				this.$store.dispatch('alert', {
 					text: 'Link copied!'
 				});
 				this.$clipboard(response.url);
 			});
+			*/
 		}
 	}
 };
@@ -210,17 +205,7 @@ export default {
 		width: 400px;
 		margin: 0 auto;
 		max-width: 100%;
-		transition-duration: 86ms;
-		transition-property: box-shadow,-webkit-transform;
-		transition-property: box-shadow,transform;
-		transition-property: box-shadow,transform,-webkit-transform;
-		will-change: box-shadow,transform;
-
-		&:hover, &.hasFiles {
-			box-shadow: 0 1rem 3rem 0rem rgba(10, 10, 10, 0.25);
-			-webkit-transform: translateY(-.5rem);
-			transform: translateY(-.5rem);
-		}
+		position: relative;
 	}
 </style>
 <style lang="scss">
@@ -249,6 +234,7 @@ export default {
 					background: rgba(0, 0, 0, 0.15);
 					border-radius: .3em;
 					color: $uploaderDropdownColor;
+					padding: 0 0 0 1rem;
 				}
 			}
 		}
-- 
cgit v1.2.3


From 124ff68f06bcfee7494e4b8117d87dd206c6ecbe Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sun, 10 May 2020 21:22:48 +0900
Subject: Feat: implement lazy loading for waterfall view

---
 src/site/components/grid/Grid.vue | 441 ++++++++++++++++++++++----------------
 1 file changed, 258 insertions(+), 183 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index ca3d0f9..3b65011 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,110 +1,3 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.item-move {
-		transition: all .25s cubic-bezier(.55,0,.1,1);
-		-webkit-transition: all .25s cubic-bezier(.55,0,.1,1);
-	}
-
-	div.toolbar {
-		padding: 1rem;
-
-		.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;
-	}
-
-	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;
-			}
-
-			&:nth-child(1), &:nth-child(2) {
-				align-items: flex-end;
-			}
-
-			&:nth-child(1), &:nth-child(3) {
-				justify-content: flex-end;
-			}
-			a {
-				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;
-				}
-			}
-		}
-
-		&.fixed {
-			position: relative;
-			opacity: 1;
-			background: none;
-
-			a {
-				width: auto;
-				height: auto;
-				color: $defaultTextColor;
-				&:before {
-					display: none;
-				}
-			}
-
-		}
-	}
-</style>
-
-<style lang="scss">
-	.waterfall-item:hover {
-		div.actions {
-			opacity: 1
-		}
-	}
-</style>
-
 <template>
 	<div>
 		<div v-if="enableToolbar"
@@ -123,86 +16,89 @@
 			</div>
 		</div>
 
-		<Waterfall v-if="!showList"
-			: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()">
-			 -->
+		<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 -->
+				<!-- TODO: Implement pagination -->
 
-			<WaterfallItem v-for="(item, index) in files"
-				v-if="showWaterfall"
-				:key="index"
-				:width="width"
-				move-class="item-move">
-				<template v-if="isPublic">
-					<a :href="`${item.url}`"
-						target="_blank">
+				<WaterfallItem v-for="(item, index) in gridFiles"
+					v-if="showWaterfall"
+					:key="index"
+					:width="width"
+					move-class="item-move">
+					<template v-if="isPublic">
+						<a :href="`${item.url}`"
+							target="_blank">
+							<img :src="item.thumb ? item.thumb : blank">
+							<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>
-					</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"
-						: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="$parent.openAlbumModal(item)">
-								<i class="icon-interface-window" />
-							</a>
-						</b-tooltip>
-						<!--
-						<b-tooltip label="Tags"
-							position="is-top">
-							<a @click="manageTags(item)">
-								<i class="icon-ecommerce-tag-c" />
-							</a>
-						</b-tooltip>
-						-->
-						<b-tooltip label="Delete"
-							position="is-top">
-							<a class="btn"
-								@click="deleteFile(item, index)">
-								<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/${item.id}`">
-								<i class="icon-interface-more" />
-							</nuxt-link>
-						</b-tooltip>
-					</div>
-				</template>
-			</WaterfallItem>
-		</Waterfall>
+						<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" />
+								</a>
+							</b-tooltip>
+							<!--
+							<b-tooltip label="Tags"
+								position="is-top">
+								<a @click="manageTags(item)">
+									<i class="icon-ecommerce-tag-c" />
+								</a>
+							</b-tooltip>
+							-->
+							<b-tooltip label="Delete"
+								position="is-top">
+								<a class="btn"
+									@click="deleteFile(item, index)">
+									<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/${item.id}`">
+									<i class="icon-interface-more" />
+								</nuxt-link>
+							</b-tooltip>
+						</div>
+					</template>
+				</WaterfallItem>
+			</Waterfall>
+			<button class="button is-primary"
+				@click="loadMoreFilesWaterfall">Load more</button>
+		</template>
 		<div v-else>
 			<b-table
-				:data="files || []"
+				:data="gridFiles || []"
 				:mobile-cards="true">
 				<template slot-scope="props">
 					<template v-if="!props.row.hideFromList">
@@ -237,7 +133,7 @@
 							<b-tooltip label="Albums"
 								position="is-top">
 								<a class="btn"
-									@click="$parent.openAlbumModal(props.row)">
+									@click="openAlbumModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -275,6 +171,28 @@
 				</template>
 			</b-table>
 		</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>
 	</div>
 </template>
 <script>
@@ -289,7 +207,7 @@ export default {
 	props: {
 		files: {
 			type: Array,
-			default: null
+			default: () => []
 		},
 		fixed: {
 			type: Boolean,
@@ -316,7 +234,13 @@ export default {
 		return {
 			showWaterfall: true,
 			searchTerm: null,
-			showList: false
+			showList: false,
+			albums: [],
+			isAlbumsModalActive: false,
+			showingModalForFile: null,
+			filesOffsetWaterfall: 0,
+			filesOffsetEndWaterfall: 50,
+			filesPerPageWaterfall: 50
 		};
 	},
 	computed: {
@@ -325,9 +249,15 @@ export default {
 		},
 		blank() {
 			return require('@/assets/images/blank.png');
+		},
+		gridFiles() {
+			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
 		}
 	},
 	methods: {
+		loadMoreFilesWaterfall() {
+			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
+		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
 				'name',
@@ -359,7 +289,152 @@ export default {
 					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;
+		},
+		async openAlbumModal(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;
+
+			this.getAlbums();
+		},
+		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);
+
+			// Not the prettiest solution to refetch on each click but it'll do for now
+			this.$parent.getFiles();
+		},
+		async getAlbums() {
+			const response = await this.$axios.$get(`albums/dropdown`);
+			this.albums = response.albums;
+			this.$forceUpdate();
 		}
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	.item-move {
+		transition: all .25s cubic-bezier(.55,0,.1,1);
+	}
+
+	div.toolbar {
+		padding: 1rem;
+
+		.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;
+	}
+
+	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;
+			}
+
+			&:nth-child(1), &:nth-child(2) {
+				align-items: flex-end;
+			}
+
+			&:nth-child(1), &:nth-child(3) {
+				justify-content: flex-end;
+			}
+			a {
+				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;
+				}
+			}
+		}
+
+		&.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;
+		}
+	}
+</style>
+
+<style lang="scss">
+	.waterfall-item:hover {
+		div.actions {
+			opacity: 1
+		}
+	}
+</style>
-- 
cgit v1.2.3


From 04319acf2056f44615fb32f64cc65bc759a15e23 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Thu, 25 Jun 2020 02:14:11 +0900
Subject: Only display `Show more` button when there's more to show

---
 src/site/components/grid/Grid.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 3b65011..da9b26c 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -93,7 +93,9 @@
 					</template>
 				</WaterfallItem>
 			</Waterfall>
-			<button class="button is-primary"
+			<button
+				v-if="moreFiles"
+				class="button is-primary"
 				@click="loadMoreFilesWaterfall">Load more</button>
 		</template>
 		<div v-else>
@@ -252,6 +254,9 @@ export default {
 		},
 		gridFiles() {
 			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+		},
+		moreFiles() {
+			return this.files.length > this.filesOffsetEndWaterfall;
 		}
 	},
 	methods: {
-- 
cgit v1.2.3


From 048e5d9325536e04cb99bd8690d94b32516fd8dd Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 16:03:08 +0300
Subject: feat: add logout link if logged in

---
 src/site/components/navbar/Navbar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 0b98af0..5499120 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -45,6 +45,11 @@
 						exact>
 						Account
 					</router-link>
+					<a
+						class="navbar-item"
+						@click="logOut">
+						Logout
+					</a>
 				</template>
 				<template v-else>
 					<router-link
@@ -79,7 +84,8 @@ export default {
 	},
 	methods: {
 		logOut() {
-			this.$emit('logout');
+			this.$store.dispatch('logout');
+			this.$router.replace('/login');
 		}
 	}
 };
-- 
cgit v1.2.3


From 0a50ef771eb870f18b0cd08f579dba1017d73858 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 17:01:38 +0300
Subject: fix: change navbar to buefy navbar for mobile support

---
 src/site/components/navbar/Navbar.vue | 45 ++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 22 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 5499120..528ed93 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,66 +1,67 @@
 <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="/"
 					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">
 					<a
 						class="navbar-item"
 						@click="logOut">
 						Logout
 					</a>
-				</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>
-- 
cgit v1.2.3


From 27b0fdafb2785c4cb1b9c8f62beb8c68ff2aff56 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:00:49 +0300
Subject: misc: remove patreon. sorry.

---
 src/site/components/footer/Footer.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 9f51fee..49f622c 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -35,8 +35,6 @@
 							</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"
-- 
cgit v1.2.3


From ac037c773ef5f15372c6999445a2efe00034c0c0 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:02:47 +0300
Subject: fix: Remove hero and hero body and use sections and containers
 instead

Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage
---
 src/site/components/grid/Grid.vue     | 4 +++-
 src/site/components/navbar/Navbar.vue | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index da9b26c..4c4bdf4 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -167,7 +167,7 @@
 					</div>
 				</template>
 				<template slot="footer">
-					<div class="has-text-right">
+					<div class="has-text-right has-text-default">
 						{{ files.length }} files
 					</div>
 				</template>
@@ -197,6 +197,7 @@
 		</b-modal>
 	</div>
 </template>
+
 <script>
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
@@ -328,6 +329,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.item-move {
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 528ed93..47f90cb 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<b-navbar :class="{ isWhite }" 
+	<b-navbar :class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -12,7 +12,7 @@
 			</b-navbar-item>
 			<b-navbar-item tag="div">
 				<router-link
-					to="/"
+					to="/faq"
 					class="navbar-item no-active"
 					exact>
 					Docs
-- 
cgit v1.2.3


From 520062508ccad88d49229e603fc4d2c0c0a118d3 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 22:18:42 +0300
Subject: feat: backend pagination

serverLoad++;
userRamUsage--;
---
 src/site/components/grid/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 4c4bdf4..15ff5fd 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -17,7 +17,8 @@
 		</div>
 
 		<template v-if="!showList">
-			<Waterfall :gutterWidth="10"
+			<Waterfall v-if="showWaterfall"
+				:gutterWidth="10"
 				:gutterHeight="4">
 				<!--
 					TODO: Implement search based on originalName, albumName and tags
@@ -32,7 +33,6 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					v-if="showWaterfall"
 					:key="index"
 					:width="width"
 					move-class="item-move">
-- 
cgit v1.2.3


From 8416dc81a34b80de0ac9a4d0be923466bcffdec4 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 1 Jul 2020 20:15:08 +0300
Subject: fix: use file id instead of index and remove load more button

---
 src/site/components/grid/Grid.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 15ff5fd..b6615be 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -33,7 +33,7 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					:key="index"
+					:key="item.id"
 					:width="width"
 					move-class="item-move">
 					<template v-if="isPublic">
@@ -93,10 +93,6 @@
 					</template>
 				</WaterfallItem>
 			</Waterfall>
-			<button
-				v-if="moreFiles"
-				class="button is-primary"
-				@click="loadMoreFilesWaterfall">Load more</button>
 		</template>
 		<div v-else>
 			<b-table
@@ -254,16 +250,10 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+			return this.files;
 		},
-		moreFiles() {
-			return this.files.length > this.filesOffsetEndWaterfall;
-		}
 	},
 	methods: {
-		loadMoreFilesWaterfall() {
-			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
-		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
 				'name',
-- 
cgit v1.2.3


From 6688587eb6bdf118687c630378d40e36a3700a52 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:48:21 +0300
Subject: feat: move toolbar into a level and add slot for pagination on grid

---
 src/site/components/grid/Grid.vue | 57 ++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index b6615be..279472c 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,37 +1,40 @@
 <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>
+			<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 v-if="showWaterfall"
 				: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 -->
-
+				<input v-if="enableSearch"
+					v-model="searchTerm"
+					type="text"
+					placeholder="Search..."
+					@input="search()"
+					@keyup.enter="search()">	
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
@@ -289,7 +292,7 @@ export default {
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return;
 			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found ? found.id ? true : false : false;
+			return found && found.id ? true : false;
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
-- 
cgit v1.2.3


From 720ffaf0083564c85a07d66a6d303f34706add41 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:50:55 +0300
Subject: feat: start refactoring the code to actually use vuex

This includes creating multiple stores as needed for components and removing all complex states from components (since all those states should be stored in vuex)
---
 src/site/components/navbar/Navbar.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 47f90cb..aa4a672 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -65,6 +65,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 export default {
 	props: {
 		isWhite: {
@@ -76,12 +78,8 @@ 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() {
-- 
cgit v1.2.3


From c2dbbe6396540ee9d76991a00f5028b49d221d0c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 23:42:02 +0300
Subject: feat: refactor account to use vuex, fix small presentational
 components

---
 src/site/components/footer/Footer.vue        | 12 +++++-----
 src/site/components/grid/Grid.vue            |  8 ++++---
 src/site/components/loading/BulmaLoading.vue | 33 ++++++++++++++++++++++++++++
 src/site/components/navbar/Navbar.vue        |  4 ++--
 src/site/components/sidebar/Sidebar.vue      | 15 ++++++-------
 5 files changed, 53 insertions(+), 19 deletions(-)
 create mode 100644 src/site/components/loading/BulmaLoading.vue

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 49f622c..44e34f4 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -49,15 +49,15 @@
 	</footer>
 </template>
 <script>
+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
+		})
 	},
 	methods: {
 		createShareXThing() {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 279472c..a06eabf 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -198,6 +198,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
 
@@ -246,9 +248,9 @@ export default {
 		};
 	},
 	computed: {
-		user() {
-			return this.$store.state.user;
-		},
+		...mapState({
+			user: state => state.auth.user
+		}),
 		blank() {
 			return require('@/assets/images/blank.png');
 		},
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/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index aa4a672..7fb2f22 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -82,8 +82,8 @@ export default {
 		...mapState(['config'])
 	},
 	methods: {
-		logOut() {
-			this.$store.dispatch('logout');
+		async logOut() {
+			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
 		}
 	}
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index a2ad3f4..3cb8b43 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -6,13 +6,11 @@
 		<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
+			<i class="icon-user-alt" />Account
 		</router-link>
 		<template v-if="user && user.isAdmin">
 			<router-link to="/dashboard/admin/users">
@@ -28,13 +26,14 @@
 	</div>
 </template>
 <script>
+import { mapState } from 'vuex';
+
 export default {
-	computed: {
-		user() {
-			return this.$store.state.user;
-		}
-	}
+	computed: mapState({
+		user: state => state.auth.user
+	})
 };
+
 </script>
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
-- 
cgit v1.2.3


From 7581d13d1cdbd190009dea11549669cfa5cc00ad Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 3 Jul 2020 00:35:09 +0300
Subject: feat: separate album view into multiple components and use vuex

---
 src/site/components/album/AlbumDetails.vue | 177 ++++++++++++++++++++++++++++
 src/site/components/album/AlbumEntry.vue   | 179 +++++++++++++++++++++++++++++
 2 files changed, 356 insertions(+)
 create mode 100644 src/site/components/album/AlbumDetails.vue
 create mode 100644 src/site/components/album/AlbumEntry.vue

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
new file mode 100644
index 0000000..a02fe55
--- /dev/null
+++ b/src/site/components/album/AlbumDetails.vue
@@ -0,0 +1,177 @@
+<template>
+	<div class="details">
+		<h2>Public links for this album:</h2>
+
+		<b-table
+			:data="details.links || []"
+			:mobile-cards="true">
+			<template slot-scope="props">
+				<b-table-column 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 field="views"
+					label="Views"
+					centered>
+					{{ props.row.views }}
+				</b-table-column>
+
+				<b-table-column field="enableDownload"
+					label="Allow download"
+					centered>
+					<b-switch v-model="props.row.enableDownload"
+						@input="linkOptionsChanged(props.row)" />
+				</b-table-column>
+
+				<b-table-column field="enabled"
+					numeric>
+					<button class="button is-danger"
+						@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
+				</b-table-column>
+			</template>
+			<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">
+							<button :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 } from 'vuex';
+
+export default {
+	props: {
+		albumId: {
+			type: Number,
+			default: 0
+		},
+		details: {
+			type: Object,
+			default: () => ({})
+		},
+	},
+	data() {
+		return {
+			isCreatingLink: false
+		}
+	},
+	computed: mapState(['config']),
+	methods: {
+		promptDeleteAlbum(id) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this album?',
+				onConfirm: () => this.deleteAlbum(id)
+			});
+		},
+		async deleteAlbum(id) {
+			const response = await this.$axios.$delete(`album/${id}`);
+			this.getAlbums();
+			return this.$buefy.toast.open(response.message);
+		},
+		promptDeleteAlbumLink(identifier) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this album link?',
+				onConfirm: () => this.deleteAlbumLink(identifier)
+			});
+		},
+		async deleteAlbumLink(identifier) {
+			const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
+			return this.$buefy.toast.open(response.message);
+		},
+		async linkOptionsChanged(link) {
+			const response = await this.$axios.$post(`album/link/edit`,
+				{
+					identifier: link.identifier,
+					enableDownload: link.enableDownload,
+					enabled: link.enabled
+				});
+			this.$buefy.toast.open(response.message);
+		},
+		async createLink(album) {
+			album.isCreatingLink = true;
+			// Since we actually want to change the state even if the call fails, use a try catch
+			try {
+				const response = await this.$axios.$post(`album/link/new`,
+					{ albumId: album.id });
+				this.$buefy.toast.open(response.message);
+				album.links.push({
+					identifier: response.identifier,
+					views: 0,
+					enabled: true,
+					enableDownload: true,
+					expiresAt: null
+				});
+			} catch (error) {
+				//
+			} finally {
+				album.isCreatingLink = false;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+
+	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;
+		}
+	}
+</style>
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
new file mode 100644
index 0000000..4d23d6c
--- /dev/null
+++ b/src/site/components/album/AlbumEntry.vue
@@ -0,0 +1,179 @@
+<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>Updated <timeago :since="album.editedAt" /></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"
+			: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',
+			getDetailsGetter: 'albums/getDetails'
+		}),
+		isExpanded() {
+			return this.isExpandedGetter(this.album.id);
+		},
+		getDetails() {
+			return this.getDetailsGetter(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>
+
-- 
cgit v1.2.3


From 92be4504ccb8f6d918013e5c33870858cd22376a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:26:35 +0300
Subject: feat: refactor most of the album components to use store for
 presentation and actions

---
 src/site/components/album/AlbumDetails.vue | 85 +++++++++++++++++-------------
 src/site/components/album/AlbumEntry.vue   | 11 ++--
 src/site/components/grid/Grid.vue          | 12 ++---
 3 files changed, 58 insertions(+), 50 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index a02fe55..b646cb0 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -25,13 +25,13 @@
 					label="Allow download"
 					centered>
 					<b-switch v-model="props.row.enableDownload"
-						@input="linkOptionsChanged(props.row)" />
+						@input="updateLinkOptions(albumId, props.row)" />
 				</b-table-column>
 
 				<b-table-column field="enabled"
 					numeric>
 					<button class="button is-danger"
-						@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
+						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">Delete link</button>
 				</b-table-column>
 			</template>
 			<template slot="empty">
@@ -42,6 +42,7 @@
 					Nothing here
 				</div>
 			</template>
+
 			<template slot="footer">
 				<div class="level is-paddingless">
 					<div class="level-left">
@@ -70,7 +71,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 export default {
 	props: {
@@ -90,55 +91,65 @@ export default {
 	},
 	computed: mapState(['config']),
 	methods: {
+		...mapActions({
+			deleteAlbumAction: 'albums/deleteAlbum',
+			deleteAlbumLinkAction: 'albums/deleteLink',
+			updateLinkOptionsAction: 'albums/updateLinkOptions',
+			createLinkAction: 'albums/createLink',
+			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)
 			});
 		},
-		async deleteAlbum(id) {
-			const response = await this.$axios.$delete(`album/${id}`);
-			this.getAlbums();
-			return this.$buefy.toast.open(response.message);
-		},
-		promptDeleteAlbumLink(identifier) {
+		promptDeleteAlbumLink(albumId, identifier) {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink(identifier)
+				onConfirm: () => this.deleteAlbumLink({ albumId, identifier })
 			});
 		},
-		async deleteAlbumLink(identifier) {
-			const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
-			return this.$buefy.toast.open(response.message);
+		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 linkOptionsChanged(link) {
-			const response = await this.$axios.$post(`album/link/edit`,
-				{
-					identifier: link.identifier,
-					enableDownload: link.enableDownload,
-					enabled: link.enabled
-				});
-			this.$buefy.toast.open(response.message);
+		async deleteAlbumLink(id) {
+			try {
+				const response = await this.deleteAlbumLinkAction(id);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} 
 		},
-		async createLink(album) {
-			album.isCreatingLink = true;
-			// Since we actually want to change the state even if the call fails, use a try catch
+		async createLink(albumId) {
+			this.isCreatingLink = true;
 			try {
-				const response = await this.$axios.$post(`album/link/new`,
-					{ albumId: album.id });
-				this.$buefy.toast.open(response.message);
-				album.links.push({
-					identifier: response.identifier,
-					views: 0,
-					enabled: true,
-					enableDownload: true,
-					expiresAt: null
-				});
-			} catch (error) {
-				//
+				const response = await this.createLinkAction(albumId);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
 			} finally {
-				album.isCreatingLink = false;
+				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 });
+			} 
 		}
 	}
 };
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 4d23d6c..28e434a 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -14,7 +14,9 @@
 			<h4>
 				<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
 			</h4>
-			<span>Updated <timeago :since="album.editedAt" /></span>
+			<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">
@@ -40,7 +42,7 @@
 		</div>
 
 		<AlbumDetails v-if="isExpanded"
-			:details="getDetails"
+			:details="getDetails(album.id)"
 			:albumId="album.id" />
 	</div>
 </template>
@@ -62,13 +64,10 @@ export default {
 	computed: {
 		...mapGetters({
 			isExpandedGetter: 'albums/isExpanded',
-			getDetailsGetter: 'albums/getDetails'
+			getDetails: 'albums/getDetails'
 		}),
 		isExpanded() {
 			return this.isExpandedGetter(this.album.id);
-		},
-		getDetails() {
-			return this.getDetailsGetter(this.album.id);
 		}
 	},
 	methods: {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index a06eabf..956dd28 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -29,12 +29,6 @@
 			<Waterfall v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<input v-if="enableSearch"
-					v-model="searchTerm"
-					type="text"
-					placeholder="Search..."
-					@input="search()"
-					@keyup.enter="search()">	
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
@@ -167,7 +161,7 @@
 				</template>
 				<template slot="footer">
 					<div class="has-text-right has-text-default">
-						{{ files.length }} files
+						Showing {{ files.length }} files ({{ total }} total)
 					</div>
 				</template>
 			</b-table>
@@ -213,6 +207,10 @@ export default {
 			type: Array,
 			default: () => []
 		},
+		total: {
+			type: Number,
+			default: 0
+		},
 		fixed: {
 			type: Boolean,
 			default: false
-- 
cgit v1.2.3


From 39ed9d336edb350bca5c2a7f35a60ff9edc527bd Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:52:40 +0300
Subject: feat: make the delete link button more reactive (loading state if
 deletion pending)

---
 src/site/components/album/AlbumDetails.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index b646cb0..f117f2f 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -30,7 +30,9 @@
 
 				<b-table-column field="enabled"
 					numeric>
-					<button class="button is-danger"
+					<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>
@@ -86,7 +88,8 @@ export default {
 	},
 	data() {
 		return {
-			isCreatingLink: false
+			isCreatingLink: false,
+			isDeletingLinks: [],
 		}
 	},
 	computed: mapState(['config']),
@@ -109,7 +112,7 @@ export default {
 			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) {
@@ -121,14 +124,17 @@ export default {
 				this.alert({ text: e.message, error: true });
 			} 
 		},
-		async deleteAlbumLink(id) {
+		async deleteAlbumLink(albumId, identifier) {
+			this.isDeletingLinks.push(identifier);
 			try {
-				const response = await this.deleteAlbumLinkAction(id);
+				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;
@@ -150,6 +156,9 @@ export default {
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
 			} 
+		},
+		isDeleting(identifier) {
+			return this.isDeletingLinks.indexOf(identifier) > -1;
 		}
 	}
 };
-- 
cgit v1.2.3


From 1e1f3fbb27976a34f53a4e8d250da34dad4e6c20 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 23:18:51 +0300
Subject: feat: experimental videos in grid

---
 src/site/components/grid/Grid.vue                  | 32 +++++++++++++------
 src/site/components/grid/waterfall/Waterfall.vue   |  2 +-
 .../components/grid/waterfall/WaterfallItem.vue    | 37 +++++++++++++++++-----
 3 files changed, 52 insertions(+), 19 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 956dd28..0fff307 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -32,6 +32,7 @@
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
+					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
 						<a :href="`${item.url}`"
@@ -42,7 +43,11 @@
 						</a>
 					</template>
 					<template v-else>
-						<img :src="item.thumb ? item.thumb : blank">
+						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
+							:src="item.thumb ? item.thumb : blank">
+						<video v-if="item.preview" autoplay loop>
+  							<source :src="item.preview" type="video/mp4" />
+						</video>
 						<span v-if="!item.thumb && item.name"
 							class="extension">{{ item.name.split('.').pop() }}</span>
 						<div v-if="!isPublic"
@@ -56,21 +61,20 @@
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
+							<b-tooltip label="Tags"
 								position="is-top">
 								<a class="btn"
-									@click="openAlbumModal(item)">
-									<i class="icon-interface-window" />
+									@click="manageTags(item)">
+									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<!--
-							<b-tooltip label="Tags"
+							<b-tooltip label="Albums"
 								position="is-top">
-								<a @click="manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
+								<a class="btn"
+									@click="openAlbumModal(item)">
+									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>
-							-->
+							</b-tooltip>							
 							<b-tooltip label="Delete"
 								position="is-top">
 								<a class="btn"
@@ -318,6 +322,9 @@ export default {
 			const response = await this.$axios.$get(`albums/dropdown`);
 			this.albums = response.albums;
 			this.$forceUpdate();
+		},
+		mouseOverTest() {
+			console.log('aaaaaa');
 		}
 	}
 };
@@ -385,6 +392,7 @@ export default {
 			&:nth-child(1), &:nth-child(3) {
 				justify-content: flex-end;
 			}
+
 			a {
 				width: 30px;
 				height: 30px;
@@ -429,6 +437,10 @@ export default {
 			text-align: left;
 		}
 	}
+
+	img.hidden {
+		display: none;
+	}
 </style>
 
 <style lang="scss">
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 8631ea5..af1bd72 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -170,7 +170,7 @@ export default {
 					return;
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += (child.height + this.gutterHeight);
+				offsetArr[position] += child.height + this.gutterHeight;
 				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a02ea1f..7c4d814 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,13 +1,15 @@
-<style>
+<style scoped>
 	.waterfall-item {
 		position: absolute;
 	}
 </style>
+
 <template>
 	<div class="waterfall-item">
 		<slot />
 	</div>
 </template>
+
 <script>
 import imagesLoaded from 'imagesloaded';
 export default {
@@ -20,6 +22,10 @@ export default {
 		width: {
 			type: Number,
 			default: 150
+		},
+		video: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -35,13 +41,28 @@ export default {
 		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;
-		});
+		if (this.video) {
+			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			const el = videoEl.elm;
+			console.log(videoEl);
+			console.log(el);
+			el.onloadeddata = () => {
+				console.log('loaded');
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = el.offsetHeight + 5;
+				this.itemWidth = el.offsetWidth;
+			}
+		} else {
+			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() {
-- 
cgit v1.2.3


From 766e74cc51138b32482f65f0f2647eb9d943103e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 5 Jul 2020 04:18:08 +0300
Subject: feat: add video preview on hover to dashboard and apply new linter
 rules to some of the files

---
 src/site/components/footer/Footer.vue              |  62 ++-
 src/site/components/grid/Grid.vue                  | 435 +++++++++++----------
 src/site/components/grid/waterfall/Waterfall.vue   |  56 +--
 .../components/grid/waterfall/WaterfallItem.vue    |  29 +-
 4 files changed, 313 insertions(+), 269 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 44e34f4..19d18f2 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,20 +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>
 							</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>
@@ -48,7 +68,10 @@
 		</div>
 	</footer>
 </template>
+
 <script>
+/* eslint-disable no-restricted-globals */
+
 import { mapState, mapGetters } from 'vuex';
 import { saveAs } from 'file-saver';
 
@@ -56,19 +79,21 @@ export default {
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
 		...mapState({
-			version: state => state.config.version
-		})
+			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",
@@ -77,10 +102,11 @@ export default {
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
-		}
-	}
+		},
+	},
 };
 </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 0fff307..d4fe067 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,18 +6,13 @@
 					<slot name="pagination" />
 				</div>
 			</div>
-			<div v-if="enableToolbar"
-				class="level-right toolbar">
+			<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">
+						<b-radio v-model="showList" name="name" :native-value="true">
 							List
 						</b-radio>
-						<b-radio v-model="showList"
-							name="name"
-							:native-value="false">
+						<b-radio v-model="showList" name="name" :native-value="false">
 							Grid
 						</b-radio>
 					</div>
@@ -26,66 +21,71 @@
 		</nav>
 
 		<template v-if="!showList">
-			<Waterfall v-if="showWaterfall"
+			<Waterfall
+				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<WaterfallItem v-for="(item, index) in gridFiles"
+				<WaterfallItem
+					v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
-					:video="!!item.preview"
 					move-class="item-move">
 					<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 v-if="!item.preview" :class="{'hidden': item.preview}" 
-							:src="item.thumb ? item.thumb : blank">
-						<video v-if="item.preview" autoplay loop>
-  							<source :src="item.preview" type="video/mp4" />
-						</video>
-						<span v-if="!item.thumb && item.name"
-							class="extension">{{ item.name.split('.').pop() }}</span>
-						<div v-if="!isPublic"
+						<img :src="item.thumb ? item.thumb : blank">
+						<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">
+							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="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags"
-								position="is-top">
-								<a class="btn"
-									@click="manageTags(item)">
+							<b-tooltip label="Tags" position="is-top">
+								<a class="btn" @click="manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(item)">
+							<b-tooltip label="Albums" position="is-top">
+								<a class="btn" @click="openAlbumModal(item)">
 									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>							
-							<b-tooltip label="Delete"
-								position="is-top">
-								<a class="btn"
-									@click="deleteFile(item, index)">
+							</b-tooltip>
+							<b-tooltip label="Delete" position="is-top">
+								<a class="btn" @click="deleteFile(item, index)">
 									<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">
+							<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" />
 								</nuxt-link>
@@ -96,58 +96,42 @@
 			</Waterfall>
 		</template>
 		<div v-else>
-			<b-table
-				:data="gridFiles || []"
-				:mobile-cards="true">
+			<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 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>
+						<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}`">
+								<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
 									{{ album.name }}
 								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">, </template>
+								<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>
+						<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)">
+						<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)">
+							<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">
+							<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>
@@ -170,21 +154,23 @@
 				</template>
 			</b-table>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive"
-			:width="640"
-			scroll="keep">
+		<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>
+						<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 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>
+									<b-checkbox
+										:value="isAlbumSelected(album.id)"
+										@input="albumCheckboxClicked($event, album.id)">
+										{{ album.name }}
+									</b-checkbox>
 								</div>
 							</div>
 						</div>
@@ -204,37 +190,37 @@ import WaterfallItem from './waterfall/WaterfallItem.vue';
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem
+		WaterfallItem,
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => []
+			default: () => [],
 		},
 		total: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		fixed: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		isPublic: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true
-		}
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -242,18 +228,20 @@ export default {
 			searchTerm: null,
 			showList: false,
 			albums: [],
+			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
 			filesOffsetWaterfall: 0,
 			filesOffsetEndWaterfall: 50,
-			filesPerPageWaterfall: 50
+			filesPerPageWaterfall: 50,
 		};
 	},
 	computed: {
 		...mapState({
-			user: state => state.auth.user
+			user: (state) => state.auth.user,
 		}),
 		blank() {
+			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
@@ -262,12 +250,7 @@ export default {
 	},
 	methods: {
 		async search() {
-			const data = await this.$search.do(this.searchTerm, [
-				'name',
-				'original',
-				'type',
-				'albums:name'
-			]);
+			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file, index) {
@@ -290,13 +273,13 @@ export default {
 						});
 					}
 					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;
+			if (!this.showingModalForFile) return false;
+			const found = this.showingModalForFile.albums.find((el) => el.id === id);
+			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
@@ -311,7 +294,7 @@ export default {
 		async albumCheckboxClicked(value, id) {
 			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
 				albumId: id,
-				fileId: this.showingModalForFile.id
+				fileId: this.showingModalForFile.id,
 			});
 			this.$buefy.toast.open(response.message);
 
@@ -319,134 +302,166 @@ export default {
 			this.$parent.getFiles();
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
+			const response = await this.$axios.$get('albums/dropdown');
 			this.albums = response.albums;
 			this.$forceUpdate();
 		},
-		mouseOverTest() {
-			console.log('aaaaaa');
-		}
-	}
+		mouseOver(id) {
+			console.log('in', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) return;
+			this.hoveredItems.push(id);
+			/// XXX: THIS IS NOT OK!
+			this.$nextTick(() => {
+				this.$refs.video.forEach((e) => e.play().catch(() => {}));
+			});
+		},
+		mouseOut(id) {
+			console.log('out', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
+		},
+		isHovered(id) {
+			return this.hoveredItems.includes(id);
+		},
+	},
 };
 </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;
-			}
+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 {
+		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;
 	}
+}
 
-	img.hidden {
-		display: none;
-	}
-</style>
+.hidden {
+	display: none;
+}
 
-<style lang="scss">
-	.waterfall-item:hover {
-		div.actions {
-			opacity: 1
-		}
+.waterfall-item:hover {
+	div.actions {
+		opacity: 1;
 	}
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index af1bd72..cccc3ac 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -9,8 +9,6 @@
 	</div>
 </template>
 <script>
-// import {quickSort, getMinIndex, _, sum} from './util'
-
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -25,10 +23,10 @@ const quickSort = (arr, type) => {
 			right.push(arr[i]);
 		}
 	}
-	return quickSort(left, type).concat(povis, quickSort(right, type))
+	return quickSort(left, type).concat(povis, quickSort(right, type));
 };
 
-const getMinIndex = arr => {
+const getMinIndex = (arr) => {
 	let pos = 0;
 	for (let i = 0; i < arr.length; i++) {
 		if (arr[pos] > arr[i]) {
@@ -44,49 +42,53 @@ const _ = {
 	},
 	off(el, type, func, capture = false) {
 		el.removeEventListener(type, func, capture);
-	}
+	},
 };
 
-const sum = arr => arr.reduce((sum, val) => sum + val);
+const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
+
 export default {
 	name: 'Waterfall',
 	props: {
 		gutterWidth: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		gutterHeight: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		resizable: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		align: {
 			type: String,
-			default: 'center'
+			default: 'center',
 		},
 		fixWidth: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		minCol: {
 			type: Number,
-			default: 1
+			default: 1,
 		},
 		maxCol: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		percent: {
-			type: Array
-		}
+			type: Array,
+			default: null,
+		},
 	},
 	data() {
 		return {
 			timer: null,
 			colNum: 0,
 			lastWidth: 0,
-			percentWidthArr: []
+			percentWidthArr: [],
 		};
 	},
 	created() {
@@ -105,16 +107,16 @@ export default {
 	},
 	methods: {
 		calulate(arr) {
-			let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
+			const 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.percentWidthArr = this.percent.map((value) => (value / total) * pageWidth);
 				this.lastWidth = 0;
 			// 正常布局计算
 			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth));
+				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth), 10);
 				if (this.minCol && this.colNum < this.minCol) {
 					this.colNum = this.minCol;
 					this.lastWidth = 0;
@@ -136,14 +138,14 @@ export default {
 		render() {
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map(child => child.getMeta());
+			childArr = this.$children.map((child) => child.getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
-			this.calulate(childArr[0])
-			let offsetArr = Array(this.colNum).fill(0);
+			this.calulate(childArr[0]);
+			const offsetArr = Array(this.colNum).fill(0);
 			// 渲染
-			childArr.forEach(child => {
-				let position = getMinIndex(offsetArr);
+			childArr.forEach((child) => {
+				const position = getMinIndex(offsetArr);
 				// 百分比布局渲染
 				if (this.percent) {
 					let left = 0;
@@ -171,10 +173,10 @@ export default {
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
 				offsetArr[position] += child.height + this.gutterHeight;
-				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
+				this.$el.style.height = `${Math.max(...offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 7c4d814..2a5c69a 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -12,26 +12,27 @@
 
 <script>
 import imagesLoaded from 'imagesloaded';
+
 export default {
 	name: 'WaterfallItem',
 	props: {
 		order: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		video: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return {
 			itemWidth: 0,
-			height: 0
+			height: 0,
 		};
 	},
 	created() {
@@ -42,18 +43,18 @@ export default {
 		this.$el.style.width = `${this.width}px`;
 		this.emit();
 		if (this.video) {
-			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			// find first video object
+			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
 			const el = videoEl.elm;
-			console.log(videoEl);
-			console.log(el);
+
+			// add event listener for video loaded
 			el.onloadeddata = () => {
-				console.log('loaded');
 				this.$el.style.left = '-9999px';
 				this.$el.style.top = '-9999px';
 				this.$el.style.display = 'block';
 				this.height = el.offsetHeight + 5;
 				this.itemWidth = el.offsetWidth;
-			}
+			};
 		} else {
 			imagesLoaded(this.$el, () => {
 				this.$el.style.left = '-9999px';
@@ -73,9 +74,9 @@ export default {
 				el: this.$el,
 				height: this.height,
 				width: this.itemWidth,
-				order: this.order
+				order: this.order,
 			};
-		}
-	}
-}
+		},
+	},
+};
 </script>
-- 
cgit v1.2.3


From fb0bc57542a44dcc94149f393d8a4ff0c2e7902b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:02:59 +0300
Subject: feat: try fixing THE SHITTY WATERFALL

---
 src/site/components/grid/Grid.vue                  | 28 +++++--------
 src/site/components/grid/waterfall/Waterfall.vue   | 47 +++++++++++++++++-----
 .../components/grid/waterfall/WaterfallItem.vue    | 12 +++---
 src/site/components/imageInfo/ImageInfo.vue        |  0
 4 files changed, 54 insertions(+), 33 deletions(-)
 create mode 100644 src/site/components/imageInfo/ImageInfo.vue

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d4fe067..e6a8c64 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -24,12 +24,10 @@
 			<Waterfall
 				v-if="showWaterfall"
 				:gutterWidth="10"
-				:gutterHeight="4">
-				<WaterfallItem
-					v-for="(item, index) in gridFiles"
-					:key="item.id"
-					:width="width"
-					move-class="item-move">
+				:gutterHeight="4"
+				:itemWidth="width"
+				:items="gridFiles">
+				<template v-slot="{item}">
 					<template v-if="isPublic">
 						<a
 							:href="`${item.url}`"
@@ -81,7 +79,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
-								<a class="btn" @click="deleteFile(item, index)">
+								<a class="btn" @click="deleteFile(item)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
@@ -92,7 +90,7 @@
 							</b-tooltip>
 						</div>
 					</template>
-				</WaterfallItem>
+				</template>
 			</Waterfall>
 		</template>
 		<div v-else>
@@ -185,12 +183,10 @@
 import { mapState } from 'vuex';
 
 import Waterfall from './waterfall/Waterfall.vue';
-import WaterfallItem from './waterfall/WaterfallItem.vue';
 
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem,
 	},
 	props: {
 		files: {
@@ -253,13 +249,13 @@ export default {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
-		deleteFile(file, index) {
-			this.$buefy.dialog.confirm({
+		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) {
@@ -274,7 +270,7 @@ export default {
 					}
 					return this.$buefy.toast.open(response.message);
 				},
-			});
+			}); */
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -311,10 +307,6 @@ export default {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
-			/// XXX: THIS IS NOT OK!
-			this.$nextTick(() => {
-				this.$refs.video.forEach((e) => e.play().catch(() => {}));
-			});
 		},
 		mouseOut(id) {
 			console.log('out', id);
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index cccc3ac..a83a275 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,14 +1,14 @@
-<style>
-	.waterfall {
-		position: relative;
-	}
-</style>
 <template>
 	<div class="waterfall">
-		<slot />
+		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+			<slot :item="item" />
+		</WaterfallItem>
 	</div>
 </template>
+
 <script>
+import WaterfallItem from './WaterfallItem.vue';
+
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -49,6 +49,9 @@ const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
 
 export default {
 	name: 'Waterfall',
+	components: {
+		WaterfallItem,
+	},
 	props: {
 		gutterWidth: {
 			type: Number,
@@ -82,6 +85,14 @@ export default {
 			type: Array,
 			default: null,
 		},
+		itemWidth: {
+			type: Number,
+			default: 150,
+		},
+		items: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
@@ -89,15 +100,21 @@ export default {
 			colNum: 0,
 			lastWidth: 0,
 			percentWidthArr: [],
+			readyChildCount: 0,
 		};
 	},
+	watch: {
+		items() {
+			this.$nextTick(() => this.render('watch'));
+		},
+	},
 	created() {
 		this.$on('itemRender', () => {
 			if (this.timer) {
 				clearTimeout(this.timer);
 			}
 			this.timer = setTimeout(() => {
-				this.render();
+				this.render('created');
 			}, 0);
 		});
 	},
@@ -105,6 +122,10 @@ export default {
 		this.resizeHandle();
 		this.$watch('resizable', this.resizeHandle);
 	},
+	beforeDestroy() {
+		this.$off('itemRender');
+		_.off(window, 'resize', this.render);
+	},
 	methods: {
 		calulate(arr) {
 			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
@@ -135,10 +156,12 @@ export default {
 				_.off(window, 'resize', this.render, false);
 			}
 		},
-		render() {
+		render(context) {
+			console.log(context);
+			if (!this.items) return;
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map((child) => child.getMeta());
+			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
 			this.calulate(childArr[0]);
@@ -180,3 +203,9 @@ export default {
 	},
 };
 </script>
+
+<style>
+	.waterfall {
+		position: relative;
+	}
+</style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 2a5c69a..a49c58c 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,9 +1,3 @@
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-
 <template>
 	<div class="waterfall-item">
 		<slot />
@@ -80,3 +74,9 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+	.waterfall-item {
+		position: absolute;
+	}
+</style>
diff --git a/src/site/components/imageInfo/ImageInfo.vue b/src/site/components/imageInfo/ImageInfo.vue
new file mode 100644
index 0000000..e69de29
-- 
cgit v1.2.3


From 5d61b4d000a114857e4519be25c5834f510d450f Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:50:03 +0300
Subject: feat: refactor waterfall to be more efficient

---
 src/site/components/grid/Grid.vue                  |   5 +
 src/site/components/grid/waterfall/Waterfall.vue   | 266 ++++++++-------------
 .../components/grid/waterfall/WaterfallItem.vue    |  72 ------
 3 files changed, 99 insertions(+), 244 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index e6a8c64..f98108e 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -25,6 +25,7 @@
 				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
+				:options="{fitWidth: true}"
 				:itemWidth="width"
 				:items="gridFiles">
 				<template v-slot="{item}">
@@ -451,6 +452,10 @@ div.actions {
 	display: none;
 }
 
+.waterfall {
+	margin: 0 auto;
+}
+
 .waterfall-item:hover {
 	div.actions {
 		opacity: 1;
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index a83a275..79a330a 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,51 +1,20 @@
 <template>
-	<div class="waterfall">
-		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+	<div ref="waterfall" class="waterfall">
+		<WaterfallItem
+			v-for="(item, index) in items"
+			:key="item.id"
+			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
+			:width="itemWidth">
 			<slot :item="item" />
 		</WaterfallItem>
 	</div>
 </template>
-
 <script>
 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 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((acc, val) => acc + val, 0);
+const isBrowser = typeof window !== 'undefined';
+const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
+const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
 export default {
 	name: 'Waterfall',
@@ -53,159 +22,112 @@ export default {
 		WaterfallItem,
 	},
 	props: {
-		gutterWidth: {
-			type: Number,
-			default: 0,
-		},
-		gutterHeight: {
-			type: Number,
-			default: 0,
-		},
-		resizable: {
-			type: Boolean,
-			default: true,
-		},
-		align: {
-			type: String,
-			default: 'center',
-		},
-		fixWidth: {
-			type: Number,
-			default: 0,
-		},
-		minCol: {
-			type: Number,
-			default: 1,
-		},
-		maxCol: {
-			type: Number,
-			default: 0,
+		options: {
+			type: Object,
+			default: () => {},
 		},
-		percent: {
+		items: {
 			type: Array,
-			default: null,
+			default: () => [],
 		},
 		itemWidth: {
 			type: Number,
 			default: 150,
 		},
-		items: {
-			type: Array,
-			default: () => [],
+		gutterWidth: {
+			type: Number,
+			default: 10,
 		},
-	},
-	data() {
-		return {
-			timer: null,
-			colNum: 0,
-			lastWidth: 0,
-			percentWidthArr: [],
-			readyChildCount: 0,
-		};
-	},
-	watch: {
-		items() {
-			this.$nextTick(() => this.render('watch'));
+		gutterHeight: {
+			type: Number,
+			default: 4,
 		},
 	},
-	created() {
-		this.$on('itemRender', () => {
-			if (this.timer) {
-				clearTimeout(this.timer);
-			}
-			this.timer = setTimeout(() => {
-				this.render('created');
-			}, 0);
-		});
-	},
 	mounted() {
-		this.resizeHandle();
-		this.$watch('resizable', this.resizeHandle);
+		this.initializeMasonry();
+		this.imagesLoaded();
+	},
+	updated() {
+		this.performLayout();
+		this.imagesLoaded();
 	},
-	beforeDestroy() {
-		this.$off('itemRender');
-		_.off(window, 'resize', this.render);
+	unmounted() {
+		this.masonry.destroy();
 	},
 	methods: {
-		calulate(arr) {
-			const 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), 10);
-				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(context) {
-			console.log(context);
-			if (!this.items) return;
-			// 重新排序
-			let childArr = [];
-			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
-			childArr = quickSort(childArr, 'order');
-			// 计算列数
-			this.calulate(childArr[0]);
-			const offsetArr = Array(this.colNum).fill(0);
-			// 渲染
-			childArr.forEach((child) => {
-				const 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`;
-					}
-				}
-				if (child.height === 0) {
-					return;
-				}
-				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += child.height + this.gutterHeight;
-				this.$el.style.height = `${Math.max(...offsetArr)}px`;
-			});
-			this.$emit('rendered', this);
+		initializeMasonry() {
+			if (!this.masonry) {
+				this.masonry = new Masonry(
+					this.$refs.waterfall,
+					{
+						columnWidth: this.itemWidth,
+						gutter: this.gutterWidth,
+						...this.options,
+					},
+				);
+				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>
-	.waterfall {
-		position: relative;
-	}
+<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 a49c58c..c5cade1 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -3,80 +3,8 @@
 		<slot />
 	</div>
 </template>
-
 <script>
-import imagesLoaded from 'imagesloaded';
-
 export default {
 	name: 'WaterfallItem',
-	props: {
-		order: {
-			type: Number,
-			default: 0,
-		},
-		width: {
-			type: Number,
-			default: 150,
-		},
-		video: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	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();
-		if (this.video) {
-			// find first video object
-			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
-			const el = videoEl.elm;
-
-			// add event listener for video loaded
-			el.onloadeddata = () => {
-				this.$el.style.left = '-9999px';
-				this.$el.style.top = '-9999px';
-				this.$el.style.display = 'block';
-				this.height = el.offsetHeight + 5;
-				this.itemWidth = el.offsetWidth;
-			};
-		} else {
-			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,
-			};
-		},
-	},
 };
 </script>
-
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-- 
cgit v1.2.3


From 1a8b6602e094289a4f477c33e432e0f5e1587b45 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:13:51 +0300
Subject: refactor: change uploader component to use vuex

---
 src/site/components/uploader/Uploader.vue | 74 ++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 32 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 1b03ff8..c7be372 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
+			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() {
@@ -96,7 +104,7 @@ export default {
 		},
 		selectedAlbum() {
 			this.updateDropzoneConfig();
-		}
+		},
 	},
 	mounted() {
 		this.dropzoneOptions = {
@@ -119,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' }
+			headers: { Accept: 'application/vnd.lolisafe.json' },
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -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();
 		},
 
@@ -143,14 +154,14 @@ export default {
 			this.$refs.el.setOption('headers', {
 				Accept: 'application/vnd.lolisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
-				albumId: this.selectedAlbum ? this.selectedAlbum : null
+				albumId: this.selectedAlbum ? this.selectedAlbum : null,
 			});
 		},
 
 		/*
 			Dropzone stuff
 		*/
-		dropzoneFilesAdded(files) {
+		dropzoneFilesAdded() {
 			this.alreadyAddedFiles = true;
 		},
 		dropzoneSuccess(file, response) {
@@ -159,7 +170,7 @@ export default {
 		dropzoneError(file, message, xhr) {
 			this.$store.dispatch('alert', {
 				text: 'There was an error uploading this file. Check the console.',
-				error: true
+				error: true,
 			});
 			console.error(file, message, xhr);
 		},
@@ -170,12 +181,11 @@ export default {
 					original: file.name,
 					size: file.size,
 					type: file.type,
-					count: file.upload.totalChunkCount
-				}]
+					count: file.upload.totalChunkCount,
+				}],
 			});
 
 			this.processResult(file, data);
-			this.$forceUpdate();
 			return done();
 		},
 
@@ -194,8 +204,8 @@ export default {
 				this.$clipboard(response.url);
 			});
 			*/
-		}
-	}
+		},
+	},
 };
 </script>
 <style lang="scss" scoped>
-- 
cgit v1.2.3


From 15266378810d81704f8c9ece6ecf919526efacae Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:15:07 +0300
Subject: feat: add new sidebar with mdi icons and active reactivity

---
 src/site/components/navbar/Navbar.vue   |  14 +++--
 src/site/components/sidebar/Sidebar.vue | 107 ++++++++++++++++++--------------
 2 files changed, 70 insertions(+), 51 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 7fb2f22..fb78631 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,6 @@
 <template>
-	<b-navbar :class="{ isWhite }"
+	<b-navbar
+		:class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -71,24 +72,25 @@ export default {
 	props: {
 		isWhite: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return { hamburger: false };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config'])
+		...mapState(['config']),
 	},
 	methods: {
 		async logOut() {
 			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
-		}
-	}
+		},
+	},
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	nav.navbar {
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 3cb8b43..5394fc6 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,63 +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-user-alt" />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="settings" 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" disabled />
+			</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: mapState({
-		user: state => state.auth.user
-	})
+		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; }
-- 
cgit v1.2.3


From b519b6ccb469e874c783b995ddf0ab6fabdb5a0e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:37:50 +0300
Subject: refactor: refactor grid to use vuex for every action

---
 src/site/components/grid/Grid.vue | 83 ++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 35 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index f98108e..42dcc6b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -70,7 +70,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="manageTags(item)">
+								<a class="btn" @click="false && manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="index" class="album">
+							<div v-for="(album, index) in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -224,7 +224,6 @@ export default {
 			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
-			albums: [],
 			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
@@ -236,6 +235,8 @@ export default {
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
+			albums: (state) => state.albums.tinyDetails,
+			images: (state) => state.images,
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -245,33 +246,31 @@ export default {
 			return this.files;
 		},
 	},
+	created() {
+		this.getAlbums();
+	},
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file) {
-			this.$emit('delete', file);
-			/* this.$buefy.dialog.confirm({
+			// 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',
 				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 false;
@@ -279,38 +278,52 @@ export default {
 			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.filesAlbums[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);
-
-			// Not the prettiest solution to refetch on each click but it'll do for now
-			this.$parent.getFiles();
+		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,
+					});
+				}
+
+				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 });
+			}
 		},
 		mouseOver(id) {
-			console.log('in', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
 		},
 		mouseOut(id) {
-			console.log('out', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
 		},
-- 
cgit v1.2.3


From ad852de51a0d2dd5d29c08838d5a430c58849e74 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 04:00:12 +0300
Subject: chore: linter the entire project using the new rules

---
 src/site/components/album/AlbumDetails.vue   | 62 +++++++++++++++++-----------
 src/site/components/album/AlbumEntry.vue     | 41 +++++++++++-------
 src/site/components/grid/Grid.vue            |  4 +-
 src/site/components/loading/CubeShadow.vue   | 17 ++++----
 src/site/components/loading/Origami.vue      | 18 ++++----
 src/site/components/loading/PingPong.vue     | 26 ++++++------
 src/site/components/loading/RotateSquare.vue | 13 +++---
 src/site/components/uploader/Uploader.vue    |  1 +
 8 files changed, 106 insertions(+), 76 deletions(-)

(limited to 'src/site/components')

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) {
-- 
cgit v1.2.3


From 0f66d807035d3e32a66c7dc9bf55fb3be99aedac Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 10 Jul 2020 01:13:51 +0300
Subject: refactor: finish refactoring all the components to use vuex

---
 src/site/components/grid/Grid.vue       | 2 +-
 src/site/components/sidebar/Sidebar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 84c0b11..90c196b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -287,7 +287,7 @@ export default {
 			} catch (e) {
 				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 			}
-			this.showingModalForFile.albums = this.images.filesAlbums[id];
+			this.showingModalForFile.albums = this.images.fileAlbumsMap[id];
 
 			this.isAlbumsModalActive = true;
 		},
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 5394fc6..d586122 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -28,7 +28,7 @@
 					<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" disabled />
+				<b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact />
 			</b-menu-item>
 			<b-menu-item
 				class="item"
-- 
cgit v1.2.3


From 5e07436f0d4ce0b22f37bf7c8c05ac467537a7fa Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 18 Jul 2020 04:45:58 +0900
Subject: Add logout button

---
 src/site/components/navbar/Navbar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 0b98af0..48dfeb1 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -45,6 +45,12 @@
 						exact>
 						Account
 					</router-link>
+					<router-link
+						to="/"
+						class="navbar-item no-active"
+						@click.native="logOut">
+						Logout
+					</router-link>
 				</template>
 				<template v-else>
 					<router-link
@@ -79,7 +85,7 @@ export default {
 	},
 	methods: {
 		logOut() {
-			this.$emit('logout');
+			this.$store.dispatch('logout');
 		}
 	}
 };
-- 
cgit v1.2.3


From 609ff7ceb4c1d452db3f7d56a89305090ecd467a Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sat, 18 Jul 2020 04:47:24 +0900
Subject: Update displaying thumbnails of unsupported file types

---
 src/site/components/grid/Grid.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index da9b26c..d0a5ea3 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -96,7 +96,7 @@
 			<button
 				v-if="moreFiles"
 				class="button is-primary"
-				@click="loadMoreFilesWaterfall">Load more</button>
+				@click="loadMoreFiles">Load more</button>
 		</template>
 		<div v-else>
 			<b-table
@@ -172,6 +172,10 @@
 					</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"
@@ -240,9 +244,9 @@ export default {
 			albums: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
-			filesOffsetWaterfall: 0,
-			filesOffsetEndWaterfall: 50,
-			filesPerPageWaterfall: 50
+			filesOffset: 0,
+			filesOffsetEnd: 50,
+			filesPerPage: 50
 		};
 	},
 	computed: {
@@ -250,18 +254,18 @@ export default {
 			return this.$store.state.user;
 		},
 		blank() {
-			return require('@/assets/images/blank.png');
+			return require('@/assets/images/blank2.jpg');
 		},
 		gridFiles() {
-			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+			return this.files.slice(this.filesOffset, this.filesOffsetEnd);
 		},
 		moreFiles() {
-			return this.files.length > this.filesOffsetEndWaterfall;
+			return this.files.length > this.filesOffsetEnd;
 		}
 	},
 	methods: {
-		loadMoreFilesWaterfall() {
-			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
+		loadMoreFiles() {
+			this.filesOffsetEnd = this.filesOffsetEnd + this.filesPerPage;
 		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
-- 
cgit v1.2.3


From c93ddb09008c45942544b13bbb03319c367f9cd8 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 19 Jul 2020 22:27:11 +0300
Subject: feat: Start working on a new album/tags/image info modal

---
 src/site/components/grid/Grid.vue             |  32 ++++-
 src/site/components/image-modal/ImageInfo.vue | 179 ++++++++++++++++++++++++++
 src/site/components/imageInfo/ImageInfo.vue   |   0
 3 files changed, 207 insertions(+), 4 deletions(-)
 create mode 100644 src/site/components/image-modal/ImageInfo.vue
 delete mode 100644 src/site/components/imageInfo/ImageInfo.vue

(limited to 'src/site/components')

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
-- 
cgit v1.2.3


From 18bb451f793677a5bbfdc2c14128bae33c66dfde Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 20 Jul 2020 23:01:45 +0300
Subject: feat: implement all-in-one file detail viewer, tag editor and album
 selection modal

---
 src/site/components/grid/Grid.vue                |  71 +++++++---------
 src/site/components/grid/waterfall/Waterfall.vue |   3 +-
 src/site/components/image-modal/AlbumInfo.vue    |  73 ++++++++++++++++
 src/site/components/image-modal/ImageInfo.vue    |  61 ++++++++++----
 src/site/components/image-modal/TagInfo.vue      | 103 +++++++++++++++++++++++
 5 files changed, 252 insertions(+), 59 deletions(-)
 create mode 100644 src/site/components/image-modal/AlbumInfo.vue
 create mode 100644 src/site/components/image-modal/TagInfo.vue

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1e427fc..d29160f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,6 +6,7 @@
 					<slot name="pagination" />
 				</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">
@@ -66,27 +67,22 @@
 							@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="icon-web-code" />
+									<i class="mdi mdi-open-in-new" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="false && manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(item)">
-									<i class="icon-interface-window" />
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
 								<a class="btn" @click="deleteFile(item)">
-									<i class="icon-editorial-trash-a-l" />
+									<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/${item.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</div>
@@ -120,19 +116,19 @@
 						</b-table-column>
 
 						<b-table-column field="purge" centered>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(props.row)">
-									<i class="icon-interface-window" />
+									<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="icon-editorial-trash-a-l" />
+									<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="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</b-table-column>
@@ -159,33 +155,10 @@
 				Load more
 			</button>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive" scroll="keep">
-			<ImageInfo :file="modalData.file" />
+
+		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
+			<ImageInfo :file="modalData.file" :albums="modalData.albums" :tags="modalData.tags" />
 		</b-modal>
-		<!-- <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 in albums" :key="album.id" 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> -->
 	</div>
 </template>
 
@@ -263,7 +236,9 @@ export default {
 		},
 	},
 	created() {
+		// TODO: Create a middleware for this
 		this.getAlbums();
+		this.getTags();
 	},
 	methods: {
 		async search() {
@@ -348,6 +323,13 @@ export default {
 
 			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;
@@ -504,4 +486,13 @@ 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>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 79a330a..762cbbd 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="waterfall" class="waterfall">
 		<WaterfallItem
-			v-for="(item, index) in items"
+			v-for="item in items"
 			:key="item.id"
 			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
 			:width="itemWidth">
@@ -13,6 +13,7 @@
 import WaterfallItem from './WaterfallItem.vue';
 
 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;
 
diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
new file mode 100644
index 0000000..9d57e55
--- /dev/null
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -0,0 +1,73 @@
+<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 albums"
+			: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: () => [],
+		},
+	},
+	data() {
+		return {
+			selectedOptions: this.imageAlbums.map((e) => e.id),
+		};
+	},
+	computed: {
+		...mapState({
+			albums: (state) => state.albums.tinyDetails,
+		}),
+	},
+	methods: {
+		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
index c9dba1a..c3f0041 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -1,10 +1,13 @@
 <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 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 is-one-third">
+			<div class="column data-col is-one-third">
 				<div class="sticky">
 					<div class="divider is-lolisafe has-text-light">
 						File information
@@ -90,21 +93,16 @@
 							<span class="fake-input"><timeago :since="file.createdAt" /></span>
 						</div>
 					</b-field>
+
 					<div class="divider is-lolisafe has-text-light">
-						Albums
+						Tags
 					</div>
+					<Taginfo :imageId="file.id" :imageTags="tags" />
 
 					<div class="divider is-lolisafe has-text-light">
-						Tags
+						Albums
 					</div>
-					<b-field label="Add some tags">
-						<b-taginput
-							v-model="tags"
-							class="lolisafe"
-							ellipsis
-							icon="label"
-							placeholder="Add a tag" />
-					</b-field>
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" />
 				</div>
 			</div>
 		</div>
@@ -114,17 +112,27 @@
 <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: () => ({}),
 		},
-	},
-	data() {
-		return {
-			tags: [],
-		};
+		albums: {
+			type: Array,
+			default: () => ([]),
+		},
+		tags: {
+			type: Array,
+			default: () => ([]),
+		},
 	},
 	computed: mapState(['images']),
 	methods: {
@@ -139,6 +147,9 @@ export default {
 
 			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
 		},
+		isVideo(type) {
+			return type.startsWith('video');
+		},
 	},
 };
 </script>
@@ -176,4 +187,18 @@ export default {
 .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;
+	}
+}
 </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..2054e6a
--- /dev/null
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -0,0 +1,103 @@
+<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: hsl(0, 0%, 100%);
+
+		.dropdown-item {
+			color: hsl(0, 0%, 29%);
+
+			&:hover {
+				color: hsl(0, 0%, 4%);
+				background-color: hsl(0, 0%, 90%);
+			}
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3


From 93478a334b526703797cd3d759a70c18e6c6bb5a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 21 Jul 2020 15:45:28 +0300
Subject: fix: make modal use full height on mobile

---
 src/site/components/grid/Grid.vue             | 14 ++++++++------
 src/site/components/image-modal/ImageInfo.vue |  3 +++
 2 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d29160f..7170709 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -148,12 +148,6 @@
 					</div>
 				</template>
 			</b-table>
-			<button
-				v-if="moreFiles"
-				class="button is-primary mt2"
-				@click="loadMoreFiles">
-				Load more
-			</button>
 		</div>
 
 		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
@@ -495,4 +489,12 @@ div.actions {
 i.mdi {
 	font-size: 16px;
 }
+
+.imageinfo-modal{
+	::v-deep .modal-content {
+		@media screen and (max-width: 768px) {
+			min-height: 100vh;
+		}
+	}
+}
 </style>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index c3f0041..485a8aa 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -200,5 +200,8 @@ export default {
 	@media screen and (min-width: 769px) {
 		padding-right: 1.5rem;
 	}
+	@media screen and (max-width: 769px) {
+		padding-bottom: 3rem;
+	}
 }
 </style>
-- 
cgit v1.2.3


From 1a4744de3cfe74524cd0415416fa9da0a322e86c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:12:24 +0300
Subject: feat: show selected albums first when modal is first opened

fix: change the color of the dropdown for tags to match the base theme
chore: pass props into some of the components instead of fetching from store inside of components
---
 src/site/components/image-modal/AlbumInfo.vue | 33 +++++++++++++++++++++------
 src/site/components/image-modal/ImageInfo.vue |  7 ++++--
 src/site/components/image-modal/TagInfo.vue   | 12 ++--------
 3 files changed, 33 insertions(+), 19 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
index 9d57e55..8974a11 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -13,12 +13,12 @@
 		</button>
 
 		<b-dropdown-item
-			v-for="album in albums"
+			v-for="album in orderedAlbums"
 			:key="album.id"
 			:value="album.id"
 			aria-role="listitem"
 			@click="handleClick(album.id)">
-			<span>{{ album. name }}</span>
+			<span>{{ album.name }}</span>
 		</b-dropdown-item>
 	</b-dropdown>
 </template>
@@ -37,18 +37,37 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		albums: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
-			selectedOptions: this.imageAlbums.map((e) => e.id),
+			selectedOptions: [],
+			orderedAlbums: [],
 		};
 	},
-	computed: {
-		...mapState({
-			albums: (state) => state.albums.tinyDetails,
-		}),
+	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);
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 485a8aa..0562e1f 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -102,7 +102,7 @@
 					<div class="divider is-lolisafe has-text-light">
 						Albums
 					</div>
-					<Albuminfo :imageId="file.id" :imageAlbums="albums" />
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" />
 				</div>
 			</div>
 		</div>
@@ -134,7 +134,10 @@ export default {
 			default: () => ([]),
 		},
 	},
-	computed: mapState(['images']),
+	computed: mapState({
+		images: (state) => state.images,
+		tinyDetails: (state) => state.albums.tinyDetails,
+	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
 			if (bytes === 0) return '0 Bytes';
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index 2054e6a..a337148 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -88,16 +88,8 @@ export default {
 
 .taginp {
 	::v-deep .dropdown-content {
-		background-color: hsl(0, 0%, 100%);
-
-		.dropdown-item {
-			color: hsl(0, 0%, 29%);
-
-			&:hover {
-				color: hsl(0, 0%, 4%);
-				background-color: hsl(0, 0%, 90%);
-			}
-		}
+		background-color: #323846;
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 	}
 }
 </style>
-- 
cgit v1.2.3


From 01c04298b0fdcd7165f5532de57e407a853c748b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:12:40 +0300
Subject: fix: add no-active class

---
 src/site/components/navbar/Navbar.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 0f82200..1b1f10e 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -137,4 +137,8 @@ export default {
 			}
 		}
 	}
+
+	.no-active {
+		text-decoration: none !important;
+	}
 </style>
-- 
cgit v1.2.3


From 279234a081e5ea772978732ae5d2e45d8adcd741 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:14:06 +0300
Subject: feat: add new search input

For now, it clones the autocomplete from buefy, untill a PR or resolution to the opened issue about not being able to manipulate how the suggestions are applied is found
---
 src/site/components/search-input/SearchInput.vue | 516 +++++++++++++++++++++++
 src/site/components/search/Search.vue            | 119 ++++++
 2 files changed, 635 insertions(+)
 create mode 100644 src/site/components/search-input/SearchInput.vue
 create mode 100644 src/site/components/search/Search.vue

(limited to 'src/site/components')

diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
new file mode 100644
index 0000000..abc433a
--- /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..57226a9
--- /dev/null
+++ b/src/site/components/search/Search.vue
@@ -0,0 +1,119 @@
+<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">
+					<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,
+	},
+	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': '',
+				},
+			],
+			filteredHints: [],
+		};
+	},
+	created() {
+		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
+			const lastWord = (qry.match(/("[^"]*")|[^;, ]+/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; }
+
+			// 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);
+		},
+		sanitizeQuery(qry) {
+			// \w+:\s+? to transform 'tag: 123' into 'tag:123'
+		},
+		onSubmit() {
+			this.$emit('search', this.query);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+	.search {
+		::v-deep .dropdown-content {
+			background-color: #323846;
+		}
+	}
+</style>
-- 
cgit v1.2.3


From 39e9941ded8de4e41048781daa80de0838c01c19 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 23 Jul 2020 04:08:31 +0300
Subject: feat: Add hiding to recommendations as a prop

fix: change some of the regexes to remove , and ; as separator support because the query parser doesn't understad them and I don't feel like dealing with all the edge cases introduces by it
---
 src/site/components/search/Search.vue | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 57226a9..72a5707 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -12,7 +12,8 @@
 					placeholder="Search"
 					type="search"
 					open-on-focus
-					@typing="handleTyping">
+					@typing="handleTyping"
+					@keydown.native.enter="onSubmit">
 					<template slot-scope="props">
 						<b>{{ props.option.name }}:</b>
 						<small>
@@ -37,6 +38,12 @@ export default {
 	components: {
 		SearchInput,
 	},
+	props: {
+		hiddenHints: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {
 			query: '',
@@ -66,11 +73,17 @@ export default {
 					'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: {
@@ -83,15 +96,19 @@ export default {
 		handleTyping(qry) {
 			qry = qry || '';
 			// get the last word or group of words
-			const lastWord = (qry.match(/("[^"]*")|[^;, ]+/g) || ['']).pop().toLowerCase();
+			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 (/:\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; }
+			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
@@ -100,11 +117,11 @@ export default {
 				.toLowerCase()
 				.indexOf(lastWord) === 0);
 		},
-		sanitizeQuery(qry) {
-			// \w+:\s+? to transform 'tag: 123' into 'tag:123'
-		},
-		onSubmit() {
-			this.$emit('search', this.query);
+		onSubmit(event) {
+			if (event.key === 'Enter') {
+				if (/:$/gi.test(this.query)) { return; }
+			}
+			this.$emit('search', this.query, event);
 		},
 	},
 };
-- 
cgit v1.2.3


From 151c360740aac5733759888220d91a1d3713b6e1 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 2 Oct 2020 22:16:34 +0300
Subject: feat: allow administrators to create custom links for albums

---
 src/site/components/album/AlbumDetails.vue | 58 +++++++++++++++++++++++++++++-
 src/site/components/sidebar/Sidebar.vue    |  2 +-
 2 files changed, 58 insertions(+), 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index b411f13..ac6eba5 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -58,7 +58,30 @@
 				<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"
@@ -107,13 +130,14 @@ export default {
 			isDeletingLinks: [],
 		};
 	},
-	computed: mapState(['config']),
+	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) {
@@ -172,6 +196,17 @@ export default {
 				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;
 		},
@@ -182,6 +217,11 @@ export default {
 <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;
@@ -208,4 +248,20 @@ export default {
 					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/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index d586122..2e8ca9e 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -22,7 +22,7 @@
 				tag="nuxt-link"
 				to="/dashboard/tags"
 				exact />
-			<b-menu-item icon="settings" expanded>
+			<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'" />
-- 
cgit v1.2.3


From 4a3fef2b9931266d40c1d9e88748fd2aa623dc79 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 12 Nov 2020 22:58:34 +0200
Subject: chore: update buefy to 0.9

---
 src/site/components/album/AlbumDetails.vue | 77 ++++++++++++++++--------------
 src/site/components/grid/Grid.vue          | 77 ++++++++++++++----------------
 2 files changed, 77 insertions(+), 77 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index ac6eba5..2d0bb5d 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -5,46 +5,49 @@
 		<b-table
 			:data="details.links || []"
 			:mobile-cards="true">
-			<template slot-scope="props">
-				<b-table-column
-					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="identifier"
+				label="Link"
+				centered>
+				<a
+					:href="`${config.URL}/a/${props.row.identifier}`"
+					target="_blank">
+					{{ props.row.identifier }}
+				</a>
+			</b-table-column>
 
-				<b-table-column
-					field="views"
-					label="Views"
-					centered>
-					{{ props.row.views }}
-				</b-table-column>
+			<b-table-column
+				v-slot="props"
+				field="views"
+				label="Views"
+				centered>
+				{{ props.row.views }}
+			</b-table-column>
 
-				<b-table-column
-					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="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>
 
-				<b-table-column
-					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>
 			<template slot="empty">
 				<div class="has-text-centered">
 					<i class="icon-misc-mood-sad" />
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 7170709..1fa3167 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -92,48 +92,45 @@
 		</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>
+				<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>
 
-							{{ props.row.username }}
-						</b-table-column>
+					{{ 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 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>
 
-						<b-table-column 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>
-				</template>
 				<template slot="empty">
 					<div class="has-text-centered">
 						<i class="icon-misc-mood-sad" />
@@ -226,7 +223,7 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files;
+			return (this.files || []).filter((v) => !v.hideFromList);
 		},
 	},
 	created() {
-- 
cgit v1.2.3


From 90001c2df56d58e69fd199a518ae7f3e4ed327fc Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 10:40:50 +0200
Subject: chore: remove trailing commas

---
 src/site/components/album/AlbumDetails.vue         | 22 ++++++-------
 src/site/components/album/AlbumEntry.vue           | 14 ++++-----
 src/site/components/footer/Footer.vue              |  8 ++---
 src/site/components/grid/Grid.vue                  | 36 +++++++++++-----------
 src/site/components/grid/waterfall/Waterfall.vue   | 26 ++++++++--------
 .../components/grid/waterfall/WaterfallItem.vue    |  2 +-
 src/site/components/home/links/Links.vue           | 29 ++++++++++++-----
 src/site/components/image-modal/AlbumInfo.vue      | 20 ++++++------
 src/site/components/image-modal/ImageInfo.vue      | 16 +++++-----
 src/site/components/image-modal/TagInfo.vue        | 16 +++++-----
 src/site/components/loading/CubeShadow.vue         | 14 ++++-----
 src/site/components/loading/Origami.vue            | 10 +++---
 src/site/components/loading/PingPong.vue           | 10 +++---
 src/site/components/loading/RotateSquare.vue       | 10 +++---
 src/site/components/navbar/Navbar.vue              | 10 +++---
 src/site/components/search-input/SearchInput.vue   | 22 ++++++-------
 src/site/components/search/Search.vue              | 26 ++++++++--------
 src/site/components/sidebar/Sidebar.vue            |  6 ++--
 src/site/components/uploader/Uploader.vue          | 22 ++++++-------
 19 files changed, 166 insertions(+), 153 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index 2d0bb5d..4067853 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -120,17 +120,17 @@ export default {
 	props: {
 		albumId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		details: {
 			type: Object,
-			default: () => ({}),
-		},
+			default: () => ({})
+		}
 	},
 	data() {
 		return {
 			isCreatingLink: false,
-			isDeletingLinks: [],
+			isDeletingLinks: []
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -141,20 +141,20 @@ export default {
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
 			createCustomLinkAction: 'albums/createCustomLink',
-			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) {
@@ -204,16 +204,16 @@ export default {
 				message: 'Custom link identifier',
 				inputAttrs: {
 					placeholder: '',
-					maxlength: 10,
+					maxlength: 10
 				},
 				trapFocus: true,
-				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value }),
+				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value })
 			});
 		},
 		isDeleting(identifier) {
 			return this.isDeletingLinks.indexOf(identifier) > -1;
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 2723b49..1e1b2cf 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -63,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) {
@@ -86,8 +86,8 @@ export default {
 				await this.$store.dispatch('albums/fetchDetails', album.id);
 			}
 			this.$store.commit('albums/toggleExpandedState', album.id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 19d18f2..b409cf5 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -81,8 +81,8 @@ export default {
 		...mapState({
 			version: (state) => state.config.version,
 			serviceName: (state) => state.config.serviceName,
-			token: (state) => state.auth.token,
-		}),
+			token: (state) => state.auth.token
+		})
 	},
 	methods: {
 		createShareXThing() {
@@ -102,8 +102,8 @@ export default {
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1fa3167..3a15335 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -162,37 +162,37 @@ import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 export default {
 	components: {
 		Waterfall,
-		ImageInfo,
+		ImageInfo
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		total: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		fixed: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		isPublic: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		width: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true,
+			default: true
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true,
-		},
+			default: true
+		}
 	},
 	data() {
 		return {
@@ -208,15 +208,15 @@ export default {
 			modalData: {
 				file: null,
 				tags: null,
-				albums: null,
-			},
+				albums: null
+			}
 		};
 	},
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
 			albums: (state) => state.albums.tinyDetails,
-			images: (state) => state.images,
+			images: (state) => state.images
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -224,7 +224,7 @@ export default {
 		},
 		gridFiles() {
 			return (this.files || []).filter((v) => !v.hideFromList);
-		},
+		}
 	},
 	created() {
 		// TODO: Create a middleware for this
@@ -251,7 +251,7 @@ export default {
 					} catch (e) {
 						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-				},
+				}
 			});
 		},
 		isAlbumSelected(id) {
@@ -279,12 +279,12 @@ export default {
 				if (add) {
 					response = await this.$store.dispatch('images/addToAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				} else {
 					response = await this.$store.dispatch('images/removeFromAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				}
 
@@ -332,8 +332,8 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 762cbbd..af2af3f 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -20,29 +20,29 @@ const imagesloaded = isBrowser ? require('imagesloaded') : null;
 export default {
 	name: 'Waterfall',
 	components: {
-		WaterfallItem,
+		WaterfallItem
 	},
 	props: {
 		options: {
 			type: Object,
-			default: () => {},
+			default: () => {}
 		},
 		items: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		itemWidth: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		gutterWidth: {
 			type: Number,
-			default: 10,
+			default: 10
 		},
 		gutterHeight: {
 			type: Number,
-			default: 4,
-		},
+			default: 4
+		}
 	},
 	mounted() {
 		this.initializeMasonry();
@@ -62,7 +62,7 @@ export default {
 				node,
 				() => {
 					this.masonry.layout();
-				},
+				}
 			);
 		},
 		performLayout() {
@@ -101,7 +101,7 @@ export default {
 				removed,
 				appended,
 				prepended,
-				moved,
+				moved
 			};
 		},
 		initializeMasonry() {
@@ -111,8 +111,8 @@ export default {
 					{
 						columnWidth: this.itemWidth,
 						gutter: this.gutterWidth,
-						...this.options,
-					},
+						...this.options
+					}
 				);
 				this.domChildren = this.getNewDomChildren();
 			}
@@ -122,8 +122,8 @@ export default {
 			const children = this.options && this.options.itemSelector
 				? node.querySelectorAll(this.options.itemSelector) : node.children;
 			return Array.prototype.slice.call(children);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index c5cade1..2a18606 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -5,6 +5,6 @@
 </template>
 <script>
 export default {
-	name: 'WaterfallItem',
+	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
index 8974a11..17c375a 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -31,21 +31,21 @@ export default {
 	props: {
 		imageId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		imageAlbums: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		albums: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
 			selectedOptions: [],
-			orderedAlbums: [],
+			orderedAlbums: []
 		};
 	},
 	created() {
@@ -65,7 +65,7 @@ export default {
 						return selectedA ? -1 : 1;
 					}
 					return a.name.localeCompare(b.name);
-				},
+				}
 			);
 		},
 		isAlbumSelected(id) {
@@ -78,15 +78,15 @@ export default {
 			if (this.selectedOptions.indexOf(id) > -1) {
 				this.$handler.executeAction('images/addToAlbum', {
 					albumId: id,
-					fileId: this.imageId,
+					fileId: this.imageId
 				});
 			} else {
 				this.$handler.executeAction('images/removeFromAlbum', {
 					albumId: id,
-					fileId: this.imageId,
+					fileId: this.imageId
 				});
 			}
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 0562e1f..73b6339 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -118,25 +118,25 @@ import Taginfo from './TagInfo.vue';
 export default {
 	components: {
 		Taginfo,
-		Albuminfo,
+		Albuminfo
 	},
 	props: {
 		file: {
 			type: Object,
-			default: () => ({}),
+			default: () => ({})
 		},
 		albums: {
 			type: Array,
-			default: () => ([]),
+			default: () => ([])
 		},
 		tags: {
 			type: Array,
-			default: () => ([]),
-		},
+			default: () => ([])
+		}
 	},
 	computed: mapState({
 		images: (state) => state.images,
-		tinyDetails: (state) => state.albums.tinyDetails,
+		tinyDetails: (state) => state.albums.tinyDetails
 	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
@@ -152,8 +152,8 @@ export default {
 		},
 		isVideo(type) {
 			return type.startsWith('video');
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index a337148..59d01f5 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -23,24 +23,24 @@ export default {
 	props: {
 		imageId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		imageTags: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
-			filteredTags: [],
+			filteredTags: []
 		};
 	},
 	computed: {
 		...mapState({
-			tags: (state) => state.tags.tagsList,
+			tags: (state) => state.tags.tagsList
 		}),
 		selectedTags() { return this.imageTags.map((e) => e.name); },
-		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); },
+		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); }
 	},
 	methods: {
 		getFilteredTags(str) {
@@ -78,8 +78,8 @@ export default {
 		},
 		tagRemoved(tag) {
 			this.$handler.executeAction('images/removeTag', { fileId: this.imageId, tagName: tag });
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index bbfdb52..71b5da5 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -9,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() {
@@ -26,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 cd1c087..59c5d8f 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -20,8 +20,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px',
-		},
+			default: '40px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -31,10 +31,10 @@ export default {
 		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 d562e9f..c04ae72 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -19,8 +19,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px',
-		},
+			default: '60px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -30,10 +30,10 @@ export default {
 		styles() {
 			return {
 				width: this.size,
-				height: this.size,
+				height: this.size
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 089e01a..7bc9bb0 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -9,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/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 1b1f10e..22d41d4 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -73,22 +73,22 @@ export default {
 	props: {
 		isWhite: {
 			type: Boolean,
-			default: false,
-		},
+			default: false
+		}
 	},
 	data() {
 		return { hamburger: false };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config']),
+		...mapState(['config'])
 	},
 	methods: {
 		async logOut() {
 			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
index abc433a..1c5b983 100644
--- a/src/site/components/search-input/SearchInput.vue
+++ b/src/site/components/search-input/SearchInput.vue
@@ -90,11 +90,11 @@ export default {
 		value: [Number, String],
 		data: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		field: {
 			type: String,
-			default: 'value',
+			default: 'value'
 		},
 		keepFirst: Boolean,
 		clearOnSelect: Boolean,
@@ -106,12 +106,12 @@ export default {
 		maxHeight: [String, Number],
 		dropdownPosition: {
 			type: String,
-			default: 'auto',
+			default: 'auto'
 		},
 		iconRight: String,
 		iconRightClickable: Boolean,
 		appendToBody: Boolean,
-		customSelector: Function,
+		customSelector: Function
 	},
 	data() {
 		return {
@@ -125,7 +125,7 @@ export default {
 			style: {},
 			_isAutocomplete: true,
 			_elementRef: 'input',
-			_bodyEl: undefined, // Used to append to body
+			_bodyEl: undefined // Used to append to body
 		};
 	},
 	computed: {
@@ -202,9 +202,9 @@ export default {
 				// 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`),
+					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`)
 			};
-		},
+		}
 	},
 	watch: {
 		/**
@@ -258,7 +258,7 @@ export default {
 			if (this.keepFirst) {
 				this.selectFirstOption(value);
 			}
-		},
+		}
 	},
 	created() {
 		if (typeof window !== 'undefined') {
@@ -507,10 +507,10 @@ export default {
 					left: `${left}px`,
 					width: `${trigger.clientWidth}px`,
 					maxWidth: `${trigger.clientWidth}px`,
-					zIndex: '99',
+					zIndex: '99'
 				};
 			}
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 72a5707..778474c 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -36,13 +36,13 @@ import SearchInput from '~/components/search-input/SearchInput.vue';
 
 export default {
 	components: {
-		SearchInput,
+		SearchInput
 	},
 	props: {
 		hiddenHints: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
@@ -51,35 +51,35 @@ export default {
 				{
 					'name': 'tag',
 					'valueFormat': 'name',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'album',
 					'valueFormat': 'name',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'before',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'during',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'after',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'file',
 					'valueFormat': 'generated name',
-					'hint': '',
-				},
+					'hint': ''
+				}
 			],
-			filteredHints: [],
+			filteredHints: []
 		};
 	},
 	created() {
@@ -122,8 +122,8 @@ export default {
 				if (/:$/gi.test(this.query)) { return; }
 			}
 			this.$emit('search', this.query, event);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 2e8ca9e..e0c8fa2 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -48,7 +48,7 @@ import { mapState } from 'vuex';
 
 export default {
 	computed: mapState({
-		user: (state) => state.auth.user,
+		user: (state) => state.auth.user
 	}),
 	methods: {
 		isRouteActive(id) {
@@ -56,8 +56,8 @@ export default {
 				return true;
 			}
 			return false;
-		},
-	},
+		}
+	}
 };
 
 </script>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 7e2d446..2740bee 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -88,15 +88,15 @@ export default {
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
-			selectedAlbum: null,
+			selectedAlbum: null
 		};
 	},
 	computed: {
 		...mapState({
 			config: (state) => state.config,
-			albums: (state) => state.albums.tinyDetails,
+			albums: (state) => state.albums.tinyDetails
 		}),
-		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }),
+		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' })
 	},
 	watch: {
 		loggedIn() {
@@ -104,7 +104,7 @@ export default {
 		},
 		selectedAlbum() {
 			this.updateDropzoneConfig();
-		},
+		}
 	},
 	mounted() {
 		this.dropzoneOptions = {
@@ -127,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' },
+			headers: { Accept: 'application/vnd.lolisafe.json' }
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -154,7 +154,7 @@ export default {
 			this.$refs.el.setOption('headers', {
 				Accept: 'application/vnd.lolisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
-				albumId: this.selectedAlbum ? this.selectedAlbum : null,
+				albumId: this.selectedAlbum ? this.selectedAlbum : null
 			});
 		},
 
@@ -170,7 +170,7 @@ export default {
 		dropzoneError(file, message, xhr) {
 			this.$store.dispatch('alert', {
 				text: 'There was an error uploading this file. Check the console.',
-				error: true,
+				error: true
 			});
 			// eslint-disable-next-line no-console
 			console.error(file, message, xhr);
@@ -182,8 +182,8 @@ export default {
 					original: file.name,
 					size: file.size,
 					type: file.type,
-					count: file.upload.totalChunkCount,
-				}],
+					count: file.upload.totalChunkCount
+				}]
 			});
 
 			this.processResult(file, data);
@@ -205,8 +205,8 @@ export default {
 				this.$clipboard(response.url);
 			});
 			*/
-		},
-	},
+		}
+	}
 };
 </script>
 <style lang="scss" scoped>
-- 
cgit v1.2.3


From 587f7d69e80cfa1d94cc4730dc26834c389f574d Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 13:57:09 +0200
Subject: bug: fix showlist resetting itself every time the page is changed
 bug: fix store not commiting search results

---
 src/site/components/grid/Grid.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 3a15335..ea568f0 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -21,9 +21,8 @@
 			</div>
 		</nav>
 
-		<template v-if="!showList">
+		<template v-if="!images.showList">
 			<Waterfall
-				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
 				:options="{fitWidth: true}"
@@ -196,7 +195,6 @@ export default {
 	},
 	data() {
 		return {
-			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
 			hoveredItems: [],
@@ -226,10 +224,15 @@ export default {
 			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: {
 		async search() {
@@ -332,6 +335,9 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
+		},
+		displayTypeChange(showList) {
+			this.$store.commit('images/setShowList', showList);
 		}
 	}
 };
-- 
cgit v1.2.3


From fb2c27086f570fec60f4d52dcc9ca80e53186293 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Thu, 24 Dec 2020 23:45:16 +0900
Subject: Fix ESLint rules once and for all

---
 src/site/components/album/AlbumDetails.vue       | 12 ++---
 src/site/components/album/AlbumEntry.vue         |  6 +--
 src/site/components/footer/Footer.vue            |  8 ++--
 src/site/components/grid/Grid.vue                | 46 +++++++++---------
 src/site/components/grid/waterfall/Waterfall.vue | 41 ++++++++--------
 src/site/components/image-modal/AlbumInfo.vue    | 20 ++++----
 src/site/components/image-modal/ImageInfo.vue    | 21 +++++----
 src/site/components/image-modal/TagInfo.vue      | 16 +++----
 src/site/components/loading/CubeShadow.vue       | 12 ++---
 src/site/components/loading/Origami.vue          |  4 +-
 src/site/components/loading/PingPong.vue         |  4 +-
 src/site/components/loading/RotateSquare.vue     |  4 +-
 src/site/components/navbar/Navbar.vue            |  4 +-
 src/site/components/search-input/SearchInput.vue | 49 ++++++++++----------
 src/site/components/search/Search.vue            | 59 ++++++++++++++----------
 src/site/components/sidebar/Sidebar.vue          |  2 +-
 src/site/components/uploader/Uploader.vue        |  4 +-
 17 files changed, 159 insertions(+), 153 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index 4067853..f81e257 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -119,12 +119,12 @@ import { mapState, mapActions } from 'vuex';
 export default {
 	props: {
 		albumId: {
-			type: Number,
-			default: 0
+			'type': Number,
+			'default': 0
 		},
 		details: {
-			type: Object,
-			default: () => ({})
+			'type': Object,
+			'default': () => ({})
 		}
 	},
 	data() {
@@ -175,7 +175,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) {
@@ -207,7 +207,7 @@ export default {
 					maxlength: 10
 				},
 				trapFocus: true,
-				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value })
+				onConfirm: value => this.$handler.executeAction('albums/createCustomLink', { albumId, value })
 			});
 		},
 		isDeleting(identifier) {
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 1e1b2cf..18633c4 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -53,7 +53,7 @@
 		<AlbumDetails
 			v-if="isExpanded"
 			:details="getDetails(album.id)"
-			:albumId="album.id" />
+			:album-id="album.id" />
 	</div>
 </template>
 
@@ -67,8 +67,8 @@ export default {
 	},
 	props: {
 		album: {
-			type: Object,
-			default: () => ({})
+			'type': Object,
+			'default': () => ({})
 		}
 	},
 	computed: {
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index b409cf5..aa54dce 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -54,6 +54,8 @@
 							</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
@@ -79,9 +81,9 @@ export default {
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
 		...mapState({
-			version: (state) => state.config.version,
-			serviceName: (state) => state.config.serviceName,
-			token: (state) => state.auth.token
+			version: state => state.config.version,
+			serviceName: state => state.config.serviceName,
+			token: state => state.auth.token
 		})
 	},
 	methods: {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index ea568f0..0693c77 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -23,10 +23,10 @@
 
 		<template v-if="!images.showList">
 			<Waterfall
-				:gutterWidth="10"
-				:gutterHeight="4"
+				:gutter-width="10"
+				:gutter-height="4"
 				:options="{fitWidth: true}"
-				:itemWidth="width"
+				:item-width="width"
 				:items="gridFiles">
 				<template v-slot="{item}">
 					<template v-if="isPublic">
@@ -165,32 +165,32 @@ export default {
 	},
 	props: {
 		files: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		},
 		total: {
-			type: Number,
-			default: 0
+			'type': Number,
+			'default': 0
 		},
 		fixed: {
-			type: Boolean,
-			default: false
+			'type': Boolean,
+			'default': false
 		},
 		isPublic: {
-			type: Boolean,
-			default: false
+			'type': Boolean,
+			'default': false
 		},
 		width: {
-			type: Number,
-			default: 150
+			'type': Number,
+			'default': 150
 		},
 		enableSearch: {
-			type: Boolean,
-			default: true
+			'type': Boolean,
+			'default': true
 		},
 		enableToolbar: {
-			type: Boolean,
-			default: true
+			'type': Boolean,
+			'default': true
 		}
 	},
 	data() {
@@ -212,16 +212,16 @@ export default {
 	},
 	computed: {
 		...mapState({
-			user: (state) => state.auth.user,
-			albums: (state) => state.albums.tinyDetails,
-			images: (state) => state.images
+			user: state => state.auth.user,
+			albums: state => state.albums.tinyDetails,
+			images: state => state.images
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return (this.files || []).filter((v) => !v.hideFromList);
+			return (this.files || []).filter(v => !v.hideFromList);
 		}
 	},
 	watch: {
@@ -259,8 +259,8 @@ export default {
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
-			const found = this.showingModalForFile.albums.find((el) => el.id === id);
-			return !!(found && found.id);
+			const found = this.showingModalForFile.albums.find(el => el.id === id);
+			return Boolean(found && found.id);
 		},
 		async openAlbumModal(file) {
 			const { id } = file;
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index af2af3f..5a4c569 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -24,24 +24,24 @@ export default {
 	},
 	props: {
 		options: {
-			type: Object,
-			default: () => {}
+			'type': Object,
+			'default': () => {}
 		},
 		items: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		},
 		itemWidth: {
-			type: Number,
-			default: 150
+			'type': Number,
+			'default': 150
 		},
 		gutterWidth: {
-			type: Number,
-			default: 10
+			'type': Number,
+			'default': 10
 		},
 		gutterHeight: {
-			type: Number,
-			default: 4
+			'type': Number,
+			'default': 4
 		}
 	},
 	mounted() {
@@ -84,20 +84,20 @@ export default {
 			this.masonry.layout();
 		},
 		diffDomChildren() {
-			const oldChildren = this.domChildren.filter((element) => !!element.parentNode);
+			const oldChildren = this.domChildren.filter(element => Boolean(element.parentNode));
 			const newChildren = this.getNewDomChildren();
-			const removed = oldChildren.filter((oldChild) => !newChildren.includes(oldChild));
-			const domDiff = newChildren.filter((newChild) => !oldChildren.includes(newChild));
+			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));
+			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,
+				'old': oldChildren,
+				'new': newChildren,
 				removed,
 				appended,
 				prepended,
@@ -120,15 +120,10 @@ export default {
 		getNewDomChildren() {
 			const node = this.$refs.waterfall;
 			const children = this.options && this.options.itemSelector
-				? node.querySelectorAll(this.options.itemSelector) : node.children;
+				? 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/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
index 17c375a..8aeb02e 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -24,22 +24,20 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 export default {
 	name: 'Albuminfo',
 	props: {
 		imageId: {
-			type: Number,
-			default: 0
+			'type': Number,
+			'default': 0
 		},
 		imageAlbums: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		},
 		albums: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		}
 	},
 	data() {
@@ -52,7 +50,7 @@ export default {
 		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);
+		this.selectedOptions = this.imageAlbums.map(e => e.id);
 	},
 	methods: {
 		getOrderedAlbums() {
@@ -70,8 +68,8 @@ export default {
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
-			const found = this.showingModalForFile.albums.find((el) => el.id === id);
-			return !!(found && found.id);
+			const found = this.showingModalForFile.albums.find(el => el.id === id);
+			return Boolean(found && found.id);
 		},
 		async handleClick(id) {
 			// here the album should be already removed from the selected list
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 73b6339..07c87b5 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -97,12 +97,12 @@
 					<div class="divider is-lolisafe has-text-light">
 						Tags
 					</div>
-					<Taginfo :imageId="file.id" :imageTags="tags" />
+					<Taginfo :image-id="file.id" :image-tags="tags" />
 
 					<div class="divider is-lolisafe has-text-light">
 						Albums
 					</div>
-					<Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" />
+					<Albuminfo :image-id="file.id" :image-albums="albums" :albums="tinyDetails" />
 				</div>
 			</div>
 		</div>
@@ -122,21 +122,21 @@ export default {
 	},
 	props: {
 		file: {
-			type: Object,
-			default: () => ({})
+			'type': Object,
+			'default': () => ({})
 		},
 		albums: {
-			type: Array,
-			default: () => ([])
+			'type': Array,
+			'default': () => ([])
 		},
 		tags: {
-			type: Array,
-			default: () => ([])
+			'type': Array,
+			'default': () => ([])
 		}
 	},
 	computed: mapState({
-		images: (state) => state.images,
-		tinyDetails: (state) => state.albums.tinyDetails
+		images: state => state.images,
+		tinyDetails: state => state.albums.tinyDetails
 	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
@@ -148,6 +148,7 @@ export default {
 
 			const i = Math.floor(Math.log(bytes) / Math.log(k));
 
+			// eslint-disable-next-line no-mixed-operators
 			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
 		},
 		isVideo(type) {
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index 59d01f5..756a32d 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -22,12 +22,12 @@ export default {
 	name: 'Taginfo',
 	props: {
 		imageId: {
-			type: Number,
-			default: 0
+			'type': Number,
+			'default': 0
 		},
 		imageTags: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		}
 	},
 	data() {
@@ -37,14 +37,14 @@ export default {
 	},
 	computed: {
 		...mapState({
-			tags: (state) => state.tags.tagsList
+			tags: state => state.tags.tagsList
 		}),
-		selectedTags() { return this.imageTags.map((e) => e.name); },
-		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); }
+		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) => {
+			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;
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index 71b5da5..7aeed65 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -8,16 +8,16 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '60px'
+			'type': String,
+			'default': '60px'
 		},
 		background: {
-			type: String,
-			default: '#9C27B0'
+			'type': String,
+			'default': '#9C27B0'
 		},
 		duration: {
-			type: String,
-			default: '1.8s'
+			'type': String,
+			'default': '1.8s'
 		}
 	},
 	computed: {
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index 59c5d8f..1c7a4c3 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -19,8 +19,8 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '40px'
+			'type': String,
+			'default': '40px'
 		}
 	},
 	computed: {
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index c04ae72..bab33d5 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -18,8 +18,8 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '60px'
+			'type': String,
+			'default': '60px'
 		}
 	},
 	computed: {
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 7bc9bb0..b7967ec 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -8,8 +8,8 @@
 export default {
 	props: {
 		size: {
-			type: String,
-			default: '40px'
+			'type': String,
+			'default': '40px'
 		}
 	},
 	computed: {
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 22d41d4..c0b8668 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -72,8 +72,8 @@ import { mapState, mapGetters } from 'vuex';
 export default {
 	props: {
 		isWhite: {
-			type: Boolean,
-			default: false
+			'type': Boolean,
+			'default': false
 		}
 	},
 	data() {
diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
index 1c5b983..10728a0 100644
--- a/src/site/components/search-input/SearchInput.vue
+++ b/src/site/components/search-input/SearchInput.vue
@@ -89,12 +89,12 @@ export default {
 	props: {
 		value: [Number, String],
 		data: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		},
 		field: {
-			type: String,
-			default: 'value'
+			'type': String,
+			'default': 'value'
 		},
 		keepFirst: Boolean,
 		clearOnSelect: Boolean,
@@ -105,8 +105,8 @@ export default {
 		clearable: Boolean,
 		maxHeight: [String, Number],
 		dropdownPosition: {
-			type: String,
-			default: 'auto'
+			'type': String,
+			'default': 'auto'
 		},
 		iconRight: String,
 		iconRightClickable: Boolean,
@@ -159,25 +159,25 @@ export default {
          * Check if exists default slot
          */
 		hasDefaultSlot() {
-			return !!this.$scopedSlots.default;
+			return Boolean(this.$scopedSlots.default);
 		},
 		/**
          * Check if exists "empty" slot
          */
 		hasEmptySlot() {
-			return !!this.$slots.empty;
+			return Boolean(this.$slots.empty);
 		},
 		/**
          * Check if exists "header" slot
          */
 		hasHeaderSlot() {
-			return !!this.$slots.header;
+			return Boolean(this.$slots.header);
 		},
 		/**
          * Check if exists "footer" slot
          */
 		hasFooterSlot() {
-			return !!this.$slots.footer;
+			return Boolean(this.$slots.footer);
 		},
 		/**
          * Apply dropdownPosition property
@@ -202,7 +202,8 @@ export default {
 				// 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`)
+					? null
+					: (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`)
 			};
 		}
 	},
@@ -239,7 +240,7 @@ export default {
 			}
 			// Close dropdown if input is clear or else open it
 			if (this.hasFocus && (!this.openOnFocus || value)) {
-				this.isActive = !!value;
+				this.isActive = Boolean(value);
 			}
 		},
 		/**
@@ -378,8 +379,8 @@ export default {
          * reached it's end.
          */
 		checkIfReachedTheEndOfScroll(list) {
-			if (list.clientHeight !== list.scrollHeight
-                && list.scrollTop + list.clientHeight >= list.scrollHeight) {
+			if (list.clientHeight !== list.scrollHeight &&
+                list.scrollTop + list.clientHeight >= list.scrollHeight) {
 				this.$emit('infinite-scroll');
 			}
 		},
@@ -396,9 +397,9 @@ export default {
 				if (this.$refs.dropdown === undefined) return;
 				const rect = this.$refs.dropdown.getBoundingClientRect();
 				this.isListInViewportVertically = (
-					rect.top >= 0
-                    && rect.bottom <= (window.innerHeight
-                        || document.documentElement.clientHeight)
+					rect.top >= 0 &&
+                    rect.bottom <= (window.innerHeight ||
+                        document.documentElement.clientHeight)
 				);
 				if (this.appendToBody) {
 					this.updateAppendToBody();
@@ -425,9 +426,9 @@ export default {
 					list.scrollTop = element.offsetTop;
 				} else if (element.offsetTop >= visMax) {
 					list.scrollTop = (
-						element.offsetTop
-                        - list.clientHeight
-                        + element.clientHeight
+						element.offsetTop -
+                        list.clientHeight +
+                        element.clientHeight
 					);
 				}
 			} else {
@@ -487,7 +488,7 @@ export default {
 			if (dropdownMenu && trigger) {
 				// update wrapper dropdown
 				const root = this.$data._bodyEl;
-				root.classList.forEach((item) => root.classList.remove(item));
+				root.classList.forEach(item => root.classList.remove(item));
 				root.classList.add('autocomplete');
 				root.classList.add('control');
 				if (this.expandend) {
@@ -496,10 +497,10 @@ export default {
 				const rect = trigger.getBoundingClientRect();
 				let top = rect.top + window.scrollY;
 				const left = rect.left + window.scrollX;
-				if (!this.isOpenedTop) {
-					top += trigger.clientHeight;
-				} else {
+				if (this.isOpenedTop) {
 					top -= dropdownMenu.clientHeight;
+				} else {
+					top += trigger.clientHeight;
 				}
 				this.style = {
 					position: 'absolute',
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 778474c..2c4e3bc 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -6,7 +6,7 @@
 					ref="autocomplete"
 					v-model="query"
 					:data="filteredHints"
-					:customSelector="handleSelect"
+					:custom-selector="handleSelect"
 					field="name"
 					class="lolisafe-input search"
 					placeholder="Search"
@@ -40,8 +40,8 @@ export default {
 	},
 	props: {
 		hiddenHints: {
-			type: Array,
-			default: () => []
+			'type': Array,
+			'default': () => []
 		}
 	},
 	data() {
@@ -49,34 +49,34 @@ export default {
 			query: '',
 			hints: [
 				{
-					'name': 'tag',
-					'valueFormat': 'name',
-					'hint': ''
+					name: 'tag',
+					valueFormat: 'name',
+					hint: ''
 				},
 				{
-					'name': 'album',
-					'valueFormat': 'name',
-					'hint': ''
+					name: 'album',
+					valueFormat: 'name',
+					hint: ''
 				},
 				{
-					'name': 'before',
-					'valueFormat': 'specific date',
-					'hint': ''
+					name: 'before',
+					valueFormat: 'specific date',
+					hint: ''
 				},
 				{
-					'name': 'during',
-					'valueFormat': 'specific date',
-					'hint': ''
+					name: 'during',
+					valueFormat: 'specific date',
+					hint: ''
 				},
 				{
-					'name': 'after',
-					'valueFormat': 'specific date',
-					'hint': ''
+					name: 'after',
+					valueFormat: 'specific date',
+					hint: ''
 				},
 				{
-					'name': 'file',
-					'valueFormat': 'generated name',
-					'hint': ''
+					name: 'file',
+					valueFormat: 'generated name',
+					hint: ''
 				}
 			],
 			filteredHints: []
@@ -98,13 +98,22 @@ export default {
 			// 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; }
+			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 (/:\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; }
+			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
@@ -112,7 +121,7 @@ export default {
 
 			// 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
+			this.filteredHints = this.hints.filter(hint => hint.name
 				.toString()
 				.toLowerCase()
 				.indexOf(lastWord) === 0);
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index e0c8fa2..8d96712 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -48,7 +48,7 @@ import { mapState } from 'vuex';
 
 export default {
 	computed: mapState({
-		user: (state) => state.auth.user
+		user: state => state.auth.user
 	}),
 	methods: {
 		isRouteActive(id) {
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 2740bee..94d4003 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -93,8 +93,8 @@ export default {
 	},
 	computed: {
 		...mapState({
-			config: (state) => state.config,
-			albums: (state) => state.albums.tinyDetails
+			config: state => state.config,
+			albums: state => state.albums.tinyDetails
 		}),
 		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' })
 	},
-- 
cgit v1.2.3


From 09d8d02e6c11bb4aea9cd129bf195868bab0738f Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 25 Dec 2020 02:08:54 +0900
Subject: Cleanup

---
 src/site/components/album/AlbumDetails.vue | 6 ++----
 src/site/components/album/AlbumEntry.vue   | 8 +-------
 src/site/components/grid/Grid.vue          | 4 ----
 src/site/components/home/links/Links.vue   | 1 -
 4 files changed, 3 insertions(+), 16 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index f81e257..ef07670 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -235,8 +235,7 @@ export default {
 			padding: 2em 0em;
 
 			.table-wrapper {
-				-webkit-box-shadow: $boxShadowLight;
-						box-shadow: $boxShadowLight;
+				box-shadow: $boxShadowLight;
 			}
 		}
 	}
@@ -247,8 +246,7 @@ export default {
 
 	.b-table {
 		.table-wrapper {
-			-webkit-box-shadow: $boxShadowLight;
-					box-shadow: $boxShadowLight;
+			box-shadow: $boxShadowLight;
 		}
 	}
 
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 18633c4..b8a5cb2 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -117,11 +117,6 @@ export default {
 				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 {
@@ -133,8 +128,7 @@ export default {
 		div.thumb {
 			width: 64px;
 			height: 64px;
-			-webkit-box-shadow: $boxShadowLight;
-					box-shadow: $boxShadowLight;
+			box-shadow: $boxShadowLight;
 		}
 
 		div.info {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0693c77..0c0ac96 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -388,10 +388,6 @@ div.preview {
 
 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;
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index b20649f..8f82d4b 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -123,7 +123,6 @@ export default {
 
 			&:hover {
 				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
-				-webkit-transform: translateY(-.5rem);
 				transform: translateY(-.5rem);
 			}
 		}
-- 
cgit v1.2.3


From 7190e035b441aef96c8249bb02d12f7cd55a17d9 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 25 Dec 2020 20:17:47 +0900
Subject: chore: style changes

---
 src/site/components/footer/Footer.vue         | 148 +++++++++-----------------
 src/site/components/grid/Grid.vue             |   1 -
 src/site/components/home/links/Links.vue      |   5 +-
 src/site/components/image-modal/ImageInfo.vue |   2 +-
 src/site/components/logo/Logo.vue             |  42 +-------
 src/site/components/navbar/Navbar.vue         |   9 +-
 src/site/components/uploader/Uploader.vue     |   2 +-
 7 files changed, 64 insertions(+), 145 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index aa54dce..3e7fda3 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -1,70 +1,26 @@
 <template>
-	<!-- eslint-disable max-len -->
 	<footer>
-		<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"
-				class="wave-1" />
-			<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"
-				class="wave-3" />
-		</svg>
-		<div>
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<h4>lolisafe</h4>
-						<span>© 2017-2020
-							<a
-								href="https://github.com/pitu"
-								class="no-block">Pitu</a>
-						</span><br>
-						<span>v{{ version }}</span>
-					</div>
-					<div class="column">
-						<div class="columns is-gapless">
-							<div class="column" />
-							<div class="column">
-								<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>
-							</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"
-									@click="createShareXThing">ShareX Config</a>
-								<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
-							</div>
-						</div>
-					</div>
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<h4>lolisafe</h4>
+					<span>© 2017-{{ getYear }}
+						<a
+							href="https://github.com/pitu"
+							class="no-block">Pitu</a>
+					</span><br>
+					<span>v{{ version }}</span>
+				</div>
+				<div class="column is-narrow bottom-up">
+					<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 is-narrow bottom-up">
+					<a
+						v-if="loggedIn"
+						@click="createShareXThing">ShareX Config</a>
+					<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
 				</div>
 			</div>
 		</div>
@@ -84,7 +40,10 @@ export default {
 			version: state => state.config.version,
 			serviceName: state => state.config.serviceName,
 			token: state => state.auth.token
-		})
+		}),
+		getYear() {
+			return new Date().getFullYear();
+		}
 	},
 	methods: {
 		createShareXThing() {
@@ -112,39 +71,38 @@ export default {
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	footer {
-		svg.waves {
-			.wave-1 {
-				fill: rgb(55, 61, 76);
-				transition: fill 400ms ease-in-out 0s;
-			}
-
-			.wave-2 {
-				fill: rgb(57, 64, 79);
-				transition: fill 400ms ease-in-out 0s;
-			}
-
-			.wave-3 {
-				fill: rgb(59, 66, 82);
-				transition: fill 400ms ease-in-out 0s;
+		@media screen and (min-width: 1025px) {
+			position: fixed;
+			bottom: 0;
+			width: 100%;
+			> div {
+				padding: 1rem 1rem !important;
+				max-width: unset !important;
 			}
 		}
 
-		> div {
-			background: rgb(59, 66, 82);
-			padding: 3em 0;
-			@media screen and (max-width: 1024px) {
-				padding: 3em 3em;
-			}
-		}
+		.container {
+			.column {
+				margin-right: 2rem;
+				&.bottom-up {
+					@media screen and (min-width: 1025px) {
+						display: flex;
+						flex-direction: column;
+						justify-content: flex-end;
+						margin-right: 0;
+					}
+				}
 
-		.container .column a {
-			display: block;
-			color: $textColor;
-			&:hover {
-				color: white
-			}
-			&.no-block {
-				display: inherit;
+				a {
+					display: block;
+					color: $textColor;
+					&:hover {
+						color: white
+					}
+					&.no-block {
+						display: inherit;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0c0ac96..9e1ce6f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -217,7 +217,6 @@ export default {
 			images: state => state.images
 		}),
 		blank() {
-			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 8f82d4b..7be76f2 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -51,7 +51,7 @@ import { saveAs } from 'file-saver';
 export default {
 	computed: {
 		loggedIn() {
-			return this.$store.state.loggedIn;
+			return this.$store.state.auth.loggedIn;
 		}
 	},
 	methods: {
@@ -86,7 +86,8 @@ export default {
 
 		div.link { cursor: pointer; }
 		.link {
-			background: $backgroundAccent;
+			background: #0000002e;
+			border: 1px solid #00000061;
 			display: block;
 			width: calc(25% - 2rem);
 			border-radius: 6px;
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 07c87b5..9c7d73b 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -197,7 +197,7 @@ export default {
 }
 
 .image-col {
-	align-items: start;
+	align-items: center;
 }
 
 .data-col  {
diff --git a/src/site/components/logo/Logo.vue b/src/site/components/logo/Logo.vue
index b083cb4..5c2546b 100644
--- a/src/site/components/logo/Logo.vue
+++ b/src/site/components/logo/Logo.vue
@@ -1,59 +1,27 @@
+<template>
+	<img src="~/assets/images/logo.png">
+</template>
 <style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	#logo {
-		-webkit-animation-delay: 0.5s;
+	img {
+		height: 376px;
 		animation-delay: 0.5s;
-		-webkit-animation-duration: 1.5s;
 		animation-duration: 1.5s;
-		-webkit-animation-fill-mode: both;
 		animation-fill-mode: both;
-		-webkit-animation-name: floatUp;
 		animation-name: floatUp;
-		-webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
 		animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-		border-radius: 24px;
-		display: inline-block;
-		height: 240px;
-		position: relative;
-		vertical-align: top;
-		width: 240px;
-		box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-		background: $backgroundAccent;
-		pointer-events: none;
-	}
-
-	#logo img {
-		height: 200px;
-		margin-top: 20px;
 	}
 
 	@keyframes floatUp {
 		0% {
 			opacity: 0;
-			box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-			-webkit-transform: scale(0.86);
 			transform: scale(0.86);
 		}
 		25% { opacity: 100; }
 		67% {
-			box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-			-webkit-transform: scale(1);
 			transform: scale(1);
 		}
 		100% {
-			box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-			-webkit-transform: scale(1);
 			transform: scale(1);
 		}
 	}
 </style>
-
-<template>
-	<p id="logo">
-		<img src="~/assets/images/logo.png">
-	</p>
-</template>
-
-<script>
-export default {};
-</script>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index c0b8668..65db69f 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -11,14 +11,6 @@
 					Home
 				</router-link>
 			</b-navbar-item>
-			<b-navbar-item tag="div">
-				<router-link
-					to="/faq"
-					class="navbar-item no-active"
-					exact>
-					Docs
-				</router-link>
-			</b-navbar-item>
 			<template v-if="loggedIn">
 				<b-navbar-item tag="div">
 					<router-link
@@ -97,6 +89,7 @@ export default {
 	nav.navbar {
 		background: transparent;
 		box-shadow: none;
+		padding-right: 2rem;
 		.navbar-brand {
 			a.burger {
 				color: $defaultTextColor;
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 94d4003..6d17e4a 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -241,7 +241,7 @@ export default {
 			margin-bottom: 5px;
 			span.select {
 				select {
-					border: 2px solid #2c3340;
+					border: 1px solid #00000061;
 					background: rgba(0, 0, 0, 0.15);
 					border-radius: .3em;
 					color: $uploaderDropdownColor;
-- 
cgit v1.2.3


From ec2f9e0d989792c1760b48e063467cf6e59c580a Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Fri, 25 Dec 2020 20:45:22 +0900
Subject: Rebrand

---
 src/site/components/footer/Footer.vue         |  6 ++--
 src/site/components/home/links/Links.vue      |  6 ++--
 src/site/components/image-modal/ImageInfo.vue | 42 +++++++++++++--------------
 src/site/components/image-modal/TagInfo.vue   |  2 +-
 src/site/components/search/Search.vue         |  4 +--
 src/site/components/uploader/Uploader.vue     |  4 +--
 6 files changed, 32 insertions(+), 32 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 3e7fda3..7d65505 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -3,7 +3,7 @@
 		<div class="container">
 			<div class="columns">
 				<div class="column is-narrow">
-					<h4>lolisafe</h4>
+					<h4>chibisafe</h4>
 					<span>© 2017-{{ getYear }}
 						<a
 							href="https://github.com/pitu"
@@ -12,7 +12,7 @@
 					<span>v{{ version }}</span>
 				</div>
 				<div class="column is-narrow bottom-up">
-					<a href="https://github.com/weebdev/lolisafe">GitHub</a>
+					<a href="https://github.com/weebdev/chibisafe">GitHub</a>
 					<a href="https://patreon.com/pitu">Patreon</a>
 					<a href="https://discord.gg/5g6vgwn">Discord</a>
 				</div>
@@ -55,7 +55,7 @@ export default {
 				"FileFormName": "files[]",
 				"Headers": {
 					"authorization": "Bearer ${this.token}",
-					"accept": "application/vnd.lolisafe.json"
+					"accept": "application/vnd.chibisafe.json"
 				},
 				"ResponseType": "Text",
 				"URL": "$json:url$",
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 7be76f2..05915b9 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="links">
 		<a
-			href="https://github.com/WeebDev/lolisafe"
+			href="https://github.com/WeebDev/chibisafe"
 			target="_blank"
 			class="link">
 			<header class="bd-footer-star-header">
 				<h4 class="bd-footer-title">GitHub</h4>
-				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
+				<p class="bd-footer-subtitle">Deploy your own chibisafe</p>
 			</header>
 		</a>
 		<div
@@ -64,7 +64,7 @@ export default {
 				"FileFormName": "files[]",
 				"Headers": {
 					"authorization": "Bearer ${this.$store.state.token}",
-					"accept": "application/vnd.lolisafe.json"
+					"accept": "application/vnd.chibisafe.json"
 				},
 				"ResponseType": "Text",
 				"URL": "$json:url$",
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 9c7d73b..fdea285 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="container has-background-lolisafe">
+	<div class="container has-background-chibisafe">
 		<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">
@@ -9,14 +9,14 @@
 			</div>
 			<div class="column data-col is-one-third">
 				<div class="sticky">
-					<div class="divider is-lolisafe has-text-light">
+					<div class="divider is-chibisafe has-text-light">
 						File information
 					</div>
 					<b-field
 						label="ID"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-on-border">
 						<div class="control">
 							<span class="fake-input">{{ file.id }}</span>
 						</div>
@@ -24,8 +24,8 @@
 					<b-field
 						label="Name"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-on-border">
 						<div class="control">
 							<span class="fake-input">{{ file.name }}</span>
 						</div>
@@ -34,8 +34,8 @@
 					<b-field
 						label="Original Name"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-on-border">
 						<div class="control">
 							<span class="fake-input">{{ file.original }}</span>
 						</div>
@@ -44,8 +44,8 @@
 					<b-field
 						label="IP"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-on-border">
 						<div class="control">
 							<span class="fake-input">{{ file.ip }}</span>
 						</div>
@@ -54,8 +54,8 @@
 					<b-field
 						label="Link"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-on-border">
 						<div class="control">
 							<a
 								class="fake-input"
@@ -67,8 +67,8 @@
 					<b-field
 						label="Size"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-on-border">
 						<div class="control">
 							<span class="fake-input">{{ formatBytes(file.size) }}</span>
 						</div>
@@ -77,8 +77,8 @@
 					<b-field
 						label="Hash"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-on-border">
 						<div class="control">
 							<span class="fake-input">{{ file.hash }}</span>
 						</div>
@@ -87,19 +87,19 @@
 					<b-field
 						label="Uploaded"
 						label-position="on-border"
-						type="is-lolisafe"
-						class="lolisafe-on-border">
+						type="is-chibisafe"
+						class="chibisafe-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">
+					<div class="divider is-chibisafe has-text-light">
 						Tags
 					</div>
 					<Taginfo :image-id="file.id" :image-tags="tags" />
 
-					<div class="divider is-lolisafe has-text-light">
+					<div class="divider is-chibisafe has-text-light">
 						Albums
 					</div>
 					<Albuminfo :image-id="file.id" :image-albums="albums" :albums="tinyDetails" />
@@ -167,7 +167,7 @@ export default {
 .fake-input {
 	font-size: 1rem !important;
 	height: 2.5rem;
-	border-color: #323846; /* $lolisafe */
+	border-color: #323846; /* $chibisafe */
 	max-width: 100%;
 	width: 100%;
     border-radius: 4px;
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index 756a32d..fb65343 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -3,7 +3,7 @@
 		<b-taginput
 			:value="selectedTags"
 			:data="filteredTags"
-			class="lolisafe taginp"
+			class="chibisafe taginp"
 			ellipsis
 			icon="label"
 			placeholder="Add a tag"
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 2c4e3bc..1f55691 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -8,7 +8,7 @@
 					:data="filteredHints"
 					:custom-selector="handleSelect"
 					field="name"
-					class="lolisafe-input search"
+					class="chibisafe-input search"
 					placeholder="Search"
 					type="search"
 					open-on-focus
@@ -22,7 +22,7 @@
 					</template>
 				</SearchInput>
 				<p class="control">
-					<b-button type="is-lolisafe" @click="onSubmit">
+					<b-button type="is-chibisafe" @click="onSubmit">
 						Search
 					</b-button>
 				</p>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 6d17e4a..70acf91 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -127,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' }
+			headers: { Accept: 'application/vnd.chibisafe.json' }
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -152,7 +152,7 @@ export default {
 		*/
 		updateDropzoneConfig() {
 			this.$refs.el.setOption('headers', {
-				Accept: 'application/vnd.lolisafe.json',
+				Accept: 'application/vnd.chibisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
 				albumId: this.selectedAlbum ? this.selectedAlbum : null
 			});
-- 
cgit v1.2.3


From e97fee48441717f3b508ac855339d0fb8210be53 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sun, 27 Dec 2020 04:27:56 +0900
Subject: Fixes chunked uploads not being saved to albums or thumbnails

---
 src/site/components/uploader/Uploader.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 70acf91..f180546 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -184,6 +184,10 @@ export default {
 					type: file.type,
 					count: file.upload.totalChunkCount
 				}]
+			}, {
+				headers: {
+					albumId: this.selectedAlbum ? this.selectedAlbum : null
+				}
 			});
 
 			this.processResult(file, data);
-- 
cgit v1.2.3


From 24edf8f4fde96500e9cb23806f4826904144ebc8 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Sun, 27 Dec 2020 20:17:28 +0900
Subject: fix: mobile styling

---
 src/site/components/footer/Footer.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 7d65505..38e3f07 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -83,9 +83,10 @@ export default {
 
 		.container {
 			.column {
-				margin-right: 2rem;
-				&.bottom-up {
-					@media screen and (min-width: 1025px) {
+				text-align: center;
+				@media screen and (min-width: 1025px) {
+					margin-right: 2rem;
+					&.bottom-up {
 						display: flex;
 						flex-direction: column;
 						justify-content: flex-end;
-- 
cgit v1.2.3


From edb3bed98864e34695a5ae0093c414a2b578073a Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Mon, 28 Dec 2020 00:10:59 +0900
Subject: feat: Add warning to nsfw albums

---
 src/site/components/album/AlbumDetails.vue | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index ef07670..10925df 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -98,6 +98,13 @@
 					</div>
 
 					<div class="level-right">
+						<div class="level-item">
+							<b-switch
+								v-model="isNsfw"
+								:false-value="0"
+								:true-value="1"
+								@input="toggleNsfw()" />
+						</div>
 						<div class="level-item">
 							<button
 								class="button is-danger"
@@ -133,7 +140,15 @@ export default {
 			isDeletingLinks: []
 		};
 	},
-	computed: mapState(['config', 'auth']),
+	computed: {
+		...mapState(['config', 'auth']),
+		isNsfw() {
+			return this.$store.state.albums.list.find(a => a.id === this.albumId).nsfw;
+		}
+	},
+	mounted() {
+		console.log(this.isNsfw);
+	},
 	methods: {
 		...mapActions({
 			deleteAlbumAction: 'albums/deleteAlbum',
@@ -141,6 +156,7 @@ export default {
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
 			createCustomLinkAction: 'albums/createCustomLink',
+			toggleNsfw: 'albums/toggleNsfw',
 			alert: 'alert/set'
 		}),
 		promptDeleteAlbum(id) {
@@ -199,6 +215,17 @@ export default {
 				this.alert({ text: e.message, error: true });
 			}
 		},
+		async toggleNsfw() {
+			try {
+				const response = await this.toggleNsfw({
+					albumId: this.albumId,
+					nsfw: !this.isNsfw
+				});
+				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',
-- 
cgit v1.2.3


From 13058d99d658c0920ce75b79d6b24df18a873ea9 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 27 Dec 2020 18:18:06 +0200
Subject: fix: nsfw album toggle doesn't propagate the changes properly fix:
 add nsfw flag to the booleanFields in knex postProcessResponse

---
 src/site/components/album/AlbumDetails.vue | 19 +++++++++----------
 src/site/components/album/AlbumEntry.vue   |  3 ++-
 2 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index 10925df..81819b2 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -100,9 +100,7 @@
 					<div class="level-right">
 						<div class="level-item">
 							<b-switch
-								v-model="isNsfw"
-								:false-value="0"
-								:true-value="1"
+								:value="nsfw"
 								@input="toggleNsfw()" />
 						</div>
 						<div class="level-item">
@@ -132,6 +130,10 @@ export default {
 		details: {
 			'type': Object,
 			'default': () => ({})
+		},
+		nsfw: {
+			'type': Boolean,
+			'default': false
 		}
 	},
 	data() {
@@ -141,10 +143,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState(['config', 'auth']),
-		isNsfw() {
-			return this.$store.state.albums.list.find(a => a.id === this.albumId).nsfw;
-		}
+		...mapState(['config', 'auth'])
 	},
 	mounted() {
 		console.log(this.isNsfw);
@@ -156,7 +155,7 @@ export default {
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
 			createCustomLinkAction: 'albums/createCustomLink',
-			toggleNsfw: 'albums/toggleNsfw',
+			toggleNsfwAction: 'albums/toggleNsfw',
 			alert: 'alert/set'
 		}),
 		promptDeleteAlbum(id) {
@@ -217,9 +216,9 @@ export default {
 		},
 		async toggleNsfw() {
 			try {
-				const response = await this.toggleNsfw({
+				const response = await this.toggleNsfwAction({
 					albumId: this.albumId,
-					nsfw: !this.isNsfw
+					nsfw: !this.nsfw
 				});
 				this.alert({ text: response.message, error: false });
 			} catch (e) {
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index b8a5cb2..8947fa5 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -53,7 +53,8 @@
 		<AlbumDetails
 			v-if="isExpanded"
 			:details="getDetails(album.id)"
-			:album-id="album.id" />
+			:album-id="album.id"
+			:nsfw="album.nsfw" />
 	</div>
 </template>
 
-- 
cgit v1.2.3


From b77c0a57cc089a554ee874ae9ff5ff53e6b5eb99 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Mon, 4 Jan 2021 00:48:34 +0900
Subject: feat: add testing capabilities

---
 src/site/components/footer/Footer.test.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/site/components/footer/Footer.test.js

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.test.js b/src/site/components/footer/Footer.test.js
new file mode 100644
index 0000000..379f939
--- /dev/null
+++ b/src/site/components/footer/Footer.test.js
@@ -0,0 +1,25 @@
+/* eslint-disable no-undef */
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Component from './Footer.vue';
+import Vuex from 'vuex';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Footer.vue', () => {
+	const store = new Vuex.Store({
+		getters: {
+			'auth/isLoggedIn': () => false
+		},
+		state: {
+			config: {}
+		}
+	});
+
+	it('Should render chibisafe as the instance title', () => {
+		const wrapper = shallowMount(Component, { store, localVue });
+
+		const title = wrapper.find('h4');
+		expect(title.text()).toBe('chibisafe');
+	});
+});
-- 
cgit v1.2.3