refactor: tab-spinner component

spraakbanken · Oct 7, 2024 · 876f362 · 876f362
1 parent bdb08bd
commit 876f362
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/app/scripts/components/results.ts b/app/scripts/components/results.ts
@@ -8,6 +8,7 @@ import "@/components/loglike-meter"
 import "@/components/result-map"
 import "@/components/statistics"
 import "@/components/sidebar"
+import "@/components/tab-spinner"
 import "@/components/trend-diagram"
 import "@/components/word-picture"
 import "@/controllers/comparison_controller"
@@ -20,7 +21,6 @@ import "@/controllers/trend_diagram_controller"
 import "@/controllers/word_picture_controller"
 import "@/directives/tab-hash"
 import "@/directives/tab-preloader"
-import "@/directives/tab-spinner"
 import { SearchesService } from "@/services/searches"
 
 type ResultsController = IController & {
@@ -136,7 +136,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab example-ctrl ng-repeat="kwicTab in $root.kwicTabs" select="onentry()" deselect="onexit()">
                         <uib-tab-heading ng-class="{not_loading: progress == 100, loading : loading}">
                             KWIC
-                            <span ng-click="closeTab($index, $event)" tab-spinner="tab-spinner"> </span>
+                            <tab-spinner ng-click="closeTab($index, $event)"></tab-spinner>
                         </uib-tab-heading>
                         <korp-error ng-if="error"></korp-error>
                         <div
@@ -168,7 +168,7 @@ angular.module("korpApp").component("results", {
                         <uib-tab-heading ng-class="{not_loading: progress > 99}">
                             {{'graph' | loc:$root.lang}}
                             <div class="tab_progress" style="width:{{progress || 0}}%" ng-show="loading"></div>
-                            <span ng-click="closeTab($index, $event)" tab-spinner="tab-spinner"></span>
+                            <tab-spinner ng-click="closeTab($index, $event)"></tab-spinner>
                         </uib-tab-heading>
                         <trend-diagram
                             data="data"
@@ -180,7 +180,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab ng-repeat="promise in $root.compareTabs" compare-ctrl>
                         <uib-tab-heading class="compare_tab" ng-class="{loading : loading}">
                             {{'compare_vb' | loc:$root.lang}}
-                            <span tab-spinner="tab-spinner" ng-click="closeTab($index, $event)"> </span>
+                            <tab-spinner ng-click="closeTab($index, $event)"></tab-spinner>
                         </uib-tab-heading>
                         <div class="compare_result" ng-class="{loading : loading}">
                             <korp-error ng-if="error"></korp-error>
@@ -222,7 +222,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab ng-repeat="promise in $root.mapTabs" map-ctrl select="onentry()">
                         <uib-tab-heading class="map_tab" ng-class="{loading : loading}">
                             {{ 'map' | loc:$root.lang}}
-                            <span tab-spinner="tab-spinner" ng-click="closeTab($index, $event)"> </span>
+                            <tab-spinner ng-click="closeTab($index, $event)"></tab-spinner>
                         </uib-tab-heading>
                         <div class="map_result" ng-class="{loading : loading}">
                             <korp-error ng-if="error"></korp-error>
@@ -274,7 +274,7 @@ angular.module("korpApp").component("results", {
                     >
                         <uib-tab-heading ng-class="{loading : loading}">
                             {{ 'text_tab_header' | loc:$root.lang}}
-                            <span tab-spinner="tab-spinner" ng-click="closeTab($index, $event)"> </span>
+                            <tab-spinner ng-click="closeTab($index, $event)"></tab-spinner>
                         </uib-tab-heading>
                         <div>
                             <korp-error ng-if="error"></korp-error>

diff --git a/app/scripts/directives/tab-spinner.ts → app/scripts/components/tab-spinner.ts b/app/scripts/directives/tab-spinner.ts → app/scripts/components/tab-spinner.ts
@@ -3,10 +3,10 @@ import _ from "lodash"
 import angular from "angular"
 import { html } from "@/util"
 
-angular.module("korpApp").directive("tabSpinner", () => ({
+angular.module("korpApp").component("tabSpinner", {
     template: html`<i class="fa-solid fa-times-circle close_icon"></i>
         <span
             class="tab_spinner"
             us-spinner="{lines : 8 ,radius:4, width:1.5, length: 2.5, left : 4, top : -12}"
         ></span>`,
-}))
+})