Improved Docking (Timeline widget is now dockable and Properties work…

…s in pillar mode) (#2490) * Merging this fork into a new branch to play with (#2484) * Add 'Properties View' menu item * Add custom fallback icon for Properties View * Implement Properties View * Place the Timeline in a QDockWidget, other changes * Add 1-pixel-high central widget The central widget, which will auto-expand to the width of the area between the left and right dock areas, but is fixed at `1px` in height, effectively becomes part of the dual splitter handle separating the top and bottom dock areas. * Title and constrain Timeline dock * Timeline dock will now include the "Timeline" title in its titlebar * The dock is constrained to be non-closeable (only movable and resizeable) * The dock has a minimum size of `250px`×`150px`. * Updating window_state and window_geometry for new dockable timeline and dock settings. Also renaming the settings, to wipe out existing user preference which would make the screen go crazy on first launch (for existing users). * Updating advanced view (properties on right side) * Removing some & from the main window ui file (for translation reasons... since I would prefer we not have to retranslate those things before our next release). Also removing "Properties View" which was a bit experimental, since we are aleady forcing Properties into pillar mode with both "simple" and "advanced" views. * Updating "simple" and "advanced" window states again * Changing the background color of the timeline to better match the timeline.
OpenShot · Dec 28, 2018 · f6c74ef · f6c74ef
1 parent defb931
commit f6c74ef
Show file tree

Hide file tree

Showing 6 changed files with 46,184 additions and 45,975 deletions.
diff --git a/src/images/openshot.qrc b/src/images/openshot.qrc
@@ -321,5 +321,6 @@
         <file>Humanity/actions/16/transform-move.png</file>
         <file>Humanity/actions/16/view-list-icons.png</file>
         <file>Humanity/actions/custom/camera-photo-symbolic.svg</file>
+        <file>Humanity/actions/custom/properties-view.svg</file>
     </qresource>
 </RCC>
diff --git a/src/images/openshot_rc.py b/src/images/openshot_rc.py
diff --git a/src/settings/_default.settings b/src/settings/_default.settings
@@ -70,18 +70,18 @@
     "setting": "title_editor"
   },
   {
-    "value": "AAAA/wAAAAD9AAAAAwAAAAAAAAD8AAAA9PwCAAAAAfwAAAILAAAA9AAAAAAA////+v////8CAAAAAvsAAAAcAGQAbwBjAGsAUAByAG8AcABlAHIAdABpAGUAcwAAAAAA/////wAAAKEA////+wAAABgAZABvAGMAawBLAGUAeQBmAHIAYQBtAGUAAAAAAP////8AAAATAP///wAAAAEAAAEcAAABQPwCAAAAAfsAAAAYAGQAbwBjAGsASwBlAHkAZgByAGEAbQBlAQAAAVgAAAAVAAAAAAAAAAAAAAACAAAEqwAAAdz8AQAAAAL8AAAAAAAAAWQAAAB7AP////oAAAAAAgAAAAP7AAAAEgBkAG8AYwBrAEYAaQBsAGUAcwEAAAAA/////wAAAJgA////+wAAAB4AZABvAGMAawBUAHIAYQBuAHMAaQB0AGkAbwBuAHMBAAAAAP////8AAACYAP////sAAAAWAGQAbwBjAGsARQBmAGYAZQBjAHQAcwEAAAAA/////wAAAJgA////+wAAABIAZABvAGMAawBWAGkAZABlAG8BAAABagAAA0EAAAA6AP///wAABKsAAAD2AAAABAAAAAQAAAAIAAAACPwAAAABAAAAAgAAAAEAAAAOAHQAbwBvAGwAQgBhAHIBAAAAAP////8AAAAAAAAAAA==",
+    "value": "AAAA/wAAAAD9AAAAAwAAAAAAAAEnAAAC3/wCAAAAAvwAAAJeAAAApwAAAAAA////+gAAAAACAAAAAfsAAAAYAGQAbwBjAGsASwBlAHkAZgByAGEAbQBlAAAAAAD/////AAAAAAAAAAD7AAAAHABkAG8AYwBrAFAAcgBvAHAAZQByAHQAaQBlAHMAAAAAJwAAAt8AAACnAP///wAAAAEAAAEcAAABQPwCAAAAAfsAAAAYAGQAbwBjAGsASwBlAHkAZgByAGEAbQBlAQAAAVgAAAAVAAAAAAAAAAAAAAACAAAERgAAAtj8AQAAAAH8AAAAAAAABEYAAAD6AP////wCAAAAAvwAAAAnAAABwAAAALQA/////AEAAAAC/AAAAAAAAAFcAAAAewD////6AAAAAAIAAAAD+wAAABIAZABvAGMAawBGAGkAbABlAHMBAAAAAP////8AAACYAP////sAAAAeAGQAbwBjAGsAVAByAGEAbgBzAGkAdABpAG8AbgBzAQAAAAD/////AAAAmAD////7AAAAFgBkAG8AYwBrAEUAZgBmAGUAYwB0AHMBAAAAAP////8AAACYAP////sAAAASAGQAbwBjAGsAVgBpAGQAZQBvAQAAAWIAAALkAAAARwD////7AAAAGABkAG8AYwBrAFQAaQBtAGUAbABpAG4AZQEAAAHtAAABEgAAAJYA////AAAERgAAAAEAAAABAAAAAgAAAAEAAAAC/AAAAAEAAAACAAAAAQAAAA4AdABvAG8AbABCAGEAcgEAAAAA/////wAAAAAAAAAA",
     "title": "",
     "type": "hidden",
     "category": "Qt",
-    "setting": "window_state"
+    "setting": "window_state_v2"
   },
   {
-    "value": "AdnQywABAAAAAAEkAAAAVwAABeIAAAObAAABLgAAAH0AAAXYAAADkQAAAAAAAA==",
+    "value": "AdnQywACAAAAAABWAAAAMwAABJsAAANqAAAAVgAAAE8AAASbAAADagAAAAAAAAAAB4A=",
     "title": "",
     "type": "hidden",
     "category": "Qt",
-    "setting": "window_geometry"
+    "setting": "window_geometry_v2"
   },
   {
     "value": "",

diff --git a/src/timeline/media/css/main.css b/src/timeline/media/css/main.css
@@ -6,7 +6,7 @@ body {
     margin: 0;
     background-repeat: no-repeat;
     background-attachment: fixed;
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,25,25,1)), color-stop(100%,rgba(53,53,53,1)));
 	overflow: hidden; /* prevent document scrollbars (the timeline handles it's own overflow) */
 	-webkit-user-select: none;
 	line-height: 10px;

