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
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
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("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"));
        xButtonLine.appendChild(this._createMoveButton("down", "", "Descendre"));
        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", textContent: sLabel, title: 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(); };