Merge pull request #139 from dhg637/ResizersRefactoring

Resizers refactoring

2 files changed, 54 insertions, 14 deletions

diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss
index 4c1ed592..ba9851da 100755
--- a/scss/imports/scss/_MainWindow.scss
+++ b/scss/imports/scss/_MainWindow.scss
@@ -73,7 +73,7 @@
 #topPanelContainer,
 #leftPanelContainer,
 #rightPanelContainer,
-#bottomPanelContainer {
+.timelinePanel {
     background-color: #282828;
 }
 #topPanelContainer {
@@ -82,11 +82,11 @@
     height:32px;
 }
 
-#bottomPanelContainer {
+.timelinePanel {
     //border: 1px solid #333;
     background: transparent;
     height: 150px;
-    min-height:80px;
+    min-height:46px;
     max-height:50%;
     overflow:auto;
 
@@ -136,6 +136,7 @@
     display: -webkit-box;
     -webkit-box-orient: horizontal;
     margin-top:0px;
+    position :relative;
 }
 .mainContainerContent > section {
     margin-top: 2px;
@@ -200,16 +201,20 @@
 }
 
 #mainContainer #rulerTop {
+  display: none;
     // TODO: temporary background please replace when component is implemented
-    background:$color-stage;
+    background:$color-stage url('../images/temp/ruler-top.png');
     height:15px;
     margin-bottom: 0px;
+  border-right: 11px solid black;
 }
 
 #rulerLeft {
+  display: none;
     // TODO: temporary background please replace when component is implemented
-    background:$color-stage;
+    background:$color-stage url('../images/temp/ruler-left.png');
     width:16px;
+  border-bottom: 11px solid black;
 }
 
 #stateBar {
@@ -223,11 +228,25 @@
     position:relative;
 }
 
+.pasteboardResizer {
+
+    position: absolute;
+    width: 11px;
+    height: 11px;
+    bottom: 0px;
+    right: 0px;
+    z-index: 20;
+  background-image:url("../images/scrollbars/scrollbar_resizer.png");
+  background-repeat: no-repeat;
+  background-color: #000;
+    cursor: se-resize;
+
+}
 .timelineResizer {
-    background: #000 center center no-repeat url('data:image/gif;base64,R0lGODlhGQADAMQAAD49PXx8fGppaSYmJl9fXysrKykpKW5uboqJiUxMTGlpaV9eXjo6OoeHhyUkJD09PSoqKmpqaj8/P4qKiiQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdEMUI3NjM1QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdEMUI3NjM2QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0QxQjc2MzNCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0QxQjc2MzRCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAGQADAAAFH6ABDVRpnujpQAXxKFIUz3JNzwKwMEcz/cCgMIgIJEIAOw==');
-    width:100%;
-    height:6px;
-    cursor: row-resize;
+  background: #282828;
+  width:100%;
+  height:6px;
+  cursor: row-resize;
 }
 .timelineResizer.collapsed {
     height:0px !important;
@@ -247,12 +266,12 @@
 .resizeBar { -webkit-transition: all 0.15s linear; }
 
 // Splitters Collapsed  
-.panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in;  }
+.panelContainer.collapsed { -webkit-transition: all 0.15s ease-in;  }
 .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex:0.1 !important; }
 .disableTransition { -webkit-transition: none !important; -webkit-box-flex:0 !important; }
 
 #rightPanelContainer.collapsed, #leftPanelContainer.collapsed { width:0px !important; min-width:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; }
-#topPanelContainer.collapsed, #bottomPanelContainer.collapsed { height:0px !important; min-height:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; }
+#topPanelContainer.collapsed, .timelinePanel.collapsed { height:0px !important; min-height:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; }
 .leftSplitter.collapsed { -webkit-transform:rotate(180deg); }
 .rightSplitter.collapsed { -webkit-transform:rotate(0deg); }
 .topSplitter.collapsed { -webkit-transform:rotate(180deg); }
diff --git a/scss/imports/scss/_ScrollBars.scss b/scss/imports/scss/_ScrollBars.scss
index 1c2f30ea..2e79d9c8 100755
--- a/scss/imports/scss/_ScrollBars.scss
+++ b/scss/imports/scss/_ScrollBars.scss
@@ -110,8 +110,9 @@
      
     background-color: $color-sb-border;
 }
+
 ::-webkit-scrollbar-corner:window-inactive {
-    background-color: $color-sb-border;
+  background-color: $color-sb-border;
 }
 
 ::-webkit-resizer {
@@ -150,8 +151,28 @@
     display: none;
 }
 
-::-webkit-resizer:disabled {
-    display: none;
+#iframeContainer::-webkit-resizer:disabled {
+    display: block;
+}
+
+#iframeContainer::-webkit-scrollbar-track:vertical:disabled {
+  display: block;
+}
+
+#iframeContainer::-webkit-scrollbar-track:horizontal:disabled {
+  display: block;
+}
+
+#iframeContainer::-webkit-scrollbar-track-piece:disabled {
+  display: block;
+}
+
+#iframeContainer::-webkit-scrollbar-corner:disabled {
+  display: block;
+}
+
+#iframeContainer::-webkit-resizer:disabled {
+  display: block;
 }
  
 //  End: Scroll Bar Skinning