add navigation buttons

add icons to archive buttons

Author: lakshith-403

app/ui/src/components/buttons.ts

@@ -274,6 +274,22 @@ export class DeleteButton extends Button {
     }
 }
 
+export class IconButton extends Button {
+    private readonly icon: string
+    constructor(opt: ButtonOptions, icon: string) {
+        super(opt)
+        this.icon = icon
+    }
+
+    render($: WeyaElementFunction) {
+        this.elem = $('nav', `.nav-link.tab.float-right${this.isDisabled ? '.disabled' : ''}`,
+            {on: {click: this.onClick}},
+            $ => {
+                $('span', this.icon, '')
+            })
+    }
+}
+
 export class CancelButton extends Button {
     constructor(opt: ButtonOptions) {
         super(opt)

app/ui/src/components/hamburger_menu.ts

@@ -97,6 +97,18 @@ export class HamburgerMenuView {
                 link: '/runs',
                 parent: this.constructor.name
             }).render($)
+            new NavButton({
+                icon: '.fas.fa-archive',
+                text: 'Archived Runs',
+                link: '/runs/archive',
+                parent: this.constructor.name
+            }).render($)
+            new NavButton({
+                icon: '.fas.fa-running',
+                text: 'All Runs',
+                link: '/runs/all',
+                parent: this.constructor.name
+            }).render($)
             new NavButton({
                 icon: '.fas.fa-desktop',
                 text: 'Computers',

app/ui/src/views/runs_list_view.ts

@@ -5,7 +5,7 @@ import CACHE, {RunsFolder, RunsListCache} from "../cache/cache"
 import {RunListItem, RunListItemModel} from '../models/run_list'
 import {RunsListItemView} from '../components/runs_list_item'
 import {SearchView} from '../components/search'
-import {CancelButton, CustomButton, DeleteButton, EditButton} from '../components/buttons'
+import {CancelButton, DeleteButton, EditButton, IconButton} from '../components/buttons'
 import {HamburgerMenuView} from '../components/hamburger_menu'
 import EmptyRunsList from './empty_runs_list'
 import {UserMessages} from '../components/user_messages'
@@ -24,7 +24,7 @@ class RunsListView extends ScreenView {
     searchQuery: string
     buttonContainer: HTMLDivElement
     deleteButton: DeleteButton
-    archiveButton: CustomButton
+    archiveButton: IconButton
     editButton: EditButton
     cancelButton: CancelButton
     isEditMode: boolean
@@ -46,11 +46,10 @@ class RunsListView extends ScreenView {
         this.deleteButton = new DeleteButton({onButtonClick: this.onDelete, parent: this.constructor.name})
         this.editButton = new EditButton({onButtonClick: this.onEdit, parent: this.constructor.name})
         this.cancelButton = new CancelButton({onButtonClick: this.onCancel, parent: this.constructor.name})
-        this.archiveButton = new CustomButton({
-            text: this.folder == RunsFolder.DEFAULT ? 'Archive' : 'Unarchive',
+        this.archiveButton = new IconButton({
             onButtonClick: this.onArchiveClick,
             parent: this.constructor.name
-        })
+        }, folder == RunsFolder.DEFAULT ? '.fas.fa-archive' : '.fas.fa-upload')
 
         this.userMessages = new UserMessages()
 
@@ -140,7 +139,8 @@ class RunsListView extends ScreenView {
         this.deleteButton.hide(noRuns || !this.isEditMode)
         this.cancelButton.hide(noRuns || !this.isEditMode)
         this.editButton.hide(noRuns || this.isEditMode)
-        this.archiveButton.hide(noRuns || !this.isEditMode)
+        this.archiveButton.hide((noRuns || !this.isEditMode) ||
+            (this.folder != RunsFolder.DEFAULT && this.folder != RunsFolder.ARCHIVE))
 
         if (!noRuns && !this.isEditMode) {
             this.refresh.start()