feat(gv-properties): ux improvements on api properties screen

UX improvements on API properties screen by :
- Adding a separator for 'add' feature
- Centering properties list
- Adding columns gaps
- Adding tooltip
- Rewriting placeholders
- Improving encrypted toggle style
- Warning message on encrypted property overwrite
- Rename css styles to match emmetCheatSheet

assets/i18n/en.json

@@ -98,10 +98,11 @@
   },
   "gv-properties": {
     "add": "Add",
+    "encrypted-toggle": "Encrypted",
     "placeholder": {
-      "input": "PROPERTY_KEY=\"property value\"",
-      "key": "PROPERTY_KEY",
-      "value": "property value"
+      "input": "NEW_PROPERTY_KEY=\"New property value\"",
+      "key": "NEW_PROPERTY_KEY",
+      "value": "New property value"
     },
     "errors": {
       "line": "line",
@@ -110,6 +111,10 @@
       "unknown": "Unknown Error",
       "invalid-line": "this line is not valid, the correct pattern is: <code>KEY=\"VALUE\"</code>",
       "invalid-value": "the value is not valid, if you use quotes, you need to escape them like this: <code>\\\\\"</code> or quote the whole value."
+    },
+    "infos": {
+      "encrypted-value": "This value is encrypted. To enter a new value, switch off the encryption toggle.",
+      "overwrite-encryption": "Be careful, the previous encrypted value will be lost"
     }
   },
   "gv-rating": {

assets/i18n/fr.json

@@ -98,10 +98,11 @@
   },
   "gv-properties": {
     "add": "Ajouter",
+    "encrypted-toggle": "Crypté",
     "placeholder": {
-      "input": "NOM_DE_LA_PROPRIETE=\"valeur de la propriété\"",
-      "key": "NOM_DE_LA_PROPRIETE",
-      "value": "valeur de la propriété"
+      "input": "NOM_DE_LA_NOUVELLE_PROPRIETE=\"valeur de la nouvelle propriété\"",
+      "key": "NOM_DE_LA_NOUVELLE_PROPRIETE",
+      "value": "valeur de la nouvelle propriété"
     },
     "errors": {
       "line": "ligne",
@@ -110,6 +111,10 @@
       "unknown": "Erreur inconnue",
       "invalid-line": "Cette ligne n'est pas valide, il faut respecter la syntaxe: <code>NAME=\"VALUE\"</code>",
       "invalid-value": "la valeur n'est pas valide, si vous utilisez des guillemets, vous devez les échapper comme ceci: <code>\\\\\"</code> ou envelopper la valeur totale."
+    },
+    "infos": {
+      "encrypted-value": "Cette valeur est chiffrée. Pour en saisir une nouvelle, désactivez le chiffrement via l'interrupteur.",
+      "overwrite-encryption": "Attention, la précédente valeur chiffrée sera effacée"
     }
   },
   "gv-rating": {

src/atoms/gv-switch.js

@@ -39,6 +39,7 @@ import { dispatchCustomEvent } from '../lib/events';
  * @cssprop {Color} [--gv-switch-on--bgc=var(--gv-theme-color, #5a7684)] - On background color
  * @cssprop {Color} [--gv-switch-off--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Off background color
  * @cssprop {Color} [--gv-switch--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Switch background color
+ * @cssprop {String} [--gv-switch--ta=left] - Switch label text alignment
  */
 export class GvSwitch extends LitElement {
   static get properties() {
@@ -77,6 +78,7 @@ export class GvSwitch extends LitElement {
           flex: 1;
           margin-right: 0.4rem;
           box-sizing: border-box;
+          text-align: var(--gv-switch--ta, left);
         }
 
         .switch-title {

src/molecules/gv-table.js

@@ -28,6 +28,7 @@ import { withResizeObserver } from '../mixins/with-resize-observer';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import '../atoms/gv-image';
 import '../organisms/gv-pagination';
+import { getCssVar } from '../lib/style';
 
 /**
  * Table component
@@ -62,6 +63,10 @@ import '../organisms/gv-pagination';
  * @cssprop {String} [--gv-table-header--fz=var(--gv-theme-font-size-l, 20px)] - Title font size
  * @cssprop {Length} [--gv-table-header--p=2rem 4rem] - Title padding
  * @cssprop {String} [--gv-table-rows--ov=auto] - Overflow on table
+ * @cssprop {Length} [--gv-table--colmg=0.2rem] - Column gap
+ * @cssprop {String} [--gv-table-row--ai=center] - Row align-items
+ * @cssprop {String} [--gv-table-row--ac=center] - Row align-content
+ * @cssprop {String} [--gv-table-cell--d=flex] - Cell display
  */
 export class GvTable extends withResizeObserver(LitElement) {
   static get properties() {
@@ -148,8 +153,8 @@ export class GvTable extends withResizeObserver(LitElement) {
 
         .row,
         .theader {
-          align-items: center;
-          align-content: center;
+          align-items: var(--gv-table-row--ai, center);
+          align-content: var(--gv-table-row--ac, center);
           border-right: solid thick transparent;
           display: grid;
         }
@@ -160,9 +165,8 @@ export class GvTable extends withResizeObserver(LitElement) {
 
         .cell {
           height: 100%;
-          display: flex;
+          display: var(--gv-table-cell--d, flex);
           align-items: center;
-          margin: 0.2rem;
         }
 
         .row:not(:last-child) {
@@ -529,6 +533,7 @@ export class GvTable extends withResizeObserver(LitElement) {
                   'grid-auto-rows': this.rowheight ? null : 'minmax(80px, auto)',
                   cursor: this.options.selectable ? 'pointer' : '',
                   'border-color': this.options.selectable && this._isSelected(item) ? 'var(--selected--bgc)' : '',
+                  'column-gap': 'var(--gv-table--colmg, 0.2rem)',
                 },
               })}
             @click="${this._onSelect.bind(this, item)}"
@@ -575,7 +580,10 @@ export class GvTable extends withResizeObserver(LitElement) {
 
     widthTemplate = widthTemplate.map((width) => {
       if (width == null) {
-        return `calc((100% - ${fixedWidth}px) / ${this.options.data.length - fixedData.length})`;
+        const columnGap = getCssVar(this, '--gv-table--colmg', '0.2rem');
+        return `calc((100% - ( ${fixedWidth}px + ${this.options.data.length - 1} * ${columnGap} ) ) / ${
+          this.options.data.length - fixedData.length
+        })`;
       }
       return width;
     });