added styles for the Tree component

pimcore · Oct 28, 2024 · 9b4d327 · 9b4d327
1 parent 4dd3ef8
commit 9b4d327
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/.../tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.ts b/.../tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.ts
@@ -0,0 +1,36 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ css }) => {
+  return {
+    treeContainer: css`
+      .ant-tree-list-holder-inner {
+        .ant-tree-treenode-leaf-last {
+          &:first-child {
+            .ant-tree-checkbox {
+              display: none;
+            }
+          }
+        }
+      }
+      
+      .ant-tree-switcher {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `
+  }
+})
diff --git a/...g-filters/tags-tree-filters-container.tsx → ...container/tags-tree-filters-container.tsx b/...g-filters/tags-tree-filters-container.tsx → ...container/tags-tree-filters-container.tsx
@@ -16,16 +16,19 @@ import { Tree } from 'antd'
 import React, { type Key } from 'react'
 import { Content } from '@Pimcore/components/content/content'
 import { Flex } from '@Pimcore/components/flex/flex'
+import { Icon } from '@Pimcore/components/icon/icon'
 import {
   useCreateTreeStructure
 } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/hooks/use-create-tree-structure'
+import { useStyles } from './tags-tree-filters-container.styles'
 
 export const TagsTreeFiltersContainer = ({ addOrUpdateFieldFilter, checkedKeys, setCheckedKeys }: { addOrUpdateFieldFilter: (value: any) => void, checkedKeys: any, setCheckedKeys: any }): React.JSX.Element => {
   const { data: tags, isLoading: tagsLoading } = useTagGetCollectionQuery({
     page: 1,
     pageSize: 9999
   })
   const { createTreeStructure } = useCreateTreeStructure()
+  const { styles } = useStyles()
 
   if (tagsLoading) {
     return <Content loading />
@@ -61,9 +64,19 @@ export const TagsTreeFiltersContainer = ({ addOrUpdateFieldFilter, checkedKeys,
           checkStrictly
           checkable
           checkedKeys={ { checked: checkedKeys, halfChecked: [] } }
+          className={ styles.treeContainer }
           defaultExpandedKeys={ ['root'] }
           onCheck={ handleCheck }
           showIcon
+          switcherIcon={ (
+            <Icon
+              name="chevron-down"
+              options={ {
+                width: 12,
+                height: 12
+              } }
+            />
+          ) }
           treeData={ treeData }
         />
       </Flex>

diff --git a/...or/types/folder/tab-manager/tabs/list/sidebar/tag-filters/tag-filters-container-inner.tsx b/...or/types/folder/tab-manager/tabs/list/sidebar/tag-filters/tag-filters-container-inner.tsx
@@ -12,7 +12,6 @@
 */
 
 import React, { useState } from 'react'
-import { TagsTreeFiltersContainer } from './tags-tree-filters-container'
 import { Title } from '@Pimcore/components/title/title'
 import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
 import { Button } from '@Pimcore/components/button/button'
@@ -21,6 +20,7 @@ import {
 } from '@Pimcore/components/content-toolbar-sidebar-layout/content-toolbar-sidebar-layout'
 import { Toolbar } from '@Pimcore/components/toolbar/toolbar'
 import { Content } from '@Pimcore/components/content/content'
+import { TagsTreeFiltersContainer } from './components/tags-tree-filters-container/tags-tree-filters-container'
 import { useTagFilters } from './hooks/use-tag-filters'
 import { useListFilterOptions } from '@Pimcore/modules/asset/editor/types/folder/tab-manager/tabs/list/hooks/use-list'
 

diff --git a/public/build/2c3c76da-13c1-4739-9070-e84169e8fc17/manifest.json b/public/build/2c3c76da-13c1-4739-9070-e84169e8fc17/manifest.json
@@ -1454,5 +1454,9 @@
   "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/icon-library/index.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/icon-library/index.d.ts.map",
   "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/grid/index.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/components/grid/index.d.ts.map",
   "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/utils/polling-helper.d.ts": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/utils/polling-helper.d.ts",
-  "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/utils/polling-helper.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/utils/polling-helper.d.ts.map"
+  "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/utils/polling-helper.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/utils/polling-helper.d.ts.map",
+  "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts",
+  "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts",
+  "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.d.ts.map",
+  "build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts.map": "http://localhost:3030/build/2c3c76da-13c1-4739-9070-e84169e8fc17/../../../assets/dist/build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/components/tags-tree-filters-container/tags-tree-filters-container.styles.d.ts.map"
 }