Introducing Layout / Logic Mode step 4 - Tabs

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -237,14 +237,26 @@ export const TabbedContainerBaseComp = (function () {
               newOptionLabel: "Tab",
             })}
             {children.selectedTabKey.propertyView({ label: trans("prop.defaultValue") })}
-            {children.autoHeight.getPropertyView()}
           </Section>
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
-          </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
+
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <>
+              <Section name={sectionNames.layout}>
+                {children.autoHeight.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+            </>
+          )}
         </>
       );
     })

client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx

@@ -62,6 +62,9 @@ import { Timeline } from "antd";
 
 import { ANTDICON } from "./antIcon"; // todo: select icons to not import all icons
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState"; 
+
 const EventOptions = [
   clickEvent,
 ] as const;
@@ -167,24 +170,34 @@ let TimeLineBasicComp = (function () {
             tooltip: TimelineDataTooltip,
             placeholder: "[]",
           })}
-          {children.mode.propertyView({
-            label: trans("timeLine.mode"),
-            tooltip: trans("timeLine.modeTooltip"),
-          })}
-          {children.reverse.propertyView({
-            label: trans("timeLine.reverse"),
-          })}
-          {children.pending.propertyView({
-            label: trans("timeLine.pending"),
-          })}
-        </Section>
-        <Section name={sectionNames.layout}>
-          {children.onEvent.getPropertyView()}
-          {hiddenPropertyView(children)}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
         </Section>
+
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><Section name={sectionNames.layout}>
+              {children.mode.propertyView({
+                label: trans("timeLine.mode"),
+                tooltip: trans("timeLine.modeTooltip"),
+              })}
+              {children.pending.propertyView({
+                label: trans("timeLine.pending"),
+                tooltip: trans("timeLine.pendingDescription"),
+              })}
+              {children.reverse.propertyView({
+                label: trans("timeLine.reverse"),
+              })}
+            </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+          </>
+        )}
       </>
     ))
     .build();

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2639,20 +2639,21 @@ export const en = {
   },
   /////////////////////
   timeLine: {
-    titleColor: "title Color",
-    subTitleColor: "subTitle Color",
-    lableColor: "lable Color",
-    value: "value",
-    mode: "mode",
-    left: "Left",
-    right: "Right",
-    alternate: "alternate",
+    titleColor: "Title color",
+    subTitleColor: "Subtitle color",
+    lableColor: "Label color",
+    value: "Timeline data",
+    mode: "Display order",
+    left: "Content right",
+    right: "Content left",
+    alternate: "Alternate content order",
     modeTooltip:
       "Set the content to appear left/right or alternately on both sides of the timeline",
-    reverse: "reverse",
-    pending: "pending",
+    reverse: "Newest events first",
+    pending: "Pending node text",
+    pendingDescription: "When set, then an last node with the text and a waiting indicator will be displayed.",
     defaultPending: "continuous improvement",
-    clickTitleEvent: "clickTitleEvent",
+    clickTitleEvent: "Click Title Event",
     clickTitleEventDesc: "click Title Event",
     Introduction: "Introduction keys",
     helpTitle: "title of timeline(Required)",