From 748a451e233f71dd493f7dd80062278dacaa5e1c Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 8 Oct 2021 22:03:06 +0900 Subject: [PATCH] :art: --- src/client/components/modal-page-window.vue | 3 +- src/client/components/page-window.vue | 10 ++++-- src/client/components/ui/window.vue | 21 ++++++++----- src/client/directives/get-size.ts | 34 ++++++++++++++++++++ src/client/directives/index.ts | 2 ++ src/client/pages/settings/index.vue | 1 + src/client/pages/settings/profile.vue | 3 +- src/client/ui/_common_/header.vue | 35 +++++++-------------- src/client/ui/chat/index.vue | 2 +- src/client/ui/chat/side.vue | 2 +- src/client/ui/deck/main-column.vue | 5 ++- src/client/ui/default.header.vue | 2 +- src/client/ui/default.side.vue | 3 +- src/client/ui/default.vue | 11 +++---- src/client/ui/universal.vue | 22 +++---------- 15 files changed, 93 insertions(+), 63 deletions(-) create mode 100644 src/client/directives/get-size.ts diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue index e7d96f7a6..f57516360 100644 --- a/src/client/components/modal-page-window.vue +++ b/src/client/components/modal-page-window.vue @@ -3,10 +3,11 @@
- +
+ diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue index fbc9f0b7f..a8a8b7610 100644 --- a/src/client/components/page-window.vue +++ b/src/client/components/page-window.vue @@ -3,14 +3,20 @@ :initial-width="500" :initial-height="500" :can-resize="true" - :close-button="false" + :close-button="true" :contextmenu="contextmenu" @closed="$emit('closed')" > +
+
diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue index 773c3b9b1..6a7c61a7d 100644 --- a/src/client/components/ui/window.vue +++ b/src/client/components/ui/window.vue @@ -3,11 +3,16 @@
- - + + + + + + +
@@ -418,12 +423,14 @@ export default defineComponent({ height: var(--height); border-bottom: solid 1px var(--divider); - > ::v-deep(button) { - height: var(--height); - width: var(--height); + > .left, > .right { + > ::v-deep(button) { + height: var(--height); + width: var(--height); - &:hover { - color: var(--fgHighlighted); + &:hover { + color: var(--fgHighlighted); + } } } diff --git a/src/client/directives/get-size.ts b/src/client/directives/get-size.ts new file mode 100644 index 000000000..e3b5dea0f --- /dev/null +++ b/src/client/directives/get-size.ts @@ -0,0 +1,34 @@ +import { Directive } from 'vue'; + +export default { + mounted(src, binding, vn) { + const calc = () => { + const height = src.clientHeight; + const width = src.clientWidth; + + // 要素が(一時的に)DOMに存在しないときは計算スキップ + if (height === 0) return; + + binding.value(width, height); + }; + + calc(); + + // Vue3では使えなくなった + // 無くても大丈夫か...？ + // TODO: ↑大丈夫じゃなかったので解決策を探す + //vn.context.$on('hook:activated', calc); + + const ro = new ResizeObserver((entries, observer) => { + calc(); + }); + ro.observe(src); + + src._get_size_ro_ = ro; + }, + + unmounted(src, binding, vn) { + binding.value(0, 0); + src._get_size_ro_.unobserve(src); + } +} as Directive; diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts index f0a012377..cd71bc26d 100644 --- a/src/client/directives/index.ts +++ b/src/client/directives/index.ts @@ -2,6 +2,7 @@ import { App } from 'vue'; import userPreview from './user-preview'; import size from './size'; +import getSize from './get-size'; import particle from './particle'; import tooltip from './tooltip'; import hotkey from './hotkey'; @@ -14,6 +15,7 @@ export default function(app: App) { app.directive('userPreview', userPreview); app.directive('user-preview', userPreview); app.directive('size', size); + app.directive('get-size', getSize); app.directive('particle', particle); app.directive('tooltip', tooltip); app.directive('hotkey', hotkey); diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue index cb86fdca7..3a8503ac5 100644 --- a/src/client/pages/settings/index.vue +++ b/src/client/pages/settings/index.vue @@ -74,6 +74,7 @@ export default defineComponent({ title: i18n.locale.settings, icon: 'fas fa-cog', bg: 'var(--bg)', + hide: true, }; const INFO = ref(indexInfo); const page = ref(props.initialPage); diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue index 3c93e9348..eb9bc6565 100644 --- a/src/client/pages/settings/profile.vue +++ b/src/client/pages/settings/profile.vue @@ -77,7 +77,8 @@ export default defineComponent({ [symbols.PAGE_INFO]: { title: this.$ts.profile, icon: 'fas fa-user', - bg: 'var(--bg)' + bg: 'var(--bg)', + hide: true, }, host, langs, diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue index f21be2f9c..5405c43f8 100644 --- a/src/client/ui/_common_/header.vue +++ b/src/client/ui/_common_/header.vue @@ -1,10 +1,5 @@ @@ -52,20 +46,9 @@ export default defineComponent({ menu: { required: false }, - backButton: { - type: Boolean, + thin: { required: false, - default: false, - }, - closeButton: { - type: Boolean, - required: false, - default: false, - }, - titleOnly: { - type: Boolean, - required: false, - default: false, + default: false }, }, @@ -99,11 +82,9 @@ export default defineComponent({ }, mounted() { - this.height = this.$el.parentElement.offsetHeight + 'px'; - this.narrow = this.titleOnly || this.$el.parentElement.offsetWidth < 500; + this.narrow = this.$el.offsetWidth < 500; new ResizeObserver((entries, observer) => { - this.height = this.$el.parentElement.offsetHeight + 'px'; - this.narrow = this.titleOnly || this.$el.parentElement.offsetWidth < 500; + this.narrow = this.$el.offsetWidth < 500; }).observe(this.$el); }, @@ -161,8 +142,13 @@ export default defineComponent({