Use Vue to refactor pull merge UI (#19650)
* Use Vue to refactor pull merge UI * add comments * fix comments * small fine tune * fix tests * adopt new pull default messages * clean up Co-authored-by: 6543 <6543@obermui.de>tokarchuk/v1.17
wxiaoguang
3 years ago
committed by
GitHub
parent
d985dcc922
commit
368baf9e77
@ -0,0 +1,127 @@ |
||||
<template> |
||||
<div> |
||||
<div class="ui form" v-if="showActionForm"> |
||||
<form :action="mergeForm.baseLink+'/merge'" method="post"> |
||||
<input type="hidden" name="_csrf" :value="csrfToken"> |
||||
<input type="hidden" name="head_commit_id" v-model="mergeForm.pullHeadCommitID"> |
||||
|
||||
<template v-if="!mergeStyleDetail.hideMergeMessageTexts"> |
||||
<div class="field"> |
||||
<input type="text" name="merge_title_field" v-model="mergeTitleFieldValue"> |
||||
</div> |
||||
<div class="field"> |
||||
<textarea name="merge_message_field" rows="5" :placeholder="mergeForm.mergeMessageFieldPlaceHolder" v-model="mergeMessageFieldValue"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<button class="ui button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" type="submit" name="do" :value="mergeStyle"> |
||||
{{ mergeStyleDetail.textDoMerge }} |
||||
</button> |
||||
|
||||
<button class="ui button merge-cancel" @click="toggleActionForm(false)"> |
||||
{{ mergeForm.textCancel }} |
||||
</button> |
||||
|
||||
<div class="ui checkbox ml-2" v-if="mergeForm.isPullBranchDeletable"> |
||||
<input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge"> |
||||
<label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
|
||||
<template v-if="!showActionForm"> |
||||
<div class="ui buttons merge-button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" @click="toggleActionForm(true)"> |
||||
<button class="ui button"> |
||||
<svg-icon name="octicon-git-merge"/> |
||||
<span class="button-text">{{ mergeStyleDetail.textDoMerge }}</span> |
||||
</button> |
||||
<div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1"> |
||||
<svg-icon name="octicon-triangle-down" :size="14"/> |
||||
<div class="menu" :class="{'show':showMergeStyleMenu}"> |
||||
<template v-for="msd in mergeForm.mergeStyles"> |
||||
<div class="item" v-if="msd.allowed" :key="msd.name" @click.stop="mergeStyle=msd.name"> |
||||
{{ msd.textDoMerge }} |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {SvgIcon} from '../svg.js'; |
||||
|
||||
const {csrfToken, pageData} = window.config; |
||||
|
||||
export default { |
||||
name: 'PullRequestMergeForm', |
||||
components: { |
||||
SvgIcon, |
||||
}, |
||||
|
||||
data: () => ({ |
||||
csrfToken, |
||||
mergeForm: pageData.pullRequestMergeForm, |
||||
|
||||
mergeTitleFieldValue: '', |
||||
mergeMessageFieldValue: '', |
||||
deleteBranchAfterMerge: false, |
||||
|
||||
mergeStyle: '', |
||||
mergeStyleDetail: { // dummy only, these values will come from one of the mergeForm.mergeStyles |
||||
hideMergeMessageTexts: false, |
||||
textDoMerge: '', |
||||
mergeTitleFieldText: '', |
||||
mergeMessageFieldText: '', |
||||
}, |
||||
mergeStyleAllowedCount: 0, |
||||
|
||||
showMergeStyleMenu: false, |
||||
showActionForm: false, |
||||
}), |
||||
|
||||
watch: { |
||||
mergeStyle(val) { |
||||
this.mergeStyleDetail = this.mergeForm.mergeStyles.find((e) => e.name === val); |
||||
} |
||||
}, |
||||
|
||||
created() { |
||||
this.mergeStyleAllowedCount = this.mergeForm.mergeStyles.reduce((v, msd) => v + (msd.allowed ? 1 : 0), 0); |
||||
this.mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed)?.name; |
||||
}, |
||||
|
||||
mounted() { |
||||
document.addEventListener('mouseup', this.hideMergeStyleMenu); |
||||
}, |
||||
|
||||
unmounted() { |
||||
document.removeEventListener('mouseup', this.hideMergeStyleMenu); |
||||
}, |
||||
|
||||
methods: { |
||||
hideMergeStyleMenu() { |
||||
this.showMergeStyleMenu = false; |
||||
}, |
||||
toggleActionForm(show) { |
||||
this.showActionForm = show; |
||||
if (!show) return; |
||||
this.deleteBranchAfterMerge = this.mergeForm.defaultDeleteBranchAfterMerge; |
||||
this.mergeTitleFieldValue = this.mergeStyleDetail.mergeTitleFieldText; |
||||
this.mergeMessageFieldValue = this.mergeStyleDetail.mergeMessageFieldText; |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/* to keep UI the same, at the moment we are still using some Fomantic UI styles, but we do not use their scripts, so we need to fine tune some styles */ |
||||
.ui.dropdown .menu.show { |
||||
display: block; |
||||
} |
||||
.ui.checkbox label { |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,12 @@ |
||||
import Vue from 'vue'; |
||||
import PullRequestMergeForm from '../components/PullRequestMergeForm.vue'; |
||||
|
||||
export default function initPullRequestMergeForm() { |
||||
const el = document.getElementById('pull-request-merge-form'); |
||||
if (!el) return; |
||||
|
||||
const View = Vue.extend({ |
||||
render: (createElement) => createElement(PullRequestMergeForm), |
||||
}); |
||||
new View().$mount(el); |
||||
} |
||||
Loading…
Reference in new issue