diff options
author | Christopher Ng <chrng8@gmail.com> | 2023-01-19 18:38:31 -0800 |
---|---|---|
committer | Christopher Ng <chrng8@gmail.com> | 2023-01-20 16:24:15 -0800 |
commit | 5ab35aaa7a6d09750637ed294d436aef1110650a (patch) | |
tree | e24f48c75d67da0850d3d0dc653d618a2839c4a3 /apps | |
parent | 3f231d68d7066d605f261f652f5263613d56ada4 (diff) | |
download | nextcloud-server-5ab35aaa7a6d09750637ed294d436aef1110650a.tar.gz nextcloud-server-5ab35aaa7a6d09750637ed294d436aef1110650a.zip |
Fix user status message input
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'apps')
-rw-r--r-- | apps/user_status/src/components/CustomMessageInput.vue | 62 | ||||
-rw-r--r-- | apps/user_status/src/components/SetStatusModal.vue | 10 |
2 files changed, 38 insertions, 34 deletions
diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue index 3e121f02e4a..4fd649dc166 100644 --- a/apps/user_status/src/components/CustomMessageInput.vue +++ b/apps/user_status/src/components/CustomMessageInput.vue @@ -19,25 +19,27 @@ - --> <template> - <div class="custom-input__form"> - <NcEmojiPicker container=".custom-input__form" @select="setIcon"> - <NcButton class="custom-input__emoji-button" type="tertiary-no-background"> + <div class="custom-input"> + <NcEmojiPicker container=".custom-input" @select="setIcon"> + <NcButton class="custom-input__emoji-button" type="tertiary"> {{ visibleIcon }} </NcButton> </NcEmojiPicker> - <label class="hidden-visually" for="user_status_message"> - {{ t('user_status', 'What is your status?') }} - </label> - <input id="user_status_message" - ref="input" - maxlength="80" - :disabled="disabled" - :placeholder="$t('user_status', 'What is your status?')" - type="text" - :value="message" - @change="onChange" - @keyup="onKeyup" - @paste="onKeyup"> + <div class="custom-input__container"> + <label class="hidden-visually" for="user_status_message"> + {{ t('user_status', 'What is your status?') }} + </label> + <input id="user_status_message" + ref="input" + maxlength="80" + :disabled="disabled" + :placeholder="$t('user_status', 'What is your status?')" + type="text" + :value="message" + @change="onChange" + @keyup="onKeyup" + @paste="onKeyup"> + </div> </div> </template> @@ -112,18 +114,30 @@ export default { </script> <style lang="scss" scoped> -.custom-input__form { - flex-grow: 1; - position: relative; +.custom-input { + display: flex; + width: 100%; - .v-popper { - position: absolute; + &__emoji-button { + min-height: 36px; + padding: 0; + border: 2px solid var(--color-border-maxcontrast); + border-right: none; + border-radius: var(--border-radius) 0 0 var(--border-radius); + + &:hover { + border-color: var(--color-primary-element); + } } - input { + &__container { width: 100%; - border-radius: 0 var(--border-radius) var(--border-radius) 0; - padding-left: 44px !important; + + input { + width: 100%; + margin: 0; + border-radius: 0 var(--border-radius) var(--border-radius) 0; + } } } </style> diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue index 2d500464bff..d7adc99da14 100644 --- a/apps/user_status/src/components/SetStatusModal.vue +++ b/apps/user_status/src/components/SetStatusModal.vue @@ -246,16 +246,6 @@ export default { display: flex; width: 100%; margin-bottom: 10px; - - .custom-input__emoji-button { - flex-basis: 40px; - flex-grow: 0; - width: 40px; - height: 34px; - margin-right: 0; - border-right: none; - border-radius: var(--border-radius) 0 0 var(--border-radius); - } } .status-buttons { |