Disabled state simplification

Chocobozzz · Sep 19, 2024 · ca1bc34 · ca1bc34
1 parent 1111d66
commit ca1bc34
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 24 deletions.
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -50,7 +50,7 @@
       Cancel
     </button>
 
-    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [ngClass]="{ disabled: !form.valid || addingComment }">
+    <button *ngIf="isAddButtonDisplayed()" class="peertube-button orange-button" [disabled]="!form.valid || addingComment">
       {{ addingCommentButtonValue }}
     </button>
   </div>

diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -186,7 +186,7 @@ <h5 *ngIf="playlist" i18n class="text-center mb-4">Share the video</h5>
             i18n-labelText labelText="Auto select subtitle"
           ></my-peertube-checkbox>
 
-          <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
+          <div class="peertube-select-container">
             <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
               <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
             </select>

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
@@ -134,8 +134,7 @@
     background-color: pvar(--mainHoverColor);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
     color: #fff;
     background-color: pvar(--inputBorderColor);
@@ -165,8 +164,7 @@
     background-color: pvar(--mainColorLightest);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
     color: pvar(--mainColor);
     background-color: pvar(--inputBorderColor);
@@ -183,8 +181,7 @@
 
   @include button-focus($grey-button-outline-color);
 
-  &[disabled],
-  .disabled {
+  &[disabled] {
     cursor: default;
   }
 
@@ -202,14 +199,12 @@
   &:hover,
   &:active,
   &:focus,
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     color: pvar(--greyForegroundColor);
     background-color: pvar(--greySecondaryBackgroundColor);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
   }
 
@@ -230,13 +225,11 @@
   &:hover,
   &:active,
   &:focus,
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     background-color: color.adjust($color: $color, $lightness: 10%);
   }
 
-  &[disabled],
-  &.disabled {
+  &[disabled] {
     cursor: default;
   }
 
@@ -369,14 +362,6 @@
   position: relative;
   height: min-content;
 
-  &.disabled {
-    background-color: #E5E5E5;
-
-    select {
-      cursor: default;
-    }
-  }
-
   select[disabled] {
     background-color: #f9f9f9;
   }