Mod preview panel #1680
Mod preview panel #1680
Conversation
TODO: Improve styling
…le click opening new electron window
…unter and missing changelog banner
- Switched implementation to rely on provider binding - Changed "Rating" to "Likes" - Removed Donate button from Online preview - Summary now has a border - Download mod modal now opens
| @@ -1,6 +1,8 @@ | |||
| <template> | |||
| <div> | |||
| <router-view v-if="visible"/> | |||
| <div class="router-view"> | |||
There was a problem hiding this comment.
What do these wrappers (there's another in Manager.vue) do? I couldn't find any styles targeting the class name.
| @@ -0,0 +1,75 @@ | |||
| <script setup lang="ts"> | |||
There was a problem hiding this comment.
On TSMM, it seems the button that should open this modal does nothing. If the modal is made visible via devtools, changing the values in dropdown don't affect the ordering. IDK why, didn't look into it yet.
| const directions = Object.keys(SortDirection); | ||
| const behaviours = Object.keys(SortingStyle); | ||
|
|
||
| const selectedBehaviour = computed(() => store.state.modFilters.sortBehaviour); |
There was a problem hiding this comment.
I noticed the computed accepts a setter, e.g. something like this:
const selectedBehaviour = computed({
get() {
return store.state.modFilters.sortBehaviour;
},
set(value: string) {
// Note that setSortBehaviour currently expects object key and we pass the value directly.
store.commit("modFilters/setSortBehaviour", value);
}
});Markup could then use v-model:
<select class="select select--content-spacing" v-model="selectedBehaviour">
<option v-for="(value, key) in SortingStyle" :value="value" :key="`sort-behaviour--${key}`">
{{ value }}
</option>
</select>This would remove the need to swap between the key and the value.
| @@ -0,0 +1,99 @@ | |||
| <script lang="ts" setup> | |||
| import { computed } from 'vue'; | |||
| import markdownit from 'markdown-it'; | |||
There was a problem hiding this comment.
I'm not 100% certain how experimental this is, but the new website uses an undocumented endpoint, e.g. https://thunderstore.io/api/cyberstorm/package/ymc_mhz/morehead/latest/readme/ (also available for changelog). The major thing is it returns HTML instead of MD, so we could avoid requiring these dependencies, and IIRC get some security against XSS at the same time. Additionally it would make it easier to have the content look the same on the manager and the website, so the author doesn't need to specifically target one or another.
Also Oksamies might be able to provide some CSS that would make it even easier to get the content look the same, but I'm not 100% sure how feasible that is.
| import { computed } from 'vue'; | ||
| import markdownit from 'markdown-it'; | ||
| import { markdownItTable } from 'markdown-it-table'; | ||
| import LinkProvider from 'src/providers/components/LinkProvider'; |
There was a problem hiding this comment.
Non-relative import. There's more of these in other files.
| class="input" | ||
| type="text" | ||
| placeholder="Search for a mod" | ||
| autocomplete="off" |
There was a problem hiding this comment.
This shouldn't be removed, it's needed in TSMM.
| <div class="input-group"> | ||
| <div class="input-group input-group--flex"> | ||
| <label for="thunderstore-category-filter"> </label> | ||
| <button |
There was a problem hiding this comment.
I like how using the modal button here instead of the selects clean up the UI 👍Outside of the scope here but we should consider something similar to installed mod view?
| sortingDirectionModel = SortingDirection.STANDARD; | ||
| sortingStyleModel = SortingStyle.DEFAULT; |
There was a problem hiding this comment.
These could be cleaned up now.
| @@ -226,8 +234,59 @@ export default class OnlineModView extends Vue { | |||
| }); | |||
| } | |||
|
|
|||
| openPreviewForMod(mod: ThunderstoreMod) { | |||
There was a problem hiding this comment.
Nitpick: really a "toggle" rather than "open" function.
| }, | ||
|
|
||
| setSortDirection(state: State, direction: keyof typeof SortDirection) { | ||
| console.log(direction) |
|
Some color-related readability issues especially on dark mode: Tables, at least inside a collapsible element, don't render contents: Both examples are from https://new.thunderstore.io/c/repo/p/YMC_MHZ/MoreHead/ |
|
Not sure what part of the changes, but TSMM now has two scroll bars, making things awkward. Also don't know if it's easier to address this on TSMM side or R2MM.
|
No description provided.