Skip to content

Commit

Permalink
feat: wip - virtual tree full
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jinnie
Jinnie committed Nov 4, 2024
1 parent 71b0056 commit 2a13fbd
Show file tree
Hide file tree
Showing 9 changed files with 561 additions and 74 deletions.
299 changes: 298 additions & 1 deletion .storybook/helpers/files.data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,300 @@ export const filesRoot: File[] = [
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
{
name: 'styles',
files: [
{
name: 'main.scss',
},
],
},
{
name: 'index.html',
},
{
name: 'main.ts',
},
],
},
{
Expand All @@ -94,7 +388,10 @@ export function getFileTreeNodeMarkup(
${args.hasIcon ? `<cds-icon [attr.shape]="'${file.files ? 'folder' : 'file'}'"></cds-icon>` : ''}
${args.asLink ? `<a href="javascript:;" class="clr-treenode-link">${file.name}</a>` : file.name}
${file.files ? getFileTreeNodeMarkup(file.files, args) : ''}
</clr-tree-node>`
</clr-tree-node>
`
)
.join('');
}
19 changes: 19 additions & 0 deletions .storybook/stories/tree/tree.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,29 @@ const TreeViewTemplate: StoryFn = args => ({
props: args,
});

const VirtualTreeTemplate: StoryFn = args => ({
template: `
<clr-tree>
<clr-tree-node>
One!
<clr-tree-node *ngFor="let x of [].constructor(5)">
Two!
<clr-tree-node *ngFor="let x of [].constructor(5)">Three!</clr-tree-node>
</clr-tree-node>
</clr-tree-node>
</clr-tree>
`,
props: args,
});

export const TreeView: StoryObj = {
render: TreeViewTemplate,
};

export const VirtualTree: StoryObj = {
render: VirtualTreeTemplate,
};

export const TreeViewAsLink: StoryObj = {
render: TreeViewTemplate,
args: {
Expand Down
16 changes: 13 additions & 3 deletions projects/angular/src/data/tree-view/_tree-view.clarity.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,21 @@
@include meta.load-css('properties.tree-view');

@include mixins.exports('tree-view.clarity') {
.example-viewport {
height: 200px;
width: 200px;
border: 1px solid black;
}

.example-item {
height: 24px;
}

.clr-tree-node {
//Display
display: block;

&.disabled .clr-tree-node-content-container {
.clr-tree-node-content-container.clr-form-control-disabled {
cursor: not-allowed;

.clr-treenode-link {
Expand Down Expand Up @@ -102,7 +112,7 @@

//Dimensions
&:first-child {
margin-left: tree-view-variables.$clr-tree-node-touch-target;
// margin-left: tree-view-variables.$clr-tree-node-touch-target;
}

&.clr-treenode-text-only {
Expand Down Expand Up @@ -216,7 +226,7 @@

.clr-treenode-children {
//Dimensions
margin-left: tree-view-variables.$clr-tree-node-children-margin;
// margin-left: tree-view-variables.$clr-tree-node-children-margin;
will-change: height;
overflow-y: hidden;
}
Expand Down
Loading

0 comments on commit 2a13fbd

Please sign in to comment.