Grammalecte  Check-in [0ca27b93f3]

Overview
Comment:[fx] change move button font with background images bundled within the CSS code in base64
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: 0ca27b93f3d6127da0f14467bcfd0ef0da9a416c399de7ae60345633728ec636
User & Date: olr on 2019-05-18 10:44:28
Other Links: manifest | tags
Context
2019-05-18
11:01
[fx] CSS: double transparency useless check-in: b4b917baff user: olr tags: trunk, fx
10:44
[fx] change move button font with background images bundled within the CSS code in base64 check-in: 0ca27b93f3 user: olr tags: trunk, fx
2019-05-17
13:53
[fr] ajustements check-in: 3eaf3a0427 user: olr tags: trunk, fr
Changes

Modified gc_lang/fr/webext/content_scripts/panel.css from [6b93ac970f] to [c94fc4e622].

79
80
81
82
83
84
85

















86
87
88
89

90
91
92
93
94
95
96
    background-color: hsl(210, 90%, 35%, .5);
    color: hsla(210, 0%, 100%, 1);
}
div.grammalecte_move_button {
    padding: 1px 5px;
    border-radius: 16px;
    color: hsla(180, 0%, 100%, .5);

















}
div.grammalecte_move_button:hover {
    background-color: hsla(180, 80%, 50%, .1);
    color: hsla(180, 0%, 100%, 1);

}
div.grammalecte_close_button {
    border-radius: 0 8px 0 4px;
    background-color: hsla(0, 80%, 50%, .5);
    color: hsla(210, 0%, 100%, .5);
}
div.grammalecte_close_button:hover {







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>




>







79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
    background-color: hsl(210, 90%, 35%, .5);
    color: hsla(210, 0%, 100%, 1);
}
div.grammalecte_move_button {
    padding: 1px 5px;
    border-radius: 16px;
    color: hsla(180, 0%, 100%, .5);
    opacity: .5;
}
div.grammalecte_move_button_up {
    padding: 1px 10px;
    background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABcSURBVChTlY67DcAgDEQZhg3oGJMuA9CzoTlbcoQT8zvpFX7cSQQiusKVK1wJCkgfJ/wE4LImA/NuDjCWNWY0lh8wyzvScgW7yIjLTc6zZB7EG/RLx7hyhSvnUOgfudLrksye1QAAAABJRU5ErkJggg==');
}
div.grammalecte_move_button_right {
    padding: 1px 10px;
    background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABlSURBVChTdYs5DoBADAP3hzT0/IyWlpaSlwUHbaIc3pGmSGwPEake5Oeyp7JDli0HygZb3h4w0kbpmFbSKBZNho9qWWWc8M9rWa1c0PNYNCM3THk6psYDW94eUHkhy+hgWRaR8QHurtJh4OI9JwAAAABJRU5ErkJggg==');
}
div.grammalecte_move_button_down {
    padding: 1px 10px;
    background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABcSURBVChTY/j//z9JGKsgPoxVEB/GKogPg4jrJOBKkAYzICYGbAdiuJMIaVoNxHAnEdK0AIjh6pA1gDC6pjlAjKIGhQPFpkAMAhiKQRhDAIqVsYiBMVZB3Pg/AwAQkdVnCojycwAAAABJRU5ErkJggg==');
}
div.grammalecte_move_button_left {
    padding: 1px 10px;
    background: center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABaSURBVChTY/j//z8+3IguhsJBw/eBeB+aGE4N14AYBIjScBaIYYCghsNAjAzwatgFxOgApwZ9IMYG8NqATRNBP6BrIqgBhJE1EaUBhGGaiNYAwkZAjKbhPwMAP5rVDlUnDt8AAAAASUVORK5CYII=');
}
div.grammalecte_move_button:hover {
    background-color: hsla(180, 80%, 50%, .1);
    color: hsla(180, 0%, 100%, 1);
    opacity: 1;
}
div.grammalecte_close_button {
    border-radius: 0 8px 0 4px;
    background-color: hsla(0, 80%, 50%, .5);
    color: hsla(210, 0%, 100%, .5);
}
div.grammalecte_close_button:hover {

Modified gc_lang/fr/webext/content_scripts/panel.js from [8e0ee87553] to [e1fa20e342].

70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
        if (this.sId === "grammalecte_gc_panel") {
            xButtonLine.appendChild(this._createCopyButton());
        }
        if (this.bFlexible) {
            xButtonLine.appendChild(this._createMoveButton("changeWidth", "⭾", "Bascule la largeur"));
            xButtonLine.appendChild(this._createMoveButton("changeHeight", "⭿", "Bascule la hauteur"));
        }
        xButtonLine.appendChild(this._createMoveButton("up", "", "Monter"));
        xButtonLine.appendChild(this._createMoveButton("left", "", "À gauche"));
        xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
        xButtonLine.appendChild(this._createMoveButton("right", "", "À droite"));
        xButtonLine.appendChild(this._createMoveButton("down", "", "Descendre"));
        this.xCloseButton = this._createCloseButton();
        xButtonLine.appendChild(this.xCloseButton);
        return xButtonLine;
    }

    _createWaitIcon () {
        let xWaitIcon = oGrammalecte.createNode("div", {className: "grammalecte_spinner"});
        return xWaitIcon;
    }

    _createCopyButton () {
        let xButton = oGrammalecte.createNode("div", {id: "grammalecte_clipboard_button", className: "grammalecte_panel_button grammalecte_copy_button", textContent: "📋", title: "Copier le contenu de l’éditeur dans le presse-papiers"});
        xButton.onclick = () => { this.copyTextToClipboard(); };
        return xButton;
    }

    _createMoveButton (sAction, sLabel, sTitle) {
        let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_move_button", textContent: sLabel, title: sTitle});
        xButton.onclick = () => { this[sAction](); };
        return xButton;
    }

    _createCloseButton () {
        let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"});
        xButton.onclick = () => { this.hide(); };







|
|

|
|

















|







70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
        if (this.sId === "grammalecte_gc_panel") {
            xButtonLine.appendChild(this._createCopyButton());
        }
        if (this.bFlexible) {
            xButtonLine.appendChild(this._createMoveButton("changeWidth", "⭾", "Bascule la largeur"));
            xButtonLine.appendChild(this._createMoveButton("changeHeight", "⭿", "Bascule la hauteur"));
        }
        xButtonLine.appendChild(this._createMoveButton("up", "", "Monter")); // use char ⏶ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
        xButtonLine.appendChild(this._createMoveButton("left", "", "À gauche")); // use char ⏴ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
        xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
        xButtonLine.appendChild(this._createMoveButton("right", "", "À droite")); // use char ⏵ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
        xButtonLine.appendChild(this._createMoveButton("down", "", "Descendre")); // use char ⏷ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
        this.xCloseButton = this._createCloseButton();
        xButtonLine.appendChild(this.xCloseButton);
        return xButtonLine;
    }

    _createWaitIcon () {
        let xWaitIcon = oGrammalecte.createNode("div", {className: "grammalecte_spinner"});
        return xWaitIcon;
    }

    _createCopyButton () {
        let xButton = oGrammalecte.createNode("div", {id: "grammalecte_clipboard_button", className: "grammalecte_panel_button grammalecte_copy_button", textContent: "📋", title: "Copier le contenu de l’éditeur dans le presse-papiers"});
        xButton.onclick = () => { this.copyTextToClipboard(); };
        return xButton;
    }

    _createMoveButton (sAction, sLabel, sTitle) {
        let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_move_button grammalecte_move_button_"+sAction, textContent: sLabel, title: sTitle});
        xButton.onclick = () => { this[sAction](); };
        return xButton;
    }

    _createCloseButton () {
        let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"});
        xButton.onclick = () => { this.hide(); };