From d292c5384803f9bfe34cfe8afe8bd21538b0d4c3 Mon Sep 17 00:00:00 2001 From: khaifan-kfan Date: Mon, 27 Mar 2023 03:43:04 -0700 Subject: [PATCH 1/2] add some icons --- .../components/editor/editor.component.html | 355 +++++++++--------- .../components/editor/editor.component.scss | 32 +- .../app/components/editor/editor.component.ts | 4 + .../option-tool/src/app/material.module.ts | 4 +- .../src/app/pages/home/home.component.scss | 3 +- .../option-tool/src/assets/svgs/female.svg | 15 + .../option-tool/src/assets/svgs/male.svg | 15 + 7 files changed, 248 insertions(+), 180 deletions(-) create mode 100644 apps/picsa-tools/option-tool/src/assets/svgs/female.svg create mode 100644 apps/picsa-tools/option-tool/src/assets/svgs/male.svg diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html index 8b8e6b42a..90cb945cc 100644 --- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html +++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html @@ -1,198 +1,199 @@ - -
-
{{warningText}}
- - - - Practice -
-
Enter the practice for this option
-
-
- - -
-
-
- +
+
{{warningText}}
+ + + + Practice +
+
Enter the practice for this option
+
+
+ +
- - - -
-
Who does the practice?
-
-
-
Female
-
Male
+
+ +
-
{{gender.length>1 ? gender.join(" and "): gender[0]}}
-
-
- - + + + +
+
Who does the practice?
+
+
+
Female
+
Male + +
+
{{gender.length>1 ? gender.join(" and "): gender[0]}}
+
+
+ +
- +
+ - -
-
Benefits and who?
-
-
-
-
- -
Female
-
Male
- + +
+
Benefits and who?
+
+
+
+
+ +
Female +
+
Male
+
Delete delete
+
+
+
- -
-
-
- - -
-
- +
+ + +
+
+ - -
-
Performence in high, mid and low RF (rainfall)?
-
-
-
-
High RF
- -
-
-
Mid RF
- -
-
-
Low RF
- -
-
+ +
+
Performence in high, mid and low RF (rainfall)?
+
+ water_drop +
+
+
High RF
+
-
- - +
+
Mid RF
+
-
- - - -
-
Investment in terms of money and time?
-
-
-
-
Money
- +
+
Low RF
+ +
+
-
-
Time
- +
+ +
-
-
-
- - -
-
- +
+ - -
-
Time to start benefiting
-
-
- - + +
+
Investment in terms of money and time?
+
+
+
+
Money attach_money
+ +
+
+
Time access_time
+ +
+
+
+
+ +
- -
-
- -
-
- + - + +
+
Time to start benefiting
+
-
-
Risk of practice disadvantage
-
-
- - +
+ + +
+ +
+
+ +
-
-
- - - - + + + + +
+
Risk of practice (disadvantage)
+
+
+ + +
+ +
+
+ + + + +
-
- - - -
+ + + +
\ No newline at end of file diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss index 90bdd2add..5f4fd5a75 100644 --- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss +++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss @@ -14,6 +14,7 @@ .dialog-content { + padding-bottom: 2rem; .saveButtonPosition { position: absolute; left: 20px; @@ -39,6 +40,10 @@ align-items: center; justify-content: center; flex-direction: column; + // .rain-icon{ + // font-size: 50px; + // color: black; + // } .form-group { // width: 500px; @@ -55,9 +60,33 @@ input.form-control { font-size: 16px; outline-color: #8a2644; - padding: 10px; + padding: 5px; width: 90%; } + textarea.form-control { + font-size: 16px; + outline-color: #8a2644; + padding: 5px; + white-space: pre-wrap; + word-wrap: break-word; + vertical-align: top; + } + .delete-button{ + color: red; + background-color: white; + padding: 3px; + height: 6rem; + width: 4rem; + font-weight: 700; + display: flex; + border-radius: 5px; + gap: 5px; + flex-direction: column; + align-items: center; + justify-content: center; + border: 1px solid red; + } + .ButtonSection { width: 15rem; @@ -82,6 +111,7 @@ display: flex; border-radius: 5px; margin: 2px; + flex-direction: column; align-items: center; justify-content: center; text-align: center; diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts index 271b740a6..98c43d819 100644 --- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts +++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts @@ -30,6 +30,10 @@ export class EditorComponent implements OnInit { isLinear = false; editMode= false editIndex:number; + // images + femaleIcon = `assets/svgs/female.svg` + maleIcon = `assets/svgs/male.svg` + // deleteIcon = `assets/svgs/delete-icon.svg` @ViewChild(MatStepper) stepper: MatStepper; diff --git a/apps/picsa-tools/option-tool/src/app/material.module.ts b/apps/picsa-tools/option-tool/src/app/material.module.ts index 891d292a2..91a4b3bd8 100644 --- a/apps/picsa-tools/option-tool/src/app/material.module.ts +++ b/apps/picsa-tools/option-tool/src/app/material.module.ts @@ -2,18 +2,20 @@ import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; import { MatStepperModule } from '@angular/material/stepper'; import { MatTableModule } from '@angular/material/table'; + const COMPONENTS = [ MatButtonModule, MatDialogModule, + MatIconModule, MatStepperModule, MatTableModule, ]; - // use custom module to make it easier to control what is available through app @NgModule({ imports: COMPONENTS, diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss index 379ae5998..ec7260397 100644 --- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss +++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss @@ -12,6 +12,7 @@ th { .container { position: relative; height: 100vh; + overflow: auto; background-color: #fff; width: 100%; z-index: 20; @@ -20,7 +21,7 @@ th { padding-top: 2rem; top: 0; right: 0; - + } .buttonposition{ position: absolute; diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/female.svg b/apps/picsa-tools/option-tool/src/assets/svgs/female.svg new file mode 100644 index 000000000..bef2cf140 --- /dev/null +++ b/apps/picsa-tools/option-tool/src/assets/svgs/female.svg @@ -0,0 +1,15 @@ + + + + + + \ No newline at end of file diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/male.svg b/apps/picsa-tools/option-tool/src/assets/svgs/male.svg new file mode 100644 index 000000000..600b74741 --- /dev/null +++ b/apps/picsa-tools/option-tool/src/assets/svgs/male.svg @@ -0,0 +1,15 @@ + + + + + + \ No newline at end of file From a713808dc5eb23544f9f960361d3f9d325fb8dad Mon Sep 17 00:00:00 2001 From: khaifan-kfan Date: Sun, 9 Apr 2023 11:46:20 -0700 Subject: [PATCH 2/2] work on feed back --- .../option-tool/src/app/app.component.ts | 26 +++++++++++++++++++ .../option-tool/src/app/app.module.ts | 6 ++++- .../components/editor/editor.component.html | 21 ++++++++++----- .../app/components/editor/editor.component.ts | 4 --- .../option-tool/src/app/material.module.ts | 3 --- 5 files changed, 46 insertions(+), 14 deletions(-) diff --git a/apps/picsa-tools/option-tool/src/app/app.component.ts b/apps/picsa-tools/option-tool/src/app/app.component.ts index 658534a69..11615477f 100644 --- a/apps/picsa-tools/option-tool/src/app/app.component.ts +++ b/apps/picsa-tools/option-tool/src/app/app.component.ts @@ -1,4 +1,7 @@ import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { MatIconRegistry } from '@angular/material/icon'; + @Component({ selector: 'option-root', @@ -7,4 +10,27 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'picsa-tools-option-tool'; + + constructor( + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer + ) { + this.registerIcons(); + } + // register custom icons from the assets/svgs folder for access within the app + // icons can be accessed in mat-icon as svgIcon='station_data_${key}' + registerIcons() { + const icons = { + female: 'female', + male: 'male' + }; + for (const [key, value] of Object.entries(icons)) { + const iconName = `picsa_options_${key}`; + const iconUrl = this.domSanitizer.bypassSecurityTrustResourceUrl( + `assets/svgs/${value}.svg` + ); + this.matIconRegistry.addSvgIcon(iconName, iconUrl); + } + } + } diff --git a/apps/picsa-tools/option-tool/src/app/app.module.ts b/apps/picsa-tools/option-tool/src/app/app.module.ts index 1c83591fc..88595a87f 100644 --- a/apps/picsa-tools/option-tool/src/app/app.module.ts +++ b/apps/picsa-tools/option-tool/src/app/app.module.ts @@ -6,12 +6,16 @@ import { BrowserModule } from '@angular/platform-browser'; import { EditorComponent } from './components/editor/editor.component'; import { FormsModule } from '@angular/forms'; import { HomeComponent } from './pages/home/home.component'; +import { HttpClientModule } from '@angular/common/http'; + import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { OptionMaterialModule } from './material.module'; import { ReactiveFormsModule} from '@angular/forms'; + + @NgModule({ declarations: [AppComponent, HomeComponent, EditorComponent], - imports: [BrowserModule, OptionMaterialModule, FormsModule, ReactiveFormsModule,BrowserAnimationsModule,NoopAnimationsModule], + imports: [BrowserModule, OptionMaterialModule, FormsModule, HttpClientModule, ReactiveFormsModule,BrowserAnimationsModule,NoopAnimationsModule], providers: [], bootstrap: [AppComponent], }) diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html index 90cb945cc..c78426605 100644 --- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html +++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html @@ -26,11 +26,15 @@
Female
+ [ngStyle]="{'background-color': gender.includes('female') ? 'pink' : 'lightgray'}">Female + + +
Male - + +
{{gender.length>1 ? gender.join(" and "): gender[0]}}
@@ -54,11 +58,16 @@
Female -
+ + +
Male
+ [ngStyle]="{'background-color': benefit.beneficiary.includes('male') ? 'pink' : 'lightgray'}">Male + + +
Delete delete
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts index 98c43d819..271b740a6 100644 --- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts +++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts @@ -30,10 +30,6 @@ export class EditorComponent implements OnInit { isLinear = false; editMode= false editIndex:number; - // images - femaleIcon = `assets/svgs/female.svg` - maleIcon = `assets/svgs/male.svg` - // deleteIcon = `assets/svgs/delete-icon.svg` @ViewChild(MatStepper) stepper: MatStepper; diff --git a/apps/picsa-tools/option-tool/src/app/material.module.ts b/apps/picsa-tools/option-tool/src/app/material.module.ts index 91a4b3bd8..76d490855 100644 --- a/apps/picsa-tools/option-tool/src/app/material.module.ts +++ b/apps/picsa-tools/option-tool/src/app/material.module.ts @@ -6,9 +6,6 @@ import { MatIconModule } from '@angular/material/icon'; import { MatStepperModule } from '@angular/material/stepper'; import { MatTableModule } from '@angular/material/table'; - - - const COMPONENTS = [ MatButtonModule, MatDialogModule,