diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_content_sidebar.vue')
| -rw-r--r-- | app/assets/javascripts/boards/components/board_content_sidebar.vue | 182 |
1 files changed, 104 insertions, 78 deletions
diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue index 16a8a9d253f..e014b82d362 100644 --- a/app/assets/javascripts/boards/components/board_content_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue @@ -1,20 +1,20 @@ <script> import { GlDrawer } from '@gitlab/ui'; +import { MountingPortal } from 'portal-vue'; import { mapState, mapActions, mapGetters } from 'vuex'; import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdown_widget.vue'; import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue'; import BoardSidebarTimeTracker from '~/boards/components/sidebar/board_sidebar_time_tracker.vue'; import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue'; import { ISSUABLE } from '~/boards/constants'; -import { contentTop } from '~/lib/utils/common_utils'; import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue'; import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue'; import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue'; import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue'; +import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { - headerHeight: `${contentTop()}px`, components: { GlDrawer, BoardSidebarTitle, @@ -25,8 +25,10 @@ export default { BoardSidebarLabelsSelect, SidebarSubscriptionsWidget, SidebarDropdownWidget, - BoardSidebarWeightInput: () => - import('ee_component/boards/components/sidebar/board_sidebar_weight_input.vue'), + SidebarTodoWidget, + MountingPortal, + SidebarWeightWidget: () => + import('ee_component/sidebar/components/weight/sidebar_weight_widget.vue'), IterationSidebarDropdownWidget: () => import('ee_component/sidebar/components/iteration_sidebar_dropdown_widget.vue'), }, @@ -45,6 +47,7 @@ export default { default: false, }, }, + inheritAttrs: false, computed: { ...mapGetters([ 'isSidebarOpen', @@ -64,7 +67,12 @@ export default { }, }, methods: { - ...mapActions(['toggleBoardItem', 'setAssignees', 'setActiveItemConfidential']), + ...mapActions([ + 'toggleBoardItem', + 'setAssignees', + 'setActiveItemConfidential', + 'setActiveItemWeight', + ]), handleClose() { this.toggleBoardItem({ boardItem: this.activeBoardItem, sidebarType: this.sidebarType }); }, @@ -73,87 +81,105 @@ export default { </script> <template> - <gl-drawer - v-if="showSidebar" - :open="isSidebarOpen" - :header-height="$options.headerHeight" - @close="handleClose" - > - <template #header>{{ __('Issue details') }}</template> - <template #default> - <board-sidebar-title /> - <sidebar-assignees-widget - :iid="activeBoardItem.iid" - :full-path="fullPath" - :initial-assignees="activeBoardItem.assignees" - :allow-multiple-assignees="multipleAssigneesFeatureAvailable" - @assignees-updated="setAssignees" - /> - <sidebar-dropdown-widget - v-if="epicFeatureAvailable" - :iid="activeBoardItem.iid" - issuable-attribute="epic" - :workspace-path="projectPathForActiveIssue" - :attr-workspace-path="groupPathForActiveIssue" - :issuable-type="issuableType" - data-testid="sidebar-epic" - /> - <div> + <mounting-portal mount-to="#js-right-sidebar-portal" name="board-content-sidebar" append> + <gl-drawer + v-if="showSidebar" + v-bind="$attrs" + :open="isSidebarOpen" + class="boards-sidebar gl-absolute" + @close="handleClose" + > + <template #title> + <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ __('Issue details') }}</h2> + </template> + <template #header> + <sidebar-todo-widget + class="gl-mt-3" + :issuable-id="activeBoardItem.fullId" + :issuable-iid="activeBoardItem.iid" + :full-path="fullPath" + :issuable-type="issuableType" + /> + </template> + <template #default> + <board-sidebar-title /> + <sidebar-assignees-widget + :iid="activeBoardItem.iid" + :full-path="fullPath" + :initial-assignees="activeBoardItem.assignees" + :allow-multiple-assignees="multipleAssigneesFeatureAvailable" + @assignees-updated="setAssignees" + /> <sidebar-dropdown-widget + v-if="epicFeatureAvailable" :iid="activeBoardItem.iid" - issuable-attribute="milestone" + issuable-attribute="epic" :workspace-path="projectPathForActiveIssue" - :attr-workspace-path="projectPathForActiveIssue" + :attr-workspace-path="groupPathForActiveIssue" :issuable-type="issuableType" - data-testid="sidebar-milestones" + data-testid="sidebar-epic" /> - <template v-if="!glFeatures.iterationCadences"> + <div> <sidebar-dropdown-widget - v-if="iterationFeatureAvailable" :iid="activeBoardItem.iid" - issuable-attribute="iteration" + issuable-attribute="milestone" :workspace-path="projectPathForActiveIssue" - :attr-workspace-path="groupPathForActiveIssue" + :attr-workspace-path="projectPathForActiveIssue" :issuable-type="issuableType" - class="gl-mt-5" - data-testid="iteration-edit" - data-qa-selector="iteration_container" + data-testid="sidebar-milestones" /> - </template> - <template v-else> - <iteration-sidebar-dropdown-widget - v-if="iterationFeatureAvailable" - :iid="activeBoardItem.iid" - :workspace-path="projectPathForActiveIssue" - :attr-workspace-path="groupPathForActiveIssue" - :issuable-type="issuableType" - class="gl-mt-5" - data-testid="iteration-edit" - data-qa-selector="iteration_container" - /> - </template> - </div> - <board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" /> - <sidebar-date-widget - :iid="activeBoardItem.iid" - :full-path="fullPath" - :issuable-type="issuableType" - data-testid="sidebar-due-date" - /> - <board-sidebar-labels-select class="labels" /> - <board-sidebar-weight-input v-if="weightFeatureAvailable" class="weight" /> - <sidebar-confidentiality-widget - :iid="activeBoardItem.iid" - :full-path="fullPath" - :issuable-type="issuableType" - @confidentialityUpdated="setActiveItemConfidential($event)" - /> - <sidebar-subscriptions-widget - :iid="activeBoardItem.iid" - :full-path="fullPath" - :issuable-type="issuableType" - data-testid="sidebar-notifications" - /> - </template> - </gl-drawer> + <template v-if="!glFeatures.iterationCadences"> + <sidebar-dropdown-widget + v-if="iterationFeatureAvailable" + :iid="activeBoardItem.iid" + issuable-attribute="iteration" + :workspace-path="projectPathForActiveIssue" + :attr-workspace-path="groupPathForActiveIssue" + :issuable-type="issuableType" + class="gl-mt-5" + data-testid="iteration-edit" + /> + </template> + <template v-else> + <iteration-sidebar-dropdown-widget + v-if="iterationFeatureAvailable" + :iid="activeBoardItem.iid" + :workspace-path="projectPathForActiveIssue" + :attr-workspace-path="groupPathForActiveIssue" + :issuable-type="issuableType" + class="gl-mt-5" + data-testid="iteration-edit" + /> + </template> + </div> + <board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" /> + <sidebar-date-widget + :iid="activeBoardItem.iid" + :full-path="fullPath" + :issuable-type="issuableType" + data-testid="sidebar-due-date" + /> + <board-sidebar-labels-select class="labels" /> + <sidebar-weight-widget + v-if="weightFeatureAvailable" + :iid="activeBoardItem.iid" + :full-path="fullPath" + :issuable-type="issuableType" + @weightUpdated="setActiveItemWeight($event)" + /> + <sidebar-confidentiality-widget + :iid="activeBoardItem.iid" + :full-path="fullPath" + :issuable-type="issuableType" + @confidentialityUpdated="setActiveItemConfidential($event)" + /> + <sidebar-subscriptions-widget + :iid="activeBoardItem.iid" + :full-path="fullPath" + :issuable-type="issuableType" + data-testid="sidebar-notifications" + /> + </template> + </gl-drawer> + </mounting-portal> </template> |