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

refactor: optimize FormBtnComponent for better performance and usability

Browse source
This commit is contained in:
Chneemann 2025-04-13 12:30:01 +02:00
parent 4941465594
commit d18e8e5e11
4 changed files with 72 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/app/shared/components/buttons/form-btn/form-btn.component.html
View file

@ -1,16 +1,11 @@
<div class="input-container"> <div class="input-container">
@if (class == "btn-google") {
<div class="google-image"></div>
}
<input <input
class="{{ class }}" class="btn"
type="{{ type }}" [class]="class"
value="{{ value }}" [type]="type"
[value]="value"
[disabled]="disabled" [disabled]="disabled"
[style.padding-right.px]=" [style.padding-right.px]="inputPaddingRight"
img == 'check' && !disabled ? '44' : img !== '' && !disabled ? '36' : ''
"
[style.padding-left.px]="class == 'btn-google' ? '52' : ''"
/> />
<div <div
class="background-image" class="background-image"
@ -18,7 +13,7 @@
'--filter': imgFilter, '--filter': imgFilter,
'background-image': disabled 'background-image': disabled
? 'none' ? 'none'
: 'url(./../../../../../assets/img/' + img + '.svg)', : 'url(./assets/img/' + img + '.svg)'
}" }"
></div> ></div>
</div> </div>

211
src/app/shared/components/buttons/form-btn/form-btn.component.scss
View file

