Skip to content
Permalink
Browse files

feat: replaced brand color input logic

  • Loading branch information...
jew-er committed Nov 1, 2019
1 parent ae8d91d commit 07112621e771c3af57eef48129723ee8e096b4f3
@@ -85,28 +85,24 @@
</div>
</div>
<div class="row">
<div class="col-4">
<div class="col-6">
<div class="form-group">
<label class="label">Brand Color</label>
<input
fullWidth
id="brandColorInput"
type="text"
nbInput
formControlName="brandColor"
placeholder="Enter HEX code(1afb21)"
maxlength="6"
placeholder="Add Color"
[colorPicker]="form.get('brandColor').value"
[style.background]="form.get('brandColor').value"
[value]="form.get('brandColor').value"
(colorPickerChange)="
form.get('brandColor').setValue($event)
"
/>
</div>
</div>
<div class="col-2">
<div
class="brand-color-preview"
[ngStyle]="{ background: '#' + getHex() || '#fff' }"
>
<span>#{{ getHex() }}</span>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="label">
@@ -1,17 +0,0 @@
.brand-color-preview {
width: 80px;
border: 2px solid black;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(26px);
padding: 0.4375rem 1.125rem;
transition: 0.5s;
span {
color: white;
mix-blend-mode: difference;
transition: 0.5s;
user-select: none;
}
}
@@ -53,10 +53,6 @@ export class EditOrganizationMainComponent implements OnInit {
return this.form.getRawValue();
}

getHex() {
return this.form.value.brandColor;
}

getTimeWithOffset(zone: string) {
let cutZone = zone;
if (zone.includes('/')) {
@@ -71,19 +67,12 @@ export class EditOrganizationMainComponent implements OnInit {
dateFormatPreview(format: string) {
return moment().format(format);
}
forbiddenColorValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const forbidden = !nameRe.test(control.value);
return forbidden ? { badColor: { value: control.value } } : null;
};
}

ngOnInit(): void {
this._initializedForm();
}

private _initializedForm() {
const HEX_REGEX = /^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$/;
this.form = this.fb.group({
currency: [this.organization.currency, Validators.required],
name: [this.organization.name, Validators.required],
@@ -92,10 +81,7 @@ export class EditOrganizationMainComponent implements OnInit {
Validators.required
],
defaultAlignmentType: [this.organization.defaultAlignmentType],
brandColor: [
this.organization.brandColor,
this.forbiddenColorValidator(HEX_REGEX)
],
brandColor: [this.organization.brandColor],
dateFormat: [this.organization.dateFormat],
timeZone: [this.organization.timeZone]
});
@@ -38,6 +38,7 @@ import { EditOrganizationProjectsComponent } from './edit-organization-projects/
import { NgSelectModule } from '@ng-select/ng-select';
import { EditOrganizationTeamsComponent } from './edit-organization-teams/edit-organization-teams.component';
import { EmployeeSelectorsModule } from 'apps/gauzy/src/app/@theme/components/header/selectors/employee/employee.module';
import { ColorPickerModule } from 'ngx-color-picker';

@NgModule({
imports: [
@@ -50,6 +51,7 @@ import { EmployeeSelectorsModule } from 'apps/gauzy/src/app/@theme/components/he
NbIconModule,
NbActionsModule,
NgSelectModule,
ColorPickerModule,
NbDialogModule.forChild(),
TranslateModule.forChild({
loader: {
@@ -213,7 +213,7 @@ export class EditOrganizationComponent implements OnInit, OnDestroy {
}

private async _loadOrgRecurringExpense() {
if (this.selectedOrg) {
if (this.selectedOrg && this.selectedDate) {
this.selectedOrgRecurringExpense = (await this.organizationRecurringExpenseService.getAll(
[],
{
@@ -169,6 +169,7 @@
"ng2-completer": "^3.0.2",
"ng2-file-upload": "^1.3.0",
"ng2-smart-table": "^1.5.0",
"ngx-color-picker": "^8.2.0",
"ngx-echarts": "^4.2.1",
"ngx-filepond": "^5.0.1",
"ngx-page-scroll": "^6.0.2",

0 comments on commit 0711262

Please sign in to comment.
You can’t perform that action at this time.