gtk/docs/widget_geometry.txt
Owen Taylor 7537825b34 Patch from Bill Haneman (with many modifications) to make the focus color
Mon Dec  3 16:39:17 2001  Owen Taylor  <otaylor@redhat.com>

	Patch from Bill Haneman (with many modifications) to make
	the focus color work on dark themes and to make the
	focus line width configurable. (#61079, #63074)

        * gtk/gtkwidget.c: Add style properties,
	::focus-widget, ::focus-line-width, and ::focus-padding.

	* gtk/gtkstyle.[ch]: Make gtk_paint_focus() take a
	state argument as well so we can use fg[STATE] to
	draw instead of always drawing with black.
	Cange paint_focus() to respect GtkWidget::focus-width
	and GtkWidget::focus-line-pattern. Fix continuity
	problem where the default 1-1 stipple had a blob
	in one corner and a gap in the other. Change the
	interpretation of x/y/width/height to be the bounding
	box of the focus rect instead of the rectangle
	passed to gdk_draw_rectangle.

	* gtk/gtkcheckbutton.c gtk/gtklistitem.c gtk/gtknotebook.c
	gtk/gtkoptionmenu.c gtk/gtkradiobutton.c gtk/gtkspinbutton.c
	gtk/gtktextview.c gtk/gtktreeview.c: Handle ::focus-width
	and ::focus-line-padding.

	* gtk/gtkentry.c: Handle :;focus-width property; cleanup
	and remove duplicated code; fix drawing of focus rectangle
	when interior-focus = FALSE. (#63072, #63073)

	* gtk/gtkrange.c gtk/gtktext.c gtk/gtktreeitem.c
	gtk/gtktreeviewcolumn.c: Basic fixups to make compile;
	Range and TreeViewColumn will need more extensive fixing.

	* gtk/gtkcolorsel.c: Honor focus line attributes when
	drawing the focus on the color swatches. (#63071)

	* gtk/gtkhsv.c: Honor focus line attributes when
	drawing the focus for the ring and triangle.

	* docs/widget_geometry.txt: Start at documenting how
	various widgets are drawn.

	* gtk/gtkbutton.c (_gtk_button_paint): Export
	_gtk_button_paint() librarywide, so we don't have
	duplicate a bunch of code in gtktogglebutton.c.

	* gtk/gtktogglebutton.c: Use _gtk_button_paint().
2001-12-04 03:27:30 +00:00

595 lines
22 KiB
Plaintext

This file is some notes about how different widgets are drawn.
=============
GtkOptionMenu:
=============
Geometry parameters
Style properties
GtkWidget::interior_focus = TRUE
GtkWidget::focus_width = 1
GtkWidget::focus_padding = 0
GtkOptionMenu::indicator_size = { 7, 13 }
GtkOptionMenu::indicator_spacing = { 7, 5, 2, 2 }
Properties
GtkContainer::border_width = 0
#defines
CHILD_LEFT_SPACING = 5
CHILD_RIGHT_SPACING = 1
CHILD_TOP_SPACING = 1
CHILD_BOTTOM_SPACING = 1
I) interior_focus = TRUE
+--------------------------------------------------+
+ A |
| +----------------------------------------------+ |
| |\\\\\\\\\\\\\\\\\\\\ H ///////////////////////| |
| |\+------------------------------------------+/| |
| |\| C |/| |
| |\| +------------------------------+ |/| |
| |\| |################ D ###########| L |/| |
| |\| |#+--------------------------+#| |/| |
| |\| |#| K |#| |/| |
| |\| |#| +----------------------+ |#| +-----+ |/| |
| |\| |#| | | |#| | /#\ | |/| |
| |\| |#| | | |#| | === | |/| |
|A|B|C|D|E| Child |F|D|G| IxJ |O|B|A|
| |/| |#| | | |#| | === | |\| |
| |/| |#| | | |#| | \#/ | |\| |
| |/| |#| +----------------------+ |#| +-----+ |\| |
| |/| |#| M |#| |\| |
| |/| |#+---------------------------#| |\| |
| |/| |################ D ###########| N |\| |
| |/| +------------------------------+ |\| |
| |/| C |\| |
| |/+------------------------------------------+\| |
| |//////////////////// H \\\\\\\\\\\\\\\\\\\\\\\| |
| +----------------------------------------------+ |
| A |
+--------------------------------------------------+
A: GtkContainer::border_width
B: xthickness
C: GtkWidget::focus_pad
D: GtkWidget::focus_width
E: CHILD_LEFT_SPACING
F: CHILD_RIGHT_SPACING
G: GtkOptionMenu::indicator_spacing::left
H: ythickness
I: GtkOptionMenu::indicator_size::width
J: GtkOptionMenu::indicator_size::height
K: CHILD_TOP_SPACING
L: GtkOptionMenu::indicator_spacing::top + GtkWidget::focus_width + GtkWidget::focus_pad + CHILD_TOP_SPACING
M: CHILD_BOTTOM_SPACING
N: GtkOptionMenu::indicator_spacing::bottom + GtkWidget::focus_width + GtkWidget::focus_pad + CHILD_BOTTOM_SPACING
O: GtkOptionMenu::indicator_spacing::right
II) interior_focus = FALSE
+--------------------------------------------------+
+ A |
| +----------------------------------------------+ |
| |#################### B #######################| |
| |#+------------------------------------------+#| |
| |#| C |#| |
| |#| +--------------------------------------+ |#| |
| |#| |\\\\\\\\\\\\\\\\ H ///////////////////| |#| |
| |#| |\+----------------------------------+/| |#| |
| |#| |\| K L |/| |#| |
| |#| |\| +----------------------+ +-----+ |/| |#| |
| |#| |\| | | | /#\ | |/| |#| |
| |#| |\| | | | === | |/| |#| |
|A|B|C|D|E| Child |F| IxJ |G|D|C|B|A|
| |#| |/| | | | === | |\| |#| |
| |#| |/| | | | \#/ | |\| |#| |
| |#| |/| +----------------------+ +-----+ |\| |#| |
| |#| |/| M N |\| |#| |
| |#| |/+----------------------------------+\| |#| |
| |#| |//////////////// H \\\\\\\\\\\\\\\\\\\| |#| |
| |#| +--------------------------------------+ |#| |
| |#| C |#| |
| |#+------------------------------------------+#| |
| |#################### B #######################| |
| +----------------------------------------------+ |
| A |
+--------------------------------------------------+
A: GtkContainer::border_width
B: GtkWidget::focus_width
C: GtkWidget::focus_padding
D: xthickness
E: CHILD_LEFT_SPACING
F: CHILD_RIGHT_SPACING + GtkOptionMenu::indicator_spacing::left
G: GtkOptionMenu::indicator_spacing::right
H: ythickness
I: GtkOptionMenu::indicator_size::width
J: GtkOptionMenu::indicator_size::height
K: CHILD_TOP_SPACING
L: CHILD_TOP_SPACING + GtkOptionMenu::indicator_spacing::top
M: CHILD_BOTTOM_SPACING
N: CHILD_BOTTOM_SPACING + GtkOptionMenu::indicator_spacing::bottom
III) interior_focus = FALSE, !HAVE_FOCUS
+--------------------------------------------------+
+ A |
| +----------------------------------------------+ |
| |\\\\\\\\\\\\\\\\\\\\ H ///////////////////////| |
| |\+------------------------------------------+/| |
| |\| |/| |
| |\| |/| |
| |\| |/| |
| |\| |/| |
| |\| K L |/| |
| |\| +----------------------+ +-----+ |/| |
| |\| | | | /#\ | |/| |
| |\| | | | === | |/| |
|A|D| E| Child |F| IxJ |G |D|A|
| |/| | | | === | |\| |
| |/| | | | \#/ | |\| |
| |/| +----------------------+ +-----+ |\| |
| |/| M N |\| |
| |/| |\| |
| |/| |\| |
| |/| |\| |
| |/| |\| |
| |/+------------------------------------------+\| |
| |//////////////////// H \\\\\\\\\\\\\\\\\\\\\\\| |
| +----------------------------------------------+ |
| A |
+--------------------------------------------------+
A: GtkContainer::border_width
B: GtkWidget::focus_width
C: GtkWidget::focus_padding
D: xthickness
E: CHILD_LEFT_SPACING + GtkWidget::focus_width + GtkWidget::focus_padding
F: CHILD_RIGHT_SPACING + GtkOptionMenu::in+icator_spacing::left
G: GtkOptionMenu::indicator_spacing::right + GtkWidget::focus_width + GtkWidget::focus_padding
H: ythickness
I: GtkOptionMenu::indicator_size::width
J: GtkOptionMenu::indicator_size::height
K: CHILD_TOP_SPACING + GtkWidget::focus_width + GtkWidget::focus_padding
L: CHILD_TOP_SPACING + GtkOptionMenu::indicator_spacing::top + GtkWidget::focus_width + GtkWidget::focus_padding
M: CHILD_BOTTOM_SPACING + GtkWidget::focus_width + GtkWidget::focus_padding
N: CHILD_BOTTOM_SPACING + GtkOptionMenu::indicator_spacing::bottom + GtkWidget::focus_width + GtkWidget::focus_padding
=====================
GtkButton
=====================
Style properties
GtkWidget::interior_focus = TRUE
GtkWidget::focus_width = 1
GtkWidget::focus_padding = 0
GtkButton::default_border = { 1, 1, 1, 1 };
GtkButton::default_outside_border = { 0, 0, 0, 0 };
GtkButton::child_displacement_x = 0;
GtkButton::child_displacement_y = 0;
Properties
GtkContainer::border_width = 0
#defines
CHILD_SPACING 1
I) HAS_DEFAULT && (!GtkWidget::interior-focus || !HAVE_FOCUS)
+----------------------------------------------+
| A |
| +------------------------------------------+ |
| |@@@@@@@@@@@@@@@@@@@ I @@@@@@@@@@@@@@@@@@@@| |
| |@+--------------------------------------+@| |
| |@|\\\\\\\\\\\\\\\\\ J //////////////////|@| |
| |@|\+----------------------------------+/|@| |
| |@|\| E |/|@| |
| |@|\| +------------------------------+ |/|@| |
| |@|\| |############# F ##############| |/|@| |
| |@|\| |#+--------------------------+#| |/|@| |
| |@|\| |#| L |#| |/|@| |
| |@|\| |#| +----------------------+ |#| |/|@| |
| |@|\| |#| | | |#| |/|@| |
| |@|\| |#| | | |#| |/|@| |
|A|B|D|E|F|G| Child |M|F|E|D|C|A|
| |@|/| |#| | | |#| |\|@| |
| |@|/| |#| | | |#| |\|@| |
| |@|/| |#| +----------------------+ |#| |\|@| |
| |@|/| |#| N |#| |\|@| |
| |@|/| |#+--------------------------+#| |\|@| |
| |@|/| |############# F ##############| |\|@| |
| |@|/| +------------------------------+ |\|@| |
| |@|/| E |\|@| |
| |@|/+----------------------------------+\|@| |
| |@|///////////////// J \\\\\\\\\\\\\\\\\\|@| |
| |@+--------------------------------------+@| |
| |@@@@@@@@@@@@@@@@@@@ K @@@@@@@@@@@@@@@@@@@@| |
| +------------------------------------------+ |
| A |
+----------------------------------------------+
A: GtkContainer::border-width
B: GtkButton::default-border::left
C: GtkButton::default-border::right
D: xthickness
E: GtkWidget::focus-padding
F: GtkWidget::focus-line-width
G: CHILD_SPACING + (depressed ? GtkButton::child-displacement-x : 0)
I: GtkButton::default-border::top
J: ythickness
K: GtkButton::default-border::bottom
L: CHILD_SPACING + (depressed ? GtkButton::child-displacement-y : 0)
M: CHILD_SPACING - (depressed ? GtkButton::child-displacement-x : 0)
N: CHILD_SPACING - (depressed ? GtkButton::child-displacement-y : 0)
II) !HAS_DEFAULT && (!GtkWidget::interior-focus || !HAVE_FOCUS)
+----------------------------------------------+
| |
| I |
| |
| +--------------------------------------+ |
| |\\\\\\\\\\\\\\\\\ J //////////////////| |
| |\+----------------------------------+/| |
| |\| E |/| |
| |\| +------------------------------+ |/| |
| |\| |############# F ##############| |/| |
| |\| |#+--------------------------+#| |/| |
| |\| |#| L |#| |/| |
| |\| |#| +----------------------+ |#| |/| |
| |\| |#| | | |#| |/| |
| |\| |#| | | |#| |/| |
| B |D|E|F|G| Child |M|F|E|D| C |
| |/| |#| | | |#| |\| |
| |/| |#| | | |#| |\| |
| |/| |#| +----------------------+ |#| |\| |
| |/| |#| N |#| |\| |
| |/| |#+--------------------------+#| |\| |
| |/| |############# F ##############| |\| |
| |/| +------------------------------+ |\| |
| |/| E |\| |
| |/+----------------------------------+\| |
| |///////////////// J \\\\\\\\\\\\\\\\\\| |
| +--------------------------------------+ |
| |
| K |
| |
+----------------------------------------------+
a) CAN_DEFAULT
B: GtkContainer::border-width + GtkButton::default-outside-border::left
C: GtkContainer::border-width + GtkButton::default-outside-border::right
D: xthickness
E: GtkWidget::focus-padding
F: GtkWidget::focus-line-width
G: CHILD_SPACING + (depressed ? GtkButton::child-displacement-x : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::left
I: GtkContainer::border-width + GtkButton::default-outside-border::top
J: ythickness
K: GtkContainer::border-width + GtkButton::default-outside-border::bottom
L: CHILD_SPACING + (depressed ? GtkButton::child-displacement-y : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::top
M: CHILD_SPACING - (depressed ? GtkButton::child-displacement-x : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::right
N: CHILD_SPACING - (depressed ? GtkButton::child-displacement-y : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::bottom
b) !CAN_DEFAULT
B: GtkContainer::border-width
C: GtkContainer::border-width
D: xthickness
E: GtkWidget::focus-padding
F: GtkWidget::focus-line-width
G: CHILD_SPACING + (depressed ? GtkButton::child-displacement-x : 0)
I: GtkContainer::border-width
J: ythickness
K: GtkContainer::border-width
L: CHILD_SPACING + (depressed ? GtkButton::child-displacement-y : 0)
M: CHILD_SPACING - (depressed ? GtkButton::child-displacement-x : 0)
N: CHILD_SPACING - (depressed ? GtkButton::child-displacement-y : 0)
III) HAS_DEFAULT && (GtkWidget::interior-focus && HAVE_FOCUS)
+----------------------------------------------+
| A |
| +------------------------------------------+ |
| |@@@@@@@@@@@@@@@@@@@ I @@@@@@@@@@@@@@@@@@@@| |
| |@+--------------------------------------+@| |
| |@|################# F ##################|@| |
| |@|#+----------------------------------+#|@| |
| |@|#| E |#|@| |
| |@|#| +------------------------------+ |#|@| |
| |@|#| |\\\\\\\\\\\\\ J //////////////| |#|@| |
| |@|#| |\+--------------------------+/| |#|@| |
| |@|#| |\| L |/| |#|@| |
| |@|#| |\| +----------------------+ |/| |#|@| |
| |@|#| |\| | | |/| |#|@| |
| |@|#| |\| | | |/| |#|@| |
|A|B|F|E|D|G| Child |M|D|E|F|C|A|
| |@|#| |/| | | |\| |#|@| |
| |@|#| |/| | | |\| |#|@| |
| |@|#| |/| +----------------------+ |\| |#|@| |
| |@|#| |/| N |\| |#|@| |
| |@|#| |/+--------------------------+\| |#|@| |
| |@|#| |///////////// J \\\\\\\\\\\\\\| |#|@| |
| |@|#| +------------------------------+ |#|@| |
| |@|#| E |#|@| |
| |@|#+----------------------------------+#|@| |
| |@|################# F ##################|@| |
| |@+--------------------------------------+@| |
| |@@@@@@@@@@@@@@@@@@@ K @@@@@@@@@@@@@@@@@@@@| |
| +------------------------------------------+ |
| A |
+----------------------------------------------+
A: GtkContainer::border-width
B: GtkButton::default-border::left
C: GtkButton::default-border::right
D: xthickness
E: GtkWidget::focus-padding
F: GtkWidget::focus-line-width
G: CHILD_SPACING + (depressed ? GtkButton::child-displacement-x : 0)
I: GtkButton::default-border::top
J: ythickness
K: GtkButton::default-border::bottom
L: CHILD_SPACING + (depressed ? GtkButton::child-displacement-y : 0)
M: CHILD_SPACING - (depressed ? GtkButton::child-displacement-x : 0)
N: CHILD_SPACING - (depressed ? GtkButton::child-displacement-y : 0)
IV) !HAS_DEFAULT && (GtkWidget::interior-focus && HAVE_FOCUS)
+----------------------------------------------+
| |
| I |
| |
| +--------------------------------------+ |
| |################# J ##################| |
| |#+----------------------------------+#| |
| |#| E |#| |
| |#| +------------------------------+ |#| |
| |#| |\\\\\\\\\\\\\ F //////////////| |#| |
| |#| |\+--------------------------+/| |#| |
| |#| |\| L |/| |#| |
| |#| |\| +----------------------+ |/| |#| |
| |#| |\| | | |/| |#| |
| |#| |\| | | |/| |#| |
| B |D|E|F|G| Child |M|F|E|D| C |
| |#| |/| | | |\| |#| |
| |#| |/| | | |\| |#| |
| |#| |/| +----------------------+ |\| |#| |
| |#| |/| N |\| |#| |
| |#| |/+--------------------------+\| |#| |
| |#| |///////////// F \\\\\\\\\\\\\\| |#| |
| |#| +------------------------------+ |#| |
| |#| E |#| |
| |#+----------------------------------+#| |
| |################# J ##################| |
| +--------------------------------------+ |
| |
| K |
| |
+----------------------------------------------+
a) CAN_DEFAULT
B: GtkContainer::border-width + GtkButton::default-outside-border::left
C: GtkContainer::border-width + GtkButton::default-outside-border::right
D: xthickness
E: GtkWidget::focus-padding
F: GtkWidget::focus-line-width
G: CHILD_SPACING + (depressed ? GtkButton::child-displacement-x : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::left
I: GtkContainer::border-width + GtkButton::default-outside-border::top
J: ythickness
K: GtkContainer::border-width + GtkButton::default-outside-border::bottom
L: CHILD_SPACING + (depressed ? GtkButton::child-displacement-y : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::top
M: CHILD_SPACING - (depressed ? GtkButton::child-displacement-x : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::right
N: CHILD_SPACING - (depressed ? GtkButton::child-displacement-y : 0) +
(GtkButton::default-outside-border - GtkButton::default-outside-border)::bottom
b) !CAN_DEFAULT
B: GtkContainer::border-width
C: GtkContainer::border-width
D: xthickness
E: GtkWidget::focus-padding
F: GtkWidget::focus-line-width
G: CHILD_SPACING + (depressed ? GtkButton::child-displacement-x : 0)
I: GtkContainer::border-width
J: ythickness
K: GtkContainer::border-width
L: CHILD_SPACING + (depressed ? GtkButton::child-displacement-y : 0)
M: CHILD_SPACING - (depressed ? GtkButton::child-displacement-x : 0)
N: CHILD_SPACING - (depressed ? GtkButton::child-displacement-y : 0)
======================
GtkCheckButton
======================
Note: This is the draw_indicator=TRUE case; draw_indicator=FALSE
is like GtkButton)
Style properties
GtkWidget::interior_focus = TRUE
GtkWidget::focus_width = 1
GtkWidget::focus_padding = 0
GtkButton::indicator-size = 13
GtkButton::indicator-spacing = 2
Properties
GtkContainer::border_width = 0
#defines
CHILD_SPACING 1
interior_focus
+-------------------------------------------+
| F |
| G +------------------------+ |
| |########### D ##########| |
| +------------+ |#+--------------------+#| |
| | | |#| E |#| |
| | | |#| +----------------+ |#| |
| | | |#| | | |#| |
|A| BxB |C|D|E| Child |E|#|F|
| | | |#| | | |#| |
| | | |#| +----------------+ |#| |
| | | |#| E |#| |
| +------------+ |#+--------------------+#| |
| |########### D ##########| |
| G +------------------------+ |
| F |
+-------------------------------------------+
A: GtkContainer::border-width + GtkCheckButton::indicator-spacing
B: GtkCheckButton::indicator-size
C: 2 * GtkCheckButton::indicator-spacing
D: GtkWidget::focus-line-width
E: GtkWidget::focus-padding
F: GtkContainer::border-width
G: GtkConainer::border-width + GtkCheckButton::indicator-spacing
!interior_focus
+-------------------------------------------+
| A |
| +---------------------------------------+ |
| |################ D ####################| |
| |#+-----------------------------------+#| |
| |#| G E |#| |
| |#| +------------+ +---------------+ |#| |
| |#| | | | | |#| |
| |#| | | | | |#| |
|A|D|F| BxB |C | Child |E|D|A|
| |#| | | | | |#| |
| |#| | | | | |#| |
| |#| +------------+ +---------------+ |#| |
| |#| G E |#| |
| |#+-----------------------------------+#| |
| |################ D ####################| |
| +---------------------------------------+ |
| A |
+-------------------------------------------+
A: GtkContainer::border-width
B: GtkCheckButton::indicator-size
C: 2 * GtkCheckButton::indicator-spacing
D: GtkWidget::focus-line-width
E: GtkWidget::focus-padding
F: GtkWidget::focus-padding + GtkCheckButton::indicator-spacing
G: GtkWidget::focus-padding + GtkCheckButton::indicator-spacing
===============
GtkEntry
===============
Style properties
GtkWidget::interior_focus = TRUE
GtkWidget::focus_width = 1
GtkWidget::focus_padding = 0
Properties
GtkContainer::border_width = 0
#defines
INNER_BORDER 2
interior_focus
+--------------------------------------+
|\\\\\\\\\\\\\\\\\ B //////////////////|
|\+----------------------------------+/|
|\| D |/|
|\| +------------------------------+ |/|
|\| | | |/|
|\| | | |/|
|A|D| |D|A|
|\| | | |/|
|\| | | |/|
|\| +------------------------------+ |/|
|\| D |/|
|\+----------------------------------+/|
|///////////////// B \\\\\\\\\\\\\\\\\/|
+--------------------------------------+
A: xthickness
B: ythickness
D: INNER_BORDER
!interior_focus
+------------------------------------------+
|####################C#####################|
|#+--------------------------------------+#|
|#|\\\\\\\\\\\\\\\\\ B //////////////////|#|
|#|\+----------------------------------+/|#|
|#|\| D |/|#|
|#|\| +------------------------------+ |/|#|
|#|\| | | |/|#|
|#|\| | | |/|#|
|C|A|D| |D|A|C|
|#|\| | | |/|#|
|#|\| | | |/|#|
|#|\| +------------------------------+ |/|#|
|#|\| D |/|#|
|#|\+----------------------------------+/|#|
|#|///////////////// B \\\\\\\\\\\\\\\\\/|#|
|#+--------------------------------------+#|
|####################C#####################|
+------------------------------------------+
A: xthickness
B: ythickness
C: GtkWidget::focus-line-width
D: INNER_BORDER + (HAVE_FOCUS ? 0 : GtkWidget::focus-line-width
Note - effect here for !interior_focus is that bevel moves in
by focus-line-width when entry gains focus