Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(NodeIconChooser): Move KI icon chooser option to top #1474

Merged
merged 2 commits into from
Oct 18, 2023
Merged

refactor(NodeIconChooser): Move KI icon chooser option to top #1474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62bb178
style(NodeIconChooser): Move KI chooser to top
hirokiterashima Oct 18, 2023
f88f612
Change node icon choosers to MatChipListbox
breity Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 43 additions & 37 deletions src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<h2 mat-dialog-title class="mat-dialog-title--icons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<h2
mat-dialog-title
class="mat-dialog-title--icons"
fxLayout="row"
fxLayoutAlign="start center"
fxLayoutGap="8px"
>
<div
*ngIf="newNodeIcon.type === 'font'"
style="background-color: {{ newNodeIcon.color }}"
Expand All @@ -21,41 +27,8 @@ <h2 mat-dialog-title class="mat-dialog-title--icons" fxLayout="row" fxLayoutAlig
<span i18n>Choose an Icon</span>
</h2>
<mat-dialog-content class="dialog-content-scroll">
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
<div>
<h3 i18n>Icon:</h3>
<mat-chip-set aria-label="Select an icon" i18n-aria-label>
<mat-chip-option
*ngFor="let fontName of fontNames"
class="icon-choice"
color="null"
[value]="fontName"
[ariaLabel]="fontName"
[selected]="newNodeIcon.type === 'font' && fontName === newNodeIcon.fontName"
(selectionChange)="chooseFontName($event)"
>
<mat-icon>{{ fontName }}</mat-icon>
</mat-chip-option>
</mat-chip-set>
</div>
<div fxFlex.gt-sm="18">
<h3 i18n>Color:</h3>
<mat-chip-set aria-label="Select a color" i18n-aria-label>
<mat-chip-option
*ngFor="let color of colors"
class="color-choice icon-choice"
[value]="color"
[ariaLabel]="color"
[selected]="newNodeIcon.type === 'font' && color === newNodeIcon.color"
(selectionChange)="chooseFontColor($event)"
style="background-color: {{ color }}"
></mat-chip-option>
</mat-chip-set>
</div>
</div>
<mat-divider></mat-divider>
<h3 fxLayout="row" fxLayoutAlign="start center">
<span i18n>Or use a Knowledge Integration (KI) icon:</span>
<span i18n>Use a Knowledge Integration (KI) icon:</span>
<a
mat-icon-button
class="info"
Expand All @@ -68,7 +41,7 @@ <h3 fxLayout="row" fxLayoutAlign="start center">
<mat-icon>info</mat-icon>
</a>
</h3>
<mat-chip-set aria-label="Select a KI icon" i18n-aria-label>
<mat-chip-listbox aria-label="Select a KI icon" i18n-aria-label>
<mat-chip-option
*ngFor="let kiIcon of kiIcons"
class="ki-choice"
Expand All @@ -84,7 +57,40 @@ <h3 fxLayout="row" fxLayoutAlign="start center">
</mat-chip-avatar>
{{ kiIcon.imgLabel }}
</mat-chip-option>
</mat-chip-set>
</mat-chip-listbox>
<mat-divider></mat-divider>
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
<div>
<h3 i18n>Or choose your own icon:</h3>
<mat-chip-listbox aria-label="Select an icon" i18n-aria-label>
<mat-chip-option
*ngFor="let fontName of fontNames"
class="icon-choice"
color="null"
[value]="fontName"
[ariaLabel]="fontName"
[selected]="newNodeIcon.type === 'font' && fontName === newNodeIcon.fontName"
(selectionChange)="chooseFontName($event)"
>
<mat-icon>{{ fontName }}</mat-icon>
</mat-chip-option>
</mat-chip-listbox>
</div>
<div fxFlex.gt-sm="18">
<h3 i18n>Color:</h3>
<mat-chip-listbox aria-label="Select a color" i18n-aria-label>
<mat-chip-option
*ngFor="let color of colors"
class="color-choice icon-choice"
[value]="color"
[ariaLabel]="color"
[selected]="newNodeIcon.type === 'font' && color === newNodeIcon.color"
(selectionChange)="chooseFontColor($event)"
style="background-color: {{ color }}"
></mat-chip-option>
</mat-chip-listbox>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close i18n>Cancel</button>
Expand Down
52 changes: 26 additions & 26 deletions src/messages.xlf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">90</context>
<context context-type="linenumber">96</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html</context>
Expand Down Expand Up @@ -14707,74 +14707,74 @@ Are you sure you want to proceed?</source>
<source>Selected icon</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">6</context>
<context context-type="linenumber">12</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">18</context>
<context context-type="linenumber">24</context>
</context-group>
</trans-unit>
<trans-unit id="62e1beba9923edcf84ff44961835d1c0679b6593" datatype="html">
<source>Choose an Icon</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">21</context>
<context context-type="linenumber">27</context>
</context-group>
</trans-unit>
<trans-unit id="a6e387339a2abd61abf2b56ad6cfd20ddd021d63" datatype="html">
<source>Icon:</source>
<trans-unit id="492dbd75dbf7cefd08b36b9be596ff3b12db7b73" datatype="html">
<source>Use a Knowledge Integration (KI) icon:</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">26</context>
<context context-type="linenumber">31</context>
</context-group>
</trans-unit>
<trans-unit id="f1993aed50b7b852dbfdf30251700358629cdfba" datatype="html">
<source>Select an icon</source>
<trans-unit id="c80f9758aa49779d616f8d163a2ac735e8bb0485" datatype="html">
<source>More about WISE and Knowledge Integration</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">27</context>
<context context-type="linenumber">35</context>
</context-group>
</trans-unit>
<trans-unit id="a9a04bdddc742bd46da1688298bed9eb88150ecc" datatype="html">
<source>Color:</source>
<trans-unit id="037789bb1dae9f2a1b3d8c9c318172a030258d22" datatype="html">
<source>Select a KI icon</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">42</context>
<context context-type="linenumber">44</context>
</context-group>
</trans-unit>
<trans-unit id="bbd4bc95804c43a418dd9000b245630328f1a6ba" datatype="html">
<source>Select a color</source>
<trans-unit id="eed128396fa73b3e2084c8efed6cc095cc2faa9d" datatype="html">
<source>Or choose your own icon:</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">43</context>
<context context-type="linenumber">64</context>
</context-group>
</trans-unit>
<trans-unit id="e1a39ccab5eb7939e4d5f1dd1e4b605459067649" datatype="html">
<source>Or use a Knowledge Integration (KI) icon:</source>
<trans-unit id="f1993aed50b7b852dbfdf30251700358629cdfba" datatype="html">
<source>Select an icon</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">58</context>
<context context-type="linenumber">65</context>
</context-group>
</trans-unit>
<trans-unit id="c80f9758aa49779d616f8d163a2ac735e8bb0485" datatype="html">
<source>More about WISE and Knowledge Integration</source>
<trans-unit id="a9a04bdddc742bd46da1688298bed9eb88150ecc" datatype="html">
<source>Color:</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">62</context>
<context context-type="linenumber">80</context>
</context-group>
</trans-unit>
<trans-unit id="037789bb1dae9f2a1b3d8c9c318172a030258d22" datatype="html">
<source>Select a KI icon</source>
<trans-unit id="bbd4bc95804c43a418dd9000b245630328f1a6ba" datatype="html">
<source>Select a color</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">71</context>
<context context-type="linenumber">81</context>
</context-group>
</trans-unit>
<trans-unit id="52c9a103b812f258bcddc3d90a6e3f46871d25fe" datatype="html">
<source>Save</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.html</context>
<context context-type="linenumber">91</context>
<context context-type="linenumber">97</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/draw/edit-draw-connected-components/edit-draw-connected-components.component.html</context>
Expand Down
Loading