TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-20 10:25:43 -04:00
Code Issues Packages Projects Releases Wiki Activity

(profile) add icon to custom events

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-10-08 00:38:39 +02:00
parent a3b466863d
commit 590e770229
6 changed files with 53 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Calendar.vue
View File

@ -97,8 +97,8 @@ export default defineComponent({
return `day day-event day-event-${maxLevel}`;
},
getDayFlag(d: Day): string | null {
for (const event of (this.year.eventsByDate[d.toString()] || []).filter((e) => e.level === EventLevel.Day && e.flag)) {
return `/flags/${event.flag}.png`;
for (const event of (this.year.eventsByDate[d.toString()] || []).filter((e) => e.level === EventLevel.Day && e.display.type === 'flag')) {
return `/flags/${event.display.name}.png`;
}
return null;
},

10
components/CalendarEvent.vue
View File

@ -11,11 +11,15 @@
</template>
</component>
<Tooltip v-if="event.level === EventLevel.CustomDay" :text="$t('profile.calendar.customEvents.disclaimer')">
<Icon v="user" />
<Icon :v="event.display.name" />
</Tooltip>
<template v-else>
<Flag v-if="event.flag" :alt="$t(`flags_alt.${event.flag.replace(/'/g, '*').replace(/ /g, '_')}`) || ''" :img="`/flags/${event.flag}.png`" />
<Icon v-else v="arrow-circle-right" />
<Flag
v-if="event.display.type === 'flag'"
:alt="$t(`flags_alt.${event.display.name.replace(/'/g, '*').replace(/ /g, '_')}`) || ''"
:img="`/flags/${event.display.name}.png`"
/>
<Icon v-else :v="event.display.name" />
</template>
<T v-if="$te(`calendar.events.${eventName}`, true)" :params="{ param: eventParam }">calendar.events.{{ eventName }}</T>
<LinkedText v-else :text="eventName" />

4
components/Logo.vue
View File

@ -122,11 +122,11 @@ export default defineComponent({
return null;
}
return new ImmutableArray(...events)
.filter((e) => e.flag && !e.flag.startsWith('_'))
.filter((e) => e.display.type === 'flag' && !e.display.name.startsWith('_'))
.sorted((a, b) => b.level - a.level)
.groupBy((e) => e.level)
.indexOrFallback(0, ['0', new ImmutableArray()])[1]
.map((e) => e.flag)
.map((e) => e.display.name)
.randomElement();
},
resetFlagIfNotOverwritten(): void {

26
components/PersonalEventListInput.vue
View File

@ -14,6 +14,8 @@ const today = new Date();
const modelValue = defineModel<CustomEvent[]>();
const showIconSelector = ref<number | false>(false);
const maxDaysInMonths: Record<number, number> = {
1: 31,
2: 29,
@ -79,6 +81,13 @@ const validation = (v: CustomEvent): string | null => {
s.val.day = date.getDate();
}"
/>
<button
type="button"
:class="['btn', 'btn-outline-secondary', showIconSelector === s.i ? 'btn-secondary text-white border' : '']"
@click="showIconSelector = showIconSelector === s.i ? false : s.i"
>
<Icon :v="s.val.icon" />
</button>
<input
v-model="s.val.name"
class="form-control"
@ -98,6 +107,12 @@ const validation = (v: CustomEvent): string | null => {
@paste="$nextTick(() => s.update(s.val))"
@change="s.update(s.val)"
>
<IconSelector
v-if="showIconSelector === s.i"
class="hanging shadow shadow-lg border"
@change="s.update({ ...s.val, icon: $event }); showIconSelector = false"
/>
</template>
<template #validation="s">
<p v-if="validation(s.val)" class="small text-danger">
@ -107,3 +122,14 @@ const validation = (v: CustomEvent): string | null => {
</template>
</ListInput>
</template>
<style lang="scss" scoped>
.hanging {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-width: 500px;
z-index: 5000;
}
</style>

6
server/express/profile.ts
View File

@ -352,7 +352,11 @@ const fetchProfiles = async (
sensitive: propv('sensitive', () => JSON.parse(profile.sensitive)),
markdown: propv('markdown', () => !!profile.markdown),
events: propv('sensitive', () => JSON.parse(profile.events || '[]')),
customEvents: propv('sensitive', () => JSON.parse(profile.customEvents || '[]')),
customEvents: propv('sensitive', () => {
return JSON.parse(profile.customEvents || '[]').map((customEvent: Partial<CustomEvent>) => {
return { icon: 'user', ...customEvent };
});
}),
lastUpdate: propv('lastUpdate', () => profile.lastUpdate),
};
p[profile.locale] = profile_obj;

15
src/calendar/helpers.ts
View File

@ -77,7 +77,7 @@ type EventLevelValue = typeof EventLevel[keyof typeof EventLevel];
export class Event {
name: string;
flag: string | null;
display: { type: 'flag' | 'icon', name: string };
month: number;
generator: (monthDays: Generator<Day, void>) => Generator<Day, void>;
level: EventLevelValue;
@ -89,7 +89,7 @@ export class Event {
constructor(
name: string,
flag: string | null,
display: { type: 'flag' | 'icon', name: string } | string | null,
month: number,
generator: (monthDays: Generator<Day, void>) => Generator<Day, void>,
level: EventLevelValue,
@ -99,7 +99,13 @@ export class Event {
yearCondition: ((year: number) => boolean) | null = null,
) {
this.name = name;
this.flag = flag;
if (typeof display === 'string') {
this.display = { type: 'flag', name: display };
} else if (display === null) {
this.display = { type: 'icon', name: 'arrow-circle-right' };
} else {
this.display = display;
}
this.month = month;
this.generator = generator;
this.level = level;
@ -196,7 +202,7 @@ export class Event {
static fromCustom(customSettings: CustomEvent): Event {
return new Event(
customSettings.name,
null,
{ type: 'icon', name: customSettings.icon },
customSettings.month,
day(customSettings.day),
EventLevel.CustomDay,
@ -316,6 +322,7 @@ export function dayYear(day: number, year: number): (monthDays: Generator<Day, v
export interface CustomEvent {
month: number;
day: number;
icon: string;
name: string;
comment: string;
}