feat(styling): add edit icon when hovering editable cell with SF Theme

ghiscoding · Jun 3, 2020 · eef4403 · eef4403
1 parent 6d524f8
commit eef4403
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss
@@ -161,3 +161,17 @@ $pagination-icon-seek-end-width:        $icon-width !default;
 
 $link-color: $primary-color !default;
 @import './extra-styling';
+
+.editable-field {
+  background-color: #e3f0fb !important;
+  &:hover:after {
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="darkgray" viewBox="0 0 52 52"><path d="M9.5 33.4l8.9 8.9c.4.4 1 .4 1.4 0L42 20c.4-.4.4-1 0-1.4l-8.8-8.8c-.4-.4-1-.4-1.4 0L9.5 32.1c-.4.4-.4 1 0 1.3zM36.1 5.7c-.4.4-.4 1 0 1.4l8.8 8.8c.4.4 1 .4 1.4 0l2.5-2.5c1.6-1.5 1.6-3.9 0-5.5l-4.7-4.7c-1.6-1.6-4.1-1.6-5.7 0l-2.3 2.5zM2.1 48.2c-.2 1 .7 1.9 1.7 1.7l10.9-2.6c.4-.1.7-.3.9-.5l.2-.2c.2-.2.3-.9-.1-1.3l-9-9c-.4-.4-1.1-.3-1.3-.1l-.2.2c-.3.3-.4.6-.5.9L2.1 48.2z"></path></svg>');
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 18px;
+  }
+  &.active:hover:after {
+    content: none;
+  }
+}
diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
diff --git a/packages/web-demo-vanilla-bundle/src/examples/example03.ts b/packages/web-demo-vanilla-bundle/src/examples/example03.ts
@@ -16,6 +16,12 @@ const myCustomTitleValidator = (value, args) => {
   return { valid: true, msg: '' };
 };
 
+const customEditableInputFormatter = (row, cell, value, columnDef, dataContext, grid) => {
+  const isEditableLine = grid && grid.getOptions && grid.getOptions() && columnDef.editor;
+  value = (value === null || value === undefined) ? '' : value;
+  return isEditableLine ? { text: value, addClasses: 'editable-field', toolTip: 'Click to Edit' } : value;
+};
+
 export class Example3 {
   columnDefinitions: Column[];
   gridOptions: GridOption;
@@ -49,6 +55,7 @@ export class Example3 {
     this.columnDefinitions = [
       {
         id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string,
+        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.longText,
           required: true,
@@ -66,6 +73,7 @@ export class Example3 {
       },
       {
         id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true,
+        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.float,
           // required: true,
@@ -93,7 +101,8 @@ export class Example3 {
         sortable: true,
         filterable: true,
         // filter: { model: Filters.compoundInput },
-        formatter: Formatters.dollar,
+        // formatter: Formatters.dollar,
+        formatter: Formatters.multiple, params: { formatters: [Formatters.dollar, customEditableInputFormatter,] },
         groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollar,
         type: FieldType.number,
         grouping: {
@@ -108,6 +117,7 @@ export class Example3 {
       },
       {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number,
+        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.slider,
           minValue: 0,
@@ -130,8 +140,10 @@ export class Example3 {
       },
       {
         id: 'start', name: 'Start', field: 'start', sortable: true,
-        formatter: Formatters.dateIso, type: FieldType.date, outputType: FieldType.dateIso,
+        // formatter: Formatters.dateIso,
+        type: FieldType.date, outputType: FieldType.dateIso,
         filterable: true, filter: { model: Filters.compoundDate },
+        formatter: Formatters.multiple, params: { formatters: [Formatters.dateIso, customEditableInputFormatter,] },
         editor: { model: Editors.date },
         grouping: {
           getter: 'start',
@@ -146,7 +158,9 @@ export class Example3 {
       {
         id: 'finish', name: 'Finish', field: 'finish', sortable: true,
         editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
-        formatter: Formatters.dateIso, type: FieldType.date, outputType: FieldType.dateIso,
+        // formatter: Formatters.dateIso,
+        type: FieldType.date, outputType: FieldType.dateIso,
+        formatter: Formatters.multiple, params: { formatters: [Formatters.dateIso, customEditableInputFormatter,] },
         filterable: true, filter: { model: Filters.compoundDate },
         grouping: {
           getter: 'finish',