diff --git a/src/windows/main_window.py b/src/windows/main_window.py
@@ -1767,7 +1767,8 @@ def getDocks(self):
                 self.dockTransitions,
                 self.dockEffects,
                 self.dockVideo,
-                self.dockProperties]
+                self.dockProperties,
+                self.dockTimeline]
 
     def removeDocks(self):
         """ Remove all dockable widgets on main screen """
@@ -1809,14 +1810,17 @@ def hideDocks(self):
     def actionSimple_View_trigger(self, event):
         """ Switch to the default / simple view  """
         self.removeDocks()
+
+        # Add Docks
         self.addDocks([self.dockFiles, self.dockTransitions, self.dockEffects, self.dockVideo], Qt.TopDockWidgetArea)
+
         self.floatDocks(False)
         self.tabifyDockWidget(self.dockFiles, self.dockTransitions)
         self.tabifyDockWidget(self.dockTransitions, self.dockEffects)
         self.showDocks([self.dockFiles, self.dockTransitions, self.dockEffects, self.dockVideo])
 
         # Set initial size of docks
-        simple_state = "AAAA/wAAAAD9AAAAAwAAAAAAAAD8AAAA9PwCAAAAAfwAAAILAAAA9AAAAAAA////+v////8CAAAAAvsAAAAcAGQAbwBjAGsAUAByAG8AcABlAHIAdABpAGUAcwAAAAAA/////wAAAKEA////+wAAABgAZABvAGMAawBLAGUAeQBmAHIAYQBtAGUAAAAAAP////8AAAATAP///wAAAAEAAAEcAAABQPwCAAAAAfsAAAAYAGQAbwBjAGsASwBlAHkAZgByAGEAbQBlAQAAAVgAAAAVAAAAAAAAAAAAAAACAAAEqwAAAdz8AQAAAAL8AAAAAAAAAWQAAAB7AP////oAAAAAAgAAAAP7AAAAEgBkAG8AYwBrAEYAaQBsAGUAcwEAAAAA/////wAAAJgA////+wAAAB4AZABvAGMAawBUAHIAYQBuAHMAaQB0AGkAbwBuAHMBAAAAAP////8AAACYAP////sAAAAWAGQAbwBjAGsARQBmAGYAZQBjAHQAcwEAAAAA/////wAAAJgA////+wAAABIAZABvAGMAawBWAGkAZABlAG8BAAABagAAA0EAAAA6AP///wAABKsAAAD2AAAABAAAAAQAAAAIAAAACPwAAAABAAAAAgAAAAEAAAAOAHQAbwBvAGwAQgBhAHIBAAAAAP////8AAAAAAAAAAA=="
+        simple_state = "AAAA/wAAAAD9AAAAAwAAAAAAAAEnAAAC3/wCAAAAAvwAAAJeAAAApwAAAAAA////+gAAAAACAAAAAfsAAAAYAGQAbwBjAGsASwBlAHkAZgByAGEAbQBlAAAAAAD/////AAAAAAAAAAD7AAAAHABkAG8AYwBrAFAAcgBvAHAAZQByAHQAaQBlAHMAAAAAJwAAAt8AAACnAP///wAAAAEAAAEcAAABQPwCAAAAAfsAAAAYAGQAbwBjAGsASwBlAHkAZgByAGEAbQBlAQAAAVgAAAAVAAAAAAAAAAAAAAACAAAERgAAAtj8AQAAAAH8AAAAAAAABEYAAAD6AP////wCAAAAAvwAAAAnAAABwAAAALQA/////AEAAAAC/AAAAAAAAAFcAAAAewD////6AAAAAAIAAAAD+wAAABIAZABvAGMAawBGAGkAbABlAHMBAAAAAP////8AAACYAP////sAAAAeAGQAbwBjAGsAVAByAGEAbgBzAGkAdABpAG8AbgBzAQAAAAD/////AAAAmAD////7AAAAFgBkAG8AYwBrAEUAZgBmAGUAYwB0AHMBAAAAAP////8AAACYAP////sAAAASAGQAbwBjAGsAVgBpAGQAZQBvAQAAAWIAAALkAAAARwD////7AAAAGABkAG8AYwBrAFQAaQBtAGUAbABpAG4AZQEAAAHtAAABEgAAAJYA////AAAERgAAAAEAAAABAAAAAgAAAAEAAAAC/AAAAAEAAAACAAAAAQAAAA4AdABvAG8AbABCAGEAcgEAAAAA/////wAAAAAAAAAA"
         self.restoreState(qt_types.str_to_bytes(simple_state))
         QCoreApplication.processEvents()
 
