From 6064004606d88c39b71c0049ab58bc06071cf98a Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sat, 31 Jul 2021 04:58:25 -0700
Subject: [PATCH] Add TextButton widget (#321)

---
 client/web/src/App.vue                        |  2 +
 .../components/widgets/buttons/TextButton.vue | 66 +++++++++++++++++++
 .../components/widgets/labels/TextLabel.vue   | 17 ++++-
 client/web/src/components/widgets/widgets.ts  | 18 +++++
 .../window/title-bar/WindowButtonsWeb.vue     |  4 +-
 5 files changed, 101 insertions(+), 6 deletions(-)
 create mode 100644 client/web/src/components/widgets/buttons/TextButton.vue

diff --git a/client/web/src/App.vue b/client/web/src/App.vue
index 0f7b17ffc..363c93aa8 100644
--- a/client/web/src/App.vue
+++ b/client/web/src/App.vue
@@ -55,6 +55,8 @@
 	--color-accent-rgb: 49, 148, 214;
 	--color-accent-hover: #49a5e2;
 	--color-accent-hover-rgb: 73, 165, 226;
+	--color-accent-disabled: #416277;
+	--color-accent-disabled-rgb: 65, 98, 119;
 
 	// TODO: Replace with CSS color() function to calculate alpha when browsers support it
 	// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
diff --git a/client/web/src/components/widgets/buttons/TextButton.vue b/client/web/src/components/widgets/buttons/TextButton.vue
new file mode 100644
index 000000000..b329d92c1
--- /dev/null
+++ b/client/web/src/components/widgets/buttons/TextButton.vue
@@ -0,0 +1,66 @@
+<template>
+	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="action">
+		<TextLabel>{{ label }}</TextLabel>
+	</button>
+</template>
+
+<style lang="scss">
+.text-button {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	flex: 0 0 auto;
+	height: 24px;
+	padding: 0 8px;
+	box-sizing: border-box;
+	outline: none;
+	border: none;
+	border-radius: 2px;
+	background: var(--color-5-dullgray);
+	color: var(--color-e-nearwhite);
+
+	&:hover {
+		background: var(--color-6-lowergray);
+		color: var(--color-f-white);
+	}
+
+	&.emphasized {
+		background: var(--color-accent);
+		color: var(--color-f-white);
+
+		&:hover {
+			background: var(--color-accent-hover);
+		}
+
+		&.disabled {
+			background: var(--color-accent-disabled);
+		}
+	}
+
+	&.disabled {
+		background: var(--color-4-dimgray);
+		color: var(--color-8-uppergray);
+	}
+
+	& + .text-button {
+		margin-left: 8px;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+
+export default defineComponent({
+	props: {
+		action: { type: Function, required: true },
+		label: { type: String, required: true },
+		emphasized: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
+		minWidth: { type: Number, default: 0 },
+		gapAfter: { type: Boolean, default: false },
+	},
+	components: { TextLabel },
+});
+</script>
diff --git a/client/web/src/components/widgets/labels/TextLabel.vue b/client/web/src/components/widgets/labels/TextLabel.vue
index 4f307a154..fe76728bb 100644
--- a/client/web/src/components/widgets/labels/TextLabel.vue
+++ b/client/web/src/components/widgets/labels/TextLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<span class="text-label">
+	<span class="text-label" :class="{ bold, italic }">
 		<slot></slot>
 	</span>
 </template>
@@ -7,7 +7,15 @@
 <style lang="scss">
 .text-label {
 	white-space: nowrap;
-	font-weight: bold;
+	line-height: 18px;
+
+	&.bold {
+		font-weight: bold;
+	}
+
+	&.italic {
+		font-style: italic;
+	}
 }
 </style>
 
@@ -16,6 +24,9 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
 	components: {},
-	props: {},
+	props: {
+		bold: { type: Boolean, default: false },
+		italic: { type: Boolean, default: false },
+	},
 });
 </script>
diff --git a/client/web/src/components/widgets/widgets.ts b/client/web/src/components/widgets/widgets.ts
index 2d17a9869..44e89d492 100644
--- a/client/web/src/components/widgets/widgets.ts
+++ b/client/web/src/components/widgets/widgets.ts
@@ -2,6 +2,24 @@ export type Widgets = IconButtonWidget | SeparatorWidget | PopoverButtonWidget |
 export type WidgetRow = Array<Widgets>;
 export type WidgetLayout = Array<WidgetRow>;
 
+// Text Button
+export interface TextButtonWidget {
+	kind: "TextButton";
+	tooltip?: string;
+	message?: string | object;
+	callback?: Function;
+	props: TextButtonProps;
+}
+
+export interface TextButtonProps {
+	// `action` is used via `IconButtonWidget.callback`
+	label: string;
+	emphasized?: boolean;
+	disabled?: boolean;
+	minWidth?: number;
+	gapAfter?: boolean;
+}
+
 // Icon Button
 export interface IconButtonWidget {
 	kind: "IconButton";
diff --git a/client/web/src/components/window/title-bar/WindowButtonsWeb.vue b/client/web/src/components/window/title-bar/WindowButtonsWeb.vue
index fe2a0bd8d..bfef6ef44 100644
--- a/client/web/src/components/window/title-bar/WindowButtonsWeb.vue
+++ b/client/web/src/components/window/title-bar/WindowButtonsWeb.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="window-buttons-web" @click="handleClick" :title="fullscreen.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
-		<TextLabel v-if="requestFullscreenHotkeys">Click to access all hotkeys</TextLabel>
+		<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Click to access all hotkeys</TextLabel>
 		<IconLabel :icon="fullscreen.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
 	</div>
 </template>
@@ -13,8 +13,6 @@
 	fill: var(--color-e-nearwhite);
 
 	.text-label {
-		font-weight: normal;
-		font-style: italic;
 		margin-right: 8px;
 	}