From 6adaf123ec05aa42f98d25fae3a487cdaed43b43 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 15 Jun 2016 15:32:34 +0200 Subject: [PATCH] Add default panels --- src/demo.js | 18 ++++------ src/panels/config/config.js | 65 +++++++++++++++++++++++++++++++++---- styles/css/main.css | 1 + styles/scss/main.scss | 1 + 4 files changed, 67 insertions(+), 18 deletions(-) diff --git a/src/demo.js b/src/demo.js index 33a79b508..085205f90 100644 --- a/src/demo.js +++ b/src/demo.js @@ -10,6 +10,7 @@ require(['config/require-config'], function() { height: '100%', components: '
GrapesJS
WEB
TEMPLATE
EDITOR
Build your templates without coding
All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
Try it now
ASSET MANAGER
Manage your images with Asset Manager
You can create image blocks with the command from the left panel and edit them with double click
At the moment uploading of new images is not allowed in demo, so there is only some random images.
Blocks
Each element of the HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style
Small
Some random list
+ Small feature 1
+ Small feature 2
+ Small feature 3
+ Small feature 4
Price 1
Medium
Some random list
+ Medium feature 1
+ Medium feature 2
+ Medium feature 3
+ Medium feature 4
Price 2
Large
Some random list
+ Large feature 1
+ Large feature 2
+ Large feature 3
+ Large feature 4
Price 3
', style: '#c63{width:100%;min-height:550px;background:url("./img/bg-gr-v.png") repeat left top scroll, url("http://www.freewhd.com/wp-content/uploads/2014/01/work-desk-14949.jpg") no-repeat center center scroll;}#c64{width:90%;max-width:1100px;min-height:75px;padding:7px 7px 7px 7px;margin:0 auto;}#c65{width:100%;padding:25px 7px 7px 7px;}#c66{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c67{padding:10px 10px 10px 10px;width:130px;min-height:50px;background-color:#ffffff;border-radius:5px;color:#4d114f;font-size:23px;text-align:center;line-height:30px;}#c68{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c69{float:right;padding:7px 7px 7px 7px;}#c70{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c71{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c72{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c73{clear:both;}#c74{padding:7px 7px 7px 7px;width:670px;min-height:57px;font-size:40px;color:#ffffff;font-family:Helvetica, serif;font-weight:100;margin:100px 0px 0px 0px;}#c75{padding:10px 10px 10px 10px;width:599px;min-height:80px;color:#c6c6c6;font-family:Helvetica, serif;font-weight:100;line-height:26px;}#c76{padding:10px 10px 10px 10px;width:190px;min-height:50px;font-weight:100;color:#ffffff;font-size:20px;text-align:center;letter-spacing:3px;line-height:30px;background-color:#d983a6;border-radius:5px;margin:15px 0px 0px 0px;}#c77{min-height:200px;background-color:#ffffff;}#c78{width:90%;max-width:1100px;min-height:75px;padding:100px 7px 7px 7px;margin:0 auto;}#c79{float:left;}#c80{float:left;margin:150px 0px 0px 100px;padding:7px 7px 7px 7px;}#c81{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;}#c82{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:25px;}#c83{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:17px;line-height:25px;font-weight:100;width:450px;}#c84{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:13px;line-height:20px;font-weight:100;width:450px;}#c85{clear:both;}#c86{min-height:500px;background-color:#222222;}#c87{width:90%;max-width:1100px;min-height:75px;padding:70px 7px 70px 7px;margin:0 auto;}#c88{padding:7px 7px 7px 7px;min-height:35px;color:#fff;font-size:25px;text-align:center;}#c89{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;text-align:center;width:700px;margin:0 auto;font-weight:100;}#c90{margin:70px 0 0 0;padding:7px 7px 7px 7px;}#c91{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c92{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d983a6;border-radius:5px;}#c93{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c94{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c95{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c96{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c97{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c98{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c99{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c100{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c101{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#da78a0;border-radius:5px;}#c102{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c103{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c104{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c105{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c106{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c107{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c108{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c109{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c110{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d66a96;border-radius:5px;}#c111{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c112{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c113{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c114{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c115{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c116{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c117{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c118{clear:both;}', + storage:{ autoload: 0 }, commands: { defaults : [{ @@ -61,16 +62,11 @@ require(['config/require-config'], function() { { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728}, ] }, - +/* panels: { defaults : [{ id : 'commands', buttons : [{ - id : 'select', - className : 'fa fa-mouse-pointer', - command : 'select-comp', - attributes : { title : 'Select element' } - },{ id : 'create', className : 'fa fa-plus-square-o icon-add-comp', command : 'create-comp', @@ -109,14 +105,14 @@ require(['config/require-config'], function() { }, ] }, - { id: 'move', className: 'fa fa-arrows', command: 'move-comp', attributes : { title: 'Move elements' }, }, //{ id: 'remove', className: 'fa fa-trash-o icon-rm', command: 'delete-comp', attributes : { title: 'Remove element' }, }, //{ id: 'resize', className: 'fa fa-arrows-alt', command: 'resize-comp', attributes : { title: 'Resize' }, }, - { id: 'text', className: 'fa fa-font' , command: 'text-comp', attributes : { title: 'Create text element' }, }, - { id: 'image', className: 'fa fa-picture-o', command: 'image-comp', attributes : { title: 'Create image element' }, }, - /*{ id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' }, + /*{ + id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' }, options: { content: '{{ VAR11 }}', terminateAfterInsert: true, }, },*/ + + /* ], },{ id : 'options', @@ -138,7 +134,7 @@ require(['config/require-config'], function() { { id: 'open-layers', className: 'fa fa-bars', command: 'open-layers', attributes : { title: 'Open Layer Manager' }, },], }], }, - +*/ styleManager : { sectors: [{ name: 'General', diff --git a/src/panels/config/config.js b/src/panels/config/config.js index 1131f7f82..85398a8b6 100644 --- a/src/panels/config/config.js +++ b/src/panels/config/config.js @@ -1,14 +1,65 @@ define(function () { + var slc = 'select-comp'; + var crc = 'create-comp'; + var mvc = 'move-comp'; + var txc = 'text-comp'; + var imc = 'image-comp'; + var swv = 'sw-visibility'; + var expt = 'export-template'; + return { - stylePrefix : 'pn-', - + stylePrefix: 'pn-', + // Default panels - defaults : [], - + defaults: [{ + id: 'commands', + buttons: [{ + id: slc, + command: slc, + className: 'fa fa-mouse-pointer', + attributes: { title : 'Select element' }, + },{ + id: crc, + command: crc, + className: 'fa fa-plus-square-o', + attributes: { title : 'Create element' }, + },{ + id: mvc, + command: mvc, + className: 'fa fa-arrows', + attributes: { title: 'Move elements' }, + },{ + id: txc, + command: txc, + className: 'fa fa-font', + attributes: { title: 'Create text element' }, + },{ + id: imc, + command: imc, + className: 'fa fa-picture-o', + attributes: { title: 'Create image element' }, + }], + },{ + id: 'options', + buttons: [{ + active: true, + id: swv, + className: 'fa fa-eye', + command: swv, + context: swv, + attributes: { title: 'View components' }, + },{ + id: expt, + className: 'fa fa-code', + command: expt, + attributes: { title: 'View code' }, + }], + }], + // Editor model - em : null, - + em : null, + // Delay before show children buttons (in milliseconds) - delayBtnsShow : 300, + delayBtnsShow : 300, }; }); \ No newline at end of file diff --git a/styles/css/main.css b/styles/css/main.css index 07e670d0c..312561ebf 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -3292,6 +3292,7 @@ ol.example li.placeholder:before { filter: alpha(opacity=50); } .wte-mdl-container { + font-family: Helvetica, sans-serif; position: absolute; top: 0; z-index: 10; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 861049306..5edf18c5e 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -854,6 +854,7 @@ $tagBg: #804f7b; } .#{$mdl-prefix}container { + font-family: $mainFont; position: absolute; top: 0; z-index: 10; width:100%; height:100%;