Skip to content

feat: Add File Browser and Graph Editor components #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vis-iks merged 1 commit into from
Feb 23, 2026
Merged

feat: Add File Browser and Graph Editor components #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/demo-app/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kb",
"maximumError": "8kb"
"maximumWarning": "10kb",
"maximumError": "15kb"
}
],
"outputHashing": "all"
Expand Down
16 changes: 15 additions & 1 deletion apps/demo-app/src/app/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!--
<bui-layout>
<bui-header></bui-header>

Expand All @@ -11,7 +12,20 @@

<bui-footer></bui-footer>
</bui-layout>
-->

<button class="theme-toggle" (click)="toggleTheme()" style="position: absolute; top: 0; right: 0; z-index: 100;">
<div style="display: flex; flex-direction: column; height: 100vh; padding: 20px; gap: 20px; background-color: var(--bui-bg-dark); overflow: auto;">
<h2 style="color: white; margin: 0 0 10px;">Blender File Browser</h2>
<div style="height: 500px; border: 1px solid var(--bui-border-dark);">
<bui-file-browser></bui-file-browser>
</div>

<h2 style="color: white; margin: 20px 0 10px;">Blender Graph Editor</h2>
<div style="height: 500px; border: 1px solid var(--bui-border-dark);">
<bui-graph-editor></bui-graph-editor>
</div>
</div>

<button class="theme-toggle" (click)="toggleTheme()" style="position: fixed; top: 10px; right: 10px; z-index: 100; font-size: 24px; background: none; border: none; cursor: pointer;">
{{ activeTheme().name === 'dark' ? '☀️' : '🌙' }}
</button>
4 changes: 2 additions & 2 deletions apps/demo-app/src/app/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Component, inject, computed } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BuiThemeService, LayoutComponent, ModifierPanelComponent, HeaderComponent, FooterComponent, OutlinerComponent, PropertiesComponent, ViewportComponent, TimelineComponent, ContextMenuTriggerDirective, ContextMenuItem } from '@blender-ui/core';
import { BuiThemeService, LayoutComponent, ModifierPanelComponent, HeaderComponent, FooterComponent, OutlinerComponent, PropertiesComponent, ViewportComponent, TimelineComponent, ContextMenuTriggerDirective, ContextMenuItem, FileBrowserComponent, GraphEditorComponent } from '@blender-ui/core';

@Component({
imports: [RouterModule, LayoutComponent, ModifierPanelComponent, HeaderComponent, FooterComponent, OutlinerComponent, PropertiesComponent, ViewportComponent, TimelineComponent, ContextMenuTriggerDirective],
imports: [RouterModule, LayoutComponent, ModifierPanelComponent, HeaderComponent, FooterComponent, OutlinerComponent, PropertiesComponent, ViewportComponent, TimelineComponent, ContextMenuTriggerDirective, FileBrowserComponent, GraphEditorComponent],
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.scss',
Expand Down
2 changes: 2 additions & 0 deletions libs/blender-ui/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,5 @@ export * from './lib/components/scene-properties/scene-properties.component';
export * from './lib/components/context-menu/context-menu.component';
export * from './lib/components/context-menu/context-menu.interface';
export * from './lib/components/context-menu/context-menu-trigger.directive';
export * from './lib/components/file-browser/file-browser.component';
export * from './lib/components/graph-editor/graph-editor.component';
148 changes: 148 additions & 0 deletions libs/blender-ui/src/lib/components/file-browser/file-browser.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<div class="file-browser-container">
<!-- Top Header -->
<div class="header-bar">
<div class="header-left">
<span class="material-icons-round icon-folder">folder</span>
<span class="material-icons-round icon-expand">expand_more</span>
</div>
<div class="header-actions">
<button class="header-btn">View</button>
<button class="header-btn">Select</button>
</div>
</div>

<!-- Navigation Bar -->
<div class="navigation-bar">
<div class="nav-controls">
<button class="nav-btn rounded-left"><span class="material-icons-round">arrow_back</span></button>
<button class="nav-btn disabled"><span class="material-icons-round">arrow_forward</span></button>
<button class="nav-btn"><span class="material-icons-round">arrow_upward</span></button>
<button class="nav-btn"><span class="material-icons-round">refresh</span></button>
<button class="nav-btn rounded-right"><span class="material-icons-round">create_new_folder</span></button>
</div>
<div class="path-input-container">
<input type="text" class="path-input" value="/home/visiks/">
</div>
</div>

<!-- Toolbar / Search -->
<div class="toolbar">
<div class="search-container">
<span class="material-icons-round search-icon">search</span>
<input type="text" class="search-input" placeholder="Search">
</div>
<div class="spacer"></div>

<!-- View Mode Buttons -->
<div class="view-mode-group">
<button class="view-btn active" title="Vertical List">
<span class="material-icons-round">format_list_bulleted</span>
</button>
<button class="view-btn" title="Horizontal List">
<span class="material-icons-round">view_column</span>
</button>
<button class="view-btn" title="Grid">
<span class="material-icons-round">grid_view</span>
</button>
<button class="view-btn dropdown">
<span class="material-icons-round">expand_more</span>
</button>
</div>

<!-- Filter Buttons -->
<div class="filter-group">
<button class="filter-btn active">
<span class="material-icons-round">filter_alt</span>
</button>
<button class="filter-btn dropdown">
<span class="material-icons-round">expand_more</span>
</button>
</div>
</div>

<!-- File List -->
<div class="file-list-area">
<!-- List Header -->
<div class="list-header">
<div class="col-name">
Name <span class="material-icons-round sort-icon">arrow_drop_down</span>
</div>
<div class="col-date">Date Modified</div>
<div class="col-size">Size</div>
</div>

<!-- List Items -->
<div class="list-content">
<!-- Example Items from Design -->
<div class="file-row active">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">adb-fastboot</span>
</div>
<div class="cell-date">14 Aug 2025 21:00</div>
<div class="cell-size"></div>
</div>

<div class="file-row">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">arduino</span>
</div>
<div class="cell-date">04 Jun 2025 22:16</div>
<div class="cell-size"></div>
</div>

<div class="file-row">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">bootloader</span>
</div>
<div class="cell-date">06 Sep 2025 14:51</div>
<div class="cell-size"></div>
</div>

<div class="file-row">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">chrome</span>
</div>
<div class="cell-date">06 Sep 2025 15:15</div>
<div class="cell-size"></div>
</div>

<div class="file-row">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">CLionProjects</span>
</div>
<div class="cell-date">06 Sep 2025 12:16</div>
<div class="cell-size"></div>
</div>

<div class="file-row">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">Desktop</span>
</div>
<div class="cell-date">04 Jan 2026 15:37</div>
<div class="cell-size"></div>
</div>
<div class="file-row">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">Documents</span>
</div>
<div class="cell-date">17 Feb 2026 10:35</div>
<div class="cell-size"></div>
</div>
<div class="file-row">
<div class="cell-name">
<span class="material-icons-round folder-icon">folder</span>
<span class="filename">Downloads</span>
</div>
<div class="cell-date">20 Feb 2026 19:16</div>
<div class="cell-size"></div>
</div>
</div>
</div>
</div>
Loading
Loading