From 471485653184e6489f112d11b0792c3a10643c65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 30 May 2023 21:47:41 +0300 Subject: [PATCH] RED-5875: Material upgrade - buttons: icon button --- src/assets/styles/common-buttons.scss | 267 ++++++++++-------- .../chevron-button.component.ts | 4 +- .../circle-button/circle-button.component.ts | 2 +- .../icon-button/icon-button.component.scss | 20 -- .../icon-button/icon-button.component.ts | 7 +- src/lib/buttons/types/icon-button.type.ts | 2 - src/lib/common-ui.module.ts | 2 +- .../user-button/user-button.component.scss | 2 +- src/lib/users/iqser-users.module.ts | 2 +- 9 files changed, 159 insertions(+), 149 deletions(-) delete mode 100644 src/lib/buttons/icon-button/icon-button.component.scss diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss index c818f03..cc5311b 100644 --- a/src/assets/styles/common-buttons.scss +++ b/src/assets/styles/common-buttons.scss @@ -1,129 +1,162 @@ -.mat-button, -.mat-flat-button { - border-radius: var(--iqser-button-radius) !important; - font-size: var(--iqser-button-font-size) !important; - display: flex !important; - align-items: center; +iqser-icon-button .mdc-button.mat-mdc-button { + --mdc-text-button-container-shape: var(--iqser-button-radius); + --mdc-text-button-label-text-color: var(--iqser-accent); - &:not(.text) { - height: var(--iqser-button-height); + &[disabled] { + --mdc-text-button-disabled-label-text-color: rgba(var(--iqser-accent-rgb), 0.3); } - .mat-button-wrapper { - display: flex; - align-items: center; - line-height: var(--iqser-font-size); - transition: opacity 0.2s; - width: 100%; - - > *:not(:last-child) { - margin-right: 6px; - } - - > span { - margin: auto; - } - } -} - -.mat-button, -.mat-icon-button, -.mat-flat-button { - &.mat-button-disabled .mat-button-wrapper { - color: var(--iqser-text); - opacity: 0.3; - } -} - -.mat-flat-button.mat-primary, -.mat-button.primary { + height: var(--iqser-button-height); padding: 0 14px; - transition: background-color 0.2s, color 0.2s; - background-color: var(--iqser-primary); + &.has-icon { + padding: 0 14px 0 10px; - &.mat-button-disabled { - background-color: var(--iqser-primary); - - .mat-button-wrapper { - color: var(--iqser-white); - opacity: 0.5; + > .mat-icon { + margin-right: 6px; + width: 14px; } } - &:not(.mat-button-disabled):hover { - background-color: var(--iqser-primary-2); + &.primary { + --mdc-text-button-label-text-color: var(--iqser-white); + --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.5); + + background: var(--iqser-primary); + font-weight: 500; + } + + &.dark { + background: var(--iqser-btn-bg); } } -iqser-icon-button, -iqser-chevron-button, -.user-button, -iqser-circle-button { - position: relative; - display: flex; - - button { - font-weight: 400 !important; - transition: background-color 0.2s; - - &.overlay { - background: rgba(var(--iqser-primary-rgb), 0.1); - } - - &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):not(.text):hover { - background-color: var(--iqser-btn-bg); - } - - &.text { - color: var(--iqser-primary); - font-weight: 500 !important; - - &:hover { - background-color: rgba(var(--iqser-primary-rgb), 0.05); - } - } - - &.primary { - font-weight: 500 !important; - background-color: var(--iqser-primary); - color: var(--iqser-white); - - &:hover { - background-color: var(--iqser-primary-2); - } - } - - &.dark-bg:hover { - background-color: var(--iqser-btn-bg-hover); - } - - &.help:hover { - background-color: var(--iqser-helpmode-primary); - color: var(--iqser-grey-1); - } - } - - .dot { - top: 1px; - left: 1px; - } -} - -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); - } - } - } -} +//.mat-button, +//.mat-flat-button { +// border-radius: var(--iqser-button-radius) !important; +// font-size: var(--iqser-button-font-size) !important; +// display: flex !important; +// align-items: center; +// +// &:not(.text) { +// height: var(--iqser-button-height); +// } +// +// .mat-button-wrapper { +// display: flex; +// align-items: center; +// line-height: var(--iqser-font-size); +// transition: opacity 0.2s; +// width: 100%; +// +// > *:not(:last-child) { +// margin-right: 6px; +// } +// +// > span { +// margin: auto; +// } +// } +//} +// +//.mat-button, +//.mat-icon-button, +//.mat-flat-button { +// &.mat-button-disabled .mat-button-wrapper { +// color: var(--iqser-text); +// opacity: 0.3; +// } +//} +// +//.mat-flat-button.mat-primary, +//.mat-button.primary { +// padding: 0 14px; +// transition: background-color 0.2s, color 0.2s; +// +// background-color: var(--iqser-primary); +// +// &.mat-button-disabled { +// background-color: var(--iqser-primary); +// +// .mat-button-wrapper { +// color: var(--iqser-white); +// opacity: 0.5; +// } +// } +// +// &:not(.mat-button-disabled):hover { +// background-color: var(--iqser-primary-2); +// } +//} +// +//iqser-icon-button, +//iqser-chevron-button, +//.user-button, +//iqser-circle-button { +// position: relative; +// display: flex; +// +// button { +// font-weight: 400 !important; +// transition: background-color 0.2s; +// +// &.overlay { +// background: rgba(var(--iqser-primary-rgb), 0.1); +// } +// +// &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):not(.text):hover { +// background-color: var(--iqser-btn-bg); +// } +// +// &.text { +// color: var(--iqser-primary); +// font-weight: 500 !important; +// +// &:hover { +// background-color: rgba(var(--iqser-primary-rgb), 0.05); +// } +// } +// +// &.primary { +// font-weight: 500 !important; +// background-color: var(--iqser-primary); +// color: var(--iqser-white); +// +// &:hover { +// background-color: var(--iqser-primary-2); +// } +// } +// +// &.dark-bg:hover { +// background-color: var(--iqser-btn-bg-hover); +// } +// +// &.help:hover { +// background-color: var(--iqser-helpmode-primary); +// color: var(--iqser-grey-1); +// } +// } +// +// .dot { +// top: 1px; +// left: 1px; +// } +//} +// +//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); +// } +// } +// } +//} diff --git a/src/lib/buttons/chevron-button/chevron-button.component.ts b/src/lib/buttons/chevron-button/chevron-button.component.ts index 7b531c1..4f6f789 100644 --- a/src/lib/buttons/chevron-button/chevron-button.component.ts +++ b/src/lib/buttons/chevron-button/chevron-button.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { randomString } from '../../utils'; import { NgIf } from '@angular/common'; -import { MatLegacyButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; @Component({ @@ -10,7 +10,7 @@ import { MatIconModule } from '@angular/material/icon'; styleUrls: ['./chevron-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [NgIf, MatIconModule, MatLegacyButtonModule], + imports: [NgIf, MatIconModule, MatButtonModule], }) export class ChevronButtonComponent { @Input() label!: string; diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts index e38a2b4..1835231 100644 --- a/src/lib/buttons/circle-button/circle-button.component.ts +++ b/src/lib/buttons/circle-button/circle-button.component.ts @@ -3,7 +3,7 @@ import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip'; import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type'; import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils'; import { NgIf } from '@angular/common'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { StopPropagationDirective } from '../../directives'; import { RouterLink } from '@angular/router'; diff --git a/src/lib/buttons/icon-button/icon-button.component.scss b/src/lib/buttons/icon-button/icon-button.component.scss deleted file mode 100644 index b56be2c..0000000 --- a/src/lib/buttons/icon-button/icon-button.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -button { - padding: 0 14px; - width: 100%; - - &.has-icon { - padding: 0 14px 0 10px; - } - - &.dark { - background-color: var(--iqser-btn-bg); - - &:not(.mat-button-disabled):hover { - background-color: var(--iqser-btn-bg-hover); - } - } - - mat-icon { - width: 14px; - } -} diff --git a/src/lib/buttons/icon-button/icon-button.component.ts b/src/lib/buttons/icon-button/icon-button.component.ts index d5b5f8c..d7d91e3 100644 --- a/src/lib/buttons/icon-button/icon-button.component.ts +++ b/src/lib/buttons/icon-button/icon-button.component.ts @@ -2,21 +2,20 @@ import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output import { IconButtonType, IconButtonTypes } from '../types/icon-button.type'; import { randomString } from '../../utils'; import { NgClass, NgIf } from '@angular/common'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { StopPropagationDirective } from '../../directives'; import { RouterLink } from '@angular/router'; @Component({ - selector: 'iqser-icon-button [label]', + selector: 'iqser-icon-button', templateUrl: './icon-button.component.html', - styleUrls: ['./icon-button.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatButtonModule, NgIf, MatIconModule, StopPropagationDirective], }) export class IconButtonComponent { - @Input() label!: string; + @Input({ required: true }) label!: string; @Input() buttonId = `${randomString()}-icon-button`; @Input() icon?: string; @Input() showDot = false; diff --git a/src/lib/buttons/types/icon-button.type.ts b/src/lib/buttons/types/icon-button.type.ts index b0f99e6..fb3b62d 100644 --- a/src/lib/buttons/types/icon-button.type.ts +++ b/src/lib/buttons/types/icon-button.type.ts @@ -2,8 +2,6 @@ export const IconButtonTypes = { default: 'default', dark: 'dark', primary: 'primary', - help: 'help', - text: 'text', } as const; export type IconButtonType = keyof typeof IconButtonTypes; diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index d137d22..06ca6b9 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -5,7 +5,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils'; import { ConnectionStatusComponent, FullPageErrorComponent } from './error'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatTooltipModule } from '@angular/material/tooltip'; diff --git a/src/lib/users/components/user-button/user-button.component.scss b/src/lib/users/components/user-button/user-button.component.scss index ea7a257..0f6e0d0 100644 --- a/src/lib/users/components/user-button/user-button.component.scss +++ b/src/lib/users/components/user-button/user-button.component.scss @@ -1,7 +1,7 @@ @use '../../../../assets/styles/common-buttons'; :host { - @extend .user-button; + //@extend .user-button; min-width: fit-content; button { diff --git a/src/lib/users/iqser-users.module.ts b/src/lib/users/iqser-users.module.ts index 32ac1c2..513c54f 100644 --- a/src/lib/users/iqser-users.module.ts +++ b/src/lib/users/iqser-users.module.ts @@ -15,7 +15,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { CommonModule } from '@angular/common'; import { UserButtonComponent } from './components/user-button/user-button.component'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { TranslateModule } from '@ngx-translate/core'; const components = [NamePipe, InitialsAvatarComponent, UserButtonComponent];