diff options
Diffstat (limited to 'app/assets/javascripts/merge_conflicts')
4 files changed, 68 insertions, 81 deletions
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue index 7649c363daa..04e493712ec 100644 --- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue +++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue @@ -1,4 +1,5 @@ <script> +import { GlButton } from '@gitlab/ui'; import { debounce } from 'lodash'; import { mapActions } from 'vuex'; import { deprecatedCreateFlash as flash } from '~/flash'; @@ -7,6 +8,9 @@ import { __ } from '~/locale'; import { INTERACTIVE_RESOLVE_MODE } from '../constants'; export default { + components: { + GlButton, + }, props: { file: { type: Object, @@ -100,21 +104,21 @@ export default { }; </script> <template> - <div v-show="file.showEditor" class="diff-editor-wrap"> - <div v-if="file.promptDiscardConfirmation" class="discard-changes-alert-wrap"> - <div class="discard-changes-alert"> - {{ __('Are you sure you want to discard your changes?') }} - <div class="discard-actions"> - <button - class="btn btn-sm btn-danger-secondary gl-button" - @click="acceptDiscardConfirmation(file)" - > - {{ __('Discard changes') }} - </button> - <button class="btn btn-default btn-sm gl-button" @click="cancelDiscardConfirmation(file)"> - {{ __('Cancel') }} - </button> - </div> + <div v-show="file.showEditor"> + <div v-if="file.promptDiscardConfirmation" class="discard-changes-alert"> + {{ __('Are you sure you want to discard your changes?') }} + <div class="gl-ml-3 gl-display-inline-block"> + <gl-button + size="small" + variant="danger" + category="secondary" + @click="acceptDiscardConfirmation(file)" + > + {{ __('Discard changes') }} + </gl-button> + <gl-button size="small" @click="cancelDiscardConfirmation(file)"> + {{ __('Cancel') }} + </gl-button> </div> </div> <div :class="classObject" class="editor-wrap"> diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue index 9721481e6be..a856d38c089 100644 --- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue +++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.vue @@ -35,7 +35,7 @@ export default { <td :class="lineCssClass(line)" class="diff-line-num header"></td> <td :class="lineCssClass(line)" class="line_content header"> <strong>{{ line.richText }}</strong> - <button class="btn" @click="handleSelected({ file, line })"> + <button type="button" @click="handleSelected({ file, line })"> {{ line.buttonTitle }} </button> </td> diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue index 7b1d947ccff..2c89b614c87 100644 --- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue +++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.vue @@ -35,7 +35,7 @@ export default { <td class="diff-line-num header" :class="lineCssClass(line)"></td> <td class="line_content header" :class="lineCssClass(line)"> <strong>{{ line.richText }}</strong> - <button class="btn" @click="handleSelected({ file, line })"> + <button type="button" @click="handleSelected({ file, line })"> {{ line.buttonTitle }} </button> </td> 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> |