Search code examples
javascriptcsscinnamon

Align Label text in Button and Tooltip text of Cinnamon Desklet to left


I have a Cinnamon Desklet which consists of a Button. The Button has a Label (with some text) and also a Tooltip:

const Desklet = imports.ui.desklet;
const St = imports.gi.St;
const Tooltips = imports.ui.tooltips;

function MyDesklet(metadata, desklet_id) {
    this._init(metadata, desklet_id);
}

MyDesklet.prototype = {
    __proto__: Desklet.Desklet.prototype,

    _init: function(metadata, desklet_id) {
        Desklet.Desklet.prototype._init.call(this, metadata, desklet_id);

        this.setupUI();
    },

    setupUI: function() {
        // main container for the desklet
        this.boxLayout = new St.BoxLayout({
            vertical: true,
            width: 100,
            height: 40
        });

        let label = new St.Label({text: "Label text"});
        // style does not work
        let button = new St.Button({child: label, style: "text-align: left;"});
        let tooltip = new Tooltips.Tooltip(button,
                _("Tooltip\ntext"));
        // Does not work
        tooltip.style = "text-align: left;";

        this.boxLayout.add_actor(button);
        this.setContent(this.boxLayout);
    }
}

function main(metadata, desklet_id) {
    return new MyDesklet(metadata, desklet_id);
}

The above code results in this Desklet:

enter image description here

How can the Label text inside the Button and the Tooltip text be aligned to left instead of centre?


Solution

  • OK... I finally managed to figure it out...

    const Desklet = imports.ui.desklet;
    const St = imports.gi.St;
    
    function MyDesklet(metadata, desklet_id) {
        this._init(metadata, desklet_id);
    }
    
    MyDesklet.prototype = {
        __proto__ : Desklet.Desklet.prototype,
    
        _init : function(metadata, desklet_id) {
            Desklet.Desklet.prototype._init.call(this, metadata, desklet_id);
    
            this.setupUI();
        },
    
        setupUI : function() {
            // main container for the desklet
            this.boxLayout = new St.BoxLayout({
                vertical : true,
                width : 100,
                height : 40
            });
    
            let label = new St.Label({text : "Label text"});
            // 'x_align' aligns the Label inside the Button
            let button = new St.Button({
                    child: label,
                    x_align: St.Align.START
            });
            let tooltip = new Tooltip(button, _("Tooltip\ntext"));
            // Use custom method 'set_style()' to set Tooltip style
            tooltip.set_style("text-align: left;");
    
            this.boxLayout.add_actor(button);
            this.setContent(this.boxLayout);
        }
    }
    
    function main(metadata, desklet_id) {
        return new MyDesklet(metadata, desklet_id);
    }
    
    // Custom Tooltip with set_style()
    function Tooltip(actor, text) {
     this._init(actor, text);
    }
    Tooltip.prototype = {
        __proto__: imports.ui.tooltips.Tooltip.prototype,
    
        _init: function(actor, text) {
            imports.ui.tooltips.Tooltip.prototype._init.call(this, actor, text);
        },
    
        // Method to set Tooltip style
        set_style: function(style) {
             this._tooltip.set_style(style);
        }
    };
    

    Result:

    Screenshot of resulting Desklet