imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save button effect

Browse Source
This commit is contained in:
Cindy Chang
2024-09-03 09:27:46 +08:00
parent 35c7ac355e
commit d16f7a264e
2 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/AccountManagement/MyAccount.vue
View File

@@ -51,11 +51,9 @@
<div v-else class="not-editable displayable name flex w-[280px]">
{{ name }}
</div>
<button v-if='isNameEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
@click="onSaveNameClick">
{{ i18next.t("Global.Save") }}
</button>
<div v-if='isNameEditable' class="save-btn-container flex ml-[112px]" @click="onSaveNameClick">
<ButtonFilled :buttonText='i18next.t("Global.Save")' />
</div>
<div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
<Button :buttonText='i18next.t("Global.Cancel")'/>
</div>
@@ -92,19 +90,11 @@
</div>
</div>
<div class="button-and-dummy-column flex flex-col text-[14px]">
<div class="button-group flex w-min-[80px] h-[40px]">
<button v-if='isPwdEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
:class="{
'border-[#CCCCCC]': !isPwdLengthValid,
'border-[1px]': !isPwdLengthValid,
'text-[#CCCCCC]': !isPwdLengthValid,
'bg-[#FFFFFF]': !isPwdLengthValid,
'cursor-auto': !isPwdLengthValid,
}"
@click="onSavePwdClick">
{{ i18next.t("Global.Save") }}
</button>
<div class="button-group flex w-min-[80px] h-[40px]">
<div v-if='isPwdEditable' class="save-btn-container flex ml-[112px]"
@click="onSavePwdClick">
<ButtonFilled :buttonText='i18next.t("Global.Save")' />
</div>
<div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
<Button :buttonText='i18next.t("Global.Cancel")'/>
</div>
@@ -132,6 +122,7 @@ import useAcctMgmtStore from '@/stores/acctMgmt.ts';
import Badge from '../../components/Badge.vue';
import LoadingStore from '@/stores/loading.js';
import Button from '@/components/Button.vue';
import ButtonFilled from '@/components/ButtonFilled.vue';
import { useToast } from 'vue-toast-notification';
import { PWD_VALID_LENGTH } from '@/constants/constants.js';
@@ -214,7 +205,6 @@ export default {
return {
i18next,
Button,
username,
name,
is_admin,
@@ -238,6 +228,7 @@ export default {
components: {
Badge,
Button,
ButtonFilled,
}
}
</script>