diff options
Diffstat (limited to 'app/assets/javascripts/issuable_sidebar')
3 files changed, 88 insertions, 50 deletions
diff --git a/app/assets/javascripts/issuable_sidebar/components/issuable_sidebar_root.vue b/app/assets/javascripts/issuable_sidebar/components/issuable_sidebar_root.vue new file mode 100644 index 00000000000..7d1339f833d --- /dev/null +++ b/app/assets/javascripts/issuable_sidebar/components/issuable_sidebar_root.vue @@ -0,0 +1,88 @@ +<script> +import Cookies from 'js-cookie'; +import { GlIcon } from '@gitlab/ui'; +import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; + +import { parseBoolean } from '~/lib/utils/common_utils'; + +export default { + components: { + GlIcon, + }, + data() { + const userExpanded = !parseBoolean(Cookies.get('collapsed_gutter')); + + // We're deliberately keeping two different props for sidebar status; + // 1. userExpanded reflects value based on cookie `collapsed_gutter`. + // 2. isExpanded reflect actual sidebar state. + return { + userExpanded, + isExpanded: userExpanded ? bp.isDesktop() : userExpanded, + }; + }, + watch: { + isExpanded(expanded) { + this.$emit('sidebar-toggle', { + expanded, + }); + }, + }, + mounted() { + window.addEventListener('resize', this.handleWindowResize); + }, + beforeDestroy() { + window.removeEventListener('resize', this.handleWindowResize); + }, + methods: { + updatePageContainerClass() { + const layoutPageEl = document.querySelector('.layout-page'); + + if (layoutPageEl) { + layoutPageEl.classList.toggle('right-sidebar-expanded', this.isExpanded); + layoutPageEl.classList.toggle('right-sidebar-collapsed', !this.isExpanded); + } + }, + handleWindowResize() { + if (this.userExpanded) { + this.isExpanded = bp.isDesktop(); + this.updatePageContainerClass(); + } + }, + handleToggleSidebarClick() { + this.isExpanded = !this.isExpanded; + this.userExpanded = this.isExpanded; + + Cookies.set('collapsed_gutter', !this.userExpanded); + this.updatePageContainerClass(); + }, + }, +}; +</script> + +<template> + <aside + :class="{ 'right-sidebar-expanded': isExpanded, 'right-sidebar-collapsed': !isExpanded }" + class="right-sidebar" + aria-live="polite" + > + <button + class="toggle-right-sidebar-button js-toggle-right-sidebar-button w-100 gl-text-decoration-none! gl-display-flex gl-outline-0!" + :title="__('Toggle sidebar')" + @click="handleToggleSidebarClick" + > + <span v-if="isExpanded" class="collapse-text gl-flex-grow-1 gl-text-left">{{ + __('Collapse sidebar') + }}</span> + <gl-icon v-show="isExpanded" data-testid="icon-collapse" name="chevron-double-lg-right" /> + <gl-icon + v-show="!isExpanded" + data-testid="icon-expand" + name="chevron-double-lg-left" + class="gl-ml-2" + /> + </button> + <div data-testid="sidebar-items" class="issuable-sidebar"> + <slot name="right-sidebar-items" v-bind="{ sidebarExpanded: isExpanded }"></slot> + </div> + </aside> +</template> diff --git a/app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue b/app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue deleted file mode 100644 index 06c50f62aab..00000000000 --- a/app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue +++ /dev/null @@ -1,23 +0,0 @@ -<script> -export default { - props: { - signedIn: { - type: Boolean, - required: true, - }, - sidebarStatusClass: { - type: String, - required: false, - default: '', - }, - }, -}; -</script> - -<template> - <aside - :class="sidebarStatusClass" - class="right-sidebar js-right-sidebar js-issuable-sidebar" - aria-live="polite" - ></aside> -</template> diff --git a/app/assets/javascripts/issuable_sidebar/sidebar_bundle.js b/app/assets/javascripts/issuable_sidebar/sidebar_bundle.js deleted file mode 100644 index c8acafa8cd8..00000000000 --- a/app/assets/javascripts/issuable_sidebar/sidebar_bundle.js +++ /dev/null @@ -1,27 +0,0 @@ -import Vue from 'vue'; - -import SidebarApp from './components/sidebar_app.vue'; - -export default () => { - const el = document.getElementById('js-vue-issuable-sidebar'); - - if (!el) { - return false; - } - - const { sidebarStatusClass } = el.dataset; - // An empty string is present when user is signed in. - const signedIn = el.dataset.signedIn === ''; - - return new Vue({ - el, - components: { SidebarApp }, - render: createElement => - createElement('sidebar-app', { - props: { - signedIn, - sidebarStatusClass, - }, - }), - }); -}; |