Adjust the progress button

Create custom progress bar for reasons
WowUp · Nov 30, 2023 · 4a951b5 · 4a951b5
1 parent d0f84f6
commit 4a951b5
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 45 deletions.
diff --git a/...tron/src/app/components/addons/get-addon-status-cell/get-addon-status-cell.component.scss b/...tron/src/app/components/addons/get-addon-status-cell/get-addon-status-cell.component.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 62px;
+  // height: 62px;
 }
 .unavailable {
   background-color: var(--background-secondary-3);

diff --git a/wowup-electron/src/app/components/common/progress-bar/progress-bar.component.html b/wowup-electron/src/app/components/common/progress-bar/progress-bar.component.html
@@ -0,0 +1,3 @@
+<div class="progress-background">
+  <div class="progress-value" [style.width]="value + '%'"></div>
+</div>
diff --git a/wowup-electron/src/app/components/common/progress-bar/progress-bar.component.scss b/wowup-electron/src/app/components/common/progress-bar/progress-bar.component.scss
@@ -0,0 +1,12 @@
+.progress-background {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--background-secondary-1);
+  overflow: hidden;
+  border-radius: 4px;
+
+  .progress-value {
+    background-color: var(--background-primary-3);
+    height: 100%;
+  }
+}
diff --git a/wowup-electron/src/app/components/common/progress-bar/progress-bar.component.ts b/wowup-electron/src/app/components/common/progress-bar/progress-bar.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "app-progress-bar",
+  templateUrl: "./progress-bar.component.html",
+  styleUrls: ["./progress-bar.component.scss"],
+})
+export class ProgressBarComponent {
+  @Input() value: number;
+
+}
diff --git a/wowup-electron/src/app/components/common/progress-button/progress-button.component.html b/wowup-electron/src/app/components/common/progress-button/progress-button.component.html
@@ -1,4 +1,12 @@
-<button mat-flat-button color="primary" class="progress-button" (click)="onClickButton($event)" [disabled]="disable">
-  <mat-progress-bar class="progress-bar" color="secondary" [value]="value" *ngIf="showProgress"></mat-progress-bar>
+<button
+  class="progress-button"
+  [ngClass]="{ 'show-progress': showProgress }"
+  (click)="onClickButton($event)"
+  [disabled]="disable"
+>
+  <div>
+    <app-progress-bar *ngIf="showProgress" [value]="value"></app-progress-bar>
+    <!-- <progress *ngIf="showProgress" max="100" [value]="value"></progress> -->
+  </div>
   <ng-content></ng-content>
 </button>
diff --git a/wowup-electron/src/app/components/common/progress-button/progress-button.component.scss b/wowup-electron/src/app/components/common/progress-button/progress-button.component.scss
@@ -0,0 +1,18 @@
+.progress-button {
+  background-color: var(--background-primary);
+  color: var(--text-1);
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: normal;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 0.5rem;
+  line-height: 1rem;
+  max-width: 100%;
+
+  &[disabled] {
+    background-color: grey;
+  }
+
+}
diff --git a/wowup-electron/src/app/modules/common-ui.module.ts b/wowup-electron/src/app/modules/common-ui.module.ts
@@ -18,17 +18,18 @@ import { WebViewComponent } from "../components/common/webview/webview.component
 import { ProgressSpinnerComponent } from "../components/progress-spinner/progress-spinner.component";
 import { MatModule } from "./mat-module";
 import { PipesModule } from "./pipes.module";
+import { ProgressBarComponent } from "../components/common/progress-bar/progress-bar.component";
 
 @NgModule({
   declarations: [
     ProgressSpinnerComponent,
     ProgressButtonComponent,
+    ProgressBarComponent,
     ConfirmDialogComponent,
     AlertDialogComponent,
     AnimatedLogoComponent,
     ExternalUrlConfirmationDialogComponent,
     PatchNotesDialogComponent,
-    ProgressButtonComponent,
     TelemetryDialogComponent,
     ConsentDialogComponent,
     CellWrapTextComponent,
@@ -40,12 +41,12 @@ import { PipesModule } from "./pipes.module";
   exports: [
     ProgressSpinnerComponent,
     ProgressButtonComponent,
+    ProgressBarComponent,
     ConfirmDialogComponent,
     AlertDialogComponent,
     AnimatedLogoComponent,
     ExternalUrlConfirmationDialogComponent,
     PatchNotesDialogComponent,
-    ProgressButtonComponent,
     TelemetryDialogComponent,
     ConsentDialogComponent,
     CellWrapTextComponent,

diff --git a/wowup-electron/src/index.html b/wowup-electron/src/index.html
@@ -1,46 +1,49 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>WowUp.io CF</title>
+    <base href="/" />
 
-<head>
-  <meta charset="utf-8" />
-  <title>WowUp.io CF</title>
-  <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src ws: file: data: http: https: 'unsafe-eval' 'unsafe-inline';"
+    />
+    <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
+  </head>
 
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta http-equiv="Content-Security-Policy"
-    content="default-src ws: file: data: http: https: 'unsafe-eval' 'unsafe-inline';" />
-  <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
-</head>
-
-<body class="mat-typography" style="overflow: hidden">
-  <app-root>
-    <div id="preload-container" style="
+  <body class="mat-typography" style="overflow: hidden">
+    <app-root>
+      <div
+        id="preload-container"
+        style="
           width: 100%;
           height: 100vh;
           display: flex;
           flex-direction: column;
           color: white;
           justify-content: center;
           align-items: center;
-        ">
-      <img id="preload-logo" src="assets/wowup_logo_purple.png" style="width: 150px; " />
-    </div>
-  </app-root>
-  <script>
-    try {
-      window.global = window;
-
-      document.body.classList.add(window.platform)
-      if (window.platform === 'darwin') {
-        document.getElementById('preload-logo').style.borderRadius = '23px';
-      }
+        "
+      >
+        <img id="preload-logo" src="assets/wowup_logo_purple.png" style="width: 150px" />
+      </div>
+    </app-root>
+    <script>
+      try {
+        window.global = window;
 
-      document.body.style.backgroundColor = window.baseBgColor;
-    } catch (e) {
-      console.error(e)
-    }
-  </script>
-</body>
+        document.body.classList.add(window.platform);
+        if (window.platform === "darwin") {
+          document.getElementById("preload-logo").style.borderRadius = "23px";
+        }
 
-</html>
+        document.body.style.backgroundColor = window.baseBgColor;
+      } catch (e) {
+        console.error(e);
+      }
+    </script>
+  </body>
+</html>
diff --git a/wowup-electron/src/styles.scss b/wowup-electron/src/styles.scss
@@ -513,11 +513,12 @@ mat-icon.success-icon {
   min-width: 120px !important;
 
   .progress-bar {
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
+    height: 1rem;
+    // border-top-right-radius: 4px;
+    // border-top-left-radius: 4px;
     width: 100%;
-    left: 0;
-    position: absolute;
+    // left: 0;
+    // position: absolute;
   }
 
   .mat-progress-bar-buffer {
@@ -555,7 +556,10 @@ mat-icon.success-icon {
   color: #fff;
   font-size: 16px;
   font-weight: 500;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    color 0.2s;
   border-radius: 4px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -659,4 +663,4 @@ th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-h
     transform: scale(0.95);
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
   }
-}
+}