add inverted btn color tenant option, fix mat checkbox text color, remove some unused styles

This commit is contained in:
mchouliara 2024-09-24 11:47:46 +03:00
parent 453cde406e
commit 37fcd1edc5
29 changed files with 82 additions and 225 deletions

View File

@ -75,6 +75,7 @@ export interface CssColorsTenantConfigurationPersist{
secondaryColor: string;
primaryText?: string;
secondaryText?: string;
invertedBtnColor?: string;
}
export interface DefaultUserLocaleTenantConfigurationPersist{

View File

@ -89,6 +89,7 @@ export class TenantHandlingService extends BaseService {
if (cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, cssColors.secondaryColor);
if (localStorage.getItem('primaryText')) document.documentElement.style.setProperty(`--primary-text`, localStorage.getItem('primaryText'));
if (localStorage.getItem('secondaryText')) document.documentElement.style.setProperty(`--secondary-text`, localStorage.getItem('secondaryText'));
if (localStorage.getItem('invertedBtnColor')) document.documentElement.style.setProperty(`--inverted-btn-color`, localStorage.getItem('invertedBtnColor'));
}
}
}

View File

@ -33,20 +33,6 @@
background-color: #b0b0b0;
}
.finalize-btn {
border-radius: 30px;
border: 1px solid var(--primary-color);
background: var(--primary-text);
padding-left: 2em;
padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
color: var(--primary-color);
&:disabled{
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
}
.dlt-section-btn {
margin: 0;

View File

@ -13,31 +13,6 @@ min-width: 101px;
font-weight: 500;
}
.next-btn {
background: var(--primary-text) 0% 0% no-repeat padding-box;
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
min-width: 101px;
height: 43px;
color: var(--primary-color);
font-weight: 500;
}
.next-btn[disabled] {
width: 100px;
height: 43px;
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.next-btn:not([disabled]):hover {
background-color: var(--primary-color);
color: var(--primary-text);
}
//ngx dropzone
.drop-file {
background-color: #fafafa;

View File

@ -82,6 +82,19 @@
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-HINT' | translate">{{'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-COLOR' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('invertedBtnColorInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('invertedBtnColor')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('invertedBtnColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('invertedBtnColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('invertedBtnColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('invertedBtnColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-12">

View File

@ -144,6 +144,16 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('invertedBtnColor').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('invertedBtnColorInput').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('invertedBtnColorInput').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('invertedBtnColor').setValue(color, {
emitEvent: false,
});
});
}
getItem(successFunction: (item: TenantConfiguration) => void) {
@ -203,6 +213,7 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
const formData = this.formService.getValue(this.formGroup.value) as TenantConfigurationPersist;
localStorage.setItem('primaryText', formData?.cssColors?.primaryText);
localStorage.setItem('secondaryText', formData?.cssColors?.secondaryText);
localStorage.setItem('invertedBtnColor', formData?.cssColors?.invertedBtnColor);
this.tenantConfigurationService.persist(formData)
.pipe(takeUntil(this._destroyed)).subscribe(

View File

@ -59,6 +59,7 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
secondaryColor: string;
primaryText: string;
secondaryText: string;
invertedBtnColor: string;
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
@ -72,8 +73,9 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
this.primaryColor2 = item.primaryColor2;
this.primaryColor3 = item.primaryColor3;
this.secondaryColor = item.secondaryColor;
this.primaryText = localStorage.getItem('primaryText') ?? '#ffffff'
this.secondaryText = localStorage.getItem('secondaryText') ?? '#000000'
this.primaryText = localStorage.getItem('primaryText') ?? '#ffffff';
this.secondaryText = localStorage.getItem('secondaryText') ?? '#000000';
this.invertedBtnColor = localStorage.getItem('invertedBtnColor') ?? '#ffffff';
}
return this;
}
@ -98,12 +100,14 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
primaryColor3: [{ value: this.primaryColor3, disabled: disabled }, context.getValidation('primaryColor3').validators],
secondaryColor: [{ value: this.secondaryColor, disabled: disabled }, context.getValidation('secondaryColor').validators],
secondaryText: [{ value: this.secondaryText, disabled: disabled }, context.getValidation('secondaryText').validators],
invertedBtnColor: [{ value: this.invertedBtnColor, disabled: disabled }, context.getValidation('invertedBtnColor').validators],
primaryColorInput: [{ value: this.primaryColor, disabled: disabled}, context.getValidation('primaryColorInput').validators ],
primaryColor2Input: [{ value: this.primaryColor2, disabled: disabled}, context.getValidation('primaryColor2Input').validators ],
primaryColor3Input: [{ value: this.primaryColor3, disabled: disabled}, context.getValidation('primaryColor3Input').validators ],
secondaryColorInput: [{ value: this.secondaryColor, disabled: disabled}, context.getValidation('secondaryColorInput').validators ],
secondaryTextInput: [{ value: this.secondaryText, disabled: disabled}, context.getValidation('secondaryTextInput').validators ],
primaryTextInput: [{ value: this.primaryText, disabled: disabled}, context.getValidation('primaryTextInput').validators ],
invertedBtnColorInput: [{ value: this.invertedBtnColor, disabled: disabled}, context.getValidation('invertedBtnColorInput').validators ],
},
{ updateOn: "change" });
@ -125,12 +129,14 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
baseValidationArray.push({ key: 'secondaryColor', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}secondaryColor`)] });
baseValidationArray.push({ key: 'primaryText', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColorText`)] });
baseValidationArray.push({ key: 'secondaryText', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}secondaryColorText`)] });
baseValidationArray.push({ key: 'invertedBtnColor', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}invertedBtnColor`)] });
baseValidationArray.push({ key: 'primaryColorInput', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'primaryColor2Input', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'primaryColor3Input', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'secondaryColorInput', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'primaryTextInput', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'secondaryTextInput', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'invertedBtnColorInput', validators: [validColorValidator()] });
baseContext.validation = baseValidationArray;
return baseContext;

