menu: Further improvements

- Add the ability to position the search bar to the bottom
- Add the ability to position the system buttons in the sidebar
- CSS: Document class diagram
- CSS: Simplify gaps by using spacing rather than padding
- Simplify class names
- Move all separators to code, outside of CSS
- Color the shutdown button

Author: clefebvre

data/theme/cinnamon-sass/widgets/_base.scss

@@ -152,9 +152,11 @@ StScrollBar {
 
 .user-widget.horizontal { spacing: $base_padding; }
 
+.user-widget.vertical { spacing: $base_padding; }
+
 .user-widget.vertical .user-widget-label {
-  @extend %title_4;
+  font-weight: 700;
+  @include fontsize(13pt);
   color: $fg_color;
-  padding-top: $base_margin * 2;
   text-align: center;
 }

data/theme/cinnamon-sass/widgets/_startmenu.scss

@@ -1,8 +1,29 @@
 
 // New menu (since Cinnamon 6.6)
-
-$appmenu_outer_padding: 9px;
-$appmenu_outer_border_radius: $base_border_radius * 1.25;
+//
+// Class diagram:
+// appmenu-main-box
+// ├─ appmenu-right-box
+// |  ├─ appmenu-search-box
+// |  |  └─ appmenu-system-box
+// |  └─ appmenu-categories-applications-box
+// |     ├─ appmenu-categories-scrollview
+// |     |  └─ appmenu-categories-box
+// |     └─vfade appmenu-applications-scrollview
+// |        └─ appmenu-applications-box
+// └─ appmenu-sidebar
+//    ├─ appmenu-sidebar-user-box
+//    |  └─ user-widget user-widget-label
+//    ├─ appmenu-sidebar-scrollview
+//    |  └─ appmenu-sidebar-scrollbox
+//    |     ├─ appmenu-places-box
+//    |     └─ appmenu-favs-box
+//    └─ appmenu-system-box
+
+$appmenu_small_padding: 5px;
+$appmenu_padding: 10px;
+$appmenu_large_padding: 15px;
+$appmenu_radius: $base_border_radius * 1.25;
 
 %appmenu_button {
   padding: $base_padding;
@@ -21,35 +42,61 @@ $appmenu_outer_border_radius: $base_border_radius * 1.25;
     .popup-menu-content { padding: 0; }
   }
 
+  &-main-box {
+    spacing: $appmenu_padding;
+  }
+
+  &-right-box {
+    spacing: $appmenu_small_padding;
+    padding: $appmenu_padding $appmenu_padding;
+  }
+
+  &-categories-applications-box {
+    spacing: $appmenu_large_padding;
+
+    &:top {
+      // Extra padding at the top of the categories/apps
+      // when the search box is at the bottom
+      padding-top: $appmenu_small_padding;
+    }
+  }
+
+  &-applications-box {
+    // Extra gap between the highlighted app and the scroll handle
+    padding-right: $appmenu_small_padding;
+  }
+
+  &-search-box {
+    spacing: $appmenu_padding;
+  }
+
   &-sidebar {
+    padding: $appmenu_padding 0px;
     background-color: $base_color;
-    border-radius: $appmenu_outer_border_radius 0 0 $appmenu_outer_border_radius;
+    border-radius: $appmenu_radius 0 0 $appmenu_radius;
     border-right-width: 1px;
     border-color: $borders_color;
 
-    &-user-box {
-      padding-top: $appmenu_outer_padding;
-      padding-bottom: $appmenu_outer_padding / 2;
+    &-user-box {}
+
+    .appmenu-system-button {
+      background-color: lighten($base_color, 10%);
+      &-lock:hover { background-color: lighten($base_color, 15%); }
+      &-logout:hover { background-color: lighten($base_color, 15%); }
+      &-shutdown { background-color: $destructive_bg_color; }
+      &-shutdown:hover { background-color: lighten($destructive_bg_color, 5%); }
     }
   }
 
   &-system-box {
-    spacing: 6px;
-    padding-left: 6px;
-    padding-right: 6px;
+    spacing: $appmenu_padding;
   }
 
-  &-categories-box { padding: $appmenu_outer_padding $base_padding * 3; }
-  &-applications-box { padding: $appmenu_outer_padding; }
-  // This small amount of padding is needed to be able
-  // to resize the menu with the mouse
-  &-applications-scrollbox { padding-right: 3px; }
-
   &-sidebar-button {
     @extend %appmenu_button;
 
     padding: 3px $base_padding 3px $base_padding;
-    margin: 0 $appmenu_outer_padding 0 $appmenu_outer_padding;
+    margin: 0 $appmenu_padding 0 $appmenu_padding;
 
     &:hover {
       background-color: $lighter_bg_color;
@@ -62,6 +109,7 @@ $appmenu_outer_border_radius: $base_border_radius * 1.25;
     border: 1px solid $borders_color;
     border-radius: 9999px;
     background-color: lighten($bg_color, 10%);
+    &-shutdown { background-color: $destructive_bg_color; }
     &-lock:hover { background-color: lighten($bg_color, 15%); }
     &-logout:hover { background-color: lighten($bg_color, 15%); }
     &-shutdown:hover { background-color: $destructive_bg_color; }
@@ -108,20 +156,11 @@ $appmenu_outer_border_radius: $base_border_radius * 1.25;
     }
   }
 
-  &-context-menu {}
-
-  &-search-box {
-    padding: $base_padding $base_padding $base_padding $appmenu_outer_padding;
-    border-bottom-width: 1px;
-    border-color: $borders_color;
-  }
-
   &-search-entry-icon {
     icon-size: $scalable_icon_size;
   }
 }
 
 #appmenu-search-entry {
   @extend %entry;
-  margin: $appmenu_outer_padding;
 }