series page action buttons design improved

- "add want to read", "edit information", "more", "scrobbling" and "download" action buttons on the page of a series have been redesigned
Kareadita · Oct 25, 2024 · fe33398 · fe33398
1 parent e84e7c5
commit fe33398
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 14 deletions.
diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html
@@ -65,15 +65,15 @@ <h4 class="title mb-2">
 
               @if (accountService.isAdmin$ | async) {
                 <div class="col-auto ms-2">
-                  <button class="btn btn-secondary-outline" id="edit-btn--komf" (click)="openEditModal()" [ngbTooltip]="t('edit-series-alt')">
+                  <button class="btn btn-actions" id="edit-btn--komf" (click)="openEditModal()" [ngbTooltip]="t('edit-series-alt')">
                     <span><i class="fa fa-pen" aria-hidden="true"></i></span>
                   </button>
                 </div>
               }
 
               <div class="col-auto ms-2 d-none d-md-block">
                 <div class="card-actions" [ngbTooltip]="t('more-alt')">
-                  <app-card-actionables (actionHandler)="performAction($event)" [actions]="chapterActions" [labelBy]="series.name + ' ' + chapter.minNumber" iconClass="fa-ellipsis-h" btnClass="btn-secondary-outline btn"></app-card-actionables>
+                  <app-card-actionables (actionHandler)="performAction($event)" [actions]="chapterActions" [labelBy]="series.name + ' ' + chapter.minNumber" iconClass="fa-ellipsis-h" btnClass="btn-actions btn"></app-card-actionables>
                 </div>
               </div>
 

diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.scss b/UI/Web/src/app/chapter-detail/chapter-detail.component.scss
@@ -1 +1,5 @@
 @use '../../series-detail-common';
+
+:host ::ng-deep .card-actions .btn.btn-actions {
+  padding: 0.375rem 0.75rem;
+}
diff --git a/UI/Web/src/app/series-detail/_components/download-button/download-button.component.html b/UI/Web/src/app/series-detail/_components/download-button/download-button.component.html
@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; read: 'download-button'">
   @if (canDownload$ | async) {
     @if (download$ | async; as download) {
-      <button class="btn btn-secondary-outline" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')" [disabled]="download !== null">
+      <button class="btn btn-actions" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')" [disabled]="download !== null">
         @if (download) {
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
           <span class="visually-hidden">{{t('downloading-status')}}</span>
@@ -10,7 +10,7 @@
         }
       </button>
     } @else {
-      <button class="btn btn-secondary-outline" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')">
+      <button class="btn btn-actions" (click)="downloadClicked()" [ngbTooltip]="t('download-tooltip')">
         <i class="fa fa-arrow-alt-circle-down" aria-hidden="true"></i>
       </button>
     }

diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
@@ -48,12 +48,12 @@ <h4 class="title mb-2">
           </div>
 
           <div class="mt-3 mb-3">
-            <div class="row g-0">
+            <div class="row g-0" style="align-items: center;">
               <div class="col-auto">
                 <div class="btn-group">
                   <button type="button" class="btn btn-primary-outline" (click)="read()">
                     <span>
-                      <i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
+                      <i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}} " aria-hidden="true"></i>
                       <span class="read-btn--text">&nbsp;{{(hasReadingProgress) ? t('continue') : t('read')}}</span>
                     </span>
                   </button>
@@ -72,7 +72,7 @@ <h4 class="title mb-2">
               </div>
 
               <div class="col-auto ms-2">
-                <button class="btn btn-secondary-outline" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
+                <button class="btn btn-actions" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
                   <span>
                       <i class="{{isWantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
                   </span>
@@ -81,27 +81,27 @@ <h4 class="title mb-2">
 
               @if (isAdmin) {
                 <div class="col-auto ms-2">
-                  <button class="btn btn-secondary-outline" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')">
+                  <button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')">
                     <span><i class="fa fa-pen" aria-hidden="true"></i></span>
                   </button>
                 </div>
               }
 
               @if ((accountService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
                 <div class="col-auto ms-2">
-                  <button class="btn btn-secondary-outline" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip')">
+                  <button class="btn btn-actions" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip')">
                     <i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}" aria-hidden="true"></i>
                   </button>
                 </div>
               }
 
               <div class="col-auto ms-2 d-none d-md-block">
-                <div class="card-actions mt-2" [ngbTooltip]="t('more-alt')">
-                  <app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn-secondary-outline btn"></app-card-actionables>
+                <div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
+                  <app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
                 </div>
               </div>
 
-              <div class="col-auto ms-2 d-none d-md-block">
+              <div class="col-auto ms-2 d-none d-md-block btn-actions">
                 <app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button>
               </div>
 

diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss
@@ -27,4 +27,6 @@
   }
 }
 
-
+:host ::ng-deep .card-actions.btn-actions .btn {
+    padding: 0.375rem 0.75rem;
+}
diff --git a/UI/Web/src/theme/components/_buttons.scss b/UI/Web/src/theme/components/_buttons.scss
@@ -37,15 +37,28 @@
     box-shadow: inset 0px -2px 0px 0px var(--btn-secondary-outline-text-color);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+  }
+}
+
+.btn-actions {
+  color: var(--btn-fa-icon-color);
+  border-radius: 6px;
+
+  &:hover {
+    background-color: rgb(255 255 255 / 18%);
+  }
 
+  &:active, &:focus {
+    background-color: rgb(255 255 255 / 28%) !important;
+    border-color: transparent !important;
   }
 }
 
 .btn-close {
   filter: var(--btn-icon-filter) !important;
 }
 
-.btn-primary:disabled, .btn-primary.disabled {
+.btn-primary:disabled, .btn-primary.disabled, .btn-tertiary.disabled {
   background-color: var(--btn-disabled-bg-color);
   color: var(--btn-disabled-text-color);
   border-color: var(--btn-disabled-border-color);