graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-24 14:53:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

tweak client

Browse source 
Fix #8856
This commit is contained in:
syuilo 2022-06-21 14:12:39 +09:00
parent 3796a3edea
commit ce6cc21bcd
6 changed files with 195 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
packages/client/src/components/abuse-report.vue
View file

@ -1,13 +1,19 @@
<template> <template>
<div class="bcekxzvu _card _gap"> <div class="bcekxzvu _gap _panel">
<div class="_content target"> <div class="target">
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/> <MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`" :behavior="'window'">
<MkA v-user-preview="report.targetUserId" class="info" :to="userPage(report.targetUser)"> <MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
<MkUserName class="name" :user="report.targetUser"/> <div class="names">
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/> <MkUserName class="name" :user="report.targetUser"/>
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
</div>
</MkA> </MkA>
<MkKeyValue class="_formBlock">
<template #key>{{ $ts.registeredDate }}</template>
<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
</MkKeyValue>
</div> </div>
<div class="_content"> <div class="detail">
<div> <div>
<Mfm :text="report.comment"/> <Mfm :text="report.comment"/>
</div> </div>
@ -18,85 +24,84 @@
<MkAcct :user="report.assignee"/> <MkAcct :user="report.assignee"/>
</div> </div>
<div><MkTime :time="report.createdAt"/></div> <div><MkTime :time="report.createdAt"/></div>
</div> <div class="action">
<div class="_footer"> <MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved"> {{ $ts.forwardReport }}
{{ $ts.forwardReport }} <template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
<template #caption>{{ $ts.forwardReportIsAnonymous }}</template> </MkSwitch>
</MkSwitch> <MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import MkKeyValue from '@/components/key-value.vue';
import { acct, userPage } from '@/filters/user'; import { acct, userPage } from '@/filters/user';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ const props = defineProps<{
components: { report: any;
MkButton, }>();
MkSwitch,
},
props: { const emit = defineEmits<{
report: { (ev: 'resolved', reportId: string): void;
type: Object, }>();
required: true,
}
},
emits: ['resolved'], let forward = $ref(props.report.forwarded);
data() { function resolve() {
return { os.apiWithDialog('admin/resolve-abuse-user-report', {
forward: this.report.forwarded, forward: forward,
}; reportId: props.report.id,
}, }).then(() => {
emit('resolved', props.report.id);
methods: { });
acct, }
userPage,
resolve() {
os.apiWithDialog('admin/resolve-abuse-user-report', {
forward: this.forward,
reportId: this.report.id,
}).then(() => {
this.$emit('resolved', this.report.id);
});
}
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bcekxzvu { .bcekxzvu {
display: flex;
> .target { > .target {
display: flex; width: 35%;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
align-items: center; padding: 24px;
border-right: solid 1px var(--divider);
> .avatar {
width: 42px;
height: 42px;
}
> .info { > .info {
margin-left: 0.3em; display: flex;
padding: 0 8px; box-sizing: border-box;
flex: 1; align-items: center;
padding: 14px;
border-radius: 8px;
background-image: linear-gradient(45deg, rgb(255 196 0 / 15%) 16.67%, transparent 16.67%, transparent 50%, rgb(255 196 0 / 15%) 50%, rgb(255 196 0 / 15%) 66.67%, transparent 66.67%, transparent 100%);
background-size: 16px 16px;
> .name { > .avatar {
font-weight: bold; width: 42px;
height: 42px;
}
> .names {
margin-left: 0.3em;
padding: 0 8px;
flex: 1;
> .name {
font-weight: bold;
}
} }
} }
} }
> .detail {
flex: 1;
padding: 24px;
}
} }
</style> </style>

11
packages/client/src/nirax.ts
View file

@ -107,10 +107,15 @@ export class Router extends EventEmitter<{
} }
break pathMatchLoop; break pathMatchLoop;
} else { } else {
if (p.startsWith && (parts[0] == null || !parts[0].startsWith(p.startsWith))) continue forEachRouteLoop; if (p.startsWith) {
if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
props.set(p.name, parts[0]); props.set(p.name, parts[0].substring(p.startsWith.length));
parts.shift(); parts.shift();
} else {
props.set(p.name, parts[0]);
parts.shift();
}
} }
} }
} }

54
packages/client/src/pages/page-editor/page-editor.vue
View file

@ -151,21 +151,21 @@ watch($$(eyeCatchingImageId), async () => {
function getSaveOptions() { function getSaveOptions() {
return { return {
title: tatitle.trim(), title: title.trim(),
name: taname.trim(), name: name.trim(),
summary: tasummary, summary: summary,
font: tafont, font: font,
script: tascript, script: script,
hideTitleWhenPinned: tahideTitleWhenPinned, hideTitleWhenPinned: hideTitleWhenPinned,
alignCenter: taalignCenter, alignCenter: alignCenter,
content: tacontent, content: content,
variables: tavariables, variables: variables,
eyeCatchingImageId: taeyeCatchingImageId, eyeCatchingImageId: eyeCatchingImageId,
}; };
} }
function save() { function save() {
const options = tagetSaveOptions(); const options = getSaveOptions();
const onError = err => { const onError = err => {
if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') { if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
@ -184,11 +184,11 @@ function save() {
} }
}; };
if (tapageId) { if (pageId) {
options.pageId = tapageId; options.pageId = pageId;
os.api('pages/update', options) os.api('pages/update', options)
.then(page => { .then(page => {
tacurrentName = taname.trim(); currentName = name.trim();
os.alert({ os.alert({
type: 'success', type: 'success',
text: i18n.ts._pages.updated, text: i18n.ts._pages.updated,
@ -197,8 +197,8 @@ function save() {
} else { } else {
os.api('pages/create', options) os.api('pages/create', options)
.then(created => { .then(created => {
tapageId = created.id; pageId = created.id;
tacurrentName = name.trim(); currentName = name.trim();
os.alert({ os.alert({
type: 'success', type: 'success',
text: i18n.ts._pages.created, text: i18n.ts._pages.created,
@ -227,11 +227,11 @@ function del() {
} }
function duplicate() { function duplicate() {
tatitle = tatitle + ' - copy'; title = title + ' - copy';
taname = taname + '-copy'; name = name + '-copy';
os.api('pages/create', tagetSaveOptions()).then(created => { os.api('pages/create', getSaveOptions()).then(created => {
tapageId = created.id; pageId = created.id;
tacurrentName = taname.trim(); currentName = name.trim();
os.alert({ os.alert({
type: 'success', type: 'success',
text: i18n.ts._pages.created, text: i18n.ts._pages.created,
@ -244,12 +244,12 @@ async function add() {
const { canceled, result: type } = await os.select({ const { canceled, result: type } = await os.select({
type: null, type: null,
title: i18n.ts._pages.chooseBlock, title: i18n.ts._pages.chooseBlock,
groupedItems: tagetPageBlockList(), groupedItems: getPageBlockList(),
}); });
if (canceled) return; if (canceled) return;
const id = uuid(); const id = uuid();
tacontent.push({ id, type }); content.push({ id, type });
} }
async function addVariable() { async function addVariable() {
@ -260,7 +260,7 @@ async function addVariable() {
name = name.trim(); name = name.trim();
if (tahpml.isUsedName(name)) { if (hpml.isUsedName(name)) {
os.alert({ os.alert({
type: 'error', type: 'error',
text: i18n.ts._pages.variableNameIsAlreadyUsed, text: i18n.ts._pages.variableNameIsAlreadyUsed,
@ -269,11 +269,11 @@ async function addVariable() {
} }
const id = uuid(); const id = uuid();
tavariables.push({ id, name, type: null }); variables.push({ id, name, type: null });
} }
function removeVariable(v) { function removeVariable(v) {
tavariables = tavariables.filter(x => x.name !== v.name); variables = variables.filter(x => x.name !== v.name);
} }
function getPageBlockList() { function getPageBlockList() {
@ -352,7 +352,7 @@ function setEyeCatchingImage(e) {
} }
function removeEyeCatchingImage() { function removeEyeCatchingImage() {
taeyeCatchingImageId = null; eyeCatchingImageId = null;
} }
function highlighter(code) { function highlighter(code) {

102
packages/client/src/pages/page.vue
View file

@ -1,63 +1,65 @@
<template><MkStickyContainer> <template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh"> <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
<div class="_block main"> <div class="_block main">
<!-- <!--
<div class="header"> <div class="header">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
</div> </div>
--> -->
<div class="banner"> <div class="banner">
<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/> <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> </div>
<div class="other"> <div class="content">
<button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button> <XPage :page="page"/>
<button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button> </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>
<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> </div>
</div> </div>
<div class="user"> <div class="footer">
<MkAvatar :user="page.user" class="avatar"/> <div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
<div class="name"> <div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
<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> </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>
<div class="footer"> <MkError v-else-if="error" @retry="fetchPage()"/>
<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div> <MkLoading v-else/>
<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div> </transition>
</div> </MkSpacer>
<MkAd :prefer="['horizontal', 'horizontal-big']"/> </MkStickyContainer>
<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>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

35
packages/client/src/pages/timeline.vue
View file

@ -109,23 +109,7 @@ function focus(): void {
tlComponent.focus(); tlComponent.focus();
} }
const headerActions = $computed(() => [{ 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 headerTabs = $computed(() => [{ const headerTabs = $computed(() => [{
active: src === 'home', active: src === 'home',
@ -151,7 +135,22 @@ const headerTabs = $computed(() => [{
icon: 'fas fa-globe', icon: 'fas fa-globe',
iconOnly: true, iconOnly: true,
onClick: () => { saveSrc('global'); }, 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(() => ({ definePageMetadata(computed(() => ({
title: i18n.ts.timeline, title: i18n.ts.timeline,

46
packages/client/src/pages/user-list-timeline.vue
View file

@ -1,17 +1,20 @@
<template> <template>
<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj"> <MkStickyContainer>
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div class="tl _block"> <div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
<XTimeline <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
ref="tlEl" :key="listId" <div class="tl _block">
class="tl" <XTimeline
src="list" ref="tlEl" :key="listId"
:list="listId" class="tl"
:sound="true" src="list"
@queue="queueUpdated" :list="listId"
/> :sound="true"
@queue="queueUpdated"
/>
</div>
</div> </div>
</div> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -61,7 +64,15 @@ async function timetravel() {
tlEl.timetravel(date); 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(() => []); const headerTabs = $computed(() => []);
@ -69,15 +80,6 @@ definePageMetadata(computed(() => list ? {
title: list.name, title: list.name,
icon: 'fas fa-list-ul', icon: 'fas fa-list-ul',
bg: 'var(--bg)', 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)); } : null));
</script> </script>