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 [2012/05/09 14:21] andrzejrdev:hig:panel-plugins [2012/06/14 15:06] (current) – [Size] landry
Line 68: Line 68:
 Labels should be oriented horizontally in the horizontal and deskbar mode and vertically (rotated clockwise) in the vertical mode. Labels should be oriented horizontally in the horizontal and deskbar mode and vertically (rotated clockwise) in the vertical mode.
  
-(RFC) For consistency with orther 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.+(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 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).
Line 99: Line 99:
     * 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?).      * 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 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 ===== ===== Panel properties =====
  
-==== mode ====+==== 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.
  
-The panel (starting with 4.10) has 3 modes : horizontal, vertical and deskbar. A plugin should layout its widgets following those rules : +==== Widgets padding/size ====
-  * use a vertical XfceHVBox if the panel is in vertical or deskbar mode, horizontal otherwise. +
-  * labels should be oriented vertically (using ''gtk_label_set_angle()'') in vertical mode. +
-  * progressbars should be oriented vertically in horizontal mode, horizontally otherwise.+
  
-==== size ==== +Widgets padding/size is important for consistency :
-Plugins should be tested to still render fine in all panel sizes, starting from 16px to 40px at least.+
  
-The exception is deskbar mode - it should look good when: +  * Plugins have to set their container border width with ''gtk_container_set_border_width()'' to 1px for panel size < 26px and 2px otherwise. Adjust it in the ''size-changed'' callback, which is called anyway in the panel creation. 
-  * a single row is used - in such a case plugins should resort to displaying icons only. Plugins which must display text or input fields are exempt from this requirement. +  * When displaying frame around the plugin, the border has to be 0px for a size of < 26px and 1px otherwise. 
-  * look "reasonable" (look good but potentially skipping or clipping some labels) with number of rows equal to 3 and row size equal to 22px.+  * 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 ==== ==== number of rows ====