sticker_picker.vue
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

sticker_picker.vue
View Options

	<template>
	<div
	class="sticker-picker"
	>
	<tab-switcher
	class="tab-switcher"
	:render-only-focused="true"
	scrollable-tabs
	>
	<div
	v-for="stickerpack in pack"
	:key="stickerpack.path"
	:image-tooltip="stickerpack.meta.title"
	:image="stickerpack.path + stickerpack.meta.tabIcon"
	class="sticker-picker-content"
	>
	<div
	v-for="sticker in stickerpack.meta.stickers"
	:key="sticker"
	class="sticker"
	@click.stop.prevent="pick(stickerpack.path + sticker, stickerpack.meta.title)"
	>
	<img
	:src="stickerpack.path + sticker"
	>
	</div>
	</div>
	</tab-switcher>
	</div>
	</template>

	<script src="./sticker_picker.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.sticker-picker {
	width: 100%;
	position: relative;
	.tab-switcher {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	.sticker-picker-content {
	.sticker {
	display: inline-block;
	width: 20%;
	height: 20%;
	img {
	width: 100%;
	&:hover {
	filter: drop-shadow(0 0 5px var(--link, $fallback--link));
	}
	}
	}
	}
	}

	</style>