[libadwaita/wip/exalm/stylesheet2: 73/103] stylesheet: Split column view and tree view styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 1df59e8a4c653d02d21b245c22e7564107c736f8
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:01:40 2021 +0500

    stylesheet: Split column view and tree view styles into a separate file

 src/stylesheet/_common.scss        | 247 +------------------------------------
 src/stylesheet/_widgets.scss       |   1 +
 src/stylesheet/meson.build         |   1 +
 src/stylesheet/widgets/_trees.scss | 233 ++++++++++++++++++++++++++++++++++
 4 files changed, 240 insertions(+), 242 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 5992961..e48b8f4 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -14,6 +14,9 @@ $menu_margin: $menu_radius; //margin around menuitems & sidebar items
 $window_radius: $button_radius + 3;
 $popover_radius: $button_radius + 4;
 
+$treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, 
$base_color, 20%));
+$treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 
80%),mix($backdrop_fg_color, $base_color, 20%));
+
 /***************
  * Base States *
  ***************/
@@ -234,246 +237,6 @@ editablelabel > stack > text {
 }
 
 
-/**************
- * Tree Views *
- **************/
-
-$_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, 
$base_color, 20%));
-$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 
80%),mix($backdrop_fg_color, $base_color, 20%));
-columnview.view,
-treeview.view {
-  border-left-color:  $_treeview_borders_color; // this is actually the tree lines color,
-  border-top-color: $_treeview_borders_color;                         // while this is the grid lines color, 
better then nothing
-
-  @include focus-ring();
-
-  &:selected {
-    &:focus, & {
-      border-radius: 0;
-      outline-color: $alt_focus_border_color;
-
-      @extend %selected_items;
-    }
-  }
-
-  &:disabled {
-    color: $insensitive_fg_color;
-
-    &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 40%);
-      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
-    }
-  }
-
-  &.separator {
-    min-height: 2px;
-    color: $_treeview_borders_color;
-  }
-
-  &:backdrop {
-    border-left-color: $_treeview_backdrop_borders_color;
-    border-top: $_treeview_backdrop_borders_color;
-  }
-
-  &:drop(active) {
-    box-shadow: none;
-  }
-
-  > dndtarget:drop(active) {
-    border-style: solid none;
-    border-width: 1px;
-    border-color: $selected_borders_color;
-
-    &.after { border-top-style: none; }
-
-    &.before { border-bottom-style: none; }
-  }
-
-  &.expander {
-    // GtkTreeView uses the larger of the expander’s min-width and min-height
-    min-width: 16px;
-    min-height: 16px;
-    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
-
-    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
-
-    color: mix($text_color, $base_color, 70%);
-
-    &:hover { color: $text_color; }
-
-    &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 70%);
-
-      &:hover { color: $selected_fg_color; }
-    }
-
-    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
-
-    &:disabled { color: gtkalpha(currentColor, 0.5); }
-  }
-
-  &.progressbar { // progress bar in treeviews
-    @if $variant == light { color: $base_color; }
-
-    background-color: $selected_bg_color;
-    background-image: image($selected_bg_color);
-    box-shadow: none;
-
-    &:selected {
-      &:focus, & {
-
-        @if $variant == 'light' {
-          color: $selected_bg_color;
-        }
-        @else {
-          box-shadow: inset 0 1px transparentize(white, 0.95);
-        }
-
-        background-image: image($base_color);
-
-        &:backdrop {
-          @if $variant == 'light' {
-            color: $selected_bg_color;
-          }
-          background-color: $backdrop_base_color;
-        }
-      }
-    }
-  }
-
-  &.trough { // progress bar trough in treeviews
-    background-color: transparentize($fg_color,0.9);
-
-    &:selected {
-      &:focus, & {
-        background-color: if($variant == 'light',
-                             transparentize($selected_fg_color, 0.7),
-                             darken($selected_bg_color, 10%));
-      }
-    }
-  }
-
-  > header {
-    > button {
-      $_column_header_color: mix($fg_color, $base_color, 50%);
-
-      @extend %column_header_button;
-
-      color: $_column_header_color;
-      background-color: $base_color;
-      font-weight: bold;
-      box-shadow: none;
-
-      &:hover {
-        @extend %column_header_button;
-
-        color: mix($_column_header_color, $fg_color, 50%);
-        box-shadow: none;
-        transition: none; //I shouldn't need this
-      }
-
-      &:active {
-        @extend %column_header_button;
-
-        color: $fg_color;
-        transition: none; //I shouldn't need this
-      }
-      sort-indicator {
-        &.ascending {
-          -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
-        }
-        &.descending {
-          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
-        }
-
-        min-height: 16px;
-        min-width: 16px;
-      }
-    }
-  }
-
-  button.dnd,
-  header.button.dnd { // for treeview-like derive widgets
-    &:active, &:selected, &:hover, & {
-      padding: 0 6px;
-      color: $base_color;
-      background-image: none;
-      background-color: $selected_bg_color;
-      border-style: none;
-      border-radius: 0;
-      box-shadow: inset 0 0 0 1px $base_color;
-      transition: none;
-    }
-  }
-
-  acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
-}
-
-%column_header_button {
-  padding: 0 6px;
-  background-image: none;
-  border-style: none none solid solid;
-  border-color: $_treeview_borders_color;
-  border-radius: 0;
-
-  &:disabled {
-    border-color: $bg_color;
-    background-image: none;
-  }
-
-  &:last-child { &:backdrop, & { border-right-style: none; }}
-}
-
-/********************************************************
- * Data Tables                                          *
- * treeview like tables with individual focusable cells *
- * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929     *
- ********************************************************/
-
-columnview {
-  // move padding to child cells
-  > listview > row {
-    padding: 0;
-
-    // align horizontal sizing with header buttons
-    > cell {
-      padding: 8px 6px;
-
-      &:not(:first-child) {
-        border-left: 1px solid transparent;
-      }
-    }
-  }
-
-  // make column separators visible when :show-column-separators is true
-  &.column-separators > listview > row > cell {
-    border-left-color: $_treeview_borders_color;
-  }
-
-  // shrink vertically for .data-table
-  &.data-table > listview > row > cell {
-    padding-top: 2px;
-    padding-bottom: 2px;
-  }
-}
-
-columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
-  outline: 2px solid $focus_border_color;
-}
-
-columnview row:not(:selected) cell editablelabel.editing:focus-within {
-  outline: 2px solid $selected_bg_color;
-}
-
-columnview row:not(:selected) cell editablelabel.editing text selection {
-  color: $selected_fg_color;
-  background-color: $selected_bg_color;
-}
-
-treeexpander {
-  border-spacing: 4px;
-}
-
 /***************
  * Popovers   *
  ***************/
