editor: tweaking visual appearance

diff --git a/src/editor/modules/documentCanvas/canvas/canvas.less b/src/editor/modules/documentCanvas/canvas/canvas.less
index b594247..2c6edc2 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.less
+++ b/src/editor/modules/documentCanvas/canvas/canvas.less
@@ -1,7 +1,8 @@
 .view-table {
     display: table;
 .view-table {
     display: table;

-    width: 100%;
-    
+    width: calc(~'100% - 100px');
+    margin: 10px 0 20px 100px;
+

     .view-row {
         display: table-row;
     }
     .view-row {
         display: table-row;
     }

diff --git a/src/editor/modules/documentCanvas/canvas/gutter.less b/src/editor/modules/documentCanvas/canvas/gutter.less
index b41179b..17178c7 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/gutter.less
+++ b/src/editor/modules/documentCanvas/canvas/gutter.less
@@ -2,11 +2,11 @@
     display: table-cell;
     width: calc(~'100% - 800px');
     min-width: 250px;
     display: table-cell;
     width: calc(~'100% - 800px');
     min-width: 250px;

-    padding-left: 45px;
+    padding: 0 25px;

 }
 
 .gutter-box {
 }
 
 .gutter-box {

-    border: 1px solid #ddd;
+    border: 1px solid darken(#ddd, 10%);

     padding: 5px 10px;
     position: relative;
     background-color: darken(#FFFCB7, 15%);
     padding: 5px 10px;
     position: relative;
     background-color: darken(#FFFCB7, 15%);

diff --git a/src/editor/modules/documentCanvas/documentCanvas.less b/src/editor/modules/documentCanvas/documentCanvas.less
index 541eca2..879d78d 100644 (file)
--- a/src/editor/modules/documentCanvas/documentCanvas.less
+++ b/src/editor/modules/documentCanvas/documentCanvas.less
@@ -10,15 +10,36 @@
 }
 
 #rng-module-documentCanvas-contentWrapper {
 }
 
 #rng-module-documentCanvas-contentWrapper {

-    border-color: #ddd;
-    border-style: solid;
-    border-width: 1px;
+    background-color: #ddd;

     float:left;
     float:left;

-    width: calc(~'100% - 20px');
+    width: 100%;

     height: 100%;
     overflow-y: scroll;
     height: 100%;
     overflow-y: scroll;

-    padding: 0 10px;

     
     

+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -15px;
+        right: -15px;
+        box-shadow: inset 0 20px 12px -20px rgba(0,0,0,0.6);
+        pointer-events:none;
+        z-index: 1;
+    }
+
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -15px;
+        right: -15px;
+        box-shadow: inset 0px -20px 12px -20px rgba(0,0,0,0.6);
+        pointer-events:none;
+        z-index: 1;
+    }
+

     &::-webkit-scrollbar {
         .rng-mixin-scrollbar;
     }
     &::-webkit-scrollbar {
         .rng-mixin-scrollbar;
     }


@@ -35,8 +56,11 @@
     .root-wrapper {
         display: table-cell;
         vertical-align: top;
     .root-wrapper {
         display: table-cell;
         vertical-align: top;

-        width:800px;
+        width: 600px;

         outline: 0px solid transparent;
         outline: 0px solid transparent;

+        padding: 0 100px;
+        background-color: white;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);

     }
 
     .current-text-element {
     }
 
     .current-text-element {

diff --git a/src/editor/modules/rng/editingLayout.html b/src/editor/modules/rng/editingLayout.html
index 259f0f4..9fb37e6 100644 (file)
--- a/src/editor/modules/rng/editingLayout.html
+++ b/src/editor/modules/rng/editingLayout.html
@@ -1,5 +1,4 @@
 <div class="fnp-module-rng-editingLayout">
     <div fnpjs-place="toolbar"></div>
     <div class="rng-module-rng2-left" fnpjs-place="leftColumn"></div>
 <div class="fnp-module-rng-editingLayout">
     <div fnpjs-place="toolbar"></div>
     <div class="rng-module-rng2-left" fnpjs-place="leftColumn"></div>

-    <div class="rng-module-rng2-statusBar" fnpjs-place="statusBar"></div>

 </div>
\ No newline at end of file
 </div>
\ No newline at end of file

diff --git a/src/editor/modules/rng/editingLayout.less b/src/editor/modules/rng/editingLayout.less
index eefd222..fe46e6d 100644 (file)
--- a/src/editor/modules/rng/editingLayout.less
+++ b/src/editor/modules/rng/editingLayout.less
@@ -10,6 +10,8 @@
 
 .fnp-module-rng-editingLayout {
 
 
 .fnp-module-rng-editingLayout {
 

+    margin-left: 60px;
+

     [fnpjs-place="statusBar"] {
         position: absolute;
         bottom: 0;
     [fnpjs-place="statusBar"] {
         position: absolute;
         bottom: 0;


@@ -22,7 +24,7 @@
     [fnpjs-place="leftColumn"] {
         position: absolute;
         top: 30px; //
     [fnpjs-place="leftColumn"] {
         position: absolute;
         top: 30px; //

-        bottom: 50px; //
+        bottom: 0px; //

         left:0;
         right: 0;
     }
         left:0;
         right: 0;
     }

diff --git a/src/editor/modules/rng/mainLayout.less b/src/editor/modules/rng/mainLayout.less
index c1a7e8e..859b581 100644 (file)
--- a/src/editor/modules/rng/mainLayout.less
+++ b/src/editor/modules/rng/mainLayout.less
@@ -2,8 +2,8 @@
     position: fixed;
     top: 5px;
     bottom: 5px;
     position: fixed;
     top: 5px;
     bottom: 5px;

-    left: 80px;
-    right: 80px;
+    left: 0px;
+    right: 0px;

     
     [fnpjs-place="messages"] {
         position: absolute;
     
     [fnpjs-place="messages"] {
         position: absolute;


@@ -16,6 +16,7 @@
         float: right;
         position: relative;
         z-index: 2;
         float: right;
         position: relative;
         z-index: 2;

+        margin-right: 60px;

     }
     
     [fnpjs-place="mainView"] {
     }
     
     [fnpjs-place="mainView"] {


@@ -29,6 +30,7 @@
         > .rng-view-tabs {
             position: relative;
             height: 100%;
         > .rng-view-tabs {
             position: relative;
             height: 100%;

+            padding-left: 60px;

 
             > .rng-view-tabs-content {
                 position: absolute;
 
             > .rng-view-tabs-content {
                 position: absolute;

diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js
index 459dcc1..032fea4 100644 (file)
--- a/src/editor/modules/rng/rng.js
+++ b/src/editor/modules/rng/rng.js
@@ -81,7 +81,7 @@ return function(sandbox) {
             sandbox.getModule('mainBar').setCommandEnabled('drop-draft', usingDraft);
             sandbox.getModule('mainBar').setCommandEnabled('save', usingDraft);
 
             sandbox.getModule('mainBar').setCommandEnabled('drop-draft', usingDraft);
             sandbox.getModule('mainBar').setCommandEnabled('save', usingDraft);
 

-            _.each(['sourceEditor', 'documentCanvas', 'documentToolbar', 'nodeBreadCrumbs', 'mainBar', 'indicator', 'documentHistory', 'diffViewer', 'statusBar'], function(moduleName) {
+            _.each(['sourceEditor', 'documentCanvas', 'documentToolbar', 'mainBar', 'indicator', 'documentHistory', 'diffViewer', 'statusBar'], function(moduleName) {

                 sandbox.getModule(moduleName).start();
             });
             
                 sandbox.getModule(moduleName).start();
             });
             

diff --git a/src/editor/styles/mixins.less b/src/editor/styles/mixins.less
index 3a14f31..28effc8 100644 (file)
--- a/src/editor/styles/mixins.less
+++ b/src/editor/styles/mixins.less
@@ -1,5 +1,5 @@
 .rng-mixin-scrollbar {
 .rng-mixin-scrollbar {

-    width: 9px;
+    width: 12px;

 }
 
 .rng-mixin-scrollbar-track {
 }
 
 .rng-mixin-scrollbar-track {