Add Toolbar

assets/js/src/components/editor-tabs/editor-tabs.stories.tsx

@@ -0,0 +1,49 @@
+import { EditorTabs } from '@Pimcore/components/editor-tabs/editor-tabs'
+import { type Meta } from '@storybook/react'
+import { PictureOutlined, TagOutlined } from '@ant-design/icons'
+import { Icon } from '@Pimcore/components/icon/icon'
+import React from 'react'
+
+const config: Meta = {
+  title: 'Pimcore studio/UI/Editor Tabs',
+  component: EditorTabs,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+  args: {
+    defaultActiveKey: '2',
+    showLabelIfActive: false,
+    items: [
+      {
+        key: '1',
+        label: 'Tab 1',
+        children: 'Tab 1',
+        icon: <PictureOutlined/>
+      },
+      {
+        key: '2',
+        label: 'Tab 2',
+        children: 'Tab 2',
+        icon: <Icon name={'edit'}/>
+      },
+      {
+        key: '3',
+        label: 'Tab 3',
+        children: 'Tab 3',
+        icon: <Icon name={'view-details'}/>
+      },
+      {
+        key: '4',
+        label: 'Tab 4',
+        children: 'Tab 4',
+        icon: <TagOutlined/>
+      }
+    ]
+  }
+}

assets/js/src/components/editor-tabs/editor-tabs.styles.tsx

@@ -0,0 +1,89 @@
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    editorTabs: css`
+      &.ant-tabs .ant-tabs-tab+.ant-tabs-tab {
+        margin-left: ${token.paddingSM}px;
+        margin-right: ${token.paddingSM}px;
+      }
+      &.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+        color: ${token.colorPrimaryActive}
+      }
+      &.ant-tabs-top >.ant-tabs-nav {
+        margin-bottom: 0;
+      }
+
+      .ant-tabs-tab {
+        &:first-of-type {
+            margin-left: ${token.paddingSM}px;
+            margin-right: ${token.paddingSM}px;
+        }
+        padding: 0;
+
+        .ant-tabs-tab-btn {
+          display: flex;
+          padding-top: ${token.paddingXS}px;
+          padding-bottom: ${token.paddingXS}px;
+          justify-content: center;
+          align-items: center;
+          gap: ${token.Tabs.paddingTabs}px;
+
+          .ant-tabs-tab-icon {
+            height: 16px;
+            justify-content: center;
+            align-content: center;
+            margin-inline-end: 0;
+            color: ${token.Tabs.itemUnselectedIconColor};
+
+            svg {
+              height: 16px;
+              width: 16px
+            }
+          }
+        }
+
+        &:not(.ant-tabs-tab-active) {
+          .ant-tabs-tab-icon {
+            &:hover {
+                color: ${token.colorIconHover};
+            }
+          }
+        }
+
+        &.ant-tabs-tab-active  {
+          .ant-tabs-tab-icon {
+              color: ${token.colorPrimaryActive}
+          }
+        }
+      }
+    `,
+
+    onlyActiveLabel: css`
+      .ant-tabs-tab:not(.ant-tabs-tab-active) {
+          span:nth-child(2) {
+              display: none;
+          }
+
+          .ant-tabs-tab-icon {
+              margin-inline-end: 0;
+          }
+      }
+
+      @keyframes fadeIn {
+          from {
+              opacity: 0;
+          }
+
+          to {
+              opacity: 1;
+          }
+      }
+
+      .ant-tabs-tab.ant-tabs-tab-active {
+          border-bottom: 2px solid ${token.colorPrimaryActive};
+          animation: fadeIn .2s;
+      }
+    `
+  }
+})

assets/js/src/components/editor-tabs/editor-tabs.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useStyle } from '@Pimcore/components/editor-tabs/editor-tabs.styles'
+import { Tabs, type TabsProps } from 'antd'
+
+interface EditorTabsProps {
+  items: TabsProps['items']
+  defaultActiveKey?: string
+  showLabelIfActive?: boolean
+}
+
+export const EditorTabs = ({ defaultActiveKey, showLabelIfActive, items }: EditorTabsProps): React.JSX.Element => {
+  const { styles } = useStyle()
+
+  return (
+    <Tabs
+      className={`${styles.editorTabs} ${(showLabelIfActive === true) ? styles.onlyActiveLabel : ''}`}
+      defaultActiveKey={defaultActiveKey}
+      items={items}
+    />
+  )
+}

