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

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

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

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

@ -10,8 +10,7 @@
cursor: pointer;
transition: 0.125s ease-in-out;
img {
filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7481%)
hue-rotate(228deg) brightness(98%) contrast(106%);
filter: var(--filterStatic);
}
&:hover {
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() imgFilter: string =
'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() btnBgColor: string = '';
@Input() btnBgHoverColor: string = '#edeefe';