From 8ebf5ac1372b58081b4db7ae754943f739ba79bc Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Tue, 11 Feb 2020 20:12:33 +0100
Subject: [PATCH] #22 - Fix missing icon in favourites adder
---
resources/components/favourites/save.html | 2 +-
resources/components/ui/icon.html | 2 +-
resources/ts/components/ui/icon.ts | 17 ++++++++++++-----
3 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/resources/components/favourites/save.html b/resources/components/favourites/save.html
index 3f223e3..544dc83 100644
--- a/resources/components/favourites/save.html
+++ b/resources/components/favourites/save.html
@@ -6,7 +6,7 @@
:class="{ 'is-invalid': errors.name.length > 0 }" id="favourite_add_name"
v-model="name" v-autofocus/>
<button class="btn btn-sm btn-dark" type="submit">
- <ui-icon class="add" />
+ <ui-icon icon="add" />
</button>
<div v-if="errors.name.length > 0" class="invalid-feedback">
<p v-for="error in errors.name">{{ error }}</p>
diff --git a/resources/components/ui/icon.html b/resources/components/ui/icon.html
index 4fd3d67..f9f2d25 100644
--- a/resources/components/ui/icon.html
+++ b/resources/components/ui/icon.html
@@ -1,4 +1,4 @@
-<fa v-bind="definition" v-if="type === 'simple'"/>
+<fa v-bind="attrs" v-if="type === 'simple'"/>
<fa-layers v-else-if="type === 'stacked'">
<fa :icon="props.icon" v-bind="props" v-for="(props, index) in definition.icons" :key="index"/>
</fa-layers>
diff --git a/resources/ts/components/ui/icon.ts b/resources/ts/components/ui/icon.ts
index 0fe37c1..419db53 100644
--- a/resources/ts/components/ui/icon.ts
+++ b/resources/ts/components/ui/icon.ts
@@ -15,7 +15,7 @@ import {
faInfoCircle,
faMapMarkerAlt,
faMoon,
- faQuestionCircle,
+ faQuestionCircle, faQuestionSquare,
faSearch,
faSign,
faStar,
@@ -60,6 +60,7 @@ const messageTypeIcons: Dictionary<Icon> = {
const definitions: Dictionary<Icon> = {
'favourite': simple(faStar),
+ 'unknown': simple(faQuestionSquare),
'add': simple(faCheck),
'add-all': simple(faCheckDouble),
'remove-stop': simple(faTimes),
@@ -113,14 +114,20 @@ export class UiIcon extends Vue {
validator: value => typeof value === "object" || Object.keys(definitions).includes(value),
required: true,
})
- icon: keyof typeof definitions;
+ icon: string | IconDefinition;
- get definition() {
- return {...(typeof this.icon === "string" ? definitions[this.icon] : { icon: this.icon }), ...this.$attrs};
+ get definition(): Icon {
+ return typeof this.icon === "string"
+ ? definitions[this.icon] || definitions['unknown']
+ : { icon: this.icon as IconDefinition, type: "simple" };
+ }
+
+ get attrs() {
+ return { ...this.definition, ...this.$attrs };
}
get type() {
- return definitions[this.icon].type;
+ return this.definition.type;
}
}