Make a good part of the app localizable and add French translations (#325)

Co-authored-by: Yohan Boniface <yohanboniface@free.fr>

app/client/ui/GridOptions.ts

@@ -1,3 +1,4 @@
+import { makeT } from 'app/client/lib/localization';
 import { ViewSectionRec } from "app/client/models/DocModel";
 import { KoSaveableObservable, setSaveValue } from "app/client/models/modelUtil";
 import { cssLabel, cssRow } from "app/client/ui/RightPanelStyles";
@@ -5,6 +6,8 @@ import { squareCheckbox } from "app/client/ui2018/checkbox";
 import { testId } from "app/client/ui2018/cssVars";
 import { Computed, Disposable, dom, IDisposableOwner, styled } from "grainjs";
 
+const t = makeT('GridOptions');
+
 /**
  * Builds the grid options.
  */
@@ -17,23 +20,23 @@ export class GridOptions extends Disposable {
   public buildDom() {
     const section = this._section;
     return [
-      cssLabel('Grid Options'),
+      cssLabel(t('GridOptions')),
       dom('div', [
         cssRow(
           checkbox(setSaveValueFromKo(this, section.optionsObj.prop('verticalGridlines'))),
-          'Vertical Gridlines',
+          t('VerticalGridlines'),
           testId('v-grid-button')
         ),
 
         cssRow(
           checkbox(setSaveValueFromKo(this, section.optionsObj.prop('horizontalGridlines'))),
-          'Horizontal Gridlines',
+          t('HorizontalGridlines'),
           testId('h-grid-button')
         ),
 
         cssRow(
           checkbox(setSaveValueFromKo(this, section.optionsObj.prop('zebraStripes'))),
-          'Zebra Stripes',
+          t('ZebraStripes'),
           testId('zebra-stripe-button')
         ),