Update demo and add images

demo-newsletter-editor.html

@@ -73,7 +73,7 @@
             <table class="c1766">
               <tr>
                 <td class="cell c1769">
-                  <img class="c926" src="https://raw.githubusercontent.com/artf/grapesjs/gh-pages/img/grapesjs-logo.png" alt="GrapesJS."/>
+                  <img class="c926" src="http://artf.github.io/grapesjs/img/grapesjs-logo.png" alt="GrapesJS."/>
                 </td>
                 <td class="cell c1776">
                   <div class="c1144">GrapesJS Newsletter Builder
@@ -85,7 +85,7 @@
             <table class="card">
               <tr>
                 <td class="card-cell">
-                  <img class="c1271" src="./img/tmp-header-txt.jpg" alt="Big image here"/>
+                  <img class="c1271" src="http://artf.github.io/grapesjs/img/tmp-header-txt.jpg" alt="Big image here"/>
                   <table class="table100 c1357">
                     <tr>
                       <td class="card-content">
@@ -114,7 +114,7 @@
                   <table class="list-item-content">
                     <tr class="list-item-row">
                       <td class="list-cell-left">
-                        <img class="list-item-image" src="./img/tmp-blocks.jpg" alt="Image1"/>
+                        <img class="list-item-image" src="http://artf.github.io/grapesjs/img/tmp-blocks.jpg" alt="Image1"/>
                       </td>
                       <td class="list-cell-right">
                         <h1 class="card-title">Built-in Blocks
@@ -133,7 +133,7 @@
                   <table class="list-item-content">
                     <tr class="list-item-row">
                       <td class="list-cell-left">
-                        <img class="list-item-image" src="./img/tmp-tgl-images.jpg" alt="Image2"/>
+                        <img class="list-item-image" src="http://artf.github.io/grapesjs/img/tmp-tgl-images.jpg" alt="Image2"/>
                       </td>
                       <td class="list-cell-right">
                         <h1 class="card-title">Toggle images
@@ -152,7 +152,7 @@
                   <table class="grid-item-card">
                     <tr>
                       <td class="grid-item-card-cell">
-                        <img class="grid-item-image" src="./img/tmp-send-test.jpg" alt="Image1"/>
+                        <img class="grid-item-image" src="http://artf.github.io/grapesjs/img/tmp-send-test.jpg" alt="Image1"/>
                         <table class="grid-item-card-body">
                           <tr>
                             <td class="grid-item-card-content">
@@ -171,7 +171,7 @@
                   <table class="grid-item-card">
                     <tr>
                       <td class="grid-item-card-cell">
-                        <img class="grid-item-image" src="./img/tmp-devices.jpg" alt="Image2"/>
+                        <img class="grid-item-image" src="http://artf.github.io/grapesjs/img/tmp-devices.jpg" alt="Image2"/>
                         <table class="grid-item-card-body">
                           <tr>
                             <td class="grid-item-card-content">
@@ -530,29 +530,28 @@
 
 
     <script type="text/javascript">
-
+      var host = 'http://artf.github.io/grapesjs/';
       var images = [
-        'http://grapesjs.com/img/grapesjs-logo.png',
-        './img/tmp-blocks.jpg',
-        './img/tmp-tgl-images.jpg',
-        './img/tmp-send-test.jpg',
-        './img/tmp-devices.jpg',
+        host + 'img/grapesjs-logo.png',
+        host + 'img/tmp-blocks.jpg',
+        host + 'img/tmp-tgl-images.jpg',
+        host + 'img/tmp-send-test.jpg',
+        host + 'img/tmp-devices.jpg',
       ];
 
       // Set up GrapesJS editor with the Newsletter plugin
       var editor = grapesjs.init({
         height: '100%',
-        noticeOnUnload: 0,
         storageManager:{
-          autoload: 0,
+          id: 'gjs-nl-',
         },
         assetManager: {
+          assets: images,
           upload: 0,
           uploadText: 'Uploading is not available in this demo',
         },
         container : '#gjs',
         fromElement: true,
-        assetManager: {assets: images},
         plugins: ['gjs-preset-newsletter'],
         pluginsOpts: {
           'gjs-preset-newsletter': {

demo.html

@@ -99,6 +99,57 @@
          #toast-container > div {
            opacity: 0.95;
          }
+
+         /* Grapesjs Theme */
+         .gjs-btnt.gjs-pn-active,
+         .gjs-color-active,
+         .gjs-pn-btn.gjs-pn-active,
+         .gjs-pn-btn:active,
+         .gjs-block:hover {
+           color: #c75fbe; }
+
+         #gjs-rte-toolbar .gjs-rte-btn,
+         .gjs-btn-prim,
+         .gjs-btnt,
+         .gjs-clm-tags .gjs-sm-composite.gjs-clm-field,
+         .gjs-clm-tags .gjs-sm-field.gjs-sm-composite,
+         .gjs-clm-tags .gjs-sm-stack #gjs-sm-add,
+         .gjs-color-main,
+         .gjs-mdl-dialog,
+         .gjs-off-prv,
+         .gjs-pn-btn,
+         .gjs-pn-panel,
+         .gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
+         .gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
+         .gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
+           color: #b9a5a6;
+         }
+
+         #gjs-rte-toolbar,
+         .gjs-bg-main,
+         .gjs-clm-select option,
+         .gjs-clm-tags .gjs-sm-colorp-c,
+         .gjs-editor,
+         .gjs-mdl-dialog,
+         .gjs-nv-item .gjs-nv-title-c,
+         .gjs-off-prv,
+         .gjs-pn-panel,
+         .gjs-select option,
+         .gjs-sm-sector .gjs-sm-colorp-c,
+         .gjs-sm-select option,
+         .gjs-sm-unit option,
+         .sp-container {
+           background-color: #463a3c; }
+
+         .gjs-block {
+           border: 1px solid rgba(0, 0, 0, 0.2);
+           border-radius: 3px;
+           margin: 10px 2.5% 5px;
+           box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+           transition: all 0.2s ease 0s; }
+
+         .gjs-block:hover {
+           box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); }
     </style>
   </head>
   <body>