[pitivi] timeline: Enhance SpacedSeparator visual

[Thibault Saunier <tsaunier src gnome org>]

commit 56b0e9c3e0e8f1c9d0cf64a23d491c8c0bd0bfbf
Author: Thibault Saunier <tsaunier gnome org>
Date:   Fri Jul 10 11:52:51 2015 +0200

    timeline: Enhance SpacedSeparator visual
    
    Summary:
    And make use of them for the layer control separators
    
    Depends on D259
    
    Reviewers: Mathieu_Du, aleb
    
    Differential Revision: https://phabricator.freedesktop.org/D260

 pitivi/timeline/layer.py    |   38 ++++++++++++++++++++++++++++----------
 pitivi/timeline/timeline.py |   22 ++++++++++------------
 pitivi/utils/ui.py          |   11 +++++++++++
 3 files changed, 49 insertions(+), 22 deletions(-)
---
diff --git a/pitivi/timeline/layer.py b/pitivi/timeline/layer.py
index a8ce0d2..0cc3621 100644
--- a/pitivi/timeline/layer.py
+++ b/pitivi/timeline/layer.py
@@ -217,16 +217,36 @@ class SpacedSeparator(Gtk.EventBox):
     Inherits from EventBox since we want to change background color
     """
 
-    def __init__(self):
+    def __init__(self, position):
         Gtk.EventBox.__init__(self)
 
         self.box = Gtk.Box()
         self.box.set_orientation(Gtk.Orientation.VERTICAL)
         self.add(self.box)
+        self.__position = position
 
         self.get_style_context().add_class("SpacedSeparator")
         self.box.get_style_context().add_class("SpacedSeparator")
-        self.props.height_request = ui.PADDING
+        self.props.height_request = 1
+        self.props.margin_bottom = 4
+        self.props.margin_top = 4
+
+    def do_state_flags_changed(self, old_flags):
+        HIGLIGHTED_PADDING = 3
+        total_height = ui.PADDING + HIGLIGHTED_PADDING
+        if not self.get_state_flags() & Gtk.StateFlags.PRELIGHT:
+            self.props.height_request = 1
+            self.props.margin_bottom = (total_height - 1) / 2
+            self.props.margin_top = (total_height - 1) / 2
+        else:
+            self.props.height_request = ui.PADDING
+            if self.__position == Gtk.PositionType.TOP:
+                self.props.margin_bottom = HIGLIGHTED_PADDING
+                self.props.margin_top = 0
+            else:
+                self.props.margin_bottom = 0
+                self.props.margin_top = HIGLIGHTED_PADDING
+        Gtk.EventBox.do_state_flags_changed(self, old_flags)
 
 
 class LayerControls(Gtk.EventBox, Loggable):
@@ -247,9 +267,8 @@ class LayerControls(Gtk.EventBox, Loggable):
         content = Gtk.Grid()
         self.add(content)
 
-        sep = Gtk.Separator.new(Gtk.Orientation.HORIZONTAL)
-        sep.props.height_request = ui.PADDING
-        content.attach(sep, 0, 0, 2, 1)
+        self.before_sep = SpacedSeparator(Gtk.PositionType.TOP)
+        content.attach(self.before_sep, 0, 0, 2, 1)
 
         self.video_control = VideoLayerControl(self, self.app)
         self.video_control.set_visible(True)
@@ -276,9 +295,8 @@ class LayerControls(Gtk.EventBox, Loggable):
         menubutton.set_popover(popover)
         content.attach(menubutton, 1, 1, 1, 2)
 
-        sep = Gtk.Separator.new(Gtk.Orientation.HORIZONTAL)
-        sep.props.height_request = ui.PADDING
-        content.attach(sep, 0, 3, 2, 1)
+        self.after_sep = SpacedSeparator(Gtk.PositionType.BOTTOM)
+        content.attach(self.after_sep, 0, 3, 2, 1)
 
         sep = Gtk.Separator.new(Gtk.Orientation.VERTICAL)
         sep.props.margin_top = ui.PADDING / 2
@@ -449,8 +467,8 @@ class Layer(Gtk.EventBox, timelineUtils.Zoomable, Loggable):
         for clip in bLayer.get_clips():
             self._addClip(clip)
 
-        self.before_sep = SpacedSeparator()
-        self.after_sep = SpacedSeparator()
+        self.before_sep = SpacedSeparator(Gtk.PositionType.TOP)
+        self.after_sep = SpacedSeparator(Gtk.PositionType.BOTTOM)
 
     def release(self):
         for clip in self.bLayer.get_clips():
diff --git a/pitivi/timeline/timeline.py b/pitivi/timeline/timeline.py
index 9ca2360..9c3db89 100644
--- a/pitivi/timeline/timeline.py
+++ b/pitivi/timeline/timeline.py
@@ -775,6 +775,8 @@ class Timeline(Gtk.EventBox, Zoomable, Loggable):
         if target == URI_TARGET_ENTRY.target:
             if self.__last_clips_on_leave:
                 self.app.action_log.begin("add clip")
+
+                created_layer = None
                 for layer, clip in self.__last_clips_on_leave:
                     if self.__on_separators and not created_layer:
                         created_layer = self.__getDroppedLayer()
@@ -908,18 +910,14 @@ class Timeline(Gtk.EventBox, Zoomable, Loggable):
 
         return self.get_parent().getEditionMode(isAHandle=is_handle)
 
-    def __getSeparator(self, separators):
-        """
-        Get the separator taking into account
-        the current editing mode
-        """
+    def __layerGetSeps(self, bLayer, sep_name):
         if self.__getEditingMode() != GES.EditMode.EDIT_NORMAL:
             return []
 
         if self.current_group.props.height > 1:
             return []
 
-        return separators
+        return [getattr(bLayer.ui, sep_name), getattr(bLayer.control_ui, sep_name)]
 
     def __getLayerAt(self, y, bLayer=None):
         separators = None
@@ -930,7 +928,7 @@ class Timeline(Gtk.EventBox, Zoomable, Loggable):
                 bLayer = self.bTimeline.append_layer()
 
             self.debug("Returning very first layer")
-            return bLayer, self.__getSeparator([bLayer.ui.before_sep])
+            return bLayer, self.__layerGetSeps(bLayer, "before_sep")
 
         layers = self.bTimeline.get_layers()
         rect = Gdk.Rectangle()
@@ -945,27 +943,27 @@ class Timeline(Gtk.EventBox, Zoomable, Loggable):
             if Gdk.rectangle_intersect(rect, layer_alloc)[0] is True:
                 return layer, []
 
-            separators = [layer.ui.after_sep]
+            separators = self.__layerGetSeps(layer, "after_sep")
             sep_rectangle = Gdk.Rectangle()
             sep_rectangle.x = 0
             sep_rectangle.y = layer_alloc.y + layer_alloc.height
             try:
                 sep_rectangle.height = layers[i + 1].ui.get_allocation().y - \
                     layer_alloc.y - layer_alloc.height
-                separators.append(layers[i + 1].ui.before_sep)
+                separators.extend(self.__layerGetSeps(layers[i + 1], "before_sep"))
             except IndexError:
                 sep_rectangle.height += LAYER_HEIGHT
 
             if sep_rectangle.y <= rect.y <= sep_rectangle.y + sep_rectangle.height:
                 self.debug("Returning layer %s, separators: %s" % (layer, separators))
                 if bLayer:
-                    return bLayer, self.__getSeparator(separators)
+                    return bLayer, separators
 
-                return layer, self.__getSeparator(separators)
+                return layer, separators
 
         self.debug("Returning very last layer")
 
-        return layers[-1], self.__getSeparator([layers[-1].ui.after_sep])
+        return layers[-1], self.__layerGetSeps(layers[-1], "after_sep")
 
     def __setHoverSeparators(self):
         for sep in self.__on_separators:
diff --git a/pitivi/utils/ui.py b/pitivi/utils/ui.py
index 3025c1c..99a8d5f 100644
--- a/pitivi/utils/ui.py
+++ b/pitivi/utils/ui.py
@@ -155,6 +155,17 @@ TIMELINE_CSS = """
         opacity:0.5;
     }
 
+    .SpacedSeparator {
+        background-color: rgba(0, 0, 0, 0.10);
+        border-bottom-color: rgba(0, 0, 0, 0.10);
+        border-left-color: rgba(0, 0, 0, 0.10);
+        border-right-color: rgba(0, 0, 0, 0.10);
+        border-top-color: rgba(0, 0, 0, 0.10);
+        color: rgba(0, 0, 0, 0.10);
+        outline-color: rgba(238, 238, 236, 0.29);
+        opacity:1;
+    }
+
     .Marquee {
          background-color: rgba(224, 224, 224, 0.7);
     }