From afa1cae73c3df3ab099ca718c2db8621d26aac4b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 28 May 2022 12:43:57 +1000
Subject: Add RButton component

---
 src/components/HelpModal.vue     |  7 ++++---
 src/components/RButton.vue       | 16 ++++++++++++++++
 src/components/SettingsModal.vue | 11 ++++++-----
 src/components/TutorialPane.vue  | 30 ++++++++++--------------------
 4 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 src/components/RButton.vue

(limited to 'src')

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>
-- 
cgit v1.2.3