Grammalecte  Check-in [0ca27b93f3]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

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 2019-05-18 10:44:28
Context
2019-05-18
11:01
[fx] CSS: double transparency useless check-in: b4b917baff user: olr tags: fx, trunk
10:44
[fx] change move button font with background images bundled within the CSS code in base64 check-in: 0ca27b93f3 user: olr tags: fx, trunk
2019-05-17
13:53
[fr] ajustements check-in: 3eaf3a0427 user: olr tags: fr, trunk
Changes

Changes to gc_lang/fr/webext/content_scripts/panel.css.

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

Changes to gc_lang/fr/webext/content_scripts/panel.js.

    70     70           if (this.sId === "grammalecte_gc_panel") {
    71     71               xButtonLine.appendChild(this._createCopyButton());
    72     72           }
    73     73           if (this.bFlexible) {
    74     74               xButtonLine.appendChild(this._createMoveButton("changeWidth", "⭾", "Bascule la largeur"));
    75     75               xButtonLine.appendChild(this._createMoveButton("changeHeight", "⭿", "Bascule la hauteur"));
    76     76           }
    77         -        xButtonLine.appendChild(this._createMoveButton("up", "⏶", "Monter"));
    78         -        xButtonLine.appendChild(this._createMoveButton("left", "⏴", "À gauche"));
           77  +        xButtonLine.appendChild(this._createMoveButton("up", " ", "Monter")); // use char ⏶ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
           78  +        xButtonLine.appendChild(this._createMoveButton("left", " ", "À gauche")); // use char ⏴ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    79     79           xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
    80         -        xButtonLine.appendChild(this._createMoveButton("right", "⏵", "À droite"));
    81         -        xButtonLine.appendChild(this._createMoveButton("down", "⏷", "Descendre"));
           80  +        xButtonLine.appendChild(this._createMoveButton("right", " ", "À droite")); // use char ⏵ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
           81  +        xButtonLine.appendChild(this._createMoveButton("down", " ", "Descendre")); // use char ⏷ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    82     82           this.xCloseButton = this._createCloseButton();
    83     83           xButtonLine.appendChild(this.xCloseButton);
    84     84           return xButtonLine;
    85     85       }
    86     86   
    87     87       _createWaitIcon () {
    88     88           let xWaitIcon = oGrammalecte.createNode("div", {className: "grammalecte_spinner"});
................................................................................
    92     92       _createCopyButton () {
    93     93           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"});
    94     94           xButton.onclick = () => { this.copyTextToClipboard(); };
    95     95           return xButton;
    96     96       }
    97     97   
    98     98       _createMoveButton (sAction, sLabel, sTitle) {
    99         -        let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_move_button", textContent: sLabel, title: sTitle});
           99  +        let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_move_button grammalecte_move_button_"+sAction, textContent: sLabel, title: sTitle});
   100    100           xButton.onclick = () => { this[sAction](); };
   101    101           return xButton;
   102    102       }
   103    103   
   104    104       _createCloseButton () {
   105    105           let xButton = oGrammalecte.createNode("div", {className: "grammalecte_panel_button grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"});
   106    106           xButton.onclick = () => { this.hide(); };