From b3779875d0845cebc8cd0d8e937ce0979ba846f7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 9 Oct 2021 00:46:52 +0900
Subject: [PATCH] :art:
---
src/client/components/modal-page-window.vue | 46 ++++++++++++++++-----
src/client/ui/_common_/header.vue | 8 ++--
2 files changed, 40 insertions(+), 14 deletions(-)
diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index f57516360d..31931a89b7 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -2,12 +2,16 @@
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu">
- <span class="title">
-
+ <button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
+ <span v-else style="display: inline-block; width: 20px"></span>
+ <span v-if="pageInfo" class="title">
+ <i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon"></i>
+ <span>{{ pageInfo.title }}</span>
</span>
+ <button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
</div>
<div class="body _flat_">
- <XHeader :info="pageInfo"/>
+ <XHeader v-if="!pageInfo?.hide" :info="pageInfo"/>
<keep-alive>
<component :is="component" v-bind="props" :ref="changePage"/>
</keep-alive>
@@ -173,19 +177,39 @@ export default defineComponent({
$height-narrow: 42px;
display: flex;
flex-shrink: 0;
+ height: $height;
+ line-height: $height;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
box-shadow: 0px 1px var(--divider);
+ > button {
+ height: $height;
+ width: $height;
+
+ &:hover {
+ color: var(--fgHighlighted);
+ }
+ }
+
+ @media (max-width: 500px) {
+ height: $height-narrow;
+ line-height: $height-narrow;
+ padding-left: 16px;
+
+ > button {
+ height: $height-narrow;
+ width: $height-narrow;
+ }
+ }
+
> .title {
flex: 1;
- height: $height;
- font-weight: bold;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- @media (max-width: 500px) {
- height: $height-narrow;
- padding-left: 16px;
+ > .icon {
+ margin-right: 0.5em;
}
}
}
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index 5405c43f8c..ca3d47dc76 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -82,10 +82,11 @@ export default defineComponent({
},
mounted() {
- this.narrow = this.$el.offsetWidth < 500;
+ if (this.$el.parentElement == null) return;
+ this.narrow = this.$el.parentElement.offsetWidth < 500;
new ResizeObserver((entries, observer) => {
- this.narrow = this.$el.offsetWidth < 500;
- }).observe(this.$el);
+ this.narrow = this.$el.parentElement.offsetWidth < 500;
+ }).observe(this.$el.parentElement);
},
methods: {
@@ -144,6 +145,7 @@ export default defineComponent({
.fdidabkb {
--height: 60px;
display: flex;
+ width: 100%;
&.thin {
--height: 50px;