Removed dependencies to FontAwesome(unused), Bootstrap and bootswatch…

…. Fixed styles, added HeroIcons for tree shakeable icons, css cleanup
Lorthiz · Oct 17, 2024 · 7fde2f2 · 7fde2f2
1 parent ac892a8
commit 7fde2f2
Show file tree

Hide file tree

Showing 43 changed files with 428 additions and 436 deletions.
diff --git a/build-related/vendor.yaml b/build-related/vendor.yaml
@@ -4,36 +4,23 @@ libs:
     source: https://github.com/ajaxorg/ace
     licenseName: BSD-3-Clause
     licenseUrl: https://raw.githubusercontent.com/ajaxorg/ace/master/LICENSE
-    distDir: ace
     npmDir: ace-builds
     files: [LICENSE]
 
   BigInteger.js:
     source: https://github.com/peterolson/BigInteger.js
     licenseName: Unlicense
     licenseUrl: https://raw.githubusercontent.com/peterolson/BigInteger.js/master/LICENSE
-    distDir: BigInteger
     npmDir: big-integer
     files: [LICENSE]
 
-  Bootstrap:
-    website: http://getbootstrap.com/
-    source: https://github.com/twbs/bootstrap
+  HeroIcons:
+    source: https://github.com/tailwindlabs/heroicons
     licenseName: MIT
-    licenseUrl: https://raw.githubusercontent.com/twbs/bootstrap/master/LICENSE
-    npmDir: bootstrap
+    licenseUrl: https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
+    npmDir: @heroicons
     files: [LICENSE]
 
-  Bootswatch:
-    website: https://bootswatch.com/
-    source: https://github.com/thomaspark/bootswatch
-    licenseName: MIT
-    licenseUrl: https://github.com/thomaspark/bootswatch/blob/gh-pages/LICENSE
-    npmDir: bootswatch
-    distDir: bootstrap/css/
-    files: [LICENSE]
-    priority: 10
-
   bowser:
     source: https://github.com/ded/bowser
     licenseName: MIT
@@ -54,7 +41,6 @@ libs:
     source: https://github.com/deepstreamIO/golden-layout
     licenseName: MIT
     licenseUrl: https://raw.githubusercontent.com/deepstreamIO/golden-layout/master/LICENSE
-    distDir: golden-layout
     npmDir: golden-layout
     files: [LICENSE]
 

