diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_settings_sidebar.vue')
| -rw-r--r-- | app/assets/javascripts/boards/components/board_settings_sidebar.vue | 83 |
1 files changed, 43 insertions, 40 deletions
diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue index 75975c77df5..c089a6a39af 100644 --- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue @@ -1,5 +1,6 @@ <script> import { GlButton, GlDrawer, GlLabel } from '@gitlab/ui'; +import { MountingPortal } from 'portal-vue'; import { mapActions, mapState, mapGetters } from 'vuex'; import { LIST, ListType, ListTypeTitles } from '~/boards/constants'; import boardsStore from '~/boards/stores/boards_store'; @@ -9,14 +10,13 @@ import eventHub from '~/sidebar/event_hub'; import Tracking from '~/tracking'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -// NOTE: need to revisit how we handle headerHeight, because we have so many different header and footer options. export default { - headerHeight: process.env.NODE_ENV === 'development' ? '75px' : '40px', listSettingsText: __('List settings'), components: { GlButton, GlDrawer, GlLabel, + MountingPortal, BoardSettingsSidebarWipLimit: () => import('ee_component/boards/components/board_settings_wip_limit.vue'), BoardSettingsListTypes: () => @@ -24,6 +24,7 @@ export default { }, mixins: [glFeatureFlagMixin(), Tracking.mixin()], inject: ['canAdminList'], + inheritAttrs: false, data() { return { ListType, @@ -86,43 +87,45 @@ export default { </script> <template> - <gl-drawer - v-if="showSidebar" - class="js-board-settings-sidebar" - :open="isSidebarOpen" - :header-height="$options.headerHeight" - @close="unsetActiveId" - > - <template #header>{{ $options.listSettingsText }}</template> - <template v-if="isSidebarOpen"> - <div v-if="boardListType === ListType.label"> - <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label> - <gl-label - :title="activeListLabel.title" - :background-color="activeListLabel.color" - :scoped="showScopedLabels(activeListLabel)" - /> - </div> + <mounting-portal mount-to="#js-right-sidebar-portal" name="board-settings-sidebar" append> + <gl-drawer + v-if="showSidebar" + v-bind="$attrs" + class="js-board-settings-sidebar gl-absolute" + :open="isSidebarOpen" + @close="unsetActiveId" + > + <template #title>{{ $options.listSettingsText }}</template> + <template v-if="isSidebarOpen"> + <div v-if="boardListType === ListType.label"> + <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label> + <gl-label + :title="activeListLabel.title" + :background-color="activeListLabel.color" + :scoped="showScopedLabels(activeListLabel)" + /> + </div> - <board-settings-list-types - v-else - :active-list="activeList" - :board-list-type="boardListType" - /> - <board-settings-sidebar-wip-limit - v-if="isWipLimitsOn" - :max-issue-count="activeList.maxIssueCount" - /> - <div v-if="canAdminList && !activeList.preset && activeList.id" class="gl-mt-4"> - <gl-button - variant="danger" - category="secondary" - icon="remove" - data-testid="remove-list" - @click.stop="deleteBoard" - >{{ __('Remove list') }} - </gl-button> - </div> - </template> - </gl-drawer> + <board-settings-list-types + v-else + :active-list="activeList" + :board-list-type="boardListType" + /> + <board-settings-sidebar-wip-limit + v-if="isWipLimitsOn" + :max-issue-count="activeList.maxIssueCount" + /> + <div v-if="canAdminList && !activeList.preset && activeList.id" class="gl-mt-4"> + <gl-button + variant="danger" + category="secondary" + icon="remove" + data-testid="remove-list" + @click.stop="deleteBoard" + >{{ __('Remove list') }} + </gl-button> + </div> + </template> + </gl-drawer> + </mounting-portal> </template> |