feat: force left or right text alignement in reader (actually "start"…

… which depends on document locale), "automatic" is now "default" with change of SVG icon to avoid confusion (Fixes #1230 )
edrlab · Jul 16, 2023 · 5f6fe81 · 5f6fe81
1 parent d9d2f26
commit 5f6fe81
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 4 deletions.
diff --git a/src/renderer/assets/styles/reader-app.css b/src/renderer/assets/styles/reader-app.css
@@ -1024,6 +1024,7 @@ p.chapters_description {
 
 #option_auto,
 #option_justif,
+#option_start,
 #scroll_option,
 #page_option {
   display: inline-block;

diff --git a/src/renderer/assets/styles/reader-app.css.d.ts b/src/renderer/assets/styles/reader-app.css.d.ts
@@ -71,6 +71,7 @@ declare const styles: {
   readonly "option_colonne2": string;
   readonly "option_auto": string;
   readonly "option_justif": string;
+  readonly "option_start": string;
   readonly "scroll_option": string;
   readonly "page_option": string;
   readonly "line_tab_content": string;

diff --git a/src/renderer/reader/components/ReaderOptions.tsx b/src/renderer/reader/components/ReaderOptions.tsx
@@ -20,8 +20,9 @@ import * as ColumnIcon from "readium-desktop/renderer/assets/icons/colonne.svg";
 import * as Column2Icon from "readium-desktop/renderer/assets/icons/colonne2.svg";
 import * as DefileIcon from "readium-desktop/renderer/assets/icons/defile.svg";
 import * as DoneIcon from "readium-desktop/renderer/assets/icons/done.svg";
-import * as LeftIcon from "readium-desktop/renderer/assets/icons/gauche.svg";
+import * as PageIcon from "readium-desktop/renderer/assets/icons/page.svg";
 import * as JustifyIcon from "readium-desktop/renderer/assets/icons/justifie.svg";
+import * as StartIcon from "readium-desktop/renderer/assets/icons/gauche.svg";
 import * as PagineIcon from "readium-desktop/renderer/assets/icons/pagine.svg";
 import * as stylesReader from "readium-desktop/renderer/assets/styles/reader-app.css";
 import {
@@ -665,7 +666,7 @@ export class ReaderOptions extends React.Component<IProps, IState> {
                             htmlFor={"radio-" + stylesReader.option_auto}
                             className={this.getButtonClassName("align", "auto")}
                         >
-                            <SVG ariaHidden={true} svg={LeftIcon} />
+                            <SVG ariaHidden={true} svg={PageIcon} />
                             {__("reader.settings.column.auto")}
                         </label>
                     </div>
@@ -685,6 +686,22 @@ export class ReaderOptions extends React.Component<IProps, IState> {
                             {__("reader.settings.justify")}
                         </label>
                     </div>
+                    <div className={stylesReader.focus_element}>
+                        <input
+                            id={"radio-" + stylesReader.option_start}
+                            name="alignment"
+                            type="radio"
+                            onChange={(e) => this.props.handleSettingChange(e, "align", textAlignEnum.start)}
+                            checked={readerConfig.align === textAlignEnum.start}
+                        />
+                        <label
+                            htmlFor={"radio-" + stylesReader.option_start}
+                            className={this.getButtonClassName("align", "start")}
+                        >
+                            <SVG ariaHidden={true} svg={StartIcon} />
+                            {__("reader.settings.start")}
+                        </label>
+                    </div>
                 </div>
             </div>
             <div className={stylesReader.line_tab_content}>

diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
@@ -338,7 +338,7 @@
         },
         "settings": {
             "column": {
-                "auto": "Automatic",
+                "auto": "Default",
                 "one": "1 col",
                 "oneTitle": "one column",
                 "title": "Columns",
@@ -380,6 +380,7 @@
             },
             "scrolled": "Scrollable",
             "spacing": "Spacing",
+            "start": "Left / Right",
             "text": "Text",
             "theme": {
                 "name": {

diff --git a/src/resources/locales/fr.json b/src/resources/locales/fr.json
@@ -338,7 +338,7 @@
         },
         "settings": {
             "column": {
-                "auto": "Automatique",
+                "auto": "Défaut",
                 "one": "1 col",
                 "oneTitle": "une colonne",
                 "title": "Colonnes",
@@ -380,6 +380,7 @@
             },
             "scrolled": "Défilé",
             "spacing": "Espacement",
+            "start": "Gauche / Droite",
             "text": "Texte",
             "theme": {
                 "name": {

diff --git a/src/typings/en.translation.d.ts b/src/typings/en.translation.d.ts
@@ -726,6 +726,7 @@ declare namespace typed_i18n {
     },
     readonly "scrolled": string,
     readonly "spacing": string,
+    readonly "start": string,
     readonly "text": string,
     readonly "theme": {
       readonly "name": {
@@ -906,6 +907,7 @@ declare namespace typed_i18n {
   },
   readonly "scrolled": string,
   readonly "spacing": string,
+  readonly "start": string,
   readonly "text": string,
   readonly "theme": {
     readonly "name": {
@@ -987,6 +989,7 @@ declare namespace typed_i18n {
   (_: "reader.settings.save.title", __?: {}): string;
   (_: "reader.settings.scrolled", __?: {}): string;
   (_: "reader.settings.spacing", __?: {}): string;
+  (_: "reader.settings.start", __?: {}): string;
   (_: "reader.settings.text", __?: {}): string;
   (_: "reader.settings.theme", __?: {}): {
   readonly "name": {