diff options
Diffstat (limited to 'application')
| -rw-r--r-- | application/components/app.vue | 48 | ||||
| -rw-r--r-- | application/components/messages/invalid-repo.vue | 31 | ||||
| -rw-r--r-- | application/components/messages/too-many-repos.vue | 37 |
3 files changed, 75 insertions, 41 deletions
diff --git a/application/components/app.vue b/application/components/app.vue index ac4348d..d1207e6 100644 --- a/application/components/app.vue +++ b/application/components/app.vue @@ -2,8 +2,8 @@ import Initialize from './initialize.vue' import Keymap from './keymap.vue' -import Loader from './loader.vue' -import Modal from './modal.vue' +import TooManyRepos from './messages/too-many-repos.vue' +import InvalidRepo from './messages/invalid-repo.vue' import * as config from '../config' import * as github from '../github' @@ -12,8 +12,8 @@ export default { components: { keymap: Keymap, Initialize, - Loader, - Modal + TooManyRepos, + InvalidRepo }, provide() { return { @@ -115,9 +115,6 @@ export default { body: JSON.stringify(this.editingKeymap) }) }, - getInstallationUrl() { - return `https://github.com/settings/installations/${github.installation.id}` - }, async doReadyCheck() { await healthcheck() await this.loadData() @@ -128,33 +125,9 @@ export default { <template> <initialize v-slot="{ keymap, layout }"> - <div v-if="tooManyRepos"> - <modal> - <div class="dialog"> - <h2>Hold up a second!</h2> - <p>The Keymap Editor app has been installed for more than one GitHub repository.</p> - <p> - I'm still working on things, including the ability to pick a specific - repo, but in the meantime you should go back to your <a :href="getInstallationUrl()">app configuration</a> - and select a single repository containing your keyboard's zmk-config. - </p> - </div> - </modal> - </div> - - <div v-else-if="loadKeyboardError === 'InvalidRepoError'"> - <modal> - <div class="dialog"> - <h2>Hold up a second!</h2> - <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p> - <p> - This app depends on some additional metadata to render the keymap. - For an example repository ready to use now or metadata you can apply - to your own keyboard repo, have a look at <a href="https://github.com/nickcoutsos/zmk-config-corne-demo/">zmk-config-corne-demo</a>. - </p> - </div> - </modal> - </div> + <TooManyRepos v-if="tooManyRepos" /> + + <InvalidRepo v-else-if="loadKeyboardError === 'InvalidRepoError'" /> <template v-else> <keymap @@ -213,13 +186,6 @@ button[disabled] { cursor: not-allowed; } -.dialog { - background-color: white; - padding: 40px; - margin: 40px; - max-width: 500px; -} - .github-link { display: inline-block; position: absolute; diff --git a/application/components/messages/invalid-repo.vue b/application/components/messages/invalid-repo.vue new file mode 100644 index 0000000..fc96256 --- /dev/null +++ b/application/components/messages/invalid-repo.vue @@ -0,0 +1,31 @@ +<template> + <modal> + <div class="dialog"> + <h2>Hold up a second!</h2> + <p>The selected repository does not contain <code>info.json</code> or <code>keymap.json</code>.</p> + <p> + This app depends on some additional metadata to render the keymap. + For an example repository ready to use now or metadata you can apply + to your own keyboard repo, have a look at <a href="https://github.com/nickcoutsos/zmk-config-corne-demo/">zmk-config-corne-demo</a>. + </p> + </div> + </modal> +</template> + +<script> +import Modal from '../modal.vue' + +export default { + name: 'InvalidRepo', + components: { Modal }, +} +</script> + +<style scoped> +.dialog { + background-color: white; + padding: 40px; + margin: 40px; + max-width: 500px; +} +</style> diff --git a/application/components/messages/too-many-repos.vue b/application/components/messages/too-many-repos.vue new file mode 100644 index 0000000..086e471 --- /dev/null +++ b/application/components/messages/too-many-repos.vue @@ -0,0 +1,37 @@ +<template> + <modal> + <div class="dialog"> + <h2>Hold up a second!</h2> + <p>The Keymap Editor app has been installed for more than one GitHub repository.</p> + <p> + I'm still working on things, including the ability to pick a specific + repo, but in the meantime you should go back to your <a :href="getInstallationUrl()">app configuration</a> + and select a single repository containing your keyboard's zmk-config. + </p> + </div> + </modal> +</template> + +<script> +import Modal from '../modal.vue' +import * as github from '../../github' + +export default { + name: 'TooManyRepos', + components: { Modal }, + methods: { + getInstallationUrl() { + return `https://github.com/settings/installations/${github.installation.id}` + } + } +} +</script> + +<style scoped> +.dialog { + background-color: white; + padding: 40px; + margin: 40px; + max-width: 500px; +} +</style>
\ No newline at end of file |