add vscode icons

apioo · Nov 3, 2024 · 3451feb · 3451feb
1 parent 27385af
commit 3451feb
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,15 +18,16 @@
     "@angular/platform-browser-dynamic": "^16.1.0",
     "@angular/router": "^16.1.0",
     "@ng-bootstrap/ng-bootstrap": "^15.0.0",
+    "@vscode/codicons": "^0.0.36",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.5",
     "ng-packagr": "^16.1.0",
     "ngx-highlightjs": "^10.0.0",
     "pascal-case": "^3.1.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "typehub-javascript-sdk": "^1.1.8",
     "typeapi-model": "^1.0.0",
+    "typehub-javascript-sdk": "^1.1.8",
     "yaml": "^2.3.1",
     "zone.js": "~0.13.0"
   },

diff --git a/projects/typeschema-angular-editor/package.json b/projects/typeschema-angular-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-typeschema-editor",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Editor to model and design a TypeAPI/TypeSchema specification",
   "keywords": [
     "TypeAPI",

diff --git a/projects/typeschema-angular-editor/src/lib/editor/editor.component.html b/projects/typeschema-angular-editor/src/lib/editor/editor.component.html
@@ -53,7 +53,7 @@
         <td><span class="badge bg-primary editor-import-version">{{ include.version }}</span></td>
         <td>
           <div class="btn-group float-end" role="group" *ngIf="!readonly">
-            <a class="btn btn-danger" (click)="deleteInclude(includeIndex)">Remove</a>
+            <a class="btn btn-danger" (click)="deleteInclude(includeIndex)"><span class="codicon codicon-close"></span></a>
           </div>
         </td>
       </tr>
@@ -64,40 +64,42 @@
 
 <ng-container *ngIf="operationEnabled">
   <div *ngFor="let operation of specification.operations; index as operationIndex" class="card editor-type mb-3" [ngClass]="{'border-black': selectedOperation === operationIndex}" id="operation-{{ operation.name }}" (click)="selectOperation(operationIndex)">
-    <div class="card-header editor-type-name">
+    <div class="card-header">
       <div class="float-end text-end">
         <code>{{ operation.httpMethod }} {{ operation.httpPath }}</code><br>
         <span *ngFor="let tag of operation.tags" class="badge text-bg-dark ms-1">{{ tag }}</span>
       </div>
-      {{ operation.name }}<br>
-      <div class="text-secondary editor-type-description">{{ operation.description }}</div>
+      <div class="editor-operation-name font-monospace"><span class="badge text-bg-dark"><span class="codicon codicon-symbol-method"></span></span> {{ operation.name }}</div>
+      <div class="text-secondary editor-operation-description">{{ operation.description }}</div>
     </div>
     <div class="card-body">
       <table class="table table-striped" *ngIf="operation.arguments.length > 0 || operation.payload">
         <colgroup>
-          <col class="w-25">
-          <col class="w-25">
+          <col class="w-50">
           <col class="w-25">
           <col class="w-25">
         </colgroup>
         <thead>
         <tr>
           <th>Name</th>
           <th>Type</th>
-          <th>In</th>
           <th></th>
         </tr>
         </thead>
         <tbody>
         <tr *ngFor="let argument of operation.arguments; index as argumentIndex">
-          <td>{{ argument.name }}</td>
-          <td><span class="badge text-bg-primary">{{ argument.type }}</span></td>
-          <td><span class="badge text-bg-secondary">{{ argument.in }}</span></td>
+          <td>
+            <span class="editor-operation-argument-name font-monospace">{{ argument.name }}</span>
+          </td>
+          <td>
+            <span class="badge text-bg-primary">{{ argument.type }}</span>
+            <span class="badge text-bg-secondary ms-1">{{ argument.in }}</span>
+          </td>
           <td>
             <div class="btn-group float-end" role="group" *ngIf="!readonly">
               <button type="button" class="btn btn-secondary" (click)="upArgument(operationIndex, argumentIndex)"><i class="bi bi-arrow-up"></i></button>
               <button type="button" class="btn btn-secondary" (click)="downArgument(operationIndex, argumentIndex)"><i class="bi bi-arrow-down"></i></button>
-              <button type="button" class="btn btn-danger" (click)="deleteArgument(operationIndex, argumentIndex)">Remove</button>
+              <button type="button" class="btn btn-danger" (click)="deleteArgument(operationIndex, argumentIndex)"><span class="codicon codicon-close"></span></button>
             </div>
           </td>
         </tr>
@@ -118,9 +120,9 @@
       </table>
       <table class="table table-striped" *ngIf="operation.httpCode || operation.throws.length > 0">
         <colgroup>
-          <col class="w-25">
           <col class="w-50">
           <col class="w-25">
+          <col class="w-25">
         </colgroup>
         <thead>
         <tr>
@@ -161,7 +163,7 @@
             <div class="btn-group float-end" role="group" *ngIf="!readonly">
               <button type="button" class="btn btn-secondary" (click)="upThrow(operationIndex, throwIndex)"><i class="bi bi-arrow-up"></i></button>
               <button type="button" class="btn btn-secondary" (click)="downThrow(operationIndex, throwIndex)"><i class="bi bi-arrow-down"></i></button>
-              <button type="button" class="btn btn-danger" (click)="deleteThrow(operationIndex, throwIndex)">Remove</button>
+              <button type="button" class="btn btn-danger" (click)="deleteThrow(operationIndex, throwIndex)"><span class="codicon codicon-close"></span></button>
             </div>
           </td>
         </tr>
@@ -172,25 +174,25 @@
       <div class="btn-group" role="group">
         <button type="button" class="btn btn-secondary" (click)="upOperation(operationIndex)"><i class="bi bi-arrow-up"></i></button>
         <button type="button" class="btn btn-secondary" (click)="downOperation(operationIndex)"><i class="bi bi-arrow-down"></i></button>
-        <button type="button" class="btn btn-primary" (click)="editOperation(operationModal, operationIndex)">Edit</button>
-        <button type="button" class="btn btn-danger" (click)="deleteOperation(operationIndex)">Remove</button>
-        <button type="button" class="btn btn-secondary" (click)="copyOperation(operationIndex)">Copy</button>
+        <button type="button" class="btn btn-primary" (click)="editOperation(operationModal, operationIndex)"><span class="codicon codicon-edit"></span></button>
+        <button type="button" class="btn btn-danger" (click)="deleteOperation(operationIndex)"><span class="codicon codicon-close"></span></button>
+        <button type="button" class="btn btn-secondary" (click)="copyOperation(operationIndex)"><span class="codicon codicon-copy"></span></button>
       </div>
     </div>
   </div>
 </ng-container>
 
 <div *ngFor="let type of specification.types; index as typeIndex" class="card editor-type mb-3" [ngClass]="{'border-primary': specification.root === typeIndex, 'border-black': selectedType === typeIndex}" id="type-{{ type.name }}" (click)="selectType(typeIndex)">
-  <div class="card-header editor-type-name">
-    <div class="editor-type-name">{{ type.name }} <span *ngIf="type.parent" class="float-end"><span class="badge text-bg-primary">{{ type.parent }}</span></span></div>
+  <div class="card-header">
+    <div class="editor-type-name font-monospace"><span class="badge text-bg-dark"><span class="codicon codicon-symbol-structure"></span></span> {{ type.name }} <span *ngIf="type.parent" class="float-end"><span class="badge text-bg-primary">{{ type.parent }}</span></span></div>
     <div class="text-secondary editor-type-description">{{ type.description }}</div>
   </div>
   <div class="card-body">
     <div [ngSwitch]="type.type">
       <ng-container *ngSwitchCase="'map'">
         <table class="table table table-striped editor-type-properties">
           <colgroup>
-            <col class="w-25">
+            <col class="w-50">
             <col class="w-25">
             <col class="w-25">
           </colgroup>
@@ -203,7 +205,7 @@
           </thead>
           <tbody>
           <tr>
-            <td><div class="editor-type-property-name">*</div></td>
+            <td><div class="editor-type-property-name font-monospace">*</div></td>
             <td><span class="badge text-bg-primary">{{ type.reference }}</span></td>
             <td></td>
           </tr>
@@ -236,7 +238,7 @@
               </td>
               <td>
                 <div class="btn-group float-end" role="group" *ngIf="!readonly">
-                  <button type="button" class="btn btn-danger" (click)="deleteTypeMapping(typeIndex, mapping.key)">Remove</button>
+                  <button type="button" class="btn btn-danger" (click)="deleteTypeMapping(typeIndex, mapping.key)"><span class="codicon codicon-close"></span></button>
                 </div>
               </td>
             </tr>
@@ -259,21 +261,21 @@
           <tbody>
           <tr *ngFor="let property of type.properties; index as propertyIndex">
             <td>
-              <div class="editor-type-property-name">{{ property.name }}</div>
+              <div class="editor-type-property-name font-monospace">{{ property.name }}</div>
               <div class="editor-type-property-description text-secondary">{{ property.description }}</div>
             </td>
             <td>
-              <span class="badge text-bg-primary">{{ property.type }}</span><br>
-              <span class="badge text-bg-secondary me-1" *ngIf="property.reference">{{ property.reference }}</span>
-              <span class="badge text-bg-secondary me-1" *ngIf="property.generic">{{ property.generic }}</span>
-              <span class="badge text-bg-secondary me-1" *ngIf="property.format">{{ property.format }}</span>
+              <span class="badge text-bg-primary">{{ property.type }}</span>
+              <span class="badge text-bg-secondary ms-1" *ngIf="property.reference">{{ property.reference }}</span>
+              <span class="badge text-bg-secondary ms-1" *ngIf="property.generic">{{ property.generic }}</span>
+              <span class="badge text-bg-secondary ms-1" *ngIf="property.format">{{ property.format }}</span>
             </td>
             <td>
               <div class="btn-group float-end" role="group" *ngIf="!readonly">
                 <button type="button" class="btn btn-secondary" (click)="upProperty(typeIndex, propertyIndex)"><i class="bi bi-arrow-up"></i></button>
                 <button type="button" class="btn btn-secondary" (click)="downProperty(typeIndex, propertyIndex)"><i class="bi bi-arrow-down"></i></button>
-                <button type="button" class="btn btn-primary" (click)="editProperty(propertyModal, typeIndex, propertyIndex)">Edit</button>
-                <button type="button" class="btn btn-danger" (click)="deleteProperty(typeIndex, propertyIndex)">Remove</button>
+                <button type="button" class="btn btn-primary" (click)="editProperty(propertyModal, typeIndex, propertyIndex)"><span class="codicon codicon-edit"></span></button>
+                <button type="button" class="btn btn-danger" (click)="deleteProperty(typeIndex, propertyIndex)"><span class="codicon codicon-close"></span></button>
               </div>
             </td>
           </tr>
@@ -289,9 +291,9 @@
     <div class="btn-group" role="group">
       <button type="button" class="btn btn-secondary" (click)="upType(typeIndex)"><i class="bi bi-arrow-up"></i></button>
       <button type="button" class="btn btn-secondary" (click)="downType(typeIndex)"><i class="bi bi-arrow-down"></i></button>
-      <button type="button" class="btn btn-primary" (click)="editType(typeModal, typeIndex)">Edit</button>
-      <button type="button" class="btn btn-danger" (click)="deleteType(typeIndex)">Remove</button>
-      <button type="button" class="btn btn-secondary" (click)="copyType(typeIndex)">Copy</button>
+      <button type="button" class="btn btn-primary" (click)="editType(typeModal, typeIndex)"><span class="codicon codicon-edit"></span></button>
+      <button type="button" class="btn btn-danger" (click)="deleteType(typeIndex)"><span class="codicon codicon-close"></span></button>
+      <button type="button" class="btn btn-secondary" (click)="copyType(typeIndex)"><span class="codicon codicon-copy"></span></button>
       <button *ngIf="specification.root !== typeIndex" type="button" class="btn btn-secondary" (click)="setRoot(typeIndex)">Primary</button>
     </div>
   </div>

diff --git a/src/styles.css b/src/styles.css
@@ -2,3 +2,4 @@
 @import "~bootstrap-icons/font/bootstrap-icons.css";
 @import "~bootstrap/dist/css/bootstrap.min.css";
 @import '~highlight.js/styles/atom-one-dark.css';
+@import "~@vscode/codicons/dist/codicon.css";