@@ -1939,11 +1702,11 @@ list {
 
   &.horizontal row.separator,
   &.separators.horizontal > row:not(.separator) {
-    border-left: 1px solid $_treeview_borders_color;
+    border-left: 1px solid $treeview_borders_color;
   }
   &:not(.horizontal) row.separator,
   &.separators:not(.horizontal) > row:not(.separator) {
-    border-bottom: 1px solid $_treeview_borders_color;
+    border-bottom: 1px solid $treeview_borders_color;
   }
 }
 
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 809c3da..a84bec1 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -6,3 +6,4 @@
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
 @import 'widgets/toolbars';
+@import 'widgets/trees';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 1c8c21a..c3471c4 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -28,6 +28,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
       'widgets/_toolbars.scss',
+      'widgets/_trees.scss',
     ])
 
     theme_variants = [
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
new file mode 100644
index 0000000..2178809
--- /dev/null
+++ b/src/stylesheet/widgets/_trees.scss
@@ -0,0 +1,233 @@
+columnview.view,
+treeview.view {
+  border-left-color:  $treeview_borders_color; // this is actually the tree lines color,
+  border-top-color: $treeview_borders_color;                         // while this is the grid lines color, 
better then nothing
+
+  @include focus-ring();
+
+  &:selected {
+    &:focus, & {
+      border-radius: 0;
+      outline-color: $alt_focus_border_color;
+
+      @extend %selected_items;
+    }
+  }
+
+  &:disabled {
+    color: $insensitive_fg_color;
+
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 40%);
+      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
+    }
+  }
+
+  &.separator {
+    min-height: 2px;
+    color: $treeview_borders_color;
+  }
+
+  &:backdrop {
+    border-left-color: $treeview_backdrop_borders_color;
+    border-top: $treeview_backdrop_borders_color;
+  }
+
+  &:drop(active) {
+    box-shadow: none;
+  }
+
+  > dndtarget:drop(active) {
+    border-style: solid none;
+    border-width: 1px;
+    border-color: $selected_borders_color;
+
+    &.after { border-top-style: none; }
+
+    &.before { border-bottom-style: none; }
+  }
+
+  &.expander {
+    // GtkTreeView uses the larger of the expander’s min-width and min-height
+    min-width: 16px;
+    min-height: 16px;
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+    color: mix($text_color, $base_color, 70%);
+
+    &:hover { color: $text_color; }
+
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 70%);
+
+      &:hover { color: $selected_fg_color; }
+    }
+
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+    &:disabled { color: gtkalpha(currentColor, 0.5); }
+  }
+
+  &.progressbar { // progress bar in treeviews
+    @if $variant == light { color: $base_color; }
+
+    background-color: $selected_bg_color;
+    background-image: image($selected_bg_color);
+    box-shadow: none;
+
+    &:selected {
+      &:focus, & {
+
+        @if $variant == 'light' {
+          color: $selected_bg_color;
+        }
+        @else {
+          box-shadow: inset 0 1px transparentize(white, 0.95);
+        }
+
+        background-image: image($base_color);
+
+        &:backdrop {
+          @if $variant == 'light' {
+            color: $selected_bg_color;
+          }
+          background-color: $backdrop_base_color;
+        }
+      }
+    }
+  }
+
+  &.trough { // progress bar trough in treeviews
+    background-color: transparentize($fg_color,0.9);
+
+    &:selected {
+      &:focus, & {
+        background-color: if($variant == 'light',
+                             transparentize($selected_fg_color, 0.7),
+                             darken($selected_bg_color, 10%));
+      }
+    }
+  }
+
+  > header {
+    > button {
+      $_column_header_color: mix($fg_color, $base_color, 50%);
+
+      @extend %column_header_button;
+
+      color: $_column_header_color;
+      background-color: $base_color;
+      font-weight: bold;
+      box-shadow: none;
+
+      &:hover {
+        @extend %column_header_button;
+
+        color: mix($_column_header_color, $fg_color, 50%);
+        box-shadow: none;
+        transition: none; //I shouldn't need this
+      }
+
+      &:active {
+        @extend %column_header_button;
+
+        color: $fg_color;
+        transition: none; //I shouldn't need this
+      }
+      sort-indicator {
+        &.ascending {
+          -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+        }
+        &.descending {
+          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+        }
+
+        min-height: 16px;
+        min-width: 16px;
+      }
+    }
+  }
+
+  button.dnd,
+  header.button.dnd { // for treeview-like derive widgets
+    &:active, &:selected, &:hover, & {
+      padding: 0 6px;
+      color: $base_color;
+      background-image: none;
+      background-color: $selected_bg_color;
+      border-style: none;
+      border-radius: 0;
+      box-shadow: inset 0 0 0 1px $base_color;
+      transition: none;
+    }
+  }
+
+  acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
+}
+
+%column_header_button {
+  padding: 0 6px;
+  background-image: none;
+  border-style: none none solid solid;
+  border-color: $treeview_borders_color;
+  border-radius: 0;
+
+  &:disabled {
+    border-color: $bg_color;
+    background-image: none;
+  }
+
+  &:last-child { &:backdrop, & { border-right-style: none; }}
+}
+
+/********************************************************
+ * Data Tables                                          *
+ * treeview like tables with individual focusable cells *
+ * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929     *
+ ********************************************************/
+
+columnview {
+  // move padding to child cells
+  > listview > row {
+    padding: 0;
+
+    // align horizontal sizing with header buttons
+    > cell {
+      padding: 8px 6px;
+
+      &:not(:first-child) {
+        border-left: 1px solid transparent;
+      }
+    }
+  }
+
+  // make column separators visible when :show-column-separators is true
+  &.column-separators > listview > row > cell {
+    border-left-color: $treeview_borders_color;
+  }
+
+  // shrink vertically for .data-table
+  &.data-table > listview > row > cell {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+}
+
+columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
+  outline: 2px solid $focus_border_color;
+}
+
+columnview row:not(:selected) cell editablelabel.editing:focus-within {
+  outline: 2px solid $selected_bg_color;
+}
+
+columnview row:not(:selected) cell editablelabel.editing text selection {
+  color: $selected_fg_color;
+  background-color: $selected_bg_color;
+}
+
+treeexpander {
+  border-spacing: 4px;
+}