summaryrefslogtreecommitdiff
path: root/packages/client/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/pages')
-rw-r--r--packages/client/src/pages/page-editor/page-editor.vue54
-rw-r--r--packages/client/src/pages/page.vue100
-rw-r--r--packages/client/src/pages/timeline.vue35
-rw-r--r--packages/client/src/pages/user-list-timeline.vue46
4 files changed, 119 insertions, 116 deletions
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 1061e19dce..c09d9af734 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -151,21 +151,21 @@ watch($$(eyeCatchingImageId), async () => {
function getSaveOptions() {
return {
- title: tatitle.trim(),
- name: taname.trim(),
- summary: tasummary,
- font: tafont,
- script: tascript,
- hideTitleWhenPinned: tahideTitleWhenPinned,
- alignCenter: taalignCenter,
- content: tacontent,
- variables: tavariables,
- eyeCatchingImageId: taeyeCatchingImageId,
+ title: title.trim(),
+ name: name.trim(),
+ summary: summary,
+ font: font,
+ script: script,
+ hideTitleWhenPinned: hideTitleWhenPinned,
+ alignCenter: alignCenter,
+ content: content,
+ variables: variables,
+ eyeCatchingImageId: eyeCatchingImageId,
};
}
function save() {
- const options = tagetSaveOptions();
+ const options = getSaveOptions();
const onError = err => {
if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
@@ -184,11 +184,11 @@ function save() {
}
};
- if (tapageId) {
- options.pageId = tapageId;
+ if (pageId) {
+ options.pageId = pageId;
os.api('pages/update', options)
.then(page => {
- tacurrentName = taname.trim();
+ currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.updated,
@@ -197,8 +197,8 @@ function save() {
} else {
os.api('pages/create', options)
.then(created => {
- tapageId = created.id;
- tacurrentName = name.trim();
+ pageId = created.id;
+ currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.created,
@@ -227,11 +227,11 @@ function del() {
}
function duplicate() {
- tatitle = tatitle + ' - copy';
- taname = taname + '-copy';
- os.api('pages/create', tagetSaveOptions()).then(created => {
- tapageId = created.id;
- tacurrentName = taname.trim();
+ title = title + ' - copy';
+ name = name + '-copy';
+ os.api('pages/create', getSaveOptions()).then(created => {
+ pageId = created.id;
+ currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.created,
@@ -244,12 +244,12 @@ async function add() {
const { canceled, result: type } = await os.select({
type: null,
title: i18n.ts._pages.chooseBlock,
- groupedItems: tagetPageBlockList(),
+ groupedItems: getPageBlockList(),
});
if (canceled) return;
const id = uuid();
- tacontent.push({ id, type });
+ content.push({ id, type });
}
async function addVariable() {
@@ -260,7 +260,7 @@ async function addVariable() {
name = name.trim();
- if (tahpml.isUsedName(name)) {
+ if (hpml.isUsedName(name)) {
os.alert({
type: 'error',
text: i18n.ts._pages.variableNameIsAlreadyUsed,
@@ -269,11 +269,11 @@ async function addVariable() {
}
const id = uuid();
- tavariables.push({ id, name, type: null });
+ variables.push({ id, name, type: null });
}
function removeVariable(v) {
- tavariables = tavariables.filter(x => x.name !== v.name);
+ variables = variables.filter(x => x.name !== v.name);
}
function getPageBlockList() {
@@ -352,7 +352,7 @@ function setEyeCatchingImage(e) {
}
function removeEyeCatchingImage() {
- taeyeCatchingImageId = null;
+ eyeCatchingImageId = null;
}
function highlighter(code) {
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 71b404bbf4..c60b7069e9 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,63 +1,65 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
- <MkSpacer :content-max="700">
- <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
- <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
- <div class="_block main">
- <!--
+ <MkSpacer :content-max="700">
+ <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+ <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
+ <div class="_block main">
+ <!--
<div class="header">
<h1>{{ page.title }}</h1>
</div>
-->
- <div class="banner">
- <img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
- </div>
- <div class="content">
- <XPage :page="page"/>
- </div>
- <div class="actions">
- <div class="like">
- <MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
- <MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+ <div class="banner">
+ <img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
</div>
- <div class="other">
- <button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
- <button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+ <div class="content">
+ <XPage :page="page"/>
</div>
- </div>
- <div class="user">
- <MkAvatar :user="page.user" class="avatar"/>
- <div class="name">
- <MkUserName :user="page.user" style="display: block;"/>
- <MkAcct :user="page.user"/>
+ <div class="actions">
+ <div class="like">
+ <MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+ <MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+ </div>
+ <div class="other">
+ <button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+ <button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+ </div>
+ </div>
+ <div class="user">
+ <MkAvatar :user="page.user" class="avatar"/>
+ <div class="name">
+ <MkUserName :user="page.user" style="display: block;"/>
+ <MkAcct :user="page.user"/>
+ </div>
+ <MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+ </div>
+ <div class="links">
+ <MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
+ <template v-if="$i && $i.id === page.userId">
+ <MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
+ <button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
+ <button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
+ </template>
</div>
- <MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
</div>
- <div class="links">
- <MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
- <template v-if="$i && $i.id === page.userId">
- <MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
- <button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
- <button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
- </template>
+ <div class="footer">
+ <div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+ <div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
</div>
+ <MkAd :prefer="['horizontal', 'horizontal-big']"/>
+ <MkContainer :max-height="300" :foldable="true" class="other">
+ <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
+ <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
+ <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
+ </MkPagination>
+ </MkContainer>
</div>
- <div class="footer">
- <div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
- <div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
- </div>
- <MkAd :prefer="['horizontal', 'horizontal-big']"/>
- <MkContainer :max-height="300" :foldable="true" class="other">
- <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
- <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
- <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
- </MkPagination>
- </MkContainer>
- </div>
- <MkError v-else-if="error" @retry="fetch()"/>
- <MkLoading v-else/>
- </transition>
-</MkSpacer></MkStickyContainer>
+ <MkError v-else-if="error" @retry="fetchPage()"/>
+ <MkLoading v-else/>
+ </transition>
+ </MkSpacer>
+</MkStickyContainer>
</template>
<script lang="ts" setup>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index e0f0a1f151..111451632c 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -109,23 +109,7 @@ function focus(): void {
tlComponent.focus();
}
-const headerActions = $computed(() => [{
- icon: 'fas fa-list-ul',
- text: i18n.ts.lists,
- handler: chooseList,
-}, {
- icon: 'fas fa-satellite',
- text: i18n.ts.antennas,
- handler: chooseAntenna,
-}, {
- icon: 'fas fa-satellite-dish',
- text: i18n.ts.channel,
- handler: chooseChannel,
-}, {
- icon: 'fas fa-calendar-alt',
- text: i18n.ts.jumpToSpecifiedDate,
- handler: timetravel,
-}]);
+const headerActions = $computed(() => []);
const headerTabs = $computed(() => [{
active: src === 'home',
@@ -151,7 +135,22 @@ const headerTabs = $computed(() => [{
icon: 'fas fa-globe',
iconOnly: true,
onClick: () => { saveSrc('global'); },
-}] : [])]);
+}] : []), {
+ icon: 'fas fa-list-ul',
+ title: i18n.ts.lists,
+ iconOnly: true,
+ onClick: chooseList,
+}, {
+ icon: 'fas fa-satellite',
+ title: i18n.ts.antennas,
+ iconOnly: true,
+ onClick: chooseAntenna,
+}, {
+ icon: 'fas fa-satellite-dish',
+ title: i18n.ts.channel,
+ iconOnly: true,
+ onClick: chooseChannel,
+}]);
definePageMetadata(computed(() => ({
title: i18n.ts.timeline,
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 9783088a19..07d5a166e9 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,17 +1,20 @@
<template>
-<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj">
- <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
- <div class="tl _block">
- <XTimeline
- ref="tlEl" :key="listId"
- class="tl"
- src="list"
- :list="listId"
- :sound="true"
- @queue="queueUpdated"
- />
+<MkStickyContainer>
+ <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+ <div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
+ <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+ <div class="tl _block">
+ <XTimeline
+ ref="tlEl" :key="listId"
+ class="tl"
+ src="list"
+ :list="listId"
+ :sound="true"
+ @queue="queueUpdated"
+ />
+ </div>
</div>
-</div>
+</MkStickyContainer>
</template>
<script lang="ts" setup>
@@ -61,7 +64,15 @@ async function timetravel() {
tlEl.timetravel(date);
}
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => list ? [{
+ icon: 'fas fa-calendar-alt',
+ text: i18n.ts.jumpToSpecifiedDate,
+ handler: timetravel,
+}, {
+ icon: 'fas fa-cog',
+ text: i18n.ts.settings,
+ handler: settings,
+}] : []);
const headerTabs = $computed(() => []);
@@ -69,15 +80,6 @@ definePageMetadata(computed(() => list ? {
title: list.name,
icon: 'fas fa-list-ul',
bg: 'var(--bg)',
- actions: [{
- icon: 'fas fa-calendar-alt',
- text: i18n.ts.jumpToSpecifiedDate,
- handler: timetravel,
- }, {
- icon: 'fas fa-cog',
- text: i18n.ts.settings,
- handler: settings,
- }],
} : null));
</script>
generated by cgit v1.3.1-freya (git 2.54.0) at 2026-05-26 19:35:10 +0000