View File

@ -27,30 +27,6 @@ img {
width: 100%;
}
.send-btn {
background: var(--primary-text) 0% 0% no-repeat padding-box;
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
min-width: 101px;
height: 43px;
color: var(--primary-color);
font-weight: 500;
}
.send-btn-disabled {
min-width: 6.64em;
height: 2.93em;
background: #FFFFFF;
border: 1px solid #B5B5B5;
border-radius: 30px;
font-weight: bold;
letter-spacing: -0.35px;
color: #B5B5B5;
margin-bottom: 0.25em;
cursor: default;
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #B5B5B5;

View File

@ -28,6 +28,6 @@
</div>
<div mat-dialog-actions class="row">
<div class="col-auto ml-auto"><button mat-button class="rounded-btn neutral" type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
<div class="col-auto"><button mat-button class="confirm-btn" type="button" [disabled]="!data.formGroup.valid" (click)="confirm()">{{ data.confirmButton }}</button></div>
<div class="col-auto"><button mat-button class="rounded-btn primary-inverted primary-inverted-hover confirm-btn" type="button" [disabled]="!data.formGroup.valid" (click)="confirm()">{{ data.confirmButton }}</button></div>
</div>
</div>

View File

@ -17,17 +17,6 @@ min-width: 101px;
}
.confirm-btn {
background: var(--primary-text) 0% 0% no-repeat padding-box;
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
min-width: 101px;
height: 43px;
color: var(--primary-color);
font-weight: 500;
}
.confirm-btn:hover {
background-color: var(--primary-color);
color: var(--primary-text);
}

View File

