keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-29 17:13:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

rename some CSS and JS names

Browse source
This commit is contained in:
Hazel K 2024-10-02 00:20:39 -04:00
parent eb2c2e261b
commit e031877a9e
2 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/frontend/src/components/FollowingFeedEntry.vue
View file

@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div :class="$style.root" @click="$emit('select', note.userId)"> <div :class="$style.root" @click="$emit('select', note.userId)">
<div :class="$style.head"> <div :class="$style.avatar">
<MkAvatar :class="$style.icon" :user="note.user" indictor/> <MkAvatar :class="$style.icon" :user="note.user" indictor/>
</div> </div>
<div :class="$style.tail"> <div :class="$style.contents">
<header :class="$style.header"> <header :class="$style.header">
<MkA v-user-preview="note.user.id" :class="$style.headerName" :to="userPage(note.user)"> <MkA v-user-preview="note.user.id" :class="$style.headerName" :to="userPage(note.user)">
<MkUserName :user="note.user"/> <MkUserName :user="note.user"/>
@ -51,7 +51,7 @@ defineEmits<{
contain: content; contain: content;
} }
.head { .avatar {
align-self: center; align-self: center;
flex-shrink: 0; flex-shrink: 0;
width: 42px; width: 42px;
@ -59,7 +59,7 @@ defineEmits<{
margin-right: 8px; margin-right: 8px;
} }
.tail { .contents {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }

40
packages/frontend/src/pages/following-feed.vue
View file

@ -9,8 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<MkSpacer :contentMax="1200"> <MkSpacer :contentMax="1200">
<div :class="$style.columns"> <div :class="$style.columns">
<MkPullToRefresh :refresher="() => reloadList()"> <MkPullToRefresh :refresher="() => reloadLatestNotes()">
<MkPagination ref="listPaging" :pagination="listPagination" @init="onListReady"> <MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/> <img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
@ -19,19 +19,19 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<template #default="{ items: notes }"> <template #default="{ items: notes }">
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.list" :noGap="true"> <MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
<FollowingFeedEntry :note="note" @select="selectUser"/> <FollowingFeedEntry :note="note" @select="selectUser"/>
</MkDateSeparatedList> </MkDateSeparatedList>
</template> </template>
</MkPagination> </MkPagination>
</MkPullToRefresh> </MkPullToRefresh>
<MkPullToRefresh :refresher="() => reloadUser()"> <MkPullToRefresh :refresher="() => reloadUserNotes()">
<div v-if="selectedUser" :class="$style.userInfo"> <div v-if="selectedUser" :class="$style.userInfo">
<MkUserInfo class="user" :user="selectedUser"/> <MkUserInfo class="user" :user="selectedUser"/>
<MkNotes :noGap="true" :pagination="userPagination"/> <MkNotes :noGap="true" :pagination="userNotesPagination"/>
</div> </div>
<div v-else-if="selectedUserError" :class="$style.list">{{ selectedUserError }}</div> <div v-else-if="selectedUserError" :class="$style.panel">{{ selectedUserError }}</div>
<MkLoading v-else-if="selectedUserId"/> <MkLoading v-else-if="selectedUserId"/>
</MkPullToRefresh> </MkPullToRefresh>
</div> </div>
@ -98,27 +98,25 @@ async function selectUser(userId: string): Promise<void> {
} }
} }
const listPaging = shallowRef<InstanceType<typeof MkPagination>>(); async function reloadLatestNotes() {
await latestNotesPaging.value?.reload();
async function reloadList() {
await listPaging.value?.reload();
} }
async function reloadUser() { async function reloadUserNotes() {
await selectUser(selectedUserId.value); await selectUser(selectedUserId.value);
} }
async function reloadBoth() { async function reload() {
await Promise.all([ await Promise.all([
reloadList(), reloadLatestNotes(),
reloadUser(), reloadUserNotes(),
]); ]);
} }
async function onListReady(): Promise<void> { async function onListReady(): Promise<void> {
if (!selectedUserId.value && listPaging.value?.items.size) { if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
// This just gets the first user ID // This just gets the first user ID
const selectedNote: Misskey.entities.Note = listPaging.value.items.values().next().value; const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value;
// Wait for 1 second to match the animation effects. // Wait for 1 second to match the animation effects.
// Otherwise, the page appears to load "backwards". // Otherwise, the page appears to load "backwards".
@ -127,7 +125,9 @@ async function onListReady(): Promise<void> {
} }
} }
const listPagination: Paging<'notes/following'> = { const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
const latestNotesPagination: Paging<'notes/following'> = {
endpoint: 'notes/following' as const, endpoint: 'notes/following' as const,
limit: 20, limit: 20,
params: computed(() => ({ params: computed(() => ({
@ -135,7 +135,7 @@ const listPagination: Paging<'notes/following'> = {
})), })),
}; };
const userPagination: Paging<'users/notes'> = { const userNotesPagination: Paging<'users/notes'> = {
endpoint: 'users/notes' as const, endpoint: 'users/notes' as const,
limit: 10, limit: 10,
params: computed(() => ({ params: computed(() => ({
@ -151,7 +151,7 @@ const headerActions: PageHeaderItem[] = [
{ {
icon: 'ti ti-refresh', icon: 'ti ti-refresh',
text: i18n.ts.reload, text: i18n.ts.reload,
handler: () => reloadBoth(), handler: () => reload(),
}, },
]; ];
@ -176,7 +176,7 @@ definePageMetadata(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.list { .panel {
background: var(--panel); background: var(--panel);
} }