diff options
author | Christopher Ng <chrng8@gmail.com> | 2021-08-14 00:35:17 +0000 |
---|---|---|
committer | Christopher Ng <chrng8@gmail.com> | 2021-08-27 05:06:12 +0000 |
commit | 54944822f17eefa57e6767f7b254fa338ca6c7b9 (patch) | |
tree | 55287ad28ad9ba2c517cd86c5bb9f95cb559b51b /apps/settings/src/components/PersonalInfo/EmailSection/Email.vue | |
parent | c65987213c24a721e8d250fd508c3b5940738cd5 (diff) | |
download | nextcloud-server-54944822f17eefa57e6767f7b254fa338ca6c7b9.tar.gz nextcloud-server-54944822f17eefa57e6767f7b254fa338ca6c7b9.zip |
Minor refactor
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/EmailSection/Email.vue')
-rw-r--r-- | apps/settings/src/components/PersonalInfo/EmailSection/Email.vue | 74 |
1 files changed, 40 insertions, 34 deletions
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue index 036c35425a2..d6328a8da33 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue @@ -23,6 +23,7 @@ <div> <div class="email"> <input + id="email" ref="email" type="email" :name="inputName" @@ -31,7 +32,7 @@ autocapitalize="none" autocomplete="on" autocorrect="off" - required="true" + required @input="onEmailChange"> <div class="email__actions-container"> @@ -277,7 +278,7 @@ export default { handleResponse({ email, status, errorMessage, error }) { if (status === 'ok') { - // Ensure that local initialEmail state reflects server state + // Ensure that local state reflects server state this.initialEmail = email this.showCheckmarkIcon = true setTimeout(() => { this.showCheckmarkIcon = false }, 2000) @@ -297,9 +298,9 @@ export default { </script> <style lang="scss" scoped> - .email { - display: grid; - align-items: center; +.email { + display: grid; + align-items: center; input { grid-area: 1 / 1; @@ -320,48 +321,53 @@ export default { justify-self: flex-end; height: 30px; - display: flex; - gap: 0 2px; - margin-right: 5px; + .email__actions-container { + grid-area: 1 / 1; + justify-self: flex-end; + height: 30px; - .email__actions { - opacity: 0.4 !important; + display: flex; + gap: 0 2px; + margin-right: 5px; - &:hover { - opacity: 0.8 !important; - } + .email__actions { + opacity: 0.4 !important; - &::v-deep button { - height: 30px !important; - min-height: 30px !important; - width: 30px !important; - min-width: 30px !important; - } + &:hover { + opacity: 0.8 !important; } - .icon-checkmark, - .icon-error { + &::v-deep button { height: 30px !important; min-height: 30px !important; width: 30px !important; min-width: 30px !important; - top: 0; - right: 0; - float: none; } } - } - .fade-enter, - .fade-leave-to { - opacity: 0; + .icon-checkmark, + .icon-error { + height: 30px !important; + min-height: 30px !important; + width: 30px !important; + min-width: 30px !important; + top: 0; + right: 0; + float: none; + } } +} - .fade-enter-active { - transition: opacity 200ms ease-out; - } +.fade-enter, +.fade-leave-to { + opacity: 0; +} - .fade-leave-active { - transition: opacity 300ms ease-out; - } +.fade-enter-active { + transition: opacity 200ms ease-out; +} + +.fade-leave-active { + transition: opacity 300ms ease-out; +} </style> |