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:
parent
78c6fa14e6
commit
1a4744de3c
|
@ -13,7 +13,7 @@
|
|||
</button>
|
||||
|
||||
<b-dropdown-item
|
||||
v-for="album in albums"
|
||||
v-for="album in orderedAlbums"
|
||||
:key="album.id"
|
||||
:value="album.id"
|
||||
aria-role="listitem"
|
||||
|
@ -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);
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue