Merge pull request #406 from Senyoret1/ui-changes

Add a copy button in the visor list Former-commit-id: 7eaf981
skycoin · Jun 15, 2020 · 947388f · 947388f
2 parents e4d2aba + d08b562
commit 947388f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
@@ -62,6 +62,15 @@
             {{ node.local_pk }}
           </td>
           <td (click)="$event.stopPropagation()" class="actions">
+            <button
+              [clipboard]="node.local_pk"
+              (copyEvent)="onCopyToClipboardClicked()"
+              mat-icon-button
+              [matTooltip]="'nodes.copy-key' | translate"
+              class="grey-button-background"
+            >
+              <mat-icon class="small-icon">filter_none</mat-icon>
+            </button>
             <button
               (click)="showEditLabelDialog(node)"
               mat-icon-button
@@ -132,12 +141,12 @@
             <div class="margin-part"></div>
             <div class="right-part">
               <button
-                (click)="$event.stopPropagation(); node.online ? showEditLabelDialog(node) : showOptionsDialog(node)"
+                (click)="$event.stopPropagation(); showOptionsDialog(node)"
                 mat-icon-button
-                [matTooltip]="(node.online ? 'edit-label.title' : 'common.options') | translate"
+                [matTooltip]="'common.options' | translate"
                 class="grey-button-background"
               >
-                <mat-icon>{{ node.online ? 'short_text' : 'add' }}</mat-icon>
+                <mat-icon>{{ 'add' }}</mat-icon>
               </button>
             </div>
           </div>

diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
@@ -37,15 +37,16 @@
 
   .actions {
     text-align: right;
-    width: 110px;
+    width: 150px;
 
     button {
       width: 32px;
       height: 32px;
       line-height: 24px;
-
-      &:last-child {
-        margin-left: 15px;
+      margin-left: 5px;
+
+      .small-icon {
+        font-size: 15px;
       }
     }
   }

diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
@@ -16,6 +16,7 @@ import { SelectColumnComponent, SelectedColumn } from '../../layout/select-colum
 import GeneralUtils from 'src/app/utils/generalUtils';
 import { SelectOptionComponent, SelectableOption } from '../../layout/select-option/select-option.component';
 import { processServiceError } from 'src/app/utils/errors';
+import { ClipboardService } from 'src/app/services/clipboard.service';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -71,6 +72,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
     private ngZone: NgZone,
     private snackbarService: SnackbarService,
     private sidenavService: SidenavService,
+    private clipboardService: ClipboardService
   ) {
     // Data for populating the tab bar.
     this.tabsData = [
@@ -306,24 +308,42 @@ export class NodeListComponent implements OnInit, OnDestroy {
   showOptionsDialog(node: Node) {
     const options: SelectableOption[] = [
       {
-        icon: 'short_text',
-        label: 'edit-label.title',
+        icon: 'filter_none',
+        label: 'nodes.copy-key',
       },
       {
-        icon: 'close',
-        label: 'nodes.delete-node',
+        icon: 'short_text',
+        label: 'edit-label.title',
       }
     ];
 
+    if (!node.online) {
+      options.push({
+        icon: 'close',
+        label: 'nodes.delete-node',
+      });
+    }
+
     SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
-        this.showEditLabelDialog(node);
+        if (this.clipboardService.copy(node.local_pk)) {
+          this.onCopyToClipboardClicked();
+        }
       } else if (selectedOption === 2) {
+        this.showEditLabelDialog(node);
+      } else if (selectedOption === 3) {
         this.deleteNode(node);
       }
     });
   }
 
+  /**
+   * Called after copying the public key of a node.
+   */
+  onCopyToClipboardClicked() {
+    this.snackbarService.showDone('copy.copied');
+  }
+
   /**
    * Opens the modal window for changing the label of a node.
    */

diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -92,6 +92,7 @@
     "state-tooltip": "Current state",
     "label": "Label",
     "key": "Key",
+    "copy-key": "Copy key",
     "view-node": "View visor",
     "delete-node": "Remove visor",
     "error-load": "An error occurred while refreshing the list. Retrying...",