scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 03:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Dark Mode (#7471)

Browse Source
This commit is contained in:
Sivin Varghese
2023-07-21 22:10:25 +05:30
committed by GitHub
parent 480f34803b
commit 40ec0d109a
264 changed files with 2935 additions and 6817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/javascript/dashboard/assets/scss/_date-picker.scss
View File

@@ -1,66 +1,64 @@
@import '~vue2-datepicker/scss/index'; @import '~vue2-datepicker/scss/index';
.mx-datepicker-popup { .mx-datepicker-popup {
z-index: 99999; @apply z-[99999];
} }
.date-picker { .date-picker {
&.no-margin { &.no-margin {
.mx-input { .mx-input {
margin-bottom: 0; @apply mb-0;
} }
} }
&:not(.auto-width) { &:not(.auto-width) {
.mx-datepicker-range { .mx-datepicker-range {
width: 320px; @apply w-[320px];
} }
} }
.mx-datepicker { .mx-datepicker {
width: 100%; @apply w-full;
} }
.mx-input { .mx-input {
border: 1px solid var(--s-200); @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
border-radius: var(--border-radius-normal);
box-shadow: none;
display: flex;
height: 2.5rem;
} }
.mx-input:disabled, .mx-input:disabled,
.mx-input[readonly] { .mx-input[readonly] {
background-color: var(--white); @apply bg-white dark:bg-slate-900 cursor-pointer;
cursor: pointer;
} }
} }
.mx-calendar-content .cell:hover {
@apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
}
.mx-datepicker-inline { .mx-datepicker-inline {
width: 100%; @apply w-full;
.mx-calendar { .mx-calendar {
width: 100%; @apply w-full;
} }
.cell.disabled { .cell.disabled {
background-color: var(--s-25); @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
color: var(--s-200);
} }
.mx-time-item.disabled { .mx-time-item.disabled {
background-color: var(--s-25); @apply bg-slate-25 dark:bg-slate-900;
} }
.today { .today {
font-weight: var(--font-weight-bold); @apply font-semibold;
} }
.mx-datepicker-main { .mx-datepicker-main {
border: 0; @apply border-0 bg-white dark:bg-slate-800;
} }
.mx-time-header { .mx-time-header {
border: 0; @apply border-0;
} }
} }

4
app/javascript/dashboard/assets/scss/_foundation-custom.scss
View File

@@ -16,10 +16,6 @@ select {
padding: var(--space-normal); padding: var(--space-normal);
} }
.button-wrapper .button.grey-btn {
margin-left: var(--space-normal);
}
code { code {
border: 0; border: 0;
font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',

76
app/javascript/dashboard/assets/scss/_rtl.scss
View File

@@ -1,30 +1,6 @@
.app-rtl--wrapper { .app-rtl--wrapper {
direction: rtl; direction: rtl;
// Primary sidebar
.primary--sidebar {
.options-menu.dropdown-pane {
right: var(--space-smaller);
.auto-offline--toggle {
padding: var(--space-smaller) var(--space-one) var(--space-smaller)
var(--space-smaller);
}
.status-items .button {
text-align: right;
}
}
}
// Settings header
.settings-header {
.header--icon {
margin-left: var(--space-small);
margin-right: var(--space-smaller);
}
}
.header-section.back-button { .header-section.back-button {
direction: initial; direction: initial;
margin-left: var(--space-normal); margin-left: var(--space-normal);
@@ -73,23 +49,6 @@
// Conversation details // Conversation details
.conversation-details-wrap { .conversation-details-wrap {
.conv-header {
.user {
margin-left: var(--space-normal);
margin-right: unset;
.user--profile__meta {
margin-left: unset;
margin-right: var(--space-small);
}
}
.actions--container .resolve-actions {
margin-left: unset;
margin-right: var(--space-small);
}
}
.conversation-panel { .conversation-panel {
// Message text // Message text
.text-content { .text-content {
@@ -137,11 +96,6 @@
} }
} }
// Conversation sidebar toggle button
.sidebar-toggle--button {
transform: rotate(180deg);
}
// Conversation sidebar close button // Conversation sidebar close button
.close-button--rtl { .close-button--rtl {
transform: rotate(180deg); transform: rotate(180deg);
@@ -285,31 +239,6 @@
} }
} }
// scss-lint:disable SelectorDepth
.container .header-wrap .header-left-wrap .header-left-wrap > .page-title {
margin-right: var(--space-small);
}
.portal-container .container {
margin-left: unset !important;
margin-right: var(--space-small);
.configuration-items--wrap {
margin-left: var(--space-mega);
margin-right: unset !important;
}
thead th {
padding-left: var(--space-small);
padding-right: 0;
}
tbody td {
padding-left: var(--space-small);
padding-right: 0;
}
}
.portal-popover__container .portal { .portal-popover__container .portal {
.actions-container { .actions-container {
margin-left: unset; margin-left: unset;
@@ -413,11 +342,6 @@
direction: initial; direction: initial;
} }
.inbox--name .inbox--icon {
margin-left: var(--space-micro);
margin-right: 0;
}
.colorpicker--chrome { .colorpicker--chrome {
direction: initial; direction: initial;
} }

1
app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
View File

@@ -7,6 +7,7 @@
z-index: var(--z-index-very-high); z-index: var(--z-index-very-high);
&.dropdown-pane--open { &.dropdown-pane--open {
@apply bg-white dark:bg-slate-800;
display: block; display: block;
visibility: visible; visibility: visible;
} }

160
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View File

@@ -1,93 +1,86 @@
@mixin label-multiselect-hover { @mixin label-multiselect-hover {
&::after { &::after {
color: $color-primary-dark; @apply text-woot-600 dark:text-woot-600;
} }
&:hover { &:hover {
background: $color-background; @apply bg-slate-50 dark:bg-slate-700;
&::after { &::after {
color: $color-woot; @apply text-woot-500 dark:text-woot-500;
} }
} }
} }
.multiselect { .multiselect {
&:not(.no-margin) { &:not(.no-margin) {
margin-bottom: var(--space-normal); @apply mb-4;
} }
&.multiselect--disabled { &.multiselect--disabled {
opacity: 0.8; @apply opacity-80;
} }
.multiselect--active { .multiselect--active {
>.multiselect__tags { > .multiselect__tags {
border-color: var(--w-500); @apply border-woot-500 dark:border-woot-500;
} }
} }
.multiselect__select { .multiselect__select {
min-height: 2.875rem; @apply min-h-[2.875rem] p-0 right-0 top-0;
padding: 0;
right: 0;
top: 0;
&::before { &::before {
right: 0; @apply right-0;
} }
} }
.multiselect__content-wrapper {
@apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
}
.multiselect__content { .multiselect__content {
max-width: 100%; @apply max-w-full;
.multiselect__option { .multiselect__option {
font-size: $font-size-small; @apply text-sm font-normal;
font-weight: $font-weight-normal;
span { span {
display: inline-block; @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: fit-content;
} }
p { p {
margin-bottom: 0; @apply mb-0;
} }
&.multiselect__option--highlight { &.multiselect__option--highlight {
background: var(--white); @apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
color: var(--color-body);
} }
&.multiselect__option--highlight:hover { &.multiselect__option--highlight:hover {
background: var(--w-50); @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
color: var(--color-body);
&::after { &::after {
background: var(--w-50); @apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
color: var(--s-600);
} }
} }
&.multiselect__option--highlight::after { &.multiselect__option--highlight::after {
background: transparent; @apply bg-transparent;
} }
&.multiselect__option--selected { &.multiselect__option--selected {
background: var(--w-75); @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
&.multiselect__option--highlight:hover { &.multiselect__option--highlight:hover {
background: var(--w-75); @apply bg-woot-75 dark:bg-woot-600;
&::after { &::after {
background: transparent; @apply bg-transparent;
} }
&::after:hover { &::after:hover {
color: var(--color-body); @apply text-slate-800 dark:text-slate-100;
} }
} }
} }
@@ -95,175 +88,130 @@
} }
.multiselect__tags { .multiselect__tags {
border: 1px solid var(--s-200); @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
border-color: var(--s-200);
margin: 0;
min-height: 2.75rem;
padding-top: $zero;
} }
.multiselect__tags-wrap { .multiselect__tags-wrap {
display: inline-block; @apply inline-block leading-none mt-1;
line-height: 1;
margin-top: $space-smaller;
} }
.multiselect__placeholder { .multiselect__placeholder {
color: $color-gray; @apply text-slate-400 dark:text-slate-400 font-normal pt-3;
font-weight: $font-weight-normal;
padding-top: var(--space-slab);
} }
.multiselect__tag { .multiselect__tag {
$vertical-space: $space-smaller + $space-micro; @apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
background: $color-background;
color: $color-heading;
margin-top: $space-smaller;
padding: $vertical-space $space-medium $vertical-space $space-one;
} }
.multiselect__tag-icon { .multiselect__tag-icon {
@include label-multiselect-hover; @include label-multiselect-hover;
line-height: $space-medium + $space-micro;
} }
.multiselect__input { .multiselect__input {
@include ghost-input; @include ghost-input;
font-size: $font-size-small; @apply text-sm h-[2.875rem] mb-0 p-0;
height: 2.75rem;
margin-bottom: $zero;
padding: 0;
} }
.multiselect__single { .multiselect__single {
@include text-ellipsis; @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
display: inline-block;
margin-bottom: 0;
padding: var(--space-slab) var(--space-one);
} }
} }
.sidebar-labels-wrap { .sidebar-labels-wrap {
&.has-edited, &.has-edited,
&:hover { &:hover {
.multiselect { .multiselect {
cursor: pointer; @apply cursor-pointer;
} }
} }
.multiselect { .multiselect {
>.multiselect__select { > .multiselect__select {
visibility: hidden; @apply invisible;
} }
>.multiselect__tags { > .multiselect__tags {
border-color: transparent; @apply border-transparent;
} }
&.multiselect--active>.multiselect__tags { &.multiselect--active > .multiselect__tags {
border-color: $color-woot; @apply border-woot-500 dark:border-woot-500;
} }
} }
} }
.multiselect-wrap--small { .multiselect-wrap--small {
$multiselect-height: 2.5rem;
.multiselect__tags, .multiselect__tags,
.multiselect__input { .multiselect__input {
align-items: center; @apply items-center flex;
display: flex;
} }
.multiselect__tags, .multiselect__tags,
.multiselect__input, .multiselect__input,
.multiselect { .multiselect {
background: var(--white); @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm h-10 min-h-[2.5rem];
font-size: var(--font-size-small);
height: $multiselect-height;
min-height: $multiselect-height;
} }
.multiselect__input { .multiselect__input {
height: $multiselect-height - $space-micro; @apply h-[2.375rem] min-h-[2.375rem];
min-height: $multiselect-height - $space-micro;
} }
.multiselect__single { .multiselect__single {
align-items: center; @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-1 px-0.5;
display: flex;
font-size: var(--font-size-small);
margin: 0;
max-height: 2.375rem;
padding: var(--space-smaller) var(--space-micro);
} }
.multiselect__placeholder { .multiselect__placeholder {
margin: 0; @apply m-0 py-1 px-0.5;
padding: var(--space-smaller) var(--space-micro);
} }
.multiselect__select { .multiselect__select {
min-height: $multiselect-height; @apply min-h-[2.5rem];
} }
.multiselect--disabled .multiselect__current, .multiselect--disabled .multiselect__current,
.multiselect--disabled .multiselect__select { .multiselect--disabled .multiselect__select {
background: transparent; @apply bg-transparent;
} }
.multiselect__tags-wrap { .multiselect__tags-wrap {
flex-shrink: 0; @apply flex-shrink-0;
} }
} }
.multiselect-wrap--medium { .multiselect-wrap--medium {
$multiselect-height: 3rem;
.multiselect__tags, .multiselect__tags,
.multiselect__input { .multiselect__input {
align-items: center; @apply items-center flex;
display: flex;
} }
.multiselect__tags, .multiselect__tags,
.multiselect__input, .multiselect__input,
.multiselect { .multiselect {
background: var(--white); @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
font-size: var(--font-size-small);
height: $multiselect-height;
min-height: $multiselect-height;
} }
.multiselect__input { .multiselect__input {
height: $multiselect-height - $space-micro; @apply h-[2.875rem] min-h-[2.875rem];
min-height: $multiselect-height - $space-micro;
} }
.multiselect__single { .multiselect__single {
align-items: center; @apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
display: flex;
font-size: var(--font-size-small);
margin: 0;
padding: var(--space-smaller) var(--space-micro);
} }
.multiselect__placeholder { .multiselect__placeholder {
margin: 0; @apply m-0 py-1 px-0.5;
padding: var(--space-smaller) var(--space-micro);
} }
.multiselect__select { .multiselect__select {
min-height: $multiselect-height; @apply min-h-[3rem];
} }
.multiselect--disabled .multiselect__current, .multiselect--disabled .multiselect__current,
.multiselect--disabled .multiselect__select { .multiselect--disabled .multiselect__select {
background: transparent; @apply bg-transparent;
} }
.multiselect__tags-wrap { .multiselect__tags-wrap {
flex-shrink: 0; @apply flex-shrink-0;
} }
} }

109
app/javascript/dashboard/assets/scss/views/settings/inbox.scss
View File

@@ -1,171 +1,112 @@
.settings { .settings {
overflow: auto; @apply overflow-auto;
}
// Conversation header - Light BG
.settings-header {
@include flex;
@include flex-align($x: justify, $y: middle);
height: $header-height;
min-height: $header-height;
padding: $space-small $space-normal;
// Resolve Button
.button {
margin: 0;
}
// User thumbnail and text
.page-title {
@include flex;
@include flex-align($x: center, $y: middle);
margin: 0;
}
} }
.wizard-box { .wizard-box {
.item { .item {
// @include background-light; @apply cursor-pointer py-4 pr-4 pl-6 relative;
cursor: pointer;
padding: $space-normal $space-normal $space-normal $space-medium;
position: relative;
&::before, &::before,
&::after { &::after {
background: $color-border; @apply bg-slate-75 dark:bg-slate-600 content-[''] h-full absolute top-5 w-0.5;
content: '';
height: 100%;
position: absolute;
top: $space-normal;
width: 2px;
} }
&::before { &::before {
height: $space-normal; @apply h-4 top-0;
top: $zero;
} }
&:first-child { &:first-child {
&::before { &::before {
height: 0; @apply h-0;
} }
} }
&:last-child { &:last-child {
&::after { &::after {
height: $zero; @apply h-0;
} }
} }
&.active { &.active {
h3 { h3 {
color: $color-woot; @apply text-woot-500 dark:text-woot-500;
} }
.step { .step {
background: $color-woot; @apply bg-woot-500 dark:bg-woot-500;
} }
} }
&.over { &.over {
&::after { &::after {
background: $color-woot; @apply bg-woot-500 dark:bg-woot-500;
} }
.step { .step {
background: $color-woot; @apply bg-woot-500 dark:bg-woot-500;
} }
& + .item { & + .item {
&::before { &::before {
background: $color-woot; @apply bg-woot-500 dark:bg-woot-500;
} }
} }
} }
h3 { h3 {
color: $color-body; @apply text-slate-800 dark:text-slate-100 text-base pl-6;
font-size: $font-size-default;
line-height: 1;
padding-left: $space-medium;
} }
.completed { .completed {
color: $success-color; @apply text-green-500 dark:text-green-500 ml-1;
margin-left: $space-smaller;
} }
p { p {
color: $color-light-gray; @apply text-slate-600 dark:text-slate-300 text-sm m-0 pl-6;
font-size: $font-size-small;
margin: 0;
padding-left: $space-medium;
} }
.step { .step {
background: $color-border; @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
border-radius: 20px;
color: $color-white;
font-size: $font-size-micro;
font-weight: $font-weight-medium;
height: $space-normal;
left: $space-normal;
line-height: $space-normal;
position: absolute;
text-align: center;
top: $space-normal;
width: $space-normal;
z-index: 999;
i { i {
font-size: $font-size-micro; @apply text-xxs;
} }
} }
} }
} }
.wizard-body { .wizard-body {
@include border-light; @apply border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6;
@include background-white;
@include full-height();
padding: $space-medium;
&.height-auto { &.height-auto {
height: auto; @apply h-auto;
} }
} }
.settings--content { .settings--content {
margin: $space-small $space-large; @apply my-2 mx-8;
.title { .title {
font-weight: $font-weight-medium; @apply font-medium;
} }
.code { .code {
background: $color-background; @apply bg-slate-50 dark:bg-slate-800 overflow-auto p-2.5 whitespace-nowrap;
max-height: $space-mega;
overflow: auto;
padding: $space-one;
white-space: nowrap;
code { code {
background: transparent; @apply bg-transparent border-0;
border: 0;
} }
} }
} }
.login-init { .login-init {
padding-top: 30%; @apply pt-[30%] text-center;
text-align: center;
p { p {
padding: $space-medium; @apply p-6;
} }
> a > img { > a > img {
width: $space-larger * 5; @apply w-60;
} }
} }

42
app/javascript/dashboard/assets/scss/views/settings/integrations.scss
View File

@@ -1,41 +1 @@
.integrations-wrap { // to be removed
.integration {
background: $color-white;
border: 1px solid $color-border;
border-radius: $space-smaller;
margin-bottom: $space-normal;
padding: $space-normal;
.integration--image {
display: flex;
height: 6.25rem;
width: 6.25rem;
img {
max-width: 100%;
padding: $space-medium;
}
}
.integration--type {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 var(--space-normal);
}
.integration--title {
font-size: var(--font-size-large);
}
.button-wrap {
@include flex;
@include flex-align(center, middle);
margin-bottom: 0;
}
}
}
.help-wrap {
padding-left: $space-large;
}

12
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View File

@@ -42,10 +42,10 @@
} }
&.hollow { &.hollow {
@apply border border-slate-200 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900; @apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
&.secondary { &.secondary {
@apply text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700; @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
} }
&.success { &.success {
@@ -98,7 +98,7 @@
} }
&.warning { &.warning {
@apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-200 dark:hover:bg-yellow-200; @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
} }
} }
@@ -118,11 +118,11 @@
} }
&.warning { &.warning {
@apply text-yellow-700 dark:text-yellow-100; @apply text-yellow-700 dark:text-yellow-700;
} }
&:hover { &:hover {
@apply hover:bg-woot-50 dark:hover:bg-woot-300; @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
&.secondary { &.secondary {
@apply hover:bg-slate-50 dark:hover:bg-slate-700; @apply hover:bg-slate-50 dark:hover:bg-slate-700;
@@ -137,7 +137,7 @@
} }
&.warning { &.warning {
@apply hover:bg-yellow-50 dark:hover:bg-yellow-800; @apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
} }
} }

67
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View File

@@ -1,66 +1 @@
$resolve-button-width: 8.25rem; // File to be removed
// Conversation header - Light BG
.conv-header {
@include background-white;
@include flex;
@include flex-align($x: justify, $y: middle);
@include border-normal-bottom;
padding: var(--space-small) var(--space-normal);
.multiselect-box {
@include flex;
@include flex-align($x: justify, $y: middle);
border: 1px solid var(--color-border);
border-radius: var(--space-smaller);
margin-right: var(--space-small);
width: 13.5rem;
.icon {
color: $medium-gray;
font-size: $font-size-default;
line-height: 2.375rem;
padding-left: $space-slab;
padding-right: $space-smaller;
}
.multiselect {
border-radius: var(--border-radius-small);
margin: 0;
min-width: 0;
.multiselect__tags {
border-color: transparent;
}
}
}
// User thumbnail and text
.user {
@include flex;
@include flex-align($x: center, $y: middle);
margin-right: var(--space-normal);
min-width: 0;
.user--profile__meta {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: var(--space-small);
min-width: 0;
}
}
}
.header-actions-wrap {
align-items: center;
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
&.has-open-sidebar {
justify-content: flex-end;
}
}

107
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View File

@@ -10,114 +10,7 @@
} }
.conversation { .conversation {
@include flex;
@include flex-shrink;
border-left: var(--space-micro) solid transparent;
cursor: pointer;
padding: 0 var(--space-normal);
position: relative;
&.active { &.active {
animation: left-shift-animation 0.25s $swift-ease-out-function; animation: left-shift-animation 0.25s $swift-ease-out-function;
background: var(--color-background);
border-left-color: var(--color-woot);
}
.conversation--details {
padding: var(--space-slab) 0;
}
.conversation--user {
font-size: var(--font-size-small);
margin: 0 var(--space-small);
text-transform: capitalize;
.label {
left: var(--space-one);
max-width: var(--space-jumbo);
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: var(--space-one);
white-space: nowrap;
}
}
.conversation--message {
color: var(--color-body);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
height: var(--space-medium);
line-height: var(--space-medium);
margin: 0 var(--space-small);
max-width: 96%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 16.875rem;
img,
svg {
display: inline-block;
}
}
.conversation--meta {
@include flex;
flex-direction: column;
position: absolute;
right: var(--space-normal);
top: var(--space-normal);
.unread {
@include round-corner;
@include light-shadow;
background: darken($success-color, 3%);
color: var(--white);
display: none;
font-size: var(--font-size-micro);
font-weight: var(--font-weight-black);
height: var(--space-normal);
line-height: var(--space-normal);
margin-left: auto;
margin-top: var(--space-smaller);
min-width: var(--space-normal);
padding: 0 var(--space-smaller);
text-align: center;
}
.timestamp {
color: $dark-gray;
font-size: var(--font-size-micro);
font-weight: var(--font-weight-normal);
line-height: var(--space-normal);
margin-left: auto;
}
}
&.unread-chat {
.unread {
display: inline-block;
}
.conversation--message {
font-weight: var(--font-weight-bold);
}
.conversation--user {
font-weight: var(--font-weight-bold);
}
}
&.compact {
padding-left: 0;
.conversation--details {
border-radius: var(--border-radius-small);
margin-left: 0;
padding-left: var(--space-two);
padding-right: var(--space-small);
}
} }
} }

292
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View File

@@ -1,352 +1,211 @@
// scss-lint:disable MergeableSelector // scss-lint:disable MergeableSelector
@mixin bubble-with-types { @mixin bubble-with-types {
padding: $space-small $space-normal; @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
margin: 0;
background: $color-woot;
border-radius: $space-one;
color: var(--white);
font-size: $font-size-small;
font-weight: $font-weight-normal;
position: relative;
.message-text__wrap { .message-text__wrap {
position: relative; @apply relative;
.link { .link {
color: var(--white); @apply text-white dark:text-white underline;
text-decoration: underline;
} }
} }
.image, .image,
.video { .video {
cursor: pointer; @apply cursor-pointer relative;
position: relative;
.modal-container { .modal-container {
text-align: center; @apply text-center;
} }
.modal-image { .modal-image {
max-height: 76vh; @apply max-h-[76vh] max-w-[76vw];
max-width: 76vw;
} }
.modal-video { .modal-video {
max-height: 76vh; @apply max-h-[76vh] max-w-[76vw];
max-width: 76vw;
} }
&::before { &::before {
background-image: linear-gradient( @apply bg-gradient-to-t from-transparent via-transparent to-slate-800 bg-repeat bg-clip-border bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
-180deg,
transparent 3%,
$color-heading 130%
);
bottom: 0;
content: '';
height: 20%;
left: 0;
opacity: 0.8;
position: absolute;
width: 100%;
} }
} }
} }
.conversations-list-wrap {
@include flex;
border-right: 1px solid var(--s-50);
flex-direction: column;
.load-more-conversations {
font-size: $font-size-small;
margin: 0;
padding: $space-normal;
width: 100%;
}
.end-of-list-text {
padding: $space-normal;
}
.conversations-list {
flex: 1 1;
overflow-y: auto;
@include breakpoint(large up) {
@include scroll-on-hover;
}
}
.chat-list__top {
@include flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-normal);
}
.content-box {
text-align: center;
}
}
.conversation-panel { .conversation-panel {
@include flex; @apply flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4;
flex: 1 1 1px;
flex-direction: column;
height: 100%;
margin: 0;
overflow-y: auto;
padding-bottom: var(--space-normal);
position: relative;
} }
.conversation-panel > li { .conversation-panel > li {
@include flex; @apply flex flex-shrink-0 flex-grow-0 flex-auto max-w-full mt-0 mr-0 mb-1 ml-0 relative first:mt-auto last:mb-0;
@include flex-shrink;
margin: $zero $zero $space-micro;
position: relative;
&:first-child {
margin-top: auto;
}
&:last-child {
margin-bottom: 0;
}
&.unread--toast { &.unread--toast {
+ .right { + .right {
margin-bottom: var(--space-micro); @apply mb-1;
} }
+ .left { + .left {
margin-bottom: 0; @apply mb-0;
} }
span { span {
@include elegant-card; @apply shadow-lg rounded-full bg-woot-500 dark:bg-woot-500 text-white dark:text-white text-xs font-medium my-2.5 mx-auto px-2.5 py-1.5;
@include round-corner;
background: $color-woot;
color: var(--white);
font-size: $font-size-mini;
font-weight: $font-weight-medium;
margin: $space-one auto;
padding: $space-smaller $space-two;
} }
} }
.bubble { .bubble {
@include bubble-with-types; @include bubble-with-types;
text-align: left; @apply text-left break-words;
word-wrap: break-word;
.aplayer { .aplayer {
box-shadow: none; @apply shadow-none;
font-family: inherit; font-family: inherit;
} }
} }
&.left { &.left {
.bubble { .bubble {
@include border-normal; @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 rounded-r-lg rounded-l mr-auto break-words;
background: $white;
border-bottom-left-radius: $space-smaller;
border-top-left-radius: $space-smaller;
color: $color-body;
margin-right: auto;
word-break: break-word;
&.is-image { &.is-image {
border-radius: var(--border-radius-large); @apply rounded-lg;
} }
.link { .link {
color: $color-primary-dark; @apply text-woot-600 dark:text-woot-600;
} }
.file { .file {
.text-block-title { .text-block-title {
color: $color-body; @apply text-slate-700 dark:text-woot-300;
} }
.icon-wrap { .icon-wrap {
color: $color-woot; @apply text-woot-600 dark:text-woot-600;
} }
.download { .download {
color: $color-primary-dark; @apply text-woot-600 dark:text-woot-600;
} }
} }
} }
+ .right { + .right {
margin-top: $space-one; @apply mt-2.5;
.bubble { .bubble {
border-top-right-radius: $space-one; @apply rounded-tr-lg;
} }
} }
+ .unread--toast { + .unread--toast {
+ .right { + .right {
margin-top: $space-one; @apply mt-2.5;
.bubble { .bubble {
border-top-right-radius: $space-one; @apply rounded-tr-lg;
} }
} }
+ .left { + .left {
margin-top: 0; @apply mt-0;
} }
} }
} }
&.right { &.right {
@include flex-align(right, null); @apply justify-end;
.wrap { .wrap {
align-items: flex-end; @apply flex items-end mr-4 text-right;
display: flex;
margin-right: $space-normal;
text-align: right;
.sender--info { .sender--info {
padding: var(--space-small) 0 var(--space-smaller) var(--space-small); @apply pt-2 pb-1 pr-0 pl-2;
} }
} }
.bubble { .bubble {
border-bottom-right-radius: $space-smaller; @apply ml-auto break-words rounded-l-lg rounded-r;
border-top-right-radius: $space-smaller;
margin-left: auto;
word-break: break-word;
&.is-private { &.is-private {
background: lighten($warning-color, 32%); @apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
border: 1px solid lighten($warning-color, 15%);
color: $color-heading;
position: relative;
&::before {
bottom: 0;
color: $medium-gray;
position: absolute;
right: $space-one;
top: $space-smaller + $space-micro;
}
} }
&.is-image { &.is-image {
border-radius: var(--border-radius-large); @apply rounded-lg;
} }
} }
+ .left { + .left {
margin-top: $space-one; @apply mt-2.5;
.bubble { .bubble {
border-top-left-radius: $space-one; @apply rounded-tl-lg;
} }
} }
+ .unread--toast { + .unread--toast {
+ .left { + .left {
margin-top: $space-one; @apply rounded-lg;
.bubble { .bubble {
border-top-left-radius: $space-one; @apply rounded-tl-lg;
} }
} }
+ .right { + .right {
margin-top: 0; @apply mt-0;
} }
} }
} }
&.center { &.center {
justify-content: center; @apply items-center justify-center;
} }
.wrap { .wrap {
--bubble-max-width: 31rem; max-width: Min(31rem, 84%);
margin: $zero $space-normal; @apply my-0 mx-4;
max-width: Min(var(--bubble-max-width), 84%);
.sender--name { .sender--name {
font-size: $font-size-mini; @apply text-xs mb-1;
margin-bottom: $space-smaller;
} }
} }
.sender--thumbnail { .sender--thumbnail {
@include round-corner(); @apply h-3 mr-3 mt-0.5 w-3 rounded-full;
height: $space-slab;
margin-right: $space-one;
margin-top: $space-micro;
width: $space-slab;
} }
.activity-wrap { .activity-wrap {
background: var(--s-50); @apply flex justify-center text-sm my-1 mx-0 py-1 pr-0.5 pl-2.5 bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded-md border border-slate-100 dark:border-slate-600 border-solid;
border: 1px solid var(--s-100);
border-radius: var(--border-radius-medium);
display: flex;
font-size: var(--font-size-small);
justify-content: center;
margin: var(--space-smaller) 0;
padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
var(--space-one);
.is-text { .is-text {
align-items: center; @apply inline-flex items-center text-start 2xl:flex;
display: inline-flex;
text-align: start;
@include breakpoint(xxxlarge up) {
display: flex;
}
} }
} }
} }
.activity-wrap .message-text__wrap { .activity-wrap .message-text__wrap {
.text-content p { .text-content p {
margin-bottom: 0; @apply mb-0;
} }
} }
.conversation-footer { .conversation-footer {
display: flex; @apply flex relative flex-col;
flex-direction: column;
position: relative;
} }
.typing-indicator-wrap { .typing-indicator-wrap {
align-items: center; @apply items-center flex h-0 absolute w-full -top-8;
display: flex;
height: 0;
position: absolute;
top: -$space-large;
width: 100%;
.typing-indicator { .typing-indicator {
@include elegant-card; @include elegant-card;
@include round-corner; @include round-corner;
background: var(--white); @apply py-2 pr-4 pl-5 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto;
color: $color-light-gray;
font-size: $font-size-mini;
font-weight: $font-weight-bold;
margin: $space-one auto;
padding: $space-small $space-normal $space-small $space-two;
.gif { .gif {
margin-left: $space-small; @apply ml-2 w-6;
width: $space-medium;
} }
} }
} }
@@ -358,16 +217,15 @@
h4, h4,
h5, h5,
h6 { h6 {
color: var(--color-body); @apply text-slate-800 dark:text-slate-100;
} }
a { a {
color: var(--color-woot); @apply text-woot-500 dark:text-woot-500 underline;
text-decoration: underline;
} }
p:last-child { p:last-child {
margin-bottom: 0; @apply mb-0;
} }
} }
@@ -378,54 +236,14 @@
h4, h4,
h5, h5,
h6 { h6 {
color: var(--white); @apply text-white dark:text-white;
} }
a { a {
color: var(--white); @apply text-white dark:text-white underline;
text-decoration: underline;
} }
p:last-child { p:last-child {
margin-bottom: 0; @apply mb-0;
}
}
.conversation-sidebar-wrap {
flex: 0 0;
flex-basis: 100%;
height: auto;
overflow: auto;
z-index: var(--z-index-low);
@include breakpoint(medium up) {
flex-basis: 17.5rem;
}
@include breakpoint(large up) {
flex-basis: 18.75rem;
}
@include breakpoint(xlarge up) {
flex-basis: 19.375rem;
}
@include breakpoint(xxlarge up) {
flex-basis: 20.625rem;
}
@include breakpoint(xxxlarge up) {
flex-basis: 25rem;
}
}
.activity-wrap {
.message-text--metadata {
.time {
@include breakpoint(xlarge up) {
margin-left: var(--space-small);
}
}
} }
} }

