AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2025-01-13 05:50:10 +00:00
Code Issues Projects Releases Wiki Activity

Popover: Fix & add to CSS nodes documentation

Browse Source 
* 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.
This commit is contained in:
Daniel Boles 2023-08-16 17:11:45 +01:00
parent 7d65f81d7f
commit af0e2bff94
2 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
gtk/gtkpopover.c
View File

@ -70,30 +70,31 @@
* # CSS nodes
*
* ```
* popover[.menu]
* popover.background[.menu]
* ├── arrow
* ╰── contents.background
* ╰── contents
* ╰── <child>
* ```
*
* 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.

9
gtk/gtkpopovermenu.c
View File

@ -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
*