BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit efafa2f1 by Phil Hughes
Options

Updated commit section in IDE sidebar

parent 7311e69f
Showing with 217 additions and 54 deletions
app/assets/javascripts/ide/components/commit_sidebar/form.vue 0 → 100644
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { sprintf, __ } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import CommitMessageField from './message_field.vue';
import Actions from './actions.vue';
import { activityBarViews } from '../../constants';
export default {
components: {
Actions,
LoadingButton,
CommitMessageField,
},
data() {
return {
isCompact: true,
componentHeight: null,
};
},
computed: {
...mapState(['changedFiles', 'stagedFiles', 'currentActivityView']),
...mapState('commit', ['commitMessage', 'submitCommitLoading']),
...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
overviewText() {
return sprintf(
__(
'<strong>%{changedFilesLength} unstaged</strong> and <strong>%{stagedFilesLength} staged</strong> changes',
),
{
stagedFilesLength: this.stagedFiles.length,
changedFilesLength: this.changedFiles.length,
},
);
},
},
watch: {
currentActivityView() {
this.isCompact = this.currentActivityView !== activityBarViews.commit;
},
},
methods: {
...mapActions(['updateActivityBarView']),
...mapActions('commit', ['updateCommitMessage', 'discardDraft', 'commitChanges']),
toggleIsSmall() {
this.updateActivityBarView(activityBarViews.commit)
.then(() => {
this.isCompact = !this.isCompact;
})
.catch(e => {
throw e;
});
},
beforeEnterTransition() {
const elHeight = this.isCompact
? this.$refs.formEl.offsetHeight
: this.$refs.compactEl.offsetHeight;
this.componentHeight = elHeight + 32;
},
enterTransition() {
this.$nextTick(() => {
const elHeight = this.isCompact
? this.$refs.compactEl.offsetHeight
: this.$refs.formEl.offsetHeight;
this.componentHeight = elHeight + 32;
});
},
},
activityBarViews,
};
</script>
<template>
<div
class="multi-file-commit-form"
:class="{
'is-compact': isCompact,
'is-full': !isCompact
}"
:style="{
height: `${componentHeight}px`
}"
>
<transition
name="commit-form-slide-up"
@before-enter="beforeEnterTransition"
@enter="enterTransition"
>
<div
v-if="isCompact"
class="commit-form-compact"
ref="compactEl"
>
<button
type="button"
class="btn btn-primary btn-sm btn-block"
@click="toggleIsSmall"
>
{{ __('Commit') }}
</button>
<p
class="text-center"
v-html="overviewText"
></p>
</div>
<form
v-if="!isCompact"
class="form-horizontal"
@submit.prevent.stop="commitChanges"
ref="formEl"
>
<commit-message-field
:text="commitMessage"
@input="updateCommitMessage"
/>
<div class="clearfix prepend-top-15">
<actions />
<loading-button
:loading="submitCommitLoading"
:disabled="commitButtonDisabled"
container-class="btn btn-success btn-sm pull-left"
:label="__('Commit')"
@click="commitChanges"
/>
<button
v-if="!discardDraftButtonDisabled"
type="button"
class="btn btn-default btn-sm pull-right"
@click="discardDraft"
>
{{ __('Discard draft') }}
</button>
<button
v-else
type="button"
class="btn btn-default btn-sm pull-right"
@click="toggleIsSmall"
>
{{ __('Collapse') }}
</button>
</div>
</form>
</transition>
</div>
</template>
app/assets/javascripts/ide/components/commit_sidebar/list.vue
......@@ -76,13 +76,11 @@ export default {
:size="18"
/>
{{ titleText }}
<button
type="button"
class="btn btn-blank btn-link ide-staged-action-btn"
@click="actionBtnClicked"
<span
class="ide-commit-file-count"
>
{{ actionBtnText }}
</button>
{{ fileList.length }}
</span>
</div>
</header>
<ul
......
app/assets/javascripts/ide/components/ide_side_bar.vue
......@@ -9,6 +9,7 @@ import IdeTree from './ide_tree.vue';
import ResizablePanel from './resizable_panel.vue';
import ActivityBar from './activity_bar.vue';
import CommitSection from './repo_commit_section.vue';
import CommitForm from './commit_sidebar/form.vue';
export default {
components: {
......@@ -21,6 +22,7 @@ export default {
Identicon,
CommitSection,
IdeTree,
CommitForm,
},
computed: {
...mapState(['loading', 'currentBranchId', 'currentActivityView']),
......@@ -91,6 +93,7 @@ export default {
:is="currentActivityView"
/>
</div>
<commit-form />
</template>
</div>
</resizable-panel>
......
app/assets/javascripts/ide/components/repo_commit_section.vue
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { mapState, mapActions } from 'vuex';
import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import CommitFilesList from './commit_sidebar/list.vue';
import EmptyState from './commit_sidebar/empty_state.vue';
import CommitMessageField from './commit_sidebar/message_field.vue';
import * as consts from '../stores/modules/commit/constants';
import Actions from './commit_sidebar/actions.vue';
export default {
components: {
......@@ -16,25 +13,15 @@ export default {
Icon,
CommitFilesList,
EmptyState,
Actions,
LoadingButton,
CommitMessageField,
},
directives: {
tooltip,
},
computed: {
...mapState(['changedFiles', 'stagedFiles']),
...mapState('commit', ['commitMessage', 'submitCommitLoading']),
...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
},
methods: {
...mapActions('commit', [
'updateCommitMessage',
'discardDraft',
'commitChanges',
'updateCommitAction',
]),
...mapActions('commit', ['commitChanges', 'updateCommitAction']),
forceCreateNewBranch() {
return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
},
......@@ -62,6 +49,7 @@ export default {
v-if="changedFiles.length || stagedFiles.length"
>
<commit-files-list
class="is-first"
icon-name="unstaged"
:title="__('Unstaged')"
:file-list="changedFiles"
......@@ -78,33 +66,6 @@ export default {
item-action-component="unstage-button"
:staged-list="true"
/>
<form
class="form-horizontal multi-file-commit-form"
@submit.prevent.stop="commitChanges"
>
<commit-message-field
:text="commitMessage"
@input="updateCommitMessage"
/>
<div class="clearfix prepend-top-15">
<actions />
<loading-button
:loading="submitCommitLoading"
:disabled="commitButtonDisabled"
container-class="btn btn-success btn-sm pull-left"
:label="__('Commit')"
@click="commitChanges"
/>
<button
v-if="!discardDraftButtonDisabled"
type="button"
class="btn btn-default btn-sm pull-right"
@click="discardDraft"
>
{{ __('Discard draft') }}
</button>
</div>
</form>
</template>
<empty-state
v-else
......
app/assets/stylesheets/pages/repo.scss
......@@ -484,13 +484,12 @@
align-items: center;
margin-bottom: 0;
border-bottom: 1px solid $white-dark;
padding: $gl-btn-padding 0;
padding: $gl-btn-padding $gl-padding;
}
.multi-file-commit-panel-header-title {
display: flex;
flex: 1;
padding-left: $grid-size;
svg {
margin-right: $gl-btn-padding;
......@@ -506,7 +505,7 @@
.multi-file-commit-list {
flex: 1;
overflow: auto;
padding: $gl-padding 0;
padding: $gl-padding;
min-height: 60px;
}
......@@ -602,7 +601,9 @@
.multi-file-commit-form {
padding: $gl-padding;
background-color: $white-light;
border-top: 1px solid $white-dark;
border-left: 1px solid $white-dark;
.btn {
font-size: $gl-font-size;
......@@ -760,12 +761,20 @@
flex-direction: column;
width: 100%;
min-height: 140px;
padding: 0 16px;
}
.ide-staged-action-btn {
.ide-commit-list-container.is-first {
border-bottom: 1px solid $white-dark;
}
.ide-commit-file-count {
min-width: 22px;
margin-left: auto;
color: $gl-link-color;
background-color: $gray-light;
border-radius: $border-radius-default;
border: 1px solid $white-dark;
line-height: 20px;
text-align: center;
}
.ide-commit-radios {
......@@ -947,3 +956,48 @@
margin-top: -1px;
}
}
.multi-file-commit-form {
position: relative;
transition: all 0.3s ease;
}
.commit-form-compact {
.btn {
margin-bottom: 8px;
}
p {
margin-bottom: 0;
}
}
.commit-form-slide-up-enter-active,
.commit-form-slide-up-leave-active {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
transition: all 0.3s ease;
}
.is-full .commit-form-slide-up-enter {
transform: translateY(100%);
}
.is-full .commit-form-slide-up-enter-to {
transform: translateY(0);
}
.commit-form-slide-up-enter,
.commit-form-slide-up-leave-to {
opacity: 0;
}
.is-compact .commit-form-slide-up-leave {
transform: translateY(0);
}
.is-compact .commit-form-slide-up-leave-to {
transform: translateY(100%);
}
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