fix(styling): small Composite Editor fixes for Dark Mode (#1417)

ghiscoding · Mar 6, 2024 · 7e00087 · 7e00087
1 parent e830dd3
commit 7e00087
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 30 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.scss b/examples/vite-demo-vanilla-bundle/src/examples/example11.scss
@@ -4,20 +4,22 @@ $slick-autocomplete-max-height: 250px;
 // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
 
-.unsaved-editable-field {
-  background-color: #fbfdd1 !important;
-}
-.dropdown-item {
-  cursor: pointer;
-}
-.dropdown-item-disabled {
-  color: #afafaf;
-  cursor: default;
-}
-.ml-1-negative {
-  margin-left: -5px;
-}
-.action-btns {
-  display: inline-block;
-  line-height: 18px;
+.grid11 {
+  .unsaved-editable-field {
+    background-color: #fbfdd1 !important;
+  }
+  .dropdown-item {
+    cursor: pointer;
+  }
+  .dropdown-item-disabled {
+    color: #afafaf;
+    cursor: default;
+  }
+  .ml-1-negative {
+    margin-left: -5px;
+  }
+  .action-btns {
+    display: inline-block;
+    line-height: 18px;
+  }
 }
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
@@ -638,20 +638,6 @@ export default class Example12 {
     console.log('sortedSelectedIds', args.filteredIds.length, args.selectedRowIds.length);
   }
 
-  toggleGridEditReadonly() {
-    // first need undo all edits
-    this.undoAllEdits();
-
-    // then change a single grid options to make the grid non-editable (readonly)
-    this.isGridEditable = !this.isGridEditable;
-    this.sgb.gridOptions = { editable: this.isGridEditable };
-    this.gridOptions = this.sgb.gridOptions;
-    this.isCompositeDisabled = !this.isGridEditable;
-    if (!this.isGridEditable) {
-      this.isMassSelectionDisabled = true;
-    }
-  }
-
   removeUnsavedStylingFromCell(_item: any, column: Column, row: number) {
     // remove unsaved css class from that cell
     const cssStyleKey = `unsaved_highlight_${[column.id]}${row}`;
@@ -747,13 +733,28 @@ export default class Example12 {
     this.editQueue = [];
   }
 
+  toggleGridEditReadonly() {
+    // first need undo all edits
+    this.undoAllEdits();
+
+    // then change a single grid options to make the grid non-editable (readonly)
+    this.isGridEditable = !this.isGridEditable;
+    this.sgb.gridOptions = { ...this.sgb.gridOptions, editable: this.isGridEditable };
+    this.gridOptions = this.sgb.gridOptions;
+    this.isCompositeDisabled = !this.isGridEditable;
+    if (!this.isGridEditable) {
+      this.isMassSelectionDisabled = true;
+    }
+  }
+
   toggleDarkMode() {
     this._darkMode = !this._darkMode;
     if (this._darkMode) {
       document.querySelector('.demo-container')?.classList.add('dark-mode');
     } else {
       document.querySelector('.demo-container')?.classList.remove('dark-mode');
     }
+    this.sgb.gridOptions = { ...this.sgb.gridOptions, darkMode: this._darkMode };
     this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode });
   }
 

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -623,6 +623,7 @@ $slick-editor-modal-reset-btn-color:                        #333 !default;
 $slick-editor-modal-reset-btn-bg-color:                     #fff !default;
 $slick-editor-modal-slider-editor-value-height:             $slick-editor-modal-input-editor-height !default;
 $slick-editor-modal-slider-editor-value-min-height:         100% !default;
+$slick-editor-modal-text-color:                             #000 !default;
 $slick-editor-modal-title-font-color:                       #333333 !default;
 $slick-editor-modal-title-font-size:                        20px !default;
 $slick-editor-modal-title-font-weight:                      500 !default;
@@ -1093,6 +1094,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-editor-modal-title-font-color:                  var(--slick-font-color);
   --slick-editor-modal-validation-color:                  var(--slick-base-dark-invalid-color);
   --slick-editor-modal-validation-summary-color:          var(--slick-base-dark-invalid-color);
+  --slick-editor-modal-text-color:                        var(--slick-base-dark-text-color);
   --slick-large-editor-background-color:                  var(--slick-base-dark-menu-bg-color);
   --slick-large-editor-border:                            2px solid #565656;
   --slick-large-editor-text-color:                        var(--slick-base-dark-text-color);

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -178,6 +178,7 @@
     border-radius: var(--slick-editor-modal-container-radius, $slick-editor-modal-container-radius);
     font-family: var(--slick-font-family, $slick-font-family);
     border: var(--slick-editor-modal-container-border, $slick-editor-modal-container-border);
+    color: var(--slick-editor-modal-text-color, $slick-editor-modal-text-color);
     margin: var(--slick-editor-modal-container-margin, $slick-editor-modal-container-margin);
     background-color: var(--slick-editor-modal-container-bg-color, $slick-editor-modal-container-bg-color);
     box-shadow: var(--slick-editor-modal-container-box-shadow, $slick-editor-modal-container-box-shadow);
@@ -388,6 +389,7 @@
       padding: var(--slick-editor-modal-detail-container-padding, $slick-editor-modal-detail-container-padding);
 
       input {
+        color: var(--slick-editor-modal-text-color, $slick-editor-modal-text-color);
         height: var(--slick-editor-modal-input-editor-height, $slick-editor-modal-input-editor-height);
         margin: var(--slick-editor-modal-input-editor-margin, $slick-editor-modal-input-editor-margin);
         border: var(--slick-editor-modal-input-editor-border, $slick-editor-modal-input-editor-border);