49
app/javascript/dashboard/assets/scss/widgets/_forms.scss
View File

@@ -1,5 +1,29 @@
// scss-lint:disable QualifyingElement // scss-lint:disable QualifyingElement
label {
@apply text-slate-800 dark:text-slate-200;
}
textarea {
@apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
}
input {
@apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
&[disabled] {
@apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600;
}
}
input[type='file'] {
@apply bg-white dark:bg-slate-800;
}
select {
@apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
}
.error { .error {
input[type='color'], input[type='color'],
input[type='date'], input[type='date'],
@@ -19,17 +43,11 @@
textarea, textarea,
select, select,
.multiselect > .multiselect__tags { .multiselect > .multiselect__tags {
@include thin-border(var(--r-400)); @apply border border-solid border-red-400 dark:border-red-400;
} }
.message { .message {
color: var(--r-400); @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
display: block;
font-size: var(--font-size-small);
font-weight: $font-weight-normal;
margin-bottom: $space-one;
margin-top: -$space-normal;
width: 100%;
} }
} }
@@ -42,26 +60,19 @@ input {
} }
.input-wrap { .input-wrap {
color: $color-heading; @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
font-size: $font-size-small;
font-weight: $font-weight-medium;
} }
.help-text { .help-text {
font-weight: $font-weight-normal; @apply font-normal text-slate-600 dark:text-slate-400;
} }
.input-group.small { .input-group.small {
input { input {
font-size: var(--font-size-small); @apply text-sm h-8;
height: var(--space-large);
} }
.error { .error {
border-color: var(--r-400); @apply border-red-400 dark:border-red-400;
} }
} }
label {
@apply dark:text-slate-300;
}

81
app/javascript/dashboard/assets/scss/widgets/_modal.scss
View File

@@ -1,116 +1,79 @@
@import '~dashboard/assets/scss/variables';
@import '~dashboard/assets/scss/mixins';
.modal-mask { .modal-mask {
@include flex; // @include flex;
@include flex-align(center, middle); // @include flex-align(center, middle);
background-color: $masked-bg; @apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9990;
} }
.modal--close { .modal--close {
position: absolute; @apply absolute right-2 rtl:right-[unset] rtl:left-2 top-2;
right: $space-small;
top: $space-small;
&:hover {
background: $color-background;
}
} }
.page-top-bar { .page-top-bar {
padding: $space-large $space-large $zero; @apply px-8 pt-9 pb-0;
img { img {
max-height: 3.75rem; @apply max-h-[3.75rem];
} }
} }
.modal-container { .modal-container {
@include normal-shadow; @apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem];
border-radius: $space-smaller;
max-height: 100%;
overflow: auto;
position: relative;
width: 37.5rem;
&.medium { &.medium {
max-width: 80%; @apply max-w-[80%] w-[56.25rem];
width: 56.25rem;
} }
.content-box { .content-box {
height: auto; @apply h-auto p-0;
padding: 0;
} }
h2 { h2 {
color: $color-heading; @apply text-slate-800 dark:text-slate-100 text-lg font-semibold;
font-size: $font-size-medium;
font-weight: $font-weight-bold;
} }
p { p {
font-size: $font-size-small; @apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300;
margin: 0;
padding: 0;
} }
.content { .content {
padding: $space-large; @apply p-8;
} }
form, form,
.modal-content { .modal-content {
align-self: center; @apply pt-4 pb-8 px-8 self-center;
padding: $space-large;
a { a {
padding: $space-normal; @apply p-4;
} }
} }
.modal-footer { .modal-footer {
@include flex; // @include flex;
@include flex-align($x: flex-end, $y: middle); // @include flex-align($x: flex-end, $y: middle);
padding: $space-small $zero; @apply flex justify-end items-center py-2 px-0 gap-2;
.button {
margin-left: var(--space-small);
}
&:first-child {
.button {
margin-left: 0;
}
}
&.justify-content-end { &.justify-content-end {
justify-content: end; @apply justify-end;
} }
} }
.delete-item { .delete-item {
padding: $space-large; @apply p-8;
button { button {
margin: 0; @apply m-0;
} }
} }
} }
.modal-enter, .modal-enter,
.modal-leave { .modal-leave {
opacity: 0; @apply opacity-0;
} }
.modal-enter .modal-container, .modal-enter .modal-container,
.modal-leave .modal-container { .modal-leave .modal-container {
transform: scale(1.1); transform: scale(1.1);
// @apply transform scale-110;
} }

28
app/javascript/dashboard/assets/scss/widgets/_states.scss
View File

@@ -1,27 +1 @@
// To be removed
// EMPTY STATES
.empty-state {
padding: $space-jumbo $space-smaller;
.title,
.message {
display: block;
text-align: center;
width: 100%;
}
.title {
font-size: $font-size-giga;
font-weight: $font-weight-feather;
}
.message {
color: $color-gray;
margin: $space-normal auto;
width: 90%;
}
.button {
margin-top: $space-medium;
}
}

61
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
View File

@@ -1,100 +1,69 @@
.tabs--container { .tabs--container {
display: flex; @apply flex;
} }
.tabs--container--with-border { .tabs--container--with-border {
@include border-normal-bottom; @apply border-b border-slate-50 dark:border-slate-800/50;
} }
.tabs { .tabs {
border-left-width: 0; @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
border-right-width: 0;
border-top-width: 0;
display: flex;
min-width: var(--space-mega);
padding: 0 var(--space-normal);
} }
.tabs--with-scroll { .tabs--with-scroll {
@apply overflow-hidden py-0 px-1;
max-width: calc(100% - 64px); max-width: calc(100% - 64px);
overflow: hidden;
padding: 0 var(--space-smaller);
} }
.tabs--scroll-button { .tabs--scroll-button {
align-items: center; @apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
border-radius: 0;
cursor: pointer;
display: flex;
height: auto;
justify-content: center;
min-width: var(--space-large);
} }
// Tab chat type // Tab chat type
.tab--chat-type { .tab--chat-type {
@include flex; @apply flex;
.tabs-title { .tabs-title {
a { a {
font-size: var(--font-size-default); @apply text-base font-medium py-3;
font-weight: var(--font-weight-medium);
padding-bottom: var(--space-slab);
padding-top: var(--space-slab);
} }
} }
} }
.tabs-title { .tabs-title {
flex-shrink: 0; @apply flex-shrink-0 my-0 mx-2;
margin: 0 var(--space-small);
.badge { .badge {
background: var(--color-background); @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
border-radius: var(--space-small);
color: var(--color-gray);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-black);
margin: 0 var(--space-smaller);
padding: var(--space-smaller);
} }
&:first-child { &:first-child {
margin-left: 0; @apply ml-0;
} }
&:last-child { &:last-child {
margin-right: 0; @apply mr-0;
} }
&:hover, &:hover,
&:focus { &:focus {
a { a {
color: darken($medium-gray, 20%); @apply text-slate-800 dark:text-slate-100;
} }
} }
a { a {
align-items: center; @apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
border-bottom: 2px solid transparent;
color: $medium-gray;
display: flex;
flex-direction: row;
font-size: var(--font-size-small);
position: relative;
top: 1px;
transition: border-color 0.15s $swift-ease-out-function; transition: border-color 0.15s $swift-ease-out-function;
} }
&.is-active { &.is-active {
a { a {
border-bottom-color: var(--color-woot); @apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
color: var(--color-woot);
} }
.badge { .badge {
background: $color-extra-light-blue; @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
color: var(--color-woot);
} }
} }
} }

64
app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
View File

@@ -1,20 +1,19 @@
table { table {
border-spacing: 0; @apply border-spacing-0 text-sm;
font-size: var(--font-size-small);
thead { thead {
th { th {
@apply font-medium text-left uppercase text-slate-900 dark:text-slate-200; @apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200;
} }
} }
tbody { tbody {
tr { tr {
@apply border-b border-slate-50 dark:border-slate-700; @apply border-b border-slate-50 dark:border-slate-800/30;
} }
td { td {
padding: var(--space-small); @apply p-2.5 text-slate-700 dark:text-slate-100;
} }
} }
} }
@@ -22,37 +21,68 @@ table {
.woot-table { .woot-table {
tr { tr {
.show-if-hover { .show-if-hover {
opacity: 0;
transition: opacity 0.2s $swift-ease-out-function; transition: opacity 0.2s $swift-ease-out-function;
@apply opacity-0;
} }
&:hover { &:hover {
.show-if-hover { .show-if-hover {
opacity: 1; @apply opacity-100;
} }
} }
} }
.agent-name { .agent-name {
display: block; @apply block font-medium capitalize;
font-weight: var(--font-weight-medium);
text-transform: capitalize;
} }
.woot-thumbnail { .woot-thumbnail {
border-radius: 50%; @apply rounded-full h-[3.125rem] w-[3.125rem];
height: 3.125rem;
width: 3.125rem;
} }
.button-wrapper { .button-wrapper {
@include flex-align(left, null); @apply flex justify-start flex-row min-w-[12.5rem] gap-1;
@include flex;
flex-direction: row;
min-width: 12.5rem;
} }
.button { .button {
margin: 0; margin: 0;
} }
} }
.ve-table {
.ve-table-container.ve-table-border-around {
@apply border-slate-200 dark:border-slate-700;
}
.ve-table-content {
.ve-table-header .ve-table-header-tr .ve-table-header-th {
@apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700/50;
}
.ve-table-body .ve-table-body-tr .ve-table-body-td {
@apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-75 dark:border-slate-800;
}
.ve-table-body.ve-table-row-hover .ve-table-body-tr:hover td {
@apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
}
}
}
.table-pagination {
.ve-pagination-total {
@apply text-slate-600 dark:text-slate-200;
}
.ve-pagination-goto {
@apply text-slate-600 dark:text-slate-200;
}
.ve-pagination-li {
@apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
}
.ve-pagination-goto-input {
@apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
}
}

87
app/javascript/dashboard/components/Accordion/AccordionItem.vue
View File

@@ -1,15 +1,20 @@
<template> <template>
<div class="cw-accordion"> <div class="-mt-px text-sm">
<button class="cw-accordion--title drag-handle" @click="$emit('click')"> <button
<div class="cw-accordion--title-wrap"> class="flex items-center select-none w-full bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
<emoji-or-icon class="icon-or-emoji" :icon="icon" :emoji="emoji" /> @click="$emit('click')"
<h5> >
<div class="flex justify-between mb-0.5">
<emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
<h5
class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
>
{{ title }} {{ title }}
</h5> </h5>
</div> </div>
<div class="button-icon--wrap"> <div class="flex flex-row">
<slot name="button" /> <slot name="button" />
<div class="chevron-icon__wrap"> <div class="flex justify-end w-3 text-woot-500">
<fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" /> <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
<fluent-icon v-else size="24" icon="add" type="solid" /> <fluent-icon v-else size="24" icon="add" type="solid" />
</div> </div>
@@ -17,8 +22,8 @@
</button> </button>
<div <div
v-if="isOpen" v-if="isOpen"
class="cw-accordion--content" class="bg-white dark:bg-slate-900"
:class="{ compact: compact }" :class="compact ? 'p-0' : 'p-4'"
> >
<slot /> <slot />
</div> </div>
@@ -56,67 +61,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.cw-accordion {
// This is done to fix contact sidebar border issues
// If you are using it else, find a fix to remove this hack
margin-top: -1px;
font-size: var(--font-size-small);
}
.cw-accordion--title {
align-items: center;
background: var(--s-50);
border-bottom: 1px solid var(--s-100);
border-top: 1px solid var(--s-100);
cursor: grab;
display: flex;
justify-content: space-between;
margin: 0;
padding: var(--space-small) var(--space-normal);
user-select: none;
width: 100%;
h5 {
font-size: var(--font-size-normal);
margin-bottom: 0;
padding: 0 var(--space-small) 0 0;
}
}
.cw-accordion--title-wrap {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-micro);
}
.title-icon__wrap {
display: flex;
align-items: baseline;
}
.icon-or-emoji {
display: inline-block;
width: var(--space-two);
}
.button-icon--wrap {
display: flex;
flex-direction: row;
}
.chevron-icon__wrap {
display: flex;
justify-content: flex-end;
width: var(--space-slab);
color: var(--w-500);
}
.cw-accordion--content {
padding: var(--space-normal);
&.compact {
padding: 0;
}
}
</style>

41
app/javascript/dashboard/components/ChannelSelector.vue
View File

@@ -1,5 +1,8 @@
<template> <template>
<button class="small-6 medium-4 large-3 channel" @click="$emit('click')"> <button
class="sm:w-[50%] md:w-[34%] lg:w-[25%] channel"
@click="$emit('click')"
>
<img :src="src" :alt="title" /> <img :src="src" :alt="title" />
<h3 class="channel__title"> <h3 class="channel__title">
{{ title }} {{ title }}
@@ -24,44 +27,36 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.inactive { .inactive {
filter: grayscale(100%); img {
filter: grayscale(100%);
}
&.channel:hover {
@apply border-transparent shadow-none cursor-not-allowed;
}
} }
.channel { .channel {
background: var(--white); @apply bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800;
border: 1px solid var(--color-border-light);
cursor: pointer;
display: flex;
flex-direction: column;
margin: -1px;
padding: var(--space-normal) 0;
transition: all 0.2s ease-in;
align-items: center;
&:hover { &:hover {
border: 1px solid var(--w-500); @apply border-woot-500 dark:border-woot-500 shadow-md z-50;
box-shadow: var(--shadow-medium);
z-index: var(--z-index-high);
} }
&.disabled { &.disabled {
opacity: 0.6; @apply opacity-60;
} }
img { img {
margin: var(--space-normal) auto; @apply w-[50%] my-4 mx-auto;
width: 50%;
} }
.channel__title { .channel__title {
color: var(--color-body); @apply text-slate-800 dark:text-slate-100 text-base text-center capitalize;
font-size: var(--font-size-default);
text-align: center;
text-transform: capitalize;
} }
p { p {
color: var(--b-500); @apply text-slate-600 dark:text-slate-300 w-full text-sm;
width: 100%;
} }
} }
</style> </style>

