diff options
| author | James Woglom <j@wogloms.net> | 2022-08-29 19:02:00 -0400 |
|---|---|---|
| committer | James Woglom <j@wogloms.net> | 2022-08-29 19:02:00 -0400 |
| commit | bbfde99aeb84d226a0de3ea15a439d18766d7ee4 (patch) | |
| tree | 8ab3f80eb04cd3c5e1dc5272697dbb4b709f6bef | |
| parent | show error if static assets are not found (diff) | |
| download | metube-bbfde99aeb84d226a0de3ea15a439d18766d7ee4.tar.gz metube-bbfde99aeb84d226a0de3ea15a439d18766d7ee4.tar.bz2 metube-bbfde99aeb84d226a0de3ea15a439d18766d7ee4.zip | |
Use angular primitives to toggle
| -rw-r--r-- | ui/src/app/app.component.html | 20 | ||||
| -rw-r--r-- | ui/src/app/app.component.sass | 3 | ||||
| -rw-r--r-- | ui/src/app/app.component.ts | 5 |
3 files changed, 24 insertions, 4 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html index 74425aa..0d607d7 100644 --- a/ui/src/app/app.component.html +++ b/ui/src/app/app.component.html @@ -47,10 +47,22 @@ </div> </div> <div class="col-md-3 add-url-component"> - <button class="btn btn-primary add-url" type="submit" (click)="addDownload()" [disabled]="addInProgress || downloads.loading"> - <span class="spinner-border spinner-border-sm" role="status" id="add-spinner" *ngIf="addInProgress"></span> - {{ addInProgress ? "Adding..." : "Add" }} - </button> + <div class="btn-group add-url-group"> + <button class="btn btn-primary add-url" type="submit" (click)="addDownload()" [disabled]="addInProgress || downloads.loading"> + <span class="spinner-border spinner-border-sm" role="status" id="add-spinner" *ngIf="addInProgress"></span> + {{ addInProgress ? "Adding..." : "Add" }} + </button> + <button class="btn btn-primary set-download-folder dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" type="button" (click)="clickFolderDropdown()" [disabled]="addInProgress || downloads.loading"> + <span class="sr-only">Set download folder</span> + </button> + <div class="dropdown-menu show" *ngIf="showFolderDropdown"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Separated link</a> + </div> + </div> </div> </div> </div> diff --git a/ui/src/app/app.component.sass b/ui/src/app/app.component.sass index 517af03..656fac2 100644 --- a/ui/src/app/app.component.sass +++ b/ui/src/app/app.component.sass @@ -9,6 +9,9 @@ .add-url-component
margin: 0.5rem auto
+.add-url-group
+ width: 100%
+
button.add-url
width: 100%
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index a9b46a3..f9e5a41 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -19,6 +19,7 @@ export class AppComponent implements AfterViewInit { quality: string; format: string; addInProgress = false; + showFolderDropdown = false; darkMode: boolean; @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent; @@ -114,6 +115,10 @@ export class AppComponent implements AfterViewInit { this.quality = exists ? this.quality : 'best' } + clickFolderDropdown() { + this.showFolderDropdown = !this.showFolderDropdown; + } + addDownload(url?: string, quality?: string, format?: string) { url = url ?? this.addUrl quality = quality ?? this.quality |