Use angular primitives to toggle

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