chore: add icons

telerik · Sep 20, 2024 · 6f25fca · 6f25fca
1 parent f38f91b
commit 6f25fca
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html b/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
@@ -1,7 +1,11 @@
 <kendo-combobox
     [data]="disabilitiesData"
     textField="text"
-    valueField="text" class="k-mb-4 !k-w-full" placeholder="Write or select type of disability"></kendo-combobox>
+    valueField="text" class="k-mb-4 !k-w-full" placeholder="Write or select type of disability">
+    <ng-template kendoSuffixTemplate>
+        <button kendoButton fillMode="flat" [svgIcon]="microphoneIcon"></button>
+    </ng-template>
+</kendo-combobox>
 
 <kendo-expansionpanel title="Accessibility settings" [(expanded)]="settingsExpanded">
     <form class="k-form k-form-md">
@@ -12,30 +16,30 @@
         <kendo-formfield>
             <kendo-label text="Color theme:"></kendo-label>
             <kendo-buttongroup selection="single">
-                <kendo-button size="large" (click)="settingChange('colorTheme', 'contrast')" [selected]="colorTheme === 'contrast'">Contrast</kendo-button>
-                <kendo-button size="large" (click)="settingChange('colorTheme', 'dark')" [selected]="colorTheme === 'dark'">Dark</kendo-button>
+                <button kendoButton size="large" [svgIcon]="contrastIcon" (click)="settingChange('colorTheme', 'contrast')" [selected]="colorTheme === 'contrast'">Contrast</button>
+                <button kendoButton size="large" [svgIcon]="darkModeIcon" (click)="settingChange('colorTheme', 'dark')" [selected]="colorTheme === 'dark'">Dark</button>
             </kendo-buttongroup>
         </kendo-formfield>
 
         <kendo-formfield>
             <kendo-label text="Font:"></kendo-label>
             <kendo-buttongroup selection="single">
-                <kendo-button size="large" (click)="settingChange('font', 'legible')" [selected]="font === 'legible'">Legible Font</kendo-button>
-                <kendo-button size="large" (click)="settingChange('font', 'dyslexia')" [selected]="font === 'dyslexia'">Dyslexia Font</kendo-button>
+                <button kendoButton size="large" [svgIcon]="fontIcon" (click)="settingChange('font', 'legible')" [selected]="font === 'legible'">Legible Font</button>
+                <button kendoButton size="large" (click)="settingChange('font', 'dyslexia')" [selected]="font === 'dyslexia'">Dyslexia Font</button>
             </kendo-buttongroup>
         </kendo-formfield>
 
         <kendo-formfield>
             <kendo-label text="Common:"></kendo-label>
-            <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('underlineLinks', $event)" [selected]="underlineLinks">Underiline Links</kendo-button>
+            <button kendoButton size="large" [svgIcon]="underlineIcon" [toggleable]="true" (selectedChange)="settingChange('underlineLinks', $event)" [selected]="underlineLinks">Underiline Links</button>
         </kendo-formfield>
 
         <kendo-formfield>
-            <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('pauseAnimations', $event)" [selected]="pauseAnimations">Pause Animation</kendo-button>
+            <button kendoButton size="large" [svgIcon]="pauseIcon" [toggleable]="true" (selectedChange)="settingChange('pauseAnimations', $event)" [selected]="pauseAnimations">Pause Animation</button>
         </kendo-formfield>
 
         <kendo-formfield>
-            <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('lgSizeWidgets', $event)" [selected]="lgSizeWidgets">Large Size Widgets</kendo-button>
+            <button kendoButton size="large" [svgIcon]="resizeIcon" [toggleable]="true" (selectedChange)="settingChange('lgSizeWidgets', $event)" [selected]="lgSizeWidgets">Large Size Widgets</button>
         </kendo-formfield>
 
         <kendo-formfield>
@@ -47,5 +51,9 @@
             <kendo-label text="Letter Spacing:"></kendo-label>
             <kendo-numeric-textbox-buttons (valueChange)="settingChange('letterSpacing', $event)" [value]="letterSpacing"></kendo-numeric-textbox-buttons>
         </kendo-formfield>
