Update IPL vue components to v3, remove old style overrides

IPLSplatoon · Apr 3, 2024 · 3ccb6cf · 3ccb6cf
1 parent 37fd181
commit 3ccb6cf
Show file tree

Hide file tree

Showing 31 changed files with 492 additions and 400 deletions.
diff --git a/package.json b/package.json
@@ -15,14 +15,14 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
-    "@iplsplatoon/vue-components": "2.8.0",
+    "@iplsplatoon/vue-components": "3.2.0",
     "@tauri-apps/api": "^1.5.3",
     "@tauri-apps/cli": "^1.5.11",
     "anser": "^2.1.0",
     "lodash": "^4.17.21",
     "node-gyp": "^10.1.0",
     "pinia": "^2.0.11",
-    "vue": "^3.2.31"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
     "@pinia/testing": "^0.1.3",
@@ -34,7 +34,7 @@
     "@typescript-eslint/parser": "^7.4.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/test-utils": "^2.0.0-0",
+    "@vue/test-utils": "^2.4.5",
     "@vue/vue3-jest": "^29.2.6",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.24.0",

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -58,7 +58,8 @@
         "width": 600,
         "height": 600,
         "resizable": false,
-        "fullscreen": false
+        "fullscreen": false,
+        "titleBarStyle": "Transparent"
       }
     ],
     "security": {

diff --git a/src/components/BundleInstaller.vue b/src/components/BundleInstaller.vue
@@ -1,5 +1,5 @@
 <template>
-    <ipl-space color="light">
+    <ipl-space color="primary">
         <ipl-input
             v-model="bundlePath"
             name="bundleName"

diff --git a/src/components/BundleManager.vue b/src/components/BundleManager.vue
@@ -1,5 +1,8 @@
 <template>
-    <ipl-space class="no-padding">
+    <ipl-space
+        class="no-padding"
+        color="secondary"
+    >
         <div class="header layout horizontal center-vertical">
             <div class="bold grow m-l-4">
                 Bundles

diff --git a/src/components/ConfigWindow.vue b/src/components/ConfigWindow.vue
@@ -1,16 +1,18 @@
 <template>
-    <ipl-space class="m-b-8">
+    <ipl-space
+        class="m-b-8"
+        color="secondary"
+    >
         <div class="bold m-b-6">
             Dependency status
         </div>
         <dependency-checker />
     </ipl-space>
-    <ipl-space>
-        <ipl-small-toggle
-            v-model="errorLogEnabled"
-            label="Enable error log"
-        />
-        <ipl-label>The error log is useful for diagnosing technical issues.</ipl-label>
+    <ipl-space color="secondary">
+        <ipl-small-toggle v-model="errorLogEnabled">
+            Enable error log<br>
+            <ipl-label>The error log is useful for diagnosing technical issues.</ipl-label>
+        </ipl-small-toggle>
     </ipl-space>
 </template>
 

diff --git a/src/components/ErrorList.vue b/src/components/ErrorList.vue
@@ -1,5 +1,8 @@
 <template>
-    <ipl-space class="error-list">
+    <ipl-space
+        class="error-list"
+        color="secondary"
+    >
         <div class="m-y-8 m-x-8 text-center">
             <div class="m-b-8">
                 Errors that have occurred in this application will be listed here.<br>
@@ -17,7 +20,7 @@
                 v-for="(error, key) in errorHandlerStore.recentErrors"
                 :key="key"
                 :title="addDots(String(error.err))"
-                class="error-list-item"
+                class="error-list-item m-t-8"
             >
                 <ipl-data-row
                     label="Info"
@@ -67,15 +70,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style lang="scss" scoped>
-.error-list {
-    padding: 0;
-}
-
-.error-list-item {
-    border-radius: 0;
-    border: 0;
-    border-top: 1px solid var(--space-border);
-}
-</style>
diff --git a/src/components/InstallManager.vue b/src/components/InstallManager.vue
@@ -1,5 +1,8 @@
 <template>
-    <ipl-space class="layout vertical">
+    <ipl-space
+        class="layout vertical"
+        color="secondary"
+    >
         <div>Installation folder: {{ installFolder }}</div>
         <status-row
             :color="nodecgStatusColor"
@@ -44,6 +47,7 @@
         v-show="runStatus !== RunStatus.NOT_STARTED"
         class="m-t-8"
         expanded
+        color="secondary"
         data-test="nodecg-log-space"
     >
         <template #title>

diff --git a/src/components/__tests__/__snapshots__/BundleInstaller.test.ts.snap b/src/components/__tests__/__snapshots__/BundleInstaller.test.ts.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BundleInstaller matches snapshot 1`] = `
-"<div class="ipl-space color-light" data-v-11cc5f1c="">
-  <ipl-input-stub name="bundleName" label="Bundle Repository Path" modelvalue="" type="text" centered="false" disabled="false" data-test="bundle-path-input"></ipl-input-stub>
-  <ipl-button-stub label="Install" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="install-button"></ipl-button-stub>
+"<div data-v-d255ffee="" class="ipl-space color-primary">
+  <ipl-input-stub name="bundleName" label="Bundle Repository Path" modelvalue="" type="text" centered="false" disabled="false" loading="false" theme="default" data-test="bundle-path-input"></ipl-input-stub>
+  <ipl-button-stub label="Install" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="install-button"></ipl-button-stub>
   <log-overlay-stub title="Installing..." logkey="install-bundle" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
 </div>"
 `;
diff --git a/src/components/__tests__/__snapshots__/BundleManager.test.ts.snap b/src/components/__tests__/__snapshots__/BundleManager.test.ts.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BundleManager matches snapshot when installing a bundle 1`] = `
-"<div class="ipl-space color-dark no-padding" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary no-padding">
   <div class="header layout horizontal center-vertical">
     <div class="bold grow m-l-4"> Bundles </div>
-    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
-    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
+    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
+    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
   </div>
   <bundle-installer-stub class="m-b-8 m-x-8" style="display: none;"></bundle-installer-stub>
-  <div class="text-center m-b-8 max-width"> No bundles found. </div>
+  <div class="status-text max-width"> No bundles found. </div>
 </div>"
 `;
 
 exports[`BundleManager matches snapshot with bundle data 1`] = `
-"<div class="ipl-space color-dark no-padding" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary no-padding">
   <div class="header layout horizontal center-vertical">
     <div class="bold grow m-l-4"> Bundles </div>
-    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
-    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
+    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
+    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
   </div>
   <bundle-installer-stub class="m-b-8 m-x-8" style="display: none;"></bundle-installer-stub>
   <div class="bundle-settings__wrapper max-width">
@@ -31,8 +31,8 @@ exports[`BundleManager matches snapshot with bundle data 1`] = `
         <div>Bundle One</div>
         <div>1.2.3</div>
         <div class="layout horizontal end-horizontal">
