RED-5875: Material upgrade - buttons: icon button
This commit is contained in:
Adina Țeudan
parent
b50bd54227
commit
4714856531
@ -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);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use '../../../../assets/styles/common-buttons';
|
||||
|
||||
:host {
|
||||
@extend .user-button;
|
||||
//@extend .user-button;
|
||||
min-width: fit-content;
|
||||
|
||||
button {
|
||||
|
||||
@ -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];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user