From 3d68b252c924ab8ccb5d09bef67e0191e45f996d Mon Sep 17 00:00:00 2001 From: rei Date: Sat, 28 Sep 2024 00:12:45 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=92=84=20feat:=20MessageInputTextArea?= =?UTF-8?q?=E3=81=AB=E7=B8=A6=E3=81=AE=E4=BC=B8=E9=95=B7=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MessageInputではonFocusのみ、MessageEditorでは常に伸長するように --- .../MainView/MessageElement/MessageEditor.vue | 1 + .../MainView/MessageInput/MessageInput.vue | 1 + .../MessageInput/MessageInputTextArea.vue | 30 +++++++++++++++---- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/components/Main/MainView/MessageElement/MessageEditor.vue b/src/components/Main/MainView/MessageElement/MessageEditor.vue index fd2f4a0e1..894ceadf2 100644 --- a/src/components/Main/MainView/MessageElement/MessageEditor.vue +++ b/src/components/Main/MainView/MessageElement/MessageEditor.vue @@ -12,6 +12,7 @@ :class="$style.inputTextArea" :is-posting="isPostingAttachment" simple-padding + is-stretchable @add-attachments="onAddAttachments" @modifier-key-down="onModifierKeyDown" @modifier-key-up="onModifierKeyUp" diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue index 711a50d5d..75abdab10 100644 --- a/src/components/Main/MainView/MessageInput/MessageInput.vue +++ b/src/components/Main/MainView/MessageInput/MessageInput.vue @@ -37,6 +37,7 @@ :channel-id="channelId" :is-posting="isPosting" :shrink-to-one-line="isMobile && isLeftControlsExpanded" + is-stretchable-on-focus @focus="onFocus" @blur="onBlur" @add-attachments="onAddAttachments" diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue index 801d758ef..304e464ac 100644 --- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue +++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue @@ -10,6 +10,8 @@ rows="1" :data-simple-padding="simplePadding" :data-shrink-to-one-line="shrinkToOneLine" + :data-is-stretchable="isStretchable" + :data-is-stretchable-on-focus="isStretchableOnFocus" :data-is-mobile="isMobile" :data-is-firefox="firefoxFlag" data-testid="message-input-textarea" @@ -53,13 +55,17 @@ const props = withDefaults( isPosting?: boolean simplePadding?: boolean shrinkToOneLine?: boolean + isStretchable?: boolean + isStretchableOnFocus?: boolean }>(), { modelValue: '', channelId: '', isPosting: false, simplePadding: false, - shrinkToOneLine: false + shrinkToOneLine: false, + isStretchable: false, + isStretchableOnFocus: false } ) @@ -162,13 +168,27 @@ $vertical-padding: 8px; padding: $vertical-padding 16px; // 左から、余白、スタンプパレットボタン、余白、送信ボタン、スクロールバー padding-right: calc(8px + 24px + 8px + 24px + var(--input-scrollbar-width)); - max-height: 160px; - &[readonly] { - @include color-ui-secondary-inactive; - cursor: wait; + &[data-is-mobile='false'] { + max-height: 160px; + &[data-is-stretchable='true'] { + max-height: 320px; + } + &[data-is-stretchable-on-focus='true']:focus { + max-height: 320px; + } } &[data-is-mobile='true'] { max-height: 70px; + &[data-is-stretchable='true'] { + max-height: 140px; + } + &[data-is-stretchable-on-focus='true']:focus { + max-height: 140px; + } + } + &[readonly] { + @include color-ui-secondary-inactive; + cursor: wait; } &[data-simple-padding='true'] { padding-right: 16px; From 43394557652518e91c1eb43dd8d39ff3945c4a67 Mon Sep 17 00:00:00 2001 From: rei Date: Sat, 28 Sep 2024 00:52:18 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=92=84=20feat:=20MessageEditor?= =?UTF-8?q?=E3=81=A7=E3=81=AE=E9=AB=98=E3=81=95=E3=82=92=E7=84=A1=E5=88=B6?= =?UTF-8?q?=E9=99=90=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MessageInputTextAreaコンポーネントにexists-height-limitプロパティを追加し、MessageEditorでfalseに設定しました。 --- .../MainView/MessageElement/MessageEditor.vue | 2 +- .../MessageInput/MessageInputTextArea.vue | 38 +++++++++++-------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/components/Main/MainView/MessageElement/MessageEditor.vue b/src/components/Main/MainView/MessageElement/MessageEditor.vue index 894ceadf2..cdd56dc62 100644 --- a/src/components/Main/MainView/MessageElement/MessageEditor.vue +++ b/src/components/Main/MainView/MessageElement/MessageEditor.vue @@ -12,7 +12,7 @@ :class="$style.inputTextArea" :is-posting="isPostingAttachment" simple-padding - is-stretchable + exists-height-limit="false" @add-attachments="onAddAttachments" @modifier-key-down="onModifierKeyDown" @modifier-key-up="onModifierKeyUp" diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue index 304e464ac..a9c30d7bc 100644 --- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue +++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue @@ -10,6 +10,7 @@ rows="1" :data-simple-padding="simplePadding" :data-shrink-to-one-line="shrinkToOneLine" + :data-exists-height-limit="existsHeightLimit" :data-is-stretchable="isStretchable" :data-is-stretchable-on-focus="isStretchableOnFocus" :data-is-mobile="isMobile" @@ -55,7 +56,7 @@ const props = withDefaults( isPosting?: boolean simplePadding?: boolean shrinkToOneLine?: boolean - isStretchable?: boolean + existsHeightLimit?: boolean isStretchableOnFocus?: boolean }>(), { @@ -64,7 +65,7 @@ const props = withDefaults( isPosting: false, simplePadding: false, shrinkToOneLine: false, - isStretchable: false, + existsHeightLimit: true, isStretchableOnFocus: false } ) @@ -168,23 +169,28 @@ $vertical-padding: 8px; padding: $vertical-padding 16px; // 左から、余白、スタンプパレットボタン、余白、送信ボタン、スクロールバー padding-right: calc(8px + 24px + 8px + 24px + var(--input-scrollbar-width)); - &[data-is-mobile='false'] { - max-height: 160px; - &[data-is-stretchable='true'] { - max-height: 320px; + &[data-exists-height-limit='true'] { + &[data-is-mobile='false'] { + max-height: 160px; + &[data-is-stretchable='true'] { + max-height: 320px; + } + &[data-is-stretchable-on-focus='true']:focus { + max-height: 320px; + } } - &[data-is-stretchable-on-focus='true']:focus { - max-height: 320px; + &[data-is-mobile='true'] { + max-height: 70px; + &[data-is-stretchable='true'] { + max-height: 140px; + } + &[data-is-stretchable-on-focus='true']:focus { + max-height: 140px; + } } } - &[data-is-mobile='true'] { - max-height: 70px; - &[data-is-stretchable='true'] { - max-height: 140px; - } - &[data-is-stretchable-on-focus='true']:focus { - max-height: 140px; - } + &[data-exists-height-limit='false'] { + max-height: none; } &[readonly] { @include color-ui-secondary-inactive; From 56c329b67668d6f3eb6d087cfc1474cd13a16f97 Mon Sep 17 00:00:00 2001 From: rei Date: Sat, 28 Sep 2024 00:55:08 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=8E=A8=20chore:=20css=E3=81=AE?= =?UTF-8?q?=E8=A8=98=E8=BF=B0=E3=82=92=E7=B0=A1=E7=95=A5=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MessageInput/MessageInputTextArea.vue | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue index a9c30d7bc..2a9db140f 100644 --- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue +++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue @@ -170,23 +170,16 @@ $vertical-padding: 8px; // 左から、余白、スタンプパレットボタン、余白、送信ボタン、スクロールバー padding-right: calc(8px + 24px + 8px + 24px + var(--input-scrollbar-width)); &[data-exists-height-limit='true'] { + &[data-is-mobile='true'] { + max-height: 70px; + } &[data-is-mobile='false'] { max-height: 160px; - &[data-is-stretchable='true'] { - max-height: 320px; - } - &[data-is-stretchable-on-focus='true']:focus { - max-height: 320px; - } } - &[data-is-mobile='true'] { - max-height: 70px; - &[data-is-stretchable='true'] { - max-height: 140px; - } - &[data-is-stretchable-on-focus='true']:focus { - max-height: 140px; - } + &[data-is-stretchable-on-focus='true']:focus { + max-height: calc( + 100% * 2 + ); // 320px if mobile = false, 140px if mobile = true } } &[data-exists-height-limit='false'] { From 8a9f3bedd4cbfdff96411d936dc439eddbfbcf80 Mon Sep 17 00:00:00 2001 From: rei Date: Sat, 28 Sep 2024 08:12:08 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20fix:=20type-check=E3=82=A8?= =?UTF-8?q?=E3=83=A9=E3=83=BC=E3=82=92=E4=BF=AE=E6=AD=A3=E3=80=81=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Main/MainView/MessageElement/MessageEditor.vue | 2 +- .../MainView/MessageInput/MessageInputTextArea.vue | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Main/MainView/MessageElement/MessageEditor.vue b/src/components/Main/MainView/MessageElement/MessageEditor.vue index cdd56dc62..183379970 100644 --- a/src/components/Main/MainView/MessageElement/MessageEditor.vue +++ b/src/components/Main/MainView/MessageElement/MessageEditor.vue @@ -12,7 +12,7 @@ :class="$style.inputTextArea" :is-posting="isPostingAttachment" simple-padding - exists-height-limit="false" + disable-height-limit @add-attachments="onAddAttachments" @modifier-key-down="onModifierKeyDown" @modifier-key-up="onModifierKeyUp" diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue index 2a9db140f..49cb33ce0 100644 --- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue +++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue @@ -10,8 +10,7 @@ rows="1" :data-simple-padding="simplePadding" :data-shrink-to-one-line="shrinkToOneLine" - :data-exists-height-limit="existsHeightLimit" - :data-is-stretchable="isStretchable" + :data-disable-height-limit="disableHeightLimit" :data-is-stretchable-on-focus="isStretchableOnFocus" :data-is-mobile="isMobile" :data-is-firefox="firefoxFlag" @@ -56,7 +55,7 @@ const props = withDefaults( isPosting?: boolean simplePadding?: boolean shrinkToOneLine?: boolean - existsHeightLimit?: boolean + disableHeightLimit?: boolean isStretchableOnFocus?: boolean }>(), { @@ -65,7 +64,7 @@ const props = withDefaults( isPosting: false, simplePadding: false, shrinkToOneLine: false, - existsHeightLimit: true, + disableHeightLimit: false, isStretchableOnFocus: false } ) @@ -169,7 +168,7 @@ $vertical-padding: 8px; padding: $vertical-padding 16px; // 左から、余白、スタンプパレットボタン、余白、送信ボタン、スクロールバー padding-right: calc(8px + 24px + 8px + 24px + var(--input-scrollbar-width)); - &[data-exists-height-limit='true'] { + &[data-disable-height-limit='false'] { &[data-is-mobile='true'] { max-height: 70px; } @@ -182,7 +181,7 @@ $vertical-padding: 8px; ); // 320px if mobile = false, 140px if mobile = true } } - &[data-exists-height-limit='false'] { + &[data-disable-height-limit='true'] { max-height: none; } &[readonly] { From dde163e12e41457453f7519112498b0c1deb74bc Mon Sep 17 00:00:00 2001 From: rei Date: Sat, 19 Oct 2024 18:17:00 +0900 Subject: [PATCH 5/6] =?UTF-8?q?isStretchableOnFocus=E3=81=AE=E5=89=8A?= =?UTF-8?q?=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ref: https://github.com/traPtitech/traQ_S-UI/pull/4375#pullrequestreview-2369026524 --- .../Main/MainView/MessageInput/MessageInput.vue | 1 - .../Main/MainView/MessageInput/MessageInputTextArea.vue | 8 -------- 2 files changed, 9 deletions(-) diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue index 75abdab10..711a50d5d 100644 --- a/src/components/Main/MainView/MessageInput/MessageInput.vue +++ b/src/components/Main/MainView/MessageInput/MessageInput.vue @@ -37,7 +37,6 @@ :channel-id="channelId" :is-posting="isPosting" :shrink-to-one-line="isMobile && isLeftControlsExpanded" - is-stretchable-on-focus @focus="onFocus" @blur="onBlur" @add-attachments="onAddAttachments" diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue index f39b1badc..7c54aae14 100644 --- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue +++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue @@ -11,7 +11,6 @@ :data-simple-padding="simplePadding" :data-shrink-to-one-line="shrinkToOneLine" :data-disable-height-limit="disableHeightLimit" - :data-is-stretchable-on-focus="isStretchableOnFocus" :data-is-mobile="isMobile" :data-is-firefox="firefoxFlag" data-testid="message-input-textarea" @@ -56,7 +55,6 @@ const props = withDefaults( simplePadding?: boolean shrinkToOneLine?: boolean disableHeightLimit?: boolean - isStretchableOnFocus?: boolean }>(), { modelValue: '', @@ -65,7 +63,6 @@ const props = withDefaults( simplePadding: false, shrinkToOneLine: false, disableHeightLimit: false, - isStretchableOnFocus: false } ) @@ -175,11 +172,6 @@ $vertical-padding: 8px; &[data-is-mobile='false'] { max-height: 160px; } - &[data-is-stretchable-on-focus='true']:focus { - max-height: calc( - 100% * 2 - ); // 320px if mobile = false, 140px if mobile = true - } } &[data-disable-height-limit='true'] { max-height: none; From 2681245d0f991f9438b35689b8d4c7e3500e65c1 Mon Sep 17 00:00:00 2001 From: rei Date: Sat, 19 Oct 2024 18:18:47 +0900 Subject: [PATCH 6/6] npm run format --- .../Main/MainView/MessageInput/MessageInputTextArea.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue index 7c54aae14..01fb5a3c0 100644 --- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue +++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue @@ -62,7 +62,7 @@ const props = withDefaults( isPosting: false, simplePadding: false, shrinkToOneLine: false, - disableHeightLimit: false, + disableHeightLimit: false } )