diff --git a/css/JetBrainsMono-VariableFont_wght.ttf b/css/JetBrainsMono-VariableFont_wght.ttf
diff --git a/css/app.css b/css/app.css
@@ -1,25 +1,5 @@
-.errorWindow { background: white; font-family: Courier,monospace; font-size: 12px; white-space: pre-wrap; overflow-y: scroll; }
-.errorWindow>div { margin: 5px; }
-body { line-height:normal }
-body { color:#333 }
-.dropdown { position: absolute; display:none; z-index:9999 }
-.dropdown-menu { z-index:9999 }
-.dropdown .dropdown-menu { font-size:13px; border-color:#375a7f; border-radius:0 }
-.dropdown .glyphicon { margin-right:5px; }
-.dropdown .glyphicon-folder-open { margin-left:-1px; margin-right:6px }
-.dropdown .dropdown-menu>li>a { padding:3px 15px }
-.btn { padding: 5px 10px; }
-.control-label { margin-bottom:8px }
-.form-control { padding: 6px 12px; height:34px }
-.modal-footer, .modal-body { padding: 15px }
-.input-group-addon { padding: 8px 8px }
-#noscript, #unsupportedBrowser { background: #ffee00; z-index:10000; position:fixed; left:0; right:0; padding:10px; text-align:center }
-#noscript a, #unsupportedBrowser a { color: black; text-decoration: underline }
-#unsupportedBrowser .closeBtn { float:right; margin-top: 1px; cursor: pointer }
-.marker_solution { background:rgba(255, 80, 80, 0.3); }
-.marker_user { background:rgba(80, 255, 80, 0.30); }
-#aboutWebIde { position:absolute; bottom:10px; right:10px; font-size:12px }
-#exportToJsonDiv, #parsedPathDiv, #selectionLengthDiv { font-size:13px; margin-top:5px }
-#parsedPath { word-break: break-all; }
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url('./JetBrainsMono-VariableFont_wght.ttf');
+}
 
-/*.marker_match { background:rgba(80, 255, 80, 0.30); }*/
diff --git a/css/contextmenu.css b/css/contextmenu.css
@@ -1,11 +1,8 @@
-.context-menu-item {
-}
-
 .context-menu-item .label {
     font-size: 12px !important;
 }
 
-/*Fix for intereference of .label for context menu and bootstrap-css*/
-.context-menu-item.disabled .label {
-    color: var(--mx-menu-disabled-text);
-}
+.context-menu-item .mx-icon-placeholder {
+    max-width: 20px !important;
+    margin-right: 5px;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,16 +5,14 @@
     "doc": "docs"
   },
   "dependencies": {
+    "@heroicons/vue": "^2.1.5",
     "@imengyu/vue3-context-menu": "^1.4.3",
     "@vueuse/core": "^10.11.0",
     "ace-builds": "^1.34.2",
     "ace-linters": "^1.2.2",
     "big-integer": "^1.6.25",
-    "bootstrap": "^3.4.1",
-    "bootswatch": "^3.3.7",
     "bowser": "^1.7.3",
     "dateformat": "^5.0.3",
-    "font-awesome": "^4.7.0",
     "golden-layout": "^1.5.9",
     "jquery": "^3.5.0",
     "js-yaml": "^4.1.0",

diff --git a/src/Components/ConverterPanel/ConverterPanel.vue b/src/Components/ConverterPanel/ConverterPanel.vue
@@ -3,14 +3,14 @@ import {computed} from "vue";
 import {useCurrentBinaryFileStore} from "../../Stores/CurrentBinaryFileStore";
 import {prepareEmptyModel, prepareModelData} from "./ConverterPanelModelFactory";
 
-const MAX_SELECTION_LENGTH_FOR_CONVERTER = 64
+const MAX_SELECTION_LENGTH_FOR_CONVERTER = 64;
 
 const model = computed(() => {
   const store = useCurrentBinaryFileStore();
 
   const content = store.fileContent;
   const offset = store.selectionStart;
-  const remainingFileContentLengthFromOffset = store.fileContent.byteLength - offset
+  const remainingFileContentLengthFromOffset = store.fileContent.byteLength - offset;
   const length = Math.min(remainingFileContentLengthFromOffset, MAX_SELECTION_LENGTH_FOR_CONVERTER);
   if (offset === -1 || remainingFileContentLengthFromOffset < 0) return prepareEmptyModel();
 
@@ -24,81 +24,28 @@ const model = computed(() => {
   <div id="converter-panel" class="converterPanel">
     <table>
       <thead>
-      <tr>
-        <th class="typeCol">Type</th>
-        <th class="typeValue">Value (unsigned)</th>
-        <th>(signed)</th>
+      <tr class="tableRow">
+        <th class="header">Type</th>
+        <th class="header">Value(unsigned)</th>
+        <th class="header">Value(signed)</th>
       </tr>
       </thead>
-      <tr>
-        <td>i8</td>
-        <td>{{ model.u8 }}</td>
-        <td>{{ model.s8 }}</td>
-      </tr>
-      <tr>
-        <td>i16le</td>
-        <td>{{ model.u16le }}</td>
-        <td>{{ model.s16le }}</td>
-      </tr>
-      <tr>
-        <td>i32le</td>
-        <td>{{ model.u32le }}</td>
-        <td>{{ model.s32le }}</td>
-      </tr>
-      <tr>
-        <td>i64le</td>
-        <td>{{ model.u64le }}</td>
-        <td>{{ model.s64le }}</td>
-      </tr>
-      <tr>
-        <td>i16be</td>
-        <td>{{ model.u16be }}</td>
-        <td>{{ model.s16be }}</td>
-      </tr>
-      <tr>
-        <td>i32be</td>
-        <td>{{ model.u32be }}</td>
-        <td>{{ model.s32be }}</td>
-      </tr>
-      <tr>
-        <td>i64be</td>
-        <td>{{ model.u64be }}</td>
-        <td>{{ model.s64be }}</td>
-      </tr>
-      <tr>
-        <td>float</td>
-        <td colspan="2">{{ model.float }}</td>
-      </tr>
-      <tr>
-        <td>double</td>
-        <td colspan="2">{{ model.double }}</td>
-      </tr>
-      <tr>
-        <td>unixts</td>
-        <td colspan="2">{{ model.unixts }}</td>
-      </tr>
-      <tr>
-        <td>ascii</td>
-        <td colspan="2">
-          <div class="str">{{ model.ascii }}</div>
-        </td>
-      </tr>
-      <tr>
-        <td>utf8</td>
-        <td colspan="2">
-          <div class="str">{{ model.utf8 }}</div>
-        </td>
+
+      <tr class="tableRow" v-for="simpleType in model.simpleTypes">
+        <td class="typeCol">{{simpleType.label}}</td>
+        <td class="typeValue">{{ simpleType.unsignedValue }}</td>
+        <td class="typeValue">{{ simpleType.signedValue }}</td>
       </tr>
-      <tr>
-        <td>utf16le</td>
-        <td colspan="2">
-          <div class="str">{{ model.utf16le }}</div>
-        </td>
+
+      <tr class="tableRow" v-for="complexType in model.complexTypes">
+        <td class="typeCol">{{complexType.label}}</td>
+        <td class="typeValue" colspan="2">{{ complexType.value }}</td>
       </tr>
-      <tr>
-        <td>utf16be</td>
-        <td colspan="2">
-          <div class="str">{{ model.utf16be }}</div>
+
+      <tr class="tableRow"  v-for="str in model.strings">
+        <td class="typeCol">{{str.label}}</td>
+        <td class="typeValue" colspan="2">
+          <div class="str">{{str.value}}</div>
         </td>
       </tr>
     </table>
@@ -109,30 +56,35 @@ const model = computed(() => {
 .converterPanel {
   color: #eee;
   overflow-y: auto;
-  height: 100%
+  height: 100%;
+  font-family: "JetBrains Mono";
+  font-size: 12px;
+  padding: 10px;
 }
 
-.converterPanel table {
-  margin: 10px;
-  font: 12px/normal "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+.tableRow {
+  height: 10px;
+  line-height: 10px;
 }
 
-.converterPanel table th {
-  padding-bottom: 3px
+.header {
+  text-align: left;
+  font-weight: bold;
 }
 
-.converterPanel .typeCol {
-  min-width: 54px
+.typeValue {
+  min-width: 155px;
+  font-weight: lighter;
 }
 
-.converterPanel .typeValue {
-  min-width: 155px
+.typeCol {
+  min-width: 60px;
+  font-weight: lighter;
 }
 
-.converterPanel .str {
+.str {
+  display: block;
   overflow: hidden;
-  line-height: 16px;
-  height: 16px;
-  display: block
+  font-weight: normal;
 }
 </style>