label multi shows color, sharing shows avatars

Signed-off-by: Jakob <jakob.roehrl@web.de>
This commit is contained in:
Jakob
2019-08-29 09:15:30 +02:00
parent 493eee601b
commit 59827e0f69
2 changed files with 15 additions and 5 deletions

View File

@@ -3,7 +3,8 @@
<multiselect v-model="addAcl" :options="unallocatedSharees" label="label" <multiselect v-model="addAcl" :options="unallocatedSharees" label="label"
@input="clickAddAcl" @search-change="asyncFind"> @input="clickAddAcl" @search-change="asyncFind">
<template #option="scope"> <template #option="scope">
{{ scope.option.label }} <avatar :user="scope.option.value.shareWith" />
<span class="avatarLabel">{{ scope.option.label }} </span>
</template> </template>
</multiselect> </multiselect>
@@ -129,4 +130,7 @@ export default {
padding: 12px 9px; padding: 12px 9px;
flex-grow: 1; flex-grow: 1;
} }
.avatarLabel {
padding: 6px
}
</style> </style>

View File

@@ -36,7 +36,7 @@
:taggable="true" label="title" :taggable="true" label="title"
track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard"> track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard">
<template #option="scope"> <template #option="scope">
<span>{{ scope.option.title }}</span> <div :style="{ color: '#' + scope.option.color}">{{ scope.option.title }}</div>
</template> </template>
</multiselect> </multiselect>
</div> </div>
@@ -50,7 +50,8 @@
track-by="primaryKey" track-by="primaryKey"
@select="assignUserToCard" @remove="removeUserFromCard"> @select="assignUserToCard" @remove="removeUserFromCard">
<template #option="scope"> <template #option="scope">
{{ scope.option.displayname }} <avatar :user="scope.option.primaryKey" />
<span class="avatarLabel">{{ scope.option.displayname }} </span>
</template> </template>
</multiselect> </multiselect>
</div> </div>
@@ -86,7 +87,7 @@
</template> </template>
<script> <script>
import { AppSidebar, AppSidebarTab, Multiselect, DatetimePicker } from 'nextcloud-vue' import { AppSidebar, AppSidebarTab, Multiselect, DatetimePicker, Avatar } from 'nextcloud-vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import VueEasymde from 'vue-easymde' import VueEasymde from 'vue-easymde'
import { Actions } from 'nextcloud-vue/dist/Components/Actions' import { Actions } from 'nextcloud-vue/dist/Components/Actions'
@@ -103,7 +104,8 @@ export default {
DatetimePicker, DatetimePicker,
VueEasymde, VueEasymde,
Actions, Actions,
ActionButton ActionButton,
Avatar
}, },
props: { props: {
id: { id: {
@@ -317,4 +319,8 @@ export default {
} }
} }
.avatarLabel {
padding: 6px
}
</style> </style>