95
app/javascript/dashboard/components/ChatList.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="conversations-list-wrap" class="conversations-list-wrap flex-shrink-0 flex-basis-custom overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
:class="{ :class="{
hide: !showConversationList, hide: !showConversationList,
'list--full-width': isOnExpandedLayout, 'list--full-width': isOnExpandedLayout,
@@ -8,26 +8,28 @@
> >
<slot /> <slot />
<div <div
class="chat-list__top" class="flex items-center justify-between py-0 px-4"
:class="{ filter__applied: hasAppliedFiltersOrActiveFolders }" :class="{
'pb-3 border-b border-slate-75 dark:border-slate-700': hasAppliedFiltersOrActiveFolders,
}"
> >
<div class="flex-center chat-list__title"> <div class="flex max-w-[85%] justify-center items-center">
<h1 <h1
class="page-sub-title text-truncate margin-bottom-0" class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis mb-0"
:title="pageTitle" :title="pageTitle"
> >
{{ pageTitle }} {{ pageTitle }}
</h1> </h1>
<span <span
v-if="!hasAppliedFiltersOrActiveFolders" v-if="!hasAppliedFiltersOrActiveFolders"
class="conversation--status-pill" class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
> >
{{ {{
this.$t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) this.$t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`)
}} }}
</span> </span>
</div> </div>
<div class="filter--actions"> <div class="flex items-center gap-1">
<div v-if="hasAppliedFilters && !hasActiveFolders"> <div v-if="hasAppliedFilters && !hasActiveFolders">
<woot-button <woot-button
v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')" v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
@@ -104,7 +106,10 @@
@chatTabChange="updateAssigneeTab" @chatTabChange="updateAssigneeTab"
/> />
<p v-if="!chatListLoading && !conversationList.length" class="content-box"> <p
v-if="!chatListLoading && !conversationList.length"
class="overflow-auto p-4 flex justify-center items-center"
>
{{ $t('CHAT_LIST.LIST.404') }} {{ $t('CHAT_LIST.LIST.404') }}
</p> </p>
<conversation-bulk-actions <conversation-bulk-actions
@@ -123,8 +128,8 @@
/> />
<div <div
ref="activeConversation" ref="activeConversation"
class="conversations-list" class="conversations-list flex-1"
:class="{ 'is-context-menu-open': isContextMenuOpen }" :class="{ 'overflow-hidden': isContextMenuOpen }"
> >
<div> <div>
<conversation-card <conversation-card
@@ -149,23 +154,20 @@
/> />
</div> </div>
<div v-if="chatListLoading" class="text-center"> <div v-if="chatListLoading" class="text-center">
<span class="spinner" /> <span class="spinner mt-4 mb-4" />
</div> </div>
<woot-button <woot-button
v-if="!hasCurrentPageEndReached && !chatListLoading" v-if="!hasCurrentPageEndReached && !chatListLoading"
variant="clear" variant="clear"
size="expanded" size="expanded"
class="text-center" class="load-more--button"
@click="loadMoreConversations" @click="loadMoreConversations"
> >
{{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }} {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
</woot-button> </woot-button>
<p <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
v-if="showEndOfListMessage"
class="text-center text-muted end-of-list-text"
>
{{ $t('CHAT_LIST.EOF') }} {{ $t('CHAT_LIST.EOF') }}
</p> </p>
</div> </div>
@@ -956,70 +958,43 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
<style scoped lang="scss"> @tailwind components;
.spinner { @layer components {
margin-top: var(--space-normal); .flex-basis-clamp {
margin-bottom: var(--space-normal); flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
}
.conversations-list {
// Prevent the list from scrolling if the submenu is opened
&.is-context-menu-open {
overflow: hidden !important;
} }
} }
</style>
<style scoped lang="scss">
.conversations-list-wrap { .conversations-list-wrap {
flex-shrink: 0; @apply flex-basis-clamp;
flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
overflow: hidden;
&.hide { &.hide {
display: none; @apply hidden;
} }
&.list--full-width { &.list--full-width {
flex-basis: 100%; @apply basis-full;
}
.page-sub-title {
font-size: var(--font-size-two);
} }
} }
.filter--actions {
display: flex; .conversations-list {
align-items: center; @apply overflow-hidden hover:overflow-y-auto;
gap: var(--space-smaller);
} }
.filter__applied { .load-more--button {
padding-bottom: var(--space-slab) !important; @apply text-center rounded-none;
border-bottom: 1px solid var(--color-border);
} }
.tab--chat-type { .tab--chat-type {
padding: 0 var(--space-normal); @apply py-0 px-4;
::v-deep { ::v-deep {
.tabs { .tabs {
padding: 0; @apply p-0;
} }
} }
} }
.conversation--status-pill {
background: var(--color-background);
border-radius: var(--border-radius-small);
color: var(--color-medium-gray);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-medium);
margin: var(--space-micro) var(--space-small) 0;
padding: var(--space-smaller);
text-transform: capitalize;
}
.chat-list__title {
max-width: 85%;
}
</style> </style>

103
app/javascript/dashboard/components/CustomAttribute.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="custom-attribute"> <div class="py-3 px-4">
<div class="title-wrap"> <div class="flex items-center mb-1">
<h4 class="text-block-title title error"> <h4 class="text-block-title flex items-center m-0 w-full error">
<div v-if="isAttributeTypeCheckbox" class="checkbox-wrap"> <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
<input <input
v-model="editedValue" v-model="editedValue"
@@ -10,7 +10,7 @@
@change="onUpdate" @change="onUpdate"
/> />
</div> </div>
<div class="name-button__wrap"> <div class="flex items-center justify-between w-full">
<span <span
class="attribute-name" class="attribute-name"
:class="{ error: $v.editedValue.$error }" :class="{ error: $v.editedValue.$error }"
@@ -24,7 +24,7 @@
size="medium" size="medium"
color-scheme="secondary" color-scheme="secondary"
icon="delete" icon="delete"
class-names="delete-button" class-names="flex justify-end w-4"
@click="onDelete" @click="onDelete"
/> />
</div> </div>
@@ -47,7 +47,10 @@
<woot-button size="small" icon="checkmark" @click="onUpdate" /> <woot-button size="small" icon="checkmark" @click="onUpdate" />
</div> </div>
</div> </div>
<span v-if="shouldShowErrorMessage" class="error-message"> <span
v-if="shouldShowErrorMessage"
class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
>
{{ errorMessage }} {{ errorMessage }}
</span> </span>
</div> </div>
@@ -61,14 +64,17 @@
:href="value" :href="value"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="value" class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
> >
{{ urlValue }} {{ urlValue }}
</a> </a>
<p v-else class="value"> <p
v-else
class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
>
{{ displayValue || '---' }} {{ displayValue || '---' }}
</p> </p>
<div class="action-buttons__wrap"> <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
<woot-button <woot-button
v-if="showActions" v-if="showActions"
v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')" v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
@@ -269,98 +275,45 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-attribute {
padding: var(--space-slab) var(--space-normal);
}
.title-wrap {
display: flex;
align-items: center;
margin-bottom: var(--space-mini);
}
.title {
display: flex;
align-items: center;
margin: 0;
width: 100%;
}
.checkbox-wrap { .checkbox-wrap {
display: flex; @apply flex items-center;
align-items: center;
} }
.checkbox { .checkbox {
margin: 0 var(--space-small) 0 0; @apply my-0 mr-2 ml-0;
}
.name-button__wrap {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
} }
.attribute-name { .attribute-name {
width: 100%; @apply w-full text-slate-800 dark:text-slate-100;
&.error { &.error {
color: var(--r-400); @apply text-red-400 dark:text-red-500;
} }
} }
.title--icon {
width: var(--space-two);
}
.edit-button { .edit-button {
display: none; @apply hidden;
}
.delete-button {
display: flex;
justify-content: flex-end;
width: var(--space-normal);
} }
.value--view { .value--view {
display: flex; @apply flex;
&.is-editable:hover { &.is-editable:hover {
.value { .value {
background: var(--color-background); @apply bg-slate-50 dark:bg-slate-700 mb-0;
margin-bottom: 0;
} }
.edit-button { .edit-button {
display: block; @apply block;
} }
} }
.action-buttons__wrap {
display: flex;
max-width: var(--space-larger);
}
}
.value {
display: inline-block;
min-width: var(--space-mega);
border-radius: var(--border-radius-small);
margin-bottom: 0;
word-break: break-all;
padding: var(--space-micro) var(--space-smaller);
}
.error-message {
color: var(--r-400);
display: block;
font-size: 0.875rem;
font-size: var(--font-size-small);
font-weight: 400;
margin-bottom: 0.625rem;
margin-top: -1rem;
width: 100%;
} }
::v-deep { ::v-deep {
.selector-wrap { .selector-wrap {
margin: 0; @apply m-0 top-1;
top: var(--space-smaller);
.selector-name { .selector-name {
margin-left: 0; @apply ml-0;
} }
} }
.name { .name {
margin-left: 0; @apply ml-0;
} }
} }
</style> </style>

12
app/javascript/dashboard/components/CustomSnoozeModal.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="column"> <div class="flex flex-col">
<woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" /> <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
<form class="row modal-content" @submit.prevent="chooseTime"> <form class="modal-content" @submit.prevent="chooseTime">
<date-picker <date-picker
v-model="snoozeTime" v-model="snoozeTime"
type="datetime" type="datetime"
@@ -11,7 +11,7 @@
:disabled-time="disabledTime" :disabled-time="disabledTime"
:popup-style="{ width: '100%' }" :popup-style="{ width: '100%' }"
/> />
<div class="modal-footer justify-content-end w-full"> <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<woot-button variant="clear" @click.prevent="onClose"> <woot-button variant="clear" @click.prevent="onClose">
{{ this.$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }} {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
</woot-button> </woot-button>
@@ -64,12 +64,8 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.modal-footer {
padding: var(--space-two);
}
.modal-content { .modal-content {
padding: var(--space-small) var(--space-two) var(--space-zero); @apply pt-2 px-5 pb-6;
} }
</style> </style>

19
app/javascript/dashboard/components/ModalHeader.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="column page-top-bar"> <div class="flex flex-col items-start pt-8 px-8 pb-0">
<img v-if="headerImage" :src="headerImage" alt="No image" /> <img v-if="headerImage" :src="headerImage" alt="No image" />
<h2 <h2
ref="modalHeaderTitle" ref="modalHeaderTitle"
@@ -10,10 +10,13 @@
<p <p
v-if="headerContent" v-if="headerContent"
ref="modalHeaderContent" ref="modalHeaderContent"
class="small-12 column wrap-content" class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
> >
{{ headerContent }} {{ headerContent }}
<span v-if="headerContentValue" class="content-value"> <span
v-if="headerContentValue"
class="font-semibold text-sm text-slate-600 dark:text-slate-300"
>
{{ headerContentValue }} {{ headerContentValue }}
</span> </span>
</p> </p>
@@ -43,13 +46,3 @@ export default {
}, },
}; };
</script> </script>
<style scoped lang="scss">
.wrap-content {
word-wrap: break-word;
margin-top: var(--space-small);
.content-value {
font-weight: var(--font-weight-bold);
}
}
</style>

48
app/javascript/dashboard/components/SettingsSection.vue
View File

@@ -1,20 +1,28 @@
<template> <template>
<div class="row settings--section" :class="{ 'border-bottom': showBorder }"> <div
<div class="medium-4 small-12 title--section"> class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
<p v-if="title" class="sub-block-title"> :class="{
'pt-4 border-b border-solid border-slate-50 dark:border-slate-600': showBorder,
}"
>
<div class="w-[30%] min-w-0 max-w-[30%] pr-12">
<p
v-if="title"
class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
>
{{ title }} {{ title }}
</p> </p>
<p class="sub-head"> <p class="text-sm mb-2">
<slot v-if="subTitle" name="subTitle"> <slot v-if="subTitle" name="subTitle">
{{ subTitle }} {{ subTitle }}
</slot> </slot>
</p> </p>
<p v-if="note"> <p v-if="note">
<span class="note">{{ $t('INBOX_MGMT.NOTE') }}</span> <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
{{ note }} {{ note }}
</p> </p>
</div> </div>
<div class="medium-6 small-12"> <div class="w-[50%] min-w-0 max-w-[50%]">
<slot /> <slot />
</div> </div>
</div> </div>
@@ -42,31 +50,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
@import '~dashboard/assets/scss/variables';
.settings--section {
display: flex;
padding: 0 $space-normal $space-normal 0;
&.border-bottom {
padding-top: $space-normal;
border-bottom: 1px solid $color-border;
}
.sub-block-title {
color: $color-woot;
font-weight: $font-weight-medium;
margin-bottom: 0;
}
.title--section {
padding-right: var(--space-large);
}
.note {
font-weight: var(--font-weight-bold);
}
}
</style>

8
app/javascript/dashboard/components/SidemenuIcon.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<woot-button <woot-button
size="small" :size="size"
variant="clear" variant="clear"
color-scheme="secondary" color-scheme="secondary"
class="-ml-3 text-black-900 dark:text-slate-300" class="-ml-3 text-black-900 dark:text-slate-300"
@@ -13,6 +13,12 @@
import { BUS_EVENTS } from 'shared/constants/busEvents'; import { BUS_EVENTS } from 'shared/constants/busEvents';
export default { export default {
props: {
size: {
type: String,
default: 'small',
},
},
methods: { methods: {
onMenuItemClick() { onMenuItemClick() {
bus.$emit(BUS_EVENTS.TOGGLE_SIDEMENU); bus.$emit(BUS_EVENTS.TOGGLE_SIDEMENU);

16
app/javascript/dashboard/components/base/Hotkey.vue
View File

@@ -6,20 +6,6 @@
<style lang="scss"> <style lang="scss">
kbd.hotkey { kbd.hotkey {
display: inline-flex; @apply inline-flex p-0.5 leading-[0.625rem] min-w-[1rem] tracking-wide uppercase text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600 rounded flex-shrink-0 items-center select-none justify-center;
flex-shrink: 0;
align-items: center;
user-select: none;
justify-content: center;
padding: var(--space-micro);
min-width: var(--space-normal);
font-size: var(--font-size-micro);
border-radius: var(--space-smaller);
background-color: var(--color-background);
border: 1px solid var(--color-border);
text-transform: uppercase;
color: var(--color-body);
letter-spacing: var(--space-micro);
line-height: var(--font-size-micro);
} }
</style> </style>

18
app/javascript/dashboard/components/buttons/ResolveAction.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="resolve-actions"> <div class="resolve-actions relative flex items-center justify-end">
<div class="button-group"> <div class="button-group">
<woot-button <woot-button
v-if="isOpen" v-if="isOpen"
@@ -251,23 +251,11 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.resolve-actions {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
}
.dropdown-pane { .dropdown-pane {
left: unset; @apply left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem];
top: 2.625rem;
margin-top: var(--space-micro);
right: 0;
max-width: 12.5rem;
min-width: 9.75rem;
.dropdown-menu__item { .dropdown-menu__item {
margin-bottom: 0; @apply mb-0;
} }
} }
</style> </style>

2
app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="showShowCurrentAccountContext" v-if="showShowCurrentAccountContext"
class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer" class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
@mouseover="setShowSwitch" @mouseover="setShowSwitch"
@mouseleave="resetShowSwitch" @mouseleave="resetShowSwitch"
> >

34
app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
View File

@@ -2,24 +2,23 @@
<woot-modal <woot-modal
:show="show" :show="show"
:on-close="() => $emit('close-account-create-modal')" :on-close="() => $emit('close-account-create-modal')"
class="account-selector--modal"
> >
<div class="column content-box"> <div class="h-auto overflow-auto flex flex-col">
<woot-modal-header <woot-modal-header
:header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')" :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
:header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')" :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
/> />
<div v-if="!hasAccounts" class="alert-wrap"> <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
<div class="callout alert"> <div class="items-center rounded-md flex alert">
<div class="icon-wrap"> <div class="ml-1 mr-3">
<fluent-icon icon="warning" /> <fluent-icon icon="warning" />
</div> </div>
{{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }} {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
</div> </div>
</div> </div>
<form class="row" @submit.prevent="addAccount"> <form class="flex flex-col w-full" @submit.prevent="addAccount">
<div class="medium-12 columns"> <div class="w-full">
<label :class="{ error: $v.accountName.$error }"> <label :class="{ error: $v.accountName.$error }">
{{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }} {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
<input <input
@@ -30,8 +29,8 @@
/> />
</label> </label>
</div> </div>
<div class="modal-footer medium-12 columns"> <div class="w-full">
<div class="medium-12 columns"> <div class="w-full">
<woot-submit-button <woot-submit-button
:disabled=" :disabled="
$v.accountName.$invalid || $v.accountName.$invalid ||
@@ -102,20 +101,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.alert-wrap {
font-size: var(--font-size-small);
margin: var(--space-medium) var(--space-large) var(--space-zero);
.callout {
align-items: center;
border-radius: var(--border-radius-normal);
display: flex;
}
}
.icon-wrap {
margin-left: var(--space-smaller);
margin-right: var(--space-slab);
}
</style>

2
app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-700 rtl:border-l rtl:border-r-0 flex justify-between flex-col" class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
> >
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<logo <logo

2
app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
View File

@@ -3,7 +3,7 @@
<a <a
v-tooltip.right="$t(`SIDEBAR.${name}`)" v-tooltip.right="$t(`SIDEBAR.${name}`)"
:href="href" :href="href"
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative" class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
:class="{ :class="{
'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': 'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
isActive || isChildMenuActive, isActive || isChildMenuActive,

2
app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="hasSecondaryMenu" v-if="hasSecondaryMenu"
class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8" class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
> >
<account-context @toggle-accounts="toggleAccountModal" /> <account-context @toggle-accounts="toggleAccountModal" />
<transition-group <transition-group

4
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
View File

@@ -114,7 +114,9 @@ export default {
}, },
computed: { computed: {
showIcon() { showIcon() {
return { 'text-truncate': this.shouldTruncate }; return {
'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
};
}, },
isCountZero() { isCountZero() {
return this.childItemCount === 0; return this.childItemCount === 0;

10
app/javascript/dashboard/components/ui/ContextMenu.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="context-menu-container" class="fixed outline-none z-[9999] cursor-pointer"
:style="style" :style="style"
tabindex="0" tabindex="0"
@blur="$emit('close')" @blur="$emit('close')"
@@ -40,11 +40,3 @@ export default {
}, },
}; };
</script> </script>
<style>
.context-menu-container {
position: fixed;
z-index: var(--z-index-very-high);
outline: none;
cursor: pointer;
}
</style>

111
app/javascript/dashboard/components/ui/Label.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div :class="labelClass" :style="labelStyle" :title="description"> <div :class="labelClass" :style="labelStyle" :title="description">
<span v-if="icon" class="label-action--button"> <span v-if="icon" class="label-action--button">
<fluent-icon :icon="icon" size="12" class="label--icon" /> <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
</span> </span>
<span <span
v-if="['smooth', 'dashed'].includes(variant) && title && !icon" v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
@@ -103,145 +103,98 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~dashboard/assets/scss/variables';
.label { .label {
display: inline-flex; @apply inline-flex items-center font-medium gap-1 mr-1 rtl:ml-1 rtl:mr-0 mb-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
align-items: center;
font-weight: var(--font-weight-medium);
gap: var(--space-smaller);
margin-right: var(--space-smaller);
margin-bottom: var(--space-smaller);
padding: var(--space-smaller);
background: var(--s-50);
color: var(--s-800);
border: 1px solid var(--s-75);
height: var(--space-medium);
&.small { &.small {
font-size: var(--font-size-mini); @apply text-xs py-0.5 px-1 leading-tight h-5;
padding: var(--space-micro) var(--space-smaller);
line-height: 1.2;
height: var(--space-two);
}
.label--icon {
cursor: pointer;
} }
&.small .label--icon, &.small .label--icon,
&.small .close--icon { &.small .close--icon {
font-size: var(--font-size-nano); @apply text-[0.5rem];
} }
a { a {
font-size: var(--font-size-mini); @apply text-xs;
&:hover { &:hover {
text-decoration: underline; @apply underline;
} }
} }
/* Color Schemes */ /* Color Schemes */
&.primary { &.primary {
background: var(--w-100); @apply bg-woot-100 dark:bg-woot-100 text-woot-900 dark:text-woot-900 border border-solid border-woot-200;
color: var(--w-900);
border: 1px solid var(--w-200);
a { a {
color: var(--w-900); @apply text-woot-900 dark:text-woot-900;
} }
.label-color-dot { .label-color-dot {
background: var(--w-600); @apply bg-woot-600 dark:bg-woot-600;
} }
} }
&.secondary { &.secondary {
background: var(--s-100); @apply bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
color: var(--s-900);
border: 1px solid var(--s-200);
a { a {
color: var(--s-900); @apply text-slate-900 dark:text-slate-100;
} }
.label-color-dot { .label-color-dot {
background: var(--s-600); @apply bg-slate-600 dark:bg-slate-600;
} }
} }
&.success { &.success {
background: var(--g-100); @apply bg-green-100 dark:bg-green-700 text-green-900 dark:text-green-100 border border-solid border-green-200 dark:border-green-600;
color: var(--g-900);
border: 1px solid var(--g-200);
a { a {
color: var(--g-900); @apply text-green-900 dark:text-green-100;
} }
.label-color-dot { .label-color-dot {
background: var(--g-600); @apply bg-green-600 dark:bg-green-600;
} }
} }
&.alert { &.alert {
background: var(--r-100); @apply bg-red-100 dark:bg-red-700 text-red-900 dark:text-red-100 border border-solid border-red-200 dark:border-red-600;
color: var(--r-900);
border: 1px solid var(--r-200);
a { a {
color: var(--r-900); @apply text-red-900 dark:text-red-100;
} }
.label-color-dot { .label-color-dot {
background: var(--r-600); @apply bg-red-600 dark:bg-red-600;
} }
} }
&.warning { &.warning {
background: var(--y-100); @apply bg-yellow-100 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 border border-solid border-yellow-200 dark:border-yellow-600;
color: var(--y-900);
border: 1px solid var(--y-200);
a { a {
color: var(--y-900); @apply text-yellow-900 dark:text-yellow-100;
} }
.label-color-dot { .label-color-dot {
background: var(--y-900); @apply bg-yellow-900 dark:bg-yellow-900;
} }
} }
&.smooth { &.smooth {
background: transparent; @apply bg-transparent text-slate-700 dark:text-slate-100 border border-solid border-slate-100 dark:border-slate-700;
color: var(--s-700);
border: 1px solid var(--s-100);
} }
&.dashed { &.dashed {
background: transparent; @apply bg-transparent text-slate-700 dark:text-slate-100 border border-dashed border-slate-100 dark:border-slate-700;
color: var(--s-700);
border: 1px dashed var(--s-100);
} }
} }
.label-close--button { .label-close--button {
color: var(--s-800); @apply text-slate-800 dark:text-slate-100 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-slate-100 dark:hover:bg-slate-700;
margin-bottom: var(--space-minus-micro);
border-radius: var(--border-radius-small);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: var(--s-100);
}
} }
.label-action--button { .label-action--button {
display: flex; @apply flex mr-1;
margin-right: var(--space-smaller);
} }
.label-color-dot { .label-color-dot {
display: inline-block; @apply inline-block w-3 h-3 rounded-sm shadow-sm;
width: var(--space-slab);
height: var(--space-slab);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow-small);
} }
.label.small .label-color-dot { .label.small .label-color-dot {
width: var(--space-small); @apply w-2 h-2 rounded-sm shadow-sm;
height: var(--space-small);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow-small);
} }
</style> </style>

80
app/javascript/dashboard/components/ui/PreviewCard.vue
View File

@@ -1,20 +1,30 @@
<template> <template>
<div class="preview-card--wrap" :class="{ activecard: active }"> <div class="preview-card--wrap" :class="{ 'active-card': active }">
<div class="header--wrap" :class="{ active: active }"> <div class="header--wrap" :class="{ active: active }">
<div class="heading-wrap text-block-title">{{ heading }}</div> <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
<fluent-icon <fluent-icon
v-if="active" v-if="active"
icon="checkmark-circle" icon="checkmark-circle"
type="solid" type="solid"
size="24" size="24"
class="checkmark" class="text-woot-500 dark:text-woot-500"
/> />
</div> </div>
<div class="content-wrap"> <div
class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
>
{{ content }} {{ content }}
</div> </div>
<div v-if="src" class="image-wrap"> <div v-if="src" class="p-3">
<img :src="src" class="image" :class="{ activeimage: active }" /> <img
:src="src"
class="border border-solid rounded-md"
:class="
active
? 'border-woot-75 dark:border-woot-700'
: 'border-slate-50 dark:border-slate-600'
"
/>
</div> </div>
<slot v-else /> <slot v-else />
</div> </div>
@@ -49,66 +59,18 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.preview-card--wrap { .preview-card--wrap {
border-radius: var(--border-radius-normal); @apply flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600;
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
max-height: 21.25rem;
max-width: 23.75rem;
min-width: 15rem;
.header--wrap { .header--wrap {
background: var(--s-50); @apply flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600;
border-bottom: 1px solid var(--color-border);
border-top-left-radius: var(--border-radius-normal);
border-top-right-radius: var(--border-radius-normal);
display: flex;
height: 2.5rem;
justify-content: space-between;
padding: var(--space-small);
width: 100%;
} }
.active { .active {
background: var(--w-50); @apply bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700;
border-bottom: 1px solid var(--w-75);
}
.heading-wrap {
align-items: center;
display: flex;
font-weight: var(--font-weight-medium);
padding: var(--space-smaller);
}
.checkmark {
color: var(--w-500);
}
.content-wrap {
color: var(--s-700);
font-size: var(--font-size-mini);
line-height: 1.4;
padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
text-align: start;
}
.image-wrap {
padding: var(--space-slab);
}
.image {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-normal);
}
.activeimage {
border: 1px solid var(--w-75);
} }
} }
.activecard { .active-card {
background: var(--w-25); @apply bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400;
border: 1px solid var(--w-300);
} }
</style> </style>

4
app/javascript/dashboard/components/ui/Switch.vue
View File

@@ -26,10 +26,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.toggle-button { .toggle-button {
@apply bg-slate-200 dark:bg-slate-600;
--toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
background-color: var(--s-200);
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
border: 2px solid transparent; border: 2px solid transparent;
cursor: pointer; cursor: pointer;
@@ -61,8 +61,8 @@ export default {
} }
span { span {
@apply bg-white dark:bg-slate-900;
--space-one-point-five: 0.9375rem; --space-one-point-five: 0.9375rem;
background-color: var(--white);
border-radius: 100%; border-radius: 100%;
box-shadow: var(--toggle-button-box-shadow); box-shadow: var(--toggle-button-box-shadow);
display: inline-block; display: inline-block;

8
app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
View File

@@ -7,9 +7,11 @@
> >
<a @click="onTabClick"> <a @click="onTabClick">
{{ name }} {{ name }}
<span v-if="showBadge" class="badge"> <div v-if="showBadge" class="badge">
{{ getItemCount }} <span>
</span> {{ getItemCount }}
</span>
</div>
</a> </a>
</li> </li>
</template> </template>

2
app/javascript/dashboard/components/ui/TimeAgo.vue
View File

@@ -5,7 +5,7 @@
delay: { show: 1500, hide: 0 }, delay: { show: 1500, hide: 0 },
hideOnClick: true, hideOnClick: true,
}" }"
class="text-xxs text-black-600 leading-4 ml-auto hover:text-black-900" class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto hover:text-slate-900 dark:hover:text-slate-100"
> >
<span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span> <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
</div> </div>

8
app/javascript/dashboard/components/ui/Wizard.vue
View File

@@ -11,8 +11,10 @@
class="item" class="item"
:class="{ active: isActive(item), over: isOver(item) }" :class="{ active: isActive(item), over: isOver(item) }"
> >
<div class="flex-align-center"> <div class="flex items-center">
<h3 class="text-truncate"> <h3
class="overflow-hidden whitespace-nowrap text-ellipsis leading-tight"
>
{{ item.title }} {{ item.title }}
</h3> </h3>
<span v-if="isOver(item)" class="completed"> <span v-if="isOver(item)" class="completed">
@@ -42,7 +44,7 @@ export default {
}, },
computed: { computed: {
classObject() { classObject() {
return 'full-width'; return 'w-full';
}, },
activeIndex() { activeIndex() {
return this.items.findIndex(i => i.route === this.$route.name); return this.items.findIndex(i => i.route === this.$route.name);

15
app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
View File

@@ -1,13 +1,16 @@
<template> <template>
<div class="column"> <div class="flex flex-col">
<woot-modal-header :header-title="headerTitle" /> <woot-modal-header :header-title="headerTitle" />
<form class="row modal-content" @submit.prevent="applyText"> <form
class="modal-content flex flex-col w-full"
@submit.prevent="applyText"
>
<div v-if="draftMessage" class="w-full"> <div v-if="draftMessage" class="w-full">
<h4 class="sub-block-title margin-top-1 "> <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
{{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }} {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
</h4> </h4>
<p v-dompurify-html="formatMessage(draftMessage, false)" /> <p v-dompurify-html="formatMessage(draftMessage, false)" />
<h4 class="sub-block-title margin-top-1"> <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
{{ {{
$t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE') $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
}} }}
@@ -18,7 +21,7 @@
<p v-else v-dompurify-html="formatMessage(generatedContent, false)" /> <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
</div> </div>
<div class="modal-footer justify-content-end w-full"> <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<woot-button variant="clear" @click.prevent="onClose"> <woot-button variant="clear" @click.prevent="onClose">
{{ {{
$t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL') $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')
@@ -98,7 +101,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.modal-content { .modal-content {
padding-top: var(--space-small); @apply pt-2 px-8 pb-8;
} }
.container { .container {

117
app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
View File

@@ -1,29 +1,37 @@
<template> <template>
<div class="preview-item__wrap"> <div
class="preview-item__wrap flex flex-col overflow-auto mt-4 max-h-[12.5rem]"
>
<div <div
v-for="(attachment, index) in attachments" v-for="(attachment, index) in attachments"
:key="attachment.id" :key="attachment.id"
class="preview-item" class="preview-item flex p-1 bg-slate-50 dark:bg-slate-800 rounded-md w-[15rem] mb-1"
> >
<div class="thumb-wrap"> <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
<img <img
v-if="isTypeImage(attachment.resource)" v-if="isTypeImage(attachment.resource)"
class="image-thumb" class="image-thumb"
:src="attachment.thumb" :src="attachment.thumb"
/> />
<span v-else class="attachment-thumb"> 📄 </span> <span v-else class="w-6 h-6 text-lg relative -top-px text-left">
📄
</span>
</div> </div>
<div class="file-name-wrap"> <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis ml-2">
<span class="item"> <span
class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
>
{{ fileName(attachment.resource) }} {{ fileName(attachment.resource) }}
</span> </span>
</div> </div>
<div class="file-size-wrap"> <div class="w-[30%] justify-center">
<span class="item text-truncate"> <span
class="item overflow-hidden text-xs text-ellipsis whitespace-nowrap"
>
{{ formatFileSize(attachment.resource) }} {{ formatFileSize(attachment.resource) }}
</span> </span>
</div> </div>
<div class="remove-file-wrap"> <div class="flex items-center justify-center">
<woot-button <woot-button
v-if="!isTypeAudio(attachment.resource)" v-if="!isTypeAudio(attachment.resource)"
class="remove--attachment clear secondary" class="remove--attachment clear secondary"
@@ -70,103 +78,20 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.preview-item__wrap {
display: flex;
flex-direction: column;
overflow: auto;
margin-top: var(--space-normal);
max-height: 12.5rem;
}
.preview-item {
display: flex;
padding: var(--space-slab) 0 0;
background: var(--color-background-light);
background: var(--b-50);
border-radius: var(--border-radius-normal);
width: 15rem;
padding: var(--space-smaller);
margin-bottom: var(--space-one);
}
.thumb-wrap {
max-width: var(--space-jumbo);
flex-shrink: 0;
width: var(--space-medium);
display: flex;
align-items: center;
}
.image-thumb { .image-thumb {
width: var(--space-medium); @apply w-6 h-6 object-cover rounded-sm;
height: var(--space-medium);
object-fit: cover;
border-radius: var(--border-radius-small);
}
.attachment-thumb {
width: var(--space-medium);
height: var(--space-medium);
font-size: var(--font-size-medium);
text-align: center;
position: relative;
top: -1px;
text-align: left;
} }
.file-name-wrap, .file-name-wrap,
.file-size-wrap { .file-size-wrap {
display: flex; @apply flex items-center py-0 px-1;
align-items: center;
padding: 0 var(--space-smaller);
> .item { > .item {
margin: 0; @apply m-0 overflow-hidden text-xs font-medium;
overflow: hidden;
font-size: var(--font-size-mini);
font-weight: var(--font-weight-medium);
} }
} }
.preview-header {
padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
}
.file-name-wrap {
max-width: 60%;
min-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
margin-left: var(--space-small);
.item {
height: var(--space-normal);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.file-size-wrap {
width: 30%;
justify-content: center;
}
.remove-file-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.remove--attachment { .remove--attachment {
width: var(--space-medium); @apply w-6 h-6 rounded-md text-sm cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800;
height: var(--space-medium);
border-radius: var(--space-medium);
font-size: var(--font-size-small);
cursor: pointer;
&:hover {
background: var(--color-background);
}
} }
</style> </style>

62
app/javascript/dashboard/components/widgets/AutomationActionInput.vue
View File

@@ -16,7 +16,7 @@
</option> </option>
</select> </select>
<div v-if="showActionInput" class="filter__answer--wrap"> <div v-if="showActionInput" class="filter__answer--wrap">
<div v-if="inputType"> <div v-if="inputType" class="w-full">
<div <div
v-if="inputType === 'search_select'" v-if="inputType === 'search_select'"
class="multiselect-wrap--small" class="multiselect-wrap--small"
@@ -201,102 +201,80 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.filter { .filter {
background: var(--color-background); @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
padding: var(--space-small);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-medium);
margin-bottom: var(--space-small);
&.is-a-macro { &.is-a-macro {
margin-bottom: 0; @apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
background: var(--white);
padding: var(--space-zero);
border: unset;
border-radius: unset;
} }
} }
.no-margin-bottom { .no-margin-bottom {
margin-bottom: 0; @apply mb-0;
} }
.filter.has-error { .filter.has-error {
background: var(--r-50); @apply bg-red-50 dark:bg-red-100;
} }
.filter-inputs { .filter-inputs {
display: flex; @apply flex;
} }
.filter-error { .filter-error {
color: var(--r-500); @apply text-red-500 dark:text-red-600 block my-1 mx-0;
display: block;
margin: var(--space-smaller) 0;
} }
.action__question, .action__question,
.filter__operator { .filter__operator {
margin-bottom: var(--space-zero); @apply mb-0 mr-1;
margin-right: var(--space-smaller);
} }
.action__question { .action__question {
max-width: 50%; @apply max-w-[50%];
} }
.action__question.full-width { .action__question.full-width {
max-width: 100%; @apply max-w-full;
} }
.filter__answer--wrap { .filter__answer--wrap {
margin-right: var(--space-smaller); @apply max-w-[50%] flex-grow mr-1 flex w-full items-center justify-start;
flex-grow: 1;
max-width: 50%;
input { input {
margin-bottom: 0; @apply mb-0;
} }
} }
.filter__answer { .filter__answer {
&.answer--text-input { &.answer--text-input {
margin-bottom: var(--space-zero); @apply mb-0;
} }
} }
.filter__join-operator-wrap { .filter__join-operator-wrap {
position: relative; @apply relative z-20 m-0;
z-index: var(--z-index-twenty);
margin: var(--space-zero);
} }
.filter__join-operator { .filter__join-operator {
display: flex; @apply flex items-center justify-center relative my-2.5 mx-0;
align-items: center;
justify-content: center;
position: relative;
margin: var(--space-one) var(--space-zero);
.operator__line { .operator__line {
position: absolute; @apply absolute w-full border-b border-solid border-slate-75 dark:border-slate-600;
width: 100%;
border-bottom: 1px solid var(--color-border);
} }
.operator__select { .operator__select {
position: relative;
width: auto;
margin-bottom: var(--space-zero) !important; margin-bottom: var(--space-zero) !important;
@apply relative w-auto;
} }
} }
.multiselect { .multiselect {
margin-bottom: var(--space-zero); @apply mb-0;
} }
.action-message { .action-message {
margin: var(--space-small) var(--space-zero) var(--space-zero); @apply mt-2 mx-0 mb-0;
} }
// Prosemirror does not have a native way of hiding the menu bar, hence // Prosemirror does not have a native way of hiding the menu bar, hence
::v-deep .ProseMirror-menubar { ::v-deep .ProseMirror-menubar {
display: none; @apply hidden;
} }
</style> </style>

27
app/javascript/dashboard/components/widgets/AutomationFileInput.vue
View File

@@ -82,37 +82,22 @@ export default {
<style scoped> <style scoped>
input[type='file'] { input[type='file'] {
display: none; @apply hidden;
} }
.input-wrapper { .input-wrapper {
display: flex; @apply flex h-9 bg-white dark:bg-slate-900 py-1 px-2 items-center text-xs cursor-pointer rounded-sm border border-dashed border-woot-100 dark:border-woot-500;
height: 39px;
background-color: var(--white);
border-radius: var(--border-radius-small);
border: 1px dashed var(--w-100);
padding: var(--space-smaller) var(--space-small);
align-items: center;
font-size: var(--font-size-mini);
cursor: pointer;
} }
.success-icon { .success-icon {
margin-right: var(--space-small); @apply text-green-500 dark:text-green-600 mr-2;
color: var(--g-500);
} }
.error-icon { .error-icon {
margin-right: var(--space-small); @apply text-red-500 dark:text-red-600 mr-2;
color: var(--r-500);
} }
.processing { .processing {
cursor: not-allowed; @apply cursor-not-allowed opacity-90;
opacity: 0.9;
} }
.file-button { .file-button {
white-space: nowrap; @apply whitespace-nowrap overflow-hidden text-ellipsis w-full mb-0;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
margin-bottom: 0;
} }
</style> </style>

22
app/javascript/dashboard/components/widgets/Avatar.vue
View File

@@ -38,16 +38,18 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style scoped>
@tailwind components;
@layer components {
.avatar-color {
background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
}
.dark-avatar-color {
background-image: linear-gradient(to top, #135899 0%, #135899 100%);
}
}
.avatar-container { .avatar-container {
display: flex; @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-woot-600 dark:text-woot-200;
line-height: 100%;
font-weight: 500;
align-items: center;
justify-content: center;
text-align: center;
background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
color: var(--w-600);
cursor: default;
} }
</style> </style>

13
app/javascript/dashboard/components/widgets/EmptyState.vue
View File

@@ -1,9 +1,15 @@
<template> <template>
<div class="row empty-state"> <div class="empty-state py-16 px-1 ml-0 mr-0">
<h3 class="title"> <h3
v-if="title"
class="text-slate-700 dark:text-slate-200 block text-center w-full text-4xl font-thin"
>
{{ title }} {{ title }}
</h3> </h3>
<p class="message"> <p
v-if="message"
class="block text-center text-slate-500 dark:text-slate-400 my-4 mx-auto w-[90%]"
>
{{ message }} {{ message }}
</p> </p>
<slot /> <slot />
@@ -14,7 +20,6 @@ export default {
props: { props: {
title: { type: String, default: '' }, title: { type: String, default: '' },
message: { type: String, default: '' }, message: { type: String, default: '' },
buttonText: { type: String, default: '' },
}, },
}; };
</script> </script>

121
app/javascript/dashboard/components/widgets/FilterInput/Index.vue
View File

@@ -1,11 +1,14 @@
<template> <template>
<div class="filters"> <div>
<div class="filter" :class="{ error: v.values.$dirty && v.values.$error }"> <div
<div class="filter-inputs"> class="rounded-md p-2 border border-solid"
:class="getInputErrorClass(v.values.$dirty, v.values.$error)"
>
<div class="flex">
<select <select
v-if="groupedFilters" v-if="groupedFilters"
v-model="attributeKey" v-model="attributeKey"
class="filter__question" class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
@change="resetFilter()" @change="resetFilter()"
> >
<optgroup <optgroup
@@ -25,7 +28,7 @@
<select <select
v-else v-else
v-model="attributeKey" v-model="attributeKey"
class="filter__question" class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
@change="resetFilter()" @change="resetFilter()"
> >
<option <option
@@ -38,7 +41,10 @@
</option> </option>
</select> </select>
<select v-model="filterOperator" class="filter__operator"> <select
v-model="filterOperator"
class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
>
<option <option
v-for="(operator, o) in operators" v-for="(operator, o) in operators"
:key="o" :key="o"
@@ -48,7 +54,7 @@
</option> </option>
</select> </select>
<div v-if="showUserInput" class="filter__answer--wrap"> <div v-if="showUserInput" class="filter__answer--wrap mr-1 flex-grow">
<div <div
v-if="inputType === 'multi_select'" v-if="inputType === 'multi_select'"
class="multiselect-wrap--small" class="multiselect-wrap--small"
@@ -90,14 +96,14 @@
v-model="values" v-model="values"
type="date" type="date"
:editable="false" :editable="false"
class="answer--text-input datepicker" class="mb-0 datepicker"
/> />
</div> </div>
<input <input
v-else v-else
v-model="values" v-model="values"
type="text" type="text"
class="answer--text-input" class="mb-0"
placeholder="Enter value" placeholder="Enter value"
/> />
</div> </div>
@@ -108,14 +114,25 @@
@click="removeFilter" @click="removeFilter"
/> />
</div> </div>
<p v-if="v.values.$dirty && v.values.$error" class="filter-error"> <p
v-if="v.values.$dirty && v.values.$error"
class="text-red-500 dark:text-red-600 block my-1 mx-0"
>
{{ $t('FILTER.EMPTY_VALUE_ERROR') }} {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
</p> </p>
</div> </div>
<div v-if="showQueryOperator" class="filter__join-operator"> <div
<hr class="operator__line" /> v-if="showQueryOperator"
<select v-model="query_operator" class="operator__select"> class="flex items-center justify-center relative my-2.5 mx-0"
>
<hr
class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-600"
/>
<select
v-model="query_operator"
class="bg-white dark:bg-slate-900 mb-0 w-auto relative text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
>
<option value="and"> <option value="and">
{{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }} {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
</option> </option>
@@ -254,86 +271,22 @@ export default {
resetFilter() { resetFilter() {
this.$emit('resetFilter'); this.$emit('resetFilter');
}, },
getInputErrorClass(isDirty, hasError) {
return isDirty && hasError
? 'bg-red-50 dark:bg-red-200 border-red-100 dark:border-red-300 '
: 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.filter {
background: var(--color-background);
padding: var(--space-small);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-medium);
}
.filter.error {
background: var(--r-50);
}
.filter-inputs {
display: flex;
}
.filter-error {
color: var(--r-500);
display: block;
margin: var(--space-smaller) 0;
}
.filter__question,
.filter__operator {
margin-bottom: var(--space-zero);
margin-right: var(--space-smaller);
}
.filter__question {
max-width: 30%;
}
.filter__operator {
max-width: 20%;
}
.filter__answer--wrap { .filter__answer--wrap {
margin-right: var(--space-smaller);
flex-grow: 1;
input { input {
margin-bottom: 0; @apply bg-white dark:bg-slate-900 mb-0 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600;
}
}
.filter__answer {
&.answer--text-input {
margin-bottom: var(--space-zero);
}
}
.filter__join-operator-wrap {
position: relative;
z-index: var(--z-index-twenty);
margin: var(--space-zero);
}
.filter__join-operator {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: var(--space-one) var(--space-zero);
.operator__line {
position: absolute;
width: 100%;
border-bottom: 1px solid var(--color-border);
}
.operator__select {
position: relative;
width: auto;
margin-bottom: var(--space-zero) !important;
} }
} }
.multiselect { .multiselect {
margin-bottom: var(--space-zero); @apply mb-0;
} }
</style> </style>

58
app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
View File

@@ -1,13 +1,22 @@
<template> <template>
<div class="option-item--inbox"> <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
<span class="badge--icon"> <span
<fluent-icon :icon="computedInboxIcon" size="14" /> class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
>
<fluent-icon
:icon="computedInboxIcon"
size="14"
class="text-slate-800 dark:text-slate-200"
/>
</span> </span>
<div class="option__user-data"> <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
<h5 class="option__title"> <h5 class="option__title">
{{ name }} {{ name }}
</h5> </h5>
<p class="option__body text-truncate" :title="inboxIdentifier"> <p
class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
:title="inboxIdentifier"
>
{{ inboxIdentifier || computedInboxType }} {{ inboxIdentifier || computedInboxType }}
</p> </p>
</div> </div>
@@ -58,45 +67,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.option-item--inbox {
display: flex;
align-items: center;
height: 2.375rem;
min-width: 0;
padding: 0 var(--space-smaller);
}
.badge--icon {
display: inline-flex;
border-radius: var(--border-radius-small);
margin-right: var(--space-smaller);
background: var(--s-25);
padding: var(--space-micro);
align-items: center;
flex-shrink: 0;
justify-content: center;
width: var(--space-medium);
height: var(--space-medium);
}
.option__user-data {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
margin-left: var(--space-smaller);
margin-right: var(--space-smaller);
}
.option__body { .option__body {
display: inline-block; @apply inline-block text-slate-600 dark:text-slate-200 leading-[1.3] min-w-0 m-0;
color: var(--s-600);
font-size: var(--font-size-small);
line-height: 1.3;
min-width: 0;
margin: 0;
} }
.option__title { .option__title {
line-height: 1.1; @apply leading-[1.1] text-xs m-0 text-slate-800 dark:text-slate-100;
font-size: var(--font-size-mini);
margin: 0;
} }
</style> </style>

27
app/javascript/dashboard/components/widgets/InboxName.vue
View File

@@ -1,6 +1,12 @@
<template> <template>
<div class="inbox--name"> <div
<fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" /> class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
>
<fluent-icon
class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
:icon="computedInboxClass"
size="12"
/>
{{ inbox.name }} {{ inbox.name }}
</div> </div>
</template> </template>
@@ -23,20 +29,3 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.inbox--name {
align-items: center;
display: inline-flex;
padding: var(--space-micro) 0;
line-height: var(--space-slab);
font-weight: var(--font-weight-medium);
background: none;
color: var(--s-600);
font-size: var(--font-size-mini);
margin: 0 var(--space-one);
}
.inbox--icon {
margin-right: var(--space-micro);
}
</style>

18
app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
View File

@@ -1,9 +1,14 @@
<template> <template>
<div class="column page-top-banner"> <div
<h2 class="page-sub-title"> class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
>
<h2 class="text-2xl text-slate-800 dark:text-slate-100">
{{ headerTitle }} {{ headerTitle }}
</h2> </h2>
<p v-if="headerContent" class="small-12 column"> <p
v-if="headerContent"
class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
>
{{ headerContent }} {{ headerContent }}
</p> </p>
<slot /> <slot />
@@ -24,10 +29,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.page-top-banner {
border-bottom: 1px solid var(--color-border-light);
background: var(--s-25);
padding: var(--space-normal) var(--space-large) 0;
}
</style>

21
app/javascript/dashboard/components/widgets/TableFooter.vue
View File

@@ -1,7 +1,10 @@
<template> <template>
<footer v-if="isFooterVisible" class="footer"> <footer
v-if="isFooterVisible"
class="bg-white dark:bg-slate-800 h-[60px] border-t border-solid border-slate-75 dark:border-slate-700/50 flex items-center justify-between py-0 px-4"
>
<div class="left-aligned-wrap"> <div class="left-aligned-wrap">
<div class="page-meta"> <div class="text-xs text-slate-600 dark:text-slate-200">
<strong>{{ firstIndex }}</strong> <strong>{{ firstIndex }}</strong>
- <strong>{{ lastIndex }}</strong> of - <strong>{{ lastIndex }}</strong> of
<strong>{{ totalCount }}</strong> items <strong>{{ totalCount }}</strong> items
@@ -161,22 +164,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer {
height: 60px;
border-top: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-normal);
}
.page-meta {
font-size: var(--font-size-mini);
}
.goto-first, .goto-first,
.goto-last { .goto-last {
i:last-child { i:last-child {
margin-left: var(--space-minus-smaller); @apply -ml-1;
} }
} }
</style> </style>

18
app/javascript/dashboard/components/widgets/Thumbnail.vue
View File

@@ -128,10 +128,12 @@ export default {
return { width: statusSize, height: statusSize }; return { width: statusSize, height: statusSize };
}, },
thumbnailClass() { thumbnailClass() {
const classname = this.hasBorder ? 'border' : ''; const className = this.hasBorder
? 'border border-solid border-white dark:border-slate-700/50'
: '';
const variant = const variant =
this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square'; this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
return `user-thumbnail ${classname} ${variant}`; return `user-thumbnail ${className} ${variant}`;
}, },
thumbnailBoxClass() { thumbnailBoxClass() {
const boxClass = this.variant === 'circle' ? 'is-rounded' : ''; const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
@@ -185,14 +187,9 @@ export default {
box-sizing: border-box; box-sizing: border-box;
object-fit: cover; object-fit: cover;
vertical-align: initial; vertical-align: initial;
&.border {
border: 1px solid white;
}
} }
.source-badge { .source-badge {
background: white;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
bottom: var(--space-minus-micro); bottom: var(--space-minus-micro);
box-shadow: var(--shadow-small); box-shadow: var(--shadow-small);
@@ -201,6 +198,7 @@ export default {
position: absolute; position: absolute;
right: 0; right: 0;
width: var(--space-slab); width: var(--space-slab);
@apply bg-white dark:bg-slate-900;
} }
.user-online-status { .user-online-status {
@@ -213,15 +211,15 @@ export default {
} }
.user-online-status--online { .user-online-status--online {
background: var(--g-400); @apply bg-green-400 dark:bg-green-400;
} }
.user-online-status--busy { .user-online-status--busy {
background: var(--y-500); @apply bg-yellow-500 dark:bg-yellow-500;
} }
.user-online-status--offline { .user-online-status--offline {
background: var(--s-500); @apply bg-slate-500 dark:bg-slate-500;
} }
} }
</style> </style>

10
app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
View File

@@ -6,7 +6,9 @@
:username="user.name" :username="user.name"
:status="user.availability_status" :status="user.availability_status"
/> />
<h6 class="text-block-title user-name text-truncate text-capitalize"> <h6
class="text-block-title user-name overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
>
{{ user.name }} {{ user.name }}
</h6> </h6>
</div> </div>
@@ -33,12 +35,10 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.row--user-block { .row--user-block {
align-items: center; @apply items-center flex text-left;
display: flex;
text-align: left;
.user-name { .user-name {
margin: 0 var(--space-small); @apply my-0 mx-2 text-slate-700 dark:text-slate-100;
} }
} }
</style> </style>

56
app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
View File

@@ -445,69 +445,61 @@ export default {
@import '~@chatwoot/prosemirror-schema/src/styles/base.scss'; @import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
.ProseMirror-menubar-wrapper { .ProseMirror-menubar-wrapper {
display: flex; @apply flex flex-col;
flex-direction: column;
.ProseMirror-menubar { .ProseMirror-menubar {
min-height: var(--space-two) !important; min-height: var(--space-two) !important;
margin-left: var(--space-minus-one); @apply -ml-2.5 pb-0 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100;
padding-bottom: 0;
}
.ProseMirror-menu-active {
@apply bg-slate-75 dark:bg-slate-800;
}
}
> .ProseMirror { > .ProseMirror {
padding: 0; @apply p-0 break-words text-slate-800 dark:text-slate-100;
word-break: break-word;
} }
} }
.editor-root { .editor-root {
width: 100%; @apply w-full relative;
position: relative;
} }
.ProseMirror-woot-style { .ProseMirror-woot-style {
min-height: 5rem; @apply overflow-auto min-h-[5rem] max-h-[7.5rem];
max-height: 7.5rem;
overflow: auto;
} }
.ProseMirror-prompt { .ProseMirror-prompt {
z-index: var(--z-index-highest); @apply z-50 bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800;
background: var(--color-background-light);
border-radius: var(--border-radius-normal);
border: 1px solid var(--color-border);
} }
.is-private { .is-private {
.prosemirror-mention-node { .prosemirror-mention-node {
font-weight: var(--font-weight-medium); @apply font-medium bg-slate-50 dark:bg-slate-200 text-slate-900 dark:text-slate-900 py-0 px-1;
background: var(--s-50);
color: var(--s-900);
padding: 0 var(--space-smaller);
} }
.ProseMirror-menubar {
background: var(--y-50); .ProseMirror-menubar-wrapper {
.ProseMirror-menubar {
@apply bg-yellow-50 dark:bg-yellow-50 text-slate-700 dark:text-slate-700;
}
> .ProseMirror {
@apply text-slate-800 dark:text-slate-800;
}
} }
} }
.editor-wrap { .editor-wrap {
margin-bottom: var(--space-normal); @apply mb-4;
} }
.message-editor { .message-editor {
border: 1px solid var(--color-border); @apply border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md py-0 px-1 mb-0;
border-radius: var(--border-radius-normal);
padding: 0 var(--space-slab);
margin-bottom: 0;
} }
.editor_warning { .editor_warning {
border: 1px solid var(--r-400); @apply border border-solid border-red-400 dark:border-red-400;
} }
.editor-warning__message { .editor-warning__message {
color: var(--r-400); @apply text-red-400 dark:text-red-400 font-normal pt-1 pb-0 px-0;
font-weight: var(--font-weight-normal);
padding: var(--space-smaller) 0 0 0;
} }
</style> </style>

31
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
View File

@@ -103,7 +103,7 @@
class="modal-mask" class="modal-mask"
> >
<fluent-icon icon="cloud-backup" /> <fluent-icon icon="cloud-backup" />
<h4 class="page-sub-title"> <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
{{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }} {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
</h4> </h4>
</div> </div>
@@ -323,48 +323,35 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.bottom-box { .bottom-box {
display: flex; @apply flex justify-between py-3 px-4;
justify-content: space-between;
padding: var(--space-slab) var(--space-normal);
&.is-note-mode { &.is-note-mode {
background: var(--y-50); @apply bg-yellow-50 dark:bg-yellow-50;
} }
} }
.left-wrap .button {
margin-right: var(--space-small);
}
.left-wrap { .left-wrap {
align-items: center; @apply items-center flex gap-2;
display: flex;
} }
.right-wrap { .right-wrap {
display: flex; @apply flex;
} }
::v-deep .file-uploads { ::v-deep .file-uploads {
label { label {
cursor: pointer; @apply cursor-pointer;
} }
&:hover .button { &:hover .button {
background: var(--s-100); @apply dark:bg-slate-800 bg-slate-100;
} }
} }
.modal-mask { .modal-mask {
color: var(--s-600); @apply text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent flex-col;
background: var(--white-transparent);
flex-direction: column;
}
.page-sub-title {
color: var(--s-600);
} }
.icon { .icon {
font-size: 5rem; @apply text-[5rem];
} }
</style> </style>

62
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="top-box"> <div class="bg-black-50 flex justify-between dark:bg-slate-800">
<div class="mode-wrap button-group"> <div class="button-group">
<woot-button <woot-button
variant="clear" variant="clear"
class="button--reply" class="button--reply"
@@ -20,8 +20,8 @@
{{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }} {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
</woot-button> </woot-button>
</div> </div>
<div class="action-wrap"> <div class="flex items-center my-0 mx-4">
<div v-if="isMessageLengthReachingThreshold" class="tabs-title"> <div v-if="isMessageLengthReachingThreshold" class="text-xs">
<span :class="charLengthClass"> <span :class="charLengthClass">
{{ characterLengthWarning }} {{ characterLengthWarning }}
</span> </span>
@@ -90,7 +90,7 @@ export default {
}; };
}, },
charLengthClass() { charLengthClass() {
return this.charactersRemaining < 0 ? 'message-error' : 'message-length'; return this.charactersRemaining < 0 ? 'text-red-600' : 'text-slate-600';
}, },
characterLengthWarning() { characterLengthWarning() {
return this.charactersRemaining < 0 return this.charactersRemaining < 0
@@ -118,70 +118,34 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-box {
display: flex;
justify-content: space-between;
@apply bg-black-50 dark:bg-slate-800;
}
.button-group { .button-group {
border: 0; @apply flex border-0 p-0 m-0;
padding: 0;
margin: 0;
.button { .button {
font-size: var(--font-size-small); @apply text-sm font-medium py-2.5 px-4 m-0 relative z-10;
font-weight: var(--font-weight-medium);
padding: var(--space-one) var(--space-normal);
margin: 0;
position: relative;
z-index: 1;
&.is-active { &.is-active {
background: white; @apply bg-white dark:bg-slate-900;
} }
} }
.button--reply { .button--reply {
border-radius: 0; @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
@apply border-r border-b-0 border-l-0 border-slate-50 dark:border-slate-700;
&:hover, &:hover,
&:focus { &:focus {
@apply border-r border-slate-50 dark:border-slate-700; @apply border-r border-slate-50 dark:border-slate-700;
} }
} }
.button--note { .button--note {
border-radius: 0; @apply border-l-0 rounded-none;
&.is-active { &.is-active {
@apply border-r border-b-0 border-slate-50 dark:border-slate-700; @apply border-r border-b-0 bg-yellow-50 dark:bg-yellow-50 border-t-0 border-slate-50 dark:border-slate-700;
background: var(--y-50);
} }
&:hover, &:hover,
&:active { &:active {
color: var(--y-700); @apply text-yellow-700 dark:text-yellow-700;
} }
} }
} }
.button--note { .button--note {
color: var(--y-600); @apply text-yellow-600 dark:text-yellow-600;
}
.action-wrap {
display: flex;
align-items: center;
margin: 0 var(--space-normal);
font-size: var(--font-size-mini);
.message-error {
color: var(--r-600);
}
.message-length {
color: var(--s-600);
}
} }
</style> </style>

58
app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
View File

@@ -1,57 +1 @@
<template> <!-- // not using this component -->
<select v-model="activeStatus" class="status--filter" @change="onTabChange()">
<option
v-for="(value, status) in $t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS')"
:key="status"
:value="status"
>
{{ value['TEXT'] }}
</option>
</select>
</template>
<script>
import wootConstants from 'dashboard/constants/globals';
import eventListenerMixins from 'shared/mixins/eventListenerMixins';
import { hasPressedAltAndBKey } from 'shared/helpers/KeyboardHelpers';
export default {
mixins: [eventListenerMixins],
data: () => ({
activeStatus: wootConstants.STATUS_TYPE.OPEN,
}),
methods: {
handleKeyEvents(e) {
if (hasPressedAltAndBKey(e)) {
if (this.activeStatus === wootConstants.STATUS_TYPE.OPEN) {
this.activeStatus = wootConstants.STATUS_TYPE.RESOLVED;
} else if (this.activeStatus === wootConstants.STATUS_TYPE.RESOLVED) {
this.activeStatus = wootConstants.STATUS_TYPE.PENDING;
} else if (this.activeStatus === wootConstants.STATUS_TYPE.PENDING) {
this.activeStatus = wootConstants.STATUS_TYPE.SNOOZED;
} else if (this.activeStatus === wootConstants.STATUS_TYPE.SNOOZED) {
this.activeStatus = wootConstants.STATUS_TYPE.ALL;
} else if (this.activeStatus === wootConstants.STATUS_TYPE.ALL) {
this.activeStatus = wootConstants.STATUS_TYPE.OPEN;
}
}
this.onTabChange();
},
onTabChange() {
this.$store.dispatch('setChatStatusFilter', this.activeStatus);
this.$emit('onChangeFilter', this.activeStatus);
},
},
};
</script>
<style lang="scss" scoped>
.status--filter {
background-color: var(--color-background-light);
border: 1px solid var(--color-border);
font-size: var(--font-size-mini);
height: var(--space-medium);
margin: 0 var(--space-smaller);
padding: 0 var(--space-medium) 0 var(--space-small);
width: auto;
}
</style>

48
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
View File

@@ -1,22 +1,30 @@
<template> <template>
<div class="column"> <div>
<woot-modal-header :header-title="filterModalHeaderTitle"> <woot-modal-header :header-title="filterModalHeaderTitle">
<p>{{ filterModalSubTitle }}</p> <p class="text-slate-600 dark:text-slate-200">
{{ filterModalSubTitle }}
</p>
</woot-modal-header> </woot-modal-header>
<div class="column modal-content"> <div class="p-8">
<div v-if="isFolderView" class="columns"> <div v-if="isFolderView">
<label class="input-label" :class="{ error: !activeFolderNewName }"> <label class="input-label" :class="{ error: !activeFolderNewName }">
{{ $t('FILTER.FOLDER_LABEL') }} {{ $t('FILTER.FOLDER_LABEL') }}
<input v-model="activeFolderNewName" type="text" class="name-input" /> <input
v-model="activeFolderNewName"
type="text"
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="!activeFolderNewName" class="message"> <span v-if="!activeFolderNewName" class="message">
{{ $t('FILTER.EMPTY_VALUE_ERROR') }} {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
</span> </span>
</label> </label>
<label class="input-label"> <label class="mb-1">
{{ $t('FILTER.FOLDER_QUERY_LABEL') }} {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
</label> </label>
</div> </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 <filter-input-box
v-for="(filter, i) in appliedFilters" v-for="(filter, i) in appliedFilters"
:key="i" :key="i"
@@ -37,7 +45,7 @@
@resetFilter="resetFilter(i, appliedFilters[i])" @resetFilter="resetFilter(i, appliedFilters[i])"
@removeFilter="removeFilter(i)" @removeFilter="removeFilter(i)"
/> />
<div class="filter-actions"> <div class="mt-4">
<woot-button <woot-button
icon="add" icon="add"
color-scheme="success" color-scheme="success"
@@ -49,8 +57,8 @@
</woot-button> </woot-button>
</div> </div>
</div> </div>
<div class="medium-12 columns"> <div class="w-full">
<div class="modal-footer justify-content-end 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"> <woot-button class="button clear" @click.prevent="onClose">
{{ $t('FILTER.CANCEL_BUTTON_LABEL') }} {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
</woot-button> </woot-button>
@@ -371,23 +379,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.filters-wrap { .folder-input {
padding: var(--space-normal); @apply w-[50%];
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);
}
.input-label {
margin-bottom: var(--space-smaller);
.name-input {
width: 50%;
}
} }
</style> </style>

48
app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="position-relative"> <div class="relative flex">
<woot-button <woot-button
v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')" v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
variant="smooth" variant="smooth"
@@ -12,10 +12,12 @@
<div <div
v-if="showActionsDropdown" v-if="showActionsDropdown"
v-on-clickaway="closeDropdown" v-on-clickaway="closeDropdown"
class="dropdown-pane dropdown-pane--open basic-filter" class="dropdown-pane dropdown-pane--open mt-1 right-0 basic-filter"
> >
<div class="filter__item"> <div class="items-center flex justify-between last:mt-4">
<span>{{ this.$t('CHAT_LIST.CHAT_SORT.STATUS') }}</span> <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
this.$t('CHAT_LIST.CHAT_SORT.STATUS')
}}</span>
<filter-item <filter-item
type="status" type="status"
:selected-value="chatStatus" :selected-value="chatStatus"
@@ -24,8 +26,10 @@
@onChangeFilter="onChangeFilter" @onChangeFilter="onChangeFilter"
/> />
</div> </div>
<div class="filter__item"> <div class="items-center flex justify-between last:mt-4">
<span>{{ this.$t('CHAT_LIST.CHAT_SORT.ORDER_BY') }}</span> <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
this.$t('CHAT_LIST.CHAT_SORT.ORDER_BY')
}}</span>
<filter-item <filter-item
type="sort" type="sort"
:selected-value="chatSortFilter" :selected-value="chatSortFilter"
@@ -87,36 +91,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.basic-filter { .basic-filter {
margin-top: var(--space-smaller); @apply w-52 p-4 top-6;
padding: var(--space-normal);
right: 0;
width: 13.125rem;
span {
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
}
.filter__item {
align-items: center;
display: flex;
justify-content: space-between;
&:last-child {
margin-top: var(--space-normal);
}
span {
font-size: var(--font-size-mini);
}
}
}
.icon {
margin-right: var(--space-smaller);
}
.dropdown-icon {
margin-left: var(--space-smaller);
} }
</style> </style>

51
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
View File

@@ -13,7 +13,7 @@
<woot-tabs <woot-tabs
v-if="dashboardApps.length && currentChat.id" v-if="dashboardApps.length && currentChat.id"
:index="activeIndex" :index="activeIndex"
class="dashboard-app--tabs" class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
@change="onDashboardAppTabChange" @change="onDashboardAppTabChange"
> >
<woot-tabs-item <woot-tabs-item
@@ -34,7 +34,10 @@
@contact-panel-toggle="onToggleContactPanel" @contact-panel-toggle="onToggleContactPanel"
/> />
<empty-state v-else :is-on-expanded-layout="isOnExpandedLayout" /> <empty-state v-else :is-on-expanded-layout="isOnExpandedLayout" />
<div v-show="showContactPanel" class="conversation-sidebar-wrap"> <div
v-show="showContactPanel"
class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
>
<contact-panel <contact-panel
v-if="showContactPanel" v-if="showContactPanel"
:conversation-id="currentChat.id" :conversation-id="currentChat.id"
@@ -141,12 +144,8 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~dashboard/assets/scss/woot';
.conversation-details-wrap { .conversation-details-wrap {
display: flex; @apply flex flex-col min-w-0 w-full;
flex-direction: column;
min-width: 0;
width: 100%;
&.with-border-right { &.with-border-right {
@apply border-r border-slate-50 dark:border-slate-700; @apply border-r border-slate-50 dark:border-slate-700;
@@ -154,40 +153,18 @@ export default {
} }
.dashboard-app--tabs { .dashboard-app--tabs {
background: var(--white); ::v-deep {
margin-top: -1px; .tabs-title {
min-height: var(--dashboard-app-tabs-height); a {
@apply pb-2 pt-1;
}
}
}
} }
.conversation-sidebar-wrap { .conversation-sidebar-wrap {
@apply border-r border-slate-50 dark:border-slate-700;
background: white;
flex-basis: 100%;
@include breakpoint(medium up) {
flex-basis: 17.5rem;
}
@include breakpoint(large up) {
flex-basis: 18.75rem;
}
@include breakpoint(xlarge up) {
flex-basis: 19.375rem;
}
@include breakpoint(xxlarge up) {
flex-basis: 20.625rem;
}
@include breakpoint(xxxlarge up) {
flex-basis: 25rem;
}
&::v-deep .contact--panel { &::v-deep .contact--panel {
width: 100%; @apply w-full h-full max-w-full;
height: 100%;
max-width: 100%;
} }
} }
</style> </style>

171
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div <div
class="conversation group border-t border-transparent" class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-50 dark:hover:bg-slate-800 group"
:class="{ :class="{
active: isActiveChat, 'active bg-slate-50 dark:bg-slate-800 border-woot-500': isActiveChat,
'unread-chat': hasUnread, 'unread-chat': hasUnread,
'has-inbox-name': showInboxName, 'has-inbox-name': showInboxName,
'conversation-selected': selected, 'conversation-selected': selected,
@@ -31,41 +31,50 @@
size="40px" size="40px"
/> />
<div <div
class="conversation--details border-b group-last:border-transparent group-hover:border-transparent border-slate-50 dark:border-slate-800 columns" class="py-3 px-0 border-b group-last:border-transparent group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
> >
<div class="conversation--metadata"> <div class="flex justify-between">
<inbox-name v-if="showInboxName" :inbox="inbox" /> <inbox-name v-if="showInboxName" :inbox="inbox" />
<div class="conversation-metadata-attributes"> <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
<span <span
v-if="showAssignee && assignee.name" v-if="showAssignee && assignee.name"
class="label assignee-label text-truncate" class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
> >
<fluent-icon icon="person" size="12" /> <fluent-icon
icon="person"
size="12"
class="text-slate-500 dark:text-slate-400"
/>
{{ assignee.name }} {{ assignee.name }}
</span> </span>
<priority-mark :priority="chat.priority" /> <priority-mark :priority="chat.priority" />
</div> </div>
</div> </div>
<h4 class="conversation--user"> <h4
class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[60%] text-slate-900 dark:text-slate-100"
>
{{ currentContact.name }} {{ currentContact.name }}
</h4> </h4>
<p v-if="lastMessageInChat" class="conversation--message"> <p
v-if="lastMessageInChat"
class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
>
<fluent-icon <fluent-icon
v-if="isMessagePrivate" v-if="isMessagePrivate"
size="16" size="16"
class="message--attachment-icon last-message-icon" class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
icon="lock-closed" icon="lock-closed"
/> />
<fluent-icon <fluent-icon
v-else-if="messageByAgent" v-else-if="messageByAgent"
size="16" size="16"
class="message--attachment-icon last-message-icon" class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
icon="arrow-reply" icon="arrow-reply"
/> />
<fluent-icon <fluent-icon
v-else-if="isMessageAnActivity" v-else-if="isMessageAnActivity"
size="16" size="16"
class="message--attachment-icon last-message-icon" class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
icon="info" icon="info"
/> />
<span v-if="lastMessageInChat.content"> <span v-if="lastMessageInChat.content">
@@ -75,7 +84,7 @@
<fluent-icon <fluent-icon
v-if="attachmentIcon" v-if="attachmentIcon"
size="16" size="16"
class="message--attachment-icon" class="-mt-0.5 align-middle inline-block"
:icon="attachmentIcon" :icon="attachmentIcon"
/> />
{{ this.$t(`${attachmentMessageContent}`) }} {{ this.$t(`${attachmentMessageContent}`) }}
@@ -84,20 +93,31 @@
{{ $t('CHAT_LIST.NO_CONTENT') }} {{ $t('CHAT_LIST.NO_CONTENT') }}
</span> </span>
</p> </p>
<p v-else class="conversation--message"> <p
<fluent-icon size="16" class="message--attachment-icon" icon="info" /> v-else
class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
>
<fluent-icon
size="16"
class="-mt-0.5 align-middle"
icon="info inline-block"
/>
<span> <span>
{{ this.$t(`CHAT_LIST.NO_MESSAGES`) }} {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
</span> </span>
</p> </p>
<div class="conversation--meta"> <div class="conversation--meta flex flex-col absolute right-4 top-4">
<span class="timestamp"> <span class="text-black-600 text-xxs font-normal leading-4 ml-auto">
<time-ago <time-ago
:last-activity-timestamp="chat.timestamp" :last-activity-timestamp="chat.timestamp"
:created-at-timestamp="chat.created_at" :created-at-timestamp="chat.created_at"
/> />
</span> </span>
<span class="unread">{{ unreadCount > 9 ? '9+' : unreadCount }}</span> <span
class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-green-400"
>
{{ unreadCount > 9 ? '9+' : unreadCount }}
</span>
</div> </div>
<card-labels :conversation-id="chat.id" /> <card-labels :conversation-id="chat.id" />
</div> </div>
@@ -400,94 +420,51 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.conversation { .conversation {
align-items: flex-start; &.unread-chat {
.unread {
@apply block;
}
.conversation--message {
@apply font-semibold;
}
.conversation--user {
@apply font-semibold;
}
}
&:hover { &.compact {
background: var(--color-background-light); @apply pl-0;
.conversation--details {
@apply rounded-sm ml-0 pl-5 pr-2;
}
} }
&::v-deep .user-thumbnail-box { &::v-deep .user-thumbnail-box {
margin-top: var(--space-normal); @apply mt-4;
} }
}
.conversation-selected { &.conversation-selected {
background: var(--color-background-light); @apply bg-slate-25 dark:bg-slate-800;
}
.has-inbox-name {
&::v-deep .user-thumbnail-box {
margin-top: var(--space-large);
} }
&.has-inbox-name {
&::v-deep .user-thumbnail-box {
@apply mt-8;
}
.checkbox-wrapper {
@apply mt-8;
}
.conversation--meta {
@apply mt-4;
}
}
.checkbox-wrapper { .checkbox-wrapper {
margin-top: var(--space-large); @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4 hover:bg-woot-100 dark:hover:bg-woot-800;
}
.conversation--meta {
margin-top: var(--space-normal);
}
}
.conversation--details { input[type='checkbox'] {
.conversation--user { @apply m-0 cursor-pointer;
padding-top: var(--space-micro); }
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 60%;
}
}
.last-message-icon {
color: var(--s-600);
}
.conversation--metadata {
display: flex;
justify-content: space-between;
.label {
background: none;
color: var(--s-500);
font-size: var(--font-size-mini);
font-weight: var(--font-weight-medium);
line-height: var(--space-slab);
padding: var(--space-micro) 0 var(--space-micro) 0;
}
.conversation-metadata-attributes {
display: flex;
gap: var(--space-small);
margin-left: var(--space-small);
}
.assignee-label {
display: inline-flex;
max-width: 50%;
}
}
.message--attachment-icon {
margin-top: var(--space-minus-micro);
vertical-align: middle;
}
.checkbox-wrapper {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin-top: var(--space-normal);
cursor: pointer;
&:hover {
background-color: var(--w-100);
}
input[type='checkbox'] {
margin: var(--space-zero);
cursor: pointer;
} }
} }
</style> </style>

80
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@@ -1,9 +1,13 @@
<template> <template>
<div class="conv-header flex-col md:flex-row"> <div
class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
>
<div <div
class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center" class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center"
> >
<div class="user"> <div
class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0"
>
<back-button v-if="showBackButton" :back-url="backButtonUrl" /> <back-button v-if="showBackButton" :back-url="backButtonUrl" />
<Thumbnail <Thumbnail
:src="currentContact.thumbnail" :src="currentContact.thumbnail"
@@ -11,31 +15,38 @@
:username="currentContact.name" :username="currentContact.name"
:status="currentContact.availability_status" :status="currentContact.availability_status"
/> />
<div class="user--profile__meta"> <div class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0">
<woot-button <woot-button
variant="link" variant="link"
color-scheme="secondary" color-scheme="secondary"
class="text-truncate" class="overflow-hidden whitespace-nowrap text-ellipsis"
@click.prevent="$emit('contact-panel-toggle')" @click.prevent="$emit('contact-panel-toggle')"
> >
<h3 class="sub-block-title user--name text-truncate"> <h3
class="text-base inline-block leading-tight capitalize m-0 p-0 text-ellipsis overflow-hidden whitespace-nowrap text-slate-900 dark:text-slate-100"
>
<span>{{ currentContact.name }}</span> <span>{{ currentContact.name }}</span>
<fluent-icon <fluent-icon
v-if="!isHMACVerified" v-if="!isHMACVerified"
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')" v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
size="14" size="14"
class="hmac-warning__icon" class="text-yellow-600 dark:text-yellow-500 my-0 mx-0.5"
icon="warning" icon="warning"
/> />
</h3> </h3>
</woot-button> </woot-button>
<div class="conversation--header--actions text-truncate"> <div
class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
>
<inbox-name v-if="hasMultipleInboxes" :inbox="inbox" /> <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
<span v-if="isSnoozed" class="snoozed--display-text"> <span
v-if="isSnoozed"
class="font-medium text-yellow-600 dark:text-yellow-500"
>
{{ snoozedDisplayText }} {{ snoozedDisplayText }}
</span> </span>
<woot-button <woot-button
class="user--profile__button" class="p-0"
size="small" size="small"
variant="link" variant="link"
@click="$emit('contact-panel-toggle')" @click="$emit('contact-panel-toggle')"
@@ -46,8 +57,8 @@
</div> </div>
</div> </div>
<div <div
class="header-actions-wrap mt-3 lg:mt-0" class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
:class="{ 'has-open-sidebar': isContactPanelOpen }" :class="{ 'justify-end': isContactPanelOpen }"
> >
<more-actions :conversation-id="currentChat.id" /> <more-actions :conversation-id="currentChat.id" />
</div> </div>
@@ -161,54 +172,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.conv-header {
flex: 0 0 var(--space-jumbo);
flex-direction: row;
}
.option__desc {
display: flex;
align-items: center;
}
.option__desc {
&::v-deep .status-badge {
margin-right: var(--space-small);
min-width: 0;
flex-shrink: 0;
}
}
.user--name {
display: inline-block;
line-height: 1.2;
text-transform: capitalize;
margin: 0;
padding: 0;
}
.conversation--header--actions { .conversation--header--actions {
align-items: center;
display: flex;
font-size: var(--font-size-mini);
gap: var(--space-small);
::v-deep .inbox--name { ::v-deep .inbox--name {
margin: 0; @apply m-0;
} }
.user--profile__button {
padding: 0;
}
.snoozed--display-text {
font-weight: var(--font-weight-medium);
color: var(--y-600);
}
}
.hmac-warning__icon {
color: var(--y-600);
margin: 0 var(--space-micro);
} }
</style> </style>

26
app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<woot-modal :show.sync="show" :on-close="onCancel"> <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 <woot-modal-header
:header-title="$t('EMAIL_TRANSCRIPT.TITLE')" :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
:header-content="$t('EMAIL_TRANSCRIPT.DESC')" :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
/> />
<form @submit.prevent="onSubmit"> <form class="w-full" @submit.prevent="onSubmit">
<div class="medium-12 columns"> <div class="w-full">
<div v-if="currentChat.meta.sender && currentChat.meta.sender.email"> <div v-if="currentChat.meta.sender && currentChat.meta.sender.email">
<input <input
id="contact" id="contact"
@@ -43,7 +43,7 @@
$t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS') $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
}}</label> }}</label>
</div> </div>
<div v-if="sentToOtherEmailAddress" class="medium-6 columns"> <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
<label :class="{ error: $v.email.$error }"> <label :class="{ error: $v.email.$error }">
<input <input
v-model.trim="email" v-model.trim="email"
@@ -57,16 +57,14 @@
</label> </label>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<div class="medium-12 row"> <woot-submit-button
<woot-submit-button :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
:button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')" :disabled="!isFormValid"
:disabled="!isFormValid" />
/> <button class="button clear" @click.prevent="onCancel">
<button class="button clear" @click.prevent="onCancel"> {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
{{ $t('EMAIL_TRANSCRIPT.CANCEL') }} </button>
</button>
</div>
</div> </div>
</form> </form>
</div> </div>

17
app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
View File

@@ -1,5 +1,9 @@
<template> <template>
<select v-model="activeValue" class="status--filter" @change="onTabChange()"> <select
v-model="activeValue"
class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
@change="onTabChange()"
>
<option v-for="(value, status) in items" :key="status" :value="status"> <option v-for="(value, status) in items" :key="status" :value="status">
{{ $t(`${pathPrefix}.${status}.TEXT`) }} {{ $t(`${pathPrefix}.${status}.TEXT`) }}
</option> </option>
@@ -42,14 +46,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.status--filter {
background-color: var(--color-background-light);
border: 1px solid var(--color-border);
font-size: var(--font-size-mini);
height: var(--space-medium);
margin: 0 var(--space-smaller);
padding: 0 var(--space-medium) 0 var(--space-small);
width: 126px;
}
</style>

136
app/javascript/dashboard/components/widgets/conversation/Message.vue
View File

@@ -511,94 +511,82 @@ export default {
<style lang="scss"> <style lang="scss">
.wrap { .wrap {
> .bubble { > .bubble {
min-width: 128px; @apply min-w-[128px];
&.is-image, &.is-image,
&.is-video { &.is-video {
padding: 0; @apply p-0 overflow-hidden;
overflow: hidden;
.image, .image,
.video { .video {
max-width: 20rem; @apply max-w-[20rem] p-0.5;
padding: var(--space-micro);
> img, > img,
> video { > video {
border-radius: var(--border-radius-medium); @apply rounded-lg;
} }
> video { > video {
height: 100%; @apply h-full w-full object-cover;
object-fit: cover;
width: 100%;
} }
} }
.video { .video {
height: 11.25rem; @apply h-[11.25rem];
} }
} }
&.is-image.is-text > .message-text__wrap, &.is-image.is-text > .message-text__wrap,
&.is-video.is-text > .message-text__wrap { &.is-video.is-text > .message-text__wrap {
max-width: 20rem; @apply max-w-[20rem] py-2 px-4;
padding: var(--space-small) var(--space-normal);
} }
&.is-private .file.message-text__wrap { &.is-private .file.message-text__wrap {
.file--icon { .file--icon {
color: var(--w-400); @apply text-woot-400 dark:text-woot-400;
} }
.text-block-title { .text-block-title {
color: #3c4858; @apply text-slate-700 dark:text-slate-700;
} }
.download.button { .download.button {
color: var(--w-400); @apply text-woot-400 dark:text-woot-400;
} }
} }
&.is-private.is-text > .message-text__wrap .link { &.is-private.is-text > .message-text__wrap .link {
color: var(--w-700); @apply text-woot-700 dark:text-woot-700;
} }
&.is-private.is-text > .message-text__wrap .prosemirror-mention-node { &.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
font-weight: var(--font-weight-black); @apply font-bold bg-none rounded-sm p-0 text-slate-700 dark:text-slate-700 underline;
background: none;
border-radius: var(--border-radius-small);
padding: 0;
color: var(--color-body);
text-decoration: underline;
} }
&.is-from-bot { &.is-from-bot {
background: var(--v-400); @apply bg-violet-400 dark:bg-violet-400;
.message-text--metadata .time { .message-text--metadata .time {
color: var(--v-50); @apply text-violet-50 dark:text-violet-50;
} }
&.is-private .message-text--metadata .time { &.is-private .message-text--metadata .time {
color: var(--s-400); @apply text-slate-400 dark:text-slate-400;
} }
} }
&.is-failed { &.is-failed {
background: var(--r-200); @apply bg-red-200 dark:bg-red-200;
.message-text--metadata .time { .message-text--metadata .time {
color: var(--r-50); @apply text-red-50 dark:text-red-50;
} }
} }
} }
&.is-pending { &.is-pending {
position: relative; @apply relative opacity-80;
opacity: 0.8;
.spinner { .spinner {
position: absolute; @apply absolute bottom-1 right-1;
bottom: var(--space-smaller);
right: var(--space-smaller);
} }
> .is-image.is-text.bubble > .message-text__wrap { > .is-image.is-text.bubble > .message-text__wrap {
padding: 0; @apply p-0;
} }
} }
} }
@@ -608,135 +596,97 @@ export default {
} }
.sender--info { .sender--info {
align-items: center; @apply items-center text-black-700 dark:text-black-100 inline-flex py-1 px-0;
color: var(--b-700);
display: inline-flex;
padding: var(--space-smaller) 0;
.sender--available-name { .sender--available-name {
font-size: var(--font-size-mini); @apply text-xs ml-1;
margin-left: var(--space-smaller);
} }
} }
.message-failed--alert { .message-failed--alert {
color: var(--r-900); @apply text-red-900 dark:text-red-900 flex-grow text-right mt-1 mr-1 mb-0 ml-0;
flex-grow: 1;
text-align: right;
margin-top: var(--space-smaller) var(--space-smaller) 0 0;
} }
li.left, li.left,
li.right { li.right {
display: flex; @apply flex items-end;
align-items: flex-end;
} }
li.left.has-tweet-menu .context-menu { li.left.has-tweet-menu .context-menu {
margin-bottom: var(--space-medium); @apply mb-6;
} }
li.has-bg { li.has-bg {
background: var(--w-75); @apply bg-woot-75 dark:bg-woot-600;
} }
li.right .context-menu-wrap { li.right .context-menu-wrap {
margin-left: auto; @apply ml-auto;
} }
li.right { li.right {
flex-direction: row-reverse; @apply flex-row-reverse justify-end;
justify-content: flex-end;
.wrap.is-pending { .wrap.is-pending {
margin-left: auto; @apply ml-auto;
} }
.wrap.is-failed { .wrap.is-failed {
display: flex; @apply flex items-end ml-auto;
align-items: flex-end;
margin-left: auto;
} }
} }
.has-context-menu { .has-context-menu {
background: var(--color-background); @apply bg-slate-50 dark:bg-slate-700;
} }
.context-menu { .context-menu {
position: relative; @apply relative;
} }
/* Markdown styling */ /* Markdown styling */
.bubble .text-content { .bubble .text-content {
p code { p code {
background-color: var(--s-75); @apply bg-slate-75 dark:bg-slate-700 inline-block leading-none rounded-sm p-1;
display: inline-block;
line-height: 1;
border-radius: var(--border-radius-small);
padding: var(--space-smaller);
} }
pre { pre {
background-color: var(--s-75); @apply bg-slate-75 dark:bg-slate-700 block border-slate-75 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-md p-2 mt-1 mb-2 leading-relaxed whitespace-pre-wrap;
border-color: var(--s-75);
color: var(--s-800);
border-radius: var(--border-radius-normal);
padding: var(--space-small);
margin-top: var(--space-smaller);
margin-bottom: var(--space-small);
display: block;
line-height: 1.7;
white-space: pre-wrap;
code { code {
background-color: transparent; @apply bg-transparent text-slate-800 dark:text-slate-100 p-0;
color: var(--s-800);
padding: 0;
} }
} }
blockquote { blockquote {
border-left: var(--space-micro) solid var(--s-75); @apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-700 text-slate-800 dark:text-slate-100;
color: var(--s-800);
margin: var(--space-smaller) 0;
padding: var(--space-small) var(--space-small) 0 var(--space-normal);
} }
} }
.right .bubble .text-content { .right .bubble .text-content {
p code { p code {
background-color: var(--w-600); @apply bg-woot-600 dark:bg-woot-600 text-white dark:text-white;
color: var(--white);
} }
pre { pre {
background-color: var(--w-800); @apply bg-woot-800 dark:bg-woot-800 border-woot-700 dark:border-woot-700 text-white dark:text-white;
border-color: var(--w-700);
color: var(--white);
code { code {
background-color: transparent; @apply bg-transparent text-white dark:text-white;
color: var(--white);
} }
} }
blockquote { blockquote {
border-left: var(--space-micro) solid var(--w-400); @apply border-l-4 border-solid border-woot-400 dark:border-woot-400 text-white dark:text-white;
color: var(--white);
p { p {
color: var(--w-75); @apply text-woot-75 dark:text-woot-75;
} }
} }
} }
.story-reply-quote { .story-reply-quote {
border-left: var(--space-micro) solid var(--s-75); @apply mt-2 mx-4 mb-0 px-2 pb-0 pt-2 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200;
color: var(--s-600);
margin: var(--space-small) var(--space-normal) 0;
padding: var(--space-small) var(--space-small) 0 var(--space-small);
} }
</style> </style>

103
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="view-box fill-height"> <div class="m-0 flex flex-col justify-between h-full flex-grow min-w-0">
<banner <banner
v-if="!currentChat.can_reply" v-if="!currentChat.can_reply"
color-scheme="alert" color-scheme="alert"
@@ -16,19 +16,19 @@
@close="removeTweetSelection" @close="removeTweetSelection"
/> />
<div class="sidebar-toggle__wrap"> <div class="flex justify-end">
<woot-button <woot-button
variant="smooth" variant="smooth"
size="tiny" size="tiny"
color-scheme="secondary" color-scheme="secondary"
class="sidebar-toggle--button" class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
:icon="isRightOrLeftIcon" :icon="isRightOrLeftIcon"
@click="onToggleContactPanel" @click="onToggleContactPanel"
/> />
</div> </div>
<ul class="conversation-panel"> <ul class="conversation-panel">
<transition name="slide-up"> <transition name="slide-up">
<li class="spinner--container"> <li class="min-h-[4rem]">
<span v-if="shouldShowSpinner" class="spinner message" /> <span v-if="shouldShowSpinner" class="spinner message" />
</li> </li>
</transition> </transition>
@@ -44,7 +44,7 @@
:is-web-widget-inbox="isAWebWidgetInbox" :is-web-widget-inbox="isAWebWidgetInbox"
/> />
<li v-show="unreadMessageCount != 0" class="unread--toast"> <li v-show="unreadMessageCount != 0" class="unread--toast">
<span class="text-uppercase"> <span>
{{ unreadMessageCount }} {{ unreadMessageCount }}
{{ {{
unreadMessageCount > 1 unreadMessageCount > 1
@@ -535,68 +535,41 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped>
.spinner--container { @tailwind components;
min-height: var(--space-jumbo); @layer components {
} .rounded-bl-calc {
border-bottom-left-radius: calc(1.5rem + 1px);
.view-box.fill-height {
height: auto;
flex-grow: 1;
min-width: 0;
}
.modal-mask {
&::v-deep {
.ProseMirror-woot-style {
max-height: 25rem;
}
.reply-box {
border: 1px solid var(--color-border);
max-width: 75rem;
width: 70%;
}
.reply-box .reply-box__top {
position: relative;
min-height: 27.5rem;
}
.reply-box__top .input {
min-height: 27.5rem;
}
.emoji-dialog {
position: fixed;
left: unset;
position: absolute;
bottom: var(--space-smaller);
}
} }
}
.sidebar-toggle__wrap {
display: flex;
justify-content: flex-end;
.sidebar-toggle--button { .rounded-tl-calc {
position: fixed; border-top-left-radius: calc(1.5rem + 1px);
}
top: var(--space-mega); }
z-index: var(--z-index-low); </style>
background: var(--white); <style scoped lang="scss">
.modal-mask {
padding: inherit 0; &::v-deep {
border-top-left-radius: calc( .ProseMirror-woot-style {
var(--space-medium) + 1px @apply max-h-[25rem];
); /* 100px of height + 10px of border */ }
border-bottom-left-radius: calc(
var(--space-medium) + 1px .reply-box {
); /* 100px of height + 10px of border */ @apply border border-solid border-slate-75 dark:border-slate-600 max-w-[75rem] w-[70%];
border: 1px solid var(--color-border-light); }
border-right: 0;
box-sizing: border-box; .reply-box .reply-box__top {
@apply relative min-h-[27.5rem];
}
.reply-box__top .input {
@apply min-h-[27.5rem];
}
.emoji-dialog {
@apply absolute left-auto bottom-1;
}
} }
} }
</style> </style>

24
app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex-container actions--container"> <div class="flex actions--container relative items-center gap-2">
<woot-button <woot-button
v-if="!currentChat.muted" v-if="!currentChat.muted"
v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')" v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
@@ -87,31 +87,15 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.actions--container {
align-items: center;
.resolve-actions {
margin-left: var(--space-small);
}
}
.more--button { .more--button {
align-items: center; @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
display: flex;
margin-left: var(--space-small);
}
.actions--container {
position: relative;
} }
.dropdown-pane { .dropdown-pane {
right: var(--space-minus-small); @apply -right-2 top-12;
top: 48px;
} }
.icon { .icon {
margin-right: var(--space-smaller); @apply mr-1 rtl:mr-0 rtl:ml-1 min-w-[1rem];
min-width: var(--space-normal);
} }
</style> </style>

6
app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
View File

@@ -6,10 +6,10 @@
delay: { show: 1500, hide: 0 }, delay: { show: 1500, hide: 0 },
hideOnClick: true, hideOnClick: true,
}" }"
class="shrink-0 rounded-xs inline-flex w-3 h-3 " class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
:class="{ :class="{
'bg-red-50 text-red-500': isUrgent, 'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600': isUrgent,
'bg-slate-50 text-slate-600': !isUrgent, 'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200': !isUrgent,
}" }"
> >
<fluent-icon <fluent-icon

37
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View File

@@ -1091,51 +1091,34 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.send-button { .send-button {
margin-bottom: 0; @apply mb-0;
} }
.message-signature-wrap { .message-signature-wrap {
margin: 0 var(--space-normal); @apply my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto;
padding: var(--space-small);
display: flex;
align-items: baseline;
justify-content: space-between;
border: 1px dashed var(--s-100);
border-radius: var(--border-radius-small);
max-height: 8vh;
overflow: auto;
&:hover {
background: var(--s-25);
}
} }
.message-signature { .message-signature {
width: fit-content; @apply w-fit m-0;
margin: 0;
} }
.attachment-preview-box { .attachment-preview-box {
padding: 0 var(--space-normal); @apply bg-transparent py-0 px-4;
background: transparent;
} }
.reply-box { .reply-box {
@apply border-r border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900; @apply border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
&.is-private { &.is-private {
background: var(--y-50); @apply bg-yellow-50 dark:bg-yellow-50;
} }
} }
.send-button { .send-button {
margin-bottom: 0; @apply mb-0;
} }
.reply-box__top { .reply-box__top {
position: relative; @apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
padding: 0 var(--space-normal);
border-top: 1px solid var(--color-border);
margin-top: -1px;
} }
.emoji-dialog { .emoji-dialog {
@@ -1177,10 +1160,10 @@ export default {
} }
} }
.message-signature { .message-signature {
margin-bottom: 0; @apply mb-0;
::v-deep p:last-child { ::v-deep p:last-child {
margin-bottom: 0; @apply mb-0;
} }
} }

20
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
View File

@@ -147,31 +147,23 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.input-group-wrap .message { .input-group-wrap .message {
font-size: var(--font-size-small); @apply text-sm text-red-500 dark:text-red-500;
color: var(--r-500);
} }
.input-group { .input-group {
border-bottom: 1px solid var(--color-border); @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
margin-bottom: var(--space-smaller);
margin-top: var(--space-smaller);
.input-group-label { .input-group-label {
border-color: transparent; @apply border-transparent bg-transparent text-xs font-semibold pl-0;
background: transparent;
font-size: var(--font-size-mini);
font-weight: var(--font-weight-bold);
padding-left: 0;
} }
.input-group-field::v-deep input { .input-group-field::v-deep input {
margin-bottom: 0; @apply mb-0 border-transparent;
border-color: transparent;
} }
} }
.input-group.error { .input-group.error {
border-bottom-color: var(--r-500); @apply border-b-red-500 dark:border-b-red-500;
.input-group-label { .input-group-label {
color: var(--r-500); @apply text-red-500 dark:text-red-500;
} }
} }
</style> </style>

67
app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
View File

@@ -9,21 +9,28 @@
:id="`mention-item-${index}`" :id="`mention-item-${index}`"
:key="agent.id" :key="agent.id"
:class="{ active: index === selectedIndex }" :class="{ active: index === selectedIndex }"
class="last:mb-2 items-center rounded-md flex p-2"
@click="onAgentSelect(index)" @click="onAgentSelect(index)"
@mouseover="onHover(index)" @mouseover="onHover(index)"
> >
<div class="mention--thumbnail"> <div class="mr-2">
<woot-thumbnail <woot-thumbnail
:src="agent.thumbnail" :src="agent.thumbnail"
:username="agent.name" :username="agent.name"
size="32px" size="32px"
/> />
</div> </div>
<div class="mention--metadata text-truncate"> <div
<h5 class="text-block-title mention--user-name text-truncate"> class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
>
<h5
class="mention--user-name mb-0 text-sm text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ agent.name }} {{ agent.name }}
</h5> </h5>
<div class="text-truncate mention--email text-truncate"> <div
class="mention--email overflow-hidden whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300 text-xs"
>
{{ agent.email }} {{ agent.email }}
</div> </div>
</div> </div>
@@ -88,69 +95,29 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.mention--box { .mention--box {
background: var(--white); @apply bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-[100] pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800;
border-radius: var(--border-radius-normal);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-medium);
font-size: var(--font-size-small);
left: 0;
bottom: 100%;
line-height: 1.2;
max-height: 12.5rem;
overflow: auto;
padding: var(--space-small) var(--space-small) 0 var(--space-small);
position: absolute;
width: 100%;
z-index: 100;
&.with-bottom-border { &.with-bottom-border {
border-bottom: var(--space-small) solid var(--white); @apply border-b-[0.5rem] border-solid border-white dark:border-slate-600;
li { li {
&:last-child { &:last-child {
margin-bottom: 0; @apply mb-0;
} }
} }
} }
li { li {
align-items: center;
border-radius: var(--border-radius-normal);
display: flex;
padding: var(--space-small);
&.active { &.active {
background: var(--s-50); @apply bg-slate-50 dark:bg-slate-800;
.mention--user-name { .mention--user-name {
color: var(--s-900); @apply text-slate-900 dark:text-slate-100;
} }
.mention--email { .mention--email {
color: var(--s-800); @apply text-slate-800 dark:text-slate-200;
} }
} }
&:last-child {
margin-bottom: var(--space-small);
}
} }
} }
.mention--thumbnail {
margin-right: var(--space-small);
}
.mention--user-name {
margin-bottom: 0;
}
.mention--email {
color: var(--s-700);
font-size: var(--font-size-mini);
}
.mention--metadata {
flex: 1;
max-width: 100%;
}
</style> </style>

37
app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="medium-12 columns"> <div class="w-full">
<textarea <textarea
v-model="processedString" v-model="processedString"
rows="4" rows="4"
@@ -119,55 +119,40 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.template__variables-container { .template__variables-container {
padding: var(--space-one); @apply p-2.5;
} }
.variables-label { .variables-label {
font-size: var(--font-size-small); @apply text-sm font-semibold mb-2.5;
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-one);
} }
.template__variable-item { .template__variable-item {
align-items: center; @apply items-center flex mb-2.5;
display: flex;
margin-bottom: var(--space-one);
.label { .label {
font-size: var(--font-size-mini); @apply text-xs;
} }
.variable-input { .variable-input {
flex: 1; @apply flex-1 text-sm ml-2.5;
font-size: var(--font-size-small);
margin-left: var(--space-one);
} }
.variable-label { .variable-label {
background-color: var(--s-75); @apply bg-slate-75 dark:bg-slate-700 text-slate-700 dark:text-slate-100 inline-block rounded-md text-xs py-2.5 px-6;
border-radius: var(--border-radius-normal);
display: inline-block;
font-size: var(--font-size-mini);
padding: var(--space-one) var(--space-medium);
} }
} }
footer { footer {
display: flex; @apply flex justify-end;
justify-content: flex-end;
button { button {
margin-left: var(--space-one); @apply ml-2.5;
} }
} }
.error { .error {
background-color: var(--r-100); @apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
border-radius: var(--border-radius-normal);
color: var(--r-800);
padding: var(--space-one);
text-align: center;
} }
.template-input { .template-input {
background-color: var(--s-25); @apply bg-slate-25 dark:bg-slate-900 text-slate-700 dark:text-slate-100;
} }
</style> </style>

53
app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="medium-12 columns"> <div class="w-full">
<div class="templates__list-search"> <div class="templates__list-search">
<fluent-icon icon="search" class="search-icon" size="16" /> <fluent-icon icon="search" class="search-icon" size="16" />
<input <input
@@ -96,61 +96,35 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.flex-between { .flex-between {
display: flex; @apply flex justify-between mb-2.5;
justify-content: space-between;
margin-bottom: var(--space-one);
} }
.templates__list-search { .templates__list-search {
align-items: center; @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;
background-color: var(--s-25);
border-radius: var(--border-radius-medium);
border: 1px solid var(--s-100);
display: flex;
margin-bottom: var(--space-one);
padding: 0 var(--space-one);
.search-icon { .search-icon {
color: var(--s-400); @apply text-slate-400 dark:text-slate-300;
} }
.templates__search-input { .templates__search-input {
background-color: transparent; @apply bg-transparent border-0 text-xs h-auto m-0;
border: var(--space-large);
font-size: var(--font-size-mini);
height: unset;
margin: var(--space-zero);
} }
} }
.template__list-container { .template__list-container {
background-color: var(--s-25); @apply bg-slate-25 dark:bg-slate-900 rounded-md max-h-[18.75rem] overflow-y-auto p-2.5;
border-radius: var(--border-radius-medium);
max-height: 18.75rem;
overflow-y: auto;
padding: var(--space-one);
.template__list-item { .template__list-item {
border-radius: var(--border-radius-medium); @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-600;
cursor: pointer;
display: block;
padding: var(--space-one);
text-align: left;
width: 100%;
&:hover {
background-color: var(--w-50);
}
.label-title { .label-title {
font-size: var(--font-size-small); @apply text-sm;
} }
.label-category { .label-category {
margin-top: var(--space-two); @apply mt-5;
span { span {
font-size: var(--font-size-small); @apply text-sm font-semibold;
font-weight: var(--font-weight-bold);
} }
} }
@@ -161,13 +135,10 @@ export default {
} }
.strong { .strong {
font-size: var(--font-size-mini); @apply text-xs font-semibold;
font-weight: var(--font-weight-bold);
} }
hr { hr {
border-bottom: 1px solid var(--s-100); @apply border-b border-solid border-slate-100 dark:border-slate-700 my-2.5 mx-auto max-w-[95%];
margin: var(--space-one) auto;
max-width: 95%;
} }
</style> </style>

61
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
View File

@@ -256,25 +256,25 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.right { .right {
.message-text--metadata { .message-text--metadata {
align-items: center; @apply items-center;
.time { .time {
color: var(--w-100); @apply text-woot-100 dark:text-woot-100;
} }
.action--icon { .action--icon {
color: var(--white); @apply text-white dark:text-white;
&.read-tick { &.read-tick {
color: var(--v-100); @apply text-violet-100 dark:text-violet-100;
} }
&.read-indicator { &.read-indicator {
color: var(--g-200); @apply text-green-200 dark:text-green-200;
} }
} }
.lock--icon--private { .lock--icon--private {
color: var(--s-400); @apply text-slate-400 dark:text-slate-400;
} }
} }
} }
@@ -282,41 +282,31 @@ export default {
.left { .left {
.message-text--metadata { .message-text--metadata {
.time { .time {
color: var(--s-400); @apply text-slate-400 dark:text-slate-200;
} }
} }
} }
.message-text--metadata { .message-text--metadata {
align-items: flex-start; @apply items-start flex;
display: flex;
.time { .time {
margin-right: var(--space-small); @apply mr-2 block text-xxs leading-[1.8];
display: block;
font-size: var(--font-size-micro);
line-height: 1.8;
} }
.action--icon { .action--icon {
margin-right: var(--space-small); @apply mr-2 ml-2 text-slate-900 dark:text-slate-100;
margin-left: var(--space-small);
color: var(--s-900);
} }
a { a {
color: var(--s-900); @apply text-slate-900 dark:text-slate-100;
} }
} }
.activity-wrap { .activity-wrap {
.message-text--metadata { .message-text--metadata {
.time { .time {
color: var(--s-300); @apply ml-2 rtl:mr-2 rtl:ml-0 flex text-center text-xxs text-slate-300 dark:text-slate-200;
display: flex;
text-align: center;
font-size: var(--font-size-micro);
margin-left: 0;
} }
} }
} }
@@ -325,35 +315,28 @@ export default {
.is-video { .is-video {
.message-text--metadata { .message-text--metadata {
.time { .time {
bottom: var(--space-smaller); @apply bottom-1 text-white dark:text-slate-50 absolute right-2 whitespace-nowrap;
color: var(--white);
position: absolute;
right: var(--space-small);
white-space: nowrap;
&.has-status-icon { &.has-status-icon {
right: var(--space-large); @apply right-8 leading-loose;
line-height: 2;
} }
} }
.read-tick { .read-tick {
position: absolute; @apply absolute bottom-2 right-2;
bottom: var(--space-small);
right: var(--space-small);
} }
} }
} }
.is-private { .is-private {
.message-text--metadata { .message-text--metadata {
align-items: center; @apply items-center;
.time { .time {
color: var(--s-400); @apply text-slate-400 dark:text-slate-400;
} }
.icon { .icon {
color: var(--s-400); @apply text-slate-400 dark:text-slate-400;
} }
} }
@@ -361,18 +344,16 @@ export default {
&.is-video { &.is-video {
.time { .time {
position: inherit; position: inherit;
padding-left: var(--space-one); @apply pl-2.5;
} }
} }
} }
.delivered-icon { .delivered-icon {
margin-left: -var(--space-normal); @apply ml-4;
} }
.read-indicator-wrap { .read-indicator-wrap {
line-height: 1; @apply leading-none flex items-center;
display: flex;
align-items: center;
} }
</style> </style>

4
app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
View File

@@ -2,7 +2,9 @@
<div class="contact--group"> <div class="contact--group">
<fluent-icon icon="call" class="file--icon" size="18" /> <fluent-icon icon="call" class="file--icon" size="18" />
<div class="meta"> <div class="meta">
<p class="text-truncate margin-bottom-0"> <p
class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
>
{{ phoneNumber }} {{ phoneNumber }}
</p> </p>
</div> </div>

24
app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
View File

@@ -4,7 +4,9 @@
<fluent-icon icon="location" class="file--icon" size="32" /> <fluent-icon icon="location" class="file--icon" size="32" />
</div> </div>
<div class="meta"> <div class="meta">
<h5 class="text-block-title text-truncate"> <h5
class="text-block-title overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ name }} {{ name }}
</h5> </h5>
<div class="link-wrap"> <div class="link-wrap">
@@ -47,32 +49,22 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.location { .location {
display: flex; @apply flex flex-row py-1 px-0 cursor-pointer;
flex-direction: row;
padding: var(--space-smaller) 0;
cursor: pointer;
.icon-wrap { .icon-wrap {
color: var(--s-600); @apply text-slate-600 dark:text-slate-200 leading-none my-0 mx-1;
line-height: 1;
margin: 0 var(--space-smaller);
} }
.text-block-title { .text-block-title {
margin: 0; @apply m-0 text-slate-800 dark:text-slate-100 break-words;
color: var(--s-800);
word-break: break-word;
} }
.meta { .meta {
display: flex; @apply flex flex-col items-center pr-4;
flex-direction: column;
align-items: flex-start;
padding-right: var(--space-normal);
} }
.link-wrap { .link-wrap {
display: flex; @apply flex;
} }
} }
</style> </style>

183
app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
View File

@@ -5,26 +5,49 @@
:show-close-button="false" :show-close-button="false"
:on-close="onClose" :on-close="onClose"
> >
<div v-on-clickaway="onClose" class="gallery-modal--wrap" @click="onClose"> <div
<div class="gallery-modal--header"> v-on-clickaway="onClose"
<div class="header-info--wrap" @click.stop> class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit]"
@click="onClose"
>
<div class="items-center flex h-16 justify-between py-2 px-6 w-full">
<div class="items-center flex justify-start min-w-[15rem]" @click.stop>
<thumbnail <thumbnail
:username="senderDetails.name" :username="senderDetails.name"
:src="senderDetails.avatar" :src="senderDetails.avatar"
/> />
<div class="header-info"> <div
<h3 class="sub-block-title sender-name"> class="flex items-start flex-col justify-center ml-2 rtl:ml-0 rtl:mr-2"
<span class="text-truncate">{{ senderDetails.name }}</span> >
<h3
class="sub-block-title inline-block leading-[1.4] m-0 p-0 capitalize"
>
<span
class="text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ senderDetails.name }}
</span>
</h3> </h3>
<span class="time-stamp text-truncate">{{ readableTime }}</span> <span
class="text-xs m-0 p-0 text-slate-400 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ readableTime }}
</span>
</div> </div>
</div> </div>
<div class="file-name--header text-block-title"> <div
<span class="text-truncate"> class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-block-title"
>
<span
class="text-slate-700 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ fileNameFromDataUrl }} {{ fileNameFromDataUrl }}
</span> </span>
</div> </div>
<div class="header-actions" @click.stop> <div
class="items-center flex gap-2 justify-end min-w-[15rem]"
@click.stop
>
<woot-button <woot-button
size="large" size="large"
color-scheme="secondary" color-scheme="secondary"
@@ -41,8 +64,8 @@
/> />
</div> </div>
</div> </div>
<div class="gallery-modal--body"> <div class="items-center flex h-full justify-center w-full">
<div class="attachment-toggle--button"> <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
<woot-button <woot-button
v-if="hasMoreThanOneAttachment" v-if="hasMoreThanOneAttachment"
size="large" size="large"
@@ -58,13 +81,13 @@
" "
/> />
</div> </div>
<div class="attachments-viewer"> <div class="flex items-center flex-col justify-center w-full h-full">
<div class="attachment-view"> <div>
<img <img
v-if="isImage" v-if="isImage"
:key="activeAttachment.message_id" :key="activeAttachment.message_id"
:src="activeAttachment.data_url" :src="activeAttachment.data_url"
class="modal-image skip-context-menu" class="modal-image skip-context-menu my-0 mx-auto"
@click.stop @click.stop
/> />
<video <video
@@ -73,7 +96,7 @@
:src="activeAttachment.data_url" :src="activeAttachment.data_url"
controls controls
playsInline playsInline
class="modal-video skip-context-menu" class="modal-video skip-context-menu my-0 mx-auto"
@click.stop @click.stop
/> />
<audio <audio
@@ -87,7 +110,7 @@
</audio> </audio>
</div> </div>
</div> </div>
<div class="attachment-toggle--button"> <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
<woot-button <woot-button
v-if="hasMoreThanOneAttachment" v-if="hasMoreThanOneAttachment"
size="large" size="large"
@@ -104,8 +127,10 @@
/> />
</div> </div>
</div> </div>
<div class="gallery-modal--footer"> <div class="items-center flex h-16 justify-center w-full py-2 px-6">
<div class="header-count text-block-title"> <div
class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-block-title"
>
<span class="count"> <span class="count">
{{ `${activeImageIndex + 1} / ${allAttachments.length}` }} {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
</span> </span>
@@ -252,123 +277,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.gallery-modal--wrap {
display: flex;
flex-direction: column;
height: inherit;
width: inherit;
.gallery-modal--header {
align-items: center;
display: flex;
height: var(--space-jumbo);
justify-content: space-between;
padding: var(--space-small) var(--space-medium);
width: 100%;
.header-info--wrap {
align-items: center;
display: flex;
justify-content: flex-start;
min-width: var(--space-giga);
.header-info {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: var(--space-small);
.sender-name {
display: inline-block;
line-height: 1.4;
margin: 0;
padding: 0;
text-transform: capitalize;
}
.time-stamp {
color: var(--s-400);
font-size: var(--font-size-mini);
margin: 0;
padding: 0;
}
}
}
.file-name--header {
align-items: center;
color: var(--s-700);
display: flex;
font-weight: var(--font-weight-bold);
justify-content: flex-start;
min-width: 0;
padding: var(--space-smaller);
width: auto;
}
.header-actions {
align-items: center;
display: flex;
gap: var(--space-small);
justify-content: flex-end;
min-width: var(--space-giga);
}
}
.gallery-modal--body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.gallery-modal--footer {
align-items: center;
display: flex;
height: var(--space-jumbo);
justify-content: center;
padding: var(--space-small) var(--space-medium);
width: 100%;
.header-count {
align-items: center;
border-radius: var(--border-radius-small);
background-color: var(--s-25);
color: var(--s-600);
display: flex;
font-weight: var(--font-weight-bold);
justify-content: center;
min-width: 5rem;
padding: var(--space-smaller);
}
}
.attachments-viewer {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
width: 100%;
.attachment-view {
img {
margin: 0 auto;
}
video {
margin: 0 auto;
}
}
}
.attachment-toggle--button {
display: flex;
justify-content: center;
min-width: var(--space-mega);
width: var(--space-mega);
}
}
</style>

11
app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="menu-container"> <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
<menu-item <menu-item
v-if="!hasUnreadMessages" v-if="!hasUnreadMessages"
:option="unreadOption" :option="unreadOption"
@@ -243,12 +243,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.menu-container {
padding: var(--space-smaller);
background-color: var(--white);
box-shadow: var(--shadow-context-menu);
border-radius: var(--border-radius-normal);
}
</style>

24
app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
View File

@@ -19,7 +19,9 @@
size="20px" size="20px"
class="agent-thumbnail" class="agent-thumbnail"
/> />
<p class="menu-label text-truncate">{{ option.label }}</p> <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
{{ option.label }}
</p>
</div> </div>
</template> </template>
@@ -44,22 +46,14 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.menu { .menu {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: calc(var(--space-mega) * 2); width: calc(var(--space-mega) * 2);
padding: var(--space-smaller); @apply flex items-center flex-nowrap p-1 rounded-sm overflow-hidden cursor-pointer;
border-radius: var(--border-radius-small);
overflow: hidden;
.menu-label { .menu-label {
margin: 0 var(--space-small); @apply my-0 mx-2 text-xs flex-shrink-0;
font-size: var(--font-size-mini);
flex-shrink: 0;
} }
&:hover { &:hover {
background-color: var(--w-500); @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-slate-50;
color: var(--white);
} }
} }
@@ -68,10 +62,6 @@ export default {
} }
.label-pill { .label-pill {
width: var(--space-normal); @apply w-4 h-4 rounded-full border border-slate-50 border-solid dark:border-slate-900 flex-shrink-0;
height: var(--space-normal);
border-radius: var(--border-radius-rounded);
border: 1px solid var(--s-50);
flex-shrink: 0;
} }
</style> </style>

66
app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
View File

@@ -1,14 +1,17 @@
<template> <template>
<div <div
class="menu-with-submenu flex-between" class="menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-white dark:bg-slate-700 justify-between hover:bg-woot-75 cursor-pointer dark:hover:bg-slate-800"
:class="{ disabled: !subMenuAvailable }" :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
> >
<div class="menu-left"> <div class="flex items-center">
<fluent-icon :icon="option.icon" size="14" class="menu-icon" /> <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
<p class="menu-label">{{ option.label }}</p> <p class="my-0 mx-2 text-xs">{{ option.label }}</p>
</div> </div>
<fluent-icon icon="chevron-right" size="12" /> <fluent-icon icon="chevron-right" size="12" />
<div v-if="subMenuAvailable" class="submenu"> <div
v-if="subMenuAvailable"
class="submenu bg-white dark:bg-slate-700 p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
>
<slot /> <slot />
</div> </div>
</div> </div>
@@ -31,61 +34,12 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.menu-with-submenu { .menu-with-submenu {
width: 100%; min-width: calc(6.25rem * 2);
padding: var(--space-smaller);
border-radius: var(--border-radius-small);
position: relative;
min-width: calc(var(--space-mega) * 2);
background-color: var(--white);
.menu-left {
display: flex;
align-items: center;
.menu-label {
margin: 0 var(--space-small);
font-size: var(--font-size-mini);
}
}
.submenu {
padding: var(--space-smaller);
background-color: var(--white);
box-shadow: var(--shadow-context-menu);
border-radius: var(--border-radius-normal);
position: absolute;
position: absolute;
left: 100%;
top: 0;
display: none;
min-height: min-content;
max-height: var(--space-giga);
overflow-y: auto;
// Need this because Firefox adds a horizontal scrollbar, if a text is truncated inside.
overflow-x: hidden;
}
&:hover { &:hover {
background-color: var(--w-75);
.submenu { .submenu {
display: block; @apply block;
} }
&:before {
content: '';
position: absolute;
z-index: var(--z-index-highest);
bottom: -65%;
height: 75%;
right: 0%;
width: 50%;
clip-path: polygon(100% 0, 0% 0%, 100% 100%);
}
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
} }
} }
</style> </style>

103
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
View File

@@ -2,13 +2,7 @@
<div v-on-clickaway="onCloseAgentList" class="bulk-action__agents"> <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
<div class="triangle"> <div class="triangle">
<svg height="12" viewBox="0 0 24 12" width="24"> <svg height="12" viewBox="0 0 24 12" width="24">
<path <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
d="M20 12l-8-8-12 12"
fill="var(--white)"
fill-rule="evenodd"
stroke="var(--s-50)"
stroke-width="1px"
/>
</svg> </svg>
</div> </div>
<div class="header flex-between"> <div class="header flex-between">
@@ -190,110 +184,73 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.bulk-action__agents { .bulk-action__agents {
background-color: var(--white); @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
border-radius: var(--border-radius-large);
border: 1px solid var(--s-50);
box-shadow: var(--shadow-dropdown-pane);
max-width: 75%;
position: absolute;
right: var(--space-small);
top: var(--space-larger);
transform-origin: top right;
width: auto;
z-index: var(--z-index-twenty);
min-width: var(--space-giga);
.header { .header {
padding: var(--space-one); @apply p-2.5;
span { span {
font-size: var(--font-size-small); @apply text-sm font-medium;
font-weight: var(--font-weight-medium);
} }
} }
.container { .container {
max-height: var(--space-giga); @apply overflow-y-auto max-h-[15rem];
overflow-y: auto;
.agent__list-container { .agent__list-container {
height: 100%; @apply h-full;
} }
.agent-list-search { .agent-list-search {
padding: 0 var(--space-one); @apply py-0 px-2.5 bg-slate-50 dark:bg-slate-900 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
border: 1px solid var(--s-100);
border-radius: var(--border-radius-medium);
background-color: var(--s-50);
.search-icon { .search-icon {
color: var(--s-400); @apply text-slate-400 dark:text-slate-200;
} }
.agent--search_input { .agent--search_input {
border: 0; @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
font-size: var(--font-size-mini);
margin: 0;
background-color: transparent;
height: unset;
} }
} }
} }
.triangle { .triangle {
display: block;
z-index: var(--z-index-one);
position: absolute;
top: var(--space-minus-slab);
right: var(--triangle-position); right: var(--triangle-position);
text-align: left; @apply block z-10 absolute -top-3 text-left;
svg path {
@apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
}
} }
} }
ul { ul {
margin: 0; @apply m-0 list-none;
list-style: none;
li {
&:last-child {
.agent-list-item {
@apply last:rounded-b-lg;
}
}
}
} }
.agent-list-item { .agent-list-item {
display: flex; @apply flex items-center p-2.5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
align-items: center;
padding: var(--space-one);
cursor: pointer;
&:hover {
background-color: var(--s-50);
}
span { span {
font-size: var(--font-size-small); @apply text-sm;
} }
} }
.agent-confirmation-container { .agent-confirmation-container {
display: flex; @apply flex flex-col h-full p-2.5;
flex-direction: column;
height: 100%;
padding: var(--space-one);
p { p {
flex-grow: 1; @apply flex-grow;
} }
.agent-confirmation-actions { .agent-confirmation-actions {
width: 100%; @apply w-full grid grid-cols-2 gap-2.5;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-one);
} }
} }
.search-container { .search-container {
padding: 0 var(--space-one); @apply py-0 px-2.5 sticky top-0 z-20 bg-white dark:bg-slate-800;
position: sticky;
top: 0;
z-index: var(--z-index-twenty);
background-color: var(--white);
} }
.agent__list-loading { .agent__list-loading {
height: calc(95% - var(--space-one)); @apply m-2.5 rounded-md bg-slate-25 dark:bg-slate-900 flex items-center justify-center flex-col p-5 h-[calc(95%-6.25rem)];
margin: var(--space-one);
border-radius: var(--border-radius-medium);
background-color: var(--s-50);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: var(--space-two);
} }
</style> </style>

28
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
View File

@@ -194,33 +194,23 @@ export default {
} }
.bulk-action__container { .bulk-action__container {
border-bottom: 1px solid var(--s-100); @apply p-4 relative border-b border-solid border-slate-100 dark:border-slate-600/70;
padding: var(--space-normal);
position: relative;
} }
.bulk-action__panel { .bulk-action__panel {
cursor: pointer; @apply cursor-pointer;
span { span {
font-size: var(--font-size-mini); @apply text-xs my-0 mx-1;
margin: 0 var(--space-smaller);
} }
input[type='checkbox'] { input[type='checkbox'] {
cursor: pointer; @apply cursor-pointer m-0;
margin: var(--space-zero);
} }
} }
.bulk-action__alert { .bulk-action__alert {
background-color: var(--y-50); @apply bg-yellow-50 text-yellow-700 rounded text-xs mt-2 py-1 px-2 border border-solid border-yellow-300 dark:border-yellow-300/10 dark:bg-yellow-200/20 dark:text-yellow-400;
border-radius: var(--border-radius-small);
border: 1px solid var(--y-300);
color: var(--y-700);
font-size: var(--font-size-mini);
margin-top: var(--space-small);
padding: var(--space-smaller) var(--space-small);
} }
.popover-animation-enter-active, .popover-animation-enter-active,
@@ -229,23 +219,23 @@ export default {
} }
.popover-animation-enter { .popover-animation-enter {
opacity: 0;
transform: scale(0.95); transform: scale(0.95);
@apply opacity-0;
} }
.popover-animation-enter-to { .popover-animation-enter-to {
opacity: 1;
transform: scale(1); transform: scale(1);
@apply opacity-100;
} }
.popover-animation-leave { .popover-animation-leave {
opacity: 1;
transform: scale(1); transform: scale(1);
@apply opacity-100;
} }
.popover-animation-leave-to { .popover-animation-leave-to {
opacity: 0;
transform: scale(0.95); transform: scale(0.95);
@apply opacity-0;
} }
.label-actions-box { .label-actions-box {

146
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
View File

@@ -2,13 +2,7 @@
<div v-on-clickaway="onClose" class="labels-container"> <div v-on-clickaway="onClose" class="labels-container">
<div class="triangle"> <div class="triangle">
<svg height="12" viewBox="0 0 24 12" width="24"> <svg height="12" viewBox="0 0 24 12" width="24">
<path <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
d="M20 12l-8-8-12 12"
fill="var(--white)"
fill-rule="evenodd"
stroke="var(--s-50)"
stroke-width="1px"
/>
</svg> </svg>
</div> </div>
<div class="header flex-between"> <div class="header flex-between">
@@ -50,7 +44,11 @@
:value="label.title" :value="label.title"
class="label-checkbox" class="label-checkbox"
/> />
<span class="label-title text-truncate">{{ label.title }}</span> <span
class="label-title overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ label.title }}
</span>
<span <span
class="label-pill" class="label-pill"
:style="{ backgroundColor: label.color }" :style="{ backgroundColor: label.color }"
@@ -61,6 +59,7 @@
<footer class="labels-list__footer"> <footer class="labels-list__footer">
<woot-button <woot-button
size="small" size="small"
is-expanded
color-scheme="primary" color-scheme="primary"
:disabled="!selectedLabels.length" :disabled="!selectedLabels.length"
@click="$emit('assign', selectedLabels)" @click="$emit('assign', selectedLabels)"
@@ -108,178 +107,115 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.labels-list { .labels-list {
display: flex; @apply flex flex-col max-h-[15rem] min-h-[auto];
flex-direction: column;
max-height: var(--space-giga);
min-height: auto;
.labels-list__header { .labels-list__header {
background-color: var(--white); @apply bg-white dark:bg-slate-800 py-0 px-2.5;
padding: 0 var(--space-one);
} }
.labels-list__body { .labels-list__body {
flex: 1; @apply flex-1 overflow-y-auto py-2.5 mx-0;
overflow-y: auto;
padding: var(--space-one) 0;
} }
.labels-list__footer { .labels-list__footer {
padding: var(--space-small); @apply p-2;
button { button {
width: 100%; @apply w-full;
.button__content {
@apply text-center;
}
} }
} }
} }
.label-list-search { .label-list-search {
background-color: var(--s-50); @apply bg-slate-50 dark:bg-slate-900 py-0 px-2.5 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
border-radius: var(--border-radius-medium);
border: 1px solid var(--s-100);
padding: 0 var(--space-one);
.search-icon { .search-icon {
color: var(--s-400); @apply text-slate-400 dark:text-slate-200;
} }
.label--search_input { .label--search_input {
background-color: transparent; @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
border: 0;
font-size: var(--font-size-mini);
height: unset;
margin: 0;
} }
} }
.labels-container { .labels-container {
background-color: var(--white); @apply absolute right-2 top-12 origin-top-right w-auto z-20 max-w-[15rem] min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
border-radius: var(--border-radius-large);
border: 1px solid var(--s-50);
box-shadow: var(--shadow-dropdown-pane);
max-width: var(--space-giga);
min-width: var(--space-giga);
position: absolute;
right: var(--space-small);
top: var(--space-larger);
transform-origin: top right;
width: auto;
z-index: var(--z-index-twenty);
.header { .header {
padding: var(--space-one); @apply p-2.5;
span { span {
font-size: var(--font-size-small); @apply text-sm font-medium;
font-weight: var(--font-weight-medium);
} }
} }
.container { .container {
max-height: var(--space-giga); @apply max-h-[15rem] overflow-y-auto;
overflow-y: auto;
.label__list-container { .label__list-container {
height: 100%; @apply h-full;
}
.label-list-search {
padding: 0 var(--space-one);
border: 1px solid var(--s-100);
border-radius: var(--border-radius-medium);
background-color: var(--s-50);
.search-icon {
color: var(--s-400);
}
.label--search_input {
border: 0;
font-size: var(--font-size-mini);
margin: 0;
background-color: transparent;
height: unset;
}
} }
} }
.triangle { .triangle {
display: block;
position: absolute;
right: var(--triangle-position); right: var(--triangle-position);
text-align: left; @apply block z-10 absolute text-left -top-3;
top: var(--space-minus-slab);
z-index: var(--z-index-one); svg path {
@apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
}
} }
} }
ul { ul {
margin: 0; @apply m-0 list-none;
list-style: none;
} }
.labels-placeholder { .labels-placeholder {
padding: var(--space-small); @apply p-2;
} }
.label__list-item { .label__list-item {
margin: var(--space-smaller) 0; @apply my-1 mx-0 py-0 px-2.5;
padding: 0 var(--space-one);
.item { .item {
align-items: center; @apply items-center rounded-md cursor-pointer flex py-1 px-2.5 hover:bg-slate-50 dark:hover:bg-slate-900;
border-radius: var(--border-radius-medium);
cursor: pointer;
display: flex;
padding: var(--space-smaller) var(--space-one);
&:hover {
background-color: var(--s-50);
}
&.label-selected { &.label-selected {
background-color: var(--s-50); @apply bg-slate-50 dark:bg-slate-900;
} }
span { span {
font-size: var(--font-size-small); @apply text-sm;
} }
.label-checkbox { .label-checkbox {
margin: 0 var(--space-one) 0 0; @apply my-0 mr-2.5 ml-0;
} }
.label-title { .label-title {
flex-grow: 1; @apply flex-grow w-full;
width: 100%;
} }
.label-pill { .label-pill {
background-color: var(--s-50); @apply bg-slate-50 rounded-md h-3 w-3 flex-shrink-0 border border-solid border-slate-50 dark:border-slate-900;
border-radius: var(--border-radius-medium);
height: var(--space-slab);
width: var(--space-slab);
flex-shrink: 0;
border: 1px solid var(--color-border-light);
} }
} }
} }
.search-container { .search-container {
background-color: var(--white); @apply bg-white py-0 px-2.5 sticky top-0 z-20;
padding: 0 var(--space-one);
position: sticky;
top: 0;
z-index: var(--z-index-twenty);
} }
.actions-container { .actions-container {
background-color: var(--white); @apply bg-white dark:bg-slate-900 bottom-0 p-2 sticky z-20;
bottom: 0;
padding: var(--space-small);
position: sticky;
z-index: var(--z-index-twenty);
button { button {
width: 100%; @apply w-full;
} }
} }
</style> </style>

81
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
View File

@@ -2,13 +2,7 @@
<div v-on-clickaway="onClose" class="bulk-action__teams"> <div v-on-clickaway="onClose" class="bulk-action__teams">
<div class="triangle"> <div class="triangle">
<svg height="12" viewBox="0 0 24 12" width="24"> <svg height="12" viewBox="0 0 24 12" width="24">
<path <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
d="M20 12l-8-8-12 12"
fill="var(--white)"
fill-rule="evenodd"
stroke="var(--s-50)"
stroke-width="1px"
/>
</svg> </svg>
</div> </div>
<div class="header flex-between"> <div class="header flex-between">
@@ -91,83 +85,60 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.bulk-action__teams { .bulk-action__teams {
background-color: var(--white); @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
border-radius: var(--border-radius-large);
border: 1px solid var(--s-50);
box-shadow: var(--shadow-dropdown-pane);
max-width: 75%;
position: absolute;
right: var(--space-small);
top: var(--space-larger);
transform-origin: top right;
width: auto;
z-index: var(--z-index-twenty);
min-width: var(--space-giga);
.header { .header {
padding: var(--space-one); @apply p-2.5;
span { span {
font-size: var(--font-size-small); @apply text-sm font-medium;
font-weight: var(--font-weight-medium);
} }
} }
.container { .container {
max-height: var(--space-giga); @apply overflow-y-auto max-h-[15rem];
overflow-y: auto;
.team__list-container { .team__list-container {
height: 100%; @apply h-full;
} }
.agent-list-search { .agent-list-search {
padding: 0 var(--space-one); @apply py-0 px-2.5 bg-slate-50 dark:bg-slate-900 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
border: 1px solid var(--s-100);
border-radius: var(--border-radius-medium);
background-color: var(--s-50);
.search-icon { .search-icon {
color: var(--s-400); @apply text-slate-400 dark:text-slate-200;
} }
.agent--search_input { .agent--search_input {
border: 0; @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
font-size: var(--font-size-mini);
margin: 0;
background-color: transparent;
height: unset;
} }
} }
} }
.triangle { .triangle {
display: block;
z-index: var(--z-index-one);
position: absolute;
top: var(--space-minus-slab);
right: var(--triangle-position); right: var(--triangle-position);
text-align: left; @apply block z-10 absolute text-left -top-3;
svg path {
@apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
}
} }
} }
ul { ul {
margin: 0; @apply m-0 list-none;
list-style: none;
li {
&:last-child {
.agent-list-item {
@apply last:rounded-b-lg;
}
}
}
} }
.team__list-item { .team__list-item {
display: flex; @apply flex items-center p-2.5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
align-items: center;
padding: var(--space-one);
cursor: pointer;
&:hover {
background-color: var(--s-50);
}
span { span {
font-size: var(--font-size-small); @apply text-sm;
} }
} }
.search-container { .search-container {
padding: 0 var(--space-one); @apply py-0 px-2.5 sticky top-0 z-20 bg-white dark:bg-slate-800;
position: sticky;
top: 0;
z-index: var(--z-index-twenty);
background-color: var(--white);
} }
</style> </style>

40
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
View File

@@ -2,13 +2,7 @@
<div v-on-clickaway="onClose" class="actions-container"> <div v-on-clickaway="onClose" class="actions-container">
<div class="triangle"> <div class="triangle">
<svg height="12" viewBox="0 0 24 12" width="24"> <svg height="12" viewBox="0 0 24 12" width="24">
<path <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
d="M20 12l-8-8-12 12"
fill="var(--white)"
fill-rule="evenodd"
stroke="var(--s-50)"
stroke-width="1px"
/>
</svg> </svg>
</div> </div>
<div class="header flex-between"> <div class="header flex-between">
@@ -126,42 +120,30 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.actions-container { .actions-container {
background-color: var(--white); @apply absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
border-radius: var(--border-radius-large);
border: 1px solid var(--s-50);
box-shadow: var(--shadow-dropdown-pane);
position: absolute;
right: var(--space-small);
top: var(--space-larger);
transform-origin: top right;
width: auto;
z-index: var(--z-index-twenty);
.header { .header {
padding: var(--space-one); @apply p-2.5;
span { span {
font-size: var(--font-size-small); @apply text-sm font-medium;
font-weight: var(--font-weight-medium);
} }
} }
.container { .container {
padding: var(--space-one); @apply px-2.5 pt-0 pb-2.5;
padding-top: var(--space-zero);
} }
.triangle { .triangle {
display: block;
position: absolute;
right: var(--triangle-position); right: var(--triangle-position);
text-align: left; @apply block z-10 absolute text-left -top-3;
top: var(--space-minus-slab);
z-index: var(--z-index-one); svg path {
@apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
}
} }
} }
ul { ul {
margin: 0; @apply m-0 list-none;
list-style: none;
} }
</style> </style>

43
app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
View File

@@ -2,9 +2,12 @@
<div <div
v-show="activeLabels.length" v-show="activeLabels.length"
ref="labelContainer" ref="labelContainer"
class="label-container" class="label-container mt-0.5 mx-2 mb-0"
> >
<div class="labels-wrap" :class="{ expand: showAllLabels }"> <div
class="labels-wrap flex items-end min-w-0 flex-shrink"
:class="{ expand: showAllLabels }"
>
<woot-label <woot-label
v-for="(label, index) in activeLabels" v-for="(label, index) in activeLabels"
:key="label.id" :key="label.id"
@@ -22,7 +25,7 @@
? $t('CONVERSATION.CARD.HIDE_LABELS') ? $t('CONVERSATION.CARD.HIDE_LABELS')
: $t('CONVERSATION.CARD.SHOW_LABELS') : $t('CONVERSATION.CARD.SHOW_LABELS')
" "
class="show-more--button" class="show-more--button sticky flex-shrink-0 right-0 mr-6 rtl:rotate-180"
color-scheme="secondary" color-scheme="secondary"
variant="hollow" variant="hollow"
:icon="showAllLabels ? 'chevron-left' : 'chevron-right'" :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
@@ -84,53 +87,35 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.show-more--button { .show-more--button {
height: var(--space-two); @apply h-5;
position: sticky;
flex-shrink: 0;
right: 0;
margin-right: var(--space-medium);
&.secondary:focus { &.secondary:focus {
color: var(--s-700); @apply text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700;
border-color: var(--s-300);
} }
} }
.label-container {
margin: var(--space-micro) var(--space-small) 0;
}
.labels-wrap { .labels-wrap {
display: flex;
align-items: center;
min-width: 0;
flex-shrink: 1;
&.expand { &.expand {
height: auto; @apply h-auto overflow-visible flex-row flex-wrap;
overflow: visible;
flex-flow: row wrap;
.label { .label {
margin-bottom: var(--space-smaller); @apply mb-1;
} }
.show-more--button { .show-more--button {
margin-bottom: var(--space-smaller); @apply mb-1;
} }
} }
.secondary { .secondary {
border: 1px solid var(--s-100); @apply border border-solid border-slate-100 dark:border-slate-700;
} }
.label { .label {
margin-bottom: 0; @apply mb-0;
} }
} }
.hidden { .hidden {
visibility: hidden; @apply invisible absolute;
position: absolute;
} }
</style> </style>

11
app/javascript/dashboard/components/widgets/forms/Input.vue
View File

@@ -2,6 +2,8 @@
<label class="input-container"> <label class="input-container">
<span v-if="label">{{ label }}</span> <span v-if="label">{{ label }}</span>
<input <input
class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
:class="{ 'input-margin': error }"
:value="value" :value="value"
:type="type" :type="type"
:placeholder="placeholder" :placeholder="placeholder"
@@ -65,10 +67,11 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.help-text { .help-text {
margin-top: var(--space-micro); @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
font-size: var(--font-size-mini); }
color: var(--s-600);
font-style: normal; .input-margin {
margin-bottom: 2px !important;
} }
.message { .message {
margin-top: 0 !important; margin-top: 0 !important;

134
app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
View File

@@ -1,12 +1,20 @@
<template> <template>
<div class="phone-input--wrap"> <div class="phone-input--wrap relative">
<div class="phone-input" :class="{ 'has-error': error }"> <div class="phone-input" :class="{ 'has-error': error }">
<div class="country-emoji--wrap" @click="toggleCountryDropdown"> <div
<h5 v-if="activeCountry.emoji">{{ activeCountry.emoji }}</h5> class="cursor-pointer py-2 pr-1 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-2 bg-slate-25 dark:bg-slate-700 h-10 w-[3.25rem]"
@click="toggleCountryDropdown"
>
<h5 v-if="activeCountry.emoji" class="mb-0">
{{ activeCountry.emoji }}
</h5>
<fluent-icon v-else icon="globe" class="fluent-icon" size="16" /> <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
<fluent-icon icon="chevron-down" class="fluent-icon" size="12" /> <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
</div> </div>
<span v-if="activeDialCode" class="country-dial--code"> <span
v-if="activeDialCode"
class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
>
{{ activeDialCode }} {{ activeDialCode }}
</span> </span>
<input <input
@@ -41,15 +49,22 @@
}" }"
@click="onSelectCountry(country)" @click="onSelectCountry(country)"
> >
<span class="country-emoji">{{ country.emoji }}</span> <span class="text-base mr-1">{{ country.emoji }}</span>
<span class="country-name"> <span
class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
>
{{ country.name }} {{ country.name }}
</span> </span>
<span class="country-dial-code">{{ country.dial_code }}</span> <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
country.dial_code
}}</span>
</div> </div>
<div v-if="filteredCountriesBySearch.length === 0"> <div v-if="filteredCountriesBySearch.length === 0">
<span class="no-results">No results found</span> <span
class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
>No results found</span
>
</div> </div>
</div> </div>
</div> </div>
@@ -237,124 +252,39 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.phone-input--wrap { .phone-input--wrap {
position: relative;
.phone-input { .phone-input {
display: flex; @apply flex items-center justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
align-items: center;
justify-content: flex-start;
margin-bottom: var(--space-normal);
border: 1px solid var(--s-200);
border-radius: var(--border-radius-normal);
&.has-error { &.has-error {
border: 1px solid var(--r-400); @apply border border-solid border-red-400 dark:border-red-400;
} }
} }
.country-emoji--wrap {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-small);
background: var(--s-25);
height: 2.5rem;
width: 3.25rem;
border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal);
padding: var(--space-small) var(--space-smaller) var(--space-small)
var(--space-small);
h5 {
margin-bottom: 0;
}
}
.country-dial--code {
display: flex;
color: var(--s-300);
font-size: var(--space-normal);
font-weight: normal;
line-height: 1.5;
padding: var(--space-small) 0 var(--space-small) var(--space-small);
}
.phone-input--field { .phone-input--field {
margin-bottom: 0; @apply mb-0 rounded-tl-none rounded-bl-none border-0;
border: 0;
} }
.country-dropdown { .country-dropdown {
z-index: var(--z-index-low); @apply z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900;
position: absolute;
height: var(--space-giga);
width: 12.5rem;
overflow-y: auto;
top: 2.5rem;
border-radius: var(--border-radius-default);
padding: 0 0 var(--space-smaller) 0;
background-color: var(--white);
box-shadow: var(--shadow-context-menu);
border-radius: var(--border-radius-normal);
.dropdown-search--wrap { .dropdown-search--wrap {
top: 0; @apply top-0 sticky bg-white dark:bg-slate-900 p-1;
position: sticky;
background-color: var(--white);
padding: var(--space-smaller);
.dropdown-search { .dropdown-search {
height: var(--space-large); @apply h-8 mb-0 text-sm border border-solid border-slate-200 dark:border-slate-600;
margin-bottom: 0;
font-size: var(--font-size-small);
border: 1px solid var(--s-200) !important;
} }
} }
.country-dropdown--item { .country-dropdown--item {
display: flex; @apply flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700;
align-items: center;
height: 1.75rem;
padding: 0 var(--space-smaller);
cursor: pointer;
&.active { &.active {
background-color: var(--s-50); @apply bg-slate-50 dark:bg-slate-700;
} }
&.focus { &.focus {
background-color: var(--s-25); @apply bg-slate-25 dark:bg-slate-800;
} }
&:hover {
background-color: var(--s-50);
}
.country-emoji {
font-size: var(--font-size-default);
margin-right: var(--space-smaller);
}
.country-name {
max-width: 7.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.country-dial-code {
margin-left: var(--space-smaller);
color: var(--s-300);
font-size: var(--font-size-mini);
}
}
.no-results {
display: flex;
align-items: center;
justify-content: center;
color: var(--s-500);
margin-top: var(--space-normal);
} }
} }
} }

27
app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
View File

@@ -79,41 +79,26 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.mention--box { .mention--box {
background: var(--white); @apply bg-white dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-[100] pt-2 px-2 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border-t border-solid border-slate-75 dark:border-slate-800;
border-radius: var(--border-radius-normal);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-medium);
left: 0;
bottom: 100%;
max-height: 9.75rem;
overflow: auto;
padding: var(--space-small) var(--space-small) 0;
position: absolute;
width: 100%;
z-index: 100;
.dropdown-menu__item:last-child { .dropdown-menu__item:last-child {
padding-bottom: var(--space-smaller); @apply pb-1;
} }
.active { .active {
color: var(--white); @apply text-white dark:text-white;
&:hover { &:hover {
color: var(--w-700); @apply bg-woot-700 dark:bg-woot-700;
} }
} }
.button { .button {
transition: none; @apply transition-none h-8 leading-[1.4];
height: var(--space-large);
line-height: 1.4;
} }
} }
.canned-item__button::v-deep .button__content { .canned-item__button::v-deep .button__content {
overflow: hidden; @apply overflow-hidden text-ellipsis whitespace-nowrap;
text-overflow: ellipsis;
white-space: nowrap;
} }
</style> </style>

4
app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<modal :show.sync="show" :on-close="cancel"> <modal :show.sync="show" :on-close="cancel">
<div class="column content-box"> <div class="h-auto overflow-auto flex flex-col">
<woot-modal-header :header-title="title" :header-content="description" /> <woot-modal-header :header-title="title" :header-content="description" />
<div class="modal-footer"> <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
<woot-button variant="clear" @click="cancel"> <woot-button variant="clear" @click="cancel">
{{ cancelLabel }} {{ cancelLabel }}
</woot-button> </woot-button>

138
app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
View File

@@ -1,63 +1,83 @@
<template> <template>
<woot-modal :show="show" size="medium" :on-close="() => $emit('close')"> <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
<div class="column content-box"> <div class="h-auto overflow-auto flex flex-col">
<woot-modal-header <woot-modal-header
:header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')" :header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')"
/> />
<div class="shortcut__wrap margin-top-3"> <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-8 mt-6">
<div class="title-key__wrap"> <div class="flex justify-between items-center min-w-[25rem]">
<h5 class="text-block-title"> <h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }} {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
</h5> </h5>
<div class="shortcut-key__wrap"> <div class="flex items-center mb-1 ml-2">
<p class="shortcut-key"> <p
class="shortcut-key items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }} {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
</p> </p>
<p class="shortcut-key key"> <p
class="shortcut-key items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }} {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="shortcut__wrap"> <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-8">
<div class="title-key__wrap"> <div class="flex justify-between items-center min-w-[25rem]">
<h5 class="text-block-title"> <h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }} {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
</h5> </h5>
<div class="shortcut-key__wrap"> <div class="flex items-center mb-1 ml-2">
<div class="open-conversation__key"> <div class="flex mr-2">
<span class="shortcut-key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }} {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</span> </span>
<span class="shortcut-key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
>
J J
</span> </span>
<span class="forward-slash text-block-title"> <span
class="flex items-center font-semibold text-sm text-slate-800 dark:text-slate-100"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }} {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
</span> </span>
</div> </div>
<span class="shortcut-key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }} {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</span> </span>
<span class="shortcut-key key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
>
K K
</span> </span>
</div> </div>
</div> </div>
<div class="title-key__wrap"> <div class="flex justify-between items-center min-w-[25rem]">
<h5 class="text-block-title"> <h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }} {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
</h5> </h5>
<div class="shortcut-key__wrap"> <div class="flex items-center mb-1 ml-2">
<span class="shortcut-key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }} {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
</span> </span>
<span class="shortcut-key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
>
{{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }} {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
</span> </span>
<span class="shortcut-key key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
>
E E
</span> </span>
</div> </div>
@@ -65,16 +85,20 @@
<div <div
v-for="shortcutKey in shortcutKeys" v-for="shortcutKey in shortcutKeys"
:key="shortcutKey.id" :key="shortcutKey.id"
class="title-key__wrap" class="flex justify-between items-center min-w-[25rem]"
> >
<h5 class="text-block-title"> <h5 class="text-sm text-slate-800 dark:text-slate-100">
{{ title(shortcutKey) }} {{ title(shortcutKey) }}
</h5> </h5>
<div class="shortcut-key__wrap"> <div class="flex items-center mb-1 ml-2">
<span class="shortcut-key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
>
{{ shortcutKey.firstkey }} {{ shortcutKey.firstkey }}
</span> </span>
<span class="shortcut-key key"> <span
class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
>
{{ shortcutKey.secondKey }} {{ shortcutKey.secondKey }}
</span> </span>
</div> </div>
@@ -108,64 +132,8 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.title-shortcut-key__wrap {
display: flex;
}
.page-title {
font-size: var(--font-size-big);
font-weight: var(--font-weight-bold);
}
.shortcut-key__wrap {
display: flex;
align-items: center;
margin-bottom: var(--space-smaller);
margin-left: var(--space-small);
}
.shortcut__wrap {
display: grid;
grid-template-columns: repeat(2, 0.5fr);
gap: var(--space-smaller) var(--space-large);
margin-top: var(--space-small);
padding: 0 var(--space-large) var(--space-large);
}
.title-key__wrap {
display: flex;
justify-content: space-between;
align-items: center;
min-width: 25rem;
}
.forward-slash {
display: flex;
align-items: center;
font-weight: var(--font-weight-bold);
}
.shortcut-key { .shortcut-key {
background: var(--color-background); @apply py-2 px-2.5;
padding: var(--space-small) var(--space-one);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-mini);
align-items: center;
border-radius: var(--border-radius-normal);
margin-right: var(--space-small);
}
.key {
display: flex;
justify-content: center;
min-width: var(--space-large);
margin-right: 0;
}
.open-conversation__key {
display: flex;
margin-right: var(--space-small);
} }
</style> </style>

2
app/javascript/dashboard/i18n/locale/en/contact.json
View File

@@ -340,7 +340,7 @@
}, },
"MERGE_CONTACTS": { "MERGE_CONTACTS": {
"TITLE": "Merge contacts", "TITLE": "Merge contacts",
"DESCRIPTION": "Merge contacts to combine two profiles into one, including all attributes and conversations. In case of conflict, the Primary contact’ s attributes will take precedence.", "DESCRIPTION": "Merge contacts to combine two profiles into one, including all attributes and conversations. In case of conflict, the Primary contact’s attributes will take precedence.",
"PRIMARY": { "PRIMARY": {
"TITLE": "Primary contact", "TITLE": "Primary contact",
"HELP_LABEL": "To be kept" "HELP_LABEL": "To be kept"

8
app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
View File

@@ -4,11 +4,11 @@
:header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')" :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
:header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')" :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
/> />
<form class="row" @submit.prevent="addCustomAttribute"> <form class="w-full" @submit.prevent="addCustomAttribute">
<woot-input <woot-input
v-model.trim="attributeName" v-model.trim="attributeName"
:class="{ error: $v.attributeName.$error }" :class="{ error: $v.attributeName.$error }"
class="medium-12 columns" class="w-full"
:error="attributeNameError" :error="attributeNameError"
:label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')" :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')" :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
@@ -16,11 +16,11 @@
/> />
<woot-input <woot-input
v-model.trim="attributeValue" v-model.trim="attributeValue"
class="medium-12 columns" class="w-full"
:label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')" :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')" :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
/> />
<div class="modal-footer"> <div class="flex justify-end items-center py-2 px-0 gap-2">
<woot-button <woot-button
:is-disabled="$v.attributeName.$invalid || isCreating" :is-disabled="$v.attributeName.$invalid || isCreating"
:is-loading="isCreating" :is-loading="isCreating"

34
app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
View File

@@ -57,52 +57,36 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.option-item--user { .option-item--user {
display: flex; @apply flex items-center;
align-items: center;
} }
.user-identifier { .user-identifier {
font-size: var(--font-size-mini); @apply text-xs ml-0.5 text-slate-700 dark:text-slate-100;
margin-left: var(--space-micro);
color: var(--s-700);
} }
.option__user-data { .option__user-data {
display: flex; @apply flex flex-col flex-grow ml-2 mr-2;
flex-direction: column;
flex-grow: 1;
margin-left: var(--space-small);
margin-right: var(--space-small);
} }
.option__body, .option__body,
.option__title { .option__title {
display: flex; @apply flex items-center justify-start leading-[1.2] text-sm;
align-items: center;
justify-content: flex-start;
line-height: 1.2;
font-size: var(--font-size-small);
} }
.option__body .icon { .option__body .icon {
position: relative; @apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
top: 1px;
margin-right: var(--space-micro);
} }
.option__title { .option__title {
font-weight: var(--font-weight-medium); @apply text-slate-800 dark:text-slate-100 font-medium mb-0.5;
margin-bottom: var(--space-micro);
} }
.option__body { .option__body {
font-size: var(--font-size-mini); @apply text-xs text-slate-700 dark:text-slate-100 mt-1;
color: var(--s-700);
} }
.option__user-data .option__body { .option__user-data .option__body {
> .phone-icon-wrap, > .phone-icon-wrap,
> .email-icon-wrap { > .email-icon-wrap {
width: auto; @apply w-auto flex items-center;
} }
} }
.merge-contact--icon { .merge-contact--icon {
margin-bottom: var(--space-minus-micro); @apply -mb-0.5 mr-0.5;
margin-right: var(--space-micro);
} }
</style> </style>

52
app/javascript/dashboard/modules/contact/components/MergeContact.vue
View File

@@ -173,62 +173,52 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.child-contact-wrap { .child-contact-wrap {
display: flex; @apply flex w-full;
width: 100%;
} }
.child-contact { .child-contact {
flex: 1 0 0; @apply min-w-0 flex-grow flex-shrink-0;
min-width: 0;
} }
.child-arrow { .child-arrow {
width: var(--space-larger); @apply w-8 relative text-base text-slate-100 dark:text-slate-600;
position: relative;
font-size: var(--font-size-default);
color: var(--color-border-dark);
} }
.multiselect { .multiselect {
margin-bottom: var(--space-small); @apply mb-2;
} }
.child-contact { .child-contact {
margin-top: var(--space-smaller); @apply mt-1;
} }
.child-arrow::after { .child-arrow::after {
content: ''; @apply content-[''] h-12 w-0 left-5 absolute border-l border-solid border-slate-100 dark:border-slate-600;
height: var(--space-larger);
width: 0;
left: var(--space-two);
position: absolute;
border-left: 1px solid var(--color-border-dark);
} }
.child-arrow::before { .child-arrow::before {
content: ''; @apply content-[''] h-0 w-4 left-5 top-12 absolute border-b border-solid border-slate-100 dark:border-slate-600;
height: 0;
width: var(--space-normal);
left: var(--space-two);
top: var(--space-larger);
position: absolute;
border-bottom: 1px solid var(--color-border-dark);
} }
.up { .up {
position: absolute; @apply absolute -top-1 left-3;
top: var(--space-minus-smaller);
left: var(--space-slab);
} }
.footer { .footer {
margin-top: var(--space-medium); @apply mt-6 flex justify-end;
display: flex;
justify-content: flex-end;
} }
/* TDOD: Clean errors in forms style */ /* TDOD: Clean errors in forms style */
.error .message { .error .message {
margin-top: 0; @apply mt-0;
} }
.label--merge-warning { .label--merge-warning {
margin-left: var(--space-small); @apply ml-2;
}
::v-deep {
.multiselect {
@apply rounded-md;
}
.multiselect__tags {
@apply h-[52px];
}
} }
</style> </style>

17
app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
View File

@@ -234,34 +234,29 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-container { .menu-container {
padding: var(--space-smaller); @apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
background-color: var(--white);
box-shadow: var(--shadow-context-menu);
border-radius: var(--border-radius-normal);
hr:first-child { hr:first-child {
display: none; @apply hidden;
} }
hr { hr {
border-bottom: 1px solid var(--color-border-light); @apply m-1 border-b border-solid border-slate-50 dark:border-slate-800/50;
margin: var(--space-smaller);
} }
} }
.context-menu--delete-modal { .context-menu--delete-modal {
::v-deep { ::v-deep {
.modal-container { .modal-container {
max-width: 30rem; @apply max-w-[30rem];
h2 { h2 {
font-weight: var(--font-weight-medium); @apply font-medium text-base;
font-size: var(--font-size-default);
} }
} }
.modal-footer { .modal-footer {
padding: var(--space-normal) var(--space-large) var(--space-large); @apply pt-4 pb-8 px-8;
} }
} }
} }

23
app/javascript/dashboard/modules/search/components/MessageContent.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<blockquote <blockquote
ref="messageContainer" ref="messageContainer"
class="message border-l-2 border-slate-100" class="message border-l-2 border-slate-100 dark:border-slate-800"
> >
<p class="header"> <p class="header">
<strong class="author"> <strong class="text-slate-700 dark:text-slate-100">
{{ author }} {{ author }}
</strong> </strong>
{{ $t('SEARCH.WROTE') }} {{ $t('SEARCH.WROTE') }}
@@ -83,29 +83,22 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.message { .message {
padding: 0 var(--space-small); @apply py-0 px-2 mt-2;
margin-top: var(--space-small);
} }
.message-content::v-deep p, .message-content::v-deep p,
.message-content::v-deep li::marker { .message-content::v-deep li::marker {
color: var(--s-700); @apply text-slate-700 dark:text-slate-100 mb-1;
margin-bottom: var(--space-smaller);
}
.author {
color: var(--s-700);
} }
.header { .header {
color: var(--s-500); @apply text-slate-500 dark:text-slate-300 mb-1;
margin-bottom: var(--space-smaller);
} }
.message-content { .message-content {
overflow-wrap: break-word; @apply break-words text-slate-600 dark:text-slate-200;
} }
.message-content::v-deep .searchkey--highlight { .message-content::v-deep .searchkey--highlight {
color: var(--w-600); @apply text-woot-600 dark:text-woot-500 text-sm font-semibold;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-small);
} }
</style> </style>

22
app/javascript/dashboard/modules/search/components/SearchHeader.vue
View File

@@ -71,39 +71,31 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'app/javascript/dashboard/assets/scss/_mixins.scss';
.input-container { .input-container {
position: relative;
display: flex;
align-items: center;
padding: var(--space-small) var(--space-normal);
border: 1px solid var(--s-100);
border-radius: var(--border-radius-small);
transition: border-bottom 0.2s ease-in-out; transition: border-bottom 0.2s ease-in-out;
@apply relative flex items-center py-2 px-4 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
input[type='search'] { input[type='search'] {
@include ghost-input; @apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
width: 100%;
margin: 0;
} }
&.is-focused { &.is-focused {
border-color: var(--w-100); @apply border-woot-100 dark:border-woot-600;
.icon { .icon {
color: var(--w-400); color: var(--w-400);
@apply text-woot-400 dark:text-woot-500;
} }
} }
} }
.icon-container { .icon-container {
display: flex; @apply flex items-center;
align-items: center;
.icon { .icon {
color: var(--s-400); @apply text-slate-400;
} }
} }
.helper-label { .helper-label {
margin: 0; @apply m-0;
} }
</style> </style>

12
app/javascript/dashboard/modules/search/components/SearchInput.vue
View File

@@ -32,20 +32,16 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-input-box { .search-input-box {
padding: var(--space-small); @apply p-2;
} }
.search--icon { .search--icon {
flex-shrink: 0; @apply flex-shrink-0 text-slate-500 dark:text-slate-300;
color: var(--s-500);
} }
.search-placeholder { .search-placeholder {
color: var(--s-500); @apply text-slate-500 dark:text-slate-300;
} }
.search-input { .search-input {
display: flex; @apply flex justify-center items-center gap-1;
justify-content: center;
align-items: center;
gap: var(--space-smaller);
} }
</style> </style>

22
app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
View File

@@ -53,31 +53,19 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.contact-item { .contact-item {
cursor: pointer; @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
display: flex;
align-items: center;
padding: var(--space-small);
border-radius: var(--border-radius-small);
&:hover {
background-color: var(--s-25);
}
} }
.contact-details { .contact-details {
margin-left: var(--space-small); @apply ml-2 rtl:mr-2 rtl:ml-0;
} }
.name { .name {
margin: 0; @apply m-0;
} }
.details-meta { .details-meta {
margin: 0; @apply m-0 text-slate-600 dark:text-slate-200 text-sm flex items-center;
color: var(--s-600);
font-size: var(--font-size-small);
display: flex;
align-items: center;
span { span {
margin-right: var(--space-smaller); @apply ml-1 rtl:mr-1 rtl:ml-0;
} }
} }
</style> </style>

2
app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
View File

@@ -6,7 +6,7 @@
:show-title="showTitle" :show-title="showTitle"
:is-fetching="isFetching" :is-fetching="isFetching"
> >
<ul class="search-list"> <ul v-if="contacts.length" class="search-list">
<li v-for="contact in contacts" :key="contact.id"> <li v-for="contact in contacts" :key="contact.id">
<search-result-contact-item <search-result-contact-item
:id="contact.id" :id="contact.id"

Some files were not shown because too many files have changed in this diff Show More