Refactor Icons

client/src/app/base-mvc.js

@@ -381,119 +381,6 @@ var DraggableViewMixin = {
     },
 };
 
-//==============================================================================
-/** Mixin that allows a view to be selected (gen. from a list).
- *      Selection controls ($selector) may be hidden/shown/toggled.
- *          The bbone event 'selectable' is fired when the controls are shown/hidden (passed T/F).
- *      Default rendering is a font-awesome checkbox.
- *      Default selector is '.selector' within the view's $el.
- *      The bbone events 'selected' and 'de-selected' are fired when the $selector is clicked.
- *          Both events are passed the view and the (jQuery) event.
- */
-var SelectableViewMixin = {
-    /** Set up instance state vars for whether the selector is shown and whether the view has been selected */
-    initialize: function (attributes) {
-        /** is the view currently in selection mode? */
-        this.selectable = attributes.selectable || false;
-        /** is the view currently selected? */
-        this.selected = attributes.selected || false;
-    },
-
-    /** $el sub-element where the selector is rendered and what can be clicked to select. */
-    $selector: function () {
-        return this.$(".selector");
-    },
-
-    /** How the selector is rendered - defaults to font-awesome checkbox */
-    _renderSelected: function () {
-        // override
-        this.$selector()
-            .find("span")
-            .toggleClass("fa-check-square-o", this.selected)
-            .toggleClass("fa-square-o", !this.selected);
-    },
-
-    /** Toggle whether the selector is shown */
-    toggleSelector: function () {
-        //TODO: use this.selectable
-        if (!this.$selector().is(":visible")) {
-            this.showSelector();
-        } else {
-            this.hideSelector();
-        }
-    },
-
-    /** Display the selector control.
-     *  @param {Number} a jQuery fx speed
-     *  @fires: selectable which is passed true (IOW, the selector is shown) and the view
-     */
-    showSelector: function (speed) {
-        speed = speed !== undefined ? speed : this.fxSpeed;
-        // make sure selected state is represented properly
-        this.selectable = true;
-        this.trigger("selectable", true, this);
-        this._renderSelected();
-        if (speed) {
-            this.$selector().show(speed);
-        } else {
-            this.$selector().show();
-        }
-    },
-
-    /** remove the selector control
-     *  @param {Number} a jQuery fx speed
-     *  @fires: selectable which is passed false (IOW, the selector is not shown) and the view
-     */
-    hideSelector: function (speed) {
-        speed = speed !== undefined ? speed : this.fxSpeed;
-        // reverse the process from showSelect
-        this.selectable = false;
-        this.trigger("selectable", false, this);
-        if (speed) {
-            this.$selector().hide(speed);
-        } else {
-            this.$selector().hide();
-        }
-    },
-
-    /** Toggle whether the view is selected */
-    toggleSelect: function (event) {
-        if (this.selected) {
-            this.deselect(event);
-        } else {
-            this.select(event);
-        }
-    },
-
-    /** Select this view and re-render the selector control to show it
-     *  @param {Event} a jQuery event that caused the selection
-     *  @fires: selected which is passed the view and the DOM event that triggered it (optionally)
-     */
-    select: function (event) {
-        // switch icon, set selected, and trigger event
-        if (!this.selected) {
-            this.trigger("selected", this, event);
-            this.selected = true;
-            this._renderSelected();
-        }
-        return false;
-    },
-
-    /** De-select this view and re-render the selector control to show it
-     *  @param {Event} a jQuery event that caused the selection
-     *  @fires: de-selected which is passed the view and the DOM event that triggered it (optionally)
-     */
-    deselect: function (event) {
-        // switch icon, set selected, and trigger event
-        if (this.selected) {
-            this.trigger("de-selected", this, event);
-            this.selected = false;
-            this._renderSelected();
-        }
-        return false;
-    },
-};
-
 //==============================================================================
 /** Return an underscore template fn from an array of strings.
  *  @param {String[]} template      the template strings to compile into the underscore template fn
@@ -546,7 +433,6 @@ export default {
     SearchableModelMixin: SearchableModelMixin,
     HiddenUntilActivatedViewMixin: HiddenUntilActivatedViewMixin,
     DraggableViewMixin: DraggableViewMixin,
-    SelectableViewMixin: SelectableViewMixin,
     wrapTemplate: wrapTemplate,
     buildComparator: buildComparator,
 };

client/src/components/AboutGalaxy.vue

@@ -7,6 +7,7 @@ import { RouterLink } from "vue-router";
 
 import { useConfig } from "@/composables/config";
 import { getAppRoot } from "@/onload/loadConfig";
+import { galaxyLogo } from "@/utils/typedIcons";
 
 import Heading from "@/components/Common/Heading.vue";
 import ExternalLink from "@/components/ExternalLink.vue";
@@ -29,7 +30,7 @@ const versionUserDocumentationUrl = computed(() => {
 
 <template>
     <div v-if="isConfigLoaded" class="about-galaxy">
-        <Heading h1 :icon="['gxd', 'galaxyLogo']" size="lg">Help and Support</Heading>
+        <Heading h1 :icon="galaxyLogo" size="lg">Help and Support</Heading>
         <div class="p-2">
             <Heading h2 separator size="md">Support</Heading>
             <div v-if="config.wiki_url">

client/src/components/ClickToEdit.vue

@@ -1,7 +1,6 @@
 <template>
-    <div class="clickToEdit" :class="{ empty: !value.length }">
+    <div class="click-to-edit" :class="{ empty: !value.length }">
         <component :is="tagName" v-if="!editing" class="m-0" @click="toggleEdit(true)">
-            <span class="editable"></span>
             <span>{{ displayValue }}</span>
             <slot name="tooltip" :editing="editing" :local-value="localValue"></slot>
         </component>
@@ -83,16 +82,9 @@ export default {
 @import "theme/blue.scss";
 @import "~scss/mixins.scss";
 
-.clickToEdit {
+.click-to-edit {
     position: relative;
-    &:hover .editable {
-        @include fontawesome($fa-var-edit);
-        position: absolute;
-        top: 0;
-        right: 0;
-        color: $brand-info;
-        font-size: 0.8rem;
-    }
+
     /* changes placeholder text, it's a brittle and ugly selector
     but bootstrap-vue doesn't give us much to work with */
     &.empty > p > span {

client/src/components/Collections/common/CollectionCreator.vue

@@ -469,22 +469,6 @@ $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/
         border: 1px solid lightgrey;
         border-width: 1px 0 1px 0;
     }
