diff --git a/package.json b/package.json index 442eacd12..676a86754 100644 --- a/package.json +++ b/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", diff --git a/src/css/_variables.scss b/src/css/_variables.scss index 3348eb3da..d3e83073e 100644 --- a/src/css/_variables.scss +++ b/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}; } diff --git a/src/css/grapesjs.scss b/src/css/grapesjs.scss index 48d9fd88f..afd6d0bdd 100644 --- a/src/css/grapesjs.scss +++ b/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); } diff --git a/src/css/project-bar.scss b/src/css/project-bar.scss index 00aec5dc3..a86ace97c 100644 --- a/src/css/project-bar.scss +++ b/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; diff --git a/src/css/silex.scss b/src/css/silex.scss index a5d2306a6..ea277f6a8 100644 --- a/src/css/silex.scss +++ b/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 { diff --git a/src/ts/client/grapesjs/project-bar.ts b/src/ts/client/grapesjs/project-bar.ts index e73db5801..c908492f5 100644 --- a/src/ts/client/grapesjs/project-bar.ts +++ b/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({