From ab8679cf48d2edc82f2b7a882a87bff24be9f745 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 29 May 2014 09:11:37 +0200 Subject: [PATCH] editor: tweaking visual appearance --- .../modules/documentCanvas/canvas/canvas.less | 5 +-- .../modules/documentCanvas/canvas/gutter.less | 4 +-- .../documentCanvas/documentCanvas.less | 36 +++++++++++++++---- src/editor/modules/rng/editingLayout.html | 1 - src/editor/modules/rng/editingLayout.less | 4 ++- src/editor/modules/rng/mainLayout.less | 6 ++-- src/editor/modules/rng/rng.js | 2 +- src/editor/styles/mixins.less | 2 +- 8 files changed, 44 insertions(+), 16 deletions(-) diff --git a/src/editor/modules/documentCanvas/canvas/canvas.less b/src/editor/modules/documentCanvas/canvas/canvas.less index b594247..2c6edc2 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.less +++ b/src/editor/modules/documentCanvas/canvas/canvas.less @@ -1,7 +1,8 @@ .view-table { display: table; - width: 100%; - + width: calc(~'100% - 100px'); + margin: 10px 0 20px 100px; + .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 --- 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; - padding-left: 45px; + padding: 0 25px; } .gutter-box { - border: 1px solid #ddd; + border: 1px solid darken(#ddd, 10%); 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 --- a/src/editor/modules/documentCanvas/documentCanvas.less +++ b/src/editor/modules/documentCanvas/documentCanvas.less @@ -10,15 +10,36 @@ } #rng-module-documentCanvas-contentWrapper { - border-color: #ddd; - border-style: solid; - border-width: 1px; + background-color: #ddd; float:left; - width: calc(~'100% - 20px'); + width: 100%; 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; } @@ -35,8 +56,11 @@ .root-wrapper { display: table-cell; vertical-align: top; - width:800px; + width: 600px; 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 { diff --git a/src/editor/modules/rng/editingLayout.html b/src/editor/modules/rng/editingLayout.html index 259f0f4..9fb37e6 100644 --- a/src/editor/modules/rng/editingLayout.html +++ b/src/editor/modules/rng/editingLayout.html @@ -1,5 +1,4 @@
-
\ 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 --- a/src/editor/modules/rng/editingLayout.less +++ b/src/editor/modules/rng/editingLayout.less @@ -10,6 +10,8 @@ .fnp-module-rng-editingLayout { + margin-left: 60px; + [fnpjs-place="statusBar"] { position: absolute; bottom: 0; @@ -22,7 +24,7 @@ [fnpjs-place="leftColumn"] { position: absolute; top: 30px; // - bottom: 50px; // + bottom: 0px; // left:0; right: 0; } diff --git a/src/editor/modules/rng/mainLayout.less b/src/editor/modules/rng/mainLayout.less index c1a7e8e..859b581 100644 --- a/src/editor/modules/rng/mainLayout.less +++ b/src/editor/modules/rng/mainLayout.less @@ -2,8 +2,8 @@ position: fixed; top: 5px; bottom: 5px; - left: 80px; - right: 80px; + left: 0px; + right: 0px; [fnpjs-place="messages"] { position: absolute; @@ -16,6 +16,7 @@ float: right; position: relative; z-index: 2; + margin-right: 60px; } [fnpjs-place="mainView"] { @@ -29,6 +30,7 @@ > .rng-view-tabs { position: relative; height: 100%; + padding-left: 60px; > .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 --- 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); - _.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(); }); diff --git a/src/editor/styles/mixins.less b/src/editor/styles/mixins.less index 3a14f31..28effc8 100644 --- a/src/editor/styles/mixins.less +++ b/src/editor/styles/mixins.less @@ -1,5 +1,5 @@ .rng-mixin-scrollbar { - width: 9px; + width: 12px; } .rng-mixin-scrollbar-track { -- 2.20.1