aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
authorChristopher Ng <chrng8@gmail.com>2023-01-19 18:38:31 -0800
committerChristopher Ng <chrng8@gmail.com>2023-01-20 16:24:15 -0800
commit5ab35aaa7a6d09750637ed294d436aef1110650a (patch)
treee24f48c75d67da0850d3d0dc653d618a2839c4a3 /apps
parent3f231d68d7066d605f261f652f5263613d56ada4 (diff)
downloadnextcloud-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.vue62
-rw-r--r--apps/user_status/src/components/SetStatusModal.vue10
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 {