Uh oh!
There was an error while loading. Please reload this page.
refactor skin selection#894
Uh oh!
There was an error while loading. Please reload this page.
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -3,15 +3,15 @@ | ||
| <v-card-title>Set Skin</v-card-title> | ||
| <v-card-text> | ||
| <v-select | ||
| :items="skins" | ||
| label="Skin" | ||
| placeholder="Pick a Skin" | ||
| hint="The default skin is Vector." | ||
| persistent-hint | ||
| prepend-icon="mdi-web" | ||
| :disabled="inFlight" | ||
deer-wmde marked this conversation as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
| :error-messages="error" | ||
| v-model="skinId" | ||
| ></v-select> | ||
| </v-card-text> | ||
| <v-card-actions> | ||
| @@ -22,45 +22,62 @@ | ||
| <span>It may take up to 10 seconds for changes to be reflected on your wiki</span> | ||
| </v-tooltip> | ||
| </v-card-actions> | ||
| <Message ref="message" /> | ||
| </v-card> | ||
| </template> | ||
| <script> | ||
| import Message from '../Features/Message.vue' | ||
| export default { | ||
| name: 'Skin', | ||
| components: { | ||
| Message | ||
| }, | ||
| props: [ | ||
| 'wikiId' | ||
| ], | ||
| data () { | ||
| return { | ||
| skins: [ | ||
Contributor There was a problem hiding this comment. I would expect ContributorAuthor There was a problem hiding this comment. ah right, so we removed them again because they are not ready to be used yet. After our next mediawiki update we will be able to include them here. Until then I changed this PR so that it's just some code refactoring, basically preparation to add them in the future + reuse of the snackbar for alerts Contributor There was a problem hiding this comment. I see I will then merge this | ||
| { | ||
| value: 'vector', | ||
| text: 'Vector' | ||
| }, | ||
| { | ||
| value: 'modern', | ||
| text: 'Modern' | ||
| }, | ||
| { | ||
| value: 'timeless', | ||
| text: 'Timeless' | ||
| } | ||
| ], | ||
| skinId: '', | ||
| message: false | ||
| } | ||
| }, | ||
| created () { | ||
| this.skinId = this.$store.state.wikis.currentWikiSettings.wgDefaultSkin | ||
| }, | ||
| computed: { | ||
| skin () { | ||
| return this.skins.find(skin => skin.value === this.skinId) | ||
| } | ||
| }, | ||
| methods: { | ||
| doSetSkin () { | ||
| const wiki = this.wikiId | ||
| const value = this.skin.value | ||
| this.$store | ||
| .dispatch('updateSkin', { wiki, value }) | ||
| .then(() => { | ||
| this.$refs.message.show('success', `Your default skin has been updated to ${this.skin.text}.`) | ||
| }) | ||
| .catch(err => { | ||
| console.error(err.response) | ||
| this.$refs.message.show('error', 'Something went wrong while updating your default skin. Please try again.') | ||
| }) | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <template> | ||
| <v-snackbar :color="status" elevation="24" v-model="visible"> | ||
| {{ text }} | ||
| <template v-slot:action> | ||
| <v-btn | ||
| text | ||
| variant="text" | ||
| @click="hide" | ||
| > | ||
| Close | ||
| </v-btn> | ||
| </template> | ||
| </v-snackbar> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data () { | ||
| return { | ||
| visible: false, | ||
| text: 'Hello, this is a snackbar message!', | ||
| status: 'success' | ||
| } | ||
| }, | ||
| methods: { | ||
| show (status, message) { | ||
| this.status = status | ||
| this.text = message | ||
| this.visible = true | ||
| }, | ||
| hide () { | ||
| this.visible = false | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style scoped> | ||
| </style> |
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://v2.vuejs.org/v2/guide/components#Passing-Data-to-Child-Components-with-Props
I believe generally it's recommended to use props rather than
$refsto pass data down to child components. Did you try this and find it wasn't possible?Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nah I'm just a vue noob, will adjust soon
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just looked at the docs, I'm not just passing data but calling a method, not sure if there would be another way then
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess you could argue that we shouldnt know about the method and design the component in a way that changing the properties calls the method, but now I'm way out of bounds of my knowledge about vue architecture