-          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" data-test="configure-button"></ipl-button-stub>
-          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
+          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" data-test="configure-button"></ipl-button-stub>
+          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
         </div>
       </div>
       <!--v-if-->
@@ -42,8 +42,8 @@ exports[`BundleManager matches snapshot with bundle data 1`] = `
         <div>Bundle Two</div>
         <div>5.0</div>
         <div class="layout horizontal end-horizontal">
-          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" data-test="configure-button"></ipl-button-stub>
-          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
+          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" data-test="configure-button"></ipl-button-stub>
+          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
         </div>
       </div>
       <!--v-if-->

diff --git a/src/components/__tests__/__snapshots__/ConfigWindow.test.ts.snap b/src/components/__tests__/__snapshots__/ConfigWindow.test.ts.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ConfigWindow matches snapshot 1`] = `
-"<div class="ipl-space color-dark m-b-8" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary m-b-8">
   <div class="bold m-b-6"> Dependency status </div>
   <dependency-checker-stub></dependency-checker-stub>
 </div>
-<div class="ipl-space color-dark" data-v-11cc5f1c="">
-  <ipl-small-toggle-stub label="Enable error log" modelvalue="false" disabled="false"></ipl-small-toggle-stub><label class="ipl-label" data-v-7e7be68d="">The error log is useful for diagnosing technical issues.</label>
+<div data-v-d255ffee="" class="ipl-space color-secondary">
+  <ipl-small-toggle-stub label="" modelvalue="false" disabled="false"></ipl-small-toggle-stub>
 </div>"
 `;
