diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss
index ea8334c57..f24f00830 100644
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -99,3 +99,7 @@ $ionicons-font-path: '~ionicons/fonts';
// Transitions
$transition-ease-in: all 0.250s ease-in;
+
+:root {
+ --dashboard-app-tabs-height: 3.9rem;
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index dbb68f6d5..234d7e171 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -1,9 +1,34 @@
+.tabs--container {
+ display: flex;
+}
+
+.tabs--container--with-border {
+ @include border-normal-bottom;
+}
+
.tabs {
@include padding($zero $space-normal);
- @include border-normal-bottom;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
+ display: flex;
+ min-width: var(--space-mega);
+}
+
+.tabs--with-scroll {
+ max-width: calc(100% - 64px);
+ overflow: hidden;
+ padding: 0 var(--space-smaller);
+}
+
+.tabs--scroll-button {
+ align-items: center;
+ border-radius: 0;
+ cursor: pointer;
+ display: flex;
+ height: auto;
+ justify-content: center;
+ min-width: var(--space-large);
}
// Tab chat type
@@ -22,6 +47,7 @@
.tabs-title {
@include margin($zero $space-slab);
+ flex-shrink: 0;
.badge {
background: $color-background;
diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.js b/app/javascript/dashboard/components/ui/Tabs/Tabs.js
index 87abd41f7..cae81b91f 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.js
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.js
@@ -5,8 +5,61 @@ export default {
type: Number,
default: 0,
},
+ border: {
+ type: Boolean,
+ default: true,
+ },
},
- render() {
+ data() {
+ return { hasScroll: false };
+ },
+ created() {
+ window.addEventListener('resize', this.computeScrollWidth);
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.computeScrollWidth);
+ },
+ mounted() {
+ this.computeScrollWidth();
+ },
+ methods: {
+ computeScrollWidth() {
+ const tabElement = this.$el.getElementsByClassName('tabs')[0];
+ this.hasScroll = tabElement.scrollWidth > tabElement.clientWidth;
+ },
+ onScrollClick(direction) {
+ const tabElement = this.$el.getElementsByClassName('tabs')[0];
+ let scrollPosition = tabElement.scrollLeft;
+ if (direction === 'left') {
+ scrollPosition -= 100;
+ } else {
+ scrollPosition += 100;
+ }
+ tabElement.scrollTo({
+ top: 0,
+ left: scrollPosition,
+ behavior: 'smooth',
+ });
+ },
+ createScrollButton(createElement, direction) {
+ if (!this.hasScroll) {
+ return false;
+ }
+ return createElement(
+ 'button',
+ {
+ class: 'tabs--scroll-button button clear secondary button--only-icon',
+ on: { click: () => this.onScrollClick(direction) },
+ },
+ [
+ createElement('fluent-icon', {
+ props: { icon: `chevron-${direction}`, size: 16 },
+ }),
+ ]
+ );
+ },
+ },
+ render(createElement) {
const Tabs = this.$slots.default
.filter(
node =>
@@ -18,14 +71,21 @@ export default {
data.index = index;
return node;
});
+ const leftButton = this.createScrollButton(createElement, 'left');
+ const rightButton = this.createScrollButton(createElement, 'right');
return (
-
+ {leftButton}
+
+ {rightButton}
+
);
},
};
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index d2eb8a4bd..08909566e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -141,6 +141,7 @@ export default {
.dashboard-app--tabs {
background: var(--white);
margin-top: -1px;
+ min-height: var(--dashboard-app-tabs-height);
}
.messages-and-sidebar {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 256f2b0c5..b73289b8d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -4,7 +4,11 @@
:header-image="inbox.avatarUrl"
:header-title="inboxName"
>
-
+