interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Disabled state simplification

This commit is contained in:
Chocobozzz 2024-09-19 16:01:37 +02:00
parent 15d98f4c12
commit 47071627c5
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 9 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
View File

@ -50,7 +50,7 @@
Cancel Cancel
</button> </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 }} {{ addingCommentButtonValue }}
</button> </button>
</div> </div>

2
client/src/app/shared/shared-share-modal/video-share.component.html
View File

@ -186,7 +186,7 @@
i18n-labelText labelText="Auto select subtitle" i18n-labelText labelText="Auto select subtitle"
></my-peertube-checkbox> ></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"> <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
<option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option> <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
</select> </select>

29
client/src/sass/include/_mixins.scss
View File

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