Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-23 19:53:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

use b-dropdown-item-button and clean up boards dropdown

Browse source
This commit is contained in:
Gamebrary 2021-05-24 20:40:59 -07:00
parent 4d60b315c3
commit a697df351b
1 changed files with 39 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/components/BoardsDropdown.vue
View file

@ -10,45 +10,52 @@
<i class="fas fa-caret-down fa-fw" aria-hidden />
</template>
<div class="d-flex align-items-center justify-content-between">
<span class="ml-2">
{{ board.name }}
</span>
<b-dropdown-item-button
size="sm"
v-b-modal:edit-board
>
<i class="fas fa-pencil-alt fa-fw" aria-hidden />
Edit board
</b-dropdown-item-button>
<b-button
variant="secondary"
size="sm"
v-b-modal:edit-board
>
<i class="fas fa-pencil-alt fa-fw" aria-hidden />
</b-button>
</div>
<b-dropdown-divider />
<b-dropdown-item-button
size="sm"
v-b-modal:create-board
>
<i class="fas fa-plus fa-fw" aria-hidden></i>
Create new board
</b-dropdown-item-button>
<!-- TODO: create array map with url already fetched -->
<!-- TODO: filter out current board -->
<b-dropdown-divider />
<span class="m-2">Other boards</span>
<template v-if="filteredBoards.length">
<b-dropdown-divider />
<b-dropdown-item
v-for="{ id, name, backgroundColor, backgroundUrl } in boards"
:key="id"
:active="board.name === name"
@click.native="viewBoard(id)"
>
<b-avatar
rounded
:class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]"
:title="name"
text=" "
:style="`
${getWallpaperUrl(backgroundUrl)}
background-color: ${backgroundColor ? backgroundColor : ''}
`"
/>
<span class="m-2 text-muted">Other boards:</span>
{{ name }}
</b-dropdown-item>
<b-dropdown-item-button
v-for="{ id, name, backgroundColor, backgroundUrl } in filteredBoards"
:key="id"
:active="board.name === name"
@click="viewBoard(id)"
>
<b-avatar
rounded
:class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]"
:title="name"
text=" "
:style="`
${getWallpaperUrl(backgroundUrl)}
background-color: ${backgroundColor ? backgroundColor : ''}
`"
/>
{{ name }}
</b-dropdown-item-button>
</template>
</b-dropdown>
</portal>
</template>