usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

revert misskey-web ui (partially)

This commit is contained in:
kakkokari-gtyih 2023-04-07 22:46:19 +09:00
parent 4c1e13ddf2
commit ae22b5b5da
10 changed files with 63 additions and 366 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/backend/src/server/web/ClientServerService.ts
View File

@ -476,14 +476,6 @@ export class ClientServerService {
} }
}); });
// Note Embed
fastify.get<{ Params: { note: string; } }>('/notes/:note/embed', async (request, reply) => {
reply.removeHeader('X-Frame-Options');
reply.header("X-Robots-Tag", "noindex");
return await renderBase(reply);
});
// Page // Page
fastify.get<{ Params: { user: string; page: string; } }>('/@:user/pages/:page', async (request, reply) => { fastify.get<{ Params: { user: string; page: string; } }>('/@:user/pages/:page', async (request, reply) => {
const { username, host } = Acct.parse(request.params.user); const { username, host } = Acct.parse(request.params.user);

2
packages/frontend/package.json
View File

@ -39,7 +39,6 @@
"eventemitter3": "5.0.0", "eventemitter3": "5.0.0",
"gsap": "3.11.5", "gsap": "3.11.5",
"idb-keyval": "6.2.0", "idb-keyval": "6.2.0",
"iframe-resizer": "^4.3.6",
"insert-text-at-cursor": "0.3.0", "insert-text-at-cursor": "0.3.0",
"is-file-animated": "1.0.2", "is-file-animated": "1.0.2",
"json5": "2.2.3", "json5": "2.2.3",
@ -98,7 +97,6 @@
"@types/estree": "1.0.0", "@types/estree": "1.0.0",
"@types/gulp": "4.0.10", "@types/gulp": "4.0.10",
"@types/gulp-rename": "2.0.1", "@types/gulp-rename": "2.0.1",
"@types/iframe-resizer": "^3.5.9",
"@types/matter-js": "0.18.2", "@types/matter-js": "0.18.2",
"@types/micromatch": "3.1.1", "@types/micromatch": "3.1.1",
"@types/node": "18.15.11", "@types/node": "18.15.11",

107
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -54,11 +54,6 @@
<div class="username"><MkAcct :user="appearNote.user"/></div> <div class="username"><MkAcct :user="appearNote.user"/></div>
<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/> <MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
</div> </div>
<div v-if="embed" class="instance-info">
<button v-click-anime class="_button" @click="openInstanceMenu">
<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon"/>
</button>
</div>
</header> </header>
<div class="main"> <div class="main">
<div class="body"> <div class="body">
@ -96,54 +91,32 @@
</MkA> </MkA>
</div> </div>
<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/> <MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
<template v-if="embed"> <button class="button _button" @click="reply()">
<MkA class="button _button" :to="notePage(appearNote)"> <i class="ti ti-arrow-back-up"></i>
<i class="ti ti-arrow-back-up"></i> <p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p> </button>
</MkA> <button
<MkA v-if="canRenote" class="button _button" :to="notePage(appearNote)"> v-if="canRenote"
<i class="ti ti-repeat"></i> ref="renoteButton"
<p v-if="appearNote.renoteCount > 0" class="count">{{ appearNote.renoteCount }}</p> class="button _button"
</MkA> @mousedown="renote()"
<MkA v-if="appearNote.myReaction == null" class="button _button" :to="notePage(appearNote)"> >
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i> <i class="ti ti-repeat"></i>
<i v-else class="ti ti-plus"></i> <p v-if="appearNote.renoteCount > 0" class="count">{{ appearNote.renoteCount }}</p>
</MkA> </button>
<MkA v-if="appearNote.myReaction != null" class="button _button reacted" :to="notePage(appearNote)"> <button v-else class="button _button" disabled>
<i class="ti ti-minus"></i> <i class="ti ti-ban"></i>
</MkA> </button>
<MkA v-if="defaultStore.state.showClipButtonInNoteFooter" class="button _button" :to="notePage(appearNote)"> <button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @mousedown="react()">
<i class="ti ti-paperclip"></i> <i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
</MkA> <i v-else class="ti ti-plus"></i>
</template> </button>
<template v-else> <button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<button class="button _button" @click="reply()"> <i class="ti ti-minus"></i>
<i class="ti ti-arrow-back-up"></i> </button>
<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p> <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" class="button _button" @mousedown="clip()">
</button> <i class="ti ti-paperclip"></i>
<button </button>
v-if="canRenote"
ref="renoteButton"
class="button _button"
@mousedown="renote()"
>
<i class="ti ti-repeat"></i>
<p v-if="appearNote.renoteCount > 0" class="count">{{ appearNote.renoteCount }}</p>
</button>
<button v-else class="button _button" disabled>
<i class="ti ti-ban"></i>
</button>
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @mousedown="react()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<i class="ti ti-minus"></i>
</button>
<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" class="button _button" @mousedown="clip()">
<i class="ti ti-paperclip"></i>
</button>
</template>
<button ref="menuButton" class="button _button" @mousedown="menu()"> <button ref="menuButton" class="button _button" @mousedown="menu()">
<i class="ti ti-dots"></i> <i class="ti ti-dots"></i>
</button> </button>
@ -185,8 +158,6 @@ import { defaultStore, noteViewInterruptors } from '@/store';
import { reactionPicker } from '@/scripts/reaction-picker'; import { reactionPicker } from '@/scripts/reaction-picker';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
import { $i } from '@/account'; import { $i } from '@/account';
import { instance } from '@/instance';
import { openInstanceMenu } from '@/ui/_common_/common';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu'; import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu';
import { useNoteCapture } from '@/scripts/use-note-capture'; import { useNoteCapture } from '@/scripts/use-note-capture';
@ -199,7 +170,6 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
const props = defineProps<{ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
pinned?: boolean; pinned?: boolean;
embed?: boolean;
}>(); }>();
const inChannel = inject('inChannel', null); const inChannel = inject('inChannel', null);
@ -408,12 +378,12 @@ function onContextmenu(ev: MouseEvent): void {
ev.preventDefault(); ev.preventDefault();
react(); react();
} else { } else {
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, embed: props.embed }), ev).then(focus); os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
} }
} }
function menu(viaKeyboard = false): void { function menu(viaKeyboard = false): void {
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, embed: props.embed }), menuButton.value, { os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
viaKeyboard, viaKeyboard,
}).then(focus); }).then(focus);
} }
@ -494,10 +464,6 @@ if (appearNote.replyId) {
&:hover > .article > .main > .footer > .button { &:hover > .article > .main > .footer > .button {
opacity: 1; opacity: 1;
&:hover {
text-decoration: none;
}
} }
> .reply-to { > .reply-to {
@ -612,19 +578,6 @@ if (appearNote.replyId) {
word-wrap: anywhere; word-wrap: anywhere;
} }
} }
> .instance-info {
flex-shrink: 0;
padding-left: 16px;
width: 39px;
height: 39px;
img {
width: 100%;
height: auto;
border-radius: 4px;
}
}
} }
> .main { > .main {
@ -781,10 +734,6 @@ if (appearNote.replyId) {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
> .instance-info {
width: 33px;
height: 33px;
}
} }
> .main { > .main {

91
packages/frontend/src/components/global/MkA.vue
View File

@ -11,7 +11,6 @@ import { url } from '@/config';
import { popout as popout_ } from '@/scripts/popout'; import { popout as popout_ } from '@/scripts/popout';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { useRouter } from '@/router'; import { useRouter } from '@/router';
import { MenuItem } from '@/types/menu';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
to: string; to: string;
@ -34,60 +33,37 @@ const active = $computed(() => {
return resolved.route.name === router.currentRoute.value.name; return resolved.route.name === router.currentRoute.value.name;
}); });
function onContextmenu(ev : Event) { function onContextmenu(ev) {
const selection = window.getSelection(); const selection = window.getSelection();
if ((selection && selection.toString() !== '')) return; if (selection && selection.toString() !== '') return;
os.contextMenu([{
let contextMenuItem: MenuItem[] = []; type: 'label',
text: props.to,
if (router.currentRoute.value.name?.toLowerCase().includes("embed")) { }, {
contextMenuItem = [{ icon: 'ti ti-app-window',
type: 'label', text: i18n.ts.openInWindow,
text: props.to, action: () => {
}, { os.pageWindow(props.to);
icon: 'ti ti-external-link', },
text: i18n.ts.openInNewTab, }, {
action: () => { icon: 'ti ti-player-eject',
window.open(props.to, '_blank'); text: i18n.ts.showInPage,
}, action: () => {
}, { router.push(props.to, 'forcePage');
icon: 'ti ti-link', },
text: i18n.ts.copyLink, }, null, {
action: () => { icon: 'ti ti-external-link',
copyToClipboard(`${url}${props.to}`); text: i18n.ts.openInNewTab,
}, action: () => {
}]; window.open(props.to, '_blank');
} else { },
contextMenuItem = [{ }, {
type: 'label', icon: 'ti ti-link',
text: props.to, text: i18n.ts.copyLink,
}, { action: () => {
icon: 'ti ti-app-window', copyToClipboard(`${url}${props.to}`);
text: i18n.ts.openInWindow, },
action: () => { }], ev);
os.pageWindow(props.to);
},
}, {
icon: 'ti ti-player-eject',
text: i18n.ts.showInPage,
action: () => {
router.push(props.to, 'forcePage');
},
}, null, {
icon: 'ti ti-external-link',
text: i18n.ts.openInNewTab,
action: () => {
window.open(props.to, '_blank');
},
}, {
icon: 'ti ti-link',
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(`${url}${props.to}`);
},
}];
}
os.contextMenu(contextMenuItem, ev);
} }
function openWindow() { function openWindow() {
@ -103,11 +79,6 @@ function popout() {
} }
function nav(ev: MouseEvent) { function nav(ev: MouseEvent) {
if (router.currentRoute.value.name?.toLowerCase().includes("embed")) {
window.open(props.to, '_blank');
return;
}
if (props.behavior === 'browser') { if (props.behavior === 'browser') {
location.href = props.to; location.href = props.to;
return; return;
@ -127,4 +98,4 @@ function nav(ev: MouseEvent) {
router.push(props.to, ev.ctrlKey ? 'forcePage' : null); router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
} }
</script> </script>

1
packages/frontend/src/init.ts
View File

@ -187,7 +187,6 @@ try {
} catch (err) {} } catch (err) {}
const app = createApp( const app = createApp(
window.location.href.includes("/embed") ? defineAsyncComponent(() => import('@/ui/embed.vue')) :
window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) : !$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) : ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :

147
packages/frontend/src/pages/note-embed.vue
View File

@ -1,147 +0,0 @@
<template>
<div class="fcuexfpr">
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="note" class="note">
<div class="main">
<div class="note _gaps_s">
<MkRemoteCaution v-if="note.user.host != null" :href="notePage(note)"/>
<MkNoteDetailed :key="note.id" v-model:note="note" :embed="true" class="note"/>
</div>
</div>
</div>
<MkError v-else-if="error" @retry="fetchNote()"/>
<MkLoading v-else/>
</Transition>
</div>
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import * as misskey from 'misskey-js';
import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
import * as os from '@/os';
import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n';
import { dateString } from '@/filters/date';
import MkClipPreview from '@/components/MkClipPreview.vue';
import { defaultStore } from '@/store';
import { notePage } from '@/filters/note';
const props = defineProps<{
noteId: string;
}>();
let note = $ref<null | misskey.entities.Note>();
let error = $ref();
function fetchNote() {
note = null;
os.api('notes/show', {
noteId: props.noteId,
}).then(res => {
note = res;
Promise.all([
os.api('users/notes', {
userId: note.userId,
untilId: note.id,
limit: 1,
}),
os.api('users/notes', {
userId: note.userId,
sinceId: note.id,
limit: 1,
}),
]);
}).catch(err => {
error = err;
});
}
function goNotePage() {
window.open(notePage(note), "_blank");
}
watch(() => props.noteId, fetchNote, {
immediate: true,
});
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata(computed(() => note ? {
title: i18n.ts.note,
subtitle: dateString(note.createdAt),
avatar: note.user,
path: `/notes/${note.id}/embed`,
share: {
title: i18n.t('noteOf', { user: note.user.name }),
text: note.text,
},
} : null));
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fcuexfpr {
border-radius: var(--radius);
border: 1px solid var(--divider);
background: var(--panel);
> .note {
height: 100%;
position: relative;
> a {
z-index: 0;
position: relative;
&:hover {
text-decoration: none;
}
> .main {
z-index: 1;
position: relative;
> .load {
min-width: 0;
margin: 0 auto;
border-radius: 999px;
&.next {
margin-bottom: var(--margin);
}
&.prev {
margin-top: var(--margin);
}
}
> .note {
> .note {
border-radius: var(--radius);
background: var(--panel);
}
}
> .clips {
> .title {
font-weight: bold;
padding: 12px;
}
}
}
}
}
}
</style>

4
packages/frontend/src/router.ts
View File

@ -30,10 +30,6 @@ export const routes = [{
name: 'note', name: 'note',
path: '/notes/:noteId', path: '/notes/:noteId',
component: page(() => import('./pages/note.vue')), component: page(() => import('./pages/note.vue')),
}, {
name: 'noteEmbed',
path: '/notes/:noteId/embed',
component: page(() => import('./pages/note-embed.vue')),
}, { }, {
path: '/clips/:clipId', path: '/clips/:clipId',
component: page(() => import('./pages/clip.vue')), component: page(() => import('./pages/clip.vue')),

11
packages/frontend/src/scripts/get-note-menu.ts
View File

@ -94,7 +94,6 @@ export function getNoteMenu(props: {
translating: Ref<boolean>; translating: Ref<boolean>;
isDeleted: Ref<boolean>; isDeleted: Ref<boolean>;
currentClip?: misskey.entities.Clip; currentClip?: misskey.entities.Clip;
embed?: boolean;
}) { }) {
const isRenote = ( const isRenote = (
props.note.renote != null && props.note.renote != null &&
@ -235,7 +234,7 @@ export function getNoteMenu(props: {
} }
let menu; let menu;
if ($i && !props.embed) { if ($i) {
const statePromise = os.api('notes/state', { const statePromise = os.api('notes/state', {
noteId: appearNote.id, noteId: appearNote.id,
}); });
@ -275,13 +274,11 @@ export function getNoteMenu(props: {
icon: 'ti ti-share', icon: 'ti ti-share',
text: i18n.ts.share, text: i18n.ts.share,
action: share, action: share,
}, }, {
(!props.embed) ? {
icon: 'ti ti-code', icon: 'ti ti-code',
text: i18n.ts.copyEmbedCode, text: i18n.ts.copyEmbedCode,
action: copyEmbedCode, action: copyEmbedCode,
} : undefined, }, instance.translatorAvailable ? {
instance.translatorAvailable ? {
icon: 'ti ti-language-hiragana', icon: 'ti ti-language-hiragana',
text: i18n.ts.translate, text: i18n.ts.translate,
action: translate, action: translate,
@ -389,7 +386,7 @@ export function getNoteMenu(props: {
action: () => { action: () => {
window.open(appearNote.url ?? appearNote.uri, '_blank'); window.open(appearNote.url ?? appearNote.uri, '_blank');
}, },
} : undefined, (!props.embed) ? { } : undefined, (!appearNote.url && !appearNote.uri) ? {
icon: 'ti ti-code', icon: 'ti ti-code',
text: i18n.ts.copyEmbedCode, text: i18n.ts.copyEmbedCode,
action: copyEmbedCode, action: copyEmbedCode,

43
packages/frontend/src/ui/embed.vue
View File

@ -1,43 +0,0 @@
<template>
<div class="mk-app" style="container-type: inline-size;">
<component
:is="popup.component"
v-for="popup in popups"
:key="popup.id"
v-bind="popup.props"
v-on="popup.events"
/>
<RouterView/>
</div>
</template>
<script lang="ts" setup>
import { provide, ComputedRef } from 'vue';
import { mainRouter } from '@/router';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { instanceName } from '@/config';
import { popups } from '@/os';
import 'iframe-resizer/js/iframeResizer.contentWindow';
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
provide('router', mainRouter);
provideMetadataReceiver((info) => {
pageMetadata = info;
if (pageMetadata.value) {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
}
});
document.documentElement.style.backgroundColor = "transparent";
document.documentElement.style.maxWidth = "650px";
</script>
<style lang="scss" scoped>
.mk-app {
max-width: 650px;
min-width: 0;
box-sizing: border-box;
background-color: transparent;
}
</style>

15
pnpm-lock.yaml
View File

@ -663,9 +663,6 @@ importers:
idb-keyval: idb-keyval:
specifier: 6.2.0 specifier: 6.2.0
version: 6.2.0 version: 6.2.0
iframe-resizer:
specifier: ^4.3.6
version: 4.3.6
insert-text-at-cursor: insert-text-at-cursor:
specifier: 0.3.0 specifier: 0.3.0
version: 0.3.0 version: 0.3.0
@ -835,9 +832,6 @@ importers:
'@types/gulp-rename': '@types/gulp-rename':
specifier: 2.0.1 specifier: 2.0.1
version: 2.0.1 version: 2.0.1
'@types/iframe-resizer':
specifier: ^3.5.9
version: 3.5.9
'@types/matter-js': '@types/matter-js':
specifier: 0.18.2 specifier: 0.18.2
version: 0.18.2 version: 0.18.2
@ -6599,10 +6593,6 @@ packages:
/@types/http-cache-semantics@4.0.1: /@types/http-cache-semantics@4.0.1:
resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==} resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
/@types/iframe-resizer@3.5.9:
resolution: {integrity: sha512-RQUBI75F+uXruB95BFpC/8V8lPgJg4MQ6HxOCtAZYBB/h0FNCfrFfb4I+u2pZJIV7sKeszZbFqy1UnGeBMrvsA==}
dev: true
/@types/ioredis@4.28.10: /@types/ioredis@4.28.10:
resolution: {integrity: sha512-69LyhUgrXdgcNDv7ogs1qXZomnfOEnSmrmMFqKgt1XMJxmoOSG/u3wYy13yACIfKuMJ8IhKgHafDO3sx19zVQQ==} resolution: {integrity: sha512-69LyhUgrXdgcNDv7ogs1qXZomnfOEnSmrmMFqKgt1XMJxmoOSG/u3wYy13yACIfKuMJ8IhKgHafDO3sx19zVQQ==}
dependencies: dependencies:
@ -12536,11 +12526,6 @@ packages:
/ieee754@1.2.1: /ieee754@1.2.1:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
/iframe-resizer@4.3.6:
resolution: {integrity: sha512-wz0WodRIF6eP0oGQa5NIP1yrITAZ59ZJvVaVJqJRjaeCtfm461vy2C3us6CKx0e7pooqpIGLpVMSTzrfAjX9Sg==}
engines: {node: '>=0.8.0'}
dev: false
/ignore@5.2.4: /ignore@5.2.4:
resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==} resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
engines: {node: '>= 4'} engines: {node: '>= 4'}