feat: Complete basic design
This commit is contained in:
Muhsin Keloth
@@ -1,19 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
|
||||
class="flex flex-col min-w-[15rem] max-h-[21.25rem] w-[23rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
|
||||
:class="{
|
||||
'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
|
||||
active,
|
||||
'border border-solid border-woot-300 dark:border-woot-400': active,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
|
||||
:class="{
|
||||
'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
|
||||
active,
|
||||
}"
|
||||
class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
|
||||
>
|
||||
<div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
|
||||
<div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
|
||||
<!-- <fluent-icon
|
||||
v-if="active"
|
||||
icon="checkmark-circle"
|
||||
@@ -22,24 +17,16 @@
|
||||
class="text-woot-500 dark:text-woot-500"
|
||||
/> -->
|
||||
<div>
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<input type="radio" name="hotkey" value="enter" :checked="active" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
|
||||
class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pb-0 text-start"
|
||||
>
|
||||
{{ content }}
|
||||
</div>
|
||||
<div v-if="src" class="p-3">
|
||||
<img
|
||||
:src="src"
|
||||
class="border border-solid rounded-md"
|
||||
:class="
|
||||
active
|
||||
? 'border-woot-75 dark:border-woot-700'
|
||||
: 'border-slate-50 dark:border-slate-600'
|
||||
"
|
||||
/>
|
||||
<img :src="src" class="object-cover w-full" />
|
||||
</div>
|
||||
<slot v-else />
|
||||
</div>
|
||||
|
||||
@@ -1,31 +1,101 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex h-full flex-col p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 overflow-auto font-inter"
|
||||
class="flex flex-col h-full p-5 pt-16 mx-auto my-0 overflow-auto bg-white dark:bg-slate-900 font-inter"
|
||||
>
|
||||
<div class="flex flex-col gap-8 sm:max-w-3xl">
|
||||
<h2 class="font-medium text-slate-900 dark:text-white text-2xl">
|
||||
<h2 class="text-2xl font-medium text-slate-900 dark:text-white">
|
||||
Profile Settings
|
||||
</h2>
|
||||
<user-profile-picture username="John Doe" size="72px" />
|
||||
|
||||
<personal-wrapper
|
||||
header="Personal message signature"
|
||||
description="Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes."
|
||||
:show-action-button="true"
|
||||
button-text="Save message signature"
|
||||
>
|
||||
<template #settingsItem>
|
||||
<message-signature />
|
||||
<form-input
|
||||
name="full_name"
|
||||
class="flex-1"
|
||||
:class="{ error: true }"
|
||||
:label="$t('REGISTER.FULL_NAME.LABEL')"
|
||||
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
|
||||
:has-error="true"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
</template>
|
||||
</personal-wrapper>
|
||||
<personal-wrapper
|
||||
header="Hot key to send messages"
|
||||
description="You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on your
|
||||
preference of writing."
|
||||
:show-action-button="false"
|
||||
>
|
||||
<template #settingsItem>
|
||||
<div class="flex flex-row justify-between gap-4">
|
||||
<button
|
||||
v-for="keyOption in keyOptions"
|
||||
:key="keyOption.key"
|
||||
class="p-0 cursor-pointer"
|
||||
>
|
||||
<preview-card
|
||||
:heading="keyOption.heading"
|
||||
:content="keyOption.content"
|
||||
:src="keyOption.src"
|
||||
:active="keyOption.key === 'enter'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</personal-wrapper>
|
||||
|
||||
<div class="flex flex-col w-full gap-4">
|
||||
<h4 class="text-lg font-medium text-slate-900 dark:text-slate-25">
|
||||
Change password
|
||||
</h4>
|
||||
<div class="flex flex-row items-center justify-between gap-4">
|
||||
<div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
|
||||
</div>
|
||||
<form-input
|
||||
name="current_password"
|
||||
class="flex-1"
|
||||
:class="{ error: false }"
|
||||
label="Current password"
|
||||
placeholder="Please enter your current password"
|
||||
:has-error="false"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
<form-input
|
||||
name="new_password"
|
||||
class="flex-1"
|
||||
:class="{ error: false }"
|
||||
label="New password"
|
||||
placeholder="Please enter your new password"
|
||||
:has-error="false"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
|
||||
<form-input
|
||||
name="confirm_password"
|
||||
class="flex-1"
|
||||
:class="{ error: false }"
|
||||
label="Confirm password"
|
||||
placeholder="Please confirm your new password"
|
||||
:has-error="false"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
<woot-button
|
||||
color-scheme="primary"
|
||||
class="rounded-xl w-fit"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
Update password
|
||||
</woot-button>
|
||||
</div>
|
||||
|
||||
<personal-wrapper
|
||||
header="Audio notifications"
|
||||
description="Enable audio notifications in dashboard for new messages and conversations."
|
||||
:show-action-button="false"
|
||||
>
|
||||
<template #settingsItem>
|
||||
<form-select
|
||||
name="timezone"
|
||||
spacing="compact"
|
||||
label="Ding"
|
||||
label="Alert tone"
|
||||
placeholder="Ding"
|
||||
class="max-w-xl"
|
||||
>
|
||||
@@ -37,59 +107,268 @@
|
||||
{{ file.label }}
|
||||
</option>
|
||||
</form-select>
|
||||
<div
|
||||
class="flex flex-row p-2 justify-between max-w-xl h-10 rounded-md border border-solid border-slate-75 dark:border-slate-600"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row gap-1 border-r border-slate-75 justify-center items-center grow"
|
||||
|
||||
<div>
|
||||
<label
|
||||
class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
|
||||
>
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<label>None</label>
|
||||
</div>
|
||||
Alert events for conversations
|
||||
</label>
|
||||
<div
|
||||
class="flex flex-row gap-1 border-r border-slate-75 justify-center items-center grow"
|
||||
class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-slate-75 dark:border-slate-600"
|
||||
>
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<label>Assigned</label>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 grow justify-center items-center">
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<label>All</label>
|
||||
<div
|
||||
class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
|
||||
>
|
||||
<input type="radio" name="hotkey" value="enter" checked />
|
||||
<label>None</label>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
|
||||
>
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<label>Assigned</label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-center gap-1 grow">
|
||||
<input type="radio" name="hotkey" value="enter" />
|
||||
<label>All</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 items-center justify-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="send"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
<label>
|
||||
Send audio alerts only if the browser window is not active
|
||||
<div>
|
||||
<label
|
||||
class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
|
||||
>
|
||||
Alert conditions
|
||||
</label>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="send"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
<label>
|
||||
Send audio alerts only if the browser window is not active
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="send"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
<label>
|
||||
Send alerts every 30s until all the assigned conversations are
|
||||
read
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</personal-wrapper>
|
||||
|
||||
<personal-wrapper
|
||||
header="Hot key to send messages"
|
||||
description="You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on your
|
||||
preference of writing."
|
||||
header="Notification preferences"
|
||||
:show-action-button="false"
|
||||
>
|
||||
<template #settingsItem>
|
||||
<div class="flex gap-4 flex-row">
|
||||
<button
|
||||
v-for="keyOption in keyOptions"
|
||||
:key="keyOption.key"
|
||||
class="cursor-pointer p-0"
|
||||
<div>
|
||||
<!-- Draw a line -->
|
||||
<div class="flex flex-row items-center justify-between gap-4">
|
||||
<div class="flex-grow h-0.5 bg-slate-50 dark:bg-slate-700" />
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
>
|
||||
<preview-card
|
||||
:heading="keyOption.heading"
|
||||
:content="keyOption.content"
|
||||
:src="keyOption.src"
|
||||
:active="true"
|
||||
/>
|
||||
</button>
|
||||
<table-header-cell :span="6" label="Notification type" />
|
||||
<table-header-cell :span="3" label="Email" />
|
||||
<table-header-cell :span="3" label="Push notification" />
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
|
||||
>
|
||||
<span class="text-slate-700 dark:text-slate-200">
|
||||
A new conversation is created
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
|
||||
>
|
||||
<span class="text-slate-700 dark:text-slate-200">
|
||||
Conversation is assigned to you
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
|
||||
>
|
||||
<span class="text-slate-700 dark:text-slate-200">
|
||||
Conversation is assigned to you
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
|
||||
>
|
||||
<span class="text-slate-700 dark:text-slate-200">
|
||||
You are mentioned in a conversation
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
|
||||
>
|
||||
<span class="text-slate-700 dark:text-slate-200">
|
||||
New message is created in an assigned conversation
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="true"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 col-span-3 py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="email"
|
||||
:checked="false"
|
||||
class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</personal-wrapper>
|
||||
<personal-wrapper
|
||||
header="Access Token"
|
||||
description="This token can be used if you are building an API based integration."
|
||||
:show-action-button="false"
|
||||
>
|
||||
<template #settingsItem>
|
||||
<div class="flex flex-row justify-between gap-4">
|
||||
<form-input
|
||||
name="access_token"
|
||||
class="flex-1"
|
||||
type="password"
|
||||
value="1234567890"
|
||||
:class="{ error: false }"
|
||||
placeholder="Please enter your new password"
|
||||
:has-error="false"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
<woot-button
|
||||
icon="copy"
|
||||
variant="hollow"
|
||||
color-scheme="secondary"
|
||||
class="rounded-xl w-fit"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
Copy
|
||||
</woot-button>
|
||||
</div>
|
||||
</template>
|
||||
</personal-wrapper>
|
||||
@@ -97,6 +376,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
|
||||
import MessageSignature from '../profile/MessageSignature.vue';
|
||||
import UserProfilePicture from './UserProfilePicture.vue';
|
||||
import PersonalWrapper from './PersonalWrapper.vue';
|
||||
@@ -107,14 +387,16 @@ const keyOptions = [
|
||||
{
|
||||
key: 'enter',
|
||||
src: '/assets/images/dashboard/profile/hot-key-enter.svg',
|
||||
heading: 'Enter key',
|
||||
content: 'Send messages by pressing the Enter key',
|
||||
heading: 'Enter (↵)',
|
||||
content:
|
||||
'Send messages by pressing Enter key instead of clicking send button.',
|
||||
},
|
||||
{
|
||||
key: 'cmd_enter',
|
||||
src: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
|
||||
heading: 'Enter key',
|
||||
content: 'Send messages by pressing the Enter key',
|
||||
heading: 'CMD / Ctrl + Enter (⌘ + ↵)',
|
||||
content:
|
||||
'Send messages by pressing Enter key instead of clicking send button.',
|
||||
},
|
||||
];
|
||||
const audioFiles = [
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-6 w-full items-start">
|
||||
<div class="flex flex-col items-start w-full gap-6">
|
||||
<div
|
||||
class="flex flex-col gap-4 divide-y divide-slate-200 dark:divide-slate-700"
|
||||
class="flex flex-col w-full gap-4 divide-y divide-slate-200 dark:divide-slate-700"
|
||||
>
|
||||
<h4
|
||||
v-if="header"
|
||||
class="text-slate-900 dark:text-slate-25 text-lg font-medium"
|
||||
class="text-lg font-medium text-slate-900 dark:text-slate-25"
|
||||
>
|
||||
{{ header }}
|
||||
</h4>
|
||||
<p
|
||||
v-if="description"
|
||||
class="text-slate-600 dark:text-slate-400 text-sm font-normal mb-0 pt-4"
|
||||
class="pt-4 mb-0 text-sm font-normal text-slate-600 dark:text-slate-400"
|
||||
>
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="$slots.settingsItem" class="w-full flex flex-col gap-6">
|
||||
<div v-if="$slots.settingsItem" class="flex flex-col w-full gap-6">
|
||||
<slot name="settingsItem" />
|
||||
<woot-button
|
||||
v-if="showActionButton"
|
||||
@@ -24,7 +24,7 @@
|
||||
class="rounded-xl w-fit"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
Save
|
||||
{{ buttonText }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,5 +44,9 @@ defineProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: 'Save',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
+74
-32
@@ -1,43 +1,85 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 mt-2">
|
||||
<span class="font-medium text-slate-900 dark:text-slate-25 text-normal">
|
||||
Profile picture
|
||||
</span>
|
||||
<div
|
||||
class="relative rounded-xl h-[72px] w-[72px]"
|
||||
:title="title"
|
||||
@mouse-over="showUpload"
|
||||
>
|
||||
<img
|
||||
class="rounded-xl h-[72px] w-[72px]"
|
||||
src="https://i.pravatar.cc/300"
|
||||
draggable="false"
|
||||
@load="onImgLoad"
|
||||
@error="onImgError"
|
||||
<div>
|
||||
<div class="flex flex-col gap-2 mt-2">
|
||||
<span class="font-medium text-slate-900 dark:text-slate-25 text-normal">
|
||||
Profile picture
|
||||
</span>
|
||||
<div
|
||||
class="relative rounded-xl h-[72px] w-[72px]"
|
||||
:title="title"
|
||||
@mouse-over="showUpload"
|
||||
>
|
||||
<img
|
||||
class="rounded-xl h-[72px] w-[72px]"
|
||||
src="https://i.pravatar.cc/300"
|
||||
draggable="false"
|
||||
@load="onImgLoad"
|
||||
@error="onImgError"
|
||||
/>
|
||||
<div
|
||||
class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="dismiss"
|
||||
size="16"
|
||||
class="text-slate-800 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="avatar-upload"
|
||||
size="32"
|
||||
class="text-white dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6">
|
||||
<form-input
|
||||
name="full_name"
|
||||
class="flex-1"
|
||||
:class="{ error: false }"
|
||||
:label="$t('REGISTER.FULL_NAME.LABEL')"
|
||||
placeholder="Enter your name"
|
||||
:has-error="false"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
<div
|
||||
class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
|
||||
<form-input
|
||||
name="display_name"
|
||||
class="flex-1"
|
||||
:class="{ error: false }"
|
||||
label="Display name"
|
||||
placeholder="Enter your display name"
|
||||
:has-error="false"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
<form-input
|
||||
name="email"
|
||||
class="flex-1"
|
||||
:class="{ error: false }"
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
:has-error="false"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
/>
|
||||
<woot-button
|
||||
color-scheme="primary"
|
||||
class="rounded-xl w-fit"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="dismiss"
|
||||
size="16"
|
||||
class="text-slate-800 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="avatar-upload"
|
||||
size="32"
|
||||
class="text-white dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
Update profile
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormInput from 'v3/components/Form/Input.vue';
|
||||
export default {
|
||||
components: {
|
||||
FormInput,
|
||||
},
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
|
||||
Reference in New Issue
Block a user