Index: gc_lang/fr/webext/content_scripts/panel.css ================================================================== --- gc_lang/fr/webext/content_scripts/panel.css +++ gc_lang/fr/webext/content_scripts/panel.css @@ -72,10 +72,11 @@ cursor: pointer; } div.grammalecte_copy_button { border-radius: 2px; color: hsla(210, 0%, 100%, .5); + margin-right: 10px; } div.grammalecte_copy_button:hover { background-color: hsl(210, 90%, 35%, .5); color: hsla(210, 0%, 100%, 1); } @@ -82,10 +83,17 @@ div.grammalecte_move_button { padding: 1px 5px; border-radius: 16px; color: hsl(180, 0%, 100%); opacity: .5; +} +div.grammalecte_move_button_changeWidth { + padding: 3px 5px; +} +div.grammalecte_move_button_changeHeight { + padding: 3px 5px; + margin-right: 10px; } div.grammalecte_move_button_center { padding: 1px 10px; background: center no-repeat url('data:image/svg+xml;utf8,') ; } @@ -104,11 +112,11 @@ div.grammalecte_move_button_left { padding: 1px 10px; background: center no-repeat url('data:image/svg+xml;utf8,'); } div.grammalecte_move_button:hover { - background-color: hsla(180, 80%, 50%, .1); + background-color: hsla(180, 80%, 50%, .2); color: hsla(180, 0%, 100%, 1); opacity: 1; } div.grammalecte_close_button { border-radius: 0 8px 0 4px; Index: gc_lang/fr/webext/content_scripts/panel.js ================================================================== --- gc_lang/fr/webext/content_scripts/panel.js +++ gc_lang/fr/webext/content_scripts/panel.js @@ -69,12 +69,14 @@ xButtonLine.appendChild(this.xWaitIcon); 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")); + this.xWidthButton = this._createMoveButton("changeWidth", "L", "Étendre en largeur"); + this.xHeightButton = this._createMoveButton("changeHeight", "H", "Étendre en hauteur"); + xButtonLine.appendChild(this.xWidthButton); + xButtonLine.appendChild(this.xHeightButton); } 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")); // char • can be used already xButtonLine.appendChild(this._createMoveButton("right", " ", "À droite")); // use char ⏵ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS) @@ -180,16 +182,23 @@ this.setSizeAndPosition(); } setSizeAndPosition () { // size - let nWidth = (this.bFlexible && this.bHorizStrech) ? Math.min(this.nWidth*1.5, window.innerWidth-200) : Math.min(this.nWidth, window.innerWidth-200); - let nHeight = this.nHeight; - if ([4, 5, 6].includes(this.nPosition)) { - nHeight = (this.bFlexible && this.bVertStrech) ? (window.innerHeight-100) : Math.min(window.innerHeight-100, this.nHeight); - } else { - nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight; + if (this.xWidthButton && this.xHeightButton) { + this.xWidthButton.style.opacity = (this.bHorizStrech) ? .9 : .5; + this.xHeightButton.style.opacity = (this.bVertStrech) ? .9 : .5; + } + let nWidth = Math.min(this.nWidth, window.innerWidth-200); + let nHeight = ([4, 5, 6].includes(this.nPosition)) ? Math.min(this.nHeight, window.innerHeight-100) : Math.floor(window.innerHeight*0.45); + if (this.bFlexible) { + if (this.bHorizStrech) { + nWidth = Math.min(this.nWidth*1.33, window.innerWidth-200); + } + if (this.bVertStrech) { + nHeight = ([4, 5, 6].includes(this.nPosition)) ? (window.innerHeight-100) : Math.floor(window.innerHeight*0.67); + } } this.xPanel.style.width = `${nWidth}px`; this.xPanel.style.height = `${nHeight}px`; // position let oPos = null;