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

button with border done

Browse Source
This commit is contained in:
Cindy Chang
2024-08-30 16:59:03 +08:00
parent 725cc76ac2
commit 7b7b722efb
2 changed files with 53 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Button.vue
View File

@@ -1,16 +1,48 @@
<template>
<div class="button-component flex">
<button class="button-component w-[80px] h-[32px] rounded-full
flex text-[#666666] border-[1px] border-[#666666]
justify-center items-center bg-[#FFFFFF]
hover:text-[#0099FF] hover:border-[#0099FF]
focus:text-[#0099FF] focus:border-[#0099FF]
cursor-pointer"
:class="{
'ring': isPressed,
'ring-[#0099FF]' : isPressed,
'ring-opacity-30': isPressed,
}"
@mousedown="onMousedown" @mouseup="onMouseup">
{{ buttonText }}
</div>
</button>
</template>
<script>
import { ref, } from 'vue';
export default {
props: {
buttonText: {
type: String,
required: false,
},
},
setup(props) {
const buttonText = props.buttonText;
const isPressed = ref(false);
const onMousedown = () => {
isPressed.value = true;
}
const onMouseup = () => {
isPressed.value = false;
}
return {
buttonText
buttonText,
onMousedown,
onMouseup,
isPressed,
};
},
}

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

@@ -56,18 +56,13 @@
@click="onSaveNameClick">
{{ i18next.t("Global.Save") }}
</button>
<button v-if='isNameEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
@click="onCancelNameClick">
{{ i18next.t("Global.Cancel") }}
</button>
<button v-else class="flex save-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
bg-[#FFFFFF] justify-center cursor-pointer ml-[204px] border border-[#666666]
box-border"
@click="onEditNameClick"
>
{{ i18next.t("Global.Edit") }}
</button>
<div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
<Button :buttonText='i18next.t("Global.Cancel")'/>
</div>
<div v-else='isPwdEditable' class="edit-btn btn-container flex ml-[204px]" @click="onEditNameClick" >
<Button :buttonText='i18next.t("Global.Edit")'/>
</div>
</div>
<div class="row w-full flex py-2 mb-4 border-b border-b-[#CBD5E1] border-b-[1px]">
<div class="field-label flex flex-col text-sm font-medium mr-4">
@@ -98,7 +93,7 @@
</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
<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,
@@ -110,17 +105,12 @@
@click="onSavePwdClick">
{{ i18next.t("Global.Save") }}
</button>
<button v-if='isPwdEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
@click="onCancelPwdClick">
{{ i18next.t("Global.Cancel") }}
</button>
<button v-else class="flex reset-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
bg-[#FFFFFF] justify-center cursor-pointer ml-[460px] border border-[#666666]"
@click="onResetPwdClick"
>
{{ i18next.t("Global.Reset") }}
</button>
<div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
<Button :buttonText='i18next.t("Global.Cancel")'/>
</div>
<div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
<Button :buttonText='i18next.t("Global.Reset")'/>
</div>
</div>
<div class="flex dummy-cell h-[40px]"></div>
</div>
@@ -141,6 +131,7 @@ import LoginStore from '@/stores/login';
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 { useToast } from 'vue-toast-notification';
import { PWD_VALID_LENGTH } from '@/constants/constants.js';
@@ -223,6 +214,7 @@ export default {
return {
i18next,
Button,
username,
name,
is_admin,
@@ -245,6 +237,7 @@ export default {
},
components: {
Badge,
Button,
}
}
</script>