@@ -1831,10 +1835,11 @@ def actionAdvanced_View_trigger(self, event):
         self.addDocks([self.dockProperties], Qt.LeftDockWidgetArea)
 
         self.floatDocks(False)
+        self.tabifyDockWidget(self.dockTransitions, self.dockEffects)
         self.showDocks([self.dockFiles, self.dockTransitions, self.dockVideo, self.dockEffects, self.dockProperties])
 
         # Set initial size of docks
-        advanced_state = "AAAA/wAAAAD9AAAAAwAAAAAAAAD8AAAB5fwCAAAAAfwAAAHVAAAB5QAAAKEA////+gAAAAACAAAAAvsAAAAcAGQAbwBjAGsAUAByAG8AcABlAHIAdABpAGUAcwEAAAAA/////wAAAKEA////+wAAABgAZABvAGMAawBLAGUAeQBmAHIAYQBtAGUAAAAAAP////8AAAAAAAAAAAAAAAEAAAD2AAAB5fwCAAAAAvsAAAAYAGQAbwBjAGsASwBlAHkAZgByAGEAbQBlAQAAAVgAAAAVAAAAAAAAAAD7AAAAFgBkAG8AYwBrAEUAZgBmAGUAYwB0AHMBAAAB1QAAAeUAAACYAP///wAAAAIAAAVmAAABkvwBAAAAA/sAAAASAGQAbwBjAGsARgBpAGwAZQBzAQAAAAAAAAIZAAAAbAD////7AAAAHgBkAG8AYwBrAFQAcgBhAG4AcwBpAHQAaQBvAG4AcwEAAAIfAAABAAAAAGwA////+wAAABIAZABvAGMAawBWAGkAZABlAG8BAAADJQAAAkEAAAA6AP///wAAA2gAAAHlAAAABAAAAAQAAAAIAAAACPwAAAABAAAAAgAAAAEAAAAOAHQAbwBvAGwAQgBhAHIBAAAAAP////8AAAAAAAAAAA=="
+        advanced_state = "AAAA/wAAAAD9AAAAAwAAAAAAAACCAAAC3/wCAAAAAvsAAAASAGQAbwBjAGsARgBpAGwAZQBzAQAAACcAAALfAAAAmAD////8AAACXgAAAKcAAAAAAP////oAAAAAAgAAAAH7AAAAGABkAG8AYwBrAEsAZQB5AGYAcgBhAG0AZQAAAAAA/////wAAAAAAAAAAAAAAAQAAANUAAALf/AIAAAAC+wAAABwAZABvAGMAawBQAHIAbwBwAGUAcgB0AGkAZQBzAQAAACcAAALfAAAAnwD////7AAAAGABkAG8AYwBrAEsAZQB5AGYAcgBhAG0AZQEAAAFYAAAAFQAAAAAAAAAAAAAAAgAAAuMAAALY/AEAAAAB/AAAAIgAAALjAAABWgD////8AgAAAAL8AAAAJwAAAe8AAACYAP////wBAAAAAvsAAAAeAGQAbwBjAGsAVAByAGEAbgBzAGkAdABpAG8AbgBzAQAAAIgAAACKAAAAbAD////7AAAAEgBkAG8AYwBrAFYAaQBkAGUAbwEAAAEYAAACUwAAAEcA/////AAAAhwAAADjAAAAmAD////8AQAAAAL7AAAAGABkAG8AYwBrAFQAaQBtAGUAbABpAG4AZQEAAACIAAACUgAAAPoA////+wAAABYAZABvAGMAawBFAGYAZgBlAGMAdABzAQAAAuAAAACLAAAAWgD///8AAALjAAAAAQAAAAEAAAACAAAAAQAAAAL8AAAAAQAAAAIAAAABAAAADgB0AG8AbwBsAEIAYQByAQAAAAD/////AAAAAAAAAAA="
         self.restoreState(qt_types.str_to_bytes(advanced_state))
         QCoreApplication.processEvents()
 
