nettika/mattercontrol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add basic app interface

Browse source
This commit is contained in:
Nettika 2026-01-29 00:32:11 -08:00
parent f2dc318f09
commit 704c826b29
No known key found for this signature in database
5 changed files with 100 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
TODO.md
View file

@ -61,12 +61,12 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
## Phase 3: Core UI Layout
### Application Shell
- [ ] Create `AppLayout.vue` with CSS Grid layout
- [ ] Add header area with app title
- [ ] Add left sidebar container (tools panel)
- [ ] Add right sidebar container (properties panel)
- [ ] Add center viewport area
- [ ] Add bottom status bar
- [x] Create `AppLayout.vue` with CSS Grid layout
- [x] Add header area with app title
- [x] Add left sidebar container (tools panel)
- [x] Add right sidebar container (properties panel)
- [x] Add center viewport area
- [x] Add bottom status bar
### Theme System
- [ ] Define CSS custom properties for colors

2
index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>app</title>
<title>RapidModel</title>
</head>
<body>
<div id="app"></div>

2
package.json
View file

@ -1,5 +1,5 @@
{
"name": "app",
"name": "rapidmodel",
"private": true,
"version": "0.0.0",
"type": "module",

9
src/App.vue
View file

@ -1,16 +1,13 @@
<script setup lang="ts">
import AppLayout from './components/AppLayout.vue'
import Viewport from './components/Viewport.vue'
</script>
<template>
<div class="app">
<AppLayout>
<Viewport />
</div>
</AppLayout>
</template>
<style scoped>
.app {
width: 100vw;
height: 100vh;
}
</style>

89
src/components/AppLayout.vue Normal file
View file

@ -0,0 +1,89 @@
<script setup lang="ts">
</script>
<template>
<div class="app-layout">
<header class="header">
<slot name="header">
<h1>RapidModel</h1>
</slot>
</header>
<aside class="left-sidebar">
<slot name="left-sidebar" />
</aside>
<main class="viewport">
<slot />
</main>
<aside class="right-sidebar">
<slot name="right-sidebar" />
</aside>
<footer class="status-bar">
<slot name="status-bar" />
</footer>
</div>
</template>
<style scoped>
.app-layout {
display: grid;
grid-template-areas:
'header header header'
'left-sidebar viewport right-sidebar'
'status-bar status-bar status-bar';
grid-template-columns: 240px 1fr 240px;
grid-template-rows: 48px 1fr 24px;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.header {
grid-area: header;
display: flex;
align-items: center;
padding: 0 16px;
background: #1a1a2e;
border-bottom: 1px solid #2a2a3e;
}
.header h1 {
margin: 0;
font-size: 18px;
font-weight: 500;
color: #e0e0e0;
}
.left-sidebar {
grid-area: left-sidebar;
background: #1e1e2e;
border-right: 1px solid #2a2a3e;
overflow-y: auto;
}
.viewport {
grid-area: viewport;
overflow: hidden;
}
.right-sidebar {
grid-area: right-sidebar;
background: #1e1e2e;
border-left: 1px solid #2a2a3e;
overflow-y: auto;
}
.status-bar {
grid-area: status-bar;
display: flex;
align-items: center;
padding: 0 16px;
background: #1a1a2e;
border-top: 1px solid #2a2a3e;
font-size: 12px;
color: #888;
}
</style>