WIP vertical tabs linkeditor

Author: mhsdesign

packages/neos-ui-link-editor-core/src/application/Dialog/Dialog.tsx

@@ -76,7 +76,8 @@ const ActiveLinkEditorDialog: React.FC<{
         return {
             isDirty: form.isOptionsDirty || (model ? linkType.isDirty(model) : false),
             isValid: model ? linkType.isValid(model) : false,
-            initialLinkWasDeleted: form.initialLinkWasDeleted
+            initialLinkWasDeleted: form.initialLinkWasDeleted,
+            activeLinkTypeId: form.activeLinkTypeId
         };
     }), []);
 
@@ -115,13 +116,15 @@ const ActiveLinkEditorDialog: React.FC<{
         return null;
     }
 
+    const currentLinkType = availableLinkTypes.find(linkType => linkType.id === formStatus.activeLinkTypeId)!;
+
     return (
         <Dialog
             id="neos-LinkEditor"
             isOpen={true}
             preventClosing={formStatus.isDirty}
             onRequestClose={dismiss}
-            title={<div>{translate('Neos.Neos.Ui:LinkEditor.Main:dialog.title', '')}</div>}
+            title={<div>{(initialValue === null && initialLinkType === null) || initialLinkType?.id !== currentLinkType.id || formStatus.initialLinkWasDeleted ? `Create ${currentLinkType.getTitle()} Link` : `Edit ${currentLinkType.getTitle()} Link`}</div>}
             style="wide"
             autoFocus={true}
             actions={[
@@ -183,6 +186,7 @@ const DialogWithEmptyValue: React.FC<{
         <Tabs
             activeTab={activeTab}
             onActiveTabChange={setActiveTab}
+            vertical
         >
             {props.availableLinkTypes.map((linkType) => {
                 const {Editor} = linkType;
@@ -271,6 +275,7 @@ const DialogWithValue: React.FC<{
             <Tabs
                 activeTab={activeTab}
                 onActiveTabChange={setActiveTab}
+                vertical
             >
                 {props.availableLinkTypes.map((linkType) => {
                     const {Editor, LoadingEditor} = linkType;

packages/neos-ui-link-editor-core/src/presentation/Layout/style.module.css

@@ -3,7 +3,6 @@
 }
 
 .stack {
-    margin-top: 16px;
     > * + * {
         margin-top: 16px;
     }

packages/react-ui-components/src/Tabs/style.module.css

@@ -3,9 +3,15 @@
     height: 100%;
 }
 
+.tabs--vertical {
+    display: flex;
+    gap: var(--spacing-Full);
+}
+
 .tabs__content {
     composes: reset from '../reset.module.css';
     overflow-y: auto;
+    flex-grow: 1;
 }
 
 .tabNavigation {
@@ -26,6 +32,13 @@
         clear: both;
     }
 }
+
+.tabs--vertical .tabNavigation {
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid var(--colors-ContrastDark);
+}
+
 .tabNavigation__item {
     composes: reset from '../reset.module.css';
     position: relative;
@@ -56,6 +69,27 @@
         color: var(--colors-PrimaryBlue);
     }
 }
+
+.tabs--vertical .tabNavigation__item {
+    border-left: 1px solid var(--colors-ContrastDark);
+    border-right: unset;
+}
+
+.tabs--vertical .tabNavigation__item--isActive {
+
+    &:after {
+        display: block;
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: -1px;
+        height: 100%;
+        width: 2px;
+        background: var(--colors-PrimaryBlue);
+    }
+}
+
 .tabNavigation__itemBtn {
     composes: reset from '../reset.module.css';
     display: inline-block;

packages/react-ui-components/src/Tabs/tabs.tsx

@@ -19,7 +19,9 @@ export interface TabsProps {
     /**
      * An optional className to render on the wrapping div.
      */
-    readonly className?: string;
+    readonly className?: string
+
+    readonly vertical?: boolean;
 
     /**
      * The children panels to render.
@@ -146,8 +148,13 @@ export default class Tabs extends PureComponent<TabsProps> {
     }
 
     public render(): JSX.Element {
-        const {theme, className} = this.props;
-        const finalClassName = mergeClassNames(theme!.tabs, className);
+        const {theme, className, vertical} = this.props;
+        const finalClassName = mergeClassNames(
+            theme!.tabs, {
+                [theme!['tabs--vertical']]: vertical
+            },
+            className
+        );
 
         return (
             <div className={finalClassName} role="tablist">