diff options
Diffstat (limited to 'app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue')
-rw-r--r-- | app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue | 111 |
1 files changed, 47 insertions, 64 deletions
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue index 0509cf0afa1..3e31e2e93ae 100644 --- a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue +++ b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue @@ -1,5 +1,5 @@ <script> -import { GlSprintf } from '@gitlab/ui'; +import { GlSprintf, GlButton, GlButtonGroup } from '@gitlab/ui'; import { mapGetters, mapState, mapActions } from 'vuex'; import { __ } from '~/locale'; import FileIcon from '~/vue_shared/components/file_icon.vue'; @@ -20,6 +20,8 @@ import { INTERACTIVE_RESOLVE_MODE } from './constants'; */ export default { components: { + GlButton, + GlButtonGroup, GlSprintf, FileIcon, DiffFileEditor, @@ -77,28 +79,23 @@ export default { {{ conflictsData.errorMessage }} </div> <template v-if="!isLoading && !hasError"> - <div class="content-block oneline-block files-changed"> - <div v-if="fileTextTypePresent" class="inline-parallel-buttons"> - <div class="btn-group"> - <button - :class="{ active: !isParallel }" - class="btn gl-button" - @click="setViewType('inline')" - > + <div class="gl-border-b-0 gl-py-5 gl-line-height-32"> + <div v-if="fileTextTypePresent" class="gl-float-right"> + <gl-button-group> + <gl-button :selected="!isParallel" @click="setViewType('inline')"> {{ __('Inline') }} - </button> - <button - :class="{ active: isParallel }" - class="btn gl-button" + </gl-button> + <gl-button + :selected="isParallel" data-testid="side-by-side" @click="setViewType('parallel')" > {{ __('Side-by-side') }} - </button> - </div> + </gl-button> + </gl-button-group> </div> <div class="js-toggle-container"> - <div class="commit-stat-summary" data-testid="conflicts-count"> + <div data-testid="conflicts-count"> <gl-sprintf :message="$options.i18n.commitStatSummary"> <template #conflict> <strong class="cred">{{ getConflictsCountText }}</strong> @@ -127,47 +124,43 @@ export default { <strong class="file-title-name">{{ file.filePath }}</strong> </div> <div class="file-actions d-flex align-items-center gl-ml-auto gl-align-self-start"> - <div v-if="file.type === 'text'" class="btn-group gl-mr-3"> - <button - :class="{ active: file.resolveMode === 'interactive' }" - class="btn gl-button" - type="button" + <gl-button-group v-if="file.type === 'text'" class="gl-mr-3"> + <gl-button + :selected="file.resolveMode === 'interactive'" data-testid="interactive-button" @click="onClickResolveModeButton(file, 'interactive')" > {{ __('Interactive mode') }} - </button> - <button - :class="{ active: file.resolveMode === 'edit' }" - class="btn gl-button" - type="button" + </gl-button> + <gl-button + :selected="file.resolveMode === 'edit'" data-testid="inline-button" @click="onClickResolveModeButton(file, 'edit')" > {{ __('Edit inline') }} - </button> - </div> - <a :href="file.blobPath" class="btn gl-button view-file"> + </gl-button> + </gl-button-group> + <gl-button :href="file.blobPath"> <gl-sprintf :message="__('View file @ %{commitSha}')"> <template #commitSha> {{ conflictsData.shortCommitSha }} </template> </gl-sprintf> - </a> + </gl-button> </div> </div> <div class="diff-content diff-wrap-lines"> - <template v-if="file.resolveMode === 'interactive' && file.type === 'text'"> - <div v-if="!isParallel" class="file-content"> - <inline-conflict-lines :file="file" /> - </div> - <div v-if="isParallel" class="file-content"> - <parallel-conflict-lines :file="file" /> - </div> - </template> - <div v-if="file.resolveMode === 'edit' || file.type === 'text-editor'"> - <diff-file-editor :file="file" /> + <div + v-if="file.resolveMode === 'interactive' && file.type === 'text'" + class="file-content" + > + <parallel-conflict-lines v-if="isParallel" :file="file" /> + <inline-conflict-lines v-else :file="file" /> </div> + <diff-file-editor + v-if="file.resolveMode === 'edit' || file.type === 'text-editor'" + :file="file" + /> </div> </div> </div> @@ -176,10 +169,10 @@ export default { <div class="resolve-conflicts-form"> <div class="form-group row"> <div class="col-md-4"> - <h4> + <h4 class="gl-mt-0"> {{ __('Resolve conflicts on source branch') }} </h4> - <div class="resolve-info"> + <div class="gl-mb-5" data-testid="resolve-info"> <gl-sprintf :message="$options.i18n.resolveInfo"> <template #use_ours> <code>{{ s__('MergeConflict|Use ours') }}</code> @@ -199,7 +192,7 @@ export default { <label class="label-bold" for="commit-message"> {{ __('Commit message') }} </label> - <div class="commit-message-container"> + <div class="commit-message-container gl-mb-4"> <div class="max-width-marker"></div> <textarea id="commit-message" @@ -209,27 +202,17 @@ export default { rows="5" ></textarea> </div> - </div> - </div> - <div class="form-group row"> - <div class="offset-md-4 col-md-8"> - <div class="row"> - <div class="col-6"> - <button - :disabled="!isReadyToCommit" - class="btn gl-button btn-success js-submit-button" - type="button" - @click="submitResolvedConflicts(resolveConflictsPath)" - > - <span>{{ getCommitButtonText }}</span> - </button> - </div> - <div class="col-6 text-right"> - <a :href="mergeRequestPath" class="gl-button btn btn-default"> - {{ __('Cancel') }} - </a> - </div> - </div> + <gl-button + :disabled="!isReadyToCommit" + variant="confirm" + class="js-submit-button" + @click="submitResolvedConflicts(resolveConflictsPath)" + > + {{ getCommitButtonText }} + </gl-button> + <gl-button :href="mergeRequestPath"> + {{ __('Cancel') }} + </gl-button> </div> </div> </div> |