diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/HelpModal.vue | 7 | ||||
| -rw-r--r-- | src/components/RButton.vue | 16 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 11 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 30 |
4 files changed, 36 insertions, 28 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 8b29a90..298711b 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -1,6 +1,7 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; +import RButton from './RButton.vue'; // Displays help information export default defineComponent({ @@ -18,7 +19,7 @@ export default defineComponent({ this.$emit('help-modal-close'); }, }, - components: {CloseIcon, }, + components: {CloseIcon, RButton, }, emits: ['help-modal-close', 'start-tutorial', ], }); </script> @@ -50,9 +51,9 @@ export default defineComponent({ in culpa qui officia deserunt mollit anim id est laborum. </div> - <button class="block bg-stone-700 text-white px-4 py-2 rounded" @click.stop="onStartTutorial"> + <r-button class="bg-stone-800 text-white" @click.stop="onStartTutorial"> Start Tutorial - </button> + </r-button> </div> </div> </template> diff --git a/src/components/RButton.vue b/src/components/RButton.vue new file mode 100644 index 0000000..8086697 --- /dev/null +++ b/src/components/RButton.vue @@ -0,0 +1,16 @@ +<script lang="ts"> +import {defineComponent, PropType} from 'vue'; + +export default defineComponent({ + props: { + disabled: {type: Boolean, default: false}, + }, +}); +</script> + +<template> +<button :disabled="disabled" + class="block rounded px-4 py-2" :class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}"> + <slot>A Button</slot> +</button> +</template> diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index dc9b4a5..1f56cfb 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -1,6 +1,7 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; +import RButton from './RButton.vue'; import type {LayoutOptions} from '../layout'; // Displays configurable options, and sends option-change requests @@ -54,7 +55,7 @@ export default defineComponent({ console.log('Settings reset'); }, }, - components: {CloseIcon, }, + components: {CloseIcon, RButton, }, emits: ['settings-close', 'layout-option-change', 'tree-change', 'reset-settings', ], }); </script> @@ -156,12 +157,12 @@ export default defineComponent({ </div> <hr class="border-stone-400"/> <div class="flex justify-around mt-2"> - <button class="block rounded px-4 py-2 bg-stone-800 text-white" @click="onSave"> + <r-button class="bg-stone-800 text-white" @click="onSave"> Save - </button> - <button class="block rounded px-4 py-2 bg-stone-800 text-white" @click="onReset"> + </r-button> + <r-button class="bg-stone-800 text-white" @click="onReset"> Reset - </button> + </r-button> </div> </div> </div> diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index d5f681c..18628f8 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -1,6 +1,7 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; +import RButton from './RButton.vue'; import {Action} from '../lib'; export default defineComponent({ @@ -33,14 +34,6 @@ export default defineComponent({ overflow: 'auto', }; }, - buttonStyles(): Record<string,string> { - return { - display: 'block', - padding: '8px 16px', - borderRadius: '5px', - backgroundColor: '#292524', - }; - }, }, watch: { triggerFlag(){ @@ -87,7 +80,7 @@ export default defineComponent({ this.sendEnabledFeatures(); } }, - components: {CloseIcon, }, + components: {CloseIcon, RButton, }, emits: ['tutorial-close', 'tutorial-stage-chg', ], }); </script> @@ -107,12 +100,12 @@ export default defineComponent({ quis nostrud exercitation ullamco. </div> <div class="w-full flex justify-evenly mt-2"> - <button :style="buttonStyles" class="hover:brightness-125" @click="onStartTutorial"> + <r-button class="bg-stone-800 text-white" @click="onStartTutorial"> Start Tutorial - </button> - <button :style="buttonStyles" class="hover:brightness-125" @click="onClose"> + </r-button> + <r-button class="bg-stone-800 text-white" @click="onClose"> Close - </button> + </r-button> </div> </template> <template v-else> @@ -166,15 +159,12 @@ export default defineComponent({ </div> <!-- Buttons --> <div class="w-full flex justify-evenly mt-2"> - <button :style="buttonStyles" - :disabled="stage == 1" :class="stage == 1 ? ['brightness-75'] : ['hover:brightness-125']" - @click="onPrevClick"> + <r-button :disabled="stage == 1" class="bg-stone-800 text-white" @click="onPrevClick"> Prev - </button> - <button :style="buttonStyles" class="hover:brightness-125" - @click="(stage != maxStage) ? onNextClick() : onClose()"> + </r-button> + <r-button class="bg-stone-800 text-white" @click="(stage != maxStage) ? onNextClick() : onClose()"> {{stage != maxStage ? 'Next' : 'Finish'}} - </button> + </r-button> </div> </template> </div> |