Merge pull request OpenShot#2819 from SuslikV/patch-6

Make scrolls of the Timeline thicker
angelvilaplana · Jul 18, 2019 · 490e7ce · 490e7ce
2 parents 248fcce + d7e8f05
commit 490e7ce
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/timeline/index.html b/src/timeline/index.html
@@ -47,7 +47,8 @@
 			<div tl-playhead class="playhead playhead-top" ng-right-click="ShowPlayheadMenu(project.playhead_position)" style="left:{{(project.playhead_position * pixelsPerSecond) + playheadOffset}}px;">
 				<div class="playhead-line-small"></div>
 			</div>
-			<canvas tl-ruler id="ruler" width="{{GetTimelineWidth(1024)+7}}" height="39"></canvas>
+			<!-- Ruler extends beyond tracks area at least for a width of vertical scroll bar (or more, like 50px here) -->
+			<canvas tl-ruler id="ruler" width="{{GetTimelineWidth(1024)+50}}" height="39"></canvas>
 
 			<!-- MARKERS --> 
 			<span class="ruler_marker" id="marker_for_{{marker.id}}">

diff --git a/src/timeline/js/directives/playhead.js b/src/timeline/js/directives/playhead.js
@@ -38,7 +38,7 @@ App.directive('tlPlayhead', function(){
 			playhead_y_max = element.position().top;
 
 			// get the size of the playhead and line so we can determine the offset
-			var playhead_top_w = parseInt($(".playhead-top").css("width")) - 8.0; // I'm not sure why I need to remove another 8 pixels here
+			var playhead_top_w = parseInt($(".playhead-top").css("width"));
 			scope.playheadOffset = 0.0 - (playhead_top_w / 2.0);
 
 			// Move playhead to new position (if it's not currently being animated)

diff --git a/src/timeline/media/css/main.css b/src/timeline/media/css/main.css
@@ -63,9 +63,9 @@ img {
 .track { height: 64px; background-color: #000; margin-bottom: 8px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,50,50,1)), color-stop(100%,rgba(6,6,6,1))); border-top: 1px solid #4b92ad; border-bottom: 1px solid #4b92ad; border-right: 1px solid #4B92AD; border-top-right-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0px 0px 10px #000; }
 
 /* Playhead */
-.playhead-line { z-index: 9998; position: absolute; height:316px; top:0px; margin-left: 8px; width:1px; background-color:#ff0024; opacity:1;}
+.playhead-line { z-index: 9998; position: absolute; height:316px; top:0px; margin-left: 12px; width:1px; background-color:#ff0024; opacity:1;}
 .playhead-line-small { z-index: 9999; position: absolute; height:20px; top:32px;; margin-left: 12px; width:1px; background-color:#ff0024; opacity:1;}
-.playhead-top { cursor:move; z-index: 9999; position: absolute; margin-left: -4px; margin-top: 12px; width:25px; height:32px; background-image: url(../images/play_head.png); opacity:1;}
+.playhead-top { cursor:move; z-index: 9999; position: absolute; margin-left: 0px; margin-top: 12px; width:25px; height:32px; background-image: url(../images/play_head.png); opacity:1;}
 .marker {position:absolute; top:30px;}
 
 /* Clips */
@@ -144,8 +144,16 @@ img {
 .snapping-line.ng-hide-add.ng-hide-add-active { opacity:0.0; }
 
 /* Scrollbar style */
-::-webkit-scrollbar {width: 6px; height: 6px; background: #000000; }
-::-webkit-scrollbar-thumb { background-color: #4b92ad; -webkit-border-radius: 1ex; }
+::-webkit-scrollbar { width: 0.9em; height: 0.9em; }
+::-webkit-scrollbar-thumb { background-color: #4b92ad; border-radius: 0.45em; }
+
+::-webkit-scrollbar-track {
+  background: #000000;
+  box-shadow: inset 0 0 0.6em rgba(75,196,233,1.0); 
+  border-radius: 0.45em;
+}
+
+::-webkit-scrollbar-corner { background: none; }
 
 /* Hide timeline until Angular is loaded */
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {