forked from AkkomaGang/akkoma-fe
more formatting
This commit is contained in:
parent
5476a2794d
commit
3cee6c5934
8 changed files with 71 additions and 69 deletions
|
@ -6,61 +6,59 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { decode } from "blurhash";
|
import { decode } from 'blurhash'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Blurhash',
|
name: 'Blurhash',
|
||||||
props: {
|
props: {
|
||||||
hash: {
|
hash: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true
|
||||||
},
|
},
|
||||||
punch: {
|
punch: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: null,
|
default: null
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
canvas: null,
|
canvas: null,
|
||||||
ctx: null,
|
ctx: null
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.canvas = this.$refs.canvas;
|
this.canvas = this.$refs.canvas
|
||||||
this.ctx = this.canvas.getContext('2d');
|
this.ctx = this.canvas.getContext('2d')
|
||||||
this.canvas.width = 1024;
|
this.canvas.width = 1024
|
||||||
this.canvas.height = 512;
|
this.canvas.height = 512
|
||||||
this.draw();
|
this.draw()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
draw() {
|
draw() {
|
||||||
const pixels = decode(this.hash, this.width, this.height, this.punch);
|
const pixels = decode(this.hash, this.width, this.height, this.punch)
|
||||||
const imageData = this.ctx.createImageData(this.width, this.height);
|
const imageData = this.ctx.createImageData(this.width, this.height)
|
||||||
imageData.data.set(pixels);
|
imageData.data.set(pixels)
|
||||||
this.ctx.putImageData(imageData, 0, 0);
|
this.ctx.putImageData(imageData, 0, 0)
|
||||||
fetch("/static/blurhash-overlay.png")
|
fetch('/static/blurhash-overlay.png')
|
||||||
.then((response) => response.blob())
|
.then((response) => response.blob())
|
||||||
.then((blob) => {
|
.then((blob) => {
|
||||||
const img = new Image();
|
const img = new Image()
|
||||||
img.src = URL.createObjectURL(blob);
|
img.src = URL.createObjectURL(blob)
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
this.ctx.drawImage(img, 0, 0, this.width, this.height);
|
this.ctx.drawImage(img, 0, 0, this.width, this.height)
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -9,7 +9,7 @@ const EmojiGrid = {
|
||||||
type: Array
|
type: Array
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
containerWidth: 0,
|
containerWidth: 0,
|
||||||
containerHeight: 0,
|
containerHeight: 0,
|
||||||
|
@ -17,7 +17,7 @@ const EmojiGrid = {
|
||||||
resizeObserver: null
|
resizeObserver: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
const rect = this.$refs.container.getBoundingClientRect()
|
const rect = this.$refs.container.getBoundingClientRect()
|
||||||
this.containerWidth = rect.width
|
this.containerWidth = rect.width
|
||||||
this.containerHeight = rect.height
|
this.containerHeight = rect.height
|
||||||
|
@ -29,29 +29,29 @@ const EmojiGrid = {
|
||||||
})
|
})
|
||||||
this.resizeObserver.observe(this.$refs.container)
|
this.resizeObserver.observe(this.$refs.container)
|
||||||
},
|
},
|
||||||
beforeUnmount () {
|
beforeUnmount() {
|
||||||
this.resizeObserver.disconnect()
|
this.resizeObserver.disconnect()
|
||||||
this.resizeObserver = null
|
this.resizeObserver = null
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
groups () {
|
groups() {
|
||||||
// Scroll to top when grid content changes
|
// Scroll to top when grid content changes
|
||||||
if (this.$refs.container) {
|
if (this.$refs.container) {
|
||||||
this.$refs.container.scrollTo(0, 0)
|
this.$refs.container.scrollTo(0, 0)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
activeGroup (group) {
|
activeGroup(group) {
|
||||||
this.$emit('activeGroup', group)
|
this.$emit('activeGroup', group)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onScroll () {
|
onScroll() {
|
||||||
this.scrollPos = this.$refs.container.scrollTop
|
this.scrollPos = this.$refs.container.scrollTop
|
||||||
},
|
},
|
||||||
onEmoji (emoji) {
|
onEmoji(emoji) {
|
||||||
this.$emit('emoji', emoji)
|
this.$emit('emoji', emoji)
|
||||||
},
|
},
|
||||||
scrollToItem (itemId) {
|
scrollToItem(itemId) {
|
||||||
const container = this.$refs.container
|
const container = this.$refs.container
|
||||||
if (!container) return
|
if (!container) return
|
||||||
|
|
||||||
|
@ -65,7 +65,7 @@ const EmojiGrid = {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// Total height of scroller content
|
// Total height of scroller content
|
||||||
gridHeight () {
|
gridHeight() {
|
||||||
if (this.itemList.length === 0) return 0
|
if (this.itemList.length === 0) return 0
|
||||||
const lastItem = this.itemList[this.itemList.length - 1]
|
const lastItem = this.itemList[this.itemList.length - 1]
|
||||||
return (
|
return (
|
||||||
|
@ -73,7 +73,7 @@ const EmojiGrid = {
|
||||||
('title' in lastItem ? GROUP_TITLE_HEIGHT : EMOJI_SIZE)
|
('title' in lastItem ? GROUP_TITLE_HEIGHT : EMOJI_SIZE)
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
activeGroup () {
|
activeGroup() {
|
||||||
const items = this.itemList
|
const items = this.itemList
|
||||||
for (let i = items.length - 1; i >= 0; i--) {
|
for (let i = items.length - 1; i >= 0; i--) {
|
||||||
const item = items[i]
|
const item = items[i]
|
||||||
|
@ -83,7 +83,7 @@ const EmojiGrid = {
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
},
|
},
|
||||||
itemList () {
|
itemList() {
|
||||||
const items = []
|
const items = []
|
||||||
let x = 0
|
let x = 0
|
||||||
let y = 0
|
let y = 0
|
||||||
|
@ -111,14 +111,14 @@ const EmojiGrid = {
|
||||||
}
|
}
|
||||||
return items
|
return items
|
||||||
},
|
},
|
||||||
visibleItems () {
|
visibleItems() {
|
||||||
const startPos = this.scrollPos - BUFFER_SIZE
|
const startPos = this.scrollPos - BUFFER_SIZE
|
||||||
const endPos = this.scrollPos + this.containerHeight + BUFFER_SIZE
|
const endPos = this.scrollPos + this.containerHeight + BUFFER_SIZE
|
||||||
return this.itemList.filter((i) => {
|
return this.itemList.filter((i) => {
|
||||||
return i.position.y >= startPos && i.position.y < endPos
|
return i.position.y >= startPos && i.position.y < endPos
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
scrolledClass () {
|
scrolledClass() {
|
||||||
if (this.scrollPos <= 5) {
|
if (this.scrollPos <= 5) {
|
||||||
return 'scrolled-top'
|
return 'scrolled-top'
|
||||||
} else if (this.scrollPos >= this.gridHeight - this.containerHeight - 5) {
|
} else if (this.scrollPos >= this.gridHeight - this.containerHeight - 5) {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
:style="{
|
:style="{
|
||||||
height: `${gridHeight}px`,
|
height: `${gridHeight}px`
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template v-for="item in visibleItems">
|
<template v-for="item in visibleItems">
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
<img
|
<img
|
||||||
v-else
|
v-else
|
||||||
:src="item.emoji.imageUrl"
|
:src="item.emoji.imageUrl"
|
||||||
>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -86,8 +86,10 @@ const FollowRequestCard = {
|
||||||
shouldConfirmDeny() {
|
shouldConfirmDeny() {
|
||||||
return this.mergedConfig.modalOnDenyFollow
|
return this.mergedConfig.modalOnDenyFollow
|
||||||
},
|
},
|
||||||
show () {
|
show() {
|
||||||
const notifId = this.$store.state.api.followRequests.find(req => req.id === this.user.id)
|
const notifId = this.$store.state.api.followRequests.find(
|
||||||
|
(req) => req.id === this.user.id
|
||||||
|
)
|
||||||
|
|
||||||
return notifId !== undefined
|
return notifId !== undefined
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<basic-user-card :user="user" v-if="show">
|
<basic-user-card
|
||||||
|
v-if="show"
|
||||||
|
:user="user"
|
||||||
|
>
|
||||||
<div class="follow-request-card-content-container">
|
<div class="follow-request-card-content-container">
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="followed-tag-card">
|
<div class="followed-tag-card">
|
||||||
<span>
|
<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>
|
<span class="tag-link">#{{ tag.name }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<span class="unfollow-tag">
|
<span class="unfollow-tag">
|
||||||
|
@ -33,22 +33,22 @@ export default {
|
||||||
tag: {
|
tag: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
// this is a hack to update the state of the button
|
// this is a hack to update the state of the button
|
||||||
// for some reason, List does not update on changes to the tag object
|
// for some reason, List does not update on changes to the tag object
|
||||||
data: () => ({
|
data: () => ({
|
||||||
isFollowing: true
|
isFollowing: true
|
||||||
}),
|
}),
|
||||||
mounted () {
|
mounted() {
|
||||||
this.isFollowing = this.tag.following
|
this.isFollowing = this.tag.following
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
unfollowTag (tag) {
|
unfollowTag(tag) {
|
||||||
this.$store.dispatch('unfollowTag', tag)
|
this.$store.dispatch('unfollowTag', tag)
|
||||||
this.isFollowing = false
|
this.isFollowing = false
|
||||||
},
|
},
|
||||||
followTag (tag) {
|
followTag(tag) {
|
||||||
this.$store.dispatch('followTag', tag)
|
this.$store.dispatch('followTag', tag)
|
||||||
this.isFollowing = true
|
this.isFollowing = true
|
||||||
}
|
}
|
||||||
|
@ -57,21 +57,22 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.followed-tag-card {
|
.followed-tag-card {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
.unfollow-tag {
|
.unfollow-tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-link {
|
.tag-link {
|
||||||
font-size: large;
|
font-size: large;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unfollow-tag-button, .follow-tag-button {
|
.unfollow-tag-button,
|
||||||
font-size: medium;
|
.follow-tag-button {
|
||||||
}
|
font-size: medium;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -212,9 +212,7 @@
|
||||||
:on-scope-change="changeVis"
|
:on-scope-change="changeVis"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div
|
<div class="language-selector">
|
||||||
class="language-selector"
|
|
||||||
>
|
|
||||||
<Select
|
<Select
|
||||||
id="post-language"
|
id="post-language"
|
||||||
v-model="newStatus.language"
|
v-model="newStatus.language"
|
||||||
|
|
|
@ -118,7 +118,7 @@ export const defaultState = {
|
||||||
translationLanguage: undefined, // instance default,
|
translationLanguage: undefined, // instance default,
|
||||||
supportedTranslationLanguages: {}, // instance default
|
supportedTranslationLanguages: {}, // instance default
|
||||||
userProfileDefaultTab: 'statuses',
|
userProfileDefaultTab: 'statuses',
|
||||||
useBlurhash: true,
|
useBlurhash: true
|
||||||
}
|
}
|
||||||
|
|
||||||
// caching the instance default properties
|
// caching the instance default properties
|
||||||
|
|
Loading…
Reference in a new issue