From dc0e55bf160ae2329da56ffb6686f699fd4b6444 Mon Sep 17 00:00:00 2001 From: tamaina Date: Tue, 21 Dec 2021 00:20:30 +0900 Subject: wip (#8077) --- packages/client/src/components/ui/modal.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/client/src/components') diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue index b09d04c450..3e2e59b27c 100644 --- a/packages/client/src/components/ui/modal.vue +++ b/packages/client/src/components/ui/modal.vue @@ -13,6 +13,7 @@ import { defineComponent, nextTick, onMounted, computed, PropType, ref, watch } from 'vue'; import * as os from '@/os'; import { isTouchUsing } from '@/scripts/touch'; +import { defaultStore } from '@/store'; function getFixedContainer(el: Element | null): Element | null { if (el == null || el.tagName === 'BODY') return null; @@ -77,7 +78,7 @@ export default defineComponent({ const zIndex = os.claimZIndex(props.zPriority); const type = computed(() => { if (props.preferType === 'auto') { - if (isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) { + if (!defaultStore.state.disableDrawer && isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) { return 'drawer'; } else { return props.src != null ? 'popup' : 'dialog'; -- cgit v1.2.3-freya From cc441258dbf8c60786c6eb6c70f9b8a45622037f Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 23 Dec 2021 16:10:13 +0900 Subject: enhance(client): tweak channel pages --- packages/client/src/components/ui/pagination.vue | 7 ++- packages/client/src/pages/channel-editor.vue | 34 +++++------ packages/client/src/pages/channel.vue | 56 ++++++++++-------- packages/client/src/pages/channels.vue | 75 +++++++++++++----------- 4 files changed, 96 insertions(+), 76 deletions(-) (limited to 'packages/client/src/components') diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue index 00200efd3c..64af4a54f7 100644 --- a/packages/client/src/components/ui/pagination.vue +++ b/packages/client/src/components/ui/pagination.vue @@ -5,7 +5,12 @@
- + +
+ +
{{ $ts.nothing }}
+
+
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue index 67b839bc3d..58c644be62 100644 --- a/packages/client/src/pages/channel-editor.vue +++ b/packages/client/src/pages/channel-editor.vue @@ -1,28 +1,26 @@ diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index a08c273279..3bc62b5b56 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -1,58 +1,63 @@ diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index 3bc62b5b56..48877ab3ec 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -39,7 +39,7 @@ export default defineComponent({ actions: [{ icon: 'fas fa-plus', text: this.$ts.create, - handler: this.create + handler: this.create, }], tabs: [{ active: this.tab === 'featured', diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts index 0df4baca7b..d0c6756eb1 100644 --- a/packages/client/src/scripts/use-tooltip.ts +++ b/packages/client/src/scripts/use-tooltip.ts @@ -18,6 +18,9 @@ export function useTooltip( const open = () => { close(); if (!isHovering) return; + if (elRef.value == null) return; + const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el; + if (!document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため const showing = ref(true); onShow(showing); -- cgit v1.2.3-freya From 2e80f9dfba1e82b8b649c127138c2553f5cdf760 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 23 Dec 2021 17:05:50 +0900 Subject: clean up --- locales/ja-JP.yml | 1 - packages/client/src/components/global/a.vue | 5 ----- packages/client/src/pages/settings/general.vue | 8 -------- packages/client/src/store.ts | 1 - 4 files changed, 15 deletions(-) (limited to 'packages/client/src/components') diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index f85e8f3e00..62aade568d 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -614,7 +614,6 @@ regenerateLoginToken: "ログイントークンを再生成" regenerateLoginTokenDescription: "ログインに使用される内部トークンを再生成します。通常この操作を行う必要はありません。再生成すると、全てのデバイスでログアウトされます。" setMultipleBySeparatingWithSpace: "スペースで区切って複数設定できます。" fileIdOrUrl: "ファイルIDまたはURL" -chatOpenBehavior: "チャットを開くときの動作" behavior: "動作" sample: "サンプル" abuseReports: "通報" diff --git a/packages/client/src/components/global/a.vue b/packages/client/src/components/global/a.vue index 5db61203c6..77ee7525a4 100644 --- a/packages/client/src/components/global/a.vue +++ b/packages/client/src/components/global/a.vue @@ -106,11 +106,6 @@ export default defineComponent({ return; } - if (this.to.startsWith('/my/messaging')) { - if (ColdDeviceStorage.get('chatOpenBehavior') === 'window') return this.window(); - if (ColdDeviceStorage.get('chatOpenBehavior') === 'popout') return this.popout(); - } - if (this.behavior) { if (this.behavior === 'window') { return this.window(); diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue index 83924382d8..734bc78442 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -77,13 +77,6 @@ {{ $ts.openInSideView }} - - - - - - - {{ $ts.deck }} {{ $ts.customCss }} @@ -149,7 +142,6 @@ export default defineComponent({ disablePagesScript: defaultStore.makeGetterSetter('disablePagesScript'), showFixedPostForm: defaultStore.makeGetterSetter('showFixedPostForm'), defaultSideView: defaultStore.makeGetterSetter('defaultSideView'), - chatOpenBehavior: ColdDeviceStorage.makeGetterSetter('chatOpenBehavior'), instanceTicker: defaultStore.makeGetterSetter('instanceTicker'), enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'), useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'), diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index 19d46bacea..dc9c3b7b9e 100644 --- a/packages/client/src/store.ts +++ b/packages/client/src/store.ts @@ -245,7 +245,6 @@ export class ColdDeviceStorage { lightTheme: require('@/themes/l-light.json5') as Theme, darkTheme: require('@/themes/d-dark.json5') as Theme, syncDeviceDarkMode: true, - chatOpenBehavior: 'page' as 'page' | 'window' | 'popout', plugins: [] as Plugin[], mediaVolume: 0.5, sound_masterVolume: 0.3, -- cgit v1.2.3-freya From 99ced12ac5c7ef5d4f835cdf054abdd55f888b5a Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 24 Dec 2021 01:07:04 +0900 Subject: fix(client): fix zindex issue Fix #8086 --- CHANGELOG.md | 7 +++++++ packages/client/src/components/media-list.vue | 9 +++++++++ 2 files changed, 16 insertions(+) (limited to 'packages/client/src/components') diff --git a/CHANGELOG.md b/CHANGELOG.md index e15c6d6463..743479ae4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,13 @@ --> +## 12.x.x (unreleased) + +### Improvements + +### Bugfixes +- クライアント: 一部のコンポーネントが裏に隠れるのを修正 + ## 12.100.2 (2021/12/18) ### Bugfixes diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/media-list.vue index c987ff5ff1..2970d06c97 100644 --- a/packages/client/src/components/media-list.vue +++ b/packages/client/src/components/media-list.vue @@ -105,6 +105,7 @@ export default defineComponent({ return { previewable, gallery, + pswpZIndex: os.claimZIndex('middle'), }; }, }); @@ -188,3 +189,11 @@ export default defineComponent({ } } + + -- cgit v1.2.3-freya From b4636631751449da34e2bad7e7276546c6fd3967 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 24 Dec 2021 12:34:24 +0900 Subject: enhance(client): tweak ui --- packages/client/src/components/page-window.vue | 26 +++++++++++++++++++++++++- packages/client/src/components/ui/window.vue | 5 ++++- packages/client/src/scripts/use-tooltip.ts | 7 ++++++- 3 files changed, 35 insertions(+), 3 deletions(-) (limited to 'packages/client/src/components') diff --git a/packages/client/src/components/page-window.vue b/packages/client/src/components/page-window.vue index 39c185b3e0..ec7451d5aa 100644 --- a/packages/client/src/components/page-window.vue +++ b/packages/client/src/components/page-window.vue @@ -16,7 +16,13 @@ -
+ + +
@@ -33,6 +39,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard'; import { resolve } from '@/router'; import { url } from '@/config'; import * as symbols from '@/symbols'; +import * as os from '@/os'; export default defineComponent({ components: { @@ -139,6 +146,23 @@ export default defineComponent({ this.props = props; }, + menu(ev) { + os.popupMenu([{ + icon: 'fas fa-external-link-alt', + text: this.$ts.openInNewTab, + action: () => { + window.open(this.url, '_blank'); + this.$refs.window.close(); + } + }, { + icon: 'fas fa-link', + text: this.$ts.copyLink, + action: () => { + copyToClipboard(this.url); + } + }], ev.currentTarget || ev.target); + }, + back() { this.navigate(this.history.pop(), false); }, diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue index d01498d8df..bd33289ccc 100644 --- a/packages/client/src/components/ui/window.vue +++ b/packages/client/src/components/ui/window.vue @@ -414,6 +414,10 @@ export default defineComponent({ } } + > .left { + min-width: 16px; + } + > .title { flex: 1; position: relative; @@ -421,7 +425,6 @@ export default defineComponent({ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - text-align: center; cursor: move; } } diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts index d0c6756eb1..bc8f27a038 100644 --- a/packages/client/src/scripts/use-tooltip.ts +++ b/packages/client/src/scripts/use-tooltip.ts @@ -1,4 +1,4 @@ -import { Ref, ref, watch } from 'vue'; +import { Ref, ref, watch, onUnmounted } from 'vue'; export function useTooltip( elRef: Ref, @@ -72,9 +72,14 @@ export function useTooltip( el.addEventListener('mouseleave', onMouseleave, { passive: true }); el.addEventListener('touchstart', onTouchstart, { passive: true }); el.addEventListener('touchend', onTouchend, { passive: true }); + el.addEventListener('click', close, { passive: true }); } }, { immediate: true, flush: 'post', }); + + onUnmounted(() => { + close(); + }); } -- cgit v1.2.3-freya From 8e7744a69582a05f43944d0db01ec4064988eca8 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 24 Dec 2021 23:25:23 +0900 Subject: fix(client): ドロワーメニューでセーフエリアを考慮するように MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/src/components/ui/menu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/client/src/components') diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue index 869709cf21..6f3f277b11 100644 --- a/packages/client/src/components/ui/menu.vue +++ b/packages/client/src/components/ui/menu.vue @@ -284,7 +284,7 @@ export default defineComponent({ } &.asDrawer { - padding: 12px 0; + padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0; width: 100%; > .item { -- cgit v1.2.3-freya From b05cfe4a840f2a98ad81d1705ce7e9682c4d3b5e Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 25 Dec 2021 15:49:37 +0900 Subject: enhance(client): improve note preview Fix #8029 --- CHANGELOG.md | 1 + packages/client/src/components/note-preview.vue | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/client/src/components') diff --git a/CHANGELOG.md b/CHANGELOG.md index 743479ae4b..d5fa7adfd5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## 12.x.x (unreleased) ### Improvements +- クライアント: ノートプレビューの精度を改善 ### Bugfixes - クライアント: 一部のコンポーネントが裏に隠れるのを修正 diff --git a/packages/client/src/components/note-preview.vue b/packages/client/src/components/note-preview.vue index 6e3eba9306..bdcb8d5eed 100644 --- a/packages/client/src/components/note-preview.vue +++ b/packages/client/src/components/note-preview.vue @@ -7,7 +7,7 @@
- +
@@ -61,6 +61,7 @@ export default defineComponent({ width: 40px; height: 40px; border-radius: 8px; + pointer-events: none; } > .main { @@ -69,6 +70,7 @@ export default defineComponent({ > .header { margin-bottom: 2px; + font-weight: bold; } > .body { -- cgit v1.2.3-freya From 89a532eeac36a99887b30703bbe7994f3d4bd5b3 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 25 Dec 2021 16:53:15 +0900 Subject: chore(client): tweak style --- packages/client/src/components/global/header.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/client/src/components') diff --git a/packages/client/src/components/global/header.vue b/packages/client/src/components/global/header.vue index 2e03d783af..a241ece407 100644 --- a/packages/client/src/components/global/header.vue +++ b/packages/client/src/components/global/header.vue @@ -6,7 +6,7 @@
- +
{{ info.title }}
{{ info.subtitle }} @@ -268,6 +268,7 @@ export default defineComponent({ > .titleContainer { display: flex; align-items: center; + max-width: 400px; overflow: auto; white-space: nowrap; text-align: left; -- cgit v1.2.3-freya From fe3609451ea6d257a9143b0ac7c60257cdb8541a Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 26 Dec 2021 01:42:50 +0900 Subject: enhance(client): :art: --- packages/client/src/components/form/input.vue | 9 +-- packages/client/src/components/form/select.vue | 9 ++- packages/client/src/components/form/switch.vue | 72 +++++++++-------------- packages/client/src/components/form/textarea.vue | 9 +-- packages/client/src/components/signup.vue | 11 +--- packages/client/src/directives/adaptive-border.ts | 24 ++++++++ packages/client/src/directives/index.ts | 2 + packages/client/src/directives/panel.ts | 2 +- packages/client/src/pages/settings/theme.vue | 2 +- 9 files changed, 74 insertions(+), 66 deletions(-) create mode 100644 packages/client/src/directives/adaptive-border.ts (limited to 'packages/client/src/components') diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue index c990b693f1..3533f4f27b 100644 --- a/packages/client/src/components/form/input.vue +++ b/packages/client/src/components/form/input.vue @@ -5,7 +5,7 @@
input { - border-color: var(--accent); + border-color: var(--accent) !important; //box-shadow: 0 0 0 4px var(--focus); } } diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue index 9ecff1aa6f..afc53ca9c8 100644 --- a/packages/client/src/components/form/select.vue +++ b/packages/client/src/components/form/select.vue @@ -3,7 +3,9 @@
- - - + + - +

@@ -55,16 +51,7 @@ export default defineComponent({ .ziffeoms { position: relative; display: flex; - cursor: pointer; - transition: all 0.3s; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } + transition: all 0.2s; > * { user-select: none; @@ -80,27 +67,30 @@ export default defineComponent({ > .button { position: relative; - display: inline-block; + display: inline-flex; flex-shrink: 0; margin: 0; - width: 36px; - height: 26px; - background: var(--switchBg); + box-sizing: border-box; + width: 23px; + height: 23px; outline: none; - border-radius: 999px; + background: var(--panel); + border: solid 1px var(--panel); + border-radius: 4px; + cursor: pointer; transition: inherit; - > .handle { - position: absolute; - top: 0; - bottom: 0; - left: 5px; - margin: auto 0; - border-radius: 100%; - transition: background-color 0.3s, transform 0.3s; - width: 16px; - height: 16px; - background-color: #fff; + > .check { + margin: auto; + opacity: 0; + color: var(--fgOnAccent); + font-size: 13px; + } + } + + &:hover { + > .button { + border-color: var(--inputBorderHover) !important; } } @@ -108,13 +98,13 @@ export default defineComponent({ margin-left: 16px; margin-top: 2px; display: block; - cursor: pointer; transition: inherit; color: var(--fg); > span { display: block; line-height: 20px; + cursor: pointer; transition: inherit; } @@ -129,12 +119,6 @@ export default defineComponent({ } } - &:hover { - > .button { - background-color: var(--accentedBg); - } - } - &.disabled { opacity: 0.6; cursor: not-allowed; @@ -142,11 +126,11 @@ export default defineComponent({ &.checked { > .button { - background-color: var(--accent); - border-color: var(--accent); + background-color: var(--accent) !important; + border-color: var(--accent) !important; - > .handle { - transform: translateX(10px); + > .check { + opacity: 1; } } } diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue index 98fd0da94b..c9ba9b97a2 100644 --- a/packages/client/src/components/form/textarea.vue +++ b/packages/client/src/components/form/textarea.vue @@ -4,7 +4,7 @@