Re: A couple of extension writing questions

[Clemens <clemens lab21 org>]

Am 13.05.2012 11:57, schrieb Neil Bird:

  I'm just putting the final touches to a GNOME Shell extension I've been writing, and I'd like to ask if anyone has any idea how to achieve some things I've not been able to find out for myself.


- I'd like to use a custom icon.  At the moment, I'm using a text label.  I did manage to load a PNG as an icon, but couldn't figure out how to size it correctly (it's 16px high but not square), and with no supplied size info. it appeared too low (with its top aligned to the text's bottom), making the whole top panel taller.  Plus, by default it wouldn't highlight on hover.  Do I need to get clever with some CSS and background settings?

  I also couldn't figure out where to put custom SVGs, I can only make extensions use system-installed /usr/share/... files. /usr/local/share/../ & ~/.local/share/... didn't work (although neither of these is practical for a stand-alone extension).  In fact, even a standard one didn't work (accessories-text-editor-symbolic.svg), I just got a grey rectangle [although that was the only standard one that failed].


- I'd also like to style some tooltips (to be left aligned), but I couldn't find a way to refer to them from the stylesheet, nor to apply style classes to them from code.  Is that possible?


  For ref. I'm on Fedora 16 & GNOME 3.2.

hi,

i have used a PanelButton with custom css in the 3.2 version of my extension:

function SettingButton() {
  this._init();
}

SettingButton.prototype = {
  __proto__: PanelMenu.ButtonBox.prototype,

  _init : function() {
    PanelMenu.ButtonBox.prototype._init.call(this, {
       reactive: true, can_focus: true, track_hover: true,
       style_class: 'my-settings-icon'
    });

    this.setTooltip(_("Your tooltip goes here"));
    this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPress));
  },

  _onButtonPress: function(actor, event) {
    // The button was clicked
  },

  setTooltip: function(text) {
    if (text != null) {
      this.tooltip = text;
      this.actor.has_tooltip = true;
      this.actor.tooltip_text = text;
    } else {
      this.actor.has_tooltip = false;
      this.tooltip = null;
    }
  },

  destroy: function() {
    this.actor.destroy();
  }
}

I have put the icons in a sub-folder of the extension (images). The css:

.my-settings-icon {
    width: 16px;
    height: 16px;
    background-image: url("images/settings.svg");
}

.my-settings-icon:hover {
    background-image: url("images/settings_hover.svg");
}


Hope that helps,
  clemens