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

chore: Final touches for portals (#5388)

Browse source 
* chore: Final touches for portals

* Review fixes

* Minor fixes

* Fixes styles for input and buttons

* Minor fixes

* Spacing fixes on header

* Minor fixes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas 2022-09-05 12:46:27 +05:30 committed by GitHub
parent 329e8c37c8
commit 80180a60c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 191 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View file

@ -370,7 +370,7 @@ $input-font-weight: $global-weight-normal;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $color-border;
$input-border: 1px solid var(--s-200);
$input-border-focus: 1px solid lighten($primary-color, 15%);
$input-shadow: 0;
$input-shadow-focus: 0;

5
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View file

@ -96,8 +96,8 @@
}
.multiselect__tags {
border: 1px solid $color-border;
border-color: $color-border;
border: 1px solid var(--s-200);
border-color: var(--s-200);
margin: 0;
min-height: 4.4rem;
padding-top: $zero;
@ -145,6 +145,7 @@
}
.sidebar-labels-wrap {
&.has-edited,
&:hover {
.multiselect {

49
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View file

@ -44,6 +44,52 @@ $default-button-height: 4.0rem;
padding-top: 0;
}
&.hollow {
border-color: var(--s-200);
color: var(--w-700);
&.secondary {
border-color: var(--s-200);
color: var(--s-700)
}
&.success {
border-color: var(--s-200);
color: var(--g-700)
}
&.alert {
border-color: var(--s-200);
color: var(--r-700)
}
&.warning {
border-color: var(--s-200);
color: var(--y-700)
}
&:hover {
background: var(--s-75);
border-color: var(--s-100);
&.secondary {
border-color: var(--s-100);
}
&.success {
border-color: var(--s-100);
}
&.alert {
border-color: var(--s-100);
}
&.warning {
border-color: var(--s-100);
}
}
}
// Smooth style
&.smooth {
@include button-style(var(--w-50), var(--w-100), var(--w-700));
@ -67,11 +113,12 @@ $default-button-height: 4.0rem;
}
&.clear {
&.warning {
color: var(--y-600);
}
&.button--only-icon:hover {
&:hover {
background: var(--w-50);
&.secondary {

10
app/javascript/dashboard/components/widgets/TableFooter.vue
View file

@ -14,7 +14,7 @@
>
<woot-button
size="small"
variant="clear"
variant="smooth"
color-scheme="secondary"
class-names="goto-first"
:is-disabled="hasFirstPage"
@ -29,7 +29,7 @@
</woot-button>
<woot-button
size="small"
variant="clear"
variant="smooth"
color-scheme="secondary"
:is-disabled="hasPrevPage"
@click="onPrevPage"
@ -38,7 +38,7 @@
</woot-button>
<woot-button
size="small"
variant="clear"
variant="smooth"
color-scheme="secondary"
@click.prevent
>
@ -46,7 +46,7 @@
</woot-button>
<woot-button
size="small"
variant="clear"
variant="smooth"
color-scheme="secondary"
:is-disabled="hasNextPage"
@click="onNextPage"
@ -55,7 +55,7 @@
</woot-button>
<woot-button
size="small"
variant="clear"
variant="smooth"
color-scheme="secondary"
class-names="goto-last"
:is-disabled="hasLastPage"

4
app/javascript/dashboard/i18n/locale/en/helpCenter.json
View file

@ -65,6 +65,7 @@
},
"PORTAL": {
"HEADER": "Portals",
"DEFAULT": "Default",
"NEW_BUTTON": "New Portal",
"ACTIVE_BADGE": "active",
"CHOOSE_LOCALE_LABEL": "Choose a locale",
@ -159,8 +160,7 @@
}
},
"ADD": {
"CREATE_FLOW": [
{
"CREATE_FLOW": [{
"title": "Help center information",
"route": "new_portal_information",
"body": "Basic information about portal",

2
app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
View file

@ -74,7 +74,7 @@ export default {
.header-expanded {
max-height: var(--space-giga);
overflow: scroll;
overflow: auto;
h2 {
font-size: var(--font-size-big);
margin-bottom: var(--space-small);

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

@ -1,8 +1,5 @@
<template>
<div
class="edit-article--container"
:class="{ 'is-settings-sidebar-open': isSettingsSidebarOpen }"
>
<div class="edit-article--container">
<input
v-model="articleTitle"
type="text"
@ -82,10 +79,6 @@ export default {
width: 640px;
}
.is-settings-sidebar-open {
margin: var(--space-large) var(--space-small);
}
.article-heading {
font-size: var(--font-size-giga);
font-weight: var(--font-weight-bold);

8
app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
View file

@ -3,7 +3,6 @@
<div class="header-left--wrap">
<woot-button
icon="chevron-left"
class-names="article-back-buttons"
variant="clear"
color-scheme="primary"
@click="onClickGoBack"
@ -64,6 +63,7 @@
<woot-button
class-names="publish-button"
size="small"
icon="checkmark"
color-scheme="primary"
:is-disabled="!articleSlug || isPublishedArticle"
@click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
@ -227,7 +227,8 @@ export default {
align-items: center;
justify-content: space-between;
width: 100%;
height: var(--space-larger);
height: var(--space-jumbo);
padding-top: var(--space-small);
}
.header-left--wrap {
display: flex;
@ -237,9 +238,6 @@ export default {
display: flex;
align-items: center;
}
.article-back-buttons {
padding-left: 0;
}
.article--buttons {
margin-left: var(--space-smaller);
.dropdown-pane {

18
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
View file

@ -9,15 +9,16 @@
<h2 class="portal-title block-title">
{{ portal.name }}
</h2>
<Label
<woot-label
:title="status"
:color-scheme="labelColor"
:small="true"
size="small"
variant="smooth"
class="status"
/>
</div>
<p class="portal-count">
{{ portal.articles_count }}
{{ articleCount }}
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
@ -186,13 +187,11 @@
<script>
import thumbnail from 'dashboard/components/widgets/Thumbnail';
import Label from 'dashboard/components/ui/Label';
import LocaleItemTable from './PortalListItemTable';
import alertMixin from 'shared/mixins/alertMixin';
export default {
components: {
thumbnail,
Label,
LocaleItemTable,
},
mixins: [alertMixin],
@ -234,6 +233,10 @@ export default {
return this.locales[key].code;
});
},
articleCount() {
const { all_articles_count: count } = this.portal.meta;
return count;
},
},
methods: {
addLocale() {
@ -358,7 +361,7 @@ export default {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-normal);
margin-bottom: var(--space-large);
.title-status--wrap {
display: flex;
align-items: center;
@ -380,6 +383,7 @@ export default {
}
}
.portal-locales {
margin-top: var(--space-medium);
margin-bottom: var(--space-small);
.locale-title {
color: var(--s-800);
@ -411,7 +415,7 @@ export default {
display: flex;
align-items: flex-start;
flex-direction: column;
margin-bottom: var(--space-slab);
margin-bottom: var(--space-normal);
.content-theme-wrap {
display: flex;
align-items: center;

9
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
View file

@ -40,15 +40,16 @@
<tr v-for="locale in locales" :key="locale.code">
<td>
<span>{{ localeName(locale.code) }}</span>
<Label
<woot-label
v-if="locale.code === selectedLocaleCode"
:title="
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DEFAULT_LOCALE'
)
"
color-scheme="primary"
color-scheme="warning"
:small="true"
variant="smooth"
class="default-status"
/>
</td>
@ -95,12 +96,8 @@
</template>
<script>
import Label from 'dashboard/components/ui/Label';
import portalMixin from '../mixins/portalMixin';
export default {
components: {
Label,
},
mixins: [portalMixin],
props: {
locales: {

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

@ -33,6 +33,7 @@
v-for="portal in portals"
:key="portal.id"
:portal="portal"
:active-portal-slug="activePortalSlug"
:active="portal.slug === activePortalSlug"
@open-portal-page="onPortalSelect"
/>

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

@ -4,15 +4,19 @@
<div class="actions-container">
<header>
<div>
<h3 class="text-block-title portal-title">{{ portal.name }}</h3>
<h3 class="sub-block-title portal-title">{{ portal.name }}</h3>
<p class="portal-count">
{{ articlesCount }}
{{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
</p>
</div>
<span v-if="active" class="badge">{{
$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')
}}</span>
<woot-label
v-if="active"
variant="smooth"
size="small"
color-scheme="success"
:title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
/>
</header>
<div class="portal-locales">
<h5 class="locale-title">
@ -21,36 +25,43 @@
<ul>
<li v-for="locale in locales" :key="locale.code">
<woot-button
class="locale-item"
variant="clear"
:class="
`locale-item ${
isLocaleActive(locale.code, activePortalSlug)
? 'smooth'
: 'clear'
}`
"
size="large"
color-scheme="secondary"
@click="event => onClick(event, locale.code, portal)"
>
<div class="locale-content">
<input
:id="`locale-${locale.code}`"
v-model="selectedLocale"
type="radio"
name="locale"
:value="locale.code"
class="locale__radio"
:checked="isLocaleActive(locale.code)"
/>
<div>
<p>{{ localeName(locale.code) }}</p>
<div class="meta">
<h6 class="text-block-title text-left">
<span>
{{ localeName(locale.code) }}
</span>
<span
v-if="isLocaleDefault(locale.code)"
class="fs-small text-muted"
>
{{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
</span>
</h6>
<span class="locale-meta">
{{ locale.articles_count }}
{{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
{{ locale.code }}
</span>
</div>
<div v-if="isLocaleActive(locale.code, activePortalSlug)">
<fluent-icon icon="checkmark" class="locale__radio" />
</div>
</div>
</woot-button>
</li>
<li class="add-locale-wrap">
<a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
</li>
</ul>
</div>
</div>
@ -60,6 +71,7 @@
<script>
import thumbnail from 'dashboard/components/widgets/Thumbnail';
import portalMixin from '../mixins/portalMixin';
export default {
components: {
thumbnail,
@ -74,6 +86,10 @@ export default {
type: Boolean,
default: false,
},
activePortalSlug: {
type: String,
default: '',
},
},
data() {
return {
@ -111,12 +127,14 @@ export default {
});
this.$emit('open-portal-page');
},
isLocaleActive(code) {
const isPortalActive = this.portalSlug === this.portal.slug;
isLocaleActive(code, slug) {
const isPortalActive = this.portal.slug === slug;
const isLocaleActive = this.portal?.meta?.default_locale === code;
return isPortalActive && isLocaleActive;
},
isLocaleDefault(code) {
return this.portal?.meta?.default_locale === code;
},
},
};
</script>
@ -153,8 +171,7 @@ export default {
}
.portal-title {
margin-bottom: 0;
color: var(--s-700);
margin-bottom: var(--space-micro);
}
.portal-count {
@ -184,24 +201,6 @@ export default {
margin: 0;
}
.locale-item {
display: flex;
align-items: flex-start;
margin-bottom: var(--space-smaller);
padding: var(--space-smaller);
border-radius: var(--border-radius-normal);
p {
margin-bottom: 0;
text-align: left;
}
span {
color: var(--s-500);
font-size: var(--font-size-small);
}
}
.locale__radio {
width: var(--space-large);
margin-top: var(--space-tiny);
@ -212,5 +211,32 @@ export default {
}
}
}
.locale-item {
display: flex;
align-items: flex-start;
padding: var(--space-smaller) var(--space-normal);
border-radius: var(--border-radius-normal);
width: 100%;
margin-bottom: var(--space-small);
p {
margin-bottom: 0;
text-align: left;
}
.locale-meta {
display: flex;
color: var(--s-500);
font-size: var(--font-size-small);
text-align: left;
line-height: var(--space-normal);
width: 100%;
}
.meta {
flex-grow: 1;
}
}
}
</style>

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

@ -4,6 +4,7 @@
:thumbnail-src="thumbnailSrc"
:header-title="headerTitle"
:sub-title="subTitle"
:portal-link="portalLink"
@open-popover="openPortalPopover"
/>
<transition-group name="menu-list" tag="ul" class="menu vertical">
@ -66,6 +67,10 @@ export default {
this.additionalSecondaryMenuItems[0].children.length > 0
);
},
portalLink() {
const slug = this.$route.params.portalSlug;
return `/public/api/v1/portals/${slug}`;
},
},
methods: {
onSearch(value) {

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

@ -52,10 +52,14 @@ export default {
type: String,
default: '',
},
portalLink: {
type: String,
default: '',
},
},
methods: {
popoutHelpCenter() {
this.$emit('pop-out');
window.open(this.portalLink, '_blank');
},
openPortalPopover() {
this.$emit('open-popover');

7
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
View file

@ -214,7 +214,8 @@ export default {
.article-settings--container {
flex: 0.3;
min-width: var(--space-giga);
overflow: scroll;
max-width: 36rem;
overflow-y: auto;
border-left: 1px solid var(--color-border-light);
margin-left: var(--space-normal);
padding-left: var(--space-normal);
@ -233,10 +234,6 @@ export default {
.action-buttons {
display: flex;
flex-direction: column;
::v-deep .button {
padding-left: 0;
}
}
}
::v-deep {

19
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
View file

@ -11,6 +11,7 @@
@back="onClickGoBack"
@open="openArticleSettings"
@close="closeArticleSettings"
@show="showArticleInPortal"
/>
<div v-if="isFetching" class="text-center p-normal fs-default h-full">
<spinner size="" />
@ -43,9 +44,9 @@
</template>
<script>
import { mapGetters } from 'vuex';
import EditArticleHeader from '../../components/Header/EditArticleHeader.vue';
import ArticleEditor from '../../components/ArticleEditor.vue';
import ArticleSettings from './ArticleSettings.vue';
import EditArticleHeader from '../../components/Header/EditArticleHeader';
import ArticleEditor from '../../components/ArticleEditor';
import ArticleSettings from './ArticleSettings';
import Spinner from 'shared/components/Spinner';
import portalMixin from '../../mixins/portalMixin';
import alertMixin from 'shared/mixins/alertMixin';
@ -83,6 +84,10 @@ export default {
selectedPortalSlug() {
return this.$route.params.portalSlug;
},
portalLink() {
const slug = this.$route.params.portalSlug;
return `/public/api/v1/portals/${slug}`;
},
},
mounted() {
this.fetchArticleDetails();
@ -171,6 +176,9 @@ export default {
closeArticleSettings() {
this.showArticleSettings = false;
},
showArticleInPortal() {
window.open(this.portalLink, '_blank');
},
},
};
</script>
@ -178,7 +186,7 @@ export default {
<style lang="scss" scoped>
.article-container {
display: flex;
padding: var(--space-small) var(--space-normal);
padding: 0 var(--space-normal);
width: 100%;
flex: 1;
overflow: auto;
@ -190,7 +198,8 @@ export default {
}
.is-sidebar-open {
flex: 0.7;
flex-grow: 1;
flex-shrink: 0;
}
}
</style>

5
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
View file

@ -114,7 +114,7 @@ export default {
<style lang="scss" scoped>
.article-container {
display: flex;
padding: var(--space-small) var(--space-normal);
padding: 0 var(--space-normal);
width: 100%;
flex: 1;
overflow: auto;
@ -122,8 +122,7 @@ export default {
.new-article--container {
flex: 1;
flex-shrink: 0;
overflow: scroll;
overflow: auto;
overflow-y: auto;
}
.is-sidebar-open {
flex: 0.7;

7
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
View file

@ -5,7 +5,12 @@
<woot-sidemenu-icon />
<h1 class="page-title">{{ $t('HELP_CENTER.PORTAL.HEADER') }}</h1>
</div>
<woot-button color-scheme="primary" size="small" @click="addPortal">
<woot-button
color-scheme="primary"
icon="add"
size="small"
@click="addPortal"
>
{{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
</woot-button>
</div>

2
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
View file

@ -144,7 +144,7 @@ export default {
.notification-list-item--wrap {
flex-direction: column;
padding: var(--space-small) var(--space-slab);
overflow: scroll;
overflow: auto;
}
.empty {

2
app/javascript/shared/components/ui/MultiselectDropdown.vue
View file

@ -136,7 +136,7 @@ export default {
.selector-button {
width: 100%;
border: 1px solid var(--color-border);
border: 1px solid var(--s-200);
padding-left: var(--space-one);
padding-right: var(--space-one);

2
app/javascript/widget/components/AgentMessageBubble.vue
View file

@ -138,7 +138,7 @@ export default {
.chat-bubble .message-content::v-deep pre {
background: $color-primary-light;
color: $color-body;
overflow: scroll;
overflow-y: auto;
padding: $space-smaller;
}
</style>

2
app/javascript/widget/components/UserMessageBubble.vue
View file

@ -35,7 +35,7 @@ export default {
.chat-bubble.user::v-deep pre {
background: $color-primary-light;
color: $color-body;
overflow: scroll;
overflow: auto;
padding: $space-smaller;
}
</style>