From: Daniel Boles Date: Wed, 16 Aug 2023 16:11:45 +0000 (+0100) Subject: Popover: Fix & add to CSS nodes documentation X-Git-Tag: archive/raspbian/4.12.3+ds-1+rpi1~1^2^2^2~22^2^2~19 X-Git-Url: https://dgit.raspbian.org/?a=commitdiff_plain;h=70733d60f678bc59fd690700be611d07dd865b35;p=gtk4.git Popover: Fix & add to CSS nodes documentation * The `.background` class gets put on `popover`, not `content` * Use backticks to style node and class names with monospace * Link to GtkPopoverMenu * Add to PopoverMenu a bit outlining how items and sections look in CSS. --- diff --git a/gtk/gtkpopover.c b/gtk/gtkpopover.c index 2532472877..56935cf56d 100644 --- a/gtk/gtkpopover.c +++ b/gtk/gtkpopover.c @@ -70,30 +70,31 @@ * # CSS nodes * * ``` - * popover[.menu] + * popover.background[.menu] * ├── arrow - * ╰── contents.background + * ╰── contents * ╰── * ``` * - * The contents child node always gets the .background style class - * and the popover itself gets the .menu style class if the popover - * is menu-like (i.e. `GtkPopoverMenu`). + * `GtkPopover` has a main node with name `popover`, an arrow with name `arrow`, + * and another node for the content named `contents`. The `popover` node always + * gets the `.background` style class. It also gets the `.menu` style class + * if the popover is menu-like, e.g. is a [class@Gtk.PopoverMenu]. * * Particular uses of `GtkPopover`, such as touch selection popups or * magnifiers in `GtkEntry` or `GtkTextView` get style classes like - * .touch-selection or .magnifier to differentiate from plain popovers. + * `.touch-selection` or `.magnifier` to differentiate from plain popovers. * - * When styling a popover directly, the popover node should usually + * When styling a popover directly, the `popover` node should usually * not have any background. The visible part of the popover can have - * a shadow. To specify it in CSS, set the box-shadow of the contents node. + * a shadow. To specify it in CSS, set the box-shadow of the `contents` node. * * Note that, in order to accomplish appropriate arrow visuals, `GtkPopover` - * uses custom drawing for the arrow node. This makes it possible for the + * uses custom drawing for the `arrow` node. This makes it possible for the * arrow to change its shape dynamically, but it also limits the possibilities - * of styling it using CSS. In particular, the arrow gets drawn over the - * content node's border and shadow, so they look like one shape, which - * means that the border width of the content node and the arrow node should + * of styling it using CSS. In particular, the `arrow` gets drawn over the + * `content` node's border and shadow, so they look like one shape, which + * means that the border width of the `content` node and the `arrow` node should * be the same. The arrow also does not support any border shape other than * solid, no border-radius, only one border width (border-bottom-width is * used) and no box-shadow. diff --git a/gtk/gtkpopovermenu.c b/gtk/gtkpopovermenu.c index ed76b95fc7..52951f65aa 100644 --- a/gtk/gtkpopovermenu.c +++ b/gtk/gtkpopovermenu.c @@ -135,7 +135,14 @@ * * `GtkPopoverMenu` is just a subclass of `GtkPopover` that adds custom content * to it, therefore it has the same CSS nodes. It is one of the cases that add - * a .menu style class to the popover's main node. + * a `.menu` style class to the main `popover` node. + * + * Menu items have nodes with name `button` and class `.model`. If a section + * display-hint is set, the section gets a node `box` with class `horizontal` + * plus a class with the same text as the display hint. Note that said box may + * not be the direct ancestor of the item `button`s. Thus, for example, to style + * items in an `inline-buttons` section, select `.inline-buttons button.model`. + * Other things that may be of interest to style in menus include `label` nodes. * * # Accessibility *