@ -179,7 +179,7 @@
.plan-btn-label {
margin-right: 1em;
color: #ffffff;
color: var(--primary-text);
opacity: 0.8;
text-align: left;
min-width: 0;

View File

@ -59,22 +59,6 @@
white-space: nowrap;
}
.save-btn, .plan-export-btn {
background: var(--primary-text) 0% 0% no-repeat padding-box !important;
border-radius: 30px;
opacity: 1;
width: auto;
min-width: 110px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary-color);
&:disabled {
color: #CBCBCB;
}
}
.plan-stepper {
position: fixed;
display: flex;

View File

@ -63,11 +63,6 @@
color: black;
}
.close-btn {
margin-left: auto;
cursor: pointer;
}
.descriptions span {
color: var(--primary-color-3);
}
@ -76,57 +71,3 @@
font-style: italic;
color: rgba(0, 0, 0, 0.26);
}
.save-btn {
background: var(--primary-color) 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
width: auto;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: var(--primary-text);
cursor: pointer;
}
.submit-btn {
min-width: 84px;
height: 43px;
background: var(--primary-text);
color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
}
.submit-btn[disabled] {
border: 1px solid #b5b5b5 !important;
}
.submit-btn:not([disabled]):hover {
background-color: var(--primary-color);
color: var(--primary-text);
}
.default-btn {
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
font-size: 0.87rem;
font-weight: 500;
color: var(--dark-gray);
cursor: pointer;
}
.cancel-btn {
min-width: 101px;
height: 43px;
background: #ffffff;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}

View File

@ -19,28 +19,4 @@
.template-title {
margin-left: 37px;
}
.cancel-btn {
min-width: 101px;
height: 43px;
background: #ffffff;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.add-btn {
width: 84px;
height: 43px;
background: var(--primary-text);
color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
}
.add-btn:hover {
background-color: var(--primary-color);
color: var(--primary-text);
}
}

View File

@ -470,6 +470,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -479,6 +479,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -472,7 +472,8 @@
"PRIMARY-COLOR-3": "Primary Color 3",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -473,6 +473,8 @@
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

View File

@ -44,7 +44,7 @@ a{
label{
font-size: 14px;
line-height: 1.42857;
color: $checkboxes-text-color;
color: var(--gray);
font-weight: 400;
}

View File

@ -53,7 +53,6 @@ $bmd-checkbox-animation-ripple: 500ms !default;
$bmd-checkbox-animation-check: 0.3s !default;
$bmd-checkbox-checked-color: $white !default;
$bmd-checkbox-label-padding: .3125rem !default; // 5px
$checkboxes-text-color: $mdb-input-placeholder-color !default;
$bmd-checkbox-border-size: .0625rem !default;
$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;

View File

@ -45,36 +45,6 @@
line-height: 1.9rem;
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
border-radius: 30px;
min-width: 101px;
height: 43px;
color: var(--dark-gray);
font-weight: 500;
}
.next-btn {
background: var(--primary-text) 0% 0% no-repeat padding-box;
border: 1px solid var(--primary-color);
border-radius: 30px;
opacity: 1;
min-width: 101px;
height: 43px;
color: var(--primary-color);
font-weight: 500;
}
.disabled-btn {
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
min-width: 101px;
height: 43px;
color: #b5b5b5;
font-weight: 500;
}
.error-list {
margin-bottom: 0;

View File

@ -11,6 +11,7 @@
--warning-color: #f44336;
--primary-text: #ffffff;
--secondary-text: #000000;
--inverted-btn-color: #ffffff;
--gray: #707070; //previously #848484
--light-gray: #aaaaaa;
--dark-gray: #212121;
@ -436,9 +437,8 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
color: var(--primary-text);
border: none;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
background: #CBCBCB;
color: #ffffff;
border: none;
color: var(--primary-text);
opacity: 0.7;
}
}
@ -447,23 +447,22 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
color: var(--secondary-text);
border: none;
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
background: #CBCBCB;
color: #ffffff;
border: none;
color: var(--secondary-text);
opacity: 0.7;
}
}
&.primary-inverted {
color: var(--primary-color);
border: 1px solid var(--primary-color);
background: var(--primary-text);
background: var(--inverted-btn-color);
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
border: 1px solid #CBCBCB;
color: #CBCBCB;
color: var(--primary-color);
opacity: 0.7;
}
&.primary-inverted-hover:hover {
background-color: var(--primary-color);
color: var(--primary-text);
color: var(--inverted-btn-color);
}
}
@ -651,3 +650,12 @@ ul.unstyled-list {
border-top: none !important;
border: none;
}
// .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
// background-color: var(--primary-color-3);
// }
// .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
// background-color: #b0b0b0;
// }