@@ -1968,16 +1973,16 @@ def save_settings(self):
         s = settings.get_settings()
 
         # Save window state and geometry (saves toolbar and dock locations)
-        s.set('window_state', qt_types.bytes_to_str(self.saveState()))
-        s.set('window_geometry', qt_types.bytes_to_str(self.saveGeometry()))
+        s.set('window_state_v2', qt_types.bytes_to_str(self.saveState()))
+        s.set('window_geometry_v2', qt_types.bytes_to_str(self.saveGeometry()))
 
     # Get window settings from setting store
     def load_settings(self):
         s = settings.get_settings()
 
         # Window state and geometry (also toolbar and dock locations)
-        if s.get('window_geometry'): self.restoreGeometry(qt_types.str_to_bytes(s.get('window_geometry')))
-        if s.get('window_state'): self.restoreState(qt_types.str_to_bytes(s.get('window_state')))
+        if s.get('window_state_v2'): self.restoreState(qt_types.str_to_bytes(s.get('window_state_v2')))
+        if s.get('window_geometry_v2'): self.restoreGeometry(qt_types.str_to_bytes(s.get('window_geometry_v2')))
 
         # Load Recent Projects
         self.load_recent_menu()
@@ -2027,7 +2032,7 @@ def setup_toolbars(self):
         self.actionUndo.setEnabled(False)
         self.actionRedo.setEnabled(False)
 
-        # Add files toolbar =================================================================================
+        # Add files toolbar
         self.filesToolbar = QToolBar("Files Toolbar")
         self.filesActionGroup = QActionGroup(self)
         self.filesActionGroup.setExclusive(True)
