mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-04-21 03:48:36 -05:00
Guillaume Chau
90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<template>
|
|
<div class="project-select-list-item list-item">
|
|
<div class="content">
|
|
<div class="favorite">
|
|
<VueButton
|
|
class="icon-button"
|
|
:icon-left="project.favorite ? 'star' : 'star_border'"
|
|
v-tooltip="$t('org.vue.components.project-select-list-item.tooltips.favorite')"
|
|
data-testid="favorite-button"
|
|
@click.stop="$emit('favorite')"
|
|
/>
|
|
</div>
|
|
<div class="info">
|
|
<ListItemInfo
|
|
:description="project.path"
|
|
>
|
|
<div slot="name" class="name">
|
|
<span>{{ project.name }}</span>
|
|
|
|
<ProjectTasksDropdown
|
|
class="bullet-menu"
|
|
:tasks="project.tasks"
|
|
/>
|
|
</div>
|
|
</ListItemInfo>
|
|
</div>
|
|
<div class="actions">
|
|
<VueButton
|
|
class="icon-button"
|
|
icon-left="close"
|
|
v-tooltip="$t('org.vue.components.project-select-list-item.tooltips.delete')"
|
|
data-testid="delete-button"
|
|
@click.stop="$emit('remove')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
project: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import "~@/style/imports"
|
|
|
|
.content
|
|
padding $padding-item
|
|
display grid
|
|
grid-template-columns auto 1fr auto
|
|
grid-template-rows auto
|
|
grid-template-areas "icon info actions"
|
|
grid-gap $padding-item
|
|
|
|
.favorite
|
|
grid-area icon
|
|
h-box()
|
|
box-center()
|
|
|
|
.info
|
|
grid-area info
|
|
|
|
.actions
|
|
grid-area actions
|
|
h-box()
|
|
align-items center
|
|
|
|
>>> > *
|
|
space-between-x($padding-item)
|
|
|
|
.name
|
|
h-box()
|
|
align-items center
|
|
|
|
.bullet-menu
|
|
margin-left 6px
|
|
|
|
.project-select-list-item
|
|
&.open
|
|
&:not(:hover)
|
|
background rgba($vue-ui-color-primary, .05)
|
|
</style>
|