[PE mobile] Added Table Settings

apps/presentationeditor/mobile/locale/en.json

@@ -187,7 +187,17 @@
       "textNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
       "notcriticalErrorTitle": "Warning",
       "textPictureFromLibrary": "Picture from Library",
-      "textPictureFromURL": "Picture from URL"
+      "textPictureFromURL": "Picture from URL",
+      "textOptions": "Options",
+      "textHeaderRow": "Header Row",
+      "textTotalRow": "Total Row",
+      "textBandedRow": "Banded Row",
+      "textFirstColumn": "First Column",
+      "textLastColumn": "Last Column",
+      "textBandedColumn": "Banded Column",
+      "textStyleOptions": "Style Options",
+      "textRemoveTable": "Remove Table",
+      "textCellMargins": "Cell Margins"
     }
   },
   "Common": {

apps/presentationeditor/mobile/src/view/edit/Edit.jsx

@@ -143,12 +143,29 @@ const routes = [
         component: PageTableReorder
     },
     {
-        path: '/edit-table-align',
+        path: '/edit-table-align/',
         component: PageTableAlign
+    },
+    {
+        path: '/edit-table-style/',
+        component: PageTableStyle
+    },
+    {
+        path: '/edit-table-style-options/',
+        component: PageTableStyleOptions
+    },
+    {
+        path: '/edit-table-border-color/',
+        component: PageTableBorderColor
+    },
+    {
+        path: '/edit-table-custom-border-color/',
+        component: PageTableCustomBorderColor
+    },
+    {
+        path: '/edit-table-custom-fill-color/',
+        component: PageTableCustomFillColor
     }
-
-
-
 ];
 
 const EmptyEditLayout = () => {

apps/presentationeditor/mobile/src/view/edit/EditTable.jsx

@@ -31,8 +31,8 @@ const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyle
                         {row.map((style, index)=>{
                             return(
                                 <div key={`${rowIndex}-${index}`}
-                                     className={style.templateId === stateId ? 'active' : ''}
+                                    className={style.templateId === stateId ? 'active' : ''}
-                                     onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
+                                    onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
                                     <img src={style.imageUrl} />
                                 </div>
                             )
@@ -89,14 +89,17 @@ const PageCustomFillColor = props => {
     const _t = t('View.Edit', {returnObjects: true});
     const tableObject = props.storeFocusObjects.tableObject;
     let fillColor = props.storeTableSettings.getFillColor(tableObject);
+
     if (typeof fillColor === 'object') {
         fillColor = fillColor.color;
     }
+
     const onAddNewColor = (colors, color) => {
         props.storePalette.changeCustomColors(colors);
         props.onFillColor(color);
         props.f7router.back();
     };
+
     return(
         <Page>
             <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
@@ -114,7 +117,7 @@ const TabFillColor = inject("storeFocusObjects", "storeTableSettings", "storePal
 
     const changeColor = (color, effectId, effectValue) => {
         if (color !== 'empty') {
-            if (effectId !==undefined ) {
+            if (effectId !== undefined ) {
                 const newColor = {color: color, effectId: effectId, effectValue: effectValue};
                 props.onFillColor(newColor);
             } else {
@@ -279,7 +282,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
 
 const PageStyle = props => {
     const { t } = useTranslation();
-    const _t = t('Edit', {returnObjects: true});
+    const _t = t('View.Edit', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
     const templates = storeTableSettings.styles;
 
@@ -287,9 +290,9 @@ const PageStyle = props => {
         <Page>
             <Navbar backLink={_t.textBack}>
                 <div className="tab-buttons tabbar">
-                    <Link key={"de-link-table-style"}  tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
+                    <Link key={"pe-link-table-style"}  tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
-                    <Link key={"de-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
+                    <Link key={"pe-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
-                    <Link key={"de-link-table-border"}  tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                    <Link key={"pe-link-table-border"}  tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
                 </div>
             </Navbar>
             <Tabs animated>