Commit 1c21dfd3 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch '204821-step-1-clean-up-collapsible-panel-things' into 'master'

Step 1 - Clean up some collapsible_panel things

See merge request gitlab-org/gitlab!32464
parents a15ec186 bb747cbb
......@@ -23,6 +23,8 @@ export default {
this.updateActivityBarView(view);
// TODO: We must use JQuery here to interact with the Bootstrap tooltip API
// https://gitlab.com/gitlab-org/gitlab/-/issues/217577
$(e.currentTarget).tooltip('hide');
},
},
......
......@@ -9,7 +9,7 @@ import CommitForm from './commit_sidebar/form.vue';
import IdeReview from './ide_review.vue';
import SuccessMessage from './commit_sidebar/success_message.vue';
import IdeProjectHeader from './ide_project_header.vue';
import { leftSidebarViews } from '../constants';
import { leftSidebarViews, LEFT_SIDEBAR_INIT_WIDTH } from '../constants';
export default {
components: {
......@@ -33,11 +33,16 @@ export default {
);
},
},
LEFT_SIDEBAR_INIT_WIDTH,
};
</script>
<template>
<resizable-panel :initial-width="340" side="left" class="flex-column">
<resizable-panel
:initial-width="$options.LEFT_SIDEBAR_INIT_WIDTH"
side="left"
class="multi-file-commit-panel flex-column"
>
<template v-if="loading">
<div class="multi-file-commit-panel-inner">
<div v-for="n in 3" :key="n" class="multi-file-loading-container">
......
<script>
import { mapActions } from 'vuex';
import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
import { DEFAULT_SIDEBAR_MIN_WIDTH } from '../constants';
export default {
components: {
......@@ -14,7 +15,7 @@ export default {
minSize: {
type: Number,
required: false,
default: 340,
default: DEFAULT_SIDEBAR_MIN_WIDTH,
},
side: {
type: String,
......@@ -45,7 +46,7 @@ export default {
</script>
<template>
<div :style="panelStyle" class="multi-file-commit-panel">
<div :style="panelStyle">
<slot></slot>
<panel-resizer
:size.sync="width"
......
......@@ -4,6 +4,9 @@ export const MAX_WINDOW_HEIGHT_COMPACT = 750;
export const MAX_TITLE_LENGTH = 50;
export const MAX_BODY_LENGTH = 72;
export const LEFT_SIDEBAR_INIT_WIDTH = 340;
export const DEFAULT_SIDEBAR_MIN_WIDTH = 340;
// File view modes
export const FILE_VIEW_MODE_EDITOR = 'editor';
export const FILE_VIEW_MODE_PREVIEW = 'preview';
......
......@@ -65,6 +65,7 @@ $ide-commit-header-height: 48px;
flex-direction: column;
flex: 1;
border-left: 1px solid var(--ide-border-color, $white-dark);
border-right: 1px solid var(--ide-border-color, $white-dark);
overflow: hidden;
}
......@@ -584,14 +585,15 @@ $ide-commit-header-height: 48px;
background: var(--ide-highlight-background, $white);
}
&.is-right {
padding-right: $gl-padding;
padding-left: $gl-padding + 1px;
}
&::after {
right: auto;
left: -1px;
}
&.is-right {
padding-right: $gl-padding;
padding-left: $gl-padding + 1px;
&::after {
right: auto;
left: -1px;
}
}
}
......@@ -877,15 +879,11 @@ $ide-commit-header-height: 48px;
}
.ide-right-sidebar {
.ide-activity-bar {
border-left: 1px solid var(--ide-border-color, $white-dark);
}
.multi-file-commit-panel-inner {
width: 350px;
padding: $grid-size 0;
background-color: var(--ide-highlight-background, $white);
border-left: 1px solid var(--ide-border-color, $white-dark);
border-right: 1px solid var(--ide-border-color, $white-dark);
}
.ide-right-sidebar-jobs-detail {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment