Chneemann/dabubble
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Images were displayed black in the options menu

Browse source
This commit is contained in:
Chneemann 2024-09-15 09:56:09 +02:00
parent 5badbfac60
commit dddd2a627e
4 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/main-chat/single-chat/options-menu/options-menu.component.html
View file

@ -9,6 +9,7 @@
[imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'" [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
[btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'" [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
[imgFilter]="'none'" [imgFilter]="'none'"
[imgFilterStatic]="'none'"
[btnBgHoverColor]="'#edeefe'" [btnBgHoverColor]="'#edeefe'"
[ngClass]="{ mirror: user.id === userService.getCurrentUserId() }" [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
(click)="addReactionIcon('okay', currentChat)" (click)="addReactionIcon('okay', currentChat)"
@ -19,6 +20,7 @@
[imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'" [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
[btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'" [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
[imgFilter]="'none'" [imgFilter]="'none'"
[imgFilterStatic]="'none'"
[btnBgHoverColor]="'#edeefe'" [btnBgHoverColor]="'#edeefe'"
[ngClass]="{ mirror: user.id === userService.getCurrentUserId() }" [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
(click)="addReactionIcon('clap-hands', currentChat)" (click)="addReactionIcon('clap-hands', currentChat)"
@ -76,6 +78,7 @@
[imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'" [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
[btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'" [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
[imgFilter]="'none'" [imgFilter]="'none'"
[imgFilterStatic]="'none'"
[btnBgHoverColor]="'#edeefe'" [btnBgHoverColor]="'#edeefe'"
[ngClass]="{ mirror: user.id === userService.getCurrentUserId() }" [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
(click)="addReactionIcon('okay', currentChat)" (click)="addReactionIcon('okay', currentChat)"
@ -86,6 +89,7 @@
[imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'" [imgSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '24px' : '17px'"
[btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'" [btnSize]="viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? '36px' : '25px'"
[imgFilter]="'none'" [imgFilter]="'none'"
[imgFilterStatic]="'none'"
[btnBgHoverColor]="'#edeefe'" [btnBgHoverColor]="'#edeefe'"
[ngClass]="{ mirror: user.id === userService.getCurrentUserId() }" [ngClass]="{ mirror: user.id === userService.getCurrentUserId() }"
(click)="addReactionIcon('clap-hands', currentChat)" (click)="addReactionIcon('clap-hands', currentChat)"

3
src/app/shared/components/small-btn/small-btn.component.html
View file

@ -12,7 +12,8 @@
[ngStyle]="{ [ngStyle]="{
width: imgSize, width: imgSize,
height: imgSize, height: imgSize,
'--filter': imgFilter '--filter': imgFilter,
'--filterStatic': imgFilterStatic
}" }"
[src]="'assets/img/' + imgSrc" [src]="'assets/img/' + imgSrc"
alt="" alt=""

3
src/app/shared/components/small-btn/small-btn.component.scss
View file

@ -10,8 +10,7 @@
cursor: pointer; cursor: pointer;
transition: 0.125s ease-in-out; transition: 0.125s ease-in-out;
img { img {
filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7481%) filter: var(--filterStatic);
hue-rotate(228deg) brightness(98%) contrast(106%);
} }
&:hover { &:hover {
background-color: var(--btnBgHoverColor); background-color: var(--btnBgHoverColor);

2
src/app/shared/components/small-btn/small-btn.component.ts
View file

@ -13,6 +13,8 @@ export class SmallBtnComponent {
@Input() imgSize: string = '14px'; @Input() imgSize: string = '14px';
@Input() imgFilter: string = @Input() imgFilter: string =
'brightness(0) saturate(100%) invert(33%) sepia(23%) saturate(5211%) hue-rotate(224deg) brightness(96%) contrast(97%)'; 'brightness(0) saturate(100%) invert(33%) sepia(23%) saturate(5211%) hue-rotate(224deg) brightness(96%) contrast(97%)';
@Input() imgFilterStatic: string =
'brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7481%) hue-rotate(228deg) brightness(98%) contrast(106%)';
@Input() btnSize: string = '28px'; @Input() btnSize: string = '28px';
@Input() btnBgColor: string = ''; @Input() btnBgColor: string = '';
@Input() btnBgHoverColor: string = '#edeefe'; @Input() btnBgHoverColor: string = '#edeefe';