Skip to content

Commit dac3bf2

Browse files
DhaaraniCITDhaaraniCIT
authored
feat: Refactor conditional styles in conguration componets to common branding styles (#1166)
* common main page padding style conversion
1 parent d6a7307 commit dac3bf2

File tree

21 files changed

+70
-41
lines changed

21 files changed

+70
-41
lines changed

‎src/app/branding/c1-style-config.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1-
import { BrandingConfiguration } from "../core/models/branding/branding-configuration.model";
2-
import config from './config.json';
3-
4-
export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
5-
61
export const c1Styles = {
72
common: {
83
configurationContents: 'tw-mx-60-px tw-shadow-shadow-level-1',
94
mainComponentPadding: 'tw-px-60-px',
10-
mainComponentShadow: 'tw-shadow-shadow-level-1'
5+
mainComponentShadow: 'tw-shadow-shadow-level-1',
6+
inputLabelTextStyle: 'tw-pt-4-px',
7+
configurationBrandingClass: 'co'
118
},
129
mapping: {
1310
mappingHeaderBoxShadow: 'tw-shadow-shadow-level-1'
11+
},
12+
configuration: {
13+
importSvgPadding: 'tw-pt-16-px',
14+
importFieldDependentField: 'tw-pr-24-px tw-pl-[58px]',
15+
importFieldDependentFieldSvg: 'tw-pt-42-px',
16+
importFieldDropDownText: '!tw-font-600 tw-text-12-px',
17+
stepHeaderH3Text: 'tw-text-18-px'
18+
},
19+
dashboard: {
20+
dashboardErrorResolveBtnText: 'p-button primary-outline'
1421
}
1522
};

‎src/app/branding/fyle-style-config.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1-
import { BrandingConfiguration } from "../core/models/branding/branding-configuration.model";
2-
import config from './config.json';
3-
4-
export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
5-
61
export const fyleStyles = {
72
common: {
83
configurationContents: 'tw-mx-120-px tw-shadow-app-card',
94
mainComponentPadding: 'tw-px-120-px',
10-
mainComponentShadow: 'tw-shadow-app-card'
5+
mainComponentShadow: 'tw-shadow-app-card',
6+
inputLabelTextStyle: 'tw-pt-8-px',
7+
configurationBrandingClass: 'fyle'
118
},
129
mapping: {
1310
mappingHeaderBoxShadow: 'tw-shadow-stats-box'
11+
},
12+
configuration: {
13+
importSvgPadding: 'tw-pt-18-px',
14+
importFieldDependentField: '',
15+
importFieldDependentFieldSvg: 'tw-pt-46-px',
16+
importFieldDropDownText: '!tw-font-400 tw-text-14-px',
17+
stepHeaderH3Text: ''
18+
},
19+
dashboard: {
20+
dashboardErrorResolveBtnText: 'p-button secondary-sm'
1421
}
1522
};

‎src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="tw-flex tw-justify-between tw-items-center">
2727
<h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">
2828
Select the accounts from {{ appName }} to import as categories in {{brandingConfig.brandName}}
29-
<p class="tw-text-text-muted" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
29+
<p class="tw-text-text-muted" [ngClass]="brandingStyle.common.inputLabelTextStyle">
3030
By default expense will be selected. Open the dropdown to select more as per your requirements.
3131
</p>
3232
</h5>

‎src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export class IntacctCompletedExportLogComponent implements OnInit {
7272

7373
readonly brandingStyle = brandingStyle;
7474

75+
7576
constructor(
7677
@Inject(FormBuilder) private formBuilder: FormBuilder,
7778
private trackingService: TrackingService,

‎src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="tw-flex tw-justify-between tw-items-center">
2727
<h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">
2828
{{brandingContent.chartOfAccountTypes}}
29-
<p class="tw-text-text-muted" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
29+
<p class="tw-text-text-muted" [ngClass]="brandingStyle.common.inputLabelTextStyle">
3030
{{brandingContent.chartOfAccountTypesSubLabel}}
3131
</p>
3232
</h5>

‎src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="tw-flex tw-justify-between tw-items-center">
2727
<h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">
2828
{{brandingContent.chartOfAccountTypes}}
29-
<p class="tw-text-text-muted" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
29+
<p class="tw-text-text-muted" [ngClass]="brandingStyle.common.inputLabelTextStyle">
3030
{{brandingContent.chartOfAccountTypesSubLabel}}
3131
</p>
3232
</h5>

‎src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ <h4 class="tw-font-500 tw-text-14-px tw-text-text-secondary" [ngClass]="isCloneS
4141
Import {{ brandingConfig.brandId === 'co' ? (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase | lowercase ) : (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase) }} from {{ uiExposedAppName }}
4242
<app-optional-field *ngIf="!isAsterikAllowed"></app-optional-field>
4343
</h4>
44-
<h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
44+
<h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="brandingStyle.common.inputLabelTextStyle">
4545
The imported {{ brandingConfig.brandId === 'co' ? (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase | lowercase) : (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase) }}
4646
<span *ngIf="brandingConfig.brandId !== 'co'">from {{ uiExposedAppName }} will be a selectable field while creating an expense.</span>
4747
<span *ngIf="brandingConfig.brandId === 'co'"> will be an available field when creating an expense.</span>
@@ -74,7 +74,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
7474
{{uiExposedAppName}} Fields should be unique
7575
</p>
7676
</div>
77-
<div [ngClass]="{'tw-pt-16-px': brandingConfig.brandId === 'co', 'tw-pt-18-px': brandingConfig.brandId !== 'co'}">
77+
<div [ngClass]="brandingStyle.configuration.importSvgPadding">
7878
<app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-self-center tw-text-border-secondary'"></app-svg-icon>
7979
</div>
8080
<div class="xl:tw-w-30-vw sm:tw-w-28-vw">
@@ -101,8 +101,8 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
101101
</div>
102102
<p-inputSwitch *ngIf="!isDestinationFixedImport" (onChange)="onSwitchChanged($event, expenseField)" [pTooltip]="isExpenseFieldDependent(expenseField.value) ? 'You cannot import dependent fields' : '' " (click)="updateDependentField(expenseField.get('source_field')?.value,expenseField.get('import_to_fyle')?.value)" formControlName="import_to_fyle" class="input-toggle-section tw-pl-4-px tw-pt-10-px"></p-inputSwitch>
103103
</div>
104-
<div class="tw-pt-26-px" [ngClass]="{'tw-pr-24-px tw-pl-[58px]': brandingConfig.brandId === 'co'}" *ngIf="brandingFeatureConfig.featureFlags.importSettings.dependentField && expenseField.get('source_field')?.value==='PROJECT' && expenseField.get('import_to_fyle')?.value && expenseField.get('destination_field')?.value === dependentDestinationValue" [formGroup]="form">
105-
<div class="tw-flex" [ngClass]="{'fyle': brandingConfig.brandId !== 'co', 'co': brandingConfig.brandId === 'co'}">
104+
<div class="tw-pt-26-px" [ngClass]="brandingStyle.configuration.importFieldDependentField" *ngIf="brandingFeatureConfig.featureFlags.importSettings.dependentField && expenseField.get('source_field')?.value==='PROJECT' && expenseField.get('import_to_fyle')?.value && expenseField.get('destination_field')?.value === dependentDestinationValue" [formGroup]="form">
105+
<div class="tw-flex" [ngClass]="brandingStyle.common.configurationBrandingClass">
106106
<label class="container tw-pl-24-px tw-text-14-px tw-text-form-label-text-color">{{helper.sentenseCaseConversion('Import Cost Code and Cost Type from ')}} {{uiExposedAppName}} as dependent fields.
107107
<a *ngIf="uiExposedAppName === AppName.SAGE300" class="tw-text-link-primary tw-w-fit tw-cursor-pointer tw-inline-flex tw-items-center"
108108
(click)="windowService.openInNewTab(dependantFieldSupportArticleLink)">
@@ -122,14 +122,14 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
122122
<app-svg-icon [isTextColorAllowed]="true" [svgSource]="'Line'" [width]="'21px'" [height]="'49px'" [styleClasses]="'tw-text-border-secondary'"></app-svg-icon>
123123
</div>
124124
<div class="tw-pl-20-px">
125-
<p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="{'!tw-font-400 tw-text-14-px': brandingConfig.brandId !== 'co', '!tw-font-600 tw-text-12-px': brandingConfig.brandId === 'co'}">{{helper.sentenseCaseConversion('Dependent Field')}}<app-mandatory-field></app-mandatory-field> </p>
125+
<p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="brandingStyle.configuration.importFieldDropDownText">{{helper.sentenseCaseConversion('Dependent Field')}}<app-mandatory-field></app-mandatory-field> </p>
126126
<input type="text" [ngClass]="[i ? 'tw-w-240-px' : 'tw-w-260-px']" class="tw-text-14-px tw-text-input-read-only-text !tw-font-500 !tw-h-38-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-input-read-only-border tw-rounded-4-px" value="{{helper.sentenseCaseConversion(dependentField.source_field)}}" disabled>
127127
</div>
128-
<div [ngClass]="{'tw-pt-46-px': brandingConfig.brandId !== 'co', 'tw-pt-42-px': brandingConfig.brandId === 'co'}">
128+
<div [ngClass]="brandingStyle.configuration.importFieldDependentFieldSvg">
129129
<app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-border-secondary'"></app-svg-icon>
130130
</div>
131131
<div>
132-
<p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="{'!tw-font-400 tw-text-14-px': brandingConfig.brandId !== 'co', '!tw-font-600 tw-text-12-px': brandingConfig.brandId === 'co'}">{{brandingConfig.brandName}} {{brandingConfig.brandId === 'co' ? 'field' : 'Field'}} <app-mandatory-field></app-mandatory-field> </p>
132+
<p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="brandingStyle.configuration.importFieldDropDownText">{{brandingConfig.brandName}} {{brandingConfig.brandId === 'co' ? 'field' : 'Field'}} <app-mandatory-field></app-mandatory-field> </p>
133133
<p-dropdown appendTo="body" class="tw-w-28-vw" [formControlName]="dependentField.formController" [options]="dependentField.options" optionLabel="attribute_type" [placeholder]="helper.sentenseCaseConversion('Select Expense Field')" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
134134
<ng-template let-option pTemplate="item">
135135
<div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}" class="tw-align-middle">
@@ -144,7 +144,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
144144
</div>
145145
<p-inputSwitch class="input-toggle-section tw-pt-24-px" formControlName="dependentFieldImportToggle"></p-inputSwitch>
146146
</div>
147-
<div *ngIf="uiExposedAppName === AppName.SAGE300" class="tw-flex tw-mt-24-px" [ngClass]="{'fyle': brandingConfig.brandId !== 'co', 'co': brandingConfig.brandId === 'co'}">
147+
<div *ngIf="uiExposedAppName === AppName.SAGE300" class="tw-flex tw-mt-24-px" [ngClass]="brandingStyle.common.configurationBrandingClass">
148148
<label class="container tw-pl-24-px tw-text-14-px tw-text-form-label-text-color">Auto-Export Commitment based on the Cost Code and Cost Category.
149149
<a class="tw-text-link-primary tw-w-fit tw-cursor-pointer tw-inline-flex tw-items-center"
150150
(click)="windowService.openInNewTab(commitmentFieldSupportArticleLink)">

‎src/app/shared/components/configuration/configuration-import-field/configuration-import-field.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
22
import { AbstractControl, FormArray, FormGroup, Validators } from '@angular/forms';
3-
import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
3+
import { brandingConfig, brandingContent, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
44
import { ImportDefaultField, ImportSettingMappingRow, ImportSettingsCustomFieldRow, ImportSettingsModel } from 'src/app/core/models/common/import-settings.model';
55
import { FyleField, IntegrationField } from 'src/app/core/models/db/mapping.model';
66
import { AppName, MappingSourceField, Sage300Field, XeroFyleField } from 'src/app/core/models/enum/enum.model';
@@ -110,6 +110,8 @@ export class ConfigurationImportFieldComponent implements OnInit {
110110

111111
readonly brandingXeroContent = brandingContent.xero.configuration.importSetting.toggleToastMessage;
112112

113+
readonly brandingStyle = brandingStyle;
114+
113115
@Output() xeroProjectMapping:EventEmitter<boolean> = new EventEmitter();
114116

115117
constructor(

‎src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</div>
66
<div>
77
<h5 class="tw-text-text-secondary tw-text-14-px !tw-font-500">{{ label }}<app-mandatory-field *ngIf="isFieldMandatory"></app-mandatory-field></h5>
8-
<h5 class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [innerHTML]="subLabel" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}"></h5>
8+
<h5 class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [innerHTML]="subLabel" [ngClass]="brandingStyle.common.inputLabelTextStyle"></h5>
99
</div>
1010
</div>
1111
<div class="tw-pl-34-px">

‎src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { TitleCasePipe } from '@angular/common';
22
import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
33
import { FormBuilder, FormGroup } from '@angular/forms';
4-
import { brandingConfig } from 'src/app/branding/branding-config';
4+
import { brandingConfig, brandingStyle } from 'src/app/branding/branding-config';
55
import { SnakeCaseToSpaceCasePipe } from 'src/app/shared/pipes/snake-case-to-space-case.pipe';
66

77
@Component({
@@ -43,6 +43,8 @@ export class ConfigurationMultiSelectComponent implements OnInit {
4343

4444
readonly brandingConfig = brandingConfig;
4545

46+
readonly brandingStyle = brandingStyle;
47+
4648
constructor(
4749
@Inject(FormBuilder) private formBuilder: FormBuilder
4850
) { }

‎src/app/shared/components/configuration/configuration-schedule-export/configuration-schedule-export.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h5 class="!tw-text-text-muted tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading
3737
<span>
3838
{{ item.label }}
3939
</span>
40-
<i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-chevron-down fyle' : 'pi pi-chevron-down co']"></i>
40+
<i class="pi pi-chevron-down" [ngClass]="brandingStyle.common.configurationBrandingClass"></i>
4141
</div>
4242
</ng-template>
4343
</p-dropdown>

‎src/app/shared/components/configuration/configuration-schedule-export/configuration-schedule-export.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, Input, OnInit } from '@angular/core';
22
import { AbstractControl, FormGroup } from '@angular/forms';
3-
import { brandingConfig } from 'src/app/branding/branding-config';
3+
import { brandingConfig, brandingStyle } from 'src/app/branding/branding-config';
44
import { AppName } from 'src/app/core/models/enum/enum.model';
55
import { QBDEmailOptions } from 'src/app/core/models/qbd/qbd-configuration/qbd-advanced-setting.model';
66

@@ -39,6 +39,8 @@ export class ConfigurationScheduleExportComponent implements OnInit {
3939

4040
readonly brandingConfig = brandingConfig;
4141

42+
readonly brandingStyle = brandingStyle;
43+
4244
constructor() { }
4345

4446
removeFilter(formField: AbstractControl) {

‎src/app/shared/components/configuration/configuration-select-field/configuration-select-field.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
<div>
99
<h5 class="tw-text-text-secondary tw-text-14-px !tw-font-500">{{ label | snakeCaseToSpaceCase}}<app-mandatory-field *ngIf="isFieldMandatory"></app-mandatory-field></h5>
10-
<h5 *ngIf="!(exportConfigurationIconPath && appName === AppName.TRAVELPERK ) && (subLabel !== undefined|| (formControllerName !== 'reimbursableExportType' && formControllerName!=='cccExportType' && formControllerName !== 'creditCardExportType'))" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4 tw-max-w-600-px tw-text-pretty" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}" [innerHTML]="subLabel"></h5>
11-
<h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerName === 'cccExportType' || formControllerName === 'creditCardExportType') && appName !== AppName.QBO && subLabel === undefined && !(formControllerName === 'cccExportType' && brandingConfig.brandId === 'co' && exportConfigurationIconPath && appName === AppName.INTACCT)" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
10+
<h5 *ngIf="!(exportConfigurationIconPath && appName === AppName.TRAVELPERK ) && (subLabel !== undefined|| (formControllerName !== 'reimbursableExportType' && formControllerName!=='cccExportType' && formControllerName !== 'creditCardExportType'))" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4 tw-max-w-600-px tw-text-pretty" [ngClass]="brandingStyle.common.inputLabelTextStyle" [innerHTML]="subLabel"></h5>
11+
<h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerName === 'cccExportType' || formControllerName === 'creditCardExportType') && appName !== AppName.QBO && subLabel === undefined && !(formControllerName === 'cccExportType' && brandingConfig.brandId === 'co' && exportConfigurationIconPath && appName === AppName.INTACCT)" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="brandingStyle.common.inputLabelTextStyle">
1212
Choose the type of transaction record that you would like to create in {{ uiExposedAppName }} while exporting expenses from {{brandingConfig.brandName}}. <span *ngIf="exportConfigurationIconPath && appName === AppName.INTACCT">Click<a (click)="showExportTable()" class="tw-cursor-pointer tw-text-link-primary"> here</a> for more details.</span>
1313
</h5>
1414
<h5 *ngIf="subLabel && (exportConfigurationIconPath && appName === AppName.TRAVELPERK)" class="!tw-text-text-muted tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading-4 tw-max-w-600-px tw-text-pretty" >{{subLabel}}<span class="tw-pl-4-px">Click<a (click)="showExportTable()" class="tw-cursor-pointer tw-text-link-primary"> here</a> for Preview</span></h5>

0 commit comments

Comments
 (0)