[gnome-builder] view-stack: more view stack header styling

[Christian Hergert <chergert src gnome org>]

commit 923940d017f6400333404a8994c057653b7e2085
Author: Christian Hergert <christian hergert me>
Date:   Tue Sep 15 20:56:59 2015 -0700

    view-stack: more view stack header styling
    
    Until we implement the real path-bar, we can fake it a bit with some
    styling improvements.

 data/theme/Adwaita-shared.css |   60 ++++++++++++++++++++-----
 data/ui/gb-view-stack.ui      |   99 +++++++++++++++++++++++++++++++----------
 2 files changed, 124 insertions(+), 35 deletions(-)
---
diff --git a/data/theme/Adwaita-shared.css b/data/theme/Adwaita-shared.css
index 57ec23e..afa9bf4 100644
--- a/data/theme/Adwaita-shared.css
+++ b/data/theme/Adwaita-shared.css
@@ -38,25 +38,60 @@ GbViewStack GtkBox.header.notebook {
 GbViewStack:not(.focused) GtkBox.header.notebook {
   background-color: shade (@theme_bg_color, 0.95);
 }
-GbWorkspacePane GtkBox.notebook.header .button,
-GbViewStack GtkBox.header.notebook .button {
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > .button,
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > GtkStack > GtkBox > 
.button {
   background-image: none;
   border-bottom: 1px solid transparent;
   border-radius: 0px;
-  border: none;
-  box-shadow: none;
-  margin: none;
+  border: 1px solid transparent;
+  box-shadow: 0px 0px 0px;
+  margin: 0px;
+  opacity: 0.55;
+  padding: 3px 8px 4px;
+}
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > GtkBox.navigation > 
.button {
+  background-image: none;
+  border-bottom: 1px solid transparent;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  box-shadow: 0px 0px 0px;
+  margin: 0px;
+  opacity: 0.55;
+  padding: 4px;
+}
+GbWorkspacePane > GtkBox.vertical > GtkBox.notebook.header > GtkStackSwitcher > .button {
+  background-image: none;
+  border-bottom: 1px solid transparent;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  box-shadow: 0px 0px 0px;
+  margin: 0px;
   opacity: 0.55;
-  padding: none;
+  padding: 3px 0px 3px;
 }
-GbWorkspacePane GtkBox.notebook.header GtkBox .button:checked,
-GbViewStack GtkBox.header.notebook .button:checked {
+GbWorkspacePane > GtkBox.vertical > GtkBox.horizontal.notebook.header > GtkStackSwitcher .button:checked,
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > .button:checked {
   box-shadow: 0px 2px 0px @theme_fg_color;
   color: @theme_fg_color;
 }
-GbWorkspacePane GtkBox.notebook.header GtkBox .button:hover:not(:checked),
-GbViewStack GtkBox.header.notebook .button:hover:not(:checked) {
-  box-shadow: 0px 2px 0px mix(@theme_fg_color, @theme_bg_color,0.25);
+GbWorkspacePane > GtkBox.vertical > GtkBox.notebook.header.horizontal > GtkStackSwitcher > .button:hover,
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > GtkBox.navigation > 
.button:hover,
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > .button:hover,
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > GtkStack > GtkBox > 
.button:hover {
+  border: 1px solid transparent;
+  box-shadow: 0px 2px 0px mix(@theme_fg_color, @theme_bg_color, 0.25);
+}
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook > GtkBox.horizontal > GtkBox.navigation > .button {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > 
GtkMenuButton.document-button {
+  padding: 0px;
+}
+GbViewStack > GtkBox.vertical > GtkBox.header.notebook.horizontal > GtkBox.horizontal > 
GtkMenuButton.document-button > GtkBox > GtkArrow {
+  opacity: 0.35;
+  padding-right: 0px;
+  margin-right: 0px;
 }
 
 
@@ -88,6 +123,9 @@ GbWorkspacePane GtkStackSwitcher .button {
 GbWorkspacePane GtkStackSwitcher .button:checked {
   opacity: 1.0;
 }
+GbWorkspacePane GbViewStack GtkBox.header.notebook GtkSeparator.vertical {
+  opacity: 0.75;
+}
 
 
 /*
diff --git a/data/ui/gb-view-stack.ui b/data/ui/gb-view-stack.ui
index 3ac65d4..c42e21c 100644
--- a/data/ui/gb-view-stack.ui
+++ b/data/ui/gb-view-stack.ui
@@ -17,15 +17,49 @@
             <child>
               <object class="GtkBox">
                 <property name="orientation">horizontal</property>
+                <property name="hexpand">true</property>
                 <property name="visible">true</property>
                 <property name="margin-bottom">3</property>
                 <property name="margin-end">7</property>
                 <property name="margin-start">6</property>
                 <property name="margin-top">3</property>
                 <child>
+                  <object class="GtkMenuButton" id="views_button">
+                    <property name="visible">false</property>
+                    <property name="focus-on-click">false</property>
+                    <property name="popover">views_popover</property>
+                    <style>
+                      <class name="image-button"/>
+                      <class name="flat"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">true</property>
+                        <property name="icon-name">view-list-symbolic</property>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="pack-type">start</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkSeparator">
+                    <property name="margin-start">3</property>
+                    <property name="margin-end">3</property>
+                    <property name="margin-top">4</property>
+                    <property name="margin-bottom">4</property>
+                    <property name="orientation">vertical</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
+                <child>
                   <object class="GtkBox">
                     <property name="orientation">horizontal</property>
                     <property name="visible">true</property>
+                    <style>
+                      <class name="navigation"/>
+                    </style>
                     <child>
                       <object class="GtkButton" id="go_backward">
                         <property name="visible">true</property>
@@ -63,29 +97,19 @@
                   </object>
                 </child>
                 <child>
-                  <object class="GtkMenuButton" id="views_button">
-                    <property name="visible">false</property>
-                    <property name="focus-on-click">false</property>
-                    <property name="popover">views_popover</property>
-                    <style>
-                      <class name="image-button"/>
-                      <class name="flat"/>
-                    </style>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="visible">true</property>
-                        <property name="icon-name">view-list-symbolic</property>
-                      </object>
-                    </child>
+                  <object class="GtkSeparator">
+                    <property name="margin-start">3</property>
+                    <property name="margin-end">3</property>
+                    <property name="margin-top">4</property>
+                    <property name="margin-bottom">4</property>
+                    <property name="orientation">vertical</property>
+                    <property name="visible">true</property>
                   </object>
-                  <packing>
-                    <property name="pack-type">start</property>
-                  </packing>
                 </child>
-                <child type="center">
+                <child>
                   <object class="GtkMenuButton" id="document_button">
                     <property name="focus-on-click">false</property>
-                    <property name="hexpand">true</property>
+                    <property name="hexpand">false</property>
                     <property name="popover">popover</property>
                     <!-- Sensitive is not being respected,
                          likely due to popover being set. -->
@@ -94,13 +118,13 @@
                     <style>
                       <class name="flat"/>
                       <class name="text-button"/>
+                      <class name="document-button"/>
                     </style>
                     <child>
                       <object class="GtkBox">
                         <property name="spacing">6</property>
                         <property name="visible">true</property>
-                        <property name="width-request">200</property>
-                        <child type="center">
+                        <child>
                           <object class="GtkLabel" id="title_label">
                             <property name="hexpand">false</property>
                             <property name="visible">true</property>
@@ -118,18 +142,20 @@
                             <property name="visible">false</property>
                           </object>
                           <packing>
-                            <property name="pack-type">start</property>
+                            <property name="pack-type">end</property>
+                            <property name="position">1</property>
                           </packing>
                         </child>
                         <child>
                           <object class="GtkArrow">
                             <property name="arrow-type">down</property>
-                            <property name="xalign">0.0</property>
+                            <property name="margin-top">2</property>
                             <property name="valign">baseline</property>
                             <property name="visible">true</property>
                           </object>
                           <packing>
                             <property name="pack-type">end</property>
+                            <property name="position">0</property>
                           </packing>
                         </child>
                       </object>
@@ -139,7 +165,6 @@
                 <child>
                   <object class="GtkButton" id="close_button">
                     <property name="action-name">view-stack.close</property>
-                    <property name="valign">center</property>
                     <property name="visible">true</property>
                     <property name="focus-on-click">false</property>
                     <style>
@@ -159,6 +184,19 @@
                   </packing>
                 </child>
                 <child>
+                  <object class="GtkSeparator">
+                    <property name="margin-start">3</property>
+                    <property name="margin-end">3</property>
+                    <property name="margin-top">4</property>
+                    <property name="margin-bottom">4</property>
+                    <property name="orientation">vertical</property>
+                    <property name="visible">true</property>
+                  </object>
+                  <packing>
+                    <property name="pack-type">end</property>
+                  </packing>
+                </child>
+                <child>
                   <object class="GtkStack" id="controls_stack">
                     <property name="homogeneous">false</property>
                     <property name="visible">true</property>
@@ -167,6 +205,19 @@
                     <property name="pack-type">end</property>
                   </packing>
                 </child>
+                <child>
+                  <object class="GtkSeparator">
+                    <property name="margin-start">3</property>
+                    <property name="margin-end">3</property>
+                    <property name="margin-top">4</property>
+                    <property name="margin-bottom">4</property>
+                    <property name="orientation">vertical</property>
+                    <property name="visible">true</property>
+                  </object>
+                  <packing>
+                    <property name="pack-type">end</property>
+                  </packing>
+                </child>
               </object>
             </child>
           </object>