Michcio/FoundKey-0x7f
1
1
Fork 0
forked from FoundKeyGang/FoundKey
Code Pull requests Releases Activity

client: Add colour coding to make people distinguishable despite

Browse source 
changing pfps
This commit is contained in:
Michcio 2022-09-16 19:51:57 +02:00
parent 98a15fd080
commit 24a10acd34
4 changed files with 36 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/backend/package.json
View file

@ -40,6 +40,7 @@
"cli-highlight": "2.1.11",
"color-convert": "2.0.1",
"content-disposition": "0.5.4",
"crc": "^4.1.1",
"date-fns": "2.28.0",
"deep-email-validator": "0.1.21",
"escape-regexp": "0.0.1",

2
packages/client/src/components/MkNoteSub.vue
View file

@ -87,7 +87,7 @@ const replies: foundkey.entities.Note[] = props.conversation?.filter(item => ite
margin: 0 8px 0 0;
width: 38px;
height: 38px;
border-radius: calc(8% / 38);
border-radius: 50%;
}
> .body {

26
packages/client/src/components/global/avatar.vue
View file

@ -1,15 +1,16 @@
<template>
<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect handleHash" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color, background: handleHash }" :title="acct(user)" @click="onClick">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</span>
<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect handleHash" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color, background: handleHash }" :to="userPage(user)" :title="acct(user)" :target="target">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</MkA>
</template>
<script lang="ts" setup>
import crc32 from 'crc/crc32';
import { watch } from 'vue';
import * as foundkey from 'foundkey-js';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
@ -39,6 +40,19 @@ const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(props.user.avatarUrl)
: props.user.avatarUrl);
// colors from Nature Methods column by Bang Wong
// https://www.nature.com/articles/nmeth.1618
const hashlette = ['rgb(0, 0, 0)', 'rgb(230, 159, 0)', 'rgb(86, 180, 233)', 'rgb(0, 158, 115)', 'rgb(240, 228, 66)', 'rgb(0, 114, 178)', 'rgb(213, 94, 0)', 'rgb(204, 121, 167)'] as const;
const handleHash = $computed(() => {
const stripColours = crc32(acct(props.user)).toString(8).split('').map(digitStr => hashlette[parseInt(digitStr)]);
const fraction = 1 / stripColours.length;
const positions = stripColours.flatMap((colour, idx) =>
[`${colour} ${fraction * idx}turn`, `${colour} ${fraction * (idx + 1)}turn`]
);
return `conic-gradient(${positions})`;
});
function onClick(ev: MouseEvent) {
emit('click', ev);
}
@ -91,6 +105,14 @@ watch(() => props.user.avatarBlurhash, () => {
height: 100%;
}
&.handleHash {
> .inner {
padding: 10%;
width: 80%;
height: 80%;
}
}
> .indicator {
position: absolute;
z-index: 1;

10
yarn.lock
View file

@ -3649,6 +3649,7 @@ __metadata:
cli-highlight: 2.1.11
color-convert: 2.0.1
content-disposition: 0.5.4
crc: ^4.1.1
cross-env: 7.0.3
date-fns: 2.28.0
deep-email-validator: 0.1.21
@ -5160,6 +5161,15 @@ __metadata:
languageName: node
linkType: hard
"crc@npm:^4.1.1":
version: 4.1.1
resolution: "crc@npm:4.1.1"
peerDependencies:
buffer: ">=6.0.3"
checksum: b2ab89547bd47ac8bdaadcd362d94aa9ddda2ddfe7267e0b449f62a83739bd8f99e9874e4933652d5653ab5f9703eebba9665d03206d600cef2ded9ff3c5c1e2
languageName: node
linkType: hard
"create-require@npm:^1.1.0":
version: 1.1.1
resolution: "create-require@npm:1.1.1"