toggle resize project panel + contrasts improvments + npm-run-all in package.json

package.json

@@ -143,6 +143,7 @@
     "node_modules-path": "2.0.8",
     "node-fetch": "2.6.9",
     "normalize.css": "8.0.1",
+    "npm-run-all": "^4.1.5",
     "object-path": "0.11.8",
     "promise-sequential": "1.1.1",
     "sass": "1.77.8",
@@ -164,7 +165,6 @@
     "jest-environment-jsdom": "29.7.0",
     "livereload": "0.9.3",
     "nodemon": "3.1.4",
-    "npm-run-all": "4.1.5",
     "npm-watch": "0.13.0",
     "pug-cli": "1.0.0-alpha6",
     "style-loader": "4.0.0",

src/css/_variables.scss

@@ -12,6 +12,7 @@ $projectBarWidth: 35px;
 $projectPanelWidth: 13%;
 $projectPanelMinWidth: 150px;
 $viewsPanelWidth: 25%; // 15% is grapesjs default
+$viewsProjectPanelWidth: 13%;
 $footerHeight: 30px;
 $transitionSpeedMedium: .15s;
 $transitionSpeedSlow: .30s;
@@ -32,4 +33,5 @@ $fontFamily: 'Ubuntu', sans-serif;
   --darkerPrimaryColor: #{$darkerPrimaryColor};
   --lighterPrimaryColor: #{$lighterPrimaryColor};
   --viewsPanelWidth: #{$viewsPanelWidth};
+  --viewsProjectPanelWidth: #{$viewsProjectPanelWidth};
 }

src/css/grapesjs.scss

@@ -86,6 +86,10 @@
   width: var(--viewsPanelWidth);
 }
 
+.gjs-pn-project-bar-container {
+  width: var(--viewsProjectPanelWidth);
+}
+
 .gjs-pn-options {
   right: var(--viewsPanelWidth);
 }

src/css/project-bar.scss

@@ -46,6 +46,20 @@
   }
 }
 
+// Resize options project panel button
+.viewsOptionsProjectPanel__size-btn::before {
+  content: '→';
+}
+.viewsOptionsProjectPanel__size-btn {
+  z-index: $z-views-options-buttons;
+  right: auto;
+  left: 0;
+}
+// For fixed block size after project panel resizing (instead of default value 45%)
+.gjs-block {
+  width: 84px;
+}
+
 // panels
 .#{$pn-prefix}project-bar-container {
   top: $topBarHeight;

src/css/silex.scss

@@ -23,6 +23,13 @@
     font-size: 18px;
     font-weight: normal;
   }
+  //Better contrast than grapesjs default for select menu et input
+  select, input {
+    background-color: $darkerPrimaryColor;
+  }
+  .gjs-color-warn, .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
+    color: $secondaryColor;
+  }
 }
 
 .full-width {

src/ts/client/grapesjs/project-bar.ts

@@ -43,6 +43,22 @@ export const projectBarPlugin = (editor, opts) => {
   const containerPanel = editor.Panels.addPanel({
     id: containerPanelId,
     visible: false,
+    // resize project panel button
+    buttons: [{
+      id: 'resizeBlocks',
+      className: 'viewsOptionsProjectPanel__size-btn',
+      command: 'resize-ProjectPanel',
+      attributes: { title: 'Resize Project Panel' },
+    }],
+  })
+  // resize project panel command
+  editor.Commands.add('resize-ProjectPanel', {
+    run: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsProjectPanelWidth', '26%')
+    },
+    stop: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsProjectPanelWidth', '13%')
+    },
   })
   // create the project bar panel in grapesjs
   editor.Panels.addPanel({