diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/compare_dropdown_layout.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/compare_dropdown_layout.vue | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue new file mode 100644 index 00000000000..ed4edabd81c --- /dev/null +++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue @@ -0,0 +1,78 @@ +<script> +import Icon from '~/vue_shared/components/icon.vue'; +import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; + +export default { + components: { + Icon, + TimeAgo, + }, + props: { + versions: { + type: Array, + required: true, + }, + }, + computed: { + selectedVersionName() { + return this.versions.find(x => x.selected)?.versionName || ''; + }, + }, +}; +</script> + +<template> + <span class="dropdown inline"> + <a + class="dropdown-menu-toggle btn btn-default w-100" + data-toggle="dropdown" + aria-expanded="false" + > + <span> {{ selectedVersionName }} </span> + <icon :size="12" name="angle-down" class="position-absolute" /> + </a> + <div class="dropdown-menu dropdown-select dropdown-menu-selectable"> + <div class="dropdown-content"> + <ul> + <li v-for="version in versions" :key="version.id"> + <a :class="{ 'is-active': version.selected }" :href="version.href"> + <div> + <strong> + {{ version.versionName }} + <template v-if="version.isHead">{{ + s__('DiffsCompareBaseBranch|(HEAD)') + }}</template> + <template v-else-if="version.isBase">{{ + s__('DiffsCompareBaseBranch|(base)') + }}</template> + </strong> + </div> + <div> + <small class="commit-sha"> {{ version.short_commit_sha }} </small> + </div> + <div> + <small> + <template v-if="version.commitsText"> + {{ version.commitsText }} + </template> + <time-ago + v-if="version.created_at" + :time="version.created_at" + class="js-timeago" + /> + </small> + </div> + </a> + </li> + </ul> + </div> + </div> + </span> +</template> + +<style> +.dropdown { + min-width: 0; + max-height: 170px; +} +</style> |