1
0
Fork 0
mirror of https://akkoma.dev/AkkomaGang/akkoma-fe synced 2025-05-18 01:59:13 +08:00

Compare commits

..

12 commits

Author SHA1 Message Date
Oneric
9787f43343 Merge pull request 'Check for canvas extract permission when initializing favicon service' () from mkljczk/akkoma-fe:check-canvas-extract-permission into develop
Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/432
2025-05-09 18:34:53 +00:00
Oneric
61bdedc82f Merge pull request 'remove some jank in emoji reacts component' () from Riedler/akkoma-fe:fix-reacts into develop
Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/435
2025-05-09 18:30:07 +00:00
Oneric
a4eddc7f1c Merge pull request 'polls: base fractions on voters for multiple choice polls' () from Oneric/akkoma-fe:poll-percentages into develop
Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/436
2025-05-09 18:29:54 +00:00
sn0w
94c5998593 Apply wordfilters to attachment alt-texts
EDITED to apply review suggestions:
  - short circuit search and immediately return once match found
  - Array.some() instead of for loop
2025-05-05 22:39:43 +02:00
Oneric
851dd263c0 docs/sticker: fix example setup 2025-04-25 00:45:04 +02:00
Oneric
473ba89355 polls: base fractions on voters for multiple choice polls
This allows discerning how many voters agreed
with an option and aligns with other clients.
However, a backend bug makes this impossible for
remote multiple choice polls, so retain current
behaviour for anything affected.
2025-04-04 19:27:30 +02:00
Riedler
4ce8ffcec1 fix: shrink unicode emojis in reactions slightly
some large ones exceeded container boundaries before
2025-03-26 09:09:56 +01:00
Riedler
e62b154228 fix: uniform height sizing and layouting 2025-03-26 07:39:54 +01:00
Riedler
e87a9ced61 fix: no more emojis bleeding into button borders 2025-03-26 07:12:45 +01:00
Riedler
7245775b27 fix: picked reactions should be positioned identically 2025-03-26 06:56:32 +01:00
mkljczk
6373c5a05d Check for canvas extract permission when initializing favicon service 2025-03-05 15:02:16 +00:00
Floatingghost
2914eaf1ca Revert "reduce gallery size"
This reverts commit 06ba190e2e.
2025-03-01 16:14:55 +00:00
7 changed files with 60 additions and 24 deletions
docs/docs
package.json
src
components
emoji_reactions
gallery
poll
services
favicon_service
status_parser

View file

@ -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

View file

@ -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,

View file

@ -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>

View file

@ -99,7 +99,7 @@
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
.Status & { .Status & {
max-height: 10em; max-height: 30em;
} }
&.-audio { &.-audio {

View file

@ -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 })

View file

@ -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) {

View file

@ -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