move Export button to icon-set-details, make Save the primary button

WPS · Nov 20, 2024 · 86dcb3c · 86dcb3c
1 parent 40e70ff
commit 86dcb3c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 44 deletions.
diff --git a/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.html b/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.html
@@ -40,6 +40,23 @@
         </mat-form-field>
       </div>
       <div class="buttons">
+        <button
+          mat-stroked-button
+          class="mr-1"
+          title="Import icon set"
+          (click)="startIconSetImport()"
+        >
+          <span>Import icon set</span>
+          <input
+            type="file"
+            accept=".domain, .iconset"
+            style="display: none"
+            id="importDomain"
+            name="file"
+            onclick="this.value=null"
+            (change)="importIconSet()"
+          />
+        </button>
         <button
           mat-stroked-button
           class="mr-1"
@@ -75,38 +92,14 @@
           <span>Cancel changes</span>
         </button>
         <button
-          mat-stroked-button
+          mat-flat-button
           class="mr-1"
           title="Save changes"
+          color="primary"
           (click)="saveIconSet()"
         >
           <span>Save changes</span>
         </button>
-        <button
-          mat-stroked-button
-          class="mr-1"
-          title="Import icon set"
-          (click)="startIconSetImport()"
-        >
-          <span>Import icon set</span>
-          <input
-            type="file"
-            accept=".domain, .iconset"
-            style="display: none"
-            id="importDomain"
-            name="file"
-            onclick="this.value=null"
-            (change)="importIconSet()"
-          />
-        </button>
-        <button
-          mat-stroked-button
-          class="mr-1"
-          title="Export icon set"
-          (click)="exportIconSet()"
-        >
-          <span>Export icon set</span>
-        </button>
       </div>
     </div>
     <div class="iconList smallScrollbar">

diff --git a/...s/icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.ts b/...s/icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.ts
@@ -78,10 +78,6 @@ export class IconSetConfigurationComponent implements OnInit {
     );
   }
 
-  exportIconSet(): void {
-    this.iconSetCustomizationService.exportIconSet();
-  }
-
   /** Add Custom Icon **/
   startIconUpload(): void {
     document.getElementById('importIcon')?.click();

diff --git a/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.html b/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.html
@@ -1,18 +1,26 @@
 <div class="details smallScrollbar">
   <div>
-    <h3>Set Name for Export:</h3>
+    <h3>Export as File:</h3>
     <div class="iconSetDetails">
       <mat-form-field class="exportForm" color="accent">
+        <mat-label>Icon set name</mat-label>
         <input
           matInput
           type="text"
-          placeholder="Icon Set Name"
           subscriptSizing="dynamic"
           class="dense-8"
           (input)="changeName($event)"
           [value]="iconSetName | async"
         />
       </mat-form-field>
+      <button
+        mat-stroked-button
+        class="exportForm"
+        title="Export icon set"
+        (click)="exportIconSet()"
+      >
+        <span>Export icon set</span>
+      </button>
     </div>
   </div>
   <div class="actorList">

diff --git a/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.scss b/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.scss
@@ -12,17 +12,10 @@
 }
 
 .iconSetDetails {
+  display: flex;
+  flex-direction: column;
   padding-left: 8px;
   padding-right: 8px;
-  ::ng-deep.mat-mdc-form-field-infix {
-    border: none;
-    padding-bottom: 0 !important;
-    padding-top: 0 !important;
-  }
-
-  ::ng-deep.mdc-text-field {
-    padding-left: 0 !important;
-  }
 }
 
 .compactItem {
@@ -40,9 +33,9 @@
 
 .exportForm {
   margin-left: 12px;
-  margin-top: 12px;
-  margin-bottom: 0px;
-  height: 50px;
+  margin-right: 12px;
+  margin-top: 8px;
+  margin-bottom: 0;
 }
 
 h3 {
@@ -55,3 +48,7 @@ h3 {
 mat-list {
   padding-top: 0;
 }
+
+::ng-deep.mat-mdc-form-field-subscript-wrapper {
+  height: 0 !important;
+}
diff --git a/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.ts b/src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.ts
@@ -66,4 +66,8 @@ export class IconSetDetailsComponent implements OnInit {
     this.draggedList = draggedList;
     this.draggedIndex = index;
   }
+
+  exportIconSet(): void {
+    this.customizationService.exportIconSet();
+  }
 }