upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-09 00:32:29 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 35

Minor refactor

Browse source 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng 2021-08-14 00:35:17 +00:00
parent c65987213c
commit 54944822f1
6 changed files with 77 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
View file

@ -31,7 +31,7 @@
autocapitalize="none"
autocomplete="on"
autocorrect="off"
required="true"
required
@input="onDisplayNameChange">
<div class="displayname__actions-container">
@ -104,7 +104,7 @@ export default {
handleResponse({ displayName, status, errorMessage, error }) {
if (status === 'ok') {
// Ensure that local initialDiplayName state reflects server state
// Ensure that local state reflects server state
this.initialDisplayName = displayName
this.showCheckmarkIcon = true
setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
@ -124,9 +124,9 @@ export default {
</script>
<style lang="scss" scoped>
.displayname {
display: grid;
align-items: center;
.displayname {
display: grid;
align-items: center;
input {
grid-area: 1 / 1;
@ -142,38 +142,38 @@ export default {
color: var(--color-main-text);
}
.displayname__actions-container {
grid-area: 1 / 1;
justify-self: flex-end;
height: 30px;
.displayname__actions-container {
grid-area: 1 / 1;
justify-self: flex-end;
height: 30px;
display: flex;
gap: 0 2px;
margin-right: 5px;
display: flex;
gap: 0 2px;
margin-right: 5px;
.icon-checkmark,
.icon-error {
height: 30px !important;
min-height: 30px !important;
width: 30px !important;
min-width: 30px !important;
top: 0;
right: 0;
float: none;
}
.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,
.fade-leave-to {
opacity: 0;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active {
transition: opacity 200ms ease-out;
}
.fade-enter-active {
transition: opacity 200ms ease-out;
}
.fade-leave-active {
transition: opacity 300ms ease-out;
}
.fade-leave-active {
transition: opacity 300ms ease-out;
}
</style>

1
apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
View file

@ -87,4 +87,5 @@ export default {
cursor: default;
}
}
}
</style>

74
apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
View file

@ -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>

1
apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
View file

@ -171,4 +171,5 @@ export default {
cursor: default;
}
}
}
</style>

8
apps/settings/src/components/PersonalInfo/shared/AddButton.vue
View file

@ -22,7 +22,7 @@
<template>
<button
:disabled="disabled"
@click.stop.prevent="onClick">
v-on="$listeners">
<span class="icon icon-add" />
{{ t('settings', 'Add') }}
</button>
@ -38,12 +38,6 @@ export default {
default: true,
},
},
methods: {
onClick(e) {
this.$emit('click', e)
},
},
}
</script>

4
apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
View file

@ -68,7 +68,7 @@ export default {
},
isEditable: {
type: Boolean,
required: true,
default: true,
},
isMultiValueSupported: {
type: Boolean,
@ -76,7 +76,7 @@ export default {
},
isValidSection: {
type: Boolean,
default: true,
default: false,
},
labelFor: {
type: String,