replace gantt icons (#426)

* replace gantt icons

* replace gantt etalons

Author: flagmanAndrew

packages/angular/src/app/components/library/task-list-gantt/task-list-gantt.component.html

@@ -27,17 +27,17 @@
   ></dxi-column>
 
   <dxo-toolbar>
-    <dxi-item name="undo"></dxi-item>
-    <dxi-item name="redo"></dxi-item>
+    <dxi-item name="undo" [options]="{ icon: 'revert' }"></dxi-item>
+    <dxi-item name="redo" [options]="{ icon: 'redo' }"></dxi-item>
     <dxi-item name="separator"></dxi-item>
-    <dxi-item name="collapseAll"></dxi-item>
-    <dxi-item name="expandAll"></dxi-item>
+    <dxi-item name="collapseAll" [options]="{ icon: 'arrowdown' }"></dxi-item>
+    <dxi-item name="expandAll" [options]="{ icon: 'arrowup' }"></dxi-item>
     <dxi-item name="separator"></dxi-item>
-    <dxi-item name="addTask"></dxi-item>
-    <dxi-item name="deleteTask"></dxi-item>
+    <dxi-item name="addTask" [options]="{ icon: 'add' }"></dxi-item>
+    <dxi-item name="deleteTask" [options]="{ icon: 'trash' }"></dxi-item>
     <dxi-item name="separator"></dxi-item>
-    <dxi-item name="zoomIn"></dxi-item>
-    <dxi-item name="zoomOut"></dxi-item>
+    <dxi-item name="zoomIn" [options]="{ icon: 'zoominoutline' }"></dxi-item>
+    <dxi-item name="zoomOut" [options]="{ icon: 'zoomoutoutline' }"></dxi-item>
   </dxo-toolbar>
 
   <dxo-validation [autoUpdateParentTasks]="true"></dxo-validation>

packages/react/src/components/library/task-list-gantt/TaskListGantt.tsx

@@ -6,6 +6,17 @@ import { PlanningProps } from '../../../types/task';
 
 import './TaskListGantt.scss';
 
+const toolbarItemOptions = {
+  undo: { icon: 'revert' },
+  redo: { icon: 'redo' },
+  collapseAll: { icon: 'arrowdown' },
+  expandAll: { icon: 'arrowup' },
+  addTask: { icon: 'add' },
+  deleteTask: { icon: 'trash' },
+  zoomIn: { icon: 'zoominoutline' },
+  zoomOut: { icon: 'zoomoutoutline' },
+};
+
 export const TaskListGantt = React.forwardRef<GanttRef, PlanningProps>(({ dataSource }, ref) => {
 /* eslint-disable  @typescript-eslint/no-explicit-any */
   return (
@@ -17,17 +28,17 @@ export const TaskListGantt = React.forwardRef<GanttRef, PlanningProps>(({ dataSo
         <Column dataField='dueDate' caption='Due Date' dataType='date' />
 
         <Toolbar>
-          <Item name='undo' />
-          <Item name='redo' />
+          <Item name='undo' options={toolbarItemOptions.undo} />
+          <Item name='redo' options={toolbarItemOptions.redo} />
           <Item name={'separator' as any} />
-          <Item name='collapseAll' />
-          <Item name='expandAll' />
+          <Item name='collapseAll' options={toolbarItemOptions.collapseAll} />
+          <Item name='expandAll' options={toolbarItemOptions.expandAll} />
           <Item name={'separator' as any} />
-          <Item name='addTask' />
-          <Item name='deleteTask' />
+          <Item name='addTask' options={toolbarItemOptions.addTask} />
+          <Item name='deleteTask' options={toolbarItemOptions.deleteTask} />
           <Item name={'separator' as any} />
-          <Item name='zoomIn' />
-          <Item name='zoomOut' />
+          <Item name='zoomIn' options={toolbarItemOptions.zoomIn} />
+          <Item name='zoomOut' options={toolbarItemOptions.zoomOut} />
         </Toolbar>
 
         <Validation autoUpdateParentTasks />

packages/testing/tests/etalons/planning-task-gantt-embed=false-material.dark-1280.png

@@ -32,17 +32,33 @@
     />
 
     <dx-gantt-toolbar>
-      <dx-item name="undo" />
-      <dx-item name="redo" />
+      <dx-item name="undo"
+        :options="toolbarItemOptions.undo"
+      />
+      <dx-item name="redo"
+        :options="toolbarItemOptions.redo"
+      />
       <dx-item name="separator" />
-      <dx-item name="collapseAll" />
-      <dx-item name="expandAll" />
+      <dx-item name="collapseAll"
+        :options="toolbarItemOptions.collapseAll"
+      />
+      <dx-item name="expandAll"
+        :options="toolbarItemOptions.expandAll"
+      />
       <dx-item name="separator" />
-      <dx-item name="addTask" />
-      <dx-item name="deleteTask" />
+      <dx-item name="addTask"
+        :options="toolbarItemOptions.addTask"
+      />
+      <dx-item name="deleteTask"
+        :options="toolbarItemOptions.deleteTask"
+      />
       <dx-item name="separator" />
-      <dx-item name="zoomIn" />
-      <dx-item name="zoomOut" />
+      <dx-item name="zoomIn"
+        :options="toolbarItemOptions.zoomIn"
+      />
+      <dx-item name="zoomOut"
+        :options="toolbarItemOptions.zoomOut"
+      />
     </dx-gantt-toolbar>
 
     <dx-validation :auto-update-parent-tasks="true" />
@@ -95,6 +111,17 @@ const onTaskClick = (e: DxGanttTypes.TaskClickEvent) => {
   }
 };
 
+const toolbarItemOptions = {
+  undo: { icon: 'revert' },
+  redo: { icon: 'redo' },
+  collapseAll: { icon: 'arrowdown' },
+  expandAll: { icon: 'arrowup' },
+  addTask: { icon: 'add' },
+  deleteTask: { icon: 'trash' },
+  zoomIn: { icon: 'zoominoutline' },
+  zoomOut: { icon: 'zoomoutoutline' },
+};
+
 defineExpose({
   onExporting,
 });