From 9c34ef7d74116612c21e2d2dfe38809491c0611a Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 16 Apr 2021 09:41:56 +0900 Subject: Improve UI --- src/client/components/ui/container.vue | 65 ++++++++++++++++++++++++++++------ src/client/pages/user/index.photos.vue | 27 ++++++-------- 2 files changed, 65 insertions(+), 27 deletions(-) (limited to 'src/client') diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue index 427421af7d..ef90a348b4 100644 --- a/src/client/components/ui/container.vue +++ b/src/client/components/ui/container.vue @@ -16,8 +16,11 @@ @leave="leave" @after-leave="afterLeave" > -
+
+
@@ -54,10 +57,17 @@ export default defineComponent({ required: false, default: false }, + maxHeight: { + type: Number, + required: false, + default: null + }, }, data() { return { showBody: this.expanded, + omitted: null, + ignoreOmit: false, faAngleUp, faAngleDown }; }, @@ -73,6 +83,19 @@ export default defineComponent({ }, { immediate: true }); + + this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px'); + + const calcOmit = () => { + if (this.omitted || this.ignoreOmit || this.maxHeight == null) return; + const height = this.$refs.content.offsetHeight; + this.omitted = height > this.maxHeight; + }; + + calcOmit(); + new ResizeObserver((entries, observer) => { + calcOmit(); + }).observe(this.$refs.content); }, methods: { toggleContent(show: boolean) { @@ -127,7 +150,7 @@ export default defineComponent({ display: flex; flex-direction: column; - > div { + > .content { overflow: auto; } } @@ -169,12 +192,35 @@ export default defineComponent({ } } - > div { - > ::v-deep(._content) { - padding: 24px; + > .content { + &.omitted { + position: relative; + max-height: var(--maxHeight); + overflow: hidden; + + > .fade { + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 64px; + background: linear-gradient(0deg, var(--panel), var(--X15)); - & + ._content { - border-top: solid 0.5px var(--divider); + > span { + display: inline-block; + background: var(--panel); + padding: 6px 10px; + font-size: 0.8em; + border-radius: 999px; + box-shadow: 0 2px 6px rgb(0 0 0 / 20%); + } + + &:hover { + > span { + background: var(--panelHighlight); + } + } } } } @@ -187,10 +233,7 @@ export default defineComponent({ } } - > div { - > ::v-deep(._content) { - padding: 16px; - } + > .content { } } } diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue index 54796bccbc..b5493fd9f2 100644 --- a/src/client/pages/user/index.photos.vue +++ b/src/client/pages/user/index.photos.vue @@ -1,5 +1,5 @@ @@ -62,18 +62,11 @@ export default defineComponent({ position: sticky; height: min-content; box-sizing: border-box; + padding-bottom: 8px; - > * { - margin: var(--margin) 0; - width: 300px; - - &:first-child { - margin-top: 0; - } - } - - > .add { - margin: 0 auto; + > .edit { + display: block; + margin: 16px auto; } } -- cgit v1.2.3-freya From e5fbc68e0e0b06cc620a7cb2494d6c03139d9627 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 16 Apr 2021 17:34:06 +0900 Subject: 詳細ユーザー情報ページなど MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/ja-JP.yml | 3 + src/client/components/form/base.vue | 10 +-- src/client/components/form/group.vue | 52 +++++++++-- src/client/components/form/key-value-view.vue | 2 +- src/client/components/form/object-view.vue | 102 +++++++++++++++++++++ src/client/components/form/suspense.vue | 76 ++++++++++++++++ src/client/pages/instance-info.vue | 124 ++++++++++++++++++++++++++ src/client/pages/user-ap-info.vue | 122 +++++++++++++++++++++++++ src/client/pages/user-info.vue | 87 ++++++++++++++++++ src/client/router.ts | 3 + src/client/scripts/get-user-menu.ts | 8 +- src/client/style.scss | 2 +- src/models/repositories/user.ts | 1 + src/server/api/endpoints/ap/get.ts | 38 ++++++++ 14 files changed, 614 insertions(+), 16 deletions(-) create mode 100644 src/client/components/form/object-view.vue create mode 100644 src/client/components/form/suspense.vue create mode 100644 src/client/pages/instance-info.vue create mode 100644 src/client/pages/user-ap-info.vue create mode 100644 src/client/pages/user-info.vue create mode 100644 src/server/api/endpoints/ap/get.ts (limited to 'src/client') diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 741a5a6191..86deff6753 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -719,6 +719,9 @@ quitFullView: "フルビュー解除" addDescription: "説明を追加" userPagePinTip: "個々のノートのメニューから「ピン留め」を選択することで、ここにノートを表示しておくことができます。" notSpecifiedMentionWarning: "宛先に含まれていないメンションがあります" +info: "情報" +userInfo: "ユーザー情報" +unknown: "不明" _email: _follow: diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue index 84438a5b32..de46d1bd19 100644 --- a/src/client/components/form/base.vue +++ b/src/client/components/form/base.vue @@ -40,16 +40,16 @@ export default defineComponent({ } ._form_group { - > * { - &:not(:first-child) { + > *:not(._formNoConcat) { + &:not(:last-child):not(._formNoConcatPrev) { &._formPanel, ._formPanel { - border-top: none; + border-bottom: solid 0.5px var(--divider); } } - &:not(:last-child) { + &:not(:first-child):not(._formNoConcatNext) { &._formPanel, ._formPanel { - border-bottom: solid 0.5px var(--divider); + border-top: none; } } } diff --git a/src/client/components/form/group.vue b/src/client/components/form/group.vue index 9af33013a1..34ccaeff07 100644 --- a/src/client/components/form/group.vue +++ b/src/client/components/form/group.vue @@ -1,7 +1,7 @@ diff --git a/src/client/components/form/suspense.vue b/src/client/components/form/suspense.vue new file mode 100644 index 0000000000..4b47cb959b --- /dev/null +++ b/src/client/components/form/suspense.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue new file mode 100644 index 0000000000..420ecc31b8 --- /dev/null +++ b/src/client/pages/instance-info.vue @@ -0,0 +1,124 @@ + + + diff --git a/src/client/pages/user-ap-info.vue b/src/client/pages/user-ap-info.vue new file mode 100644 index 0000000000..d86437830d --- /dev/null +++ b/src/client/pages/user-ap-info.vue @@ -0,0 +1,122 @@ + + + diff --git a/src/client/pages/user-info.vue b/src/client/pages/user-info.vue new file mode 100644 index 0000000000..a1ff561060 --- /dev/null +++ b/src/client/pages/user-info.vue @@ -0,0 +1,87 @@ + + + diff --git a/src/client/router.ts b/src/client/router.ts index 3effb2edbe..bf45c806e2 100644 --- a/src/client/router.ts +++ b/src/client/router.ts @@ -72,6 +72,9 @@ export const router = createRouter({ { path: '/instance/abuses', component: page('instance/abuses') }, { path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) }, { path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) }, + { path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) }, + { path: '/user-ap-info/:user', component: page('user-ap-info'), props: route => ({ userId: route.params.user }) }, + { path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) }, { path: '/games/reversi', component: page('reversi/index') }, { path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) }, { path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') }, diff --git a/src/client/scripts/get-user-menu.ts b/src/client/scripts/get-user-menu.ts index 163eff619c..0496e87502 100644 --- a/src/client/scripts/get-user-menu.ts +++ b/src/client/scripts/get-user-menu.ts @@ -1,4 +1,4 @@ -import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash, faPlug, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; +import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash, faPlug, faExclamationCircle, faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import { faSnowflake, faEnvelope } from '@fortawesome/free-regular-svg-icons'; import { i18n } from '@client/i18n'; import copyToClipboard from '@client/scripts/copy-to-clipboard'; @@ -126,6 +126,12 @@ export function getUserMenu(user) { action: () => { copyToClipboard(`@${user.username}@${user.host || host}`); } + }, { + icon: faInfoCircle, + text: i18n.locale.info, + action: () => { + os.pageWindow(`/user-info/${user.id}`); + } }, { icon: faEnvelope, text: i18n.locale.sendMessage, diff --git a/src/client/style.scss b/src/client/style.scss index b12299422c..eadf56bf37 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -455,7 +455,7 @@ hr { } ._monospace { - font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace; + font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important; } ._code { diff --git a/src/models/repositories/user.ts b/src/models/repositories/user.ts index bb084f0245..203b878fbb 100644 --- a/src/models/repositories/user.ts +++ b/src/models/repositories/user.ts @@ -195,6 +195,7 @@ export class UserRepository extends Repository { ...(opts.detail ? { url: profile!.url, + uri: user.uri, createdAt: user.createdAt.toISOString(), updatedAt: user.updatedAt ? user.updatedAt.toISOString() : null, bannerUrl: user.bannerUrl, diff --git a/src/server/api/endpoints/ap/get.ts b/src/server/api/endpoints/ap/get.ts new file mode 100644 index 0000000000..c889d472bb --- /dev/null +++ b/src/server/api/endpoints/ap/get.ts @@ -0,0 +1,38 @@ +import $ from 'cafy'; +import define from '../../define'; +import Resolver from '../../../../remote/activitypub/resolver'; +import { ApiError } from '../../error'; + +export const meta = { + tags: ['federation'], + + desc: { + 'ja-JP': 'URIを指定してActivityPubオブジェクトを参照します。', + 'en-US': 'Browse to the ActivityPub object by specifying the URI.' + }, + + requireCredential: false as const, + + params: { + uri: { + validator: $.str, + desc: { + 'ja-JP': 'ActivityPubオブジェクトのURI' + } + }, + }, + + errors: { + }, + + res: { + type: 'object' as const, + optional: false as const, nullable: false as const, + } +}; + +export default define(meta, async (ps) => { + const resolver = new Resolver(); + const object = await resolver.resolve(ps.uri); + return object; +}); -- cgit v1.2.3-freya From f169585a553eef1f9613d7af5334f98037dfeef7 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 16 Apr 2021 17:52:45 +0900 Subject: Tweak style --- src/client/components/form/key-value-view.vue | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client') diff --git a/src/client/components/form/key-value-view.vue b/src/client/components/form/key-value-view.vue index ebe9b6d049..85f4febef9 100644 --- a/src/client/components/form/key-value-view.vue +++ b/src/client/components/form/key-value-view.vue @@ -24,6 +24,7 @@ export default defineComponent({ > .key { margin-right: 12px; + white-space: nowrap; } > .value { -- cgit v1.2.3-freya From e68ff286499471f9879b8b8001104826ea077acd Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 16 Apr 2021 21:47:12 +0900 Subject: Improve client --- src/client/pages/instance-info.vue | 325 +++++++++++++++++++++++++++++++++++-- src/client/pages/user-info.vue | 23 ++- 2 files changed, 330 insertions(+), 18 deletions(-) (limited to 'src/client') diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue index 420ecc31b8..5c1210c4bd 100644 --- a/src/client/pages/instance-info.vue +++ b/src/client/pages/instance-info.vue @@ -2,28 +2,35 @@ - - - - + +
+
+ +
+
+ + + + + - + - + - + - + @@ -47,6 +54,33 @@ +
+
{{ $ts.statistics }}
+
+
+ + + + + + + + + + + + + + + + + +
+
+ +
+
+
@@ -62,7 +96,8 @@ + + diff --git a/src/client/pages/user-info.vue b/src/client/pages/user-info.vue index a1ff561060..1d714cac33 100644 --- a/src/client/pages/user-info.vue +++ b/src/client/pages/user-info.vue @@ -1,6 +1,8 @@ diff --git a/src/client/components/global/loading.vue b/src/client/components/global/loading.vue index 5d0c10c086..17d71b5c7b 100644 --- a/src/client/components/global/loading.vue +++ b/src/client/components/global/loading.vue @@ -1,5 +1,5 @@ @@ -14,6 +14,11 @@ export default defineComponent({ type: Boolean, required: false, default: false + }, + colored: { + type: Boolean, + required: false, + default: true } } }); @@ -32,6 +37,11 @@ export default defineComponent({ .yxspomdl { padding: 32px; text-align: center; + cursor: wait; + + &.colored { + color: var(--accent); + } &.inline { display: inline; @@ -41,24 +51,43 @@ export default defineComponent({ width: 32px; height: 32px; } + + > .ring { + &:before, + &:after { + width: 32px; + height: 32px; + } + } } > .ring { + position: relative; display: inline-block; - opacity: 0.7; vertical-align: middle; - } - > .ring:after { - content: " "; - display: block; - box-sizing: border-box; - width: 48px; - height: 48px; - border-radius: 50%; - border: solid 4px; - border-color: currentColor transparent transparent transparent; - animation: ring 0.5s linear infinite; + &:before, + &:after { + content: " "; + display: block; + box-sizing: border-box; + width: 48px; + height: 48px; + border-radius: 50%; + border: solid 4px; + } + + &:before { + border-color: currentColor; + opacity: 0.3; + } + + &:after { + position: absolute; + top: 0; + border-color: currentColor transparent transparent transparent; + animation: ring 0.5s linear infinite; + } } } diff --git a/src/client/pages/user-ap-info.vue b/src/client/pages/user-ap-info.vue index d86437830d..3f2920402f 100644 --- a/src/client/pages/user-ap-info.vue +++ b/src/client/pages/user-ap-info.vue @@ -1,8 +1,8 @@ -- cgit v1.2.3-freya From 0d680b060ef1025a253bea956287fe9b1df05843 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 16 Apr 2021 23:19:39 +0900 Subject: Tweak UI --- src/client/components/notes.vue | 2 ++ src/client/components/notifications.vue | 2 ++ src/client/ui/chat/notes.vue | 2 ++ 3 files changed, 6 insertions(+) (limited to 'src/client') diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index aedf11bc40..3bcdf7dfda 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -5,6 +5,8 @@
{{ $ts.noNotes }}
+ +
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue index 0891108d8b..12d2d2cbd2 100644 --- a/src/client/components/notifications.vue +++ b/src/client/components/notifications.vue @@ -1,5 +1,7 @@