+
+        <kendo-formfield>
+            <button kendoButton themeColor="primary" size="large" [svgIcon]="resetIcon">Reset All Settings</button>
+        </kendo-formfield>
     </form>
 </kendo-expansionpanel>
diff --git a/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts b/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { SettingsService } from './settings.service';
 import { groupBy } from '@progress/kendo-data-query';
+import { SVGIcon, arrowRotateCcwIcon, fontFamilyIcon, imageResizeIcon, pauseSmIcon, underlineIcon } from '@progress/kendo-svg-icons';
+import { contrastIcon, darkModeIcon, microphoneIcon } from './svg-icons';
 
 @Component({
     selector: 'app-settings-list-component',
@@ -70,6 +72,15 @@ export class SettingsListComponent {
             text: 'ADHD'
         }], [{field: 'type'}]);
 
+    public resetIcon: SVGIcon = arrowRotateCcwIcon;
+    public darkModeIcon: SVGIcon = darkModeIcon;
+    public microphoneIcon: SVGIcon = microphoneIcon;
+    public contrastIcon: SVGIcon = contrastIcon;
+    public fontIcon: SVGIcon = fontFamilyIcon;
+    public underlineIcon: SVGIcon = underlineIcon;
+    public pauseIcon: SVGIcon = pauseSmIcon;
+    public resizeIcon: SVGIcon = imageResizeIcon;
+
     constructor(private settingsService: SettingsService) { }
 
     public settingChange(setting: string, value: any): void {

diff --git a/examples-standalone/coffee-warehouse/src/app/components/settings-list/svg-icons.ts b/examples-standalone/coffee-warehouse/src/app/components/settings-list/svg-icons.ts
@@ -0,0 +1,17 @@
+export const darkModeIcon = {
+    name: "darkModeIcon",
+    content: `<path d="M8 2C6.81331 2 5.65328 2.35189 4.66658 3.01118C3.67989 3.67047 2.91085 4.60754 2.45673 5.7039C2.0026 6.80026 1.88378 8.00666 2.11529 9.17054C2.3468 10.3344 2.91825 11.4035 3.75736 12.2426C4.59648 13.0818 5.66558 13.6532 6.82946 13.8847C7.99335 14.1162 9.19975 13.9974 10.2961 13.5433C11.3925 13.0892 12.3295 12.3201 12.9888 11.3334C13.6481 10.3467 14 9.18669 14 8C14 7.69333 13.9733 7.38667 13.9333 7.09333C13.6002 7.5604 13.16 7.9409 12.6497 8.20303C12.1394 8.46515 11.5737 8.60127 11 8.6C10.2368 8.60002 9.49333 8.35762 8.8768 7.90777C8.26027 7.45792 7.80257 6.82387 7.56969 6.09707C7.33682 5.37027 7.34082 4.58829 7.58111 3.8639C7.82141 3.13952 8.28557 2.51019 8.90667 2.06667C8.61334 2.02667 8.30667 2 8 2Z" />`,
+    viewBox: "0 0 16 16"
+};
+
+export const microphoneIcon = {
+    name: "microphoneIcon",
+    content: `<path d="M12 14C13.66 14 14.99 12.66 14.99 11L15 5C15 3.34 13.66 2 12 2C10.34 2 9 3.34 9 5V11C9 12.66 10.34 14 12 14ZM17.3 11C17.3 14 14.76 16.1 12 16.1C9.24 16.1 6.7 14 6.7 11H5C5 14.41 7.72 17.23 11 17.72V21H13V17.72C16.28 17.24 19 14.42 19 11H17.3Z"/>`,
+    viewBox: "0 0 24 24"
+};
+
+export const contrastIcon = {
+    name: "contrastIcon",
+    content: `<path d="M8.50001 14.6666C12.18 14.6666 15.1667 11.68 15.1667 7.99998C15.1667 4.31998 12.18 1.33331 8.50001 1.33331C4.82001 1.33331 1.83334 4.31998 1.83334 7.99998C1.83334 11.68 4.82001 14.6666 8.50001 14.6666ZM9.16668 2.71331C11.7933 3.03998 13.8333 5.27998 13.8333 7.99998C13.8333 10.72 11.8 12.96 9.16668 13.2866V2.71331Z"/>`,
+    viewBox: "0 0 16 16"
+};