From 80180a60c5ca99a8becda123d76ed433c18fc513 Mon Sep 17 00:00:00 2001 From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com> Date: Mon, 5 Sep 2022 12:46:27 +0530 Subject: [PATCH] chore: Final touches for portals (#5388) * 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> --- .../assets/scss/_foundation-settings.scss | 2 +- .../assets/scss/plugins/_multiselect.scss | 13 +- .../assets/scss/widgets/_buttons.scss | 49 +++++++- .../components/widgets/TableFooter.vue | 10 +- .../dashboard/i18n/locale/en/helpCenter.json | 4 +- .../widget-preview/components/WidgetHead.vue | 2 +- .../helpcenter/components/ArticleEditor.vue | 9 +- .../components/Header/EditArticleHeader.vue | 8 +- .../helpcenter/components/PortalListItem.vue | 18 +-- .../components/PortalListItemTable.vue | 9 +- .../helpcenter/components/PortalPopover.vue | 1 + .../helpcenter/components/PortalSwitch.vue | 114 +++++++++++------- .../helpcenter/components/Sidebar/Sidebar.vue | 5 + .../components/Sidebar/SidebarHeader.vue | 6 +- .../pages/articles/ArticleSettings.vue | 7 +- .../helpcenter/pages/articles/EditArticle.vue | 19 ++- .../helpcenter/pages/articles/NewArticle.vue | 5 +- .../pages/portals/ListAllPortals.vue | 7 +- .../components/NotificationPanelList.vue | 2 +- .../components/ui/MultiselectDropdown.vue | 2 +- .../widget/components/AgentMessageBubble.vue | 2 +- .../widget/components/UserMessageBubble.vue | 2 +- 22 files changed, 191 insertions(+), 105 deletions(-) diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss index d13dcbe5e..52fa64ba2 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss @@ -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; diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index 525697d91..9fcf1ea66 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -20,7 +20,7 @@ } .multiselect--active { - > .multiselect__tags { + >.multiselect__tags { border-color: $color-woot; } } @@ -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 { @@ -153,15 +154,15 @@ } .multiselect { - > .multiselect__select { + >.multiselect__select { visibility: hidden; } - > .multiselect__tags { + >.multiselect__tags { border-color: transparent; } - &.multiselect--active > .multiselect__tags { + &.multiselect--active>.multiselect__tags { border-color: $color-woot; } } diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss index a0827b58b..9d3f84b25 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss @@ -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 { diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue index de78256c4..c89b37b01 100644 --- a/app/javascript/dashboard/components/widgets/TableFooter.vue +++ b/app/javascript/dashboard/components/widgets/TableFooter.vue @@ -14,7 +14,7 @@ > @@ -46,7 +46,7 @@ -
+
{{ portal.name }} -

- {{ portal.articles_count }} + {{ articleCount }} {{ $t( 'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL' @@ -186,13 +187,11 @@ @@ -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; + } + } } diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue index 56be90904..e75580b68 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue @@ -4,6 +4,7 @@ :thumbnail-src="thumbnailSrc" :header-title="headerTitle" :sub-title="subTitle" + :portal-link="portalLink" @open-popover="openPortalPopover" /> @@ -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) { diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue index 9b6932cc7..044efafd6 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue @@ -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'); diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue index 5dc08c5cb..773945e15 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue @@ -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 { diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue index a757ab921..c91702da9 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue @@ -11,6 +11,7 @@ @back="onClickGoBack" @open="openArticleSettings" @close="closeArticleSettings" + @show="showArticleInPortal" />

@@ -43,9 +44,9 @@ @@ -178,7 +186,7 @@ export default { diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue index bc8ad4fab..6d74088b3 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue @@ -114,7 +114,7 @@ export default { diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue index b0285b807..da04a2aff 100755 --- a/app/javascript/widget/components/UserMessageBubble.vue +++ b/app/javascript/widget/components/UserMessageBubble.vue @@ -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; }