@ -1,217 +1,122 @@
.btn-submit { .btn {
width: fit-content; width: fit-content;
padding: 12px; padding: 12px;
margin: 12px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--black) !important;
background-color: var(--light-gray);
font-size: 23px; font-size: 23px;
font-weight: 400; font-weight: 400;
transition: 125ms ease-in-out; transition: 125ms ease-in-out;
cursor: pointer; cursor: pointer;
background-color: var(--white);
border: 1px solid var(--black);
&:hover:not(:disabled) { &:hover:not(:disabled) {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
background-color: var(--light-blue) !important;
border: 1px solid var(--light-blue) !important;
cursor: pointer;
} }
&:disabled {
background-color: var(--light-gray);
cursor: default;
}
}
.btn-submit {
background-color: var(--light-gray);
border: 1px solid var(--black);
&:not(:disabled) { &:not(:disabled) {
background-color: var(--very-dark-blue) !important; background-color: var(--very-dark-blue);
color: var(--white); color: var(--white);
} }
&:hover {
cursor: default; &:hover:not(:disabled) {
background-color: var(--light-blue);
border-color: var(--light-blue);
} }
} }
.btn-clear, .btn-clear,
.btn-cancel { .btn-cancel {
width: fit-content;
padding: 12px;
margin: 12px;
border-radius: 10px;
color: var(--black);
background-color: var(--white);
border: 1px solid var(--black);
font-size: 23px;
font-weight: 400;
transition: 125ms ease-in-out;
cursor: pointer;
&:hover { &:hover {
color: var(--light-blue); color: var(--light-blue);
border-color: var(--light-blue); border-color: var(--light-blue);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
} }
} }
.btn-delete { .btn-delete {
width: fit-content;
padding: 12px;
margin: 12px;
border-radius: 10px;
color: var(--red); color: var(--red);
background-color: var(--white); border-color: var(--red);
border: 1px solid var(--red);
font-size: 23px;
font-weight: 400;
transition: 125ms ease-in-out;
cursor: pointer;
&:hover { &:hover {
color: var(--white);
background-color: var(--red); background-color: var(--red);
color: var(--white);
border-color: var(--black); border-color: var(--black);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
} }
} }
.btn-login { .btn-login {
width: fit-content;
padding: 12px 18px; padding: 12px 18px;
margin: 12px;
border-radius: 10px;
border: 1px solid var(--black) !important;
background-color: var(--light-gray);
font-size: 23px;
font-weight: 700; font-weight: 700;
transition: 125ms ease-in-out;
cursor: pointer;
&:hover:not(:disabled) {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
background-color: var(--light-blue) !important;
border: 1px solid var(--light-blue) !important;
cursor: pointer;
}
&:not(:disabled) { &:not(:disabled) {
background-color: var(--very-dark-blue) !important; background-color: var(--very-dark-blue);
color: var(--white); color: var(--white);
} }
&:hover {
cursor: default; &:hover:not(:disabled) {
background-color: var(--light-blue);
border-color: var(--light-blue);
} }
} }
.btn-guest-login { .btn-guest-login {
width: fit-content;
padding: 12px 18px; padding: 12px 18px;
margin: 12px;
border-radius: 10px;
background-color: var(--light-gray);
border: 1px solid var(--black);
font-size: 23px;
font-weight: 700; font-weight: 700;
transition: 125ms ease-in-out;
cursor: pointer;
&:hover:not(:disabled) {
color: var(--light-blue);
border-color: var(--light-blue);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
&:not(:disabled) {
background-color: var(--white) !important;
color: var(--black);
}
&:hover {
cursor: default;
}
}
.btn-google { &:not(:disabled) {
width: fit-content; background-color: var(--white);
padding: 12px 18px; color: var(--black);
margin: 12px; }
border-radius: 10px;
background-color: var(--light-gray);
border: 1px solid var(--black);
font-size: 23px;
font-weight: 700;
transition: 125ms ease-in-out;
cursor: pointer;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: var(--light-blue); color: var(--light-blue);
border-color: var(--light-blue); border-color: var(--light-blue);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
&:not(:disabled) {
background-color: var(--white) !important;
color: var(--black);
}
&:hover {
cursor: default;
} }
} }
.input-container { .input-container {
position: relative; position: relative;
display: inline-block; display: inline-block;
} margin: 12px;
.input-container .background-image { .background-image {
position: absolute; position: absolute;
top: 0; top: 0;
right: 12px; right: 12px;
bottom: 0; bottom: 0;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
background-size: auto 20%; background-size: auto 30%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 12px center; background-position: right center;
transition: filter 125ms ease-in-out; transition: filter 125ms ease-in-out;
}
.input-container .google-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 12px;
pointer-events: none;
background-image: url(./../../../../../assets/img/login/google.svg);
background-size: auto 38px;
background-repeat: no-repeat;
background-position: left 12px center;
transition: filter 125ms ease-in-out;
}
.input-container:hover .background-image {
filter: var(--filter);
}
/*------------- RESPONSIVE -------------*/
@media screen and (max-width: 650px) {
.input-container .google-image {
background-size: auto 24px;
background-position: left 15px center;
} }
.btn-login, &:hover .background-image {
.btn-guest-login, filter: var(--filter, none);
.btn-google {
font-size: 21px;
font-weight: 700;
} }
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
.btn-login, .input-container {
.btn-guest-login,
.btn-google {
padding: 8px 12px;
margin: 6px; margin: 6px;
font-size: 18px;
font-weight: 700;
}
}
@media screen and (max-width: 400px) { .background-image {
.btn-submit, right: 15px;
.btn-clear, }
.btn-delete { }
padding: 8px;
margin: 6px; .btn {
font-size: 18px; padding: 9px;
font-weight: 400; font-size: 19px;
} }
} }

5
src/app/shared/components/buttons/form-btn/form-btn.component.ts
View file

@ -16,4 +16,9 @@ export class FormBtnComponent {
@Input() disabled: boolean = false; @Input() disabled: boolean = false;
@Input() imgFilter: string = @Input() imgFilter: string =
'brightness(0) saturate(100%) invert(57%) sepia(44%) saturate(848%) hue-rotate(155deg) brightness(95%) contrast(86%)'; 'brightness(0) saturate(100%) invert(57%) sepia(44%) saturate(848%) hue-rotate(155deg) brightness(95%) contrast(86%)';
get inputPaddingRight(): string {
if (this.disabled) return '';
return this.img === 'check' ? '44' : this.img ? '36' : '';
}
} }

6
src/app/shared/components/overlay/contact-overlay/contact-overlay.component.scss
View file

@ -90,7 +90,7 @@
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.dialog { .overlay {
width: 560px; width: 560px;
position: relative; position: relative;
} }
@ -123,7 +123,7 @@
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.dialog { .overlay {
width: 380px; width: 380px;
} }
@ -170,7 +170,7 @@
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.dialog { .overlay {
width: 300px; width: 300px;
} }