Skip to content

Commit

Permalink
added styles for the Tree component
Browse files Browse the repository at this point in the history
  • Loading branch information
ValeriaMaltseva committed Oct 28, 2024
1 parent 4dd3ef8 commit 9b4d327
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -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;
}
`
}
})
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}

0 comments on commit 9b4d327

Please sign in to comment.