From e71a11b4a1003552dcfb317c357ce79dd376397a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 9 Feb 2023 18:49:37 +0200 Subject: [PATCH] RED-5875: Upgrade to new Angular Material components (tooltip) --- src/assets/styles/common-tooltips.scss | 38 ++++++++++--------- src/lib/buttons/buttons.module.ts | 5 ++- .../circle-button/circle-button.component.ts | 2 +- src/lib/common-ui.module.ts | 2 +- src/lib/listing/listing.module.ts | 2 +- src/lib/shared/shared.module.ts | 2 +- src/lib/users/iqser-users.module.ts | 2 +- 7 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/assets/styles/common-tooltips.scss b/src/assets/styles/common-tooltips.scss index 1972671..555335b 100644 --- a/src/assets/styles/common-tooltips.scss +++ b/src/assets/styles/common-tooltips.scss @@ -1,29 +1,31 @@ -.mat-tooltip { - background-color: var(--iqser-accent); - border-radius: 3px !important; - padding: 10px; - margin: 12px !important; - font-size: 11px; - line-height: 14px; - color: var(--iqser-white) !important; - position: relative; - overflow: visible !important; - text-align: center; +.mdc-tooltip { + .mdc-tooltip__surface { + background-color: var(--iqser-accent); + border-radius: 3px !important; + padding: 10px; + margin: 12px !important; + font-size: 11px; + line-height: 14px; + color: var(--iqser-white) !important; + position: relative; + overflow: visible !important; + text-align: center; + } - &.multiline { + &.small .mdc-tooltip__surface { + max-width: 160px; + } + + &.multiline .mdc-tooltip__surface { white-space: pre-line; text-align: left; } - &.break-all { + &.break-all .mdc-tooltip__surface { word-break: break-all; } - &.small { - max-width: 160px; - } - - &.warn { + &.warn .mdc-tooltip__surface { background-color: var(--iqser-yellow-2); color: var(--iqser-accent) !important; } diff --git a/src/lib/buttons/buttons.module.ts b/src/lib/buttons/buttons.module.ts index 6e8bdcd..63e4a72 100644 --- a/src/lib/buttons/buttons.module.ts +++ b/src/lib/buttons/buttons.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TranslateModule } from '@ngx-translate/core'; import { ChevronButtonComponent } from './chevron-button/chevron-button.component'; import { CircleButtonComponent } from './circle-button/circle-button.component'; @@ -16,4 +16,5 @@ const components = [ChevronButtonComponent, CircleButtonComponent, IconButtonCom imports: [CommonModule, IqserIconsModule, TranslateModule, ...matModules], exports: [...components], }) -export class IqserButtonsModule {} +export class IqserButtonsModule { +} diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts index 9ec9fb8..db32517 100644 --- a/src/lib/buttons/circle-button/circle-button.component.ts +++ b/src/lib/buttons/circle-button/circle-button.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; -import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip'; +import { MatTooltip } from '@angular/material/tooltip'; import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type'; import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils'; diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index f72ac9b..e247f31 100644 --- a/src/lib/common-ui.module.ts +++ b/src/lib/common-ui.module.ts @@ -19,7 +19,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'; import { ConfirmationDialogComponent } from './dialog'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services'; import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; import { IqserSkeletonModule } from './skeleton/skeleton.module'; diff --git a/src/lib/listing/listing.module.ts b/src/lib/listing/listing.module.ts index 5b34f34..7b8b264 100644 --- a/src/lib/listing/listing.module.ts +++ b/src/lib/listing/listing.module.ts @@ -4,7 +4,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { TableHeaderComponent } from './table-header/table-header.component'; import { IqserFiltersModule } from '../filtering'; import { IqserInputsModule } from '../inputs'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TableColumnNameComponent } from './table-column-name/table-column-name.component'; import { ScrollButtonComponent } from './scroll-button/scroll-button.component'; import { TableComponent } from './table/table.component'; diff --git a/src/lib/shared/shared.module.ts b/src/lib/shared/shared.module.ts index 30804d1..4267ad1 100644 --- a/src/lib/shared/shared.module.ts +++ b/src/lib/shared/shared.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { LogoComponent, SideNavComponent, SmallChipComponent, StatusBarComponent } from './index'; import { CommonModule } from '@angular/common'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { IqserIconsModule } from '../icons'; const components = [SmallChipComponent, StatusBarComponent, SideNavComponent, LogoComponent]; diff --git a/src/lib/users/iqser-users.module.ts b/src/lib/users/iqser-users.module.ts index 59fc3ab..b6ccf31 100644 --- a/src/lib/users/iqser-users.module.ts +++ b/src/lib/users/iqser-users.module.ts @@ -12,7 +12,7 @@ import { IqserAuthGuard } from './guards/iqser-auth-guard.service'; import { IqserConfigService } from '../services'; import { NamePipe } from './name.pipe'; import { InitialsAvatarComponent } from './components/initials-avatar/initials-avatar.component'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +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';