-    .element-drop-placeholder {
-        width: 60px;
-        height: 3px;
-        margin: 2px 0px 0px 14px;
-        background: black;
-        &:before {
-            @extend .fas;
-            float: left;
-            font-size: 120%;
-            margin: -9px 0px 0px -8px;
-            content: fa-content($fa-var-caret-right);
-        }
-        &:last-child {
-            margin-bottom: 8px;
-        }
-    }
     // ------------------------------------------------------------------------ footer
     .footer {
         .inputs-form-group > div {

client/src/components/Common/Heading.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDoubleDown, faAngleDoubleUp, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
-library.add(faAngleDoubleDown, faAngleDoubleUp);
-
 interface Props {
     h1?: boolean;
     h2?: boolean;
@@ -17,14 +14,14 @@ interface Props {
     separator?: boolean;
     inline?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "text";
-    icon?: string | [string, string];
+    icon?: IconDefinition | null;
     truncate?: boolean;
     collapse?: "open" | "closed" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
     collapse: "none",
-    icon: "",
+    icon: null,
     size: "lg",
 });
 
@@ -85,8 +82,8 @@ const element = computed(() => {
         ]"
         @click="$emit('click')">
         <b-button v-if="collapsible" variant="link" size="sm">
-            <icon v-if="collapsed" fixed-width icon="angle-double-down" />
-            <icon v-else fixed-width icon="angle-double-up" />
+            <FontAwesomeIcon v-if="collapsed" fixed-width :icon="faAngleDoubleDown" />
+            <FontAwesomeIcon v-else fixed-width :icon="faAngleDoubleUp" />
         </b-button>
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
         <slot />

client/src/components/ConfigTemplates/CreateInstance.test.ts

@@ -2,31 +2,32 @@ import { shallowMount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
 import CreateInstance from "./CreateInstance.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const localVue = getLocalVue(true);
 
 describe("CreateInstance", () => {
     it("should render a loading message during loading", async () => {
-        const wrapper = shallowMount(CreateInstance, {
+        const wrapper = shallowMount(CreateInstance as any, {
             propsData: {
                 loading: true,
                 loadingMessage: "component loading...",
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeTruthy();
     });
 
     it("should hide a loading message after loading", async () => {
-        const wrapper = shallowMount(CreateInstance, {
+        const wrapper = shallowMount(CreateInstance as any, {
             propsData: {
                 loading: false,
                 loadingMessage: "component loading...",
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeFalsy();
     });
 });

client/src/components/ConfigTemplates/InstanceForm.test.ts

@@ -4,6 +4,7 @@ import { getLocalVue } from "tests/jest/helpers";
 import { type FormEntry } from "./formUtil";
 
 import InstanceForm from "./InstanceForm.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const localVue = getLocalVue(true);
 
@@ -12,7 +13,7 @@ const SUBMIT_TITLE = "Submit the form!";
 
 describe("InstanceForm", () => {
     it("should render a loading message and not submit button if inputs is null", async () => {
-        const wrapper = shallowMount(InstanceForm, {
+        const wrapper = shallowMount(InstanceForm as any, {
             propsData: {
                 title: "MY FORM",
                 inputs: null,
@@ -22,13 +23,13 @@ describe("InstanceForm", () => {
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeTruthy();
         expect(wrapper.find("#submit").exists()).toBeFalsy();
     });
 
     it("should hide a loading message after loading", async () => {
-        const wrapper = shallowMount(InstanceForm, {
+        const wrapper = shallowMount(InstanceForm as any, {
             propsData: {
                 title: "MY FORM",
                 inputs: inputs,
@@ -38,7 +39,7 @@ describe("InstanceForm", () => {
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeFalsy();
         expect(wrapper.find("#submit").exists()).toBeTruthy();
         expect(wrapper.find("#submit").text()).toEqual(SUBMIT_TITLE);