akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: complete basic design

Browse Source
This commit is contained in:
Muhsin Keloth
2024-04-20 12:06:08 +05:30
parent 708a8516e6
commit 6d60f78b1d
13 changed files with 705 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/settings/personal/AccessToken.vue
+7 -5
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex flex-row justify-between gap-4">
<div class="flex flex-row justify-between gap-4 mb-8">
<form-input
name="access_token"
class="flex-1"
@@ -10,17 +10,19 @@
:has-error="false"
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
/>
<woot-button
icon="copy"
<v3-button
type="submit"
size="large"
icon="text-copy"
variant="hollow"
color-scheme="secondary"
class="rounded-xl w-fit"
@click="$emit('click')"
>
Copy
</woot-button>
</v3-button>
</div>
</template>
<script setup>
import FormInput from 'v3/components/Form/Input.vue';
import V3Button from 'v3/components/Form/Button.vue';
</script>
app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
+9 -4
View File
@@ -46,10 +46,11 @@
@blur="$v.passwordConfirmation.$touch"
/>
<woot-button
class="w-fit"
:is-loading="isPasswordChanging"
<v3-button
type="submit"
color-scheme="primary"
variant="solid"
size="large"
:disabled="
!currentPassword ||
!passwordConfirmation ||
@@ -57,7 +58,7 @@
"
>
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
</woot-button>
</v3-button>
</div>
</form>
</template>
@@ -67,8 +68,12 @@ import { required, minLength } from 'vuelidate/lib/validators';
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
import V3Button from 'v3/components/Form/Button.vue';
export default {
components: {
V3Button,
},
mixins: [alertMixin],
data() {
return {
app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
+6 -4
View File
@@ -1,14 +1,16 @@
<template>
<div
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="flex flex-col min-w-[15rem] max-h-[21.25rem] sm:w-[23rem] rounded-md border border-solid border-ash-200"
:class="{
'border border-solid border-woot-300 dark:border-woot-400': active,
'border border-solid border-primary-300 ': active,
}"
>
<div
class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
>
<div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
<div class="flex items-center p-1 text-base font-medium text-ash-900">
{{ heading }}
</div>
<div>
<!-- Show radio button, if the card is active, set radio button checked -->
<input
@@ -20,7 +22,7 @@
</div>
</div>
<div
class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pb-0 text-start"
class="text-slate-700 dark:text-slate-200 text-sm leading-[1.4] px-3 pb-0 text-start"
>
{{ content }}
</div>
app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+77 -61
View File
@@ -3,67 +3,70 @@
<div
class="flex flex-col h-full p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 font-inter"
>
<div class="flex flex-col gap-8 sm:max-w-3xl">
<h2 class="text-2xl font-medium text-slate-900 dark:text-white">
Profile Settings
</h2>
<user-basic-profile
:src="avatarUrl"
:display-name="displayName"
size="72px"
@change="handleImageUpload"
@update="updateUser"
/>
<div class="flex flex-col gap-16 sm:max-w-3xl">
<div class="flex flex-col gap-6">
<h2 class="mt-4 text-2xl font-medium text-ash-900">
Profile Settings
</h2>
<user-basic-profile
:src="avatarUrl"
:name="name"
size="72px"
@change="handleImageUpload"
@update="updateUser"
@delete="deleteAvatar"
/>
<form
class="flex flex-col gap-6"
@submit.prevent="updateUser('profile')"
>
<form-input
v-model="name"
type="text"
name="name"
:class="{ error: $v.name.$error }"
:label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
:has-error="$v.name.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.NAME.ERROR')"
@blur="$v.name.$touch"
/>
<form-input
v-model="displayName"
type="text"
name="displayName"
:class="{ error: $v.displayName.$error }"
:label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
:has-error="$v.displayName.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')"
@blur="$v.displayName.$touch"
/>
<form-input
v-if="!globalConfig.disableUserProfileUpdate"
v-model="email"
type="email"
name="email"
:class="{ error: $v.email.$error }"
:label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
:has-error="$v.email.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.EMAIL.ERROR')"
@blur="$v.email.$touch"
/>
<v3-button
type="submit"
color-scheme="primary"
variant="solid"
icon="copy"
show-right-icon
size="large"
<form
class="flex flex-col gap-6"
@submit.prevent="updateUser('profile')"
>
{{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
</v3-button>
</form>
<form-input
v-model="name"
type="text"
name="name"
:class="{ error: $v.name.$error }"
:label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
:has-error="$v.name.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.NAME.ERROR')"
@blur="$v.name.$touch"
/>
<form-input
v-model="displayName"
type="text"
name="displayName"
:class="{ error: $v.displayName.$error }"
:label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
:placeholder="
$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')
"
:has-error="$v.displayName.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')"
@blur="$v.displayName.$touch"
/>
<form-input
v-if="!globalConfig.disableUserProfileUpdate"
v-model="email"
type="email"
name="email"
:class="{ error: $v.email.$error }"
:label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
:has-error="$v.email.$error"
:error-message="$t('PROFILE_SETTINGS.FORM.EMAIL.ERROR')"
@blur="$v.email.$touch"
/>
<v3-button
type="submit"
color-scheme="primary"
variant="solid"
size="large"
>
{{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
</v3-button>
</form>
</div>
<personal-wrapper
header="Personal message signature"
@@ -82,11 +85,13 @@
:show-action-button="false"
>
<template #settingsItem>
<div class="flex flex-col justify-between w-full gap-4 sm:flex-row">
<div
class="flex flex-col justify-between w-full gap-5 sm:gap-4 sm:flex-row"
>
<button
v-for="keyOption in keyOptions"
:key="keyOption.key"
class="p-0 cursor-pointer"
class="reset-base"
>
<hot-key-card
:heading="keyOption.heading"
@@ -109,6 +114,15 @@
<notification-settings />
</template>
</personal-wrapper>
<personal-wrapper
header="Notification preferences"
description=""
:show-action-button="false"
>
<template #settingsItem>
<notification-preferences />
</template>
</personal-wrapper>
<personal-wrapper
header="Access Token"
:description="
@@ -145,6 +159,7 @@ import { mapGetters } from 'vuex';
import { clearCookiesOnLogout } from '../../../../store/utils/api';
import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
import NotificationSettings from './NotificationSettings.vue';
import NotificationPreferences from './NotificationPreferences.vue';
import FormInput from 'v3/components/Form/Input.vue';
import V3Button from 'v3/components/Form/Button.vue';
@@ -159,6 +174,7 @@ export default {
AccessToken,
FormInput,
V3Button,
NotificationPreferences,
},
mixins: [alertMixin, globalConfigMixin, uiSettingsMixin],
data() {
app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
+8 -5
View File
@@ -10,14 +10,15 @@
:enable-suggestions="false"
:show-image-resize-toolbar="true"
/>
<woot-button
class="w-fit"
:is-loading="isUpdating"
type="button"
<v3-button
type="submit"
color-scheme="primary"
variant="solid"
size="large"
@click.prevent="updateSignature"
>
{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
</woot-button>
</v3-button>
</div>
</template>
@@ -27,10 +28,12 @@ import { mapGetters } from 'vuex';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import alertMixin from 'shared/mixins/alertMixin';
import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
import V3Button from 'v3/components/Form/Button.vue';
export default {
components: {
WootMessageEditor,
V3Button,
},
mixins: [alertMixin],
data() {
app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+457 -128
View File
@@ -1,161 +1,490 @@
<template>
<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">
<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 id="profile-settings-notifications" class="flex flex-col gap-6">
<div>
<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"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<span class="text-slate-700 dark:text-slate-200">
A new conversation is created
</span>
<table-header-cell :span="6" label="Notification type">
<span class="text-sm font-normal uppercase text-ash-900">
Notification type
</span>
</table-header-cell>
<table-header-cell :span="3" label="Email">
<span class="text-sm font-medium uppercase text-ash-900">
Email
</span>
</table-header-cell>
<table-header-cell :span="3" label="Push notification">
<div class="flex flex-row items-center justify-center gap-1">
<span class="text-sm font-medium uppercase text-ash-900">
Push notification
</span>
<!-- <woot-switch
:value="!hasEnabledPushPermissions"
@input="onRequestPermissions()"
/> -->
</div>
</table-header-cell>
</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"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 tracking-[0.5] rtl:text-right"
>
<span class="text-sm text-ash-900">
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
v-model="selectedEmailFlags"
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]"
type="checkbox"
value="email_conversation_creation"
@input="handleEmailInput"
/>
</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="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"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
>
<span class="text-sm text-ash-900">
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
v-model="selectedEmailFlags"
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]"
type="checkbox"
value="email_conversation_assignment"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_conversation_creation"
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]"
@input="handlePushInput"
/>
</div>
</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"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
>
<span class="text-sm text-ash-900">
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
v-model="selectedEmailFlags"
type="checkbox"
value="email_conversation_mention"
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]"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_conversation_mention"
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]"
@input="handlePushInput"
/>
</div>
</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"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
>
<span class="text-sm text-ash-900">
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
v-model="selectedEmailFlags"
type="checkbox"
value="email_conversation_message"
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]"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_assigned_conversation_new_message"
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]"
@input="handlePushInput"
/>
</div>
</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"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
>
<span class="text-sm text-ash-900">
New message is created in an participating 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
v-model="selectedEmailFlags"
type="checkbox"
value="email_participating_conversation_new_message"
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]"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_participating_conversation_new_message"
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]"
@input="handlePushInput"
/>
</div>
</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"
v-if="isSLAEnabled"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
>
<span class="text-sm text-ash-900">
Conversation misses first response SLA
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_sla_missed_first_response"
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
v-model="selectedPushFlags"
type="checkbox"
value="push_sla_missed_first_response"
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]"
@input="handlePushInput"
/>
</div>
</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"
v-if="isSLAEnabled"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
>
<span class="text-sm text-ash-900">
Conversation misses next response SLA
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_sla_missed_next_response"
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
v-model="selectedPushFlags"
type="checkbox"
value="push_sla_missed_next_response"
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]"
@input="handlePushInput"
/>
</div>
</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"
v-if="isSLAEnabled"
class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
>
<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
class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-ash-900 rtl:text-right"
>
<span class="text-sm text-ash-900">
Conversation misses resolution SLA
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_sla_missed_resolution"
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
v-model="selectedPushFlags"
type="checkbox"
value="push_sla_missed_resolution"
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]"
@input="handlePushInput"
/>
</div>
</div>
</div>
</div>
</template>
<script setup>
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import configMixin from 'shared/mixins/configMixin';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
import {
hasPushPermissions,
requestPushPermissions,
verifyServiceWorkerExistence,
} from '../../../../helper/pushHelper';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
export default {
components: {
TableHeaderCell,
},
mixins: [alertMixin, configMixin, uiSettingsMixin],
data() {
return {
selectedEmailFlags: [],
selectedPushFlags: [],
enableAudioAlerts: false,
hasEnabledPushPermissions: false,
playAudioWhenTabIsInactive: false,
alertIfUnreadConversationExist: false,
notificationTone: 'ding',
notificationAlertTones: [
{
value: 'ding',
label: 'Ding',
},
{
value: 'bell',
label: 'Bell',
},
],
};
},
computed: {
...mapGetters({
accountId: 'getCurrentAccountId',
emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
pushFlags: 'userNotificationSettings/getSelectedPushFlags',
uiSettings: 'getUISettings',
isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
}),
hasPushAPISupport() {
return !!('Notification' in window);
},
isSLAEnabled() {
return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
},
},
watch: {
emailFlags(value) {
this.selectedEmailFlags = value;
},
pushFlags(value) {
this.selectedPushFlags = value;
},
uiSettings(value) {
this.notificationUISettings(value);
},
},
mounted() {
if (hasPushPermissions()) {
this.getPushSubscription();
}
this.notificationUISettings(this.uiSettings);
this.$store.dispatch('userNotificationSettings/get');
},
methods: {
notificationUISettings(uiSettings) {
const {
enable_audio_alerts: enableAudio = false,
always_play_audio_alert: alwaysPlayAudioAlert,
alert_if_unread_assigned_conversation_exist:
alertIfUnreadConversationExist,
notification_tone: notificationTone,
} = uiSettings;
this.enableAudioAlerts = enableAudio;
this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
this.notificationTone = notificationTone || 'ding';
},
onRegistrationSuccess() {
this.hasEnabledPushPermissions = true;
},
onRequestPermissions() {
requestPushPermissions({
onSuccess: this.onRegistrationSuccess,
});
},
getPushSubscription() {
verifyServiceWorkerExistence(registration =>
registration.pushManager
.getSubscription()
.then(subscription => {
if (!subscription) {
this.hasEnabledPushPermissions = false;
} else {
this.hasEnabledPushPermissions = true;
}
})
// eslint-disable-next-line no-console
.catch(error => console.log(error))
);
},
async updateNotificationSettings() {
try {
this.$store.dispatch('userNotificationSettings/update', {
selectedEmailFlags: this.selectedEmailFlags,
selectedPushFlags: this.selectedPushFlags,
});
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
} catch (error) {
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
}
},
handleEmailInput(e) {
this.selectedEmailFlags = this.toggleInput(
this.selectedEmailFlags,
e.target.value
);
this.updateNotificationSettings();
},
handlePushInput(e) {
this.selectedPushFlags = this.toggleInput(
this.selectedPushFlags,
e.target.value
);
this.updateNotificationSettings();
},
handleAudioInput(e) {
this.enableAudioAlerts = e.target.value;
this.updateUISettings({
enable_audio_alerts: this.enableAudioAlerts,
});
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
},
handleAudioAlertConditions(e) {
let condition = e.target.value;
if (condition === 'tab_is_inactive') {
this.updateUISettings({
always_play_audio_alert: !e.target.checked,
});
} else if (condition === 'conversations_are_read') {
this.updateUISettings({
alert_if_unread_assigned_conversation_exist: e.target.checked,
});
}
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
},
handleAudioToneChange(value) {
this.updateUISettings({ notification_tone: value });
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
},
toggleInput(selected, current) {
if (selected.includes(current)) {
const newSelectedFlags = selected.filter(flag => flag !== current);
return newSelectedFlags;
}
return [...selected, current];
},
},
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/variables.scss';
.notification--checkbox {
font-size: $font-size-large;
}
.push-notification--button {
margin-bottom: var(--space-one);
}
.notification-label {
display: flex;
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-small);
}
.tone-selector {
height: var(--space-large);
padding-bottom: var(--space-micro);
padding-top: var(--space-micro);
width: var(--space-mega);
}
</style>
app/javascript/dashboard/routes/dashboard/settings/personal/NotificationSettings.vue
+24 -303
View File
@@ -1,5 +1,5 @@
<template>
<div id="profile-settings-notifications" class="flex flex-col gap-4">
<div id="profile-settings-notifications" class="flex flex-col gap-6">
<form-select
v-model="notificationTone"
name="timezone"
@@ -20,15 +20,15 @@
<div>
<label
class="flex justify-between pb-1 text-sm font-medium leading-6 text-slate-900 dark:text-white"
class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
>
Alert events for conversations
</label>
<div
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"
class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-md border-ash-200"
>
<div
class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
>
<input
id="audio_enable_alert_none"
@@ -38,10 +38,15 @@
value="none"
@input="handleAudioInput"
/>
<label>None</label>
<label
class="text-sm font-medium text-ash-900"
:class="{ 'text-ash-400': enableAudioAlerts !== 'none' }"
>
None
</label>
</div>
<div
class="flex flex-row items-center justify-center gap-1 border-r border-slate-75 grow"
class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow"
>
<input
id="audio_enable_alert_mine"
@@ -51,9 +56,14 @@
value="mine"
@input="handleAudioInput"
/>
<label>Assigned</label>
<label
class="text-sm font-medium text-ash-900"
:class="{ 'text-ash-400': enableAudioAlerts !== 'mine' }"
>
Assigned
</label>
</div>
<div class="flex flex-row items-center justify-center gap-1 grow">
<div class="flex flex-row items-center justify-center gap-2 px-4 grow">
<input
id="audio_enable_alert_all"
v-model="enableAudioAlerts"
@@ -62,7 +72,12 @@
value="all"
@input="handleAudioInput"
/>
<label>All</label>
<label
class="text-sm font-medium text-ash-900"
:class="{ 'text-ash-400': enableAudioAlerts !== 'all' }"
>
All
</label>
</div>
</div>
</div>
@@ -98,298 +113,6 @@
</label>
</div>
</div>
<div>
<h4 class="text-lg font-medium text-slate-900 dark:text-slate-25">
Notification preferences
</h4>
<!-- 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"
>
<table-header-cell :span="6" label="Notification type" />
<table-header-cell :span="3" label="Email" />
<table-header-cell :span="3" label="Push notification">
<div class="flex flex-row items-center justify-center gap-1">
<span
class="text-xs font-medium uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
>
Push notification
</span>
<woot-switch
:value="!hasEnabledPushPermissions"
@input="onRequestPermissions()"
/>
</div>
</table-header-cell>
</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
v-model="selectedEmailFlags"
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]"
type="checkbox"
value="email_conversation_creation"
@input="handleEmailInput"
/>
</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
v-model="selectedEmailFlags"
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]"
type="checkbox"
value="email_conversation_assignment"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_conversation_creation"
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]"
@input="handlePushInput"
/>
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_conversation_mention"
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]"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_conversation_mention"
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]"
@input="handlePushInput"
/>
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_conversation_message"
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]"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_assigned_conversation_new_message"
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]"
@input="handlePushInput"
/>
</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 participating 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
v-model="selectedEmailFlags"
type="checkbox"
value="email_participating_conversation_new_message"
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]"
@input="handleEmailInput"
/>
</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
v-model="selectedPushFlags"
type="checkbox"
value="push_participating_conversation_new_message"
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]"
@input="handlePushInput"
/>
</div>
</div>
<div
v-if="isSLAEnabled"
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 misses first response SLA
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_sla_missed_first_response"
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
v-model="selectedPushFlags"
type="checkbox"
value="push_sla_missed_first_response"
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]"
@input="handlePushInput"
/>
</div>
</div>
<div
v-if="isSLAEnabled"
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 misses next response SLA
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_sla_missed_next_response"
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
v-model="selectedPushFlags"
type="checkbox"
value="push_sla_missed_next_response"
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]"
@input="handlePushInput"
/>
</div>
</div>
<div
v-if="isSLAEnabled"
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 misses resolution SLA
</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
v-model="selectedEmailFlags"
type="checkbox"
value="email_sla_missed_resolution"
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
v-model="selectedPushFlags"
type="checkbox"
value="push_sla_missed_resolution"
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]"
@input="handlePushInput"
/>
</div>
</div>
</div>
</div>
</template>
@@ -399,7 +122,6 @@ import alertMixin from 'shared/mixins/alertMixin';
import configMixin from 'shared/mixins/configMixin';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import FormSelect from 'v3/components/Form/Select.vue';
import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
import {
hasPushPermissions,
requestPushPermissions,
@@ -410,7 +132,6 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
export default {
components: {
FormSelect,
TableHeaderCell,
},
mixins: [alertMixin, configMixin, uiSettingsMixin],
data() {
app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
+12 -15
View File
@@ -1,36 +1,33 @@
<template>
<div class="flex flex-col items-start w-full gap-6">
<div
class="flex flex-col w-full gap-4 divide-y divide-slate-200 dark:divide-slate-700"
>
<h4
v-if="header"
class="text-lg font-medium text-slate-900 dark:text-slate-25"
>
<div class="flex flex-col w-full gap-4">
<h4 v-if="header" class="text-lg font-medium text-ash-900">
{{ header }}
</h4>
<p
v-if="description"
class="pt-4 mb-0 text-sm font-normal text-slate-600 dark:text-slate-400"
>
<div class="flex flex-row items-center justify-between">
<div class="flex-grow h-px bg-ash-200" />
</div>
<p v-if="description" class="mb-0 text-sm font-normal text-ash-900">
{{ description }}
</p>
</div>
<div v-if="$slots.settingsItem" class="flex flex-col w-full gap-6">
<slot name="settingsItem" />
<woot-button
<v3-button
v-if="showActionButton"
type="submit"
color-scheme="primary"
class="rounded-xl w-fit"
@click="$emit('click')"
variant="solid"
size="large"
>
{{ buttonText }}
</woot-button>
</v3-button>
</div>
</div>
</template>
<script setup>
import V3Button from 'v3/components/Form/Button.vue';
defineProps({
header: {
type: String,
app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue
+38 -20
View File
@@ -1,22 +1,26 @@
<template>
<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="flex flex-col gap-2">
<span class="font-medium text-ash-90"> Profile picture </span>
<div
class="relative rounded-xl h-[72px] w-[72px] cursor-pointer"
:title="title"
@mouse-over="showUpload"
@click="openFileInput"
:title="name"
@mouseover="showUpload"
@mouseleave="hideUpload"
>
<img
v-if="shouldShowImage"
class="rounded-xl h-[72px] w-[72px]"
:src="src"
draggable="false"
@load="onImgLoad"
@error="onImgError"
/>
<Avatar
v-show="!shouldShowImage"
:username="userNameWithoutEmoji"
:size="72"
/>
<input
ref="file"
type="file"
@@ -24,36 +28,41 @@
style="display: none"
@change="handleImageUpload"
/>
<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"
<button
v-if="src && showUploadIcon"
class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none reset-base -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
@click="onAvatarDelete"
>
<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"
</button>
<button
v-if="showUploadIcon"
class="reset-base 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"
@click="openFileInput"
>
<fluent-icon
icon="avatar-upload"
size="32"
class="text-white dark:text-white"
/>
</div>
<fluent-icon icon="avatar-upload" size="32" class="text-white" />
</button>
</div>
</div>
</div>
</template>
<script>
import Avatar from 'v3/components/Form/Avatar.vue';
import { removeEmoji } from 'shared/helpers/emoji';
export default {
components: {
Avatar,
},
props: {
src: {
type: String,
default: '',
},
title: {
name: {
type: String,
default: '',
},
@@ -66,6 +75,9 @@ export default {
};
},
computed: {
userNameWithoutEmoji() {
return removeEmoji(this.name);
},
shouldShowImage() {
if (!this.src) {
return false;
@@ -73,7 +85,7 @@ export default {
if (this.hasImageLoaded) {
return !this.imgError;
}
return false;
return true;
},
},
watch: {
@@ -93,6 +105,9 @@ export default {
showUpload() {
this.showUploadIcon = true;
},
hideUpload() {
this.showUploadIcon = false;
},
openFileInput() {
// Trigger click event on the hidden file input
this.$refs.file.click();
@@ -104,6 +119,9 @@ export default {
url: file ? URL.createObjectURL(file) : null,
});
},
onAvatarDelete() {
this.$emit('delete');
},
},
};
</script>
app/javascript/shared/components/FluentIcon/dashboard-icons.json
+2 -1
View File
@@ -273,5 +273,6 @@
"chevron-left-single-outline": "m15 18-6-6 6-6",
"chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
"chevron-right-single-outline": "m9 18 6-6-6-6",
"avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z"
"avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z",
"text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75"
}
app/javascript/v3/components/Form/Avatar.vue
+43
View File
@@ -0,0 +1,43 @@
<template>
<div
class="rounded-xl h-[72px] w-[72px] flex leading-[100%] font-medium items-center justify-center text-center cursor-default bg-ash-200 text-ash-900"
:style="style"
aria-hidden="true"
>
<slot>{{ userInitial }}</slot>
</div>
</template>
<script>
export default {
name: 'Avatar',
props: {
username: {
type: String,
default: '',
},
size: {
type: Number,
default: 40,
},
},
computed: {
style() {
return {
fontSize: `${Math.floor(this.size / 2.5)}px`,
};
},
userInitial() {
const parts = this.username.split(/[ -]/);
let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
initials = initials.replace(/[a-z]+/g, '');
}
initials = initials.substring(0, 2).toUpperCase();
return initials;
},
},
};
</script>
app/javascript/v3/components/Form/Button.vue
+19 -29
View File
@@ -3,10 +3,15 @@
class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
:type="type"
:class="buttonClasses"
:disabled="isDisabled || isLoading"
:disabled="isDisabled"
@click="handleClick"
>
<fluent-icon :size="iconSize" :icon="icon" class="flex-shrink-0" />
<fluent-icon
v-if="icon"
:size="iconSize"
:icon="icon"
class="flex-shrink-0"
/>
<span
v-if="$slots.default"
class="text-sm font-medium truncate"
@@ -14,7 +19,12 @@
>
<slot />
</span>
<fluent-icon :size="iconSize" icon="chevron-right" class="flex-shrink-0" />
<fluent-icon
v-if="rightIcon"
:size="iconSize"
icon="chevron-right"
class="flex-shrink-0"
/>
</button>
</template>
<script>
@@ -60,41 +70,21 @@ export default {
type: Boolean,
default: false,
},
rightIcon: {
type: Boolean,
default: false,
},
},
computed: {
// variantClasses() {
// if (this.variant.includes('link')) {
// return `clear ${this.variant}`;
// }
// return this.variant;
// },
// hasOnlyIcon() {
// const hasEmojiOrIcon = this.emoji || this.icon;
// return !this.$slots.default && hasEmojiOrIcon;
// },
// hasOnlyIconClasses() {
// return this.hasOnlyIcon ? 'button--only-icon' : '';
// },
buttonClasses() {
return [
this.colorClass,
this.sizeClass,
// this.variantClasses,
// this.hasOnlyIconClasses,
// this.size,
// this.colorClass,
// this.classNames,
// this.isDisabled ? 'disabled' : '',
// this.isExpanded ? 'expanded' : '',
];
return [this.colorClass, this.sizeClass];
},
colorClass() {
if (this.colorScheme === 'primary') {
return 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
if (this.colorScheme === 'secondary') {
return 'bg-ash-100 text-white hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
if (this.colorScheme === 'danger') {
return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
app/javascript/v3/components/Form/Select.vue
+3 -3
View File
@@ -11,11 +11,11 @@
:selected="value"
:name="name"
:class="{
'text-slate-400': !value,
'text-slate-900 dark:text-slate-100': value,
'text-ash-400': !value,
'text-ash-900': value,
'pl-9': icon,
}"
class="block w-full px-3 py-2 pr-6 mb-0 border-0 rounded-md shadow-sm outline-none appearance-none select-caret ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
@input="onInput"
>
<option value="" disabled selected class="hidden">