将 Cinnamon Desklet 的 Button 和 Tooltip 文本中的 Label 文本向左对齐答案

【问题标题】：Align Label text in Button and Tooltip text of Cinnamon Desklet to left将 Cinnamon Desklet 的 Button 和 Tooltip 文本中的 Label 文本向左对齐
【发布时间】：2018-03-30 05:19:46
【问题描述】：

我有一个 Cinnamon Desklet，它由一个 Button 组成。 Button 有一个Label（带有一些文字）和一个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);
}

以上代码生成了这个Desklet：

Button 和 Tooltip 文本中的 Label 文本如何左对齐而不是居中？

【问题讨论】：

标签： javascript css cinnamon

【解决方案1】：

好吧……我终于弄明白了……

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);
    }
};

结果：

【讨论】：