From 946ba2a8ae1eaa5cda2aabea0dadb421a22c5398 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 25 Apr 2021 12:00:56 +0900 Subject: Improve usability --- src/client/ui/chat/index.vue | 2 +- src/client/ui/deck/main-column.vue | 2 +- src/client/ui/default.vue | 2 +- src/client/ui/universal.vue | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client') diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue index be1bd7758a..bf55cc2b3f 100644 --- a/src/client/ui/chat/index.vue +++ b/src/client/ui/chat/index.vue @@ -313,7 +313,7 @@ export default defineComponent({ } }; if (isLink(e.target)) return; - if (['INPUT', 'TEXTAREA', 'IMG'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; + if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; if (window.getSelection().toString() !== '') return; const path = this.$route.path; os.contextMenu([{ diff --git a/src/client/ui/deck/main-column.vue b/src/client/ui/deck/main-column.vue index de36fd5966..7b5b50fedc 100644 --- a/src/client/ui/deck/main-column.vue +++ b/src/client/ui/deck/main-column.vue @@ -64,7 +64,7 @@ export default defineComponent({ } }; if (isLink(e.target)) return; - if (['INPUT', 'TEXTAREA', 'IMG'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; + if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; if (window.getSelection().toString() !== '') return; const path = this.$route.path; os.contextMenu([{ diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue index 6cfb680719..64fdef2947 100644 --- a/src/client/ui/default.vue +++ b/src/client/ui/default.vue @@ -165,7 +165,7 @@ export default defineComponent({ } }; if (isLink(e.target)) return; - if (['INPUT', 'TEXTAREA', 'IMG'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; + if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; if (window.getSelection().toString() !== '') return; const path = this.$route.path; os.contextMenu([{ diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue index 478fa13076..ad3c616b8e 100644 --- a/src/client/ui/universal.vue +++ b/src/client/ui/universal.vue @@ -191,7 +191,7 @@ export default defineComponent({ } }; if (isLink(e.target)) return; - if (['INPUT', 'TEXTAREA', 'IMG'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; + if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; if (window.getSelection().toString() !== '') return; const path = this.$route.path; os.contextMenu([{ -- cgit v1.2.3-freya From c384c4ca6c8d21cc83882193f78b28ba138088c5 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 25 Apr 2021 12:01:00 +0900 Subject: Tweak UI --- src/client/components/launch-pad.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client') diff --git a/src/client/components/launch-pad.vue b/src/client/components/launch-pad.vue index e66bbd73e4..936ca85730 100644 --- a/src/client/components/launch-pad.vue +++ b/src/client/components/launch-pad.vue @@ -16,15 +16,15 @@
- +
{{ $ts.help }}
 - +
{{ $t('aboutX', { x: instanceName }) }}
 - +
{{ $ts.aboutMisskey }}
 -- cgit v1.2.3-freya From 23821d6fadf7eefe2a8291277ffa8273d3a41dab Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 25 Apr 2021 12:31:11 +0900 Subject: Improve client --- src/client/components/launch-pad.vue | 4 +- src/client/pages/about.vue | 96 +++++++++++++++++++++--------------- src/client/pages/instance-info.vue | 3 +- src/client/ui/default.sidebar.vue | 25 +++++++--- 4 files changed, 78 insertions(+), 50 deletions(-) (limited to 'src/client') diff --git a/src/client/components/launch-pad.vue b/src/client/components/launch-pad.vue index 936ca85730..58b74bdaee 100644 --- a/src/client/components/launch-pad.vue +++ b/src/client/components/launch-pad.vue @@ -25,7 +25,7 @@
{{ $t('aboutX', { x: instanceName }) }}
 - +
{{ $ts.aboutMisskey }}
@@ -101,6 +101,7 @@ export default defineComponent({ flex-direction: column; align-items: center; justify-content: center; + vertical-align: bottom; width: 128px; height: 128px; border-radius: var(--radius); @@ -117,6 +118,7 @@ export default defineComponent({ > .icon { font-size: 26px; + height: 32px; } > .text { diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue index 4f70998eee..bdd4c78827 100644 --- a/src/client/pages/about.vue +++ b/src/client/pages/about.vue @@ -1,39 +1,57 @@ @@ -45,9 +63,12 @@ import FormLink from '@client/components/form/link.vue'; import FormBase from '@client/components/form/base.vue'; import FormGroup from '@client/components/form/group.vue'; import FormKeyValueView from '@client/components/form/key-value-view.vue'; +import FormTextarea from '@client/components/form/textarea.vue'; +import FormSuspense from '@client/components/form/suspense.vue'; import * as os from '@client/os'; import number from '@client/filters/number'; import * as symbols from '@client/symbols'; +import { host } from '@client/config'; export default defineComponent({ components: { @@ -55,6 +76,8 @@ export default defineComponent({ FormGroup, FormLink, FormKeyValueView, + FormTextarea, + FormSuspense, }, data() { @@ -63,24 +86,17 @@ export default defineComponent({ title: this.$ts.instanceInfo, icon: 'fas fa-info-circle' }, + host, version, instanceName, stats: null, + initStats: () => os.api('stats', { + }).then((stats) => { + this.stats = stats; + }) } }, - computed: { - meta() { - return this.$instance; - }, - }, - - created() { - os.api('stats').then(stats => { - this.stats = stats; - }); - }, - methods: { number } @@ -88,18 +104,20 @@ export default defineComponent({ diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue index 662b82ddb1..c66ad50f6d 100644 --- a/src/client/pages/instance-info.vue +++ b/src/client/pages/instance-info.vue @@ -147,7 +147,6 @@ import * as os from '@client/os'; import number from '@client/filters/number'; import bytes from '@client/filters/bytes'; import * as symbols from '@client/symbols'; -import { url } from '@client/config'; const chartLimit = 90; const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b)); @@ -449,7 +448,7 @@ export default defineComponent({ .fnfelxur { padding: 16px; - > img { + > .icon { display: block; margin: auto; height: 64px; diff --git a/src/client/ui/default.sidebar.vue b/src/client/ui/default.sidebar.vue index a55a1770ff..725fd844d9 100644 --- a/src/client/ui/default.sidebar.vue +++ b/src/client/ui/default.sidebar.vue @@ -31,8 +31,10 @@ {{ $ts.settings }}
-
- +
+ + +
@@ -260,14 +262,21 @@ export default defineComponent({ } } - > .misskey { + > .about { fill: currentColor; - } - - > .foo { - text-align: center; padding: 8px 0 16px 0; - opacity: 0.5; + text-align: center; + + > .link { + display: block; + width: 32px; + margin: 0 auto; + + img { + display: block; + width: 100%; + } + } } > .item { -- cgit v1.2.3-freya From 3f6a55aabdc87b13ea6ea28beb1ff49bf1d5552f Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 25 Apr 2021 15:14:26 +0900 Subject: Tweak UI --- src/client/pages/gallery/post.vue | 14 +-- src/client/pages/page.vue | 199 ++++++++++++++++++++++++++++++-------- 2 files changed, 163 insertions(+), 50 deletions(-) (limited to 'src/client') diff --git a/src/client/pages/gallery/post.vue b/src/client/pages/gallery/post.vue index 86fae99888..9bd102cee2 100644 --- a/src/client/pages/gallery/post.vue +++ b/src/client/pages/gallery/post.vue @@ -19,7 +19,7 @@ {{ post.likedCount }}
- +
@@ -125,6 +125,12 @@ export default defineComponent({ }); }, + shareWithNote() { + os.post({ + initialText: `${this.post.title} ${url}/gallery/${this.post.id}` + }); + }, + like() { os.apiWithDialog('gallery/posts/like', { postId: this.postId, @@ -148,12 +154,6 @@ export default defineComponent({ this.post.likedCount--; }); }, - - createNote() { - os.post({ - initialText: `${this.post.title} ${url}/gallery/${this.post.id}` - }); - } } }); diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue index e43add7b0b..6ee3ee8d26 100644 --- a/src/client/pages/page.vue +++ b/src/client/pages/page.vue @@ -1,35 +1,60 @@ @@ -39,11 +64,20 @@ import XPage from '@client/components/page/page.vue'; import MkButton from '@client/components/ui/button.vue'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; +import { url } from '@client/config'; +import MkFollowButton from '@client/components/follow-button.vue'; +import MkContainer from '@client/components/ui/container.vue'; +import MkPagination from '@client/components/ui/pagination.vue'; +import MkPagePreview from '@client/components/page-preview.vue'; export default defineComponent({ components: { XPage, MkButton, + MkFollowButton, + MkContainer, + MkPagination, + MkPagePreview, }, props: { @@ -69,6 +103,14 @@ export default defineComponent({ }, } : null), page: null, + error: null, + otherPostsPagination: { + endpoint: 'users/pages', + limit: 6, + params: () => ({ + userId: this.page.user.id + }) + }, }; }, @@ -90,11 +132,28 @@ export default defineComponent({ methods: { fetch() { + this.page = null; os.api('pages/show', { name: this.pageName, username: this.username, }).then(page => { this.page = page; + }).catch(e => { + this.error = e; + }); + }, + + share() { + navigator.share({ + title: this.page.title || this.page.name, + text: this.page.summary, + url: `${url}/@${this.page.user.username}/pages/${this.page.name}` + }); + }, + + shareWithNote() { + os.post({ + initialText: `${this.page.title || this.page.name} ${url}/@${this.page.user.username}/pages/${this.page.name}` }); }, @@ -132,6 +191,15 @@ export default defineComponent({