KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'develop' into feat/edit-delete-category

Browse source
This commit is contained in:
Sivin Varghese 2022-09-02 18:50:30 +05:30 committed by GitHub
commit e9592d2685
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 197 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View file

@ -1,13 +1,19 @@
<template> <template>
<li class="sidebar-item"> <li class="sidebar-item">
<div v-if="hasSubMenu" class="secondary-menu--wrap"> <div v-if="hasSubMenu" class="secondary-menu--wrap">
<span class="secondary-menu--title fs-small"> <span class="secondary-menu--header fs-small">
{{ $t(`SIDEBAR.${menuItem.label}`) }} {{ $t(`SIDEBAR.${menuItem.label}`) }}
</span> </span>
<div v-if="isHelpCenterSidebar" class="submenu-icons"> <div v-if="isHelpCenterSidebar" class="submenu-icons">
<div class="submenu-icon" @click="onClickOpen"> <woot-button
size="tiny"
variant="clear"
color-scheme="secondary"
class="submenu-icon"
@click="onClickOpen"
>
<fluent-icon icon="add" size="16" /> <fluent-icon icon="add" size="16" />
</div> </woot-button>
</div> </div>
</div> </div>
<router-link <router-link
@ -214,13 +220,22 @@ export default {
.secondary-menu--wrap { .secondary-menu--wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: var(--space-small);
} }
.secondary-menu--header {
color: var(--s-700);
display: flex;
font-weight: var(--font-weight-bold);
line-height: var(--space-normal);
margin: var(--space-small) 0;
padding: 0 var(--space-small);
}
.secondary-menu--title { .secondary-menu--title {
color: var(--s-600); color: var(--s-600);
display: flex; display: flex;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-medium);
line-height: var(--space-two); line-height: var(--space-normal);
margin: var(--space-small) 0; margin: var(--space-small) 0;
padding: 0 var(--space-small); padding: 0 var(--space-small);
} }
@ -232,6 +247,7 @@ export default {
padding: var(--space-small); padding: var(--space-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
border-radius: var(--border-radius-normal); border-radius: var(--border-radius-normal);
color: var(--s-700);
&:hover { &:hover {
background: var(--s-25); background: var(--s-25);
@ -323,19 +339,14 @@ export default {
align-items: center; align-items: center;
.submenu-icon { .submenu-icon {
padding: 0;
margin-left: var(--space-small); margin-left: var(--space-small);
color: var(--s-600);
&:hover {
cursor: pointer;
color: var(--w-500);
}
} }
} }
.empty-text { .empty-text {
color: var(--s-600); color: var(--s-500);
font-size: var(--font-size-small); font-size: var(--font-size-small);
margin: var(--space-smaller) 0; margin: var(--space-smaller);
} }
</style> </style>

25
app/javascript/dashboard/components/ui/Label.vue
View file

@ -72,7 +72,9 @@ export default {
return this.color || getContrastingTextColor(this.bgColor); return this.color || getContrastingTextColor(this.bgColor);
}, },
labelClass() { labelClass() {
return `label ${this.colorScheme} ${this.small ? 'small' : ''}`; return `label ${this.colorScheme} ${this.variant} ${
this.small ? 'small' : ''
}`;
}, },
labelStyle() { labelStyle() {
if (this.bgColor) { if (this.bgColor) {
@ -146,6 +148,9 @@ export default {
a { a {
color: var(--w-900); color: var(--w-900);
} }
.label-color-dot {
background: var(--w-600);
}
} }
&.secondary { &.secondary {
background: var(--s-100); background: var(--s-100);
@ -154,6 +159,9 @@ export default {
a { a {
color: var(--s-900); color: var(--s-900);
} }
.label-color-dot {
background: var(--s-600);
}
} }
&.success { &.success {
background: var(--g-100); background: var(--g-100);
@ -162,6 +170,9 @@ export default {
a { a {
color: var(--g-900); color: var(--g-900);
} }
.label-color-dot {
background: var(--g-600);
}
} }
&.alert { &.alert {
background: var(--r-100); background: var(--r-100);
@ -170,6 +181,9 @@ export default {
a { a {
color: var(--r-900); color: var(--r-900);
} }
.label-color-dot {
background: var(--r-600);
}
} }
&.warning { &.warning {
background: var(--y-100); background: var(--y-100);
@ -178,6 +192,15 @@ export default {
a { a {
color: var(--y-900); color: var(--y-900);
} }
.label-color-dot {
background: var(--y-900);
}
}
&.smooth {
background: transparent;
border: 1px solid var(--s-75);
color: var(--s-800);
} }
} }

1
app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
View file

@ -93,6 +93,7 @@ export default {
max-height: var(--space-jumbo); max-height: var(--space-jumbo);
border: 0px solid transparent; border: 0px solid transparent;
padding: 0; padding: 0;
color: var(--s-900);
} }
::v-deep { ::v-deep {

65
app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<tr> <tr class="row--article-block">
<td> <td>
<div class="row--article-block"> <div class="article-content-wrap">
<div class="article-block"> <div class="article-block">
<h6 class="sub-block-title text-truncate"> <router-link :to="articleUrl(id)">
<router-link class="article-name" :to="articleUrl(id)"> <h6 class="sub-block-title text-truncate">
{{ title }} {{ title }}
</router-link> </h6>
</h6> </router-link>
<div class="author"> <div class="author">
<span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span> <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
<span class="name">{{ articleAuthorName }}</span> <span class="name">{{ articleAuthorName }}</span>
@ -15,22 +15,35 @@
</div> </div>
</div> </div>
</td> </td>
<td>{{ category.name }}</td>
<td>{{ readCount }}</td>
<td> <td>
<Label :title="status" :color-scheme="labelColor" /> <span class="fs-small">{{ category.name }}</span>
</td>
<td>
<span class="fs-small">
{{ readCount }}
</span>
</td>
<td>
<div>
<woot-label
:title="status"
size="small"
variant="smooth"
:color-scheme="labelColor"
/>
</div>
</td>
<td>
<span class="fs-small">
{{ lastUpdatedAt }}
</span>
</td> </td>
<td>{{ lastUpdatedAt }}</td>
</tr> </tr>
</template> </template>
<script> <script>
import Label from 'dashboard/components/ui/Label';
import timeMixin from 'dashboard/mixins/time'; import timeMixin from 'dashboard/mixins/time';
import portalMixin from '../mixins/portalMixin'; import portalMixin from '../mixins/portalMixin';
export default { export default {
components: {
Label,
},
mixins: [timeMixin, portalMixin], mixins: [timeMixin, portalMixin],
props: { props: {
@ -95,25 +108,25 @@ td {
padding-left: 0; padding-left: 0;
} }
.row--article-block { .row--article-block {
align-items: center; border-bottom-color: transparent;
display: flex; .article-content-wrap {
text-align: left; align-items: center;
display: flex;
text-align: left;
}
.article-block { .article-block {
min-width: 0; min-width: 0;
} }
.sub-block-title { .sub-block-title {
margin-bottom: 0; margin-bottom: 0;
line-height: var(--space-medium);
height: var(--space-medium);
&:hover {
text-decoration: underline;
}
} }
.article-name {
font-size: var(--font-size-small);
font-weight: var(--font-weight-default);
margin: 0;
text-transform: capitalize;
color: var(--s-900);
}
.author { .author {
.by { .by {
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
@ -123,7 +136,7 @@ td {
.name { .name {
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--s-600); color: var(--s-600);
font-size: var(--font-size-mini); font-size: var(--font-size-small);
} }
} }
} }

4
app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
View file

@ -82,6 +82,7 @@
<woot-button <woot-button
class-names="article--buttons" class-names="article--buttons"
size="small" size="small"
icon="add"
color-scheme="primary" color-scheme="primary"
@click="onClickNewArticlePage" @click="onClickNewArticlePage"
> >
@ -152,7 +153,8 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
height: var(--space-larger); height: var(--space-jumbo);
padding-top: var(--space-small);
} }
.header-left--wrap { .header-left--wrap {
display: flex; display: flex;

34
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
View file

@ -5,15 +5,24 @@
<h2 class="block-title"> <h2 class="block-title">
{{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }} {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
</h2> </h2>
<woot-button <div>
variant="smooth" <woot-button
color-scheme="secondary" variant="smooth"
icon="settings" color-scheme="secondary"
size="small" icon="settings"
@click="openPortalPage" size="small"
> @click="openPortalPage"
{{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }} >
</woot-button> {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
</woot-button>
<woot-button
variant="clear"
color-scheme="secondary"
icon="dismiss"
size="small"
@click="closePortalPopover"
/>
</div>
</div> </div>
<p class="subtitle"> <p class="subtitle">
{{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }} {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
@ -22,7 +31,7 @@
<div> <div>
<portal-switch <portal-switch
v-for="portal in portals" v-for="portal in portals"
:key="portal.slug" :key="portal.id"
:portal="portal" :portal="portal"
:active="portal.slug === activePortalSlug" :active="portal.slug === activePortalSlug"
@open-portal-page="onPortalSelect" @open-portal-page="onPortalSelect"
@ -78,7 +87,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.portal-popover__container { .portal-popover__container {
position: absolute; position: absolute;
overflow: scroll; overflow-y: scroll;
max-height: 96vh; max-height: 96vh;
padding: var(--space-normal); padding: var(--space-normal);
background-color: var(--white); background-color: var(--white);
@ -92,7 +101,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--space-smaller); margin-bottom: var(--space-normal);
.new-popover-link { .new-popover-link {
display: flex; display: flex;
@ -111,6 +120,7 @@ export default {
.subtitle { .subtitle {
font-size: var(--font-size-mini); font-size: var(--font-size-mini);
color: var(--s-600); color: var(--s-600);
margin-top: var(--space-small);
} }
} }
} }

114
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
View file

@ -4,7 +4,7 @@
<div class="actions-container"> <div class="actions-container">
<header> <header>
<div> <div>
<h2 class="portal-title">{{ portal.name }}</h2> <h3 class="text-block-title portal-title">{{ portal.name }}</h3>
<p class="portal-count"> <p class="portal-count">
{{ articlesCount }} {{ articlesCount }}
{{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
@ -15,32 +15,40 @@
}}</span> }}</span>
</header> </header>
<div class="portal-locales"> <div class="portal-locales">
<h2 class="locale-title"> <h5 class="locale-title">
{{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }} {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
</h2> </h5>
<ul> <ul>
<li v-for="locale in locales" :key="locale.code"> <li v-for="locale in locales" :key="locale.code">
<label :for="`locale-${locale.code}`" class="locale-item"> <woot-button
<input class="locale-item"
:id="`locale-${locale.code}`" variant="clear"
v-model="selectedLocale" size="large"
type="radio" color-scheme="secondary"
name="locale" @click="event => onClick(event, locale.code, portal)"
:value="locale.code" >
:checked="isLocaleActive(locale.code)" <div class="locale-content">
@click="() => onClick(locale.code, portal)" <input
/> :id="`locale-${locale.code}`"
<div> v-model="selectedLocale"
<p>{{ localeName(locale.code) }}</p> type="radio"
<span> name="locale"
{{ locale.articles_count }} :value="locale.code"
{{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} - class="locale__radio"
{{ locale.code }} :checked="isLocaleActive(locale.code)"
</span> />
<div>
<p>{{ localeName(locale.code) }}</p>
<span>
{{ locale.articles_count }}
{{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
{{ locale.code }}
</span>
</div>
</div> </div>
</label> </woot-button>
</li> </li>
<li> <li class="add-locale-wrap">
<a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a> <a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
</li> </li>
</ul> </ul>
@ -84,7 +92,8 @@ export default {
this.selectedLocale = this.locale || this.portal?.meta?.default_locale; this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
}, },
methods: { methods: {
onClick(code, portal) { onClick(event, code, portal) {
event.preventDefault();
this.$router.push({ this.$router.push({
name: 'list_all_locale_articles', name: 'list_all_locale_articles',
params: { params: {
@ -136,10 +145,8 @@ export default {
} }
.portal-title { .portal-title {
color: var(--s-900);
font-size: var(--font-size-medium);
font-weight: var(--font-weight-bold);
margin-bottom: 0; margin-bottom: 0;
color: var(--s-700);
} }
.portal-count { .portal-count {
@ -156,39 +163,46 @@ export default {
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} }
.locale-content {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
}
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
}
.locale-item { .locale-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-bottom: var(--space-smaller); margin-bottom: var(--space-smaller);
cursor: pointer; padding: var(--space-smaller);
padding: var(--space-smaller); border-radius: var(--border-radius-normal);
border-radius: var(--border-radius-normal);
&:hover { p {
background-color: var(--w-25); margin-bottom: 0;
} text-align: left;
p {
margin-bottom: 0;
}
span {
color: var(--s-500);
font-size: var(--font-size-small);
}
} }
span {
color: var(--s-500);
font-size: var(--font-size-small);
}
}
.locale__radio {
width: var(--space-large);
margin-top: var(--space-tiny);
}
.add-locale-wrap {
margin-top: var(--spacing-small);
} }
} }
} }
} }
label > [type='radio'] {
margin-bottom: 0;
margin-top: var(--space-smaller);
margin-right: var(--space-one);
}
</style> </style>

56
app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
View file

@ -2,13 +2,13 @@
<div class="sidebar-header--wrap"> <div class="sidebar-header--wrap">
<div class="header-left--side"> <div class="header-left--side">
<thumbnail <thumbnail
size="40px" size="32px"
:src="thumbnailSrc" :src="thumbnailSrc"
:username="headerTitle" :username="headerTitle"
variant="square" variant="square"
/> />
<div class="header-title--wrap"> <div class="header-title--wrap">
<h4 class="sub-block-title title-view text-truncate"> <h4 class="text-block-title title-view text-truncate">
{{ headerTitle }} {{ headerTitle }}
</h4> </h4>
<span class="sub-title--view">{{ subTitle }}</span> <span class="sub-title--view">{{ subTitle }}</span>
@ -16,28 +16,19 @@
</div> </div>
<div class="header-right--side"> <div class="header-right--side">
<woot-button <woot-button
variant="link" variant="clear"
color-scheme="secondary" color-scheme="secondary"
size="small"
icon="arrow-up-right"
@click="popoutHelpCenter" @click="popoutHelpCenter"
> />
<fluent-icon
icon="arrow-up-right"
size="28px"
class="pop-out--icon"
@click="popoutHelpCenter"
/>
</woot-button>
<woot-button <woot-button
variant="link" variant="clear"
size="small"
color-scheme="secondary" color-scheme="secondary"
icon="arrow-swap"
@click="openPortalPopover" @click="openPortalPopover"
> />
<fluent-icon
icon="arrow-swap"
size="28px"
class="portal-switch--icon"
/>
</woot-button>
</div> </div>
</div> </div>
</template> </template>
@ -79,7 +70,9 @@ export default {
height: var(--space-jumbo); height: var(--space-jumbo);
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--space-small) 0 var(--space-normal) 0; padding: var(--space-normal);
margin: var(--space-minus-small);
margin-bottom: var(--space-small);
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
} }
@ -93,11 +86,15 @@ export default {
.title-view { .title-view {
width: var(--space-mega); width: var(--space-mega);
margin-bottom: var(--space-zero); margin-bottom: var(--space-zero);
height: var(--space-normal);
line-height: var(--space-normal);
} }
.sub-title--view { .sub-title--view {
font-size: var(--font-size-mini); font-size: var(--font-size-mini);
color: var(--b-600); color: var(--s-600);
height: var(--space-normal);
line-height: var(--space-normal);
} }
.header-left--side { .header-left--side {
@ -107,21 +104,6 @@ export default {
.header-right--side { .header-right--side {
display: flex; display: flex;
align-items: center; align-items: flex-end;
}
.pop-out--icon {
padding: var(--space-smaller);
}
.portal-switch--icon {
padding: var(--space-smaller);
margin-left: var(--space-small);
&:hover {
cursor: pointer;
background: var(--s-50);
border-radius: var(--border-radius-normal);
}
} }
</style> </style>

2
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
View file

@ -147,7 +147,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
padding: var(--space-small) var(--space-normal); padding: 0 var(--space-normal);
width: 100%; width: 100%;
.articles--loader { .articles--loader {
align-items: center; align-items: center;