Grammalecte  Check-in [a0ef5bac85]

Overview
Comment:[fx] gc panel: set size and position update
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: a0ef5bac858e39e7b4ee042d703a8ea793a9301188c498894b493225d2e0e822
User & Date: olr on 2019-05-20 08:40:48
Other Links: manifest | tags
Context
2019-05-20
12:18
[fx] gc panel: CSS adjustements and auto-refresh adjustements check-in: e4791e17bb user: olr tags: fx, trunk
08:40
[fx] gc panel: set size and position update check-in: a0ef5bac85 user: olr tags: fx, trunk
08:40
[fr] ocr: set options to ocr check-in: 9f2404ab0b user: olr tags: fr, trunk
Changes

Modified gc_lang/fr/webext/content_scripts/panel.css from [8c125dc8b5] to [8f13a1fabe].

    70     70       font-weight: bold;
    71     71       text-align: center;
    72     72       cursor: pointer;
    73     73   }
    74     74   div.grammalecte_copy_button {
    75     75       border-radius: 2px;
    76     76       color: hsla(210, 0%, 100%, .5);
           77  +    margin-right: 10px;
    77     78   }
    78     79   div.grammalecte_copy_button:hover {
    79     80       background-color: hsl(210, 90%, 35%, .5);
    80     81       color: hsla(210, 0%, 100%, 1);
    81     82   }
    82     83   div.grammalecte_move_button {
    83     84       padding: 1px 5px;
    84     85       border-radius: 16px;
    85     86       color: hsl(180, 0%, 100%);
    86     87       opacity: .5;
           88  +}
           89  +div.grammalecte_move_button_changeWidth {
           90  +    padding: 3px 5px;
           91  +}
           92  +div.grammalecte_move_button_changeHeight {
           93  +    padding: 3px 5px;
           94  +    margin-right: 10px;
    87     95   }
    88     96   div.grammalecte_move_button_center {
    89     97       padding: 1px 10px;
    90     98       background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><circle fill="%23fff" cx="6" cy="6" r="4"/></svg>') ;
    91     99   }
    92    100   div.grammalecte_move_button_up {
    93    101       padding: 1px 10px;
................................................................................
   102    110       background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 0,2 6,6 6,-6"/></svg>');
   103    111   }
   104    112   div.grammalecte_move_button_left {
   105    113       padding: 1px 10px;
   106    114       background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 2,6 6,6 v -12"/></svg>');
   107    115   }
   108    116   div.grammalecte_move_button:hover {
   109         -    background-color: hsla(180, 80%, 50%, .1);
          117  +    background-color: hsla(180, 80%, 50%, .2);
   110    118       color: hsla(180, 0%, 100%, 1);
   111    119       opacity: 1;
   112    120   }
   113    121   div.grammalecte_close_button {
   114    122       border-radius: 0 8px 0 4px;
   115    123       background-color: hsla(0, 80%, 50%, .5);
   116    124       color: hsla(210, 0%, 100%, .5);

Modified gc_lang/fr/webext/content_scripts/panel.js from [811e4142bb] to [84014faa6e].

    67     67       _createButtons () {
    68     68           let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"});
    69     69           xButtonLine.appendChild(this.xWaitIcon);
    70     70           if (this.sId === "grammalecte_gc_panel") {
    71     71               xButtonLine.appendChild(this._createCopyButton());
    72     72           }
    73     73           if (this.bFlexible) {
    74         -            xButtonLine.appendChild(this._createMoveButton("changeWidth", "⭾", "Bascule la largeur"));
    75         -            xButtonLine.appendChild(this._createMoveButton("changeHeight", "⭿", "Bascule la hauteur"));
           74  +            this.xWidthButton = this._createMoveButton("changeWidth", "L", "Étendre en largeur");
           75  +            this.xHeightButton = this._createMoveButton("changeHeight", "H", "Étendre en hauteur");
           76  +            xButtonLine.appendChild(this.xWidthButton);
           77  +            xButtonLine.appendChild(this.xHeightButton);
    76     78           }
    77     79           xButtonLine.appendChild(this._createMoveButton("up", " ", "Monter")); // use char ⏶ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    78     80           xButtonLine.appendChild(this._createMoveButton("left", " ", "À gauche")); // use char ⏴ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    79     81           xButtonLine.appendChild(this._createMoveButton("center", " ", "Centrer")); // char • can be used already
    80     82           xButtonLine.appendChild(this._createMoveButton("right", " ", "À droite")); // use char ⏵ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    81     83           xButtonLine.appendChild(this._createMoveButton("down", " ", "Descendre")); // use char ⏷ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    82     84           this.xCloseButton = this._createCloseButton();
................................................................................
   178    180       changeHeight () {
   179    181           this.bVertStrech = !this.bVertStrech;
   180    182           this.setSizeAndPosition();
   181    183       }
   182    184   
   183    185       setSizeAndPosition () {
   184    186           // size
   185         -        let nWidth = (this.bFlexible && this.bHorizStrech) ? Math.min(this.nWidth*1.5, window.innerWidth-200) : Math.min(this.nWidth, window.innerWidth-200);
   186         -        let nHeight = this.nHeight;
   187         -        if ([4, 5, 6].includes(this.nPosition)) {
   188         -            nHeight = (this.bFlexible && this.bVertStrech) ? (window.innerHeight-100) : Math.min(window.innerHeight-100, this.nHeight);
   189         -        } else {
   190         -            nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;
          187  +        if (this.xWidthButton && this.xHeightButton) {
          188  +            this.xWidthButton.style.opacity = (this.bHorizStrech) ? .9 : .5;
          189  +            this.xHeightButton.style.opacity = (this.bVertStrech) ? .9 : .5;
          190  +        }
          191  +        let nWidth = Math.min(this.nWidth, window.innerWidth-200);
          192  +        let nHeight = ([4, 5, 6].includes(this.nPosition)) ? Math.min(this.nHeight, window.innerHeight-100) : Math.floor(window.innerHeight*0.45);
          193  +        if (this.bFlexible) {
          194  +            if (this.bHorizStrech) {
          195  +                nWidth = Math.min(this.nWidth*1.33, window.innerWidth-200);
          196  +            }
          197  +            if (this.bVertStrech) {
          198  +                nHeight = ([4, 5, 6].includes(this.nPosition)) ? (window.innerHeight-100) : Math.floor(window.innerHeight*0.67);
          199  +            }
   191    200           }
   192    201           this.xPanel.style.width = `${nWidth}px`;
   193    202           this.xPanel.style.height = `${nHeight}px`;
   194    203           // position
   195    204           let oPos = null;
   196    205           switch (this.nPosition) {
   197    206               case 1: oPos = { top:"",     right:"",     bottom:"-2px", left:"-2px", marginTop:"",                marginLeft:"" }; break;