feat: Dark Mode (#7471)
This commit is contained in:
Sivin Varghese
@@ -9,7 +9,7 @@
|
||||
@close-key-shortcut-modal="closeKeyShortcutModal"
|
||||
@show-add-label-popup="showAddLabelPopup"
|
||||
/>
|
||||
<section class="app-content columns">
|
||||
<section class="app-content flex-1 px-0">
|
||||
<router-view />
|
||||
<command-bar />
|
||||
<account-selector
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="small-12 medium-3 bg-white contact--panel"
|
||||
class="w-[25%] bg-white dark:bg-slate-900 contact--panel"
|
||||
:class="{ 'border-left': showAvatar }"
|
||||
>
|
||||
<contact-info
|
||||
@@ -148,38 +148,20 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
.contact--profile {
|
||||
padding-bottom: var(--space-slab);
|
||||
margin-bottom: var(--space-normal);
|
||||
@apply pb-3 mb-4;
|
||||
}
|
||||
}
|
||||
.contact--panel {
|
||||
height: 100%;
|
||||
font-size: var(--font-size-small);
|
||||
overflow-y: auto;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
@apply border-r border-slate-50 dark:border-slate-700;
|
||||
@apply border-r border-slate-50 dark:border-slate-700 h-full text-sm overflow-y-auto relative;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
background-color: var(--white);
|
||||
@apply bg-white dark:bg-slate-900;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation--details {
|
||||
padding: 0 var(--space-normal);
|
||||
}
|
||||
|
||||
.contact--mute {
|
||||
color: var(--r-400);
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact--actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@apply py-0 px-4;
|
||||
}
|
||||
</style>
|
||||
|
||||
+15
-20
@@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<div class="column">
|
||||
<div>
|
||||
<woot-modal-header :header-title="filterModalHeaderTitle">
|
||||
<p>{{ filterModalSubTitle }}</p>
|
||||
<p class="text-slate-600 dark:text-slate-200">
|
||||
{{ filterModalSubTitle }}
|
||||
</p>
|
||||
</woot-modal-header>
|
||||
<div class="column modal-content">
|
||||
<div v-if="isSegmentsView" class="columns">
|
||||
<div class="p-8">
|
||||
<div v-if="isSegmentsView">
|
||||
<label class="input-label" :class="{ error: !activeSegmentNewName }">
|
||||
{{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
|
||||
<input
|
||||
v-model="activeSegmentNewName"
|
||||
type="text"
|
||||
class="name-input"
|
||||
class="folder-input border-slate-75 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
<span v-if="!activeSegmentNewName" class="message">
|
||||
{{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
|
||||
@@ -20,7 +22,9 @@
|
||||
{{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-12 columns filters-wrap">
|
||||
<div
|
||||
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
|
||||
>
|
||||
<filter-input-box
|
||||
v-for="(filter, i) in appliedFilters"
|
||||
:key="i"
|
||||
@@ -41,7 +45,7 @@
|
||||
@resetFilter="resetFilter(i, appliedFilters[i])"
|
||||
@removeFilter="removeFilter(i)"
|
||||
/>
|
||||
<div class="filter-actions">
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
icon="add"
|
||||
color-scheme="success"
|
||||
@@ -63,8 +67,8 @@
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="medium-12 columns">
|
||||
<div class="modal-footer justify-content-end w-full">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
@@ -349,17 +353,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filters-wrap {
|
||||
padding: var(--space-normal);
|
||||
border-radius: var(--border-radius-large);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background-light);
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-top: var(--space-normal);
|
||||
.folder-input {
|
||||
@apply w-[50%];
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<section class="contacts-table-wrap">
|
||||
<section
|
||||
class="contacts-table-wrap bg-white dark:bg-slate-900 flex-1 h-full overflow-hidden"
|
||||
>
|
||||
<ve-table
|
||||
:fixed-header="true"
|
||||
max-height="calc(100vh - 7.125rem)"
|
||||
@@ -18,7 +20,7 @@
|
||||
v-else-if="!isLoading && !contacts.length"
|
||||
:title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
|
||||
/>
|
||||
<div v-if="isLoading" class="contacts--loader">
|
||||
<div v-if="isLoading" class="items-center flex text-base justify-center">
|
||||
<spinner />
|
||||
<span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
|
||||
</div>
|
||||
@@ -133,7 +135,7 @@ export default {
|
||||
status={row.availability_status}
|
||||
/>
|
||||
<div class="user-block">
|
||||
<h6 class="sub-block-title text-truncate">
|
||||
<h6 class="sub-block-title overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
<router-link
|
||||
to={`/app/accounts/${this.$route.params.accountId}/contacts/${row.id}`}
|
||||
class="user-name"
|
||||
@@ -159,7 +161,7 @@ export default {
|
||||
renderBodyCell: ({ row }) => {
|
||||
if (row.email)
|
||||
return (
|
||||
<div class="text-truncate">
|
||||
<div class="overflow-hidden whitespace-nowrap text-ellipsis text-woot-500 dark:text-woot-500">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
@@ -202,7 +204,7 @@ export default {
|
||||
renderBodyCell: ({ row }) => {
|
||||
if (row.country) {
|
||||
return (
|
||||
<div class="text-truncate">
|
||||
<div class="overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{`${getCountryFlag(row.countryCode)} ${row.country}`}
|
||||
</div>
|
||||
);
|
||||
@@ -284,43 +286,27 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.contacts-table-wrap {
|
||||
flex: 1 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contacts-table-wrap::v-deep {
|
||||
.ve-table {
|
||||
padding-bottom: var(--space-large);
|
||||
@apply pb-8;
|
||||
}
|
||||
.row--user-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
@apply items-center flex text-left;
|
||||
|
||||
.user-block {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 var(--space-small);
|
||||
@apply items-start flex flex-col my-0 mx-2;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
@apply text-sm font-medium m-0 capitalize;
|
||||
}
|
||||
|
||||
.view-details--button {
|
||||
color: var(--color-body);
|
||||
@apply text-slate-600 dark:text-slate-200;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
margin: 0;
|
||||
@apply m-0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -336,25 +322,13 @@ export default {
|
||||
font-size: var(--font-size-mini) !important;
|
||||
}
|
||||
.ve-table-sort {
|
||||
top: -4px;
|
||||
@apply -top-1;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts--loader {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-default);
|
||||
justify-content: center;
|
||||
padding: var(--space-big);
|
||||
}
|
||||
|
||||
.cell--social-profiles {
|
||||
a {
|
||||
color: var(--s-300);
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-medium);
|
||||
min-width: var(--space-large);
|
||||
text-align: center;
|
||||
@apply text-slate-300 dark:text-slate-400 text-lg min-w-[2rem] text-center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="contacts-page row">
|
||||
<div class="left-wrap" :class="wrapClass">
|
||||
<div class="w-full flex flex-row">
|
||||
<div class="flex flex-col h-full" :class="wrapClass">
|
||||
<contacts-header
|
||||
:search-query="searchQuery"
|
||||
:header-title="pageTitle"
|
||||
@@ -187,7 +187,7 @@ export default {
|
||||
return this.selectedContactId !== '';
|
||||
},
|
||||
wrapClass() {
|
||||
return this.showContactViewPane ? 'medium-9' : 'medium-12';
|
||||
return this.showContactViewPane ? 'w-[75%]' : 'w-full';
|
||||
},
|
||||
pageParameter() {
|
||||
const selectedPageNumber = Number(this.$route.query?.page);
|
||||
@@ -458,15 +458,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contacts-page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,30 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="table-actions-wrap">
|
||||
<div class="left-aligned-wrap">
|
||||
<header
|
||||
class="bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800"
|
||||
>
|
||||
<div class="flex justify-between w-full py-2 px-4">
|
||||
<div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
|
||||
<woot-sidemenu-icon />
|
||||
<h1 class="page-title header-title">
|
||||
<h1
|
||||
class="m-0 text-2xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
|
||||
>
|
||||
{{ headerTitle }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="right-aligned-wrap">
|
||||
<div class="search-wrap">
|
||||
<div class="search-icon-container">
|
||||
<fluent-icon icon="search" class="search-icon" />
|
||||
<div class="flex gap-2">
|
||||
<div
|
||||
class="max-w-[400px] min-w-[150px] flex items-center relative mx-2 search-wrap"
|
||||
>
|
||||
<div class="flex items-center absolute h-full left-2.5">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="h-5 leading-9 text-sm text-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
|
||||
class="contact-search"
|
||||
class="contact-search border-slate-100 dark:border-slate-600"
|
||||
:value="searchQuery"
|
||||
@keyup.enter="submitSearch"
|
||||
@input="inputSearch"
|
||||
@@ -29,9 +38,9 @@
|
||||
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="hasActiveSegments">
|
||||
<div v-if="hasActiveSegments" class="flex gap-2">
|
||||
<woot-button
|
||||
class="margin-right-1 clear"
|
||||
class="clear"
|
||||
color-scheme="secondary"
|
||||
icon="edit"
|
||||
@click="onToggleEditSegmentsModal"
|
||||
@@ -39,7 +48,7 @@
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="margin-right-1 clear"
|
||||
class="clear"
|
||||
color-scheme="alert"
|
||||
icon="delete"
|
||||
@click="onToggleDeleteSegmentsModal"
|
||||
@@ -47,10 +56,13 @@
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="!hasActiveSegments" class="filters__button-wrap">
|
||||
<div v-if="hasAppliedFilters" class="filters__applied-indicator" />
|
||||
<div v-if="!hasActiveSegments" class="relative">
|
||||
<div
|
||||
v-if="hasAppliedFilters"
|
||||
class="absolute h-2 w-2 top-1 right-3 bg-slate-500 dark:bg-slate-500 rounded-full"
|
||||
/>
|
||||
<woot-button
|
||||
class="margin-right-1 clear"
|
||||
class="clear"
|
||||
color-scheme="secondary"
|
||||
data-testid="create-new-contact"
|
||||
icon="filter"
|
||||
@@ -62,7 +74,7 @@
|
||||
|
||||
<woot-button
|
||||
v-if="hasAppliedFilters && !hasActiveSegments"
|
||||
class="margin-right-1 clear"
|
||||
class="clear"
|
||||
color-scheme="alert"
|
||||
variant="clear"
|
||||
icon="save"
|
||||
@@ -71,7 +83,7 @@
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="margin-right-1 clear"
|
||||
class="clear"
|
||||
color-scheme="success"
|
||||
icon="person-add"
|
||||
data-testid="create-new-contact"
|
||||
@@ -177,98 +189,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-title {
|
||||
margin: 0;
|
||||
}
|
||||
.table-actions-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: var(--space-small) var(--space-normal) var(--space-small)
|
||||
var(--space-normal);
|
||||
}
|
||||
|
||||
.left-aligned-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
min-width: var(--space-mega);
|
||||
|
||||
.header-title {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin: 0 var(--space-small);
|
||||
}
|
||||
}
|
||||
|
||||
.right-aligned-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
max-width: 400px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-right: var(--space-small);
|
||||
margin-left: var(--space-small);
|
||||
|
||||
.search-icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: var(--space-one);
|
||||
|
||||
.search-icon {
|
||||
height: var(--font-size-medium);
|
||||
line-height: 2.25rem;
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--b-700);
|
||||
}
|
||||
}
|
||||
.contact-search {
|
||||
margin: 0;
|
||||
height: 2.375rem;
|
||||
width: 100%;
|
||||
font-size: var(--font-size-small);
|
||||
padding-left: calc(var(--space-large) + var(--space-smaller));
|
||||
padding-right: 3.75rem;
|
||||
border-color: var(--s-100);
|
||||
@apply pl-9 pr-[3.75rem] text-sm w-full h-[2.375rem] m-0;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: var(--space-small);
|
||||
height: 2rem;
|
||||
right: var(--space-smaller);
|
||||
position: absolute;
|
||||
padding: 0 var(--space-small);
|
||||
transition: transform 100ms linear;
|
||||
opacity: 0;
|
||||
transform: translateX(-1px);
|
||||
visibility: hidden;
|
||||
@apply ml-2 h-8 right-1 absolute py-0 px-2 opacity-0 -translate-x-px invisible;
|
||||
}
|
||||
|
||||
.button.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.filters__button-wrap {
|
||||
position: relative;
|
||||
|
||||
.filters__applied-indicator {
|
||||
position: absolute;
|
||||
height: var(--space-small);
|
||||
width: var(--space-small);
|
||||
top: var(--space-smaller);
|
||||
right: var(--space-slab);
|
||||
background-color: var(--s-500);
|
||||
border-radius: var(--border-radius-rounded);
|
||||
@apply opacity-100 translate-x-0 visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
|
||||
<p>
|
||||
{{ $t('IMPORT_CONTACTS.DESC') }}
|
||||
@@ -9,8 +9,8 @@
|
||||
}}</a>
|
||||
</p>
|
||||
</woot-modal-header>
|
||||
<div class="row modal-content">
|
||||
<div class="medium-12 columns">
|
||||
<div class="flex flex-col p-8">
|
||||
<div class="w-full">
|
||||
<label>
|
||||
<span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
|
||||
<input
|
||||
@@ -22,8 +22,8 @@
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="medium-12 columns">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<div class="w-full">
|
||||
<woot-button
|
||||
:disabled="uiFlags.isCreating || !file"
|
||||
:loading="uiFlags.isCreating"
|
||||
|
||||
@@ -71,14 +71,13 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-label-message {
|
||||
margin-bottom: var(--space-normal);
|
||||
color: var(--b-500);
|
||||
@apply text-slate-500 dark:text-slate-400 mb-4;
|
||||
}
|
||||
|
||||
::v-deep .conversation {
|
||||
padding-right: 0;
|
||||
@apply pr-0;
|
||||
.conversation--details {
|
||||
padding-left: var(--space-small);
|
||||
@apply pl-2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="conv-details--item" :class="{ compact: compact }">
|
||||
<h4 class="conv-details--item__label text-block-title">
|
||||
<span class="item__title">
|
||||
<div class="overflow-auto" :class="compact ? 'py-0 px-0' : 'py-3 px-4'">
|
||||
<div class="items-center flex justify-between mb-1.5">
|
||||
<span class="text-slate-800 font-medium dark:text-slate-100 text-sm">
|
||||
{{ title }}
|
||||
</span>
|
||||
<slot name="button" />
|
||||
</h4>
|
||||
<div v-if="value" class="conv-details--item__value">
|
||||
</div>
|
||||
<div v-if="value" class="break-words">
|
||||
<slot>
|
||||
{{ value }}
|
||||
</slot>
|
||||
@@ -25,28 +25,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.conv-details--item {
|
||||
overflow: auto;
|
||||
padding: var(--space-slab) var(--space-normal);
|
||||
|
||||
&.compact {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.conv-details--item__label {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.edit-button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.conv-details--item__value {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="medium-3 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 contact--panel"
|
||||
class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 border-l rtl:border-l-0 rtl:border-r contact--panel overflow-y-auto"
|
||||
>
|
||||
<contact-info
|
||||
:contact="contact"
|
||||
@@ -21,7 +21,7 @@
|
||||
<div
|
||||
v-for="element in conversationSidebarItems"
|
||||
:key="element.name"
|
||||
class="list-group-item"
|
||||
class="bg-white dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
v-if="element.name === 'conversation_actions'"
|
||||
@@ -257,72 +257,19 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
|
||||
.contact--panel {
|
||||
border-left: 1px solid var(--color-border);
|
||||
font-size: $font-size-small;
|
||||
overflow-y: auto;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
margin-right: $space-smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.contact--profile {
|
||||
padding-bottom: var(--space-slab);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
@apply pb-3 border-b border-solid border-slate-75 dark:border-slate-700;
|
||||
}
|
||||
.conversation--actions .multiselect-wrap--small {
|
||||
.multiselect {
|
||||
padding-left: var(--space-medium);
|
||||
box-sizing: border-box;
|
||||
@apply box-border pl-6;
|
||||
}
|
||||
.multiselect__element {
|
||||
span {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation--labels {
|
||||
padding: $space-medium;
|
||||
|
||||
.icon {
|
||||
margin-right: $space-micro;
|
||||
font-size: $font-size-micro;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contact--mute {
|
||||
color: $alert-color;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact--actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
margin-top: var(--space-two);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white dark:bg-slate-900">
|
||||
<div class="multiselect-wrap--small">
|
||||
<contact-details-item
|
||||
compact
|
||||
|
||||
@@ -145,10 +145,10 @@ export default {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.conversation--attribute {
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
@apply border-slate-50 dark:border-slate-700 border-b border-solid;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: var(--s-25);
|
||||
@apply bg-slate-25 dark:bg-slate-800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+15
-49
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="watchers-wrap">
|
||||
<div class="watchers--collapsed">
|
||||
<div class="content-wrap">
|
||||
<div class="relative bg-white dark:bg-slate-900">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex justify-between w-full mb-1">
|
||||
<div>
|
||||
<p v-if="watchersList.length" class="total-watchers message-text">
|
||||
<p v-if="watchersList.length" class="total-watchers m-0 text-sm">
|
||||
<spinner v-if="watchersUiFlas.isFetching" size="tiny" />
|
||||
{{ totalWatchersText }}
|
||||
</p>
|
||||
<p v-else class="text-muted message-text">
|
||||
<p v-else class="text-muted m-0 text-sm">
|
||||
{{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -22,13 +22,16 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flex justify-between items-center">
|
||||
<thumbnail-group
|
||||
:more-thumbnails-text="moreThumbnailsText"
|
||||
:show-more-thumbnails-count="showMoreThumbs"
|
||||
:users-list="thumbnailList"
|
||||
/>
|
||||
<p v-if="isUserWatching" class="text-muted message-text">
|
||||
<p
|
||||
v-if="isUserWatching"
|
||||
class="text-slate-300 dark:text-slate-300 m-0 text-sm"
|
||||
>
|
||||
{{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
|
||||
</p>
|
||||
<woot-button
|
||||
@@ -50,8 +53,10 @@
|
||||
:class="{ 'dropdown-pane--open': showDropDown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<div class="dropdown__header">
|
||||
<h4 class="text-block-title text-truncate">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h4
|
||||
class="text-sm m-0 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
|
||||
</h4>
|
||||
<woot-button
|
||||
@@ -225,46 +230,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.watchers-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-smaller);
|
||||
}
|
||||
|
||||
.watchers--collapsed {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dropdown-pane {
|
||||
box-sizing: border-box;
|
||||
top: var(--space-large);
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
.text-block-title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-small);
|
||||
@apply box-border top-8 w-full;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="macro button secondary clear ">
|
||||
<span class="text-truncate">{{ macro.name }}</span>
|
||||
<span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
|
||||
macro.name
|
||||
}}</span>
|
||||
<div class="macros-actions">
|
||||
<woot-button
|
||||
v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
|
||||
@@ -86,16 +88,10 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.macro {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: var(--space-normal);
|
||||
@apply relative flex items-center justify-between leading-4;
|
||||
|
||||
.macros-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
@apply flex items-center justify-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,26 @@
|
||||
<template>
|
||||
<div class="macro-preview">
|
||||
<h6 class="text-block-title macro-title">{{ macro.name }}</h6>
|
||||
<div v-for="(action, i) in resolvedMacro" :key="i" class="macro-block">
|
||||
<div v-if="i !== macro.actions.length - 1" class="macro-block-border" />
|
||||
<div class="macro-block-dot" />
|
||||
<p class="macro-action-name">{{ action.actionName }}</p>
|
||||
<p class="macro-action-params">{{ action.actionValue }}</p>
|
||||
<div
|
||||
class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
|
||||
>
|
||||
<h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
|
||||
{{ macro.name }}
|
||||
</h6>
|
||||
<div
|
||||
v-for="(action, i) in resolvedMacro"
|
||||
:key="i"
|
||||
class="relative pl-4 macro-block"
|
||||
>
|
||||
<div
|
||||
v-if="i !== macro.actions.length - 1"
|
||||
class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
|
||||
/>
|
||||
<div
|
||||
class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
|
||||
/>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
|
||||
{{ action.actionName }}
|
||||
</p>
|
||||
<p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -68,55 +83,10 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.macro-preview {
|
||||
position: absolute;
|
||||
max-height: 22.5rem;
|
||||
min-height: var(--space-jumbo);
|
||||
width: 17rem;
|
||||
border-radius: var(--border-radius-normal);
|
||||
background-color: var(--white);
|
||||
box-shadow: var(--shadow-dropdown-pane);
|
||||
bottom: var(--space-large);
|
||||
right: var(--space-large);
|
||||
overflow-y: auto;
|
||||
padding: var(--space-normal);
|
||||
text-align: left;
|
||||
|
||||
.macro-title {
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
|
||||
.macro-block {
|
||||
position: relative;
|
||||
padding-left: var(--space-normal);
|
||||
&:not(:last-child) {
|
||||
padding-bottom: var(--space-small);
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.macro-block-border {
|
||||
top: 0.390625rem;
|
||||
position: absolute;
|
||||
bottom: var(--space-minus-smaller);
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background-color: var(--s-75);
|
||||
}
|
||||
|
||||
.macro-block-dot {
|
||||
position: absolute;
|
||||
left: -0.21875rem;
|
||||
height: var(--space-small);
|
||||
width: var(--space-small);
|
||||
border: 2px solid var(--s-100);
|
||||
background-color: var(--white);
|
||||
border-radius: var(--border-radius-full);
|
||||
top: 0.2734375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.macro-action-name {
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--s-500);
|
||||
margin-bottom: var(--space-smaller);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<form class="contact--form" @submit.prevent="handleSubmit">
|
||||
<div class="row">
|
||||
<div class="columns">
|
||||
<form
|
||||
class="contact--form w-full pt-6 px-8 pb-8"
|
||||
@submit.prevent="handleSubmit"
|
||||
>
|
||||
<div>
|
||||
<div class="w-full">
|
||||
<woot-avatar-uploader
|
||||
:label="$t('CONTACT_FORM.FORM.AVATAR.LABEL')"
|
||||
:src="avatarUrl"
|
||||
@@ -13,8 +16,8 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="columns">
|
||||
<div>
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.name.$error }">
|
||||
{{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
|
||||
<input
|
||||
@@ -39,7 +42,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.description.$error }">
|
||||
{{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
|
||||
<textarea
|
||||
@@ -50,8 +53,8 @@
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="medium-12 columns">
|
||||
<div>
|
||||
<div class="w-full">
|
||||
<label
|
||||
:class="{
|
||||
error: isPhoneNumberNotValid,
|
||||
@@ -73,7 +76,7 @@
|
||||
</label>
|
||||
<div
|
||||
v-if="isPhoneNumberNotValid || !phoneNumber"
|
||||
class="callout small warning"
|
||||
class="callout small warning text-sm dark:bg-yellow-200/20 dark:text-yellow-400"
|
||||
>
|
||||
{{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
|
||||
</div>
|
||||
@@ -81,12 +84,12 @@
|
||||
</div>
|
||||
<woot-input
|
||||
v-model.trim="companyName"
|
||||
class="columns"
|
||||
class="w-full"
|
||||
:label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
|
||||
:placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
|
||||
/>
|
||||
<div class="row">
|
||||
<div class="medium-12 columns">
|
||||
<div>
|
||||
<div class="w-full">
|
||||
<label>
|
||||
{{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
|
||||
</label>
|
||||
@@ -108,12 +111,12 @@
|
||||
</div>
|
||||
<woot-input
|
||||
v-model="city"
|
||||
class="columns"
|
||||
class="w-full"
|
||||
:label="$t('CONTACT_FORM.FORM.CITY.LABEL')"
|
||||
:placeholder="$t('CONTACT_FORM.FORM.CITY.PLACEHOLDER')"
|
||||
/>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label>
|
||||
Social Profiles
|
||||
</label>
|
||||
@@ -130,8 +133,8 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="medium-12 columns">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="inProgress"
|
||||
:button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
|
||||
@@ -415,21 +418,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact--form {
|
||||
padding: var(--space-normal) var(--space-large) var(--space-large);
|
||||
|
||||
.columns {
|
||||
padding: 0 var(--space-smaller);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-label {
|
||||
font-size: var(--font-size-small);
|
||||
@apply text-sm bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.multiselect .multiselect__tags .multiselect__single {
|
||||
padding-left: 0;
|
||||
@apply pl-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="contact--profile">
|
||||
<div class="contact--info">
|
||||
<div class="contact-info--header">
|
||||
<div class="relative items-center p-4 bg-white dark:bg-slate-900">
|
||||
<div class="text-left rtl:text-right">
|
||||
<div class="flex justify-between flex-row">
|
||||
<thumbnail
|
||||
v-if="showAvatar"
|
||||
:src="contact.thumbnail"
|
||||
@@ -12,14 +12,16 @@
|
||||
<woot-button
|
||||
v-if="showCloseButton"
|
||||
:icon="closeIconName"
|
||||
class="clear secondary close-button--rtl"
|
||||
class="clear secondary rtl:rotate-180"
|
||||
@click="onPanelToggle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="contact--details">
|
||||
<div v-if="showAvatar" class="contact--name-wrap">
|
||||
<h3 class="sub-block-title contact--name">
|
||||
<div class="mt-2 w-full">
|
||||
<div v-if="showAvatar" class="flex items-center mb-2 gap-1">
|
||||
<h3
|
||||
class="text-base text-slate-800 dark:text-slate-100 capitalize whitespace-normal my-0"
|
||||
>
|
||||
{{ contact.name }}
|
||||
</h3>
|
||||
<fluent-icon
|
||||
@@ -31,6 +33,7 @@
|
||||
"
|
||||
icon="info"
|
||||
size="14"
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<a
|
||||
:href="contactProfileLink"
|
||||
@@ -47,11 +50,11 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p v-if="additionalAttributes.description" class="contact--bio">
|
||||
<p v-if="additionalAttributes.description" class="break-words">
|
||||
{{ additionalAttributes.description }}
|
||||
</p>
|
||||
<social-icons :social-profiles="socialProfiles" />
|
||||
<div class="contact--metadata">
|
||||
<div class="mb-3">
|
||||
<contact-info-row
|
||||
:href="contact.email ? `mailto:${contact.email}` : ''"
|
||||
:value="contact.email"
|
||||
@@ -90,11 +93,11 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-actions">
|
||||
<div class="flex items-center w-full mt-2 gap-2">
|
||||
<woot-button
|
||||
v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
|
||||
title="$t('CONTACT_PANEL.NEW_MESSAGE')"
|
||||
class="new-message"
|
||||
class="mr-2 rtl:ml-2 rtl:mr-0"
|
||||
icon="chat"
|
||||
size="small"
|
||||
@click="toggleConversationModal"
|
||||
@@ -102,7 +105,7 @@
|
||||
<woot-button
|
||||
v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
|
||||
title="$t('EDIT_CONTACT.BUTTON_LABEL')"
|
||||
class="edit-contact"
|
||||
class="mr-2 rtl:ml-2 rtl:mr-0"
|
||||
icon="edit"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@@ -111,7 +114,7 @@
|
||||
<woot-button
|
||||
v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
|
||||
title="$t('CONTACT_PANEL.MERGE_CONTACT')"
|
||||
class="merge-contact"
|
||||
class="mr-2 rtl:ml-2 rtl:mr-0"
|
||||
icon="merge"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@@ -123,7 +126,7 @@
|
||||
v-if="isAdmin"
|
||||
v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
|
||||
title="$t('DELETE_CONTACT.BUTTON_LABEL')"
|
||||
class="delete-contact"
|
||||
class="mr-2 rtl:ml-2 rtl:mr-0"
|
||||
icon="delete"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@@ -308,76 +311,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact--profile {
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-normal);
|
||||
}
|
||||
|
||||
.contact--details {
|
||||
margin-top: var(--space-small);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact--info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-info--header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.contact--name-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-small);
|
||||
}
|
||||
|
||||
.contact--name {
|
||||
text-transform: capitalize;
|
||||
white-space: normal;
|
||||
margin: 0 var(--space-smaller) 0 var(--space-smaller);
|
||||
|
||||
a {
|
||||
color: var(--color-body);
|
||||
}
|
||||
}
|
||||
|
||||
.contact--metadata {
|
||||
margin-bottom: var(--space-slab);
|
||||
}
|
||||
|
||||
.contact-actions {
|
||||
margin-top: var(--space-small);
|
||||
}
|
||||
|
||||
.contact-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.new-message,
|
||||
.edit-contact,
|
||||
.merge-contact,
|
||||
.delete-contact {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
}
|
||||
.merge-summary--card {
|
||||
padding: var(--space-normal);
|
||||
}
|
||||
|
||||
.contact--bio {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.button--contact-menu {
|
||||
position: absolute;
|
||||
right: var(--space-normal);
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
<template>
|
||||
<div class="contact-info--row">
|
||||
<a v-if="href" :href="href" class="contact-info--details">
|
||||
<emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
|
||||
<span v-if="value" class="text-truncate" :title="value">{{ value }}</span>
|
||||
<span v-else class="text-muted">{{
|
||||
<div class="-ml-1">
|
||||
<a
|
||||
v-if="href"
|
||||
:href="href"
|
||||
class="flex items-center mb-2 text-slate-800 dark:text-slate-100 hover:underline"
|
||||
>
|
||||
<emoji-or-icon
|
||||
:icon="icon"
|
||||
:emoji="emoji"
|
||||
icon-size="14"
|
||||
class="mr-2 ml-1 rtl:mr-1 rtl:ml-2"
|
||||
/>
|
||||
<span
|
||||
v-if="value"
|
||||
class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
:title="value"
|
||||
>
|
||||
{{ value }}
|
||||
</span>
|
||||
<span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
|
||||
$t('CONTACT_PANEL.NOT_AVAILABLE')
|
||||
}}</span>
|
||||
|
||||
@@ -14,15 +29,28 @@
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
icon="clipboard"
|
||||
class-names="copy-icon"
|
||||
class-names="copy-button"
|
||||
@click="onCopy"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div v-else class="contact-info--details">
|
||||
<emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
|
||||
<span v-if="value" class="text-truncate">{{ value }}</span>
|
||||
<span v-else class="text-muted">{{
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center mb-2 text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
<emoji-or-icon
|
||||
:icon="icon"
|
||||
:emoji="emoji"
|
||||
icon-size="14"
|
||||
class="mr-2 ml-1 rtl:mr-1 rtl:ml-2"
|
||||
/>
|
||||
<span
|
||||
v-if="value"
|
||||
class="overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ value }}
|
||||
</span>
|
||||
<span v-else class="text-slate-300 dark:text-slate-600 text-sm">{{
|
||||
$t('CONTACT_PANEL.NOT_AVAILABLE')
|
||||
}}</span>
|
||||
</div>
|
||||
@@ -69,36 +97,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.contact-info--row {
|
||||
margin-left: var(--space-minus-smaller);
|
||||
|
||||
.contact-info--icon {
|
||||
font-size: var(--font-size-default);
|
||||
min-width: var(--space-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info--details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-small);
|
||||
color: var(--color-body);
|
||||
|
||||
.copy-icon {
|
||||
margin-left: var(--space-smaller);
|
||||
}
|
||||
|
||||
&.a {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info--details .icon--emoji,
|
||||
.contact-info--details .icon--font {
|
||||
display: inline-block;
|
||||
width: var(--space-medium);
|
||||
<style scoped>
|
||||
.copy-button {
|
||||
@apply ml-1 rtl:ml-0 rtl:mr-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
+30
-51
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<form class="conversation--form" @submit.prevent="onFormSubmit">
|
||||
<form class="conversation--form w-full" @submit.prevent="onFormSubmit">
|
||||
<div v-if="showNoInboxAlert" class="callout warning">
|
||||
<p>
|
||||
{{ $t('NEW_CONVERSATION.NO_INBOX') }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="row gutter-small">
|
||||
<div class="columns">
|
||||
<div class="gap-2 flex flex-row">
|
||||
<div class="w-[50%]">
|
||||
<label>
|
||||
{{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
|
||||
</label>
|
||||
@@ -50,25 +50,29 @@
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="w-[50%]">
|
||||
<label>
|
||||
{{ $t('NEW_CONVERSATION.FORM.TO.LABEL') }}
|
||||
<div class="contact-input">
|
||||
<div
|
||||
class="flex items-center h-[2.4735rem] rounded-sm py-1 px-2 bg-slate-25 dark:bg-slate-900 border border-solid border-slate-75 dark:border-slate-600"
|
||||
>
|
||||
<thumbnail
|
||||
:src="contact.thumbnail"
|
||||
size="24px"
|
||||
:username="contact.name"
|
||||
:status="contact.availability_status"
|
||||
/>
|
||||
<h4 class="text-block-title contact-name">
|
||||
<h4
|
||||
class="m-0 ml-2 mr-2 text-slate-700 dark:text-slate-100 text-sm"
|
||||
>
|
||||
{{ contact.name }}
|
||||
</h4>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isAnEmailInbox" class="row">
|
||||
<div class="columns">
|
||||
<div v-if="isAnEmailInbox" class="w-full">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.subject.$error }">
|
||||
{{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
|
||||
<input
|
||||
@@ -83,9 +87,9 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="columns">
|
||||
<div class="canned-response">
|
||||
<div class="w-full">
|
||||
<div class="w-full">
|
||||
<div class="relative">
|
||||
<canned-response
|
||||
v-if="showCannedResponseMenu && hasSlashCommand"
|
||||
:search-key="cannedResponseSearchKey"
|
||||
@@ -126,7 +130,7 @@
|
||||
{{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
|
||||
<textarea
|
||||
v-model="message"
|
||||
class="message-input"
|
||||
class="min-h-[5rem]"
|
||||
type="text"
|
||||
:placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
|
||||
@input="$v.message.$touch"
|
||||
@@ -138,7 +142,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!hasWhatsappTemplates" class="modal-footer">
|
||||
<div
|
||||
v-if="!hasWhatsappTemplates"
|
||||
class="flex flex-row justify-end gap-2 py-2 px-0 w-full"
|
||||
>
|
||||
<button class="button clear" @click.prevent="onCancel">
|
||||
{{ $t('NEW_CONVERSATION.FORM.CANCEL') }}
|
||||
</button>
|
||||
@@ -367,58 +374,30 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.conversation--form {
|
||||
padding: var(--space-normal) var(--space-large) var(--space-large);
|
||||
@apply pt-4 px-8 pb-8;
|
||||
}
|
||||
|
||||
.canned-response {
|
||||
position: relative;
|
||||
}
|
||||
.message-editor {
|
||||
@apply px-3;
|
||||
|
||||
.input-group-label {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.contact-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.4735rem;
|
||||
background: var(--color-background-light);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--space-smaller) var(--space-small);
|
||||
border-radius: var(--border-radius-small);
|
||||
|
||||
.contact-name {
|
||||
margin: 0;
|
||||
margin-left: var(--space-small);
|
||||
margin-right: var(--space-small);
|
||||
::v-deep {
|
||||
.ProseMirror-menubar {
|
||||
@apply rounded-tl-[4px];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-input {
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.row.gutter-small {
|
||||
gap: var(--space-small);
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.mention--box {
|
||||
left: 0;
|
||||
margin: auto;
|
||||
right: 0;
|
||||
top: unset;
|
||||
height: fit-content;
|
||||
@apply left-0 m-auto right-0 top-auto h-fit;
|
||||
}
|
||||
|
||||
/* TODO: Remove when have standardized a component out of multiselect */
|
||||
.multiselect .multiselect__content .multiselect__option span {
|
||||
display: inline-flex;
|
||||
width: var(--space-medium);
|
||||
color: var(--s-600);
|
||||
@apply inline-flex w-6 text-slate-600 dark:text-slate-400;
|
||||
}
|
||||
.multiselect .multiselect__content .multiselect__option {
|
||||
padding: var(--space-micro) var(--space-smaller);
|
||||
@apply py-0.5 px-1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header
|
||||
:header-title="$t('CREATE_CONTACT.TITLE')"
|
||||
:header-content="$t('CREATE_CONTACT.DESC')"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header
|
||||
:header-title="
|
||||
`${$t('EDIT_CONTACT.TITLE')} - ${contact.name || contact.email}`
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<woot-modal :show.sync="show" :on-close="onCancel">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header
|
||||
:header-title="$t('NEW_CONVERSATION.TITLE')"
|
||||
:header-content="$t('NEW_CONVERSATION.DESC')"
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="mx-0 flex flex-wrap">
|
||||
<templates-picker
|
||||
v-if="!selectedWaTemplate"
|
||||
:inbox-id="inboxId"
|
||||
|
||||
+16
-56
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<div class="dropdown-search-wrap">
|
||||
<h4 class="text-block-title">
|
||||
<div class="flex flex-col w-full max-h-[12.5rem]">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 mb-1 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.TITLE') }}
|
||||
</h4>
|
||||
<div class="search-wrap">
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
@@ -13,8 +15,10 @@
|
||||
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.PLACEHOLDER')"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-wrap">
|
||||
<div class="list">
|
||||
<div
|
||||
class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto h-32"
|
||||
>
|
||||
<div class="w-full h-full">
|
||||
<woot-dropdown-menu>
|
||||
<custom-attribute-drop-down-item
|
||||
v-for="attribute in filteredAttributes"
|
||||
@@ -23,11 +27,14 @@
|
||||
@click="onAddAttribute(attribute)"
|
||||
/>
|
||||
</woot-dropdown-menu>
|
||||
<div v-if="noResult" class="no-result">
|
||||
<div
|
||||
v-if="noResult"
|
||||
class="w-full justify-center items-center flex mb-2 h-[70%] text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.NO_RESULT') }}
|
||||
</div>
|
||||
<woot-button
|
||||
class="add"
|
||||
class="float-right"
|
||||
icon="add"
|
||||
size="tiny"
|
||||
@click="addNewAttribute"
|
||||
@@ -101,54 +108,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-search-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 12.5rem;
|
||||
|
||||
.search-wrap {
|
||||
margin-bottom: var(--space-small);
|
||||
flex: 0 0 auto;
|
||||
max-height: var(--space-large);
|
||||
|
||||
.search-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
height: var(--space-large);
|
||||
font-size: var(--font-size-small);
|
||||
padding: var(--space-small);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid var(--w-500);
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
.add {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--s-700);
|
||||
padding: var(--space-smaller) var(--space-one);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
.search-input {
|
||||
@apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
|
||||
}
|
||||
</style>
|
||||
|
||||
+3
-3
@@ -97,13 +97,13 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.custom-attributes--panel {
|
||||
.conversation--attribute {
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
@apply border-slate-50 dark:border-slate-700 border-b border-solid;
|
||||
}
|
||||
|
||||
&.odd {
|
||||
.conversation--attribute {
|
||||
&:nth-child(2n + 1) {
|
||||
background: var(--s-25);
|
||||
@apply bg-slate-25 dark:bg-slate-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
&.even {
|
||||
.conversation--attribute {
|
||||
&:nth-child(2n) {
|
||||
background: var(--s-25);
|
||||
@apply bg-slate-25 dark:bg-slate-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
<template>
|
||||
<div class="search-wrap">
|
||||
<div class="search" :class="{ 'is-active': showSearchBox }">
|
||||
<woot-sidemenu-icon />
|
||||
<router-link :to="searchUrl" class="search--link">
|
||||
<div class="icon">
|
||||
<fluent-icon icon="search" class="search--icon" size="16" />
|
||||
<div class="relative">
|
||||
<div class="flex px-4 pb-1 pt-2.5 border-b border-transparent">
|
||||
<woot-sidemenu-icon
|
||||
size="tiny"
|
||||
class="relative top-0 left-[-6px] rtl:left-0 rtl:right-[-6px]"
|
||||
/>
|
||||
<router-link
|
||||
:to="searchUrl"
|
||||
class="search-link flex-1 items-center gap-1 text-left mr-1 rtl:mr-0 rtl:ml-1 h-6 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
|
||||
>
|
||||
<div class="flex">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="search--icon text-slate-800 dark:text-slate-200"
|
||||
size="16"
|
||||
/>
|
||||
</div>
|
||||
<p class="search--label text-ellipsis">
|
||||
<p
|
||||
class="search--label mb-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-200"
|
||||
>
|
||||
{{ $t('CONVERSATION.SEARCH_MESSAGES') }}
|
||||
</p>
|
||||
</router-link>
|
||||
@@ -44,13 +56,6 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
searchTerm: '',
|
||||
showSearchBox: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({
|
||||
accountId: 'getCurrentAccountId',
|
||||
@@ -61,119 +66,13 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: var(--space-one) var(--space-normal) var(--space-smaller)
|
||||
var(--space-normal);
|
||||
|
||||
.search-link {
|
||||
&:hover {
|
||||
.search--icon,
|
||||
.search--label {
|
||||
color: var(--w-500);
|
||||
@apply hover:text-woot-500 dark:hover:text-woot-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search--link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
background: var(--s-25);
|
||||
padding: var(--space-smaller);
|
||||
height: var(--space-medium);
|
||||
border-radius: var(--border-radius-normal);
|
||||
margin-right: var(--space-smaller);
|
||||
}
|
||||
|
||||
.search--label {
|
||||
color: var(--color-body);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search--input {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
color: var(--color-body);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-normal);
|
||||
text-align: left;
|
||||
line-height: var(--font-size-large);
|
||||
}
|
||||
|
||||
.search--icon {
|
||||
color: var(--s-600);
|
||||
margin: 0 var(--space-smaller);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--color-body);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.results-wrap {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
box-shadow: var(--shadow-large);
|
||||
background: white;
|
||||
width: 100%;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.show-results {
|
||||
list-style-type: none;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.result-view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result {
|
||||
padding: var(--space-smaller) var(--space-smaller) var(--space-smaller)
|
||||
var(--space-normal);
|
||||
color: var(--s-700);
|
||||
font-size: var(--font-size-medium);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
.message-counter {
|
||||
color: var(--s-500);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
.search--activity-message {
|
||||
padding: var(--space-small) var(--space-normal) var(--space-small)
|
||||
var(--space-zero);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--s-500);
|
||||
}
|
||||
|
||||
.search--activity-no-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-one) var(--space-zero) var(--space-two) var(--space-zero);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--s-500);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<woot-modal :show.sync="show" :on-close="onClose">
|
||||
<woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
|
||||
<form class="row" @submit.prevent="saveCustomViews">
|
||||
<div class="medium-12 columns">
|
||||
<form class="w-full" @submit.prevent="saveCustomViews">
|
||||
<div class="w-full">
|
||||
<woot-input
|
||||
v-model="name"
|
||||
:label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
|
||||
@@ -15,7 +15,7 @@
|
||||
@blur="$v.name.$touch"
|
||||
/>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button :disabled="isButtonDisabled">
|
||||
{{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
|
||||
</woot-button>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
:header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
|
||||
:header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="onCreate">
|
||||
<div class="medium-12 columns">
|
||||
<form class="w-full" @submit.prevent="onCreate">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.selectedLocale.$error }">
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
|
||||
<select v-model="selectedLocale">
|
||||
@@ -22,8 +22,8 @@
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="modal-footer justify-content-end w-full">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
|
||||
</woot-button>
|
||||
|
||||
@@ -78,42 +78,21 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-article--container {
|
||||
margin: var(--space-large) auto;
|
||||
padding: 0 var(--space-medium);
|
||||
max-width: 56rem;
|
||||
width: 100%;
|
||||
@apply my-8 mx-auto py-0 px-6 max-w-[56rem] w-full;
|
||||
}
|
||||
|
||||
.article-heading {
|
||||
font-size: var(--font-size-giga);
|
||||
font-weight: var(--font-weight-bold);
|
||||
width: 100%;
|
||||
min-height: var(--space-jumbo);
|
||||
max-height: 40rem;
|
||||
height: auto;
|
||||
margin-bottom: var(--space-small);
|
||||
border: 0px solid transparent;
|
||||
padding: 0;
|
||||
color: var(--s-900);
|
||||
padding: var(--space-normal);
|
||||
resize: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--s-25);
|
||||
border-radius: var(--border-radius-normal);
|
||||
}
|
||||
@apply text-[2.5rem] font-semibold w-full text-slate-900 dark:text-slate-75 p-4 hover:bg-slate-25 dark:hover:bg-slate-800 hover:rounded-md resize-none min-h-[4rem] max-h-[40rem] h-auto mb-2 border-0 border-solid border-transparent dark:border-transparent;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
padding: 0 var(--space-normal);
|
||||
height: fit-content;
|
||||
@apply py-0 px-4 h-fit;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ProseMirror-menubar-wrapper {
|
||||
.ProseMirror-woot-style {
|
||||
min-height: var(--space-giga);
|
||||
max-height: 100%;
|
||||
@apply min-h-[15rem] max-h-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,10 @@
|
||||
<emoji-or-icon class="icon-grab" icon="grab-handle" />
|
||||
<div class="article-block">
|
||||
<router-link :to="articleUrl(id)">
|
||||
<h6 :title="title" class="sub-block-title text-truncate">
|
||||
<h6
|
||||
:title="title"
|
||||
class="text-base text-slate-800 dark:text-slate-100 mb-0 leading-6 h-6 hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ title }}
|
||||
</h6>
|
||||
</router-link>
|
||||
@@ -21,7 +24,7 @@
|
||||
>
|
||||
<span
|
||||
:title="category.name"
|
||||
class="category-link-content text-ellipsis"
|
||||
class="category-link-content overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ category.name }}
|
||||
</span>
|
||||
@@ -133,109 +136,71 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-container--row {
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--s-50);
|
||||
display: grid;
|
||||
gap: var(--space-normal);
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
margin: 0 var(--space-minus-normal);
|
||||
padding: 0 var(--space-normal);
|
||||
@apply bg-white dark:bg-slate-900 my-0 -mx-4 py-0 px-4 grid grid-cols-8 gap-4 border-b border-slate-50 dark:border-slate-800;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
@apply grid-cols-7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
@apply grid-cols-6;
|
||||
}
|
||||
|
||||
&.draggable {
|
||||
span.article-column.article-title {
|
||||
margin-left: var(--space-minus-small);
|
||||
@apply -ml-2;
|
||||
|
||||
.icon-grab {
|
||||
display: block;
|
||||
cursor: move;
|
||||
height: var(--space-normal);
|
||||
margin-top: var(--space-smaller);
|
||||
width: var(--space-normal);
|
||||
|
||||
color: var(--s-100);
|
||||
@apply block cursor-move h-4 mt-1 w-4 text-slate-100 dark:text-slate-700;
|
||||
|
||||
&:hover {
|
||||
color: var(--s-300);
|
||||
@apply text-slate-300 dark:text-slate-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.article-column {
|
||||
color: var(--s-700);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding: var(--space-small) 0;
|
||||
text-align: right;
|
||||
text-transform: capitalize;
|
||||
@apply text-slate-700 dark:text-slate-100 text-sm font-semibold py-2 px-0 text-right capitalize;
|
||||
|
||||
&.article-title {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
gap: var(--space-small);
|
||||
grid-column: span 4 / span 4;
|
||||
text-align: left;
|
||||
text-align: left;
|
||||
@apply items-start flex gap-2 col-span-4 text-left;
|
||||
|
||||
.icon-grab {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// for screen sizes smaller than 1024px
|
||||
@media (max-width: 63.9375em) {
|
||||
&.article-read-count {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 47.9375em) {
|
||||
&.article-read-count,
|
||||
&.article-last-edited {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-block {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sub-block-title {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--space-medium);
|
||||
height: var(--space-medium);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@apply min-w-0;
|
||||
}
|
||||
|
||||
.author {
|
||||
.by {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--s-500);
|
||||
font-size: var(--font-size-small);
|
||||
@apply font-normal text-slate-500 dark:text-slate-200 text-sm;
|
||||
}
|
||||
.name {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--s-600);
|
||||
font-size: var(--font-size-small);
|
||||
@apply font-normal text-slate-500 dark:text-slate-200 text-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--s-700);
|
||||
font-size: var(--font-size-mini);
|
||||
padding-left: 0;
|
||||
@apply font-normal text-slate-700 dark:text-slate-100 text-sm pl-0;
|
||||
}
|
||||
</style>
|
||||
|
||||
+3
-1
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="article-item">
|
||||
<h4 class="text-block-title margin-bottom-0">{{ title }}</h4>
|
||||
<p class="margin-bottom-0 text-truncate">{{ body }}</p>
|
||||
<p class="margin-bottom-0 overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{{ body }}
|
||||
</p>
|
||||
<div class="footer">
|
||||
<p class="text-small meta">
|
||||
{{ locale }}
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
:current-page="currentPage"
|
||||
:total-count="totalCount"
|
||||
:page-size="pageSize"
|
||||
class="dark:bg-slate-900 border-t-0 pl-0 pr-0"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
@@ -140,66 +141,53 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.article-container {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
|
||||
.article-container--header {
|
||||
margin: 0 var(--space-minus-normal);
|
||||
padding: 0 var(--space-normal);
|
||||
display: grid;
|
||||
gap: var(--space-normal);
|
||||
border-bottom: 1px solid var(--s-100);
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
@apply my-0 -mx-4 py-0 px-4 grid grid-cols-8 gap-4 border-b border-slate-100 dark:border-slate-700;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
@apply grid-cols-7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
@apply grid-cols-6;
|
||||
}
|
||||
|
||||
&.draggable {
|
||||
div.heading-item.heading-title {
|
||||
padding: var(--space-small) var(--space-snug);
|
||||
@apply py-2 px-3.5;
|
||||
}
|
||||
}
|
||||
|
||||
div.heading-item {
|
||||
font-weight: var(--font-weight-bold);
|
||||
text-transform: capitalize;
|
||||
color: var(--s-700);
|
||||
font-size: var(--font-size-small);
|
||||
text-align: right;
|
||||
padding: var(--space-small) 0;
|
||||
@apply font-semibold capitalize text-sm text-right py-2 px-0 text-slate-700 dark:text-slate-100;
|
||||
|
||||
&.heading-title {
|
||||
text-align: left;
|
||||
grid-column: span 4 / span 4;
|
||||
@apply text-left col-span-4;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
&.heading-read-count {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
&.heading-read-count,
|
||||
&.heading-last-edited {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@apply p-0 border-0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-ghost-class {
|
||||
opacity: 0.5;
|
||||
background-color: var(--s-50);
|
||||
@apply opacity-50 bg-slate-50 dark:bg-slate-800;
|
||||
}
|
||||
</style>
|
||||
|
||||
+15
-51
@@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<div class="header--wrap">
|
||||
<div class="header-left--wrap">
|
||||
<div class="flex items-center justify-between w-full h-16 pt-2">
|
||||
<div class="flex items-center">
|
||||
<woot-sidemenu-icon />
|
||||
<div class="header-title">
|
||||
<h3 class="page-title">{{ headerTitle }}</h3>
|
||||
<span class="text-block-title count-view">{{ `(${count})` }}</span>
|
||||
<div class="flex items-center my-0 mx-2">
|
||||
<h3 class="text-2xl text-slate-800 dark:text-slate-100 mb-0">
|
||||
{{ headerTitle }}
|
||||
</h3>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-300 my-0 mx-2">{{
|
||||
`(${count})`
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right--wrap">
|
||||
<div class="flex items-center gap-1">
|
||||
<woot-button
|
||||
v-if="shouldShowSettings"
|
||||
class-names="article--buttons"
|
||||
icon="filter"
|
||||
color-scheme="secondary"
|
||||
variant="hollow"
|
||||
@@ -21,7 +24,6 @@
|
||||
</woot-button>
|
||||
<woot-button
|
||||
v-if="shouldShowSettings"
|
||||
class-names="article--buttons"
|
||||
icon="arrow-sort"
|
||||
color-scheme="secondary"
|
||||
size="small"
|
||||
@@ -29,7 +31,9 @@
|
||||
@click="openDropdown"
|
||||
>
|
||||
{{ $t('HELP_CENTER.HEADER.SORT') }}
|
||||
<span class="selected-value">
|
||||
<span
|
||||
class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{{ selectedValue }}
|
||||
<Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
|
||||
</span>
|
||||
@@ -76,13 +80,11 @@
|
||||
v-if="shouldShowSettings"
|
||||
v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
|
||||
icon="settings"
|
||||
class-names="article--buttons"
|
||||
variant="hollow"
|
||||
size="small"
|
||||
color-scheme="secondary"
|
||||
/>
|
||||
<woot-button
|
||||
class-names="article--buttons"
|
||||
size="small"
|
||||
icon="add"
|
||||
color-scheme="primary"
|
||||
@@ -150,48 +152,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header--wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: var(--space-jumbo);
|
||||
padding-top: var(--space-small);
|
||||
}
|
||||
.header-left--wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 var(--space-small);
|
||||
.page-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-right--wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.count-view {
|
||||
margin: 0 var(--space-smaller);
|
||||
}
|
||||
.dropdown-pane--open {
|
||||
top: var(--space-larger);
|
||||
right: 9.25rem;
|
||||
}
|
||||
.selected-value {
|
||||
display: inline-flex;
|
||||
margin-left: var(--space-smaller);
|
||||
color: var(--b-900);
|
||||
align-items: center;
|
||||
@apply top-12 right-[9.25rem];
|
||||
}
|
||||
.dropdown-arrow {
|
||||
margin-left: var(--space-smaller);
|
||||
}
|
||||
.article--buttons {
|
||||
margin-left: var(--space-smaller);
|
||||
@apply ml-1 rtl:ml-0 rtl:mr-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
+13
-34
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="header--wrap">
|
||||
<div class="header-left--wrap">
|
||||
<div class="flex items-center justify-between w-full h-16 pt-2">
|
||||
<div class="flex items-center">
|
||||
<woot-button
|
||||
icon="chevron-left"
|
||||
variant="clear"
|
||||
@@ -12,13 +12,16 @@
|
||||
{{ backButtonLabel }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div class="header-right--wrap">
|
||||
<span v-if="isUpdating || isSaved" class="draft-status">
|
||||
<div class="flex items-center gap-1">
|
||||
<span
|
||||
v-if="isUpdating || isSaved"
|
||||
class="draft-status mr-1 ml-4 rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300 items-center text-xs"
|
||||
>
|
||||
{{ statusText }}
|
||||
</span>
|
||||
|
||||
<woot-button
|
||||
class-names="article--buttons"
|
||||
class-names="article--buttons relative"
|
||||
icon="globe"
|
||||
color-scheme="secondary"
|
||||
variant="hollow"
|
||||
@@ -30,7 +33,7 @@
|
||||
<!-- Hidden since this is in V2
|
||||
<woot-button
|
||||
v-if="shouldShowAddLocaleButton"
|
||||
class-names="article--buttons"
|
||||
class-names="article--buttons relative"
|
||||
icon="add"
|
||||
color-scheme="secondary"
|
||||
variant="hollow"
|
||||
@@ -43,7 +46,7 @@
|
||||
v-if="!isSidebarOpen"
|
||||
v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
|
||||
icon="pane-open"
|
||||
class-names="article--buttons sidebar-button"
|
||||
class-names="article--buttons relative sidebar-button"
|
||||
variant="hollow"
|
||||
size="small"
|
||||
color-scheme="secondary"
|
||||
@@ -54,13 +57,13 @@
|
||||
v-if="isSidebarOpen"
|
||||
v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
|
||||
icon="pane-close"
|
||||
class-names="article--buttons"
|
||||
class-names="article--buttons relative"
|
||||
variant="hollow"
|
||||
size="small"
|
||||
color-scheme="secondary"
|
||||
@click="closeSidebar"
|
||||
/>
|
||||
<div class="article--buttons">
|
||||
<div class="article--buttons relative">
|
||||
<div class="button-group">
|
||||
<woot-button
|
||||
class-names="publish-button"
|
||||
@@ -231,36 +234,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header--wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: var(--space-jumbo);
|
||||
padding-top: var(--space-small);
|
||||
}
|
||||
.header-left--wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-right--wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.article--buttons {
|
||||
position: relative;
|
||||
margin-left: var(--space-smaller);
|
||||
.dropdown-pane {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@apply absolute right-0;
|
||||
}
|
||||
}
|
||||
.draft-status {
|
||||
margin-right: var(--space-smaller);
|
||||
margin-left: var(--space-normal);
|
||||
color: var(--s-400);
|
||||
align-items: center;
|
||||
font-size: var(--font-size-mini);
|
||||
animation: fadeIn 1s;
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@
|
||||
@open-popover="openPortalPopover"
|
||||
@open-modal="onClickOpenAddCategoryModal"
|
||||
/>
|
||||
<section class="app-content columns">
|
||||
<section class="app-content flex-1 px-0 bg-white dark:bg-slate-900">
|
||||
<router-view />
|
||||
<command-bar />
|
||||
<account-selector
|
||||
|
||||
+37
-124
@@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="portal">
|
||||
<div
|
||||
class="bg-white dark:bg-slate-900 rounded-md relative flex mb-3 p-4 border border-solid border-slate-100 dark:border-slate-600"
|
||||
>
|
||||
<thumbnail :username="portal.name" variant="square" />
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="ml-2 rtl:ml-0 rtl:mr-2 flex-grow">
|
||||
<header class="flex items-start justify-between mb-8">
|
||||
<div>
|
||||
<div class="title-status--wrap">
|
||||
<h2 class="portal-title block-title">
|
||||
<div class="flex items-center">
|
||||
<h2 class="mb-0 text-lg text-slate-800 dark:text-slate-100">
|
||||
{{ portal.name }}
|
||||
</h2>
|
||||
<woot-label
|
||||
@@ -14,10 +16,10 @@
|
||||
:color-scheme="labelColor"
|
||||
size="small"
|
||||
variant="smooth"
|
||||
class="status"
|
||||
class="my-0 mx-2"
|
||||
/>
|
||||
</div>
|
||||
<p class="portal-count">
|
||||
<p class="text-sm mb-0 text-slate-700 dark:text-slate-200">
|
||||
{{ articleCount }}
|
||||
{{
|
||||
$t(
|
||||
@@ -26,12 +28,11 @@
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-row gap-1">
|
||||
<woot-button
|
||||
variant="smooth"
|
||||
size="small"
|
||||
color-scheme="primary"
|
||||
class="header-action-buttons"
|
||||
@click="addLocale"
|
||||
>
|
||||
{{
|
||||
@@ -42,7 +43,6 @@
|
||||
variant="hollow"
|
||||
size="small"
|
||||
color-scheme="secondary"
|
||||
class="header-action-buttons"
|
||||
@click="openSite"
|
||||
>
|
||||
{{
|
||||
@@ -58,7 +58,6 @@
|
||||
variant="hollow"
|
||||
size="small"
|
||||
icon="settings"
|
||||
class="header-action-buttons"
|
||||
color-scheme="secondary"
|
||||
@click="openSettings"
|
||||
/>
|
||||
@@ -70,93 +69,98 @@
|
||||
color-scheme="alert"
|
||||
size="small"
|
||||
icon="delete"
|
||||
class="header-action-buttons"
|
||||
@click="onClickOpenDeleteModal(portal)"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<div class="portal-locales">
|
||||
<h2 class="locale-title sub-block-title">
|
||||
<div class="mb-12">
|
||||
<h2
|
||||
class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
|
||||
)
|
||||
}}
|
||||
</h2>
|
||||
<div class="configuration-items--wrap">
|
||||
<div class="configuration-items">
|
||||
<div class="configuration-item">
|
||||
<div
|
||||
class="flex justify-between mr-[6.25rem] rtl:mr-0 rtl:ml-[6.25rem] max-w-[80vw]"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-start flex-col mb-4">
|
||||
<label>{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ portal.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="configuration-item">
|
||||
<div class="flex items-start flex-col mb-4">
|
||||
<label>{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ portal.custom_domain }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="configuration-items">
|
||||
<div class="configuration-item">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-start flex-col mb-4">
|
||||
<label>{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ portal.slug }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="configuration-item">
|
||||
<div class="flex items-start flex-col mb-4">
|
||||
<label>{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ portal.page_title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="configuration-items">
|
||||
<div class="configuration-item">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-start flex-col mb-4">
|
||||
<label>{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
|
||||
)
|
||||
}}</label>
|
||||
<div class="content-theme-wrap">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="theme-color"
|
||||
class="w-4 h-4 rounded-md mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-25 dark:border-slate-800"
|
||||
:style="{ background: portal.color }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="configuration-item">
|
||||
<div class="flex items-start flex-col mb-4">
|
||||
<label>{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ portal.header_text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portal-locales">
|
||||
<h2 class="locale-title sub-block-title">
|
||||
<div class="mb-12">
|
||||
<h2
|
||||
class="text-slate-800 dark:text-slate-100 font-medium mb-2 text-base"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
|
||||
@@ -365,94 +369,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.portal {
|
||||
background-color: var(--white);
|
||||
padding: var(--space-normal);
|
||||
border: 1px solid var(--color-border-dark);
|
||||
border-radius: var(--border-radius-medium);
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: var(--space-slab);
|
||||
|
||||
.container {
|
||||
margin-left: var(--space-small);
|
||||
flex-grow: 1;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-large);
|
||||
.title-status--wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.status {
|
||||
margin: 0 var(--space-small);
|
||||
}
|
||||
}
|
||||
.portal-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.portal-count {
|
||||
font-size: var(--font-size-small);
|
||||
margin-bottom: 0;
|
||||
color: var(--s-700);
|
||||
}
|
||||
.header-action-buttons {
|
||||
margin-left: var(--space-smaller);
|
||||
}
|
||||
}
|
||||
.portal-locales {
|
||||
margin-bottom: var(--space-large);
|
||||
.locale-title {
|
||||
color: var(--s-800);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: var(--space-small);
|
||||
}
|
||||
}
|
||||
|
||||
.portal--heading {
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
}
|
||||
.portal-settings--icon {
|
||||
padding: var(--space-smaller);
|
||||
margin-left: var(--space-small);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--s-50);
|
||||
border-radius: var(--border-radius-normal);
|
||||
}
|
||||
}
|
||||
.configuration-items--wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: var(--space-mega);
|
||||
max-width: 80vw;
|
||||
.configuration-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.configuration-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
margin-bottom: var(--space-normal);
|
||||
.content-theme-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.theme-color {
|
||||
width: var(--space-normal);
|
||||
height: var(--space-normal);
|
||||
border-radius: var(--border-radius-normal);
|
||||
margin-right: var(--space-smaller);
|
||||
border: 1px solid var(--color-border-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+8
-11
@@ -124,26 +124,23 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
table {
|
||||
thead tr th {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
color: var(--s-600);
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
@apply text-sm font-medium normal-case text-slate-600 dark:text-slate-200 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 0;
|
||||
@apply border-b-0;
|
||||
td {
|
||||
font-size: var(--font-size-small);
|
||||
padding-left: 0;
|
||||
@apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0;
|
||||
.default-status {
|
||||
margin: 0 0 0 var(--space-smaller);
|
||||
@apply py-0 pr-0 pl-1;
|
||||
}
|
||||
span {
|
||||
@apply text-slate-700 dark:text-slate-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.horizontal-line {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
@apply border-b border-solid border-slate-75 dark:border-slate-700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div v-on-clickaway="closePortalPopover" class="portal-popover__container">
|
||||
<div
|
||||
v-on-clickaway="closePortalPopover"
|
||||
class="absolute overflow-y-scroll max-h-[96vh] p-4 bg-white dark:bg-slate-800 rounded-md shadow-lg max-w-[30rem] z-[1000]"
|
||||
>
|
||||
<header>
|
||||
<div class="actions">
|
||||
<h2 class="block-title text-black-900 dark:text-slate-200">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg text-slate-800 dark:text-slate-100">
|
||||
{{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
|
||||
</h2>
|
||||
<div>
|
||||
@@ -24,7 +27,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
<p class="text-xs text-slate-600 dark:text-slate-300 mt-2">
|
||||
{{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
|
||||
</p>
|
||||
</header>
|
||||
@@ -82,46 +85,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.portal-popover__container {
|
||||
position: absolute;
|
||||
overflow-y: scroll;
|
||||
max-height: 96vh;
|
||||
padding: var(--space-normal);
|
||||
background-color: var(--white);
|
||||
border-radius: var(--border-radius-normal);
|
||||
box-shadow: var(--shadow-large);
|
||||
max-width: 30rem;
|
||||
z-index: var(--z-index-high);
|
||||
|
||||
header {
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-normal);
|
||||
|
||||
.new-popover-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-smaller) var(--space-small);
|
||||
background-color: var(--s-25);
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--s-500);
|
||||
margin-left: var(--space-small);
|
||||
border-radius: var(--border-radius-normal);
|
||||
span {
|
||||
margin-left: var(--space-small);
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--s-600);
|
||||
margin-top: var(--space-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+18
-39
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="wizard-body columns content-box small-9">
|
||||
<div class="medium-12 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<div class="w-full">
|
||||
<h3 class="block-title text-black-900 dark:text-slate-200">
|
||||
{{
|
||||
$t(
|
||||
@@ -9,17 +9,19 @@
|
||||
}}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="portal-form">
|
||||
<div class="medium-8 columns">
|
||||
<div class="form-item">
|
||||
<div
|
||||
class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
|
||||
>
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<div class="mb-4">
|
||||
<label>
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL') }}
|
||||
</label>
|
||||
<div class="logo-container">
|
||||
<div class="flex items-center flex-row">
|
||||
<thumbnail :username="name" size="56px" variant="square" />
|
||||
<woot-button
|
||||
v-if="false"
|
||||
class="upload-button"
|
||||
class="ml-3"
|
||||
variant="smooth"
|
||||
color-scheme="secondary"
|
||||
icon="upload"
|
||||
@@ -28,11 +30,13 @@
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD.LOGO.UPLOAD_BUTTON') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<p class="logo-help--text">
|
||||
<p
|
||||
class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
|
||||
>
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="mb-4">
|
||||
<woot-input
|
||||
v-model.trim="name"
|
||||
:class="{ error: $v.name.$error }"
|
||||
@@ -44,7 +48,7 @@
|
||||
@input="onNameChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="mb-4">
|
||||
<woot-input
|
||||
v-model.trim="slug"
|
||||
:class="{ error: $v.slug.$error }"
|
||||
@@ -55,7 +59,7 @@
|
||||
@blur="$v.slug.$touch"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="mb-4">
|
||||
<woot-input
|
||||
v-model.trim="domain"
|
||||
:class="{ error: $v.domain.$error }"
|
||||
@@ -185,40 +189,15 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wizard-body {
|
||||
padding-top: var(--space-slab);
|
||||
border: 1px solid transparent;
|
||||
@apply pt-3 border border-solid border-transparent dark:border-transparent;
|
||||
}
|
||||
|
||||
.portal-form {
|
||||
margin: var(--space-normal) 0;
|
||||
border-bottom: 1px solid var(--s-25);
|
||||
|
||||
.form-item {
|
||||
margin-bottom: var(--space-normal);
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
.upload-button {
|
||||
margin-left: var(--space-slab);
|
||||
}
|
||||
}
|
||||
.logo-help--text {
|
||||
margin-top: var(--space-smaller);
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--s-600);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
input {
|
||||
margin-bottom: var(--space-smaller);
|
||||
@apply mb-1;
|
||||
}
|
||||
.help-text {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+17
-28
@@ -1,24 +1,28 @@
|
||||
<template>
|
||||
<div class="wizard-body height-auto small-9 columns">
|
||||
<div class="medium-12 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
|
||||
<div class="w-full">
|
||||
<h3 class="block-title text-black-900 dark:text-slate-200">
|
||||
{{
|
||||
$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
|
||||
}}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="portal-form">
|
||||
<div class="medium-8 columns">
|
||||
<div class="form-item">
|
||||
<div
|
||||
class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
|
||||
>
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<div class="mb-4">
|
||||
<label>
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
|
||||
</label>
|
||||
<woot-color-picker v-model="color" />
|
||||
<p class="color-help--text">
|
||||
<p
|
||||
class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
|
||||
>
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="mb-4">
|
||||
<woot-input
|
||||
v-model.trim="pageTitle"
|
||||
:label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
|
||||
@@ -26,7 +30,7 @@
|
||||
:help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="mb-4">
|
||||
<woot-input
|
||||
v-model.trim="headerText"
|
||||
:label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
|
||||
@@ -34,7 +38,7 @@
|
||||
:help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="mb-4">
|
||||
<woot-input
|
||||
v-model.trim="homePageLink"
|
||||
:label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
|
||||
@@ -147,33 +151,18 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wizard-body {
|
||||
padding-top: var(--space-slab);
|
||||
border: 1px solid transparent;
|
||||
@apply pt-3 border border-solid border-transparent dark:border-transparent;
|
||||
}
|
||||
.portal-form {
|
||||
margin: var(--space-normal) 0;
|
||||
border-bottom: 1px solid var(--s-25);
|
||||
|
||||
.form-item {
|
||||
margin-bottom: var(--space-normal);
|
||||
.color-help--text {
|
||||
margin-top: var(--space-smaller);
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--s-600);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
input {
|
||||
margin-bottom: var(--space-smaller);
|
||||
@apply mb-1;
|
||||
}
|
||||
.help-text {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
.colorpicker--selected {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
<div class="portal" :class="{ active }">
|
||||
<thumbnail :username="portal.name" variant="square" />
|
||||
<div class="actions-container">
|
||||
<header>
|
||||
<header class="flex items-center justify-between mb-2.5">
|
||||
<div>
|
||||
<h3 class="sub-block-title portal-title">{{ portal.name }}</h3>
|
||||
<p class="portal-count">
|
||||
<h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
|
||||
{{ portal.name }}
|
||||
</h3>
|
||||
<p class="text-slate-600 dark:text-slate-200 mb-0 text-xs">
|
||||
{{ articlesCount }}
|
||||
{{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
|
||||
</p>
|
||||
@@ -19,7 +21,7 @@
|
||||
/>
|
||||
</header>
|
||||
<div class="portal-locales">
|
||||
<h5 class="locale-title sub-block-title">
|
||||
<h5 class="text-base text-slate-700 dark:text-slate-100">
|
||||
{{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
|
||||
</h5>
|
||||
<ul>
|
||||
@@ -36,21 +38,23 @@
|
||||
color-scheme="secondary"
|
||||
@click="event => onClick(event, locale.code, portal)"
|
||||
>
|
||||
<div class="locale-content">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="meta">
|
||||
<h6 class="text-block-title text-left locale-name">
|
||||
<span>
|
||||
<h6 class="text-sm text-left mb-0.5">
|
||||
<span class="text-slate-700 dark:text-slate-100">
|
||||
{{ localeName(locale.code) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="isLocaleDefault(locale.code)"
|
||||
class="fs-small text-muted"
|
||||
class="fs-small text-slate-300 dark:text-slate-200"
|
||||
>
|
||||
{{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
|
||||
</span>
|
||||
</h6>
|
||||
|
||||
<span class="locale-meta">
|
||||
<span
|
||||
class="flex text-slate-600 dark:text-slate-200 text-sm text-left leading-4 w-full"
|
||||
>
|
||||
{{ locale.articles_count }}
|
||||
{{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
|
||||
{{ locale.code }}
|
||||
@@ -141,97 +145,31 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.portal {
|
||||
background-color: var(--white);
|
||||
padding: var(--space-normal);
|
||||
border: 1px solid var(--color-border-dark);
|
||||
border-radius: var(--border-radius-medium);
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: var(--space-normal);
|
||||
@apply bg-white dark:bg-slate-800 rounded-md p-4 relative flex mb-4 border border-solid border-slate-100 dark:border-slate-600;
|
||||
|
||||
&.active {
|
||||
border: 1px solid var(--w-400);
|
||||
background: var(---25);
|
||||
@apply bg-white dark:bg-slate-800 border border-solid border-woot-400 dark:border-woot-500;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
margin-left: var(--space-one);
|
||||
flex-grow: 1;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-one);
|
||||
|
||||
.badge {
|
||||
font-size: var(--font-size-mini);
|
||||
background-color: var(--w-100);
|
||||
color: var(--w-600);
|
||||
padding: var(--space-smaller) var(--space-small);
|
||||
}
|
||||
|
||||
.portal-title {
|
||||
margin-bottom: var(--space-micro);
|
||||
}
|
||||
|
||||
.portal-count {
|
||||
font-size: var(--font-size-mini);
|
||||
margin-bottom: 0;
|
||||
color: var(--s-600);
|
||||
}
|
||||
}
|
||||
@apply ml-2.5 rtl:ml-0 rtl:mr-2.5 flex-grow;
|
||||
|
||||
.portal-locales {
|
||||
.locale-name {
|
||||
margin-bottom: var(--space-micro);
|
||||
}
|
||||
|
||||
.locale-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@apply list-none p-0 m-0;
|
||||
}
|
||||
|
||||
.locale__radio {
|
||||
width: var(--space-large);
|
||||
margin-top: var(--space-tiny);
|
||||
color: var(--g-600);
|
||||
}
|
||||
|
||||
.add-locale-wrap {
|
||||
margin-top: var(--spacing-small);
|
||||
@apply w-8 text-green-600 dark:text-green-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.locale-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-smaller) var(--space-normal);
|
||||
border-radius: var(--border-radius-normal);
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-small);
|
||||
@apply flex items-start py-1 px-4 rounded-md w-full mb-2;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.locale-meta {
|
||||
display: flex;
|
||||
color: var(--s-600);
|
||||
font-size: var(--font-size-small);
|
||||
text-align: left;
|
||||
line-height: var(--space-normal);
|
||||
width: 100%;
|
||||
@apply mb-0 text-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+10
-22
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<transition name="popover-animation">
|
||||
<div class="article-settings--container">
|
||||
<h3 class="block-title text-black-900 dark:text-slate-200">
|
||||
<h3 class="text-base text-slate-800 dark:text-slate-100">
|
||||
{{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
|
||||
</h3>
|
||||
<div class="form-wrap">
|
||||
@@ -225,48 +225,36 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-settings--container {
|
||||
flex: 0.3;
|
||||
min-width: var(--space-giga);
|
||||
max-width: 22.5rem;
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid var(--color-border-light);
|
||||
margin-left: var(--space-normal);
|
||||
padding-left: var(--space-normal);
|
||||
padding-top: var(--space-small);
|
||||
padding-bottom: var(--space-small);
|
||||
@apply flex-[0.3] min-w-[15rem] max-w-[22.5rem] py-2 pl-4 rtl:pl-0 rtl:pr-4 ml-4 rtl:ml-0 rtl:mr-4 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700;
|
||||
|
||||
.form-wrap {
|
||||
margin-top: var(--space-normal);
|
||||
margin-bottom: var(--space-medium);
|
||||
@apply mt-4 mb-6;
|
||||
|
||||
textarea {
|
||||
font-size: var(--font-size-small);
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@apply flex flex-col;
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.multiselect {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
.multiselect__content-wrapper {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
.multiselect--active .multiselect__tags {
|
||||
border-radius: var(--border-radius-normal);
|
||||
padding-right: var(--space-small) !important;
|
||||
@apply rounded-md;
|
||||
}
|
||||
.multiselect__placeholder {
|
||||
color: var(--s-300);
|
||||
padding-top: var(--space-small);
|
||||
margin-bottom: 0;
|
||||
@apply text-slate-300 dark:text-slate-200 pt-2 mb-0;
|
||||
}
|
||||
.multiselect__select {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+13
-21
@@ -4,26 +4,26 @@
|
||||
:header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
|
||||
:header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="onCreate">
|
||||
<div class="medium-12 columns">
|
||||
<div class="row article-info">
|
||||
<div class="columns medium-6">
|
||||
<form class="w-full" @submit.prevent="onCreate">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row w-full mt-0 mx-0 mb-4">
|
||||
<div class="w-[50%]">
|
||||
<label>
|
||||
<span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
|
||||
<p class="value">{{ portalName }}</p>
|
||||
<p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="columns medium-6">
|
||||
<div class="w-[50%]">
|
||||
<label>
|
||||
<span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
|
||||
<p class="value">{{ locale }}</p>
|
||||
<p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<woot-input
|
||||
v-model.trim="name"
|
||||
:class="{ error: $v.name.$error }"
|
||||
class="medium-12 columns"
|
||||
class="w-full"
|
||||
:error="nameError"
|
||||
:label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
|
||||
:placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
|
||||
@@ -33,7 +33,7 @@
|
||||
<woot-input
|
||||
v-model.trim="slug"
|
||||
:class="{ error: $v.slug.$error }"
|
||||
class="medium-12 columns"
|
||||
class="w-full"
|
||||
:error="slugError"
|
||||
:label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
|
||||
:placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
|
||||
@@ -51,8 +51,8 @@
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<div class="medium-12 columns">
|
||||
<div class="modal-footer justify-content-end w-full">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
|
||||
</woot-button>
|
||||
@@ -174,19 +174,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.article-info {
|
||||
width: 100%;
|
||||
margin: 0 0 var(--space-normal);
|
||||
.value {
|
||||
color: var(--s-600);
|
||||
}
|
||||
}
|
||||
|
||||
.input-container::v-deep {
|
||||
margin: 0 0 var(--space-normal);
|
||||
@apply mt-0 mb-4 mx-0;
|
||||
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+8
-19
@@ -64,7 +64,10 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="categories.length === 0" class="empty-text">
|
||||
<p
|
||||
v-if="categories.length === 0"
|
||||
class="flex justify-center text-slate-500 dark:text-slate-300 text-base mt-8"
|
||||
>
|
||||
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -93,31 +96,17 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
table {
|
||||
thead tr th {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
color: var(--s-600);
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
@apply text-sm font-medium normal-case text-slate-800 dark:text-slate-100 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 0;
|
||||
@apply border-b-0;
|
||||
td {
|
||||
font-size: var(--font-size-small);
|
||||
padding-left: 0;
|
||||
@apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0 text-slate-700 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
.horizontal-line {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--s-500);
|
||||
font-size: var(--font-size-default);
|
||||
margin-top: var(--space-large);
|
||||
@apply border-b border-solid border-slate-75 dark:border-slate-700;
|
||||
}
|
||||
</style>
|
||||
|
||||
+11
-11
@@ -4,26 +4,26 @@
|
||||
:header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
|
||||
:header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="onUpdate">
|
||||
<div class="medium-12 columns">
|
||||
<div class="row article-info">
|
||||
<div class="columns medium-6">
|
||||
<form class="w-full" @submit.prevent="onUpdate">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row w-full mt-0 mx-0 mb-4">
|
||||
<div class="w-[50%]">
|
||||
<label>
|
||||
<span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
|
||||
<p class="value">{{ portalName }}</p>
|
||||
<p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="columns medium-6">
|
||||
<div class="w-[50%]">
|
||||
<label>
|
||||
<span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
|
||||
<p class="value">{{ locale }}</p>
|
||||
<p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<woot-input
|
||||
v-model.trim="name"
|
||||
:class="{ error: $v.name.$error }"
|
||||
class="medium-12 columns"
|
||||
class="w-full"
|
||||
:error="nameError"
|
||||
:label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
|
||||
:placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
|
||||
@@ -33,7 +33,7 @@
|
||||
<woot-input
|
||||
v-model.trim="slug"
|
||||
:class="{ error: $v.slug.$error }"
|
||||
class="medium-12 columns"
|
||||
class="w-full"
|
||||
:error="slugError"
|
||||
:label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
|
||||
:placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
|
||||
@@ -51,8 +51,8 @@
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<div class="medium-12 columns">
|
||||
<div class="modal-footer justify-content-end w-full">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
|
||||
</woot-button>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</woot-tabs>
|
||||
</setting-intro-banner>
|
||||
</div>
|
||||
<div class="row content-box">
|
||||
<div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+3
-8
@@ -145,17 +145,12 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.portal-locales {
|
||||
padding: var(--space-small) var(--space-normal);
|
||||
width: 100%;
|
||||
background: var(--white);
|
||||
height: 100%;
|
||||
padding: 0 0 0 var(--space-normal);
|
||||
@apply w-full bg-white dark:bg-slate-900 h-full py-0 pr-0 pl-4;
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@apply flex justify-end;
|
||||
}
|
||||
.locale-container {
|
||||
margin-top: var(--space-normal);
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+11
-39
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header-wrap">
|
||||
<div class="header-left-wrap">
|
||||
<div class="container py-2 px-4 w-full">
|
||||
<div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
|
||||
<div class="flex items-center">
|
||||
<woot-sidemenu-icon />
|
||||
<h1 class="page-title">{{ $t('HELP_CENTER.PORTAL.HEADER') }}</h1>
|
||||
<h1 class="my-0 mx-2 text-2xl text-slate-800 dark:text-slate-100">
|
||||
{{ $t('HELP_CENTER.PORTAL.HEADER') }}
|
||||
</h1>
|
||||
</div>
|
||||
<woot-button
|
||||
color-scheme="primary"
|
||||
@@ -14,7 +16,7 @@
|
||||
{{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div class="portal-container">
|
||||
<div class="h-[90vh] overflow-y-scroll">
|
||||
<portal-list-item
|
||||
v-for="portal in portals"
|
||||
:key="portal.id"
|
||||
@@ -23,7 +25,10 @@
|
||||
@add-locale="addLocale"
|
||||
@open-site="openPortal"
|
||||
/>
|
||||
<div v-if="isFetching" class="portals--loader">
|
||||
<div
|
||||
v-if="isFetching"
|
||||
class="items-center flex text-base justify-center p-40"
|
||||
>
|
||||
<spinner />
|
||||
<span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
|
||||
</div>
|
||||
@@ -99,36 +104,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: var(--space-small) var(--space-normal);
|
||||
width: 100%;
|
||||
.portals--loader {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-default);
|
||||
justify-content: center;
|
||||
padding: var(--space-big);
|
||||
}
|
||||
.header-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 0 var(--space-small) 0;
|
||||
height: var(--space-larger);
|
||||
|
||||
.header-left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.page-title {
|
||||
margin: 0 var(--space-small) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.portal-container {
|
||||
height: 90vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="flex-1">
|
||||
<settings-header
|
||||
button-route="new"
|
||||
:header-title="portalHeaderText"
|
||||
@@ -9,9 +9,11 @@
|
||||
"
|
||||
:show-new-button="false"
|
||||
/>
|
||||
<div class="row content-box full-height">
|
||||
<div
|
||||
class="flex flex-row overflow-auto py-4 pl-4 rtl:pl-0 rtl:pr-4 h-full bg-slate-50 dark:bg-slate-800"
|
||||
>
|
||||
<woot-wizard
|
||||
class="hide-for-small-only medium-3 columns"
|
||||
class="hide-for-small-only w-[25%]"
|
||||
:global-config="globalConfig"
|
||||
:items="items"
|
||||
/>
|
||||
@@ -62,18 +64,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.wizard-box {
|
||||
border-right: 1px solid var(--s-25);
|
||||
::v-deep .item {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+3
-4
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="wizard-body height-auto small-9 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
|
||||
<empty-state
|
||||
:title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
|
||||
:message="
|
||||
$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
|
||||
"
|
||||
>
|
||||
<div class="medium-12 columns text-center">
|
||||
<div class="w-full text-center">
|
||||
<router-link
|
||||
class="button success nice"
|
||||
:to="{
|
||||
@@ -37,7 +37,6 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wizard-body {
|
||||
padding-top: var(--space-slab);
|
||||
border: 1px solid transparent;
|
||||
@apply pb-3;
|
||||
}
|
||||
</style>
|
||||
|
||||
+18
-65
@@ -2,24 +2,28 @@
|
||||
<div class="modal-mask">
|
||||
<div
|
||||
v-on-clickaway="closeNotificationPanel"
|
||||
class="notification-wrap flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
|
||||
class="flex-col h-[90vh] w-[32.5rem] flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
|
||||
>
|
||||
<div class="header-wrap w-full flex justify-between">
|
||||
<div class="header-title--wrap flex">
|
||||
<span class="header-title">
|
||||
<div
|
||||
class="flex-row items-center border-b border-solid pt-5 pb-3 px-6 border-slate-50 dark:border-slate-700 w-full flex justify-between"
|
||||
>
|
||||
<div class="items-center flex">
|
||||
<span class="text-xl font-bold text-slate-800 dark:text-slate-100">
|
||||
{{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
|
||||
</span>
|
||||
<span v-if="totalUnreadNotifications" class="total-count block-title">
|
||||
<span
|
||||
v-if="totalUnreadNotifications"
|
||||
class="py-1 px-2 font-semibold text-slate-700 dark:text-slate-200 rounded-md text-xxs ml-2 mr-2 bg-slate-50 dark:bg-slate-700"
|
||||
>
|
||||
{{ totalUnreadNotifications }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex gap-2">
|
||||
<woot-button
|
||||
v-if="!noUnreadNotificationAvailable"
|
||||
color-scheme="primary"
|
||||
variant="smooth"
|
||||
size="tiny"
|
||||
class-names="action-button"
|
||||
:is-loading="uiFlags.isUpdating"
|
||||
@click="onMarkAllDoneClick"
|
||||
>
|
||||
@@ -29,7 +33,6 @@
|
||||
color-scheme="secondary"
|
||||
variant="smooth"
|
||||
size="tiny"
|
||||
class-names="action-button"
|
||||
icon="settings"
|
||||
@click="openAudioNotificationSettings"
|
||||
/>
|
||||
@@ -48,13 +51,15 @@
|
||||
:on-click-notification="openConversation"
|
||||
:in-last-page="inLastPage"
|
||||
/>
|
||||
<div v-if="records.length !== 0" class="footer-wrap flex justify-between">
|
||||
<div
|
||||
v-if="records.length !== 0"
|
||||
class="items-center py-1 px-5 flex justify-between"
|
||||
>
|
||||
<div class="flex">
|
||||
<woot-button
|
||||
size="medium"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
class-names="page-change--button"
|
||||
:is-disabled="inFirstPage"
|
||||
@click="onClickFirstPage"
|
||||
>
|
||||
@@ -74,7 +79,9 @@
|
||||
@click="onClickPreviousPage"
|
||||
/>
|
||||
</div>
|
||||
<span class="page-count"> {{ currentPage }} - {{ lastPage }} </span>
|
||||
<span class="text-xxs font-semibold text-slate-500 dark:text-slate-400">
|
||||
{{ currentPage }} - {{ lastPage }}
|
||||
</span>
|
||||
<div class="flex">
|
||||
<woot-button
|
||||
color-scheme="secondary"
|
||||
@@ -88,7 +95,6 @@
|
||||
size="medium"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
class-names="page-change--button"
|
||||
:disabled="inLastPage"
|
||||
@click="onClickLastPage"
|
||||
>
|
||||
@@ -235,56 +241,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.notification-wrap {
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
width: 32.5rem;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--s-50);
|
||||
padding: var(--space-two) var(--space-medium) var(--space-slab)
|
||||
var(--space-medium);
|
||||
|
||||
.header-title--wrap {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: var(--font-size-two);
|
||||
font-weight: var(--font-weight-black);
|
||||
}
|
||||
|
||||
.total-count {
|
||||
padding: var(--space-smaller) var(--space-small);
|
||||
background: var(--b-50);
|
||||
border-radius: var(--border-radius-normal);
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-left: var(--space-smaller);
|
||||
margin-right: var(--space-smaller);
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
}
|
||||
|
||||
.page-count {
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--s-500);
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
align-items: center;
|
||||
padding: var(--space-smaller) var(--space-two);
|
||||
}
|
||||
|
||||
.page-change--button:hover {
|
||||
background: var(--s-50);
|
||||
}
|
||||
</style>
|
||||
|
||||
+28
-102
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="notification-list-item--wrap h-full flex-view ">
|
||||
<div class="flex-col py-2 px-2.5 overflow-auto h-full flex ">
|
||||
<woot-button
|
||||
v-for="notificationItem in notifications"
|
||||
v-show="!isLoading"
|
||||
@@ -9,16 +9,20 @@
|
||||
variant="link"
|
||||
@click="() => onClickNotification(notificationItem)"
|
||||
>
|
||||
<div class="notification-list--wrap flex-view w-full">
|
||||
<div
|
||||
class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
|
||||
>
|
||||
<div
|
||||
v-if="!notificationItem.read_at"
|
||||
class="notification-unread--indicator"
|
||||
class="w-2 h-2 rounded-full bg-woot-500"
|
||||
/>
|
||||
<div v-else class="empty flex-view" />
|
||||
<div class="notification-content--wrap w-full flex-space-between">
|
||||
<div class="flex-space-between">
|
||||
<div class="title-wrap flex-view ">
|
||||
<span class="notification-title">
|
||||
<div v-else class="w-2 flex" />
|
||||
<div
|
||||
class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<div class="items-center flex ">
|
||||
<span class="font-bold text-slate-800 dark:text-slate-100">
|
||||
{{
|
||||
`#${
|
||||
notificationItem.primary_actor
|
||||
@@ -27,7 +31,9 @@
|
||||
}`
|
||||
}}
|
||||
</span>
|
||||
<span class="notification-type">
|
||||
<span
|
||||
class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
`NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
|
||||
@@ -44,12 +50,16 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex-view ">
|
||||
<span class="notification-message text-truncate">
|
||||
<div class="w-full flex ">
|
||||
<span
|
||||
class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ notificationItem.push_message_title }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="timestamp flex-view">
|
||||
<span
|
||||
class="mt-1 text-slate-500 dark:text-slate-400 text-xxs font-semibold flex"
|
||||
>
|
||||
{{ dynamicTime(notificationItem.created_at) }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -61,15 +71,18 @@
|
||||
/>
|
||||
<woot-button
|
||||
v-if="!isLoading && inLastPage"
|
||||
size="medium"
|
||||
size="expanded"
|
||||
variant="clear"
|
||||
color-scheme="primary"
|
||||
class-names="action-button"
|
||||
class-names="mt-3"
|
||||
@click="openNotificationPage"
|
||||
>
|
||||
{{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS') }}
|
||||
</woot-button>
|
||||
<div v-if="isLoading" class="notifications-loader flex-view">
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
|
||||
>
|
||||
<spinner />
|
||||
<span>{{
|
||||
$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
|
||||
@@ -133,90 +146,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flex-view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-space-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.notification-list-item--wrap {
|
||||
flex-direction: column;
|
||||
padding: var(--space-small) var(--space-slab);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: var(--space-small);
|
||||
}
|
||||
|
||||
.notification-list--wrap {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: var(--space-slab);
|
||||
line-height: 1.4;
|
||||
border-bottom: 1px solid var(--b-50);
|
||||
}
|
||||
|
||||
.notification-list--wrap:hover {
|
||||
background: var(--b-100);
|
||||
border-radius: var(--border-radius-normal);
|
||||
}
|
||||
|
||||
.notification-content--wrap {
|
||||
flex-direction: column;
|
||||
margin-left: var(--space-slab);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
font-weight: var(--font-weight-black);
|
||||
}
|
||||
|
||||
.notification-type {
|
||||
font-size: var(--font-size-micro);
|
||||
padding: var(--space-micro) var(--space-smaller);
|
||||
margin: 0 var(--space-small);
|
||||
background: var(--s-50);
|
||||
border-radius: var(--border-radius-normal);
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
color: var(--color-body);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
margin-top: var(--space-smaller);
|
||||
color: var(--b-500);
|
||||
font-size: var(--font-size-micro);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.notification-unread--indicator {
|
||||
width: var(--space-small);
|
||||
height: var(--space-small);
|
||||
border-radius: var(--border-radius-rounded);
|
||||
background: var(--color-woot);
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin-top: var(--space-slab);
|
||||
}
|
||||
|
||||
.notifications-loader {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: var(--space-larger) var(--space-small);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
+23
-33
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section class="notification--table-wrap">
|
||||
<section class="notification--table-wrap bg-white dark:bg-slate-900">
|
||||
<woot-submit-button
|
||||
v-if="notificationMetadata.unreadCount"
|
||||
class="button nice success button--fixed-top"
|
||||
@@ -19,7 +19,9 @@
|
||||
@click="() => onClickNotification(notificationItem)"
|
||||
>
|
||||
<td>
|
||||
<div class="flex-view notification-contant--wrap text-truncate">
|
||||
<div
|
||||
class="flex-view notification-contant--wrap overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
<h5 class="notification--title">
|
||||
{{
|
||||
`#${
|
||||
@@ -29,7 +31,9 @@
|
||||
}`
|
||||
}}
|
||||
</h5>
|
||||
<span class="notification--message-title text-truncate">
|
||||
<span
|
||||
class="notification--message-title overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ notificationItem.push_message_title }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -129,86 +133,72 @@ export default {
|
||||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.notification--title {
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
@apply text-sm m-0 text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
|
||||
.notification--table-wrap {
|
||||
@include scroll-on-hover;
|
||||
flex: 1 1;
|
||||
height: 100%;
|
||||
padding: var(--space-large) var(--space-larger);
|
||||
@apply overflow-hidden hover:overflow-y-auto flex-shrink flex-grow h-full py-8 px-12;
|
||||
}
|
||||
|
||||
.notifications-table {
|
||||
> tbody {
|
||||
> tr {
|
||||
cursor: pointer;
|
||||
@apply cursor-pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--b-50);
|
||||
@apply bg-slate-50 dark:bg-slate-800;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: var(--b-100);
|
||||
@apply bg-slate-100 dark:bg-slate-700;
|
||||
}
|
||||
|
||||
> td {
|
||||
&.conversation-count-item {
|
||||
padding-left: var(--space-medium);
|
||||
@apply pl-6 rtl:pl-0 rtl:pr-6;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@apply border-b-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-unread {
|
||||
font-weight: var(--font-weight-bold);
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
.notifications--loader {
|
||||
font-size: var(--font-size-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-big);
|
||||
@apply text-base flex items-center justify-center p-10;
|
||||
}
|
||||
|
||||
.notification--unread-indicator {
|
||||
width: var(--space-one);
|
||||
height: var(--space-one);
|
||||
border-radius: 50%;
|
||||
background: var(--color-woot);
|
||||
@apply w-2.5 h-2.5 rounded-full bg-woot-500 dark:bg-woot-500;
|
||||
}
|
||||
|
||||
.notification--created-at {
|
||||
color: var(--s-700);
|
||||
font-size: var(--font-size-mini);
|
||||
@apply text-slate-700 dark:text-slate-200 text-xs;
|
||||
}
|
||||
|
||||
.notification--type {
|
||||
font-size: var(--font-size-mini);
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.thumbnail--column {
|
||||
width: 3.25rem;
|
||||
@apply w-[3.25rem];
|
||||
}
|
||||
|
||||
.timestamp--column {
|
||||
min-width: 8.125rem;
|
||||
text-align: right;
|
||||
@apply min-w-[9.125rem] text-right;
|
||||
}
|
||||
|
||||
.notification-contant--wrap {
|
||||
flex-direction: column;
|
||||
max-width: 31.25rem;
|
||||
@apply flex-col max-w-[31.25rem];
|
||||
}
|
||||
|
||||
.notification--message-title {
|
||||
color: var(--s-700);
|
||||
@apply text-slate-700 dark:text-slate-100;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
<template>
|
||||
<div
|
||||
class="settings-header bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800"
|
||||
class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
|
||||
>
|
||||
<h1 class="page-title text-black-900 dark:text-slate-300">
|
||||
<h1
|
||||
class="text-2xl mb-0 flex items-center text-slate-900 dark:text-slate-100"
|
||||
>
|
||||
<woot-sidemenu-icon v-if="showSidemenuIcon" />
|
||||
<back-button
|
||||
v-if="showBackButton"
|
||||
:button-label="backButtonLabel"
|
||||
:back-url="backUrl"
|
||||
/>
|
||||
<fluent-icon v-if="icon" :icon="icon" :class="iconClass" />
|
||||
<fluent-icon
|
||||
v-if="icon"
|
||||
:icon="icon"
|
||||
:class="iconClass"
|
||||
class="mr-2 ml-4 rtl:ml-2 rtl:mr-4"
|
||||
/>
|
||||
<slot />
|
||||
<span>{{ headerTitle }}</span>
|
||||
<span class="text-slate-900 dark:text-slate-100">{{ headerTitle }}</span>
|
||||
</h1>
|
||||
<router-link
|
||||
v-if="showNewButton && isAdmin"
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<div class="column">
|
||||
<h2 class="page-sub-title">
|
||||
<div class="flex flex-col w-full items-start">
|
||||
<h2 class="text-xl text-slate-800 dark:text-slate-100 break-words">
|
||||
{{ headerTitle }}
|
||||
</h2>
|
||||
<p v-dompurify-html="headerContent" class="small-12 column" />
|
||||
<p
|
||||
v-dompurify-html="headerContent"
|
||||
class="text-sm w-full text-slate-600 dark:text-slate-300"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="view-box columns bg-light">
|
||||
<div
|
||||
class="flex flex-1 h-full justify-between flex-col m-0 bg-light dark:bg-slate-900"
|
||||
>
|
||||
<settings-header
|
||||
button-route="new"
|
||||
:icon="icon"
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<div class="columns profile--settings">
|
||||
<div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
|
||||
<form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
|
||||
<div
|
||||
class="small-12 row profile--settings--row border-b border-slate-25 dark:border-slate-700"
|
||||
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-700"
|
||||
>
|
||||
<div class="columns small-3">
|
||||
<div
|
||||
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
|
||||
>
|
||||
<h4 class="block-title text-black-900 dark:text-slate-200">
|
||||
{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
|
||||
</h4>
|
||||
<p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
|
||||
</div>
|
||||
<div class="columns small-9 medium-5">
|
||||
<div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
|
||||
<label :class="{ error: $v.name.$error }">
|
||||
{{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
|
||||
<input
|
||||
@@ -85,9 +87,11 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="profile--settings--row border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 row"
|
||||
class="p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 row"
|
||||
>
|
||||
<div class="columns small-3">
|
||||
<div
|
||||
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
|
||||
>
|
||||
<h4 class="block-title text-black-900 dark:text-slate-200">
|
||||
{{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
|
||||
</h4>
|
||||
@@ -95,11 +99,11 @@
|
||||
{{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns small-9 medium-5">
|
||||
<div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
|
||||
<woot-code :script="getAccountId" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="current-version">
|
||||
<div class="text-sm text-center p-4">
|
||||
<div>{{ `v${globalConfig.appVersion}` }}</div>
|
||||
<div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
|
||||
{{
|
||||
@@ -281,29 +285,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~dashboard/assets/scss/variables.scss';
|
||||
@import '~dashboard/assets/scss/mixins.scss';
|
||||
|
||||
.profile--settings {
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.profile--settings--row {
|
||||
padding: $space-normal;
|
||||
.small-3 {
|
||||
padding: $space-normal $space-medium $space-normal 0;
|
||||
}
|
||||
.small-9 {
|
||||
padding: $space-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.current-version {
|
||||
font-size: var(--font-size-small);
|
||||
text-align: center;
|
||||
padding: var(--space-normal);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="row">
|
||||
<div class="small-8 columns with-right-space">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-[60%]">
|
||||
<woot-loading-state
|
||||
v-if="uiFlags.isFetching"
|
||||
:message="$t('AGENT_BOTS.LIST.LOADING')"
|
||||
@@ -23,7 +23,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="small-4 columns content-box">
|
||||
<div class="w-[34%]">
|
||||
<p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-2
@@ -57,14 +57,12 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.agent-bot--link {
|
||||
align-items: center;
|
||||
color: var(--s-800);
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-medium);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.agent-bot--description {
|
||||
color: var(--s-700);
|
||||
font-size: var(--font-size-mini);
|
||||
}
|
||||
|
||||
|
||||
+14
-43
@@ -1,16 +1,22 @@
|
||||
<template>
|
||||
<div class="column content-box no-padding">
|
||||
<div class="row">
|
||||
<div class="small-8 columns">
|
||||
<div class="full-height editor-wrapper">
|
||||
<csml-monaco-editor v-model="bot.csmlContent" class="bot-editor" />
|
||||
<div v-if="$v.bot.csmlContent.$error" class="editor-error-message">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<div class="flex flex-row">
|
||||
<div class="w-[68%]">
|
||||
<div class="h-[calc(100vh-56px)] relative">
|
||||
<csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
|
||||
<div
|
||||
v-if="$v.bot.csmlContent.$error"
|
||||
class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
|
||||
>
|
||||
<span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-4 columns content-box full-height">
|
||||
<form class="details-editor" @submit.prevent="onSubmit">
|
||||
<div class="w-[32%] overflow-auto p-4 h-[calc(100vh-56px)]">
|
||||
<form
|
||||
class="flex flex-col justify-between h-full"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<div>
|
||||
<label :class="{ error: $v.bot.name.$error }">
|
||||
{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
|
||||
@@ -84,38 +90,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.no-padding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.full-height {
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
.bot-editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.details-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
.editor-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.editor-error-message {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0.625rem;
|
||||
background-color: #e0bbbb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
:agent-bot="agentBot"
|
||||
@submit="updateBot"
|
||||
/>
|
||||
<div v-else class="column content-box no-padding">
|
||||
<div v-else class="h-auto overflow-auto flex flex-col no-padding">
|
||||
<spinner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<woot-modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header
|
||||
:header-title="$t('AGENT_MGMT.ADD.TITLE')"
|
||||
:header-content="$t('AGENT_MGMT.ADD.DESC')"
|
||||
/>
|
||||
|
||||
<form class="row" @submit.prevent="addAgent()">
|
||||
<div class="medium-12 columns">
|
||||
<form
|
||||
class="flex flex-col w-full items-start"
|
||||
@submit.prevent="addAgent()"
|
||||
>
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.agentName.$error }">
|
||||
{{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
|
||||
<input
|
||||
@@ -18,7 +21,7 @@
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.agentType.$error }">
|
||||
{{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
|
||||
<select v-model="agentType">
|
||||
@@ -31,7 +34,7 @@
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.agentEmail.$error }">
|
||||
{{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
|
||||
<input
|
||||
@@ -42,8 +45,8 @@
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="medium-12 columns">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:disabled="
|
||||
$v.agentEmail.$invalid ||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header :header-title="pageTitle" />
|
||||
<form class="row medium-8" @submit.prevent="editAgent()">
|
||||
<div class="medium-12 columns">
|
||||
<form class="w-full" @submit.prevent="editAgent()">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.agentName.$error }">
|
||||
{{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
|
||||
<input
|
||||
@@ -15,7 +15,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.agentType.$error }">
|
||||
{{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
|
||||
<select v-model="agentType">
|
||||
@@ -29,7 +29,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.agentAvailability.$error }">
|
||||
{{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
|
||||
<select v-model="agentAvailability">
|
||||
@@ -46,8 +46,8 @@
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-12 modal-footer">
|
||||
<div class="medium-6 columns">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<div class="w-[50%]">
|
||||
<woot-submit-button
|
||||
:disabled="
|
||||
$v.agentType.$invalid ||
|
||||
@@ -61,7 +61,7 @@
|
||||
{{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="medium-6 columns text-right">
|
||||
<div class="w-[50%] text-right">
|
||||
<woot-button
|
||||
icon="lock-closed"
|
||||
variant="clear"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
@@ -10,8 +10,8 @@
|
||||
</woot-button>
|
||||
|
||||
<!-- List Agents -->
|
||||
<div class="row">
|
||||
<div class="small-8 columns with-right-space ">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-[60%]">
|
||||
<woot-loading-state
|
||||
v-if="uiFlags.isFetching"
|
||||
:message="$t('AGENT_MGMT.LOADING')"
|
||||
@@ -85,7 +85,7 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-4 columns">
|
||||
<div class="w-[34%]">
|
||||
<span
|
||||
v-dompurify-html="
|
||||
useInstallationName(
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<woot-modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
|
||||
|
||||
<form class="row" @submit.prevent="addAttributes">
|
||||
<div class="medium-12 columns">
|
||||
<form class="flex w-full" @submit.prevent="addAttributes">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.attributeModel.$error }">
|
||||
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
|
||||
<select v-model="attributeModel">
|
||||
@@ -86,7 +86,7 @@
|
||||
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-submit-button
|
||||
:disabled="isButtonDisabled"
|
||||
:button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="row table-wrap">
|
||||
<div class="column">
|
||||
<div class="flex flex-row gap-4 pl-2">
|
||||
<div class="w-[60%]">
|
||||
<woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
|
||||
<woot-tabs-item
|
||||
v-for="tab in tabs"
|
||||
@@ -10,11 +10,8 @@
|
||||
/>
|
||||
</woot-tabs>
|
||||
|
||||
<div class="columns with-right-space">
|
||||
<p
|
||||
v-if="!uiFlags.isFetching && !attributes.length"
|
||||
class="no-items-error-message"
|
||||
>
|
||||
<div class="w-full">
|
||||
<p v-if="!uiFlags.isFetching && !attributes.length" class="mt-12">
|
||||
{{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
|
||||
</p>
|
||||
<woot-loading-state
|
||||
@@ -23,29 +20,37 @@
|
||||
/>
|
||||
<table
|
||||
v-if="!uiFlags.isFetching && attributes.length"
|
||||
class="woot-table"
|
||||
class="w-full mt-2 table-fixed woot-table"
|
||||
>
|
||||
<thead>
|
||||
<th
|
||||
v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
|
||||
:key="tableHeader"
|
||||
class="item"
|
||||
class="pl-0 max-w-[6.25rem] min-w-[5rem]"
|
||||
>
|
||||
{{ tableHeader }}
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="attribute in attributes" :key="attribute.attribute_key">
|
||||
<td class="item text-truncate">
|
||||
<td
|
||||
class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ attribute.attribute_display_name }}
|
||||
</td>
|
||||
<td class="item-description text-truncate">
|
||||
<td
|
||||
class="pl-0 max-w-[10rem] min-w-[6.25rem] overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ attribute.attribute_description }}
|
||||
</td>
|
||||
<td class="item text-truncatee">
|
||||
<td
|
||||
class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ attribute.attribute_display_type }}
|
||||
</td>
|
||||
<td class="item key text-truncate">
|
||||
<td
|
||||
class="attribute-key pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ attribute.attribute_key }}
|
||||
</td>
|
||||
<td class="button-wrapper">
|
||||
@@ -73,7 +78,7 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-4 columns">
|
||||
<div class="w-[34%]">
|
||||
<span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
|
||||
</div>
|
||||
<woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
|
||||
@@ -206,43 +211,16 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-wrap {
|
||||
padding-left: var(--space-small);
|
||||
}
|
||||
|
||||
.woot-table {
|
||||
width: 100%;
|
||||
margin-top: var(--space-small);
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.no-items-error-message {
|
||||
margin-top: var(--space-larger);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding-left: 0;
|
||||
margin-right: var(--space-medium);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding-left: 0;
|
||||
max-width: 6.25rem;
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
padding-left: 0;
|
||||
max-width: 10rem;
|
||||
min-width: 6.25rem;
|
||||
}
|
||||
|
||||
.key {
|
||||
.attribute-key {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.tabs--container {
|
||||
.tabs {
|
||||
@apply p-0;
|
||||
}
|
||||
}
|
||||
.tabs-title a {
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding-top: 0;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header :header-title="pageTitle" />
|
||||
<form class="row" @submit.prevent="editAttributes">
|
||||
<div class="medium-12 columns">
|
||||
<form class="flex flex-col w-full" @submit.prevent="editAttributes">
|
||||
<div class="w-full">
|
||||
<woot-input
|
||||
v-model.trim="displayName"
|
||||
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
|
||||
@@ -71,7 +71,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
|
||||
{{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
|
||||
</woot-button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="column content-box audit-log--settings">
|
||||
<div class="flex-1 overflow-auto p-4 flex justify-between flex-col">
|
||||
<!-- List Audit Logs -->
|
||||
<div>
|
||||
<div>
|
||||
@@ -16,10 +16,10 @@
|
||||
|
||||
<table
|
||||
v-if="!uiFlags.fetchingList && records.length"
|
||||
class="woot-table width-100"
|
||||
class="woot-table w-full"
|
||||
>
|
||||
<colgroup>
|
||||
<col class="column-activity" />
|
||||
<col class="w-[60%]" />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
@@ -34,10 +34,10 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="auditLogItem in records" :key="auditLogItem.id">
|
||||
<td class="wrap-break-words">
|
||||
<td class="whitespace-nowrap break-all">
|
||||
{{ generateLogText(auditLogItem) }}
|
||||
</td>
|
||||
<td class="wrap-break-words">
|
||||
<td class="whitespace-nowrap break-all">
|
||||
{{
|
||||
messageTimestamp(
|
||||
auditLogItem.created_at,
|
||||
@@ -45,7 +45,7 @@
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<td class="remote-address">
|
||||
<td class="w-[8.75rem]">
|
||||
{{ auditLogItem.remote_address }}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -57,6 +57,7 @@
|
||||
:current-page="Number(meta.currentPage)"
|
||||
:total-count="meta.totalEntries"
|
||||
:page-size="meta.perPage"
|
||||
class="dark:bg-slate-900"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
@@ -133,24 +134,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.audit-log--settings {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
.remote-address {
|
||||
width: 8.75rem;
|
||||
}
|
||||
|
||||
.wrap-break-words {
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.column-activity {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+17
-25
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="column">
|
||||
<div>
|
||||
<woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
|
||||
<div class="row modal-content">
|
||||
<div class="medium-12 columns">
|
||||
<div class="flex flex-col modal-content">
|
||||
<div class="w-full">
|
||||
<woot-input
|
||||
v-model="automation.name"
|
||||
:label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
|
||||
@@ -54,7 +54,9 @@
|
||||
<label>
|
||||
{{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
|
||||
</label>
|
||||
<div class="medium-12 columns filters-wrap">
|
||||
<div
|
||||
class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
|
||||
>
|
||||
<filter-input-box
|
||||
v-for="(condition, i) in automation.conditions"
|
||||
:key="i"
|
||||
@@ -75,7 +77,7 @@
|
||||
@resetFilter="resetFilter(i, automation.conditions[i])"
|
||||
@removeFilter="removeFilter(i)"
|
||||
/>
|
||||
<div class="filter-actions">
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
icon="add"
|
||||
color-scheme="success"
|
||||
@@ -94,7 +96,9 @@
|
||||
<label>
|
||||
{{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
|
||||
</label>
|
||||
<div class="medium-12 columns filters-wrap">
|
||||
<div
|
||||
class="w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
|
||||
>
|
||||
<automation-action-input
|
||||
v-for="(action, i) in automation.actions"
|
||||
:key="i"
|
||||
@@ -110,7 +114,7 @@
|
||||
@resetAction="resetAction(i)"
|
||||
@removeAction="removeAction(i)"
|
||||
/>
|
||||
<div class="filter-actions">
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
icon="add"
|
||||
color-scheme="success"
|
||||
@@ -124,8 +128,8 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Actions End -->
|
||||
<div class="medium-12 columns">
|
||||
<div class="modal-footer justify-content-end w-full">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
|
||||
</woot-button>
|
||||
@@ -220,26 +224,14 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.filters-wrap {
|
||||
padding: var(--space-normal);
|
||||
border-radius: var(--border-radius-large);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background-light);
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-top: var(--space-normal);
|
||||
}
|
||||
.event_wrapper {
|
||||
select {
|
||||
margin: var(--space-zero);
|
||||
@apply m-0;
|
||||
}
|
||||
.info-message {
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--s-500);
|
||||
text-align: right;
|
||||
@apply text-xs text-green-500 dark:text-green-500 text-right;
|
||||
}
|
||||
margin-bottom: var(--space-medium);
|
||||
|
||||
@apply mb-6;
|
||||
}
|
||||
</style>
|
||||
|
||||
+17
-25
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="column">
|
||||
<div>
|
||||
<woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
|
||||
<div class="row modal-content">
|
||||
<div v-if="automation" class="medium-12 columns">
|
||||
<div class="flex flex-col modal-content">
|
||||
<div v-if="automation" class="w-full">
|
||||
<woot-input
|
||||
v-model="automation.name"
|
||||
:label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
|
||||
@@ -51,7 +51,9 @@
|
||||
<label>
|
||||
{{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
|
||||
</label>
|
||||
<div class="medium-12 columns filters-wrap">
|
||||
<div
|
||||
class="w-full w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
|
||||
>
|
||||
<filter-input-box
|
||||
v-for="(condition, i) in automation.conditions"
|
||||
:key="i"
|
||||
@@ -72,7 +74,7 @@
|
||||
@resetFilter="resetFilter(i, automation.conditions[i])"
|
||||
@removeFilter="removeFilter(i)"
|
||||
/>
|
||||
<div class="filter-actions">
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
icon="add"
|
||||
color-scheme="success"
|
||||
@@ -91,7 +93,9 @@
|
||||
<label>
|
||||
{{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
|
||||
</label>
|
||||
<div class="medium-12 columns filters-wrap">
|
||||
<div
|
||||
class="w-full w-full p-4 bg-slate-25 dark:bg-slate-700 rounded-lg border border-solid border-slate-50 dark:border-slate-700 mb-4"
|
||||
>
|
||||
<automation-action-input
|
||||
v-for="(action, i) in automation.actions"
|
||||
:key="i"
|
||||
@@ -104,7 +108,7 @@
|
||||
@resetAction="resetAction(i)"
|
||||
@removeAction="removeAction(i)"
|
||||
/>
|
||||
<div class="filter-actions">
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
icon="add"
|
||||
color-scheme="success"
|
||||
@@ -118,8 +122,8 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Actions End -->
|
||||
<div class="medium-12 columns">
|
||||
<div class="modal-footer justify-content-end w-full">
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button
|
||||
class="button"
|
||||
variant="clear"
|
||||
@@ -198,26 +202,14 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.filters-wrap {
|
||||
padding: var(--space-normal);
|
||||
border-radius: var(--border-radius-large);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background-light);
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-top: var(--space-normal);
|
||||
}
|
||||
.event_wrapper {
|
||||
select {
|
||||
margin: var(--space-zero);
|
||||
@apply m-0;
|
||||
}
|
||||
.info-message {
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--s-500);
|
||||
text-align: right;
|
||||
@apply text-xs text-green-500 dark:text-green-500 text-right;
|
||||
}
|
||||
margin-bottom: var(--space-medium);
|
||||
|
||||
@apply mb-6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
@@ -8,8 +8,8 @@
|
||||
>
|
||||
{{ $t('AUTOMATION.HEADER_BTN_TXT') }}
|
||||
</woot-button>
|
||||
<div class="row">
|
||||
<div class="small-8 columns with-right-space">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-[60%]">
|
||||
<p
|
||||
v-if="!uiFlags.isFetching && !records.length"
|
||||
class="no-items-error-message"
|
||||
@@ -77,7 +77,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="small-4 columns">
|
||||
<div class="w-[34%]">
|
||||
<span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -277,9 +277,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.automation__status-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="columns profile--settings">
|
||||
<div class="overflow-auto flex-1 p-6 dark:bg-slate-900">
|
||||
<woot-loading-state v-if="uiFlags.isFetchingItem" />
|
||||
<div v-else-if="!hasABillingPlan">
|
||||
<p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
|
||||
</div>
|
||||
<div v-else class="small-12 columns ">
|
||||
<div v-else class="w-full">
|
||||
<div class="current-plan--details">
|
||||
<h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
|
||||
<div
|
||||
@@ -42,7 +42,7 @@ import { mapGetters } from 'vuex';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import accountMixin from '../../../../mixins/account';
|
||||
import BillingItem from './components/BillingItem.vue';
|
||||
|
||||
// sdds
|
||||
export default {
|
||||
components: { BillingItem },
|
||||
mixins: [accountMixin, alertMixin, messageFormatterMixin],
|
||||
@@ -92,25 +92,28 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.manage-subscription {
|
||||
align-items: center;
|
||||
background: var(--white);
|
||||
border-radius: var(--border-radius-normal);
|
||||
border: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-small);
|
||||
padding: var(--space-medium) var(--space-normal);
|
||||
@apply bg-white dark:bg-slate-800 flex justify-between mb-2 py-6 px-4 items-center rounded-md border border-solid border-slate-75 dark:border-slate-700;
|
||||
}
|
||||
|
||||
.current-plan--details {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: var(--space-normal);
|
||||
padding-bottom: var(--space-normal);
|
||||
@apply border-b border-solid border-slate-75 dark:border-slate-800 mb-4 pb-4;
|
||||
|
||||
h6 {
|
||||
@apply text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-slate-600 dark:text-slate-200;
|
||||
}
|
||||
}
|
||||
|
||||
.manage-subscription {
|
||||
.manage-subscription--description {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0 text-slate-600 dark:text-slate-200;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header
|
||||
:header-title="$t('CAMPAIGN.ADD.TITLE')"
|
||||
:header-content="$t('CAMPAIGN.ADD.DESC')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="addCampaign">
|
||||
<div class="medium-12 columns">
|
||||
<form class="flex flex-col w-full" @submit.prevent="addCampaign">
|
||||
<div class="w-full">
|
||||
<woot-input
|
||||
v-model="title"
|
||||
:label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
|
||||
@@ -158,7 +158,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button :is-loading="uiFlags.isCreating">
|
||||
{{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
|
||||
</woot-button>
|
||||
@@ -367,4 +367,14 @@ export default {
|
||||
::v-deep .ProseMirror-woot-style {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.message-editor {
|
||||
@apply px-3;
|
||||
|
||||
::v-deep {
|
||||
.ProseMirror-menubar {
|
||||
@apply rounded-tl-[4px];
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<campaigns-table
|
||||
:campaigns="campaigns"
|
||||
:show-empty-result="showEmptyResult"
|
||||
@@ -101,12 +101,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: var(--space-one);
|
||||
}
|
||||
|
||||
.content-box .page-top-bar::v-deep {
|
||||
padding: var(--space-large) var(--space-large) var(--space-zero);
|
||||
@apply flex justify-end pb-2.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,8 +7,9 @@
|
||||
scroll-width="190rem"
|
||||
:table-data="tableData"
|
||||
:border-around="true"
|
||||
style="max-width: calc(100vw - 18rem)"
|
||||
/>
|
||||
<div v-if="isLoading" class="campaign--loader">
|
||||
<div v-if="isLoading" class="items-center flex text-base justify-center">
|
||||
<spinner />
|
||||
<span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
|
||||
</div>
|
||||
@@ -108,7 +109,9 @@ export default {
|
||||
align: this.isRTLView ? 'right' : 'left',
|
||||
renderBodyCell: ({ row }) => (
|
||||
<div class="row--title-block">
|
||||
<h6 class="sub-block-title title text-truncate">{row.title}</h6>
|
||||
<h6 class="text-sm m-0 capitalize text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{row.title}
|
||||
</h6>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
@@ -122,7 +125,7 @@ export default {
|
||||
renderBodyCell: ({ row }) => {
|
||||
if (row.message) {
|
||||
return (
|
||||
<div class="text-truncate">
|
||||
<div class="overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
<span
|
||||
domPropsInnerHTML={this.formatMessage(row.message)}
|
||||
></span>
|
||||
@@ -174,7 +177,7 @@ export default {
|
||||
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.URL'),
|
||||
align: this.isRTLView ? 'right' : 'left',
|
||||
renderBodyCell: ({ row }) => (
|
||||
<div class="text-truncate">
|
||||
<div class="overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
@@ -199,7 +202,7 @@ export default {
|
||||
title: '',
|
||||
align: this.isRTLView ? 'right' : 'left',
|
||||
renderBodyCell: row => (
|
||||
<div class="button-wrapper">
|
||||
<div class="justify-evenly flex flex-row min-w-[12.5rem]">
|
||||
<WootButton
|
||||
variant="clear"
|
||||
icon="edit"
|
||||
@@ -251,7 +254,7 @@ export default {
|
||||
title: '',
|
||||
align: this.isRTLView ? 'right' : 'left',
|
||||
renderBodyCell: row => (
|
||||
<div class="button-wrapper">
|
||||
<div class="justify-evenly flex flex-row min-w-[12.5rem]">
|
||||
<WootButton
|
||||
variant="link"
|
||||
icon="dismiss-circle"
|
||||
@@ -272,48 +275,25 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.campaigns-table-wrap::v-deep {
|
||||
.ve-table {
|
||||
padding-bottom: var(--space-large);
|
||||
@apply pb-12;
|
||||
|
||||
thead.ve-table-header .ve-table-header-tr .ve-table-header-th {
|
||||
font-size: var(--font-size-mini);
|
||||
padding: var(--space-small) var(--space-two);
|
||||
@apply text-xs py-2 px-5;
|
||||
}
|
||||
tbody.ve-table-body .ve-table-body-tr .ve-table-body-td {
|
||||
padding: var(--space-slab) var(--space-two);
|
||||
@apply py-3 px-5;
|
||||
|
||||
.inbox--name {
|
||||
margin: 0;
|
||||
@apply m-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row--title-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
@apply items-center flex text-left;
|
||||
}
|
||||
.label {
|
||||
padding: var(--space-smaller) var(--space-small);
|
||||
@apply py-1 px-2;
|
||||
}
|
||||
}
|
||||
|
||||
.campaign--loader {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size-default);
|
||||
justify-content: center;
|
||||
padding: var(--space-big);
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 12.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header :header-title="pageTitle" />
|
||||
<form class="row" @submit.prevent="editCampaign">
|
||||
<div class="medium-12 columns">
|
||||
<form class="flex flex-col w-full" @submit.prevent="editCampaign">
|
||||
<div class="w-full">
|
||||
<woot-input
|
||||
v-model="title"
|
||||
:label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
|
||||
@@ -97,7 +97,7 @@
|
||||
{{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-button :is-loading="uiFlags.isCreating">
|
||||
{{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
|
||||
</woot-button>
|
||||
@@ -283,4 +283,14 @@ export default {
|
||||
::v-deep .ProseMirror-woot-style {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.message-editor {
|
||||
@apply px-3;
|
||||
|
||||
::v-deep {
|
||||
.ProseMirror-menubar {
|
||||
@apply rounded-tl-[4px];
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header
|
||||
:header-title="$t('CANNED_MGMT.ADD.TITLE')"
|
||||
:header-content="$t('CANNED_MGMT.ADD.DESC')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="addCannedResponse()">
|
||||
<div class="medium-12 columns">
|
||||
<form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.shortCode.$error }">
|
||||
{{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
|
||||
<input
|
||||
@@ -18,7 +18,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.content.$error }">
|
||||
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
|
||||
</label>
|
||||
@@ -34,21 +34,19 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="medium-12 columns">
|
||||
<woot-submit-button
|
||||
:disabled="
|
||||
$v.content.$invalid ||
|
||||
$v.shortCode.$invalid ||
|
||||
addCanned.showLoading
|
||||
"
|
||||
:button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
|
||||
:loading="addCanned.showLoading"
|
||||
/>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-submit-button
|
||||
:disabled="
|
||||
$v.content.$invalid ||
|
||||
$v.shortCode.$invalid ||
|
||||
addCanned.showLoading
|
||||
"
|
||||
:button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
|
||||
:loading="addCanned.showLoading"
|
||||
/>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -137,19 +135,15 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.ProseMirror-menubar {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.ProseMirror-woot-style {
|
||||
min-height: 12.5rem;
|
||||
@apply min-h-[12.5rem];
|
||||
|
||||
p {
|
||||
font-size: var(--font-size-default);
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
|
||||
.message-editor {
|
||||
border: 1px solid var(--s-200);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<div class="h-auto overflow-auto flex flex-col">
|
||||
<woot-modal-header :header-title="pageTitle" />
|
||||
<form class="row medium-8" @submit.prevent="editCannedResponse()">
|
||||
<div class="medium-12 columns">
|
||||
<form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.shortCode.$error }">
|
||||
{{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
|
||||
<input
|
||||
@@ -15,7 +15,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.content.$error }">
|
||||
{{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
|
||||
</label>
|
||||
@@ -31,21 +31,19 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="medium-12 columns">
|
||||
<woot-submit-button
|
||||
:disabled="
|
||||
$v.content.$invalid ||
|
||||
$v.shortCode.$invalid ||
|
||||
editCanned.showLoading
|
||||
"
|
||||
:button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
|
||||
:loading="editCanned.showLoading"
|
||||
/>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
|
||||
<woot-submit-button
|
||||
:disabled="
|
||||
$v.content.$invalid ||
|
||||
$v.shortCode.$invalid ||
|
||||
editCanned.showLoading
|
||||
"
|
||||
:button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
|
||||
:loading="editCanned.showLoading"
|
||||
/>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -141,19 +139,15 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.ProseMirror-menubar {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.ProseMirror-woot-style {
|
||||
min-height: 12.5rem;
|
||||
@apply min-h-[12.5rem];
|
||||
|
||||
p {
|
||||
font-size: var(--font-size-default);
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
|
||||
.message-editor {
|
||||
border: 1px solid var(--s-200);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
@@ -10,8 +10,8 @@
|
||||
</woot-button>
|
||||
|
||||
<!-- List Canned Response -->
|
||||
<div class="row">
|
||||
<div class="small-8 columns with-right-space ">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-[60%]">
|
||||
<p
|
||||
v-if="!uiFlags.fetchingList && !records.length"
|
||||
class="no-items-error-message"
|
||||
@@ -42,11 +42,13 @@
|
||||
:key="cannedItem.short_code"
|
||||
>
|
||||
<!-- Short Code -->
|
||||
<td class="short-code">
|
||||
<td class="w-[8.75rem]">
|
||||
{{ cannedItem.short_code }}
|
||||
</td>
|
||||
<!-- Content -->
|
||||
<td class="wrap-break-words">{{ cannedItem.content }}</td>
|
||||
<td class="break-all whitespace-normal">
|
||||
{{ cannedItem.content }}
|
||||
</td>
|
||||
<!-- Action Buttons -->
|
||||
<td class="button-wrapper">
|
||||
<woot-button
|
||||
@@ -73,7 +75,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="small-4 columns">
|
||||
<div class="w-[34%]">
|
||||
<span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,12 +209,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.short-code {
|
||||
width: 8.75rem;
|
||||
}
|
||||
.wrap-break-words {
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="wizard-body columns content-box small-9">
|
||||
<form class="row" @submit.prevent="addAgents()">
|
||||
<div class="medium-12 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="addAgents()">
|
||||
<div class="w-full">
|
||||
<page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
|
||||
:header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
|
||||
/>
|
||||
</div>
|
||||
<div class="medium-7 columns">
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-[60%]">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.selectedAgents.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
|
||||
<multiselect
|
||||
@@ -31,7 +31,7 @@
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
|
||||
:loading="isCreating"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="wizard-body small-12 medium-9 columns height-auto">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
|
||||
<page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
|
||||
:header-content="
|
||||
@@ -9,7 +9,7 @@
|
||||
)
|
||||
"
|
||||
/>
|
||||
<div class="row channel-list">
|
||||
<div class="mt-6 mx-0 flex flex-wrap">
|
||||
<channel-item
|
||||
v-for="channel in channelList"
|
||||
:key="channel.key"
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="wizard-body columns content-box small-9">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<empty-state
|
||||
:title="$t('INBOX_MGMT.FINISH.TITLE')"
|
||||
:message="message"
|
||||
:button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
|
||||
>
|
||||
<div class="medium-12 columns text-center">
|
||||
<div class="website--code">
|
||||
<div class="w-full text-center">
|
||||
<div class="my-4 mx-auto max-w-[70%]">
|
||||
<woot-code
|
||||
v-if="currentInbox.web_widget_script"
|
||||
:script="currentInbox.web_widget_script"
|
||||
/>
|
||||
</div>
|
||||
<div class="medium-6 small-offset-3">
|
||||
<div class="w-[50%] max-w-[50%] ml-[25%]">
|
||||
<woot-code
|
||||
v-if="isATwilioInbox"
|
||||
lang="html"
|
||||
:script="currentInbox.callback_webhook_url"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isWhatsAppCloudInbox" class="medium-6 small-offset-3">
|
||||
<p class="config--label">
|
||||
<div v-if="isWhatsAppCloudInbox" class="w-[50%] max-w-[50%] ml-[25%]">
|
||||
<p class="text-slate-700 dark:text-slate-200 font-medium mt-8">
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
|
||||
</p>
|
||||
<woot-code lang="html" :script="currentInbox.callback_webhook_url" />
|
||||
<p class="config--label">
|
||||
<p class="text-slate-700 dark:text-slate-200 font-medium mt-8">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
|
||||
@@ -36,14 +36,14 @@
|
||||
:script="currentInbox.provider_config.webhook_verify_token"
|
||||
/>
|
||||
</div>
|
||||
<div class="medium-6 small-offset-3">
|
||||
<div class="w-[50%] max-w-[50%] ml-[25%]">
|
||||
<woot-code
|
||||
v-if="isALineInbox"
|
||||
lang="html"
|
||||
:script="currentInbox.callback_webhook_url"
|
||||
/>
|
||||
</div>
|
||||
<div class="medium-6 small-offset-3">
|
||||
<div class="w-[50%] max-w-[50%] ml-[25%]">
|
||||
<woot-code
|
||||
v-if="isASmsInbox"
|
||||
lang="html"
|
||||
@@ -52,13 +52,13 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="isAEmailInbox && !currentInbox.provider"
|
||||
class="medium-6 small-offset-3"
|
||||
class="w-[50%] max-w-[50%] ml-[25%]"
|
||||
>
|
||||
<woot-code lang="html" :script="currentInbox.forward_to_email" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="flex justify-center gap-2 mt-4">
|
||||
<router-link
|
||||
class="button hollow primary settings-button"
|
||||
class="button hollow primary"
|
||||
:to="{
|
||||
name: 'settings_inbox_show',
|
||||
params: { inboxId: this.$route.params.inbox_id },
|
||||
@@ -152,26 +152,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
|
||||
.website--code {
|
||||
margin: $space-normal auto;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
|
||||
.config--label {
|
||||
color: var(--b-600);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-top: var(--space-large);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="row content-box full-height">
|
||||
<div
|
||||
class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
|
||||
>
|
||||
<woot-wizard
|
||||
class="hide-for-small-only medium-3 columns"
|
||||
class="hide-for-small-only w-[25%]"
|
||||
:global-config="globalConfig"
|
||||
:items="items"
|
||||
/>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="column content-box">
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<!-- List Canned Response -->
|
||||
<div class="row">
|
||||
<div class="small-8 columns with-right-space">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-[60%]">
|
||||
<p v-if="!inboxesList.length" class="no-items-error-message">
|
||||
{{ $t('INBOX_MGMT.LIST.404') }}
|
||||
<router-link
|
||||
@@ -98,7 +98,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="small-4 columns">
|
||||
<div class="w-[34%]">
|
||||
<span
|
||||
v-dompurify-html="
|
||||
useInstallationName(
|
||||
|
||||
+6
-8
@@ -76,27 +76,25 @@ export default {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.pre-chat-field {
|
||||
padding: var(--space-normal) var(--space-small);
|
||||
@apply py-4 px-2 text-slate-700 dark:text-slate-100;
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@apply flex items-center;
|
||||
}
|
||||
}
|
||||
.disabled-text {
|
||||
color: var(--s-500);
|
||||
@apply text-slate-500 dark:text-slate-400;
|
||||
}
|
||||
|
||||
table {
|
||||
thead th {
|
||||
text-transform: none;
|
||||
@apply normal-case;
|
||||
}
|
||||
input {
|
||||
font-size: var(--font-size-small);
|
||||
margin-bottom: 0;
|
||||
@apply text-sm mb-0;
|
||||
}
|
||||
}
|
||||
checkbox {
|
||||
margin: 0;
|
||||
@apply m-0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="settings--content">
|
||||
<div class="pre-chat--title">
|
||||
<div class="my-2 mx-8 text-base">
|
||||
<div class="mt-6 mx-0 mb-3">
|
||||
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
|
||||
</div>
|
||||
<form @submit.prevent="updateInbox">
|
||||
<label class="medium-3 columns">
|
||||
<form class="flex flex-col" @submit.prevent="updateInbox">
|
||||
<label class="w-[25%]">
|
||||
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
|
||||
<select v-model="preChatFormEnabled">
|
||||
<option :value="true">
|
||||
@@ -16,7 +16,7 @@
|
||||
</select>
|
||||
</label>
|
||||
<div v-if="preChatFormEnabled">
|
||||
<label class="columns medium-8 large-8">
|
||||
<label class="w-[70%]">
|
||||
<label>
|
||||
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
|
||||
</label>
|
||||
@@ -28,7 +28,7 @@
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
<div class="columns medium-8 large-8 pre-chat-fields">
|
||||
<div class="w-[70%] mt-4">
|
||||
<label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
|
||||
<table class="table table-striped w-full">
|
||||
<thead class="thead-dark">
|
||||
@@ -66,13 +66,14 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<woot-submit-button
|
||||
class="submit-button"
|
||||
:button-text="
|
||||
$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
|
||||
"
|
||||
:loading="uiFlags.isUpdating"
|
||||
/>
|
||||
<div class="my-4 w-auto">
|
||||
<woot-submit-button
|
||||
:button-text="
|
||||
$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
|
||||
"
|
||||
:loading="uiFlags.isUpdating"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -171,17 +172,13 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.settings--content {
|
||||
font-size: var(--font-size-default);
|
||||
}
|
||||
.pre-chat--title {
|
||||
margin: var(--space-medium) 0 var(--space-slab);
|
||||
}
|
||||
.message-editor {
|
||||
@apply px-3;
|
||||
|
||||
.submit-button {
|
||||
margin-top: var(--space-normal);
|
||||
}
|
||||
.pre-chat-fields {
|
||||
margin-top: var(--space-normal);
|
||||
::v-deep {
|
||||
.ProseMirror-menubar {
|
||||
@apply rounded-tl-[4px];
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="settings columns container">
|
||||
<div
|
||||
class="settings bg-white dark:bg-slate-800 flex-grow flex-shrink pr-0 pl-0 overflow-auto min-w-0 w-full"
|
||||
>
|
||||
<setting-intro-banner
|
||||
:header-image="inbox.avatarUrl"
|
||||
:header-title="inboxName"
|
||||
@@ -28,14 +30,14 @@
|
||||
<woot-avatar-uploader
|
||||
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
|
||||
:src="avatarUrl"
|
||||
class="settings-item"
|
||||
class="pb-4"
|
||||
delete-avatar
|
||||
@change="handleImageUpload"
|
||||
@onAvatarDelete="handleAvatarDelete"
|
||||
/>
|
||||
<woot-input
|
||||
v-model.trim="selectedInboxName"
|
||||
class="medium-9 columns settings-item"
|
||||
class="w-[75%] pb-4"
|
||||
:class="{ error: $v.selectedInboxName.$error }"
|
||||
:label="inboxNameLabel"
|
||||
:placeholder="inboxNamePlaceHolder"
|
||||
@@ -61,7 +63,7 @@
|
||||
<woot-input
|
||||
v-if="isAPIInbox"
|
||||
v-model.trim="webhookUrl"
|
||||
class="medium-9 columns settings-item"
|
||||
class="w-[75%] pb-4"
|
||||
:class="{ error: $v.webhookUrl.$error }"
|
||||
:label="
|
||||
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
|
||||
@@ -79,7 +81,7 @@
|
||||
<woot-input
|
||||
v-if="isAWebWidgetInbox"
|
||||
v-model.trim="channelWebsiteUrl"
|
||||
class="medium-9 columns settings-item"
|
||||
class="w-[75%] pb-4"
|
||||
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
|
||||
:placeholder="
|
||||
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
|
||||
@@ -88,7 +90,7 @@
|
||||
<woot-input
|
||||
v-if="isAWebWidgetInbox"
|
||||
v-model.trim="channelWelcomeTitle"
|
||||
class="medium-9 columns settings-item"
|
||||
class="w-[75%] pb-4"
|
||||
:label="
|
||||
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
|
||||
"
|
||||
@@ -102,7 +104,7 @@
|
||||
<woot-input
|
||||
v-if="isAWebWidgetInbox"
|
||||
v-model.trim="channelWelcomeTagline"
|
||||
class="medium-9 columns settings-item"
|
||||
class="w-[75%] pb-4"
|
||||
:label="
|
||||
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
|
||||
"
|
||||
@@ -113,17 +115,17 @@
|
||||
"
|
||||
/>
|
||||
|
||||
<label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
|
||||
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
|
||||
<woot-color-picker v-model="inbox.widget_color" />
|
||||
</label>
|
||||
|
||||
<label v-if="isAWhatsAppChannel" class="medium-9 columns settings-item">
|
||||
<label v-if="isAWhatsAppChannel" class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
|
||||
<input v-model="whatsAppAPIProviderName" type="text" disabled />
|
||||
</label>
|
||||
|
||||
<label class="medium-9 columns settings-item">
|
||||
<label class="w-[75%] pb-4">
|
||||
{{
|
||||
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
|
||||
}}
|
||||
@@ -143,7 +145,7 @@
|
||||
}}
|
||||
</option>
|
||||
</select>
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
|
||||
@@ -151,7 +153,7 @@
|
||||
}}
|
||||
</p>
|
||||
</label>
|
||||
<div v-if="greetingEnabled" class="settings-item">
|
||||
<div v-if="greetingEnabled" class="pb-4">
|
||||
<greetings-editor
|
||||
v-model.trim="greetingMessage"
|
||||
:label="
|
||||
@@ -167,7 +169,7 @@
|
||||
:richtext="!textAreaChannels"
|
||||
/>
|
||||
</div>
|
||||
<label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
|
||||
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
|
||||
<select v-model="replyTime">
|
||||
<option key="in_a_few_minutes" value="in_a_few_minutes">
|
||||
@@ -185,12 +187,12 @@
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
|
||||
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
|
||||
<select v-model="emailCollectEnabled">
|
||||
<option :value="true">
|
||||
@@ -200,14 +202,14 @@
|
||||
{{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{
|
||||
$t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
|
||||
}}
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<label class="medium-9 columns settings-item">
|
||||
<label class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
|
||||
<select v-model="csatSurveyEnabled">
|
||||
<option :value="true">
|
||||
@@ -217,12 +219,12 @@
|
||||
{{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
|
||||
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
|
||||
<select v-model="allowMessagesAfterResolved">
|
||||
<option :value="true">
|
||||
@@ -232,7 +234,7 @@
|
||||
{{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
|
||||
@@ -241,7 +243,7 @@
|
||||
</p>
|
||||
</label>
|
||||
|
||||
<label v-if="isAWebWidgetInbox" class="medium-9 columns settings-item">
|
||||
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
|
||||
<select v-model="continuityViaEmail">
|
||||
<option :value="true">
|
||||
@@ -251,7 +253,7 @@
|
||||
{{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
|
||||
@@ -259,7 +261,7 @@
|
||||
}}
|
||||
</p>
|
||||
</label>
|
||||
<div class="medium-9 settings-item">
|
||||
<div class="w-[75%] pb-4">
|
||||
<label>
|
||||
{{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
|
||||
</label>
|
||||
@@ -271,14 +273,11 @@
|
||||
{{ p.name }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
|
||||
</p>
|
||||
</div>
|
||||
<label
|
||||
v-if="canLocktoSingleConversation"
|
||||
class="medium-9 columns settings-item"
|
||||
>
|
||||
<label v-if="canLocktoSingleConversation" class="w-[75%] pb-4">
|
||||
{{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
|
||||
<select v-model="locktoSingleConversation">
|
||||
<option :value="true">
|
||||
@@ -288,7 +287,7 @@
|
||||
{{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="help-text">
|
||||
<p class="text-slate-600 dark:text-slate-400 pb-1 text-sm not-italic">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
|
||||
@@ -300,10 +299,7 @@
|
||||
<label v-if="isAWebWidgetInbox">
|
||||
{{ $t('INBOX_MGMT.FEATURES.LABEL') }}
|
||||
</label>
|
||||
<div
|
||||
v-if="isAWebWidgetInbox"
|
||||
class="widget--feature-flag settings-item"
|
||||
>
|
||||
<div v-if="isAWebWidgetInbox" class="pt-2 pb-4">
|
||||
<input
|
||||
v-model="selectedFeatureFlags"
|
||||
type="checkbox"
|
||||
@@ -314,7 +310,7 @@
|
||||
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="isAWebWidgetInbox" class="settings-item">
|
||||
<div v-if="isAWebWidgetInbox" class="pb-4">
|
||||
<input
|
||||
v-model="selectedFeatureFlags"
|
||||
type="checkbox"
|
||||
@@ -325,7 +321,7 @@
|
||||
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="isAWebWidgetInbox" class="settings-item">
|
||||
<div v-if="isAWebWidgetInbox" class="pb-4">
|
||||
<input
|
||||
v-model="selectedFeatureFlags"
|
||||
type="checkbox"
|
||||
@@ -336,7 +332,7 @@
|
||||
{{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="isAWebWidgetInbox" class="settings-item">
|
||||
<div v-if="isAWebWidgetInbox" class="pb-4">
|
||||
<input
|
||||
v-model="selectedFeatureFlags"
|
||||
type="checkbox"
|
||||
@@ -354,13 +350,13 @@
|
||||
:sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
|
||||
:show-border="false"
|
||||
>
|
||||
<div class="medium-9 settings-item">
|
||||
<div class="w-[75%] pb-4">
|
||||
<sender-name-example-preview
|
||||
:sender-name-type="senderNameType"
|
||||
:business-name="businessName"
|
||||
@update="toggleSenderNameType"
|
||||
/>
|
||||
<div class="business-section">
|
||||
<div class="flex flex-col items-start gap-2 mt-2">
|
||||
<woot-button
|
||||
variant="clear"
|
||||
color-scheme="primary"
|
||||
@@ -372,7 +368,7 @@
|
||||
)
|
||||
}}
|
||||
</woot-button>
|
||||
<div v-if="showBusinessNameInput" class="business-name-input">
|
||||
<div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
|
||||
<input
|
||||
ref="businessNameInput"
|
||||
v-model="businessName"
|
||||
@@ -381,6 +377,7 @@
|
||||
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
|
||||
)
|
||||
"
|
||||
class="mb-0"
|
||||
type="text"
|
||||
/>
|
||||
<woot-button color-scheme="primary" @click="updateInbox">
|
||||
@@ -773,52 +770,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.settings {
|
||||
background: $color-white;
|
||||
|
||||
.settings--tabs {
|
||||
::v-deep .tabs {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.widget--feature-flag {
|
||||
padding-top: var(--space-small);
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
padding-bottom: var(--space-normal);
|
||||
|
||||
.help-text {
|
||||
font-style: normal;
|
||||
color: var(--b-500);
|
||||
padding-bottom: var(--space-smaller);
|
||||
}
|
||||
}
|
||||
|
||||
.business-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-small);
|
||||
margin-top: var(--space-small);
|
||||
|
||||
.business-name-input {
|
||||
display: flex;
|
||||
gap: var(--space-small);
|
||||
width: 80%;
|
||||
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
@apply p-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -448,7 +448,7 @@ export default {
|
||||
min-height: 40.625rem;
|
||||
margin: var(--space-zero) var(--space-two) var(--space-two) var(--space-two);
|
||||
padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
|
||||
background: var(--s-50);
|
||||
@apply bg-slate-50 dark:bg-slate-700;
|
||||
|
||||
@include breakpoint(500px down) {
|
||||
background: none;
|
||||
|
||||
+5
-5
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<form class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-8 columns">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.inboxName.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
|
||||
<input
|
||||
@@ -15,7 +15,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.phoneNumber.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
|
||||
<input
|
||||
@@ -30,7 +30,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.apiKey.$error }">
|
||||
<span>
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
|
||||
@@ -47,7 +47,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="wizard-body small-9 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
|
||||
:header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-8 columns">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.channelName.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
|
||||
<input
|
||||
@@ -22,7 +22,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.webhookUrl.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
|
||||
<input
|
||||
@@ -39,7 +39,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<form class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-8 columns">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.inboxName.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
|
||||
<input
|
||||
@@ -17,7 +17,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.phoneNumber.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
|
||||
<input
|
||||
@@ -34,7 +34,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.accountId.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
|
||||
<input
|
||||
@@ -51,7 +51,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.applicationId.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
|
||||
<input
|
||||
@@ -68,7 +68,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.apiKey.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
|
||||
<input
|
||||
@@ -83,7 +83,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.apiSecret.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
|
||||
<input
|
||||
@@ -100,7 +100,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<form class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-8 columns">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.inboxName.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
|
||||
<input
|
||||
@@ -15,7 +15,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.phoneNumber.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
|
||||
<input
|
||||
@@ -30,7 +30,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.phoneNumberId.$error }">
|
||||
<span>
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
|
||||
@@ -49,7 +49,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.businessAccountId.$error }">
|
||||
<span>
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
|
||||
@@ -68,7 +68,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.apiKey.$error }">
|
||||
<span>
|
||||
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
|
||||
@@ -85,7 +85,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="wizard-body columns content-box small-9">
|
||||
<div v-if="!hasLoginStarted" class="login-init full-height">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<div v-if="!hasLoginStarted" class="login-init h-full">
|
||||
<a href="#" @click="startLogin()">
|
||||
<img
|
||||
src="~dashboard/assets/images/channels/facebook_login.png"
|
||||
@@ -18,8 +18,12 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<loading-state v-if="showLoader" :message="emptyStateMessage" />
|
||||
<form v-if="!showLoader" class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-12 columns">
|
||||
<form
|
||||
v-if="!showLoader"
|
||||
class="mx-0 flex flex-wrap"
|
||||
@submit.prevent="createChannel()"
|
||||
>
|
||||
<div class="w-full">
|
||||
<page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
|
||||
:header-content="
|
||||
@@ -30,8 +34,8 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="medium-7 columns">
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-[60%]">
|
||||
<div class="w-full">
|
||||
<div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
|
||||
<multiselect
|
||||
@@ -52,7 +56,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<label :class="{ error: $v.pageName.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
|
||||
<input
|
||||
@@ -66,7 +70,7 @@
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-12 columns text-right">
|
||||
<div class="w-full text-right">
|
||||
<input type="submit" value="Create Inbox" class="button" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="wizard-body small-9 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
|
||||
:header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-8 columns">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.channelName.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
|
||||
<input
|
||||
@@ -22,7 +22,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.lineChannelId.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
|
||||
<input
|
||||
@@ -36,7 +36,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.lineChannelSecret.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
|
||||
<input
|
||||
@@ -50,7 +50,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.lineChannelToken.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
|
||||
<input
|
||||
@@ -64,7 +64,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="wizard-body small-9 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
|
||||
:header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
|
||||
/>
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label>
|
||||
{{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
|
||||
<select v-model="provider">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="wizard-body small-9 columns">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<page-header
|
||||
:header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
|
||||
:header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
|
||||
/>
|
||||
<form class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-8 columns">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.botToken.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
|
||||
<input
|
||||
@@ -22,7 +22,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
|
||||
<template>
|
||||
<form class="row" @submit.prevent="createChannel()">
|
||||
<div class="medium-8 columns">
|
||||
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.channelName.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
|
||||
<input
|
||||
@@ -16,7 +16,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label
|
||||
v-if="useMessagingService"
|
||||
:class="{ error: $v.messagingServiceSID.$error }"
|
||||
@@ -36,7 +36,10 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="!useMessagingService" class="medium-8 columns">
|
||||
<div
|
||||
v-if="!useMessagingService"
|
||||
class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
|
||||
>
|
||||
<label :class="{ error: $v.phoneNumber.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
|
||||
<input
|
||||
@@ -67,7 +70,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.accountSID.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
|
||||
<input
|
||||
@@ -92,7 +95,7 @@
|
||||
{{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.USE_API_KEY') }}
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="useAPIKey" class="medium-8 columns">
|
||||
<div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.apiKeySID.$error }">
|
||||
{{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
|
||||
<input
|
||||
@@ -106,7 +109,7 @@
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-8 columns">
|
||||
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
|
||||
<label :class="{ error: $v.authToken.$error }">
|
||||
{{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
|
||||
<input
|
||||
@@ -123,7 +126,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 columns">
|
||||
<div class="w-full">
|
||||
<woot-submit-button
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="wizard-body columns content-box small-9">
|
||||
<div class="login-init full-height text-center">
|
||||
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
|
||||
<div class="login-init h-full text-center">
|
||||
<form @submit.prevent="requestAuthorization">
|
||||
<woot-submit-button
|
||||
icon="brand-twitter"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user