diff --git a/src/components/__tests__/__snapshots__/ErrorList.test.ts.snap b/src/components/__tests__/__snapshots__/ErrorList.test.ts.snap
@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ErrorList matches snapshot 1`] = `
-"<div class="ipl-space color-dark error-list" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary error-list">
   <div class="m-y-8 m-x-8 text-center">
     <div class="m-b-8"> Errors that have occurred in this application will be listed here.<br> It is most useful to developers for diagnosing issues. </div>
-    <ipl-button-stub label="Clear" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href=""></ipl-button-stub>
+    <ipl-button-stub label="Clear" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false"></ipl-button-stub>
   </div>
   <div class="ipl-expanding-space-group">
-    <div class="ipl-expansion-panel__content error-list-item" data-v-67856a23="">
-      <div class="ipl-expansion-panel__header" data-v-67856a23="">
-        <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-        <div class="ipl-expansion-panel__title" data-v-67856a23="">Error: Error!</div>
-        <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon" data-v-67856a23=""></font-awesome-icon-stub>
-        <div class="header-extra" data-v-67856a23=""></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space color-dark error-list-item m-t-8">
+      <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+        <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+        <div data-v-a1f8a641="" class="ipl-expanding-space__title">Error: Error!</div>
+        <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon"></font-awesome-icon-stub>
+        <div data-v-a1f8a641="" class="header-extra"></div>
       </div>
-      <div class="content" data-v-67856a23="" style="display: none;">
-        <ipl-data-row-stub label="Info" value="error information"></ipl-data-row-stub>
-        <ipl-data-row-stub label="Source component" value="ComponentName"></ipl-data-row-stub>
-        <ipl-data-row-stub label="Full error" value="Error: Error!"></ipl-data-row-stub>
+      <div data-v-a1f8a641="" class="content" style="display: none;">
+        <ipl-data-row-stub label="Info" copiable="false" value="error information"></ipl-data-row-stub>
+        <ipl-data-row-stub label="Source component" copiable="false" value="ComponentName"></ipl-data-row-stub>
+        <ipl-data-row-stub label="Full error" copiable="false" value="Error: Error!"></ipl-data-row-stub>
       </div>
     </div>
-    <div class="ipl-expansion-panel__content error-list-item" data-v-67856a23="">
-      <div class="ipl-expansion-panel__header" data-v-67856a23="">
-        <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-        <div class="ipl-expansion-panel__title" data-v-67856a23="">Error: Error 2!</div>
-        <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon" data-v-67856a23=""></font-awesome-icon-stub>
-        <div class="header-extra" data-v-67856a23=""></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space color-dark error-list-item m-t-8">
+      <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+        <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+        <div data-v-a1f8a641="" class="ipl-expanding-space__title">Error: Error 2!</div>
+        <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon"></font-awesome-icon-stub>
+        <div data-v-a1f8a641="" class="header-extra"></div>
       </div>
-      <div class="content" data-v-67856a23="" style="display: none;">
-        <ipl-data-row-stub label="Info" value="info"></ipl-data-row-stub>
+      <div data-v-a1f8a641="" class="content" style="display: none;">
+        <ipl-data-row-stub label="Info" copiable="false" value="info"></ipl-data-row-stub>
         <!--v-if-->
-        <ipl-data-row-stub label="Full error" value="Error: Error 2!"></ipl-data-row-stub>
+        <ipl-data-row-stub label="Full error" copiable="false" value="Error: Error 2!"></ipl-data-row-stub>
       </div>
     </div>
   </div>