Renaming .resize-handle to .track-resize-handle for clarity. Adding s…

…tyles for each theme.
OpenShot · Sep 20, 2024 · 2109d06 · 2109d06
1 parent c7d98a2
commit 2109d06
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 13 deletions.
diff --git a/src/themes/cosmic/theme.py b/src/themes/cosmic/theme.py
@@ -188,7 +188,7 @@ def __init__(self, app):
 }
 
 QPushButton:hover {
-    background-color: #283241 
+    background-color: #283241;
 }
 
 QWidget#settingsContainer {
@@ -574,6 +574,17 @@ def apply_theme(self):
               border-radius: 0px;
               height: 48px;
             }
+            .track-resize-handle {
+              background-color: #1B222CFF;
+              border-top: 1px solid #1B222CFF;
+              border-bottom: 1px solid #1B222CFF;
+              border-right: 1px solid #1B222CFF;
+              border-top-right-radius: 0px;
+              border-bottom-right-radius: 0px;
+            }
+            .track-resize-handle:hover {
+              background-color: #333F51FF;
+            }
             .transition {
               height: 48px;
               min-height: 48px;

diff --git a/src/themes/humanity/theme.py b/src/themes/humanity/theme.py
@@ -32,10 +32,10 @@ class HumanityDarkTheme(BaseTheme):
     def __init__(self, app):
         super().__init__(app)
         self.style_sheet = """
-QToolTip { 
-    color: #ffffff; 
-    background-color: #2a82da; 
-    border: 0px solid white; 
+QToolTip {
+    color: #ffffff;
+    background-color: #2a82da;
+    border: 0px solid white;
 }
 
 QComboBox::item {
@@ -133,6 +133,12 @@ def apply_theme(self):
               background: #e5e7ea;
               box-shadow: none;
             }
+            .track-resize-handle {
+              background-color: #BEBFC1;
+            }
+            .track-resize-handle:hover {
+              background-color: #F7F8FA;
+            }
             .transition_top {
               background: none;
               border-radius: 0px;

diff --git a/src/timeline/index.html b/src/timeline/index.html
@@ -82,7 +82,7 @@
 				<!-- TRACKS -->
 				<div ng-repeat="layer in project.layers.slice().reverse()" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)"  class="{{getTrackStyle(layer.lock)}}" style="width:{{getTimelineWidth(0)}}px;">
 					<div class="banding-overlay"></div>
-					<div class="resize-handle"></div>
+					<div class="track-resize-handle"></div>
 				</div>
 
 				<!-- CLIPS -->

diff --git a/src/timeline/js/directives/clip.js b/src/timeline/js/directives/clip.js
@@ -394,7 +394,7 @@ App.directive("tlMultiSelectable", function () {
       element.selectable({
         filter: ".droppable",
         distance: 0,
-        cancel: ".effect-container,.transition_menu,.clip_menu,.point,.resize-handle",
+        cancel: ".effect-container,.transition_menu,.clip_menu,.point,.track-resize-handle",
         selected: function (event, ui) {
           // Identify the selected ID and TYPE
           var id = ui.selected.id;

diff --git a/src/timeline/js/directives/track.js b/src/timeline/js/directives/track.js
@@ -39,7 +39,7 @@ App.directive('tlTrack', function () {
             };
 
             // Delegate the mousedown event to the parent element for dynamically created resize-handle
-            element.on('mousedown', '.resize-handle', function(event) {
+            element.on('mousedown', '.track-resize-handle', function(event) {
                 // Start resizing logic
                 isResizing = true;
                 startX = event.pageX;

diff --git a/src/timeline/media/css/main.css b/src/timeline/media/css/main.css
@@ -198,18 +198,23 @@ img {
   z-index: 1;
 }
 
-.resize-handle {
+.track-resize-handle {
     position: absolute;
     right: -8px; /* To the right of the track right edge */
-    top: 0;
+    top: -1px;
     width: 8px;
     height: 100%;
     cursor: ew-resize;
-    background-color: silver;
+    background-color: #2c2c2c;
+    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;
 }
 
-.resize-handle:hover {
-    background-color: red;
+.track-resize-handle:hover {
+    background-color: #4C4C4CFF;
 }
 
 .banding-overlay {