assets/js/src/components/icon/icon.tsx

@@ -6,7 +6,17 @@ const icons = {
   'widget-default': React.lazy(async () => await import('@Pimcore/assets/icons/core/widget-default.inline.svg')),
   'chevron-up': React.lazy(async () => await import('@Pimcore/assets/icons/core/chevron-up.inline.svg')),
   'chevron-down': React.lazy(async () => await import('@Pimcore/assets/icons/core/chevron-down.inline.svg')),
-  home: React.lazy(async () => await import('@Pimcore/assets/icons/core/home.inline.svg'))
+  home: React.lazy(async () => await import('@Pimcore/assets/icons/core/home.inline.svg')),
+  'image-05': React.lazy(async () => await import('@Pimcore/assets/icons/core/image-05.inline.svg')),
+  edit: React.lazy(async () => await import('@Pimcore/assets/icons/core/edit.inline.svg')),
+  'data-sheet': React.lazy(async () => await import('@Pimcore/assets/icons/core/data-sheet.inline.svg')),
+  'data-management-2': React.lazy(async () => await import('@Pimcore/assets/icons/core/data-management-2.inline.svg')),
+  'history-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/history-outlined.inline.svg')),
+  'schedule-outlined': React.lazy(async () => await import('@Pimcore/assets/icons/core/schedule-outlined.inline.svg')),
+  hierarchy: React.lazy(async () => await import('@Pimcore/assets/icons/core/hierarchy.inline.svg')),
+  'view-details': React.lazy(async () => await import('@Pimcore/assets/icons/core/view-details.inline.svg')),
+  'tag-two-tone': React.lazy(async () => await import('@Pimcore/assets/icons/core/tag-two-tone.inline.svg')),
+  workflow: React.lazy(async () => await import('@Pimcore/assets/icons/core/workflow.inline.svg'))
 }
 
 export interface IconProps {

assets/js/src/modules/asset/containers/asset.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Image } from 'antd'
 import { useAssetDraft } from '../hooks/use-asset-draft'
+import AssetProvider from '@Pimcore/modules/asset/context/asset-context'
+import { EditorTabs } from '@Pimcore/modules/asset/editor-tabs/container/editor-tabs'
 
 export interface AssetProps {
   id: string
@@ -19,13 +20,9 @@ const Asset = (props: AssetProps): React.JSX.Element => {
   }
 
   return (
-    <div>
-      {asset.filename}
-
-      {asset.type === 'image' && (
-        <Image src={asset.fullPath} />
-      )}
-    </div>
+    <AssetProvider asset={asset}>
+      <EditorTabs />
+    </AssetProvider>
   )
 }
 

assets/js/src/modules/asset/context/asset-context.tsx

@@ -0,0 +1,15 @@
+import React, { createContext } from 'react'
+import type { selectAssetById } from '@Pimcore/modules/asset/store/asset-draft-slice'
+
+export type AssetContextType = ReturnType<typeof selectAssetById>
+export const AssetContext = createContext<AssetContextType | null>(null)
+
+const AssetProvider = ({ asset, children }: { asset: ReturnType<typeof selectAssetById>, children: React.ReactNode }): React.JSX.Element => {
+  return (
+        <AssetContext.Provider value={asset}>
+            {children}
+        </AssetContext.Provider>
+  )
+}
+
+export default AssetProvider

assets/js/src/modules/asset/editor-tabs/container/editor-tabs.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { EditorTabs as EditorTabsView } from '@Pimcore/components/editor-tabs/editor-tabs'
+import { assetEditorTabManager } from '@Pimcore/modules/asset/editor-tabs'
+
+export const EditorTabs = (): React.JSX.Element => {
+  const tabs = assetEditorTabManager.getTabs()
+
+  return (
+    <EditorTabsView
+      defaultActiveKey={'1'}
+      items={tabs}
+      showLabelIfActive={true}
+    />
+  )
+}