more formatting

This commit is contained in:
emma 2023-02-15 00:12:10 +00:00
parent 5476a2794d
commit 3cee6c5934
8 changed files with 71 additions and 69 deletions

View file

@ -6,61 +6,59 @@
</template>
<script>
import { decode } from "blurhash";
import { decode } from 'blurhash'
export default {
name: 'Blurhash',
props: {
hash: {
type: String,
required: true,
required: true
},
width: {
type: Number,
required: true,
required: true
},
height: {
type: Number,
required: true,
required: true
},
punch: {
type: Number,
default: null,
},
default: null
}
},
data() {
return {
canvas: null,
ctx: null,
};
ctx: null
}
},
mounted() {
this.canvas = this.$refs.canvas;
this.ctx = this.canvas.getContext('2d');
this.canvas.width = 1024;
this.canvas.height = 512;
this.draw();
this.canvas = this.$refs.canvas
this.ctx = this.canvas.getContext('2d')
this.canvas.width = 1024
this.canvas.height = 512
this.draw()
},
methods: {
draw() {
const pixels = decode(this.hash, this.width, this.height, this.punch);
const imageData = this.ctx.createImageData(this.width, this.height);
imageData.data.set(pixels);
this.ctx.putImageData(imageData, 0, 0);
fetch("/static/blurhash-overlay.png")
const pixels = decode(this.hash, this.width, this.height, this.punch)
const imageData = this.ctx.createImageData(this.width, this.height)
imageData.data.set(pixels)
this.ctx.putImageData(imageData, 0, 0)
fetch('/static/blurhash-overlay.png')
.then((response) => response.blob())
.then((blob) => {
const img = new Image();
img.src = URL.createObjectURL(blob);
const img = new Image()
img.src = URL.createObjectURL(blob)
img.onload = () => {
this.ctx.drawImage(img, 0, 0, this.width, this.height);
};
});
},
this.ctx.drawImage(img, 0, 0, this.width, this.height)
}
})
}
}
}
</script>
<style scoped>
</style>
<style scoped></style>

View file

@ -9,7 +9,7 @@ const EmojiGrid = {
type: Array
}
},
data () {
data() {
return {
containerWidth: 0,
containerHeight: 0,
@ -17,7 +17,7 @@ const EmojiGrid = {
resizeObserver: null
}
},
mounted () {
mounted() {
const rect = this.$refs.container.getBoundingClientRect()
this.containerWidth = rect.width
this.containerHeight = rect.height
@ -29,29 +29,29 @@ const EmojiGrid = {
})
this.resizeObserver.observe(this.$refs.container)
},
beforeUnmount () {
beforeUnmount() {
this.resizeObserver.disconnect()
this.resizeObserver = null
},
watch: {
groups () {
groups() {
// Scroll to top when grid content changes
if (this.$refs.container) {
this.$refs.container.scrollTo(0, 0)
}
},
activeGroup (group) {
activeGroup(group) {
this.$emit('activeGroup', group)
}
},
methods: {
onScroll () {
onScroll() {
this.scrollPos = this.$refs.container.scrollTop
},
onEmoji (emoji) {
onEmoji(emoji) {
this.$emit('emoji', emoji)
},
scrollToItem (itemId) {
scrollToItem(itemId) {
const container = this.$refs.container
if (!container) return
@ -65,7 +65,7 @@ const EmojiGrid = {
},
computed: {
// Total height of scroller content
gridHeight () {
gridHeight() {
if (this.itemList.length === 0) return 0
const lastItem = this.itemList[this.itemList.length - 1]
return (
@ -73,7 +73,7 @@ const EmojiGrid = {
('title' in lastItem ? GROUP_TITLE_HEIGHT : EMOJI_SIZE)
)
},
activeGroup () {
activeGroup() {
const items = this.itemList
for (let i = items.length - 1; i >= 0; i--) {
const item = items[i]
@ -83,7 +83,7 @@ const EmojiGrid = {
}
return null
},
itemList () {
itemList() {
const items = []
let x = 0
let y = 0
@ -111,14 +111,14 @@ const EmojiGrid = {
}
return items
},
visibleItems () {
visibleItems() {
const startPos = this.scrollPos - BUFFER_SIZE
const endPos = this.scrollPos + this.containerHeight + BUFFER_SIZE
return this.itemList.filter((i) => {
return i.position.y >= startPos && i.position.y < endPos
})
},
scrolledClass () {
scrolledClass() {
if (this.scrollPos <= 5) {
return 'scrolled-top'
} else if (this.scrollPos >= this.gridHeight - this.containerHeight - 5) {

View file

@ -7,7 +7,7 @@
>
<div
:style="{
height: `${gridHeight}px`,
height: `${gridHeight}px`
}"
>
<template v-for="item in visibleItems">
@ -37,7 +37,7 @@
<img
v-else
:src="item.emoji.imageUrl"
>
/>
</span>
</template>
</div>

View file

@ -86,8 +86,10 @@ const FollowRequestCard = {
shouldConfirmDeny() {
return this.mergedConfig.modalOnDenyFollow
},
show () {
const notifId = this.$store.state.api.followRequests.find(req => req.id === this.user.id)
show() {
const notifId = this.$store.state.api.followRequests.find(
(req) => req.id === this.user.id
)
return notifId !== undefined
}

View file

@ -1,5 +1,8 @@
<template>
<basic-user-card :user="user" v-if="show">
<basic-user-card
v-if="show"
:user="user"
>
<div class="follow-request-card-content-container">
<button
class="btn button-default"

View file

@ -1,7 +1,7 @@
<template>
<div class="followed-tag-card">
<span>
<router-link :to="{ name: 'tag-timeline', params: {tag: tag.name}}">
<router-link :to="{ name: 'tag-timeline', params: { tag: tag.name } }">
<span class="tag-link">#{{ tag.name }}</span>
</router-link>
<span class="unfollow-tag">
@ -33,22 +33,22 @@ export default {
tag: {
type: Object,
required: true
},
}
},
// this is a hack to update the state of the button
// for some reason, List does not update on changes to the tag object
data: () => ({
isFollowing: true
}),
mounted () {
mounted() {
this.isFollowing = this.tag.following
},
methods: {
unfollowTag (tag) {
unfollowTag(tag) {
this.$store.dispatch('unfollowTag', tag)
this.isFollowing = false
},
followTag (tag) {
followTag(tag) {
this.$store.dispatch('followTag', tag)
this.isFollowing = true
}
@ -57,21 +57,22 @@ export default {
</script>
<style scoped>
.followed-tag-card {
margin-left: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.unfollow-tag {
position: absolute;
right: 1rem;
}
.followed-tag-card {
margin-left: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.unfollow-tag {
position: absolute;
right: 1rem;
}
.tag-link {
font-size: large;
}
.tag-link {
font-size: large;
}
.unfollow-tag-button, .follow-tag-button {
font-size: medium;
}
.unfollow-tag-button,
.follow-tag-button {
font-size: medium;
}
</style>

View file

@ -212,9 +212,7 @@
:on-scope-change="changeVis"
/>
<div
class="language-selector"
>
<div class="language-selector">
<Select
id="post-language"
v-model="newStatus.language"

View file

@ -118,7 +118,7 @@ export const defaultState = {
translationLanguage: undefined, // instance default,
supportedTranslationLanguages: {}, // instance default
userProfileDefaultTab: 'statuses',
useBlurhash: true,
useBlurhash: true
}
// caching the instance default properties