@@ -2048,7 +2053,7 @@ def setup_toolbars(self):
         self.filesToolbar.addAction(self.actionFilesClear)
         self.tabFiles.layout().addWidget(self.filesToolbar)
 
-        # Add transitions toolbar =================================================================================
+        # Add transitions toolbar
         self.transitionsToolbar = QToolBar("Transitions Toolbar")
         self.transitionsActionGroup = QActionGroup(self)
         self.transitionsActionGroup.setExclusive(True)
@@ -2065,7 +2070,7 @@ def setup_toolbars(self):
         self.transitionsToolbar.addAction(self.actionTransitionsClear)
         self.tabTransitions.layout().addWidget(self.transitionsToolbar)
 
-        # Add effects toolbar =================================================================================
+        # Add effects toolbar
         self.effectsToolbar = QToolBar("Effects Toolbar")
         self.effectsFilter = QLineEdit()
         self.effectsFilter.setObjectName("effectsFilter")
@@ -2075,7 +2080,7 @@ def setup_toolbars(self):
         self.effectsToolbar.addAction(self.actionEffectsClear)
         self.tabEffects.layout().addWidget(self.effectsToolbar)
 
-        # Add Video Preview toolbar ==========================================================================
+        # Add Video Preview toolbar
         self.videoToolbar = QToolBar("Video Toolbar")
 
         # Add fixed spacer(s) (one for each "Other control" to keep playback controls centered)
@@ -2109,7 +2114,7 @@ def setup_toolbars(self):
 
         self.tabVideo.layout().addWidget(self.videoToolbar)
 
-        # Add Timeline toolbar ================================================================================
+        # Add Timeline toolbar
         self.timelineToolbar = QToolBar("Timeline Toolbar", self)
 
         self.timelineToolbar.addAction(self.actionAddTrack)
@@ -2188,36 +2193,28 @@ def moveEvent(self, event):
         """ Move tutorial dialogs also (if any)"""
         QMainWindow.moveEvent(self, event)
         if self.tutorial_manager:
-            #log.info("Sending move event to tutorial manager")
             self.tutorial_manager.re_position_dialog()
 
     def resizeEvent(self, event):
         QMainWindow.resizeEvent(self, event)
         if self.tutorial_manager:
-            #log.info("Sending resize event to tutorial manager")
             self.tutorial_manager.re_position_dialog()
 
     def showEvent(self, event):
         """ Have any child windows follow main-window state """
-        #log.info("Showing main window")
         QMainWindow.showEvent(self, event)
         for child in self.findChildren(QDockWidget):
             if child.isFloating() and child.isEnabled():
-                # child.setWindowState(self.windowState())
-                #log.info("Showing child {}".format(child.windowTitle()))
                 child.raise_()
                 child.show()
 
     def hideEvent(self, event):
         """ Have any child windows hide with main window """
-        #log.info("Hiding main window")
         QMainWindow.hideEvent(self, event)
         for child in self.findChildren(QDockWidget):
             if child.isFloating() and child.isVisible():
-                #log.info("Hiding child {}".format(child.windowTitle()))
                 child.hide()
 
-
     def show_property_timeout(self):
         """Callback for show property timer"""
 
@@ -2374,6 +2371,12 @@ def __init__(self, mode=None):
         self.timeline = TimelineWebView(self)
         self.frameWeb.layout().addWidget(self.timeline)
 
+        # Configure the side docks to full-height
+        self.setCorner(Qt.TopLeftCorner, Qt.LeftDockWidgetArea)
+        self.setCorner(Qt.BottomLeftCorner, Qt.LeftDockWidgetArea)
+        self.setCorner(Qt.TopRightCorner, Qt.RightDockWidgetArea)
+        self.setCorner(Qt.BottomRightCorner, Qt.RightDockWidgetArea)
+
         # Setup files tree
         if s.get("file_view") == "details":
             self.filesTreeView = FilesTreeView(self)

diff --git a/src/windows/ui/main-window.ui b/src/windows/ui/main-window.ui
@@ -6,8 +6,8 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>1200</width>
-    <height>800</height>
+    <width>1096</width>
+    <height>823</height>
    </rect>
   </property>
   <property name="sizePolicy">
