Hob changes to match visual design
cover Hob changes to match visual design
Here's another set of patches to move Hob closer to the proposed design.
* Replace HobXpmLabelButtonBox with a new HobImageButton, this is a gtk.Button subclass which is modelled after the buttons in gnome-disk-utility, where Belen informs me the buttons on the main page for Layers, Recipes and Packages are modelled after.
Since the first submission of this patch I've also ensured the buttons use an alternative icon for the hover state per Shane's suggestion.
* Various tweaks to the LayerSelectionDialog per feedback from design:
- title is Layers
- add hover state icon to add button
- follow Gnome HIG and only use a close button
* Per feedback on my last pull request and the design document changes to the HobAltButton
- bold text which uses a pale blue colour per visual design
- modified 'Back to image configuration' buttons to have << prefix
* Unify implementation of the primary action button as a shared widget HobButton and make use of it where we currently set up an orange button (this class should be used for all primary buttons in a future patch).
Cheers,
Joshua
The following changes since commit 96e235a151fa04f5a15cd8b46f50a5852e2ba739:
Hob: Revert interfaces of callbacks for layer_button, view_recipes_button, and view_packages_button. (2012-03-22 14:36:04 +0000)
are available in the git repository at:
git://github.com/incandescant/bitbake josh/hob
https://github.com/incandescant/bitbake/tree/josh/hob
git://git.yoctoproject.org/poky-contrib josh/hob
http://git.yoctoproject.org/cgit/cgit.cgi/poky-contrib/log/?h=josh/hob
Joshua Lock (9):
lib/bb/ui/icons: add new icons for use in Hob, autocrop some existing
ones
lib/bb/ui/crumbs: replace HobXpmLabelButtonBox with HobImageButton lib/bb/ui/crumbs/builder: only show a close button on the Layer
Selector
lib/bb/ui/crumbs/hig: tweak 'Add Layer' button per visual design lib/bb/ui/crumbs: add colour for HobAltButton per visual design lib/bb/ui/crumbs: fix 'Back to image configuration' alt button text lib/bb/ui/crumbs/hobwidget: add HobButton widget for the primary
action
lib/bb/ui/crumbs: make use of HobButton for existing primary action
buttons
lib/bb/ui/crumbs/builder: change dialogue title to Layers
lib/bb/ui/crumbs/builder.py | 5 +- lib/bb/ui/crumbs/hig.py | 27 +++-- lib/bb/ui/crumbs/hobcolor.py | 1 + lib/bb/ui/crumbs/hobwidget.py | 148 ++++++++++++++++----------- lib/bb/ui/crumbs/imageconfigurationpage.py | 52 ++++------ lib/bb/ui/crumbs/imagedetailspage.py | 11 +-- lib/bb/ui/crumbs/packageselectionpage.py | 13 +-- lib/bb/ui/crumbs/recipeselectionpage.py | 13 +-- lib/bb/ui/icons/indicators/add-hover.png | Bin 0 -> 1212 bytes lib/bb/ui/icons/indicators/remove-hover.png | Bin 0 -> 2809 bytes lib/bb/ui/icons/layers/layers_hover.png | Bin 5390 -> 5257 bytes lib/bb/ui/icons/packages/packages_hover.png | Bin 7308 -> 7121 bytes lib/bb/ui/icons/recipe/recipe_hover.png | Bin 5003 -> 4866 bytes 13 files changed, 136 insertions(+), 134 deletions(-) create mode 100644 lib/bb/ui/icons/indicators/add-hover.png create mode 100644 lib/bb/ui/icons/indicators/remove-hover.png
Signature · 1 line
1.7.7.6
PATCH 3/9 lib/bb/ui/crumbs/builder: only show a close button on the Layer Selector
Per discussion with the design team the LayerSelectionDialog should only have a close button.
See: https://bugzilla.yoctoproject.org/show_bug.cgi?id=2083#c10
--- lib/bb/ui/crumbs/builder.py | 3 +-- 1 files changed, 1 insertions(+), 2 deletions(-)
lib/bb/ui/crumbs/builder.py +1 -2
@@ -671,8 +671,7 @@ class Builder(gtk.Window): flags = gtk.DIALOG_MODAL | gtk.DIALOG_DESTROY_WITH_PARENT | gtk.DIALOG_NO_SEPARATOR, - buttons = (gtk.STOCK_CANCEL, gtk.RESPONSE_NO, - gtk.STOCK_OK, gtk.RESPONSE_YES)) + buttons = (gtk.STOCK_CLOSE, gtk.RESPONSE_YES)) response = dialog.run() if response == gtk.RESPONSE_YES: self.configuration.layers = dialog.layers
Signature · 1 line
1.7.7.6
PATCH 2/9 lib/bb/ui/crumbs: replace HobXpmLabelButtonBox with HobImageButton
In reply to Joshua LockHobImageButton is an gtk.Button subclass, and therefore behaves like a button with prelight and focus states, with an icon and two lines of text - primary and secondary. The secondary text is displayed in a lighter colour using a new module method, soften_color(), per the design.
--- lib/bb/ui/crumbs/hobwidget.py | 123 ++++++++++++++------------- lib/bb/ui/crumbs/imageconfigurationpage.py | 40 +++++---- 2 files changed, 85 insertions(+), 78 deletions(-)
lib/bb/ui/crumbs/hobwidget.py +64 -59
@@ -53,8 +53,10 @@ class hic: ICON_INFO_HOVER_FILE = os.path.join(HOB_ICON_BASE_DIR, ('info/info_hover.png')) ICON_INDI_CONFIRM_FILE = os.path.join(HOB_ICON_BASE_DIR, ('indicators/confirmation.png')) ICON_INDI_ERROR_FILE = os.path.join(HOB_ICON_BASE_DIR, ('indicators/error.png')) - ICON_INDI_REMOVE = os.path.join(HOB_ICON_BASE_DIR, ('indicators/remove.png')) - ICON_INDI_ADD = os.path.join(HOB_ICON_BASE_DIR, ('indicators/add.png')) + ICON_INDI_REMOVE_FILE = os.path.join(HOB_ICON_BASE_DIR, ('indicators/remove.png')) + ICON_INDI_REMOVE_HOVER_FILE = os.path.join(HOB_ICON_BASE_DIR, ('indicators/remove-hover.png')) + ICON_INDI_ADD_FILE = os.path.join(HOB_ICON_BASE_DIR, ('indicators/add.png')) + ICON_INDI_ADD_HOVER_FILE = os.path.join(HOB_ICON_BASE_DIR, ('indicators/add-hover.png')) class hcc:
@@ -173,6 +175,27 @@ class HobViewTable (gtk.VBox): if not view_column.get_title() in self.toggle_columns: self.emit("row-activated", tree.get_model(), path) +""" +A method to calculate a softened value for the colour of widget when in the +provided state. + +widget: the widget whose style to use +state: the state of the widget to use the style for + +Returns a string value representing the softened colour +""" +def soften_color(widget, state=gtk.STATE_NORMAL): + # this colour munging routine is heavily inspired bu gdu_util_get_mix_color() + # from gnome-disk-utility: + # http://git.gnome.org/browse/gnome-disk-utility/tree/src/gdu-gtk/gdu-gtk.c?h=gnome-3-0 + blend = 0.7 + style = widget.get_style() + color = style.text[state] + color.red = color.red * blend + style.base[state].red * (1.0 - blend) + color.green = color.green * blend + style.base[state].green * (1.0 - blend) + color.blue = color.blue * blend + style.base[state].blue * (1.0 - blend) + return color.to_string() + class HobAltButton(gtk.Button): """ A gtk.Button subclass which has no relief, and so is more discrete
@@ -181,64 +204,46 @@ class HobAltButton(gtk.Button): gtk.Button.__init__(self, label) self.set_relief(gtk.RELIEF_NONE) -class HobXpmLabelButtonBox(gtk.EventBox): - """ label: name of buttonbox - description: the simple description +class HobImageButton(gtk.Button): """ - def __init__(self, display_file="", hover_file="", label="", description=""): - gtk.EventBox.__init__(self) - self._base_state_flags = gtk.STATE_NORMAL - self.set_events(gtk.gdk.MOTION_NOTIFY | gtk.gdk.BUTTON_PRESS | gtk.gdk.EXPOSE) - - self.connect("expose-event", self.cb) - self.connect("enter-notify-event", self.pointer_enter_cb) - self.connect("leave-notify-event", self.pointer_leave_cb) - - self.icon_hover = gtk.Image() - self.icon_hover.set_name("icon_image") - if type(hover_file) == str: - pixbuf = gtk.gdk.pixbuf_new_from_file(hover_file) - self.icon_hover.set_from_pixbuf(pixbuf) - - self.icon_display = gtk.Image() - self.icon_display.set_name("icon_image") - if type(display_file) == str: - pixbuf = gtk.gdk.pixbuf_new_from_file(display_file) - self.icon_display.set_from_pixbuf(pixbuf) - - self.tb = gtk.Table(2, 10, True) - self.tb.set_row_spacing(1, False) - self.tb.set_col_spacing(1, False) - self.add(self.tb) - self.tb.attach(self.icon_display, 0, 2, 0, 2, 0, 0) - self.tb.attach(self.icon_hover, 0, 2, 0, 2, 0, 0) - - lbl = gtk.Label() - lbl.set_alignment(0.0, 0.5) - lbl.set_markup("<span foreground=\'#1C1C1C\' font_desc=\'18px\'>%s</span>" % label) - self.tb.attach(lbl, 2, 10, 0, 1) - - lbl = gtk.Label() - lbl.set_alignment(0.0, 0.5) - lbl.set_markup("<span foreground=\'#1C1C1C\' font_desc=\'14px\'>%s</span>" % description) - self.tb.attach(lbl, 2, 10, 1, 2) - - def pointer_enter_cb(self, *args): - #if not self.is_focus(): - self.set_state(gtk.STATE_PRELIGHT) - self._base_state_flags = gtk.STATE_PRELIGHT - self.icon_hover.show() - self.icon_display.hide() - - def pointer_leave_cb(self, *args): - self.set_state(gtk.STATE_NORMAL) - self._base_state_flags = gtk.STATE_NORMAL - self.icon_display.show() - self.icon_hover.hide() - - def cb(self, w,e): - """ Hide items - first time """ - pass + A gtk.Button with an icon and two rows of text, the second of which is + displayed in a blended colour. + + primary_text: the main button label + secondary_text: optional second line of text + icon_path: path to the icon file to display on the button + """ + def __init__(self, primary_text, secondary_text="", icon_path="", hover_icon_path=""): + gtk.Button.__init__(self) + self.set_relief(gtk.RELIEF_NONE) + + self.icon_path = icon_path + self.hover_icon_path = hover_icon_path + + hbox = gtk.HBox(False, 3) + hbox.show() + self.add(hbox) + self.icon = gtk.Image() + self.icon.set_from_file(self.icon_path) + self.icon.set_alignment(0.5, 0.0) + self.icon.show() + if self.hover_icon_path and len(self.hover_icon_path): + self.connect("enter-notify-event", self.set_hover_icon_cb) + self.connect("leave-notify-event", self.set_icon_cb) + hbox.pack_start(self.icon, False, False, 0) + label = gtk.Label() + label.set_alignment(0.0, 0.5) + colour = soften_color(label) + mark = "%s\n<span fgcolor='%s'><small>%s</small></span>" % (primary_text, colour, secondary_text) + label.set_markup(mark) + label.show() + hbox.pack_start(label, True, True, 0) + + def set_hover_icon_cb(self, widget, event): + self.icon.set_from_file(self.hover_icon_path) + + def set_icon_cb(self, widget, event): + self.icon.set_from_file(self.icon_path) class HobInfoButton(gtk.EventBox): """
lib/bb/ui/crumbs/imageconfigurationpage.py +21 -19
@@ -24,7 +24,7 @@ import gtk import glib from bb.ui.crumbs.progressbar import HobProgressBar from bb.ui.crumbs.hobcolor import HobColors -from bb.ui.crumbs.hobwidget import hic, HobXpmLabelButtonBox, HobInfoButton, HobAltButton +from bb.ui.crumbs.hobwidget import hic, HobImageButton, HobInfoButton, HobAltButton, HobButton from bb.ui.crumbs.hoblistmodel import RecipeListModel from bb.ui.crumbs.hobpages import HobPage
@@ -139,9 +139,9 @@ class ImageConfigurationPage (HobPage): icon_file = hic.ICON_LAYERS_DISPLAY_FILE hover_file = hic.ICON_LAYERS_HOVER_FILE - self.layer_button = HobXpmLabelButtonBox(icon_file, hover_file, - "Layers", "Add support for machines, software, etc") - self.layer_button.connect("button-release-event", self.layer_button_clicked_cb) + self.layer_button = HobImageButton("Layers", "Add support for machines, software, etc.", + icon_file, hover_file) + self.layer_button.connect("clicked", self.layer_button_clicked_cb) markup = "Layers are a powerful mechanism to extend the Yocto Project " markup += "with your own functionality.\n"
@@ -163,9 +163,9 @@ class ImageConfigurationPage (HobPage): self.gtable.attach(self.machine_title, 0, 40, 0, 4) self.gtable.attach(self.machine_title_desc, 0, 40, 4, 6) self.gtable.attach(self.machine_combo, 0, 12, 6, 9) - self.gtable.attach(self.layer_button, 12, 36, 6, 10) - self.gtable.attach(self.layer_info_icon, 36, 40, 6, 9) - if show_progress_bar == True: + self.gtable.attach(self.layer_button, 12, 36, 6, 11) + self.gtable.attach(self.layer_info_icon, 36, 40, 6, 10) + if show_progress_bar: self.gtable.attach(self.progress_box, 0, 40, 13, 17) self.gtable.attach(self.machine_separator, 0, 40, 12, 13)
@@ -186,22 +186,24 @@ class ImageConfigurationPage (HobPage): self.image_combo_id = self.image_combo.connect("changed", self.image_combo_changed_cb) self.image_desc = gtk.Label() - self.image_desc.set_alignment(0, 0) + self.image_desc.set_alignment(0, 0.5) self.image_desc.set_line_wrap(True) # button to view recipes icon_file = hic.ICON_RCIPE_DISPLAY_FILE hover_file = hic.ICON_RCIPE_HOVER_FILE - self.view_recipes_button = HobXpmLabelButtonBox(icon_file, hover_file, - "View Recipes", "Add/remove recipes and collections") - self.view_recipes_button.connect("button-release-event", self.view_recipes_button_clicked_cb) + self.view_recipes_button = HobImageButton("View Recipes", + "Add/remove recipes and collections", + icon_file, hover_file) + self.view_recipes_button.connect("clicked", self.view_recipes_button_clicked_cb) # button to view packages icon_file = hic.ICON_PACKAGES_DISPLAY_FILE hover_file = hic.ICON_PACKAGES_HOVER_FILE - self.view_packages_button = HobXpmLabelButtonBox(icon_file, hover_file, - "View Packages", "Add/remove previously built packages to/from your image") - self.view_packages_button.connect("button-release-event", self.view_packages_button_clicked_cb) + self.view_packages_button = HobImageButton("View Packages", + "Add/remove previously built packages to/from your image", + icon_file, hover_file) + self.view_packages_button.connect("clicked", self.view_packages_button_clicked_cb) self.image_separator = gtk.HSeparator()
@@ -213,8 +215,8 @@ class ImageConfigurationPage (HobPage): self.gtable.attach(self.image_separator, 0, 40, 35, 36) def set_rcppkg_layout(self): - self.gtable.attach(self.view_recipes_button, 0, 18, 28, 32) - self.gtable.attach(self.view_packages_button, 18, 40, 28, 32) + self.gtable.attach(self.view_recipes_button, 0, 20, 27, 32) + self.gtable.attach(self.view_packages_button, 20, 40, 27, 32) def create_config_build_button(self): # Create the "Build packages" and "Just bake" buttons at the bottom
@@ -343,14 +345,14 @@ class ImageConfigurationPage (HobPage): self.image_combo.set_active(-1) self.image_combo.set_active(active) - def layer_button_clicked_cb(self, event, data): + def layer_button_clicked_cb(self, button): # Create a layer selection dialog self.builder.show_layer_selection_dialog() - def view_recipes_button_clicked_cb(self, event, data): + def view_recipes_button_clicked_cb(self, button): self.builder.show_recipes() - def view_packages_button_clicked_cb(self, event, data): + def view_packages_button_clicked_cb(self, button): self.builder.show_packages() def just_bake_button_clicked_cb(self, button):
Signature · 1 line
1.7.7.6
PATCH 4/9 lib/bb/ui/crumbs/hig: tweak 'Add Layer' button per visual design
In reply to Joshua LockUse a separate, pre-lit, icon when the button has the cursor over it.
--- lib/bb/ui/crumbs/hig.py | 27 ++++++++++++++++----------- 1 files changed, 16 insertions(+), 11 deletions(-)
lib/bb/ui/crumbs/hig.py +16 -11
@@ -28,7 +28,7 @@ import re import subprocess import shlex from bb.ui.crumbs.hobcolor import HobColors -from bb.ui.crumbs.hobwidget import hcc, hic, HobViewTable, HobInfoButton, HobAltButton +from bb.ui.crumbs.hobwidget import hcc, hic, HobViewTable, HobInfoButton from bb.ui.crumbs.progressbar import HobProgressBar """
@@ -815,23 +815,22 @@ class LayerSelectionDialog (CrumbsDialog): col1.pack_start(cell1, True) col1.set_cell_data_func(cell1, self.draw_delete_button_cb, layer_tv) - add_button = HobAltButton() + add_button = gtk.Button() + add_button.set_relief(gtk.RELIEF_NONE) box = gtk.HBox(False, 6) box.show() add_button.add(box) - im = gtk.Image() - im.set_from_file(hic.ICON_INDI_ADD) - im.show() - box.pack_start(im, expand=False, fill=False, padding=6) + add_button.connect("enter-notify-event", self.add_hover_cb) + add_button.connect("leave-notify-event", self.add_leave_cb) + self.im = gtk.Image() + self.im.set_from_file(hic.ICON_INDI_ADD_FILE) + self.im.show() + box.pack_start(self.im, expand=False, fill=False, padding=6) lbl = gtk.Label("Add layer") lbl.set_alignment(0.0, 0.5) lbl.show() box.pack_start(lbl, expand=True, fill=True, padding=6) add_button.connect("clicked", self.layer_widget_add_clicked_cb, layer_store, window) - add_button.set_can_default(True) - add_button.grab_default() - add_button.set_can_focus(True) - add_button.grab_focus() table_layer.attach(add_button, 0, 10, 1, 2, gtk.EXPAND | gtk.FILL, 0, 0, 6) layer_tv.set_model(layer_store)
@@ -839,6 +838,12 @@ class LayerSelectionDialog (CrumbsDialog): return hbox, layer_store + def add_hover_cb(self, button, event): + self.im.set_from_file(hic.ICON_INDI_ADD_HOVER_FILE) + + def add_leave_cb(self, button, event): + self.im.set_from_file(hic.ICON_INDI_ADD_FILE) + def __init__(self, title, layers, all_layers, parent, flags, buttons): super(LayerSelectionDialog, self).__init__(title, parent, flags, buttons)
@@ -849,7 +854,7 @@ class LayerSelectionDialog (CrumbsDialog): # icon for remove button in TreeView im = gtk.Image() - im.set_from_file(hic.ICON_INDI_REMOVE) + im.set_from_file(hic.ICON_INDI_REMOVE_FILE) self.rem_icon = im.get_pixbuf() # class members for internal use
Signature · 1 line
1.7.7.6
PATCH 1/9 lib/bb/ui/icons: add new icons for use in Hob, autocrop some existing ones
In reply to Joshua LockAdd add-hover and remove-hover icons for the Layer Selection Dialogue. Autocrop layers_hover, packages_hover and recipe_hover images.
--- lib/bb/ui/icons/indicators/add-hover.png | Bin 0 -> 1212 bytes lib/bb/ui/icons/indicators/remove-hover.png | Bin 0 -> 2809 bytes lib/bb/ui/icons/layers/layers_hover.png | Bin 5390 -> 5257 bytes lib/bb/ui/icons/packages/packages_hover.png | Bin 7308 -> 7121 bytes lib/bb/ui/icons/recipe/recipe_hover.png | Bin 5003 -> 4866 bytes 5 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 lib/bb/ui/icons/indicators/add-hover.png create mode 100644 lib/bb/ui/icons/indicators/remove-hover.png
lib/bb/ui/icons/indicators/add-hover.png new file binary +0 -0
lib/bb/ui/icons/indicators/remove-hover.png new file binary +0 -0
lib/bb/ui/icons/layers/layers_hover.png binary +0 -0
lib/bb/ui/icons/packages/packages_hover.png binary +0 -0
lib/bb/ui/icons/recipe/recipe_hover.png binary +0 -0
Signature · 1 line
1.7.7.6
PATCH 5/9 lib/bb/ui/crumbs: add colour for HobAltButton per visual design
In reply to Joshua LockThe visual design calls for the alternative button to have a pale blue colour.
--- lib/bb/ui/crumbs/hobcolor.py | 1 + lib/bb/ui/crumbs/hobwidget.py | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-)
lib/bb/ui/crumbs/hobcolor.py +1 -0
@@ -31,6 +31,7 @@ class HobColors: BLACK = "#000000" LIGHT_ORANGE = "#f7a787" YELLOW = "#ffff00" + PALE_BLUE = "#53b8ff" OK = WHITE RUNNING = PALE_GREEN
lib/bb/ui/crumbs/hobwidget.py +3 -2
@@ -200,8 +200,9 @@ class HobAltButton(gtk.Button): """ A gtk.Button subclass which has no relief, and so is more discrete """ - def __init__(self, label=None): - gtk.Button.__init__(self, label) + def __init__(self, label): + gtk.Button.__init__(self, "<span color='%s'><b>%s</b></span>" % (HobColors.PALE_BLUE, gobject.markup_escape_text(label))) + self.child.set_use_markup(True) self.set_relief(gtk.RELIEF_NONE) class HobImageButton(gtk.Button):
Signature · 1 line
1.7.7.6
PATCH 6/9 lib/bb/ui/crumbs: fix 'Back to image configuration' alt button text
In reply to Joshua LockDesign calls for these buttons to include << at the beginning of the label
--- lib/bb/ui/crumbs/packageselectionpage.py | 2 +- lib/bb/ui/crumbs/recipeselectionpage.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-)
lib/bb/ui/crumbs/packageselectionpage.py +1 -1
@@ -144,7 +144,7 @@ class PackageSelectionPage (HobPage): self.build_image_button.connect("clicked", self.build_image_clicked_cb) button_box.pack_end(self.build_image_button, expand=False, fill=False) - self.back_button = HobAltButton("Back to image configuration") + self.back_button = HobAltButton("<< Back to image configuration") self.back_button.connect("clicked", self.back_button_clicked_cb) button_box.pack_start(self.back_button, expand=False, fill=False)
lib/bb/ui/crumbs/recipeselectionpage.py +1 -1
@@ -166,7 +166,7 @@ class RecipeSelectionPage (HobPage): self.build_packages_button.connect("clicked", self.build_packages_clicked_cb) button_box.pack_end(self.build_packages_button, expand=False, fill=False) - self.back_button = HobAltButton("Back to image configuration") + self.back_button = HobAltButton("<< Back to image configuration") self.back_button.connect("clicked", self.back_button_clicked_cb) button_box.pack_start(self.back_button, expand=False, fill=False)
Signature · 1 line
1.7.7.6
PATCH 7/9 lib/bb/ui/crumbs/hobwidget: add HobButton widget for the primary action
In reply to Joshua LockThe design uses a big, bold labelled, orange button for the primary action on each dialogue. The HobButton implements this design as a reusable widget.
HobButton makes use of Pango Markup to use a relative size, x-large, for the button text to ensure it's relative to the system configured font sizes.
--- lib/bb/ui/crumbs/hobwidget.py | 20 ++++++++++++++++++++ 1 files changed, 20 insertions(+), 0 deletions(-)
lib/bb/ui/crumbs/hobwidget.py +20 -0
@@ -196,6 +196,26 @@ def soften_color(widget, state=gtk.STATE_NORMAL): color.blue = color.blue * blend + style.base[state].blue * (1.0 - blend) return color.to_string() +class HobButton(gtk.Button): + """ + A gtk.Button subclass which follows the visual design of Hob for primary + action buttons + + label: the text to display as the button's label + """ + def __init__(self, label): + gtk.Button.__init__(self, "<span size='x-large'><b>%s</b></span>" % gobject.markup_escape_text(label)) + self.child.set_use_markup(True) + + style = self.get_style() + button_color = gtk.gdk.Color(HobColors.ORANGE) + self.modify_bg(gtk.STATE_NORMAL, button_color) + self.modify_bg(gtk.STATE_PRELIGHT, button_color) + self.modify_bg(gtk.STATE_SELECTED, button_color) + + self.set_flags(gtk.CAN_DEFAULT) + self.grab_default() + class HobAltButton(gtk.Button): """ A gtk.Button subclass which has no relief, and so is more discrete
Signature · 1 line
1.7.7.6
PATCH 8/9 lib/bb/ui/crumbs: make use of HobButton for existing primary action buttons
In reply to Joshua LockReplace all gtk.Button instances that have the orange style applied with HobButton.
--- lib/bb/ui/crumbs/imageconfigurationpage.py | 12 +----------- lib/bb/ui/crumbs/imagedetailspage.py | 11 ++--------- lib/bb/ui/crumbs/packageselectionpage.py | 11 ++--------- lib/bb/ui/crumbs/recipeselectionpage.py | 11 ++--------- 4 files changed, 7 insertions(+), 38 deletions(-)
lib/bb/ui/crumbs/imageconfigurationpage.py +1 -11
@@ -223,19 +223,9 @@ class ImageConfigurationPage (HobPage): button_box = gtk.HBox(False, 6) # create button "Just bake" - just_bake_button = gtk.Button() - label = gtk.Label() - mark = "<span %s>Just bake</span>" % self.span_tag('24px', 'bold') - label.set_markup(mark) - - just_bake_button.set_image(label) + just_bake_button = HobButton("Just bake") just_bake_button.set_size_request(205, 49) - just_bake_button.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(HobColors.ORANGE)) - just_bake_button.modify_bg(gtk.STATE_PRELIGHT, gtk.gdk.Color(HobColors.ORANGE)) - just_bake_button.modify_bg(gtk.STATE_SELECTED, gtk.gdk.Color(HobColors.ORANGE)) just_bake_button.set_tooltip_text("Build image to get your target image") - just_bake_button.set_flags(gtk.CAN_DEFAULT) - just_bake_button.grab_default() just_bake_button.connect("clicked", self.just_bake_button_clicked_cb) button_box.pack_end(just_bake_button, expand=False, fill=False)
lib/bb/ui/crumbs/imagedetailspage.py +2 -9
@@ -23,7 +23,7 @@ import gobject import gtk from bb.ui.crumbs.hobcolor import HobColors -from bb.ui.crumbs.hobwidget import hic, HobViewTable, HobAltButton +from bb.ui.crumbs.hobwidget import hic, HobViewTable, HobAltButton, HobButton from bb.ui.crumbs.hobpages import HobPage #
@@ -264,15 +264,8 @@ class ImageDetailsPage (HobPage): # create button "Deploy image" name = "Deploy image" if name in buttonlist: - deploy_button = gtk.Button() - label = gtk.Label() - mark = "<span %s>Deploy image</span>" % self.span_tag('24px', 'bold') - label.set_markup(mark) - deploy_button.set_image(label) + deploy_button = HobButton('Deploy image') deploy_button.set_size_request(205, 49) - deploy_button.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(HobColors.ORANGE)) - deploy_button.modify_bg(gtk.STATE_PRELIGHT, gtk.gdk.Color(HobColors.ORANGE)) - deploy_button.modify_bg(gtk.STATE_SELECTED, gtk.gdk.Color(HobColors.ORANGE)) deploy_button.set_tooltip_text("Deploy image to get your target board") deploy_button.set_flags(gtk.CAN_DEFAULT) deploy_button.grab_default()
lib/bb/ui/crumbs/packageselectionpage.py +2 -9
@@ -23,7 +23,7 @@ import gtk import glib from bb.ui.crumbs.hobcolor import HobColors -from bb.ui.crumbs.hobwidget import HobViewTable, HobNotebook, HobAltButton +from bb.ui.crumbs.hobwidget import HobViewTable, HobNotebook, HobAltButton, HobButton from bb.ui.crumbs.hoblistmodel import PackageListModel from bb.ui.crumbs.hobpages import HobPage
@@ -129,15 +129,8 @@ class PackageSelectionPage (HobPage): button_box = gtk.HBox(False, 6) self.box_group_area.pack_start(button_box, expand=False, fill=False) - self.build_image_button = gtk.Button() - label = gtk.Label() - mark = "<span %s>Build image</span>" % self.span_tag('24px', 'bold') - label.set_markup(mark) - self.build_image_button.set_image(label) + self.build_image_button = HobButton('Build image') self.build_image_button.set_size_request(205, 49) - self.build_image_button.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(HobColors.ORANGE)) - self.build_image_button.modify_bg(gtk.STATE_PRELIGHT, gtk.gdk.Color(HobColors.ORANGE)) - self.build_image_button.modify_bg(gtk.STATE_SELECTED, gtk.gdk.Color(HobColors.ORANGE)) self.build_image_button.set_tooltip_text("Build image to get your target image") self.build_image_button.set_flags(gtk.CAN_DEFAULT) self.build_image_button.grab_default()
lib/bb/ui/crumbs/recipeselectionpage.py +2 -9
@@ -23,7 +23,7 @@ import gtk import glib from bb.ui.crumbs.hobcolor import HobColors -from bb.ui.crumbs.hobwidget import HobViewTable, HobNotebook, HobAltButton +from bb.ui.crumbs.hobwidget import HobViewTable, HobNotebook, HobAltButton, HobButton from bb.ui.crumbs.hoblistmodel import RecipeListModel from bb.ui.crumbs.hobpages import HobPage
@@ -151,15 +151,8 @@ class RecipeSelectionPage (HobPage): button_box = gtk.HBox(False, 6) self.box_group_area.pack_end(button_box, expand=False, fill=False) - self.build_packages_button = gtk.Button() - label = gtk.Label() - mark = "<span %s>Build packages</span>" % self.span_tag('24px', 'bold') - label.set_markup(mark) - self.build_packages_button.set_image(label) + self.build_packages_button = HobButton('Build packages') self.build_packages_button.set_size_request(205, 49) - self.build_packages_button.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(HobColors.ORANGE)) - self.build_packages_button.modify_bg(gtk.STATE_PRELIGHT, gtk.gdk.Color(HobColors.ORANGE)) - self.build_packages_button.modify_bg(gtk.STATE_SELECTED, gtk.gdk.Color(HobColors.ORANGE)) self.build_packages_button.set_tooltip_text("Build packages for customization") self.build_packages_button.set_flags(gtk.CAN_DEFAULT) self.build_packages_button.grab_default()
Signature · 1 line
1.7.7.6
PATCH 9/9 lib/bb/ui/crumbs/builder: change dialogue title to Layers
In reply to Joshua Lock--- lib/bb/ui/crumbs/builder.py | 2 +- 1 files changed, 1 insertions(+), 1 deletions(-)
lib/bb/ui/crumbs/builder.py +1 -1
@@ -664,7 +664,7 @@ class Builder(gtk.Window): binb_dialog.destroy() def show_layer_selection_dialog(self): - dialog = LayerSelectionDialog(title = "Layer Selection", + dialog = LayerSelectionDialog(title = "Layers", layers = copy.deepcopy(self.configuration.layers), all_layers = self.parameters.all_layers, parent = self,
Signature · 1 line
1.7.7.6
ACK.
If the texts on the buttons "Layers", "View Recipes" and "View Packages" can be larger and their layouts can be looser (see the visual design), that would be better. Leave it to the future.
But, anyway, ACK all.
--
Shane
Joshua Lock wrote on 2012-03-23:
Quoted 64 lines
Here's another set of patches to move Hob closer to the proposed design.
* Replace HobXpmLabelButtonBox with a new HobImageButton, this is a gtk.Button subclass which is modelled after the buttons in gnome-disk-utility, where Belen informs me the buttons on the main page for Layers, Recipes and Packages are modelled after. Since the first submission of this patch I've also ensured the buttons use an alternative icon for the hover state per Shane's suggestion.
* Various tweaks to the LayerSelectionDialog per feedback from design:
- title is Layers
- add hover state icon to add button
- follow Gnome HIG and only use a close button
* Per feedback on my last pull request and the design document changes to the HobAltButton
- bold text which uses a pale blue colour per visual design
- modified 'Back to image configuration' buttons to have << prefix
* Unify implementation of the primary action button as a shared widget HobButton and make use of it where we currently set up an orange button (this class should be used for all primary buttons in a future patch).Cheers,
JoshuaThe following changes since commit
96e235a151fa04f5a15cd8b46f50a5852e2ba739:Hob: Revert interfaces of callbacks for
layer_button,view_recipes_button,
andview_packages_button. (2012-03-22 14:36:04 +0000)are available in the git repository at:
git://github.com/incandescant/bitbakejosh/hob
https://github.com/incandescant/bitbake/tree/josh/hob
git://git.yoctoproject.org/poky-contribjosh/hob
http://git.yoctoproject.org/cgit/cgit.cgi/poky-contrib/log/?h=josh/hob
Joshua Lock (9):
lib/bb/ui/icons: add new icons for use in Hob, autocrop some existing
ones
lib/bb/ui/crumbs: replace HobXpmLabelButtonBox with HobImageButtonlib/bb/ui/crumbs/builder: only show a close button on the Layer
Selector
lib/bb/ui/crumbs/hig: tweak 'Add Layer' button per visual designlib/bb/ui/crumbs: add colour for HobAltButton per visual designlib/bb/ui/crumbs: fix 'Back to image configuration' alt button textlib/bb/ui/crumbs/hobwidget: add HobButton widget for the primary
actionlib/bb/ui/crumbs: make use of HobButton for existing primary action buttons
lib/bb/ui/crumbs/builder: change dialogue title to Layerslib/bb/ui/crumbs/builder.py | 5 +- lib/bb/ui/crumbs/hig.py | 27 +++-- lib/bb/ui/crumbs/hobcolor.py | 1 + lib/bb/ui/crumbs/hobwidget.py | 148 ++++++++++++++++----------- lib/bb/ui/crumbs/imageconfigurationpage.py | 52 ++++------ lib/bb/ui/crumbs/imagedetailspage.py | 11 +-- lib/bb/ui/crumbs/packageselectionpage.py | 13 +-- lib/bb/ui/crumbs/recipeselectionpage.py | 13 +-- lib/bb/ui/icons/indicators/add-hover.png | Bin 0 -> 1212 bytes lib/bb/ui/icons/indicators/remove-hover.png | Bin 0 -> 2809 bytes lib/bb/ui/icons/layers/layers_hover.png | Bin 5390 -> 5257 bytes lib/bb/ui/icons/packages/packages_hover.png | Bin 7308 -> 7121 bytes lib/bb/ui/icons/recipe/recipe_hover.png | Bin 5003 -> 4866 bytes 13 files changed, 136 insertions(+), 134 deletions(-) create mode100644
lib/bb/ui/icons/indicators/add-hover.pngcreate mode 100644lib/bb/ui/icons/indicators/remove-hover.png