Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-5875: Material upgrade - buttons: circle button

Browse Source
This commit is contained in:
Adina Țeudan 2023-05-30 23:27:31 +03:00
parent 4714856531
commit a71a09463f
7 changed files with 88 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/assets/styles/common-buttons.scss
View File

@ -31,6 +31,81 @@ iqser-icon-button .mdc-button.mat-mdc-button {
}
}
iqser-circle-button .mat-mdc-icon-button {
display: flex;
align-items: center;
justify-content: center;
.mat-mdc-button-touch-target {
width: var(--circle-button-size);
height: var(--circle-button-size);
}
&.mat-mdc-button-base {
height: var(--circle-button-size);
width: var(--circle-button-size);
padding: 0;
}
svg {
vertical-align: bottom;
width: inherit;
height: inherit;
}
&.overlay {
background: rgba(var(--iqser-primary-rgb), 0.1);
}
&.primary {
--mdc-icon-button-icon-color: var(--iqser-white);
&[disabled] {
--mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5);
}
background: var(--iqser-primary);
}
&.warn:not([disabled]) {
--mdc-icon-button-icon-color: var(--iqser-accent);
background-color: var(--iqser-warn);
}
mat-icon {
width: var(--circle-button-icon-size);
height: var(--circle-button-icon-size);
line-height: var(--circle-button-icon-size);
svg {
line-height: var(--circle-button-icon-size);
}
}
}
iqser-chevron-button,
iqser-circle-button,
iqser-icon-button {
.dot {
top: 1px;
left: 1px;
}
&[aria-expanded='true'] {
.mat-mdc-button-base {
background: rgba(var(--iqser-primary-rgb), 0.1);
&.primary {
background: var(--iqser-primary-2);
}
&.grey-selected {
background-color: var(--iqser-btn-bg);
}
}
}
}
//.mat-button,
//.mat-flat-button {
// border-radius: var(--iqser-button-radius) !important;
@ -143,20 +218,3 @@ iqser-icon-button .mdc-button.mat-mdc-button {
// }
//}
//
//iqser-chevron-button,
//iqser-circle-button,
//iqser-icon-button {
// &[aria-expanded='true'] {
// button {
// background: rgba(var(--iqser-primary-rgb), 0.1);
//
// &.primary {
// background: var(--iqser-primary-2);
// }
//
// &.grey-selected {
// background-color: var(--iqser-btn-bg);
// }
// }
// }
//}

2
src/assets/styles/common-select.scss
View File

@ -29,7 +29,7 @@
}
&.mdc-list-item--selected {
background-color: rgba(var(--iqser-primary-rgb), 0.2);
background-color: rgba(var(--iqser-primary-rgb), 0.2) !important;
color: var(--iqser-primary);
}

2
src/lib/buttons/circle-button/circle-button.component.html
View File

@ -1,4 +1,4 @@
<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip">
<div [matTooltipClass]="tooltipClass || ''" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip || ''">
<button
(click)="performAction($event)"
[class.dark-bg]="type === _circleButtonTypes.dark"

48
src/lib/buttons/circle-button/circle-button.component.scss
View File

@ -1,47 +1,9 @@
:host {
height: var(--size);
width: var(--size);
align-items: center;
display: block;
button {
height: var(--size);
width: var(--size);
line-height: var(--size);
mat-icon {
width: var(--iconSize);
height: var(--iconSize);
line-height: var(--iconSize);
margin: 0;
svg {
line-height: var(--iconSize);
}
}
&.mat-button-disabled {
cursor: not-allowed;
&:not(.primary):not(.warn):not(.dark-bg):hover {
background-color: var(--iqser-btn-bg);
}
}
&.primary.mat-button-disabled {
color: #ffffff80;
}
&.warn:not([disabled]) {
background-color: var(--iqser-warn);
color: var(--iqser-accent);
&:hover {
background-color: var(--iqser-warn);
}
}
}
&.primary mat-icon {
color: var(--iqser-primary);
> div {
width: var(--circle-button-size);
height: var(--circle-button-size);
position: relative;
}
}

4
src/lib/buttons/circle-button/circle-button.component.ts
View File

@ -38,8 +38,8 @@ export class CircleButtonComponent implements OnInit {
readonly #elementRef = inject(ElementRef<HTMLElement>);
ngOnInit(): void {
this.#elementRef.nativeElement.style.setProperty('--size', `${this.size}px`);
this.#elementRef.nativeElement.style.setProperty('--iconSize', `${this.iconSize}px`);
this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size}px`);
this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize}px`);
}
performAction($event: MouseEvent) {

2
src/lib/help-mode/help-mode/help-mode.component.html
View File

@ -11,7 +11,7 @@
(click)="helpModeService.deactivateHelpMode()"
[iconSize]="10"
[size]="20"
[type]="'help'"
[type]="circleButtonTypes.help"
class="ml-8"
icon="iqser:close"
></iqser-circle-button>

3
src/lib/help-mode/help-mode/help-mode.component.ts
View File

@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core'
import { HelpModeService } from '../help-mode.service';
import { IqserEventTarget } from '../../utils';
import { MatDialog } from '@angular/material/dialog';
import { CircleButtonTypes } from '../../buttons';
@Component({
selector: 'iqser-help-mode',
@ -10,6 +11,8 @@ import { MatDialog } from '@angular/material/dialog';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelpModeComponent {
readonly circleButtonTypes = CircleButtonTypes;
constructor(private readonly _dialog: MatDialog, readonly helpModeService: HelpModeService) {}
@HostListener('document:keydown.escape', ['$event'])