[libadwaita/wip/exalm/dropdown-style] tmp

[Alexander Mikhaylenko <alexm src gnome org>]

commit 8be6cfdf178fed8ef88cc4a233f88de3f19e4601
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Oct 17 23:10:00 2021 +0500

    tmp

 src/adw-combo-row.c                    | 12 +++++++
 src/adw-combo-row.ui                   |  4 ++-
 src/stylesheet/widgets/_dropdowns.scss |  8 +++--
 src/stylesheet/widgets/_lists.scss     | 61 ++++++++++++++++++++++------------
 src/stylesheet/widgets/_menus.scss     | 32 ++++++++++++++++++
 src/stylesheet/widgets/_sidebars.scss  |  1 +
 6 files changed, 93 insertions(+), 25 deletions(-)
---
diff --git a/src/adw-combo-row.c b/src/adw-combo-row.c
index 4bd31bb6..5a127e46 100644
--- a/src/adw-combo-row.c
+++ b/src/adw-combo-row.c
@@ -150,6 +150,17 @@ row_activated_cb (AdwComboRow *self)
   adw_combo_row_set_selected (self, gtk_single_selection_get_selected (GTK_SINGLE_SELECTION 
(priv->popup_selection)));
 }
 
+static void
+notify_popover_visible_cb (AdwComboRow *self)
+{
+  AdwComboRowPrivate *priv = adw_combo_row_get_instance_private (self);
+
+  if (gtk_widget_get_visible (GTK_WIDGET (priv->popover)))
+    gtk_widget_add_css_class (GTK_WIDGET (self), "has-open-popup");
+  else
+    gtk_widget_remove_css_class (GTK_WIDGET (self), "has-open-popup");
+}
+
 static void
 adw_combo_row_activate (AdwActionRow *row)
 {
@@ -517,6 +528,7 @@ adw_combo_row_class_init (AdwComboRowClass *klass)
   gtk_widget_class_bind_template_child_private (widget_class, AdwComboRow, list);
   gtk_widget_class_bind_template_child_private (widget_class, AdwComboRow, popover);
   gtk_widget_class_bind_template_callback (widget_class, row_activated_cb);
+  gtk_widget_class_bind_template_callback (widget_class, notify_popover_visible_cb);
 
   gtk_widget_class_set_accessible_role (widget_class, GTK_ACCESSIBLE_ROLE_COMBO_BOX);
 }
diff --git a/src/adw-combo-row.ui b/src/adw-combo-row.ui
index 29760efc..d790861c 100644
--- a/src/adw-combo-row.ui
+++ b/src/adw-combo-row.ui
@@ -18,7 +18,6 @@
     </child>
     <child>
       <object class="GtkBox">
-        <property name="valign">center</property>
         <child>
           <object class="GtkImage" id="image">
             <property name="icon_name">pan-down-symbolic</property>
@@ -29,6 +28,9 @@
         </child>
         <child>
           <object class="GtkPopover" id="popover">
+            <property name="has-arrow">False</property>
+            <property name="halign">end</property>
+            <signal name="notify::visible" handler="notify_popover_visible_cb" swapped="true"/>
             <style>
               <class name="combo"/>
             </style>
diff --git a/src/stylesheet/widgets/_dropdowns.scss b/src/stylesheet/widgets/_dropdowns.scss
index e4bfb026..5cc1c0cf 100644
--- a/src/stylesheet/widgets/_dropdowns.scss
+++ b/src/stylesheet/widgets/_dropdowns.scss
@@ -34,10 +34,14 @@ combobox {
     padding: 0;
 
     listview {
-      padding: 8px 0;
+      @extend %menu_list;
 
-      & > row {
+      > row {
         padding: 8px;
+
+        > box {
+          border-spacing: 6px;
+        }
       }
     }
 
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index db112708..3e79129a 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -30,16 +30,19 @@ row {
   background-clip: padding-box;
 
   &.activatable {
-    &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
     &:hover { background-color: $view_hover_color; }
 
     &:active { background-color: $view_active_color; }
 
+    // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
+    &.has-open-popup { background-color: $view_hover_color; }
+
     &:selected {
-      &.has-open-popup,
       &:hover { background-color: $view_selected_hover_color; }
 
       &:active { background-color: $view_selected_active_color; }
+
+      &.has-open-popup { background-color: $view_selected_hover_color; }
     }
   }
 
@@ -99,35 +102,42 @@ popover.background.combo > contents {
   padding: 0px;
 
   list, listview {
-    border-style: none;
     background-color: transparent;
-    min-width: 200px;
+    min-width: 100px;
+
+    @extend %menu_list;
 
     > row {
-      padding: 0px 12px 0px 12px;
-      min-height: 50px;
-      border-bottom: 1px solid $borders_color;
+      padding: 8px;
+    }
+  }
+}
 
-      &:first-child {
-        border-top-left-radius: $popover_radius - 2;
-        border-top-right-radius: $popover_radius - 2;
-      }
+row.combo {
+  &:dir(ltr) {
+    padding-right: 0;
 
-      &:last-child {
-        border-bottom-left-radius: $popover_radius - 2;
-        border-bottom-right-radius: $popover_radius - 2;
-        border-bottom: none;
+    > box.header {
+        margin-right: -1px;
+
+        image.dropdown-arrow {
+          padding-right: 15px;
+        }
       }
     }
-  }
 
-  scrollbar.vertical {
-    padding-top: 2px;
-    padding-bottom: 2px;
+  &:dir(rtl) {
+    padding-left: 0;
+
+    > box.header {
+      margin-left: -1px;
+
+      image.dropdown-arrow {
+        padding-left: 15px;
+      }
+    }
   }
-}
 
-row.combo {
   image.dropdown-arrow:disabled {
     filter: opacity(.5);
   }
@@ -143,6 +153,10 @@ row.combo {
       color: inherit;
     }
   }
+
+  popover.combo {
+   padding-top: 2px;
+  }
 }
 
 /******************
@@ -166,7 +180,6 @@ row.combo {
   border-bottom: 1px solid $borders_color;
 
   &:not(:selected).activatable {
-    &.has-open-popup,
     &:hover {
       background-color: gtkalpha(currentColor, .03);
     }
@@ -174,6 +187,10 @@ row.combo {
     &:active {
       background-color: gtkalpha(currentColor, .08);
     }
+
+    &.has-open-popup {
+      background-color: gtkalpha(currentColor, .03);
+    }
   }
 }
 
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 3dd2adf0..393323d4 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -173,3 +173,35 @@ menubar {
     }
   }
 }
+
+%menu_list {
+  padding: $menu-margin 0; //only vertical padding. horizontal row size would clip
+  background: none;
+
+  > row {
+    border-radius: $menu_radius;
+    margin: 0 $menu_margin 2px;
+
+    &:selected {
+      background: none;
+    }
+
+    &:hover {
+      &, &:selected.activatable {
+        background-color: $view_selected_color;
+      }
+    }
+
+    &:active {
+      &, &:selected.activatable {
+        background-color: $view_selected_active_color;
+      }
+    }
+
+    &.has-open-popup {
+      &, &:selected.activatable {
+        background-color: $view_selected_color;
+      }
+    }
+  }
+}
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 5e4a5e3a..264f7bab 100644
--- a/src/stylesheet/widgets/_sidebars.scss
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -39,6 +39,7 @@ separator.sidebar {
  * Navigation Sidebar *
  **********************/
 
+%padded_list,
 .navigation-sidebar {
   padding: $menu-margin 0; //only vertical padding. horizontal row size would clip