Xfce Wiki

Sub domains
 

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
dev:hig:panel-plugins [2010/10/02 17:26] – Externe Bearbeitung 127.0.0.1dev:hig:panel-plugins [2012/06/14 15:06] (current) – [Size] landry
Line 4: Line 4:
  
 For information about strings style please refer to this [[style:strings|page]]. For information about strings style please refer to this [[style:strings|page]].
 +
 +===== About =====
 +
 +==== Rationale ====
 +UI consistency is an important aspect of a mature desktop like Xfce. On the other hand, there are tons of panel plugins out there, developed by many different people. A written set of UI guidelines will help those developers ensure their plugins maintain some basic level of consistency.
 +
 +==== Process ====
 +We're trying to do this in a wiki fashion, so everyone is welcome to improve this. When you add something new, put "[draft]" before it. This way, plugin developers know to keep an eye on it, and people can provide their comments. If you aren't sure how something should be handled but think it should be discussed, put "[rfc]" (request for comments) before it.
 +
 +==== Plugin Classes ====
 +Most guidelines apply differently based on the plugin class. ("Class" here means bin or category - it is not used in the GObject sense). The document is split into sections for each of these classes. The guidelines that apply generally are listed in the "General" section.
 +
  
 ===== General ===== ===== General =====
  
 +==== Tooltip ====
 +
 +If displaying a value in a tooltip, prefer the GtkTooltip API in favor of the GtkTooltips deprecated API. Using [[http://developer.gnome.org/gtk/2.24/GtkWidget.html#gtk-widget-set-tooltip-text|''gtk_widget_set_tooltip_text()'']] should be enought in most cases. If you need to update the tooltip more often than every 500ms (gtk default) you might need to set ''gtk-tooltip-timeout'' property on a ''GtkSettings'' instance.
 +
 +<code>
 + GtkSettings *settings;
 + settings = gtk_settings_get_default();
 + if (g_object_class_find_property(G_OBJECT_GET_CLASS(settings), "gtk-tooltip-timeout"))
 +   g_object_set(settings, "gtk-tooltip-timeout", update-interval - 10, NULL);
 +</code>
 ==== Context Menu ==== ==== Context Menu ====
  
 The right click context menu provides items with default actions like "Move", "Delete", and "Configure the panel" It is possible to add predefined items like "About" and "Properties". The right click context menu provides items with default actions like "Move", "Delete", and "Configure the panel" It is possible to add predefined items like "About" and "Properties".
  
-The About item is seldomly used, which makes it recommended to not include it at all.  But that option is left open to the plugin writer.+The About item is seldomly used, which makes it recommended to not include it at all.  But that option is left open to the plugin writer. In any case use <code>gtk_show_about_dialog()</code>
  
 Some plugins add a custom Help item inside this menu, but it is more common to put a Help button inside the properties dialog.  Usually the user will want to open the properties dialog to have a better idea of the plugin.  If you don't provide a properties dialog, you can have a reason to add a custom item. Some plugins add a custom Help item inside this menu, but it is more common to put a Help button inside the properties dialog.  Usually the user will want to open the properties dialog to have a better idea of the plugin.  If you don't provide a properties dialog, you can have a reason to add a custom item.
Line 24: Line 46:
  
 On a completely different note, when the properties dialog is open, the context menu must be blocked with [[http://www.xfce.org/documentation/api/libxfce4panel/XfcePanelPlugin.html#xfce-panel-plugin-block-menu|xfce_panel_plugin_block_menu()]].  When the properties dialog is closed, it can then be unblock again with [[http://www.xfce.org/documentation/api/libxfce4panel/XfcePanelPlugin.html#xfce-panel-plugin-unblock-menu|xfce_panel_plugin_unblock_menu()]]. On a completely different note, when the properties dialog is open, the context menu must be blocked with [[http://www.xfce.org/documentation/api/libxfce4panel/XfcePanelPlugin.html#xfce-panel-plugin-block-menu|xfce_panel_plugin_block_menu()]].  When the properties dialog is closed, it can then be unblock again with [[http://www.xfce.org/documentation/api/libxfce4panel/XfcePanelPlugin.html#xfce-panel-plugin-unblock-menu|xfce_panel_plugin_unblock_menu()]].
 +
 +The properties dialog should be created using ''xfce_titled_dialog_new_with_buttons()''
 +A subtitle can be set using ''xfce_titled_dialog_set_subtitle()'', and a window icon reflecting the plugin should be set using ''gtk_window_set_icon_name()''.
  
 ===== Main UIs ===== ===== Main UIs =====
Line 38: Line 63:
  
 The button has to display the image at the left or at the top given the panel's orientation. The button has to display the image at the left or at the top given the panel's orientation.
 +
 +==== Labels ====
 +
 +Labels should be oriented horizontally in the horizontal and deskbar mode and vertically (rotated clockwise) in the vertical mode.
 +
 +(RFC) For consistency with other panel plugins and for good aligning of plugins in the panel, I'd suggest aligning all labels to the left edge of the plugin, or icon, if present. Currently many plugins center their labels, which looks poorly in the deskbar mode, or if multiple rows are used in other modes.
 +
 +If plugin displays multiple rows of labels, it should preserve their native spacing (e.g. vbox with labels should be wrapped with a GtkAdjustment widget to prevent expanding the box).
 +
 +If multiple labels don't fit in the panel row, then either some of them should be hidden/rearranged, or "small" property should be disabled.
 +
 +==== Images or Icons ====
 +
 +If the plugin displays an icon-sized image, it should be aligned with the left edge (or top edge in the vertical mode) of the plugin. The size of the icon should match the size of icons embedded in buttons (launchers etc.). If all image sizes are same, the user may be able to set the size of the plugin in such a way that the images are not resized (resizing leads to smoothing the icon).
  
 ==== Input ==== ==== Input ====
Line 55: Line 94:
 The different elements are contained inside a box, the border width of the box is 0, and the spacing between the children is 2 pixels.  For the comments about the labels refer to the button class. The different elements are contained inside a box, the border width of the box is 0, and the spacing between the children is 2 pixels.  For the comments about the labels refer to the button class.
  
-Given the panel orientation is horizontal and vertical, the progress bar has to be either vertical and horizontal.+Some comments on the above design: 
 +  * IMHO it would be better to flush all labels to the left (align them with the icon) and to stop them expand vertically. 
 +  * It would be really nice to get rid of the progress bars.  What if we could replace all the progress bars with custom indicators drawn on top of the icon itself? 
 +    * They will never be properly aligned across rows (we could try putting them between the icon and the labels but what if there is no icon?).  
 +    * It would be nice to use the above design in the deskbar mode as well, but currently if the number of rows is 1, labels and progress bars wouldn'd fit next to the icon. 
 +    * It would be nice if the monitor plugin could display only an icon and still be useful (have the gauge displayed on it) - not too different from the mixer plugin. 
 + 
 +The above would result in the following layout (mockup): 
 + 
 +{{http://img837.imageshack.us/img837/2050/horizontal.png}} 
 + 
 +In a horizontal panel. 
 + 
 +{{http://img85.imageshack.us/img85/9162/deskbar.png}} 
 + 
 +In a deskbar. 
 + 
 +Note that the icons/labels are aligned wrt. each other, and that the monitor is still usable even if only icon is displayed. 
 +===== Panel properties ===== 
 + 
 +==== Mode ==== 
 + 
 +The panel has three modes: horizontal, vertical, and deskbar. 
 + 
 +=== Horizontal mode === 
 +  * Widgets are placed horizontally 
 +  * Progressbars are placed vertically 
 + 
 +=== Vertical mode === 
 +  * Widgets are placed vertically 
 +  * Labels are rotated to 90 degrees 
 +  * Progressbars are placed horizontally 
 + 
 +=== Deskbar mode === 
 +  * Widgets are placed vertically 
 +  * Composited widgets can be packed horizontally 
 +  * Labels are not rotated 
 +  * Progressbars are placed horizontally 
 + 
 +==== Size ==== 
 + 
 +The panel can be made from 16px tall to 128px tall, multiplied by the amount of rows : that makes a lot of combinations to test when designing an UI for a plugin, and one should try to make its UI consistent and usable in most sizes. 
 + 
 +==== Widgets padding/size ==== 
 + 
 +Widgets padding/size is important for consistency : 
 + 
 +  * Plugins have to set their container border width with ''gtk_container_set_border_width()'' to 1px for a panel size < 26px and 2px otherwise. Adjust it in the ''size-changed'' callback, which is called anyway in the panel creation. 
 +  * When displaying a frame around the plugin, the border has to be 0px for a size of < 26px and 1px otherwise. 
 +  * Plugins can set a default spacing between children in the container via the //spacing// parameter to ''xfce_hvbox_new()'' 
 +  * Labels should be packed (via ''gtk_box_pack_start()'' or ''gtk_container_add()'') with a 2px padding. 
 +  * Progressbars, images and buttons should be packed with a 0px padding 
 +  * Progressbars should be 8px wide (when vertical, 8px tall when horizontal), use -1 for the other size to let the parent widget set the size. 
 + 
 +==== event box ==== 
 +If the plugin has an eventbox (to receive clicks or such), it should be made invisible to avoid problems with transparent/coloured panels. It should also be above its childs to actually receive events. 
 +<code> 
 +gtk_event_box_set_visible_window(GTK_EVENT_BOX(ebox), FALSE); 
 +gtk_event_box_set_above_child(GTK_EVENT_BOX(ebox), TRUE); 
 +</code> 
 +==== number of rows ==== 
 + 
 +plugins should set the ''small'' property (using ''xfce_panel_plugin_set_small()'') only if they are intended to render on a single row, and not in deskbar mode. ''size-changed'' callback should take care of setting the widgets size taking into account the amount of rows. A common construct is to use  
 +<code> 
 +size /= xfce_panel_plugin_get_nrows (plugin) 
 +</code> 
 +before setting size on the various widgets.
  
 +==== Action widget ====
 +The right-click menu should be accessible through all (if possible) widgets of the plugin. Generally you only need to use ''xfce_panel_plugin_add_action_widget()'' on the containing XfceHVBox to achieve that.