mirror of
https://akkoma.dev/AkkomaGang/akkoma-fe
synced 2025-05-18 01:59:13 +08:00
Compare commits
12 commits
Author | SHA1 | Date | |
---|---|---|---|
|
9787f43343 | ||
|
61bdedc82f | ||
|
a4eddc7f1c | ||
|
94c5998593 | ||
|
851dd263c0 | ||
|
473ba89355 | ||
|
4ce8ffcec1 | ||
|
e62b154228 | ||
|
e87a9ced61 | ||
|
7245775b27 | ||
|
6373c5a05d | ||
|
2914eaf1ca |
7 changed files with 60 additions and 24 deletions
|
@ -15,12 +15,13 @@ put a file that looks like this
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"myPack": "/static/stickers/myPack"
|
"myPack": "/static/stickers/myPack/"
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
This file is a mapping from name to pack directory location. It says "we have a pack called myPack, look for
|
This file is a mapping from name to pack directory location. It says "we have a pack called myPack, look for
|
||||||
it at `/static/stickers/myPack`". You can add as many packs as you like in this manner.
|
it inside `/static/stickers/myPack`". You can add as many packs as you like in this manner.
|
||||||
|
Note that a single leading and a trailing slash are **required** to work correctly!
|
||||||
|
|
||||||
## Creating the pack
|
## Creating the pack
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "pleroma_fe",
|
"name": "pleroma_fe",
|
||||||
"version": "3.11.0",
|
"version": "3.10.0",
|
||||||
"description": "A frontend for Akkoma instances",
|
"description": "A frontend for Akkoma instances",
|
||||||
"author": "Roger Braun <roger@rogerbraun.net>",
|
"author": "Roger Braun <roger@rogerbraun.net>",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
@click="emojiOnClick(reaction.name, $event)"
|
@click="emojiOnClick(reaction.name, $event)"
|
||||||
@mouseenter="fetchEmojiReactionsByIfMissing()"
|
@mouseenter="fetchEmojiReactionsByIfMissing()"
|
||||||
>
|
>
|
||||||
<span
|
<template
|
||||||
v-if="reaction.url !== null"
|
v-if="reaction.url !== null"
|
||||||
>
|
>
|
||||||
<StillImage
|
<StillImage
|
||||||
|
@ -19,16 +19,15 @@
|
||||||
:title="reaction.name"
|
:title="reaction.name"
|
||||||
:alt="reaction.name"
|
:alt="reaction.name"
|
||||||
class="reaction-emoji"
|
class="reaction-emoji"
|
||||||
height="2.55em"
|
|
||||||
/>
|
/>
|
||||||
{{ reaction.count }}
|
{{ reaction.count }}
|
||||||
</span>
|
</template>
|
||||||
<span v-else>
|
<template v-else>
|
||||||
<span class="reaction-emoji unicode-emoji">
|
<span class="reaction-emoji unicode-emoji">
|
||||||
{{ reaction.name }}
|
{{ reaction.name }}
|
||||||
</span>
|
</span>
|
||||||
<span>{{ reaction.count }}</span>
|
<span>{{ reaction.count }}</span>
|
||||||
</span>
|
</template>
|
||||||
</button>
|
</button>
|
||||||
</UserListPopover>
|
</UserListPopover>
|
||||||
<a
|
<a
|
||||||
|
@ -53,23 +52,26 @@
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unicode-emoji {
|
|
||||||
font-size: 210%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-reaction {
|
.emoji-reaction {
|
||||||
padding: 0 0.5em;
|
padding: 2px 0.5em;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: end;
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.reaction-emoji {
|
.reaction-emoji {
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: 96cqw;
|
max-width: 96cqw;
|
||||||
height: 2.55em !important;
|
|
||||||
margin-right: 0.25em;
|
margin-right: 0.25em;
|
||||||
|
|
||||||
|
&.still-image {
|
||||||
|
height: 2.55em;
|
||||||
|
}
|
||||||
|
&.unicode-emoji {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 2.125em; // assuming default line height of 1.2rem and emojis that don't exceed line height
|
||||||
|
line-height: 2.55rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -97,9 +99,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-default.picked-reaction {
|
.button-default.picked-reaction {
|
||||||
border: 1px solid var(--accent, $fallback--link);
|
&, &:hover {
|
||||||
margin-left: -1px; // offset the border, can't use inset shadows either
|
box-shadow: inset 0 0 0 1px var(--accent, $fallback--link);
|
||||||
margin-right: calc(0.5em - 1px);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -99,7 +99,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
.Status & {
|
.Status & {
|
||||||
max-height: 10em;
|
max-height: 30em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-audio {
|
&.-audio {
|
||||||
|
|
|
@ -50,6 +50,13 @@ export default {
|
||||||
totalVotesCount () {
|
totalVotesCount () {
|
||||||
return this.poll.votes_count
|
return this.poll.votes_count
|
||||||
},
|
},
|
||||||
|
totalFractionBase () {
|
||||||
|
// Due to a backend bug, we might not have any voter count info for remote polls
|
||||||
|
// in this case, fall back to count of votes even for multiple cjoice polls
|
||||||
|
// to be able to at least display _something_
|
||||||
|
const total_base = this.poll.multiple ? this.poll.voters_count : this.poll.votes_count
|
||||||
|
return total_base > 0 ? total_base : this.poll.votes_count
|
||||||
|
},
|
||||||
containerClass () {
|
containerClass () {
|
||||||
return {
|
return {
|
||||||
loading: this.loading
|
loading: this.loading
|
||||||
|
@ -70,10 +77,11 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
percentageForOption (count) {
|
percentageForOption (count) {
|
||||||
return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100)
|
const total = this.totalFractionBase
|
||||||
|
return total === 0 ? 0 : Math.round(count / total * 100)
|
||||||
},
|
},
|
||||||
resultTitle (option) {
|
resultTitle (option) {
|
||||||
return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
|
return `${option.votes_count}/${this.totalFractionBase} ${this.$t('polls.votes')}`
|
||||||
},
|
},
|
||||||
fetchPoll () {
|
fetchPoll () {
|
||||||
this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id })
|
this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id })
|
||||||
|
|
|
@ -1,3 +1,19 @@
|
||||||
|
const checkCanvasExtractPermission = () => {
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.width = 1;
|
||||||
|
canvas.height = 1;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
if (!ctx) return false;
|
||||||
|
|
||||||
|
ctx.fillStyle = '#0f161e';
|
||||||
|
ctx.fillRect(0, 0, 1, 1);
|
||||||
|
|
||||||
|
const { data } = ctx.getImageData(0, 0, 1, 1);
|
||||||
|
|
||||||
|
return data.join(',') === '15,22,30,255';
|
||||||
|
};
|
||||||
|
|
||||||
const createFaviconService = () => {
|
const createFaviconService = () => {
|
||||||
const favicons = []
|
const favicons = []
|
||||||
const faviconWidth = 128
|
const faviconWidth = 128
|
||||||
|
@ -6,6 +22,8 @@ const createFaviconService = () => {
|
||||||
const gapWidth = 24
|
const gapWidth = 24
|
||||||
|
|
||||||
const initFaviconService = () => {
|
const initFaviconService = () => {
|
||||||
|
if (!checkCanvasExtractPermission()) return;
|
||||||
|
|
||||||
const nodes = document.querySelectorAll('link[rel="icon"]')
|
const nodes = document.querySelectorAll('link[rel="icon"]')
|
||||||
nodes.forEach(favicon => {
|
nodes.forEach(favicon => {
|
||||||
if (favicon) {
|
if (favicon) {
|
||||||
|
|
|
@ -3,8 +3,15 @@ import { filter } from 'lodash'
|
||||||
export const muteWordHits = (status, muteWords) => {
|
export const muteWordHits = (status, muteWords) => {
|
||||||
const statusText = status.text.toLowerCase()
|
const statusText = status.text.toLowerCase()
|
||||||
const statusSummary = status.summary.toLowerCase()
|
const statusSummary = status.summary.toLowerCase()
|
||||||
|
|
||||||
const hits = filter(muteWords, (muteWord) => {
|
const hits = filter(muteWords, (muteWord) => {
|
||||||
return statusText.includes(muteWord.toLowerCase()) || statusSummary.includes(muteWord.toLowerCase())
|
muteWord = muteWord.toLowerCase()
|
||||||
|
|
||||||
|
return (
|
||||||
|
statusText.includes(muteWord) ||
|
||||||
|
statusSummary.includes(muteWord) ||
|
||||||
|
status.attachments.some((a) => a.description?.toLowerCase().includes(muteWord))
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
return hits
|
return hits
|
||||||
|
|
Loading…
Reference in a new issue