transfers wip

terminus-core/src/api/index.ts

@@ -10,7 +10,7 @@ export { Theme } from './theme'
 export { TabContextMenuItemProvider } from './tabContextMenuProvider'
 export { SelectorOption } from './selector'
 export { CLIHandler, CLIEvent } from './cli'
-export { PlatformService, ClipboardContent, MessageBoxResult, MessageBoxOptions } from './platform'
+export { PlatformService, ClipboardContent, MessageBoxResult, MessageBoxOptions, FileDownload, FileUpload, FileTransfer } from './platform'
 export { MenuItemOptions } from './menu'
 export { BootstrapData, BOOTSTRAP_DATA } from './mainProcess'
 export { HostWindowService } from './hostWindow'

terminus-core/src/api/platform.ts

@@ -18,6 +18,44 @@ export interface MessageBoxResult {
     response: number
 }
 
+export abstract class FileTransfer {
+    abstract getName (): string
+    abstract getSize (): number
+    abstract close (): void
+
+    getCompletedBytes (): number {
+        return this.completedBytes
+    }
+
+    isComplete (): boolean {
+        return this.completedBytes >= this.getSize()
+    }
+
+    isCancelled (): boolean {
+        return this.cancelled
+    }
+
+    cancel (): void {
+        this.cancelled = true
+        this.close()
+    }
+
+    protected increaseProgress (bytes: number): void {
+        this.completedBytes += bytes
+    }
+
+    private completedBytes = 0
+    private cancelled = false
+}
+
+export abstract class FileDownload extends FileTransfer {
+    abstract write (buffer: Buffer): Promise<void>
+}
+
+export abstract class FileUpload extends FileTransfer {
+    abstract read (): Promise<Buffer>
+}
+
 export abstract class PlatformService {
     supportsWindowControls = false
 
@@ -26,6 +64,9 @@ export abstract class PlatformService {
     abstract loadConfig (): Promise<string>
     abstract saveConfig (content: string): Promise<void>
 
+    abstract startDownload (name: string, size: number): Promise<FileDownload>
+    abstract startUpload (): Promise<FileUpload[]>
+
     getConfigPath (): string|null {
         return null
     }

terminus-core/src/components/appRoot.component.pug

@@ -83,12 +83,27 @@ title-bar(
                         )
                         div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
+            .d-flex(ngbDropdown)
+                button.btn.btn-secondary.btn-tab-bar(
+                    title='File transfers',
+                    ngbDropdownToggle
+                ) !{require('../icons/download.svg')}
+                .transfers-dropdown-menu(ngbDropdownMenu)
+                    .dropdown-header File transfers
+                    .dropdown-item.transfer
+                        .mr-3 !{require('../icons/download.svg')}
+                        .main
+                            label file.bin
+                            .progress
+                                .progress-bar.w-25
+                            small 25%
+                        button.btn.btn-link !{require('../icons/times.svg')}
+
             button.btn.btn-secondary.btn-tab-bar.btn-update(
                 *ngIf='updatesAvailable',
                 title='Update available - Click to install',
-                (click)='updater.update()',
-                [fastHtmlBind]='updateIcon'
-            )
+                (click)='updater.update()'
+            ) !{require('../icons/gift.svg')}
 
         window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" \

terminus-core/src/components/appRoot.component.scss

@@ -178,3 +178,25 @@ hotkey-hint {
 ::ng-deep .btn-update svg {
     fill: cyan;
 }
+
+.transfers-dropdown-menu {
+    min-width: 300px;
+
+    .transfer {
+        display: flex;
+        align-items: center;
+        padding: 5px 0 5px 25px;
+
+        .main {
+            margin-right: auto;
+
+            label {
+                margin-bottom: 5px;
+            }
+        }
+
+        > i {
+            margin-right: 10px;
+        }
+    }
+}

terminus-core/src/components/appRoot.component.ts

@@ -59,7 +59,6 @@ export class AppRootComponent {
     @HostBinding('class.no-tabs') noTabs = true
     tabsDragging = false
     unsortedTabs: BaseTabComponent[] = []
-    updateIcon: string
     updatesAvailable = false
     private logger: Logger
 
@@ -79,8 +78,6 @@ export class AppRootComponent {
         this.logger = log.create('main')
         this.logger.info('v', platform.getAppVersion())
 
-        this.updateIcon = require('../icons/gift.svg')
-
         this.hotkeys.matchedHotkey.subscribe((hotkey: string) => {
             if (hotkey.startsWith('tab-')) {
                 const index = parseInt(hotkey.split('-')[1])

terminus-core/src/icons/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 288h-92.1l46.1-46.1c30.1-30.1 8.8-81.9-33.9-81.9h-64V48c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v112h-64c-42.6 0-64.2 51.7-33.9 81.9l46.1 46.1H48c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V336c0-26.5-21.5-48-48-48zm-400-80h112V48h96v160h112L288 368 128 208zm400 256H48V336h140.1l65.9 65.9c18.8 18.8 49.1 18.7 67.9 0l65.9-65.9H528v128zm-88-64c0-13.3 10.7-24 24-24s24 10.7 24 24-10.7 24-24 24-24-10.7-24-24z"></path></svg>

terminus-core/src/icons/times.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>

terminus-core/src/theme.vars.scss

@@ -190,3 +190,6 @@ $modal-header-border-width:         0;
 $modal-footer-border-color:         #222;
 $modal-footer-border-width:         1px;
 $modal-content-border-width:        0;
+
+$progress-bar-bg: $table-bg;
+$progress-height: 3px;