feat: show selected albums first when modal is first opened

fix: change the color of the dropdown for tags to match the base theme
chore: pass props into some of the components instead of fetching from store inside of components
This commit is contained in:
Zephyrrus 2020-07-22 02:12:24 +03:00
parent 78c6fa14e6
commit 1a4744de3c
3 changed files with 33 additions and 19 deletions

View File

@ -13,12 +13,12 @@
</button>
<b-dropdown-item
v-for="album in albums"
v-for="album in orderedAlbums"
:key="album.id"
:value="album.id"
aria-role="listitem"
@click="handleClick(album.id)">
<span>{{ album. name }}</span>
<span>{{ album.name }}</span>
</b-dropdown-item>
</b-dropdown>
</template>
@ -37,18 +37,37 @@ export default {
type: Array,
default: () => [],
},
albums: {
type: Array,
default: () => [],
},
},
data() {
return {
selectedOptions: this.imageAlbums.map((e) => e.id),
selectedOptions: [],
orderedAlbums: [],
};
},
computed: {
...mapState({
albums: (state) => state.albums.tinyDetails,
}),
created() {
this.orderedAlbums = this.getOrderedAlbums();
// we're sorting here instead of computed because we want sort on creation
// then the array's values should be frozen
this.selectedOptions = this.imageAlbums.map((e) => e.id);
},
methods: {
getOrderedAlbums() {
return [...this.albums].sort(
(a, b) => {
const selectedA = this.imageAlbums.findIndex(({ name }) => name === a.name) !== -1;
const selectedB = this.imageAlbums.findIndex(({ name }) => name === b.name) !== -1;
if (selectedA !== selectedB) {
return selectedA ? -1 : 1;
}
return a.name.localeCompare(b.name);
},
);
},
isAlbumSelected(id) {
if (!this.showingModalForFile) return false;
const found = this.showingModalForFile.albums.find((el) => el.id === id);

View File

@ -102,7 +102,7 @@
<div class="divider is-lolisafe has-text-light">
Albums
</div>
<Albuminfo :imageId="file.id" :imageAlbums="albums" />
<Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" />
</div>
</div>
</div>
@ -134,7 +134,10 @@ export default {
default: () => ([]),
},
},
computed: mapState(['images']),
computed: mapState({
images: (state) => state.images,
tinyDetails: (state) => state.albums.tinyDetails,
}),
methods: {
formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';

View File

@ -88,16 +88,8 @@ export default {
.taginp {
::v-deep .dropdown-content {
background-color: hsl(0, 0%, 100%);
.dropdown-item {
color: hsl(0, 0%, 29%);
&:hover {
color: hsl(0, 0%, 4%);
background-color: hsl(0, 0%, 90%);
}
}
background-color: #323846;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
}
</style>