@@ -37,13 +37,31 @@
   </property>
   <widget class="QWidget" name="centralwidget">
    <property name="sizePolicy">
-    <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+    <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
      <horstretch>0</horstretch>
      <verstretch>0</verstretch>
     </sizepolicy>
    </property>
+   <property name="minimumSize">
+    <size>
+     <width>0</width>
+     <height>1</height>
+    </size>
+   </property>
+   <property name="maximumSize">
+    <size>
+     <width>16777215</width>
+     <height>1</height>
+    </size>
+   </property>
+   <property name="cursor">
+    <cursorShape>SplitVCursor</cursorShape>
+   </property>
+   <property name="contextMenuPolicy">
+    <enum>Qt::DefaultContextMenu</enum>
+   </property>
    <property name="autoFillBackground">
-    <bool>false</bool>
+    <bool>true</bool>
    </property>
    <layout class="QGridLayout" name="gridLayout">
     <property name="leftMargin">
@@ -61,17 +79,14 @@
     <property name="spacing">
      <number>3</number>
     </property>
-    <item row="0" column="0">
-     <layout class="QVBoxLayout" name="frameWeb"/>
-    </item>
    </layout>
   </widget>
   <widget class="QMenuBar" name="menubar">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>0</y>
-     <width>808</width>
+     <width>1200</width>
      <height>25</height>
     </rect>
    </property>
@@ -273,7 +288,7 @@
     <string>Effects</string>
    </property>
    <attribute name="dockWidgetArea">
-    <number>4</number>
+    <number>8</number>
    </attribute>
    <widget class="QWidget" name="dockWidgetContents_4">
     <layout class="QGridLayout" name="gridLayout_5">
@@ -306,7 +321,7 @@
     <string>Properties</string>
    </property>
    <attribute name="dockWidgetArea">
-    <number>1</number>
+    <number>8</number>
    </attribute>
    <widget class="QWidget" name="dockPropertiesContent">
     <layout class="QGridLayout" name="gridLayout_6">
@@ -350,8 +365,8 @@
    </property>
    <property name="minimumSize">
     <size>
-     <width>10</width>
-     <height>10</height>
+     <width>61</width>
+     <height>38</height>
     </size>
    </property>
    <property name="cursor">
@@ -373,7 +388,7 @@
     <bool>true</bool>
    </property>
    <property name="features">
-    <set>QDockWidget::DockWidgetFloatable</set>
+    <set>QDockWidget::DockWidgetFloatable|QDockWidget::DockWidgetMovable</set>
    </property>
    <property name="allowedAreas">
     <set>Qt::NoDockWidgetArea</set>
@@ -401,7 +416,7 @@
      <enum>Qt::NoContextMenu</enum>
     </property>
     <property name="visible">
-     <bool>false</bool>
+     <bool>true</bool>
     </property>
     <property name="autoFillBackground">
      <bool>false</bool>
@@ -425,6 +440,36 @@
     </layout>
    </widget>
   </widget>
+  <widget class="QDockWidget" name="dockTimeline">
+   <property name="minimumSize">
+    <size>
+     <width>250</width>
+     <height>150</height>
+    </size>
+   </property>
+   <property name="features">
+    <set>QDockWidget::DockWidgetFloatable|QDockWidget::DockWidgetMovable</set>
+   </property>
+   <property name="windowTitle">
+    <string>Timeline</string>
+   </property>
+   <attribute name="dockWidgetArea">
+    <number>8</number>
+   </attribute>
+   <widget class="QWidget" name="dockTimelineContents">
+    <property name="focusPolicy">
+     <enum>Qt::ClickFocus</enum>
+    </property>
+    <property name="contextMenuPolicy">
+     <enum>Qt::NoContextMenu</enum>
+    </property>
+    <layout class="QGridLayout" name="gridLayout_7">
+     <item row="0" column="0">
+      <layout class="QVBoxLayout" name="frameWeb"/>
+     </item>
+    </layout>
+   </widget>
+  </widget>
   <action name="actionNew">
    <property name="icon">
     <iconset theme="document-new" resource="../../images/openshot.qrc">