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

WIP: create feature checkboxes layout

Browse Source
This commit is contained in:
Cindy Chang
2024-06-20 16:54:37 +08:00
parent 05caf819bb
commit 193bc315ca
6 changed files with 86 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icon-blue-checkbox.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="16" height="16" rx="2" fill="white" stroke="#0099FF" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 200 B

3
src/assets/icon-checkbox-checked.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10.4999L0 5.53988L1.59 3.99988L5 7.34988L12.41 -0.00012207L14 1.57988L5 10.4999Z" fill="#0099FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 214 B

3
src/assets/icon-checkbox-empty.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="16" height="16" rx="2" fill="white" stroke="#CBD5E1" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 200 B

34
src/components/icons/IconChecked.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div
class="relative two-imgs-container w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
<img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute"/>
<img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute"/>
<img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
</div>
</template>
<script>
import { defineComponent, computed, ref, } from 'vue';
import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
export default defineComponent({
props: {
isChecked: {
type: Boolean,
required: true // 表示这个 props 是必需的
},
},
setup(props) {
const isChecked = computed(() => props.isChecked);
return {
ImgCheckboxBlueFrame,
ImgCheckboxCheckedMark,
ImgCheckboxGrayFrame,
isChecked,
};
},
});
</script>

4
src/i18n/en.json
View File

@@ -24,7 +24,9 @@
"AccountInformation": "Account Information",
"Password": "Password",
"ConfirmPassword": "Confirm Password",
"PwdNotMatch": "Confirm Password does not match."
"PwdNotMatch": "Confirm Password does not match.",
"SetAsAdmin": "Set as admin.",
"ActivateNow": "Activate now."
},
"Compare": {
"timeUsage": "Time Usage",

48
src/views/AccountManagement/ModalAccountEdit.vue
View File

@@ -6,8 +6,8 @@
<main class="flex row min-h-[96px] my-[32px] flex-col px-6">
<div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
justify-between">
<div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
<span class="align-right-span flex w-[100px] justify-end">
<div class="field-label text-sm flex items-center font-medium justify-end">
<span class="align-right-span flex w-[122px] justify-end">
{{ i18next.t("AcctMgmt.Account") }}
</span>
</div>
@@ -17,8 +17,8 @@
</div>
<div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
justify-between">
<div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
<span class="align-right-span flex w-[100px] justify-end">
<div class="field-label text-sm flex items-center font-medium justify-end">
<span class="align-right-span flex w-[122px] justify-end">
{{ i18next.t("AcctMgmt.FullName") }}
</span>
</div>
@@ -27,8 +27,8 @@
</div>
<div v-show="!isSSO" class="input-row w-full flex py-2 h-[40px] mb-4 items-center
justify-between">
<div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
<span class="align-right-span flex w-[100px] justify-end">
<div class="field-label text-sm flex items-center font-medium justify-end">
<span class="align-right-span flex w-[122px] justify-end">
{{ i18next.t("AcctMgmt.Password") }}
</span>
</div>
@@ -42,7 +42,7 @@
</div>
<div v-show="!isSSO" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
mb-4 flex items-center"> <!-- 2-by-2 的格子，其中左下角是一個dummy格子，其沒有內容 -->
<span class="field-label w-[100px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
<span class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
:class="{
'text-[#000000]': isPwdMatched,
'text-[#FF3366]': !isPwdMatched,
@@ -73,7 +73,24 @@
{{ i18next.t("AcctMgmt.PwdNotMatch") }}
</span>
</div>
</div>
<div class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
<div class="dummy field-label flex items-center w-[122px]">
</div> <!--這裡也使用了dummy欄位去撐起空間-->
<section id="account_create_checkboxes_section" class="flex flex-col">
<div class="checkbox-and-text flex">
<IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.SetAsAdmin") }}
</span>
</div>
<div class="checkbox-and-text flex">
<IconChecked :isChecked="isSetActivedChecked" @click="toggleIsActivated"/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.ActivateNow") }}
</span>
</div>
</section>
</div>
</main>
<footer class="flex row footer justify-end pr-[32px] pb-8">
@@ -104,6 +121,7 @@ import { mapActions, } from 'pinia';
import { useModalStore } from '@/stores/modal.js';
import useAcctMgmtStore from '@/stores/acctMgmt.js';
import ModalHeader from "./ModalHeader.vue";
import IconChecked from "@/components/icons/IconChecked.vue";
export default defineComponent({
setup() {
@@ -114,6 +132,8 @@ export default defineComponent({
const isPwdMatched = ref(true);
const inputPwd = ref("");
const inputConfirmPwd = ref("");
const isSetAsAdminChecked = ref(false);
const isSetActivedChecked = ref(true);
const {
id,
@@ -143,6 +163,13 @@ export default defineComponent({
validateConfirmPwd();
}
const toggleIsAdmin = () => {
isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
}
const toggleIsActivated = () => {
isSetActivedChecked.value = !isSetActivedChecked.value;
}
return {
isConfirmDisabled,
account,
@@ -157,6 +184,10 @@ export default defineComponent({
inputPwd,
inputConfirmPwd,
onConfirmBtnClick,
isSetAsAdminChecked,
isSetActivedChecked,
toggleIsAdmin,
toggleIsActivated,
};
},
data() {
@@ -166,6 +197,7 @@ export default defineComponent({
},
components: {
ModalHeader,
IconChecked,
},
methods: {
onCloseBtnClick(){