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

Merge branch 'de-ce-protected-branch' into 'master'

Browse Source 
update styles to fix material changes

See merge request fforesight/shared-ui-libraries/common-ui!2
This commit is contained in:
Dan Percic 2023-08-28 09:24:58 +02:00
commit c9abddb301
5 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/common-inputs.scss
View File

@ -114,7 +114,11 @@ iqser-dynamic-input {
}
.mdc-text-field--outlined {
--mdc-outlined-text-field-focus-outline-width: 1px;
--mdc-shape-small: 8px; // border-radius
--mdc-outlined-text-field-container-shape: 8px; // border-radius
border-bottom-left-radius: var(--mdc-shape-small);
border-bottom-right-radius: var(--mdc-shape-small);
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {

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

@ -3,7 +3,7 @@
.mat-mdc-select {
padding: 0 11px;
box-sizing: border-box;
line-height: var(--iqser-inputs-height);
--mat-select-trigger-text-line-height: 36px;
}
.mat-mdc-select-panel {

58
src/assets/styles/common-toggle.scss
View File

@ -1,38 +1,40 @@
.mat-mdc-slide-toggle {
--mdc-switch-handle-elevation: none;
.mdc-switch {
--mdc-switch-handle-elevation: none;
--mdc-switch-selected-track-color: var(--iqser-primary);
--mdc-switch-selected-hover-track-color: var(--iqser-primary);
--mdc-switch-selected-pressed-track-color: var(--iqser-primary);
--mdc-switch-selected-focus-track-color: var(--iqser-primary);
--mdc-switch-disabled-selected-track-color: var(--iqser-primary);
--mdc-switch-selected-track-color: var(--iqser-primary);
--mdc-switch-selected-hover-track-color: var(--iqser-primary);
--mdc-switch-selected-pressed-track-color: var(--iqser-primary);
--mdc-switch-selected-focus-track-color: var(--iqser-primary);
--mdc-switch-disabled-selected-track-color: var(--iqser-primary);
--mdc-switch-unselected-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg);
--mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg);
--mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg);
--mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg);
--mdc-switch-selected-handle-color: var(--iqser-background);
--mdc-switch-selected-pressed-handle-color: var(--iqser-background);
--mdc-switch-selected-hover-handle-color: var(--iqser-background);
--mdc-switch-selected-focus-handle-color: var(--iqser-background);
--mdc-switch-disabled-selected-handle-color: var(--iqser-background);
--mdc-switch-selected-handle-color: var(--iqser-background);
--mdc-switch-selected-pressed-handle-color: var(--iqser-background);
--mdc-switch-selected-hover-handle-color: var(--iqser-background);
--mdc-switch-selected-focus-handle-color: var(--iqser-background);
--mdc-switch-disabled-selected-handle-color: var(--iqser-background);
--mdc-switch-unselected-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background);
--mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background);
--mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background);
--mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background);
--mdc-switch-disabled-track-opacity: 0.38;
--mdc-switch-disabled-track-opacity: 0.38;
--mdc-switch-track-width: 30px;
--mdc-switch-track-height: 16px;
--mdc-switch-track-shape: 8px;
--mdc-switch-handle-width: 12px;
--mdc-switch-handle-height: 12px;
--mdc-switch-handle-shape: 6px;
--mdc-switch-track-width: 30px;
--mdc-switch-track-height: 16px;
--mdc-switch-track-shape: 8px;
--mdc-switch-handle-width: 12px;
--mdc-switch-handle-height: 12px;
--mdc-switch-handle-shape: 6px;
}
.mdc-form-field > label {
margin-left: 8px;

23
src/lib/dialog/iqser-dialog.service.ts
View File

@ -1,9 +1,9 @@
import { ComponentType } from '@angular/cdk/portal';
import { inject, Injectable } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { ComponentType } from '@angular/cdk/portal';
import { firstValueFrom } from 'rxjs';
import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive';
import { defaultDialogConfig, largeDialogConfig } from './dialog.service';
import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive';
@Injectable({
providedIn: 'root',
@ -12,32 +12,31 @@ export class IqserDialog {
protected readonly _dialog = inject(MatDialog);
open<
Component extends IqserDialogComponent<Component, unknown, unknown>,
Data extends Component[DATA_TYPE],
Return extends Component[RETURN_TYPE],
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
const ref = this._dialog.open<Component, Data, Return>(dialog, config);
return {
...ref,
result() {
console.log('result');
return firstValueFrom(ref.afterClosed());
},
} as MatDialogRef<Component, Return> & { result(): Promise<Return> };
}
openLarge<
Component extends IqserDialogComponent<Component, unknown, unknown>,
Data extends Component[DATA_TYPE],
Return extends Component[RETURN_TYPE],
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
return this.open<Component, Data, Return>(dialog, { ...largeDialogConfig, ...config });
}
openDefault<
Component extends IqserDialogComponent<Component, unknown, unknown>,
Data extends Component[DATA_TYPE],
Return extends Component[RETURN_TYPE],
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
return this.open<Component, Data, Return>(dialog, { ...defaultDialogConfig, ...config });
}

8
src/lib/inputs/editable-input/editable-input.component.ts
View File

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { CircleButtonComponent, CircleButtonType } from '../../buttons';
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CircleButtonComponent, CircleButtonType, CircleButtonTypes } from '../../buttons';
@Component({
selector: 'iqser-editable-input [value]',
@ -22,9 +22,9 @@ export class EditableInputComponent implements OnChanges {
@Input() class?: string;
@Input() showPreview = true;
@Input() canEdit = true;
@Input() buttonsType?: CircleButtonType;
@Input() buttonsType: CircleButtonType = CircleButtonTypes.default;
@Output() readonly save = new EventEmitter<string>();
parentDimensions: { width: number; height: number };
parentDimensions?: { width: number; height: number };
newValue = '';
private _editing = false;