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;