Skip to content

Initial work on Common OS skeleton #165

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
merged 42 commits into from
Oct 4, 2024
Merged

Initial work on Common OS skeleton #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
3a6ef2f
Begin work on Common OS skeleton
gordonbrander Sep 26, 2024
af00def
Add common-ui
gordonbrander Sep 26, 2024
80f5713
Update sidebar
gordonbrander Sep 26, 2024
7c17261
Stub ooout some dummy items in sidebar
gordonbrander Sep 26, 2024
f11bb28
Add more scaffolding, incl scene layout
gordonbrander Sep 26, 2024
a1e0e13
Stub in buttons, change prefix to os-
gordonbrander Sep 26, 2024
f5ed90b
Stub in scrolling sidebar
gordonbrander Sep 26, 2024
87d94e3
Add icon button active state
gordonbrander Sep 26, 2024
e978a5e
Add gap to sidebar content items
gordonbrander Sep 26, 2024
bf51c59
Reworking font styles a bit
gordonbrander Sep 26, 2024
80d73b8
Add location pill
gordonbrander Sep 26, 2024
06680e4
Add Material Icon component
gordonbrander Sep 27, 2024
ab0d2bd
Fine-tune icon font
gordonbrander Sep 27, 2024
8db03a3
Add hover state to location
gordonbrander Sep 27, 2024
18f2992
Refine label styles and sidebar group spacing
gordonbrander Sep 27, 2024
b9ea9b3
Stub in sidebar states for os-scene
gordonbrander Sep 27, 2024
4c99db8
Wire up show/hide sidebar to button
gordonbrander Sep 27, 2024
3777fb7
Add activated property
gordonbrander Sep 30, 2024
3bc6a2d
Refine open/close animation
gordonbrander Sep 30, 2024
68f571d
Rename os-scene to os-chrome
gordonbrander Sep 30, 2024
db89ac3
Simplify CSS variable naming convention
gordonbrander Sep 30, 2024
e9e92b3
Allow specifying location title
gordonbrander Sep 30, 2024
4bc6d5d
Work around broken container queries vs slots
gordonbrander Oct 1, 2024
1db1fec
Remove unused import
gordonbrander Oct 1, 2024
d9a6597
Allow container to get wider
gordonbrander Oct 1, 2024
469ed75
Add CSS transition util
gordonbrander Oct 1, 2024
fe35698
Support modal sidebar with os-navstack
gordonbrander Oct 1, 2024
b67f4a3
Stub in os-fab
gordonbrander Oct 2, 2024
ad37c87
Add hover state to fab and bubbles
gordonbrander Oct 2, 2024
9bd5409
Add pinned charm group components
gordonbrander Oct 2, 2024
d101182
Add cursor-pointer to bubble
gordonbrander Oct 2, 2024
b44cfd7
Undock and overlap sidebar at small screen sizes
gordonbrander Oct 2, 2024
41264d9
Sidebar now supports splitscreen attr
gordonbrander Oct 3, 2024
2e173f3
Change sidebar attribute to wide
gordonbrander Oct 3, 2024
070f165
Add dialog component
gordonbrander Oct 3, 2024
0f333bb
Add dialog component
gordonbrander Oct 3, 2024
286e53c
Rename numbered vars for consistency
gordonbrander Oct 3, 2024
fd29437
Make icon sizeable
gordonbrander Oct 3, 2024
05dce26
Make AI icon sizeable
gordonbrander Oct 3, 2024
32cb071
Add charm chips and demo dialog box
gordonbrander Oct 3, 2024
496232a
Set cursor pointer on charm chip
gordonbrander Oct 3, 2024
0957b05
Set safe area for dialog left/right at small size
gordonbrander Oct 3, 2024
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
59 changes: 41 additions & 18 deletions typescript/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"./packages/common-frp:build",
"./packages/common-frp-lit:build",
"./packages/common-propagator:build",
"./packages/common-os-ui:build",
"./packages/common-ui:build",
"./packages/llm-client:build",
"./common/data:build",
Expand All @@ -66,6 +67,7 @@
"./packages/common-frp:clean",
"./packages/common-frp-lit:clean",
"./packages/common-propagator:clean",
"./packages/common-os-ui:clean",
"./packages/common-ui:clean",
"./packages/common-runner:clean",
"./packages/common-builder:clean",
Expand Down
179 changes: 179 additions & 0 deletions typescript/packages/common-os-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="src/static/main.css" />
<script type="module" src="src/index.ts"></script>
</head>
<body>
<os-chrome locationtitle="Location">
<os-dialog open>
<os-ai-box placeholder="Search or imagine..."></os-ai-box>
<os-charm-chip-group>
<os-charm-chip icon="mail" text="Mail"></os-charm-chip>
<os-charm-chip icon="mail" text="Work"></os-charm-chip>
<os-charm-chip icon="calendar_month" text="Calendar"> </os-charm-chip>
<os-charm-chip icon="map" text="Bike and rail directions">
</os-charm-chip>
<os-charm-chip icon="cloud" text="Weather"> </os-charm-chip>
<os-charm-chip icon="folder" text="CHEM131"> </os-charm-chip>
<os-charm-chip icon="folder" text="Class notes"> </os-charm-chip>
<os-charm-chip icon="folder" text="Creative writing"> </os-charm-chip>
</os-charm-chip-group>
</os-dialog>
<os-container>
<os-colgrid>
<os-tile></os-tile>
<os-tile></os-tile>
<os-tile></os-tile>
<os-tile></os-tile>
<os-tile></os-tile>
<os-tile></os-tile>
<os-tile></os-tile>
</os-colgrid>
</os-container>
<os-navstack slot="sidebar">
<os-navpanel safearea>
<os-icon-button slot="toolbar-end" icon="info"></os-icon-button>
<os-icon-button slot="toolbar-end" icon="palette"></os-icon-button>
<os-sidebar-close-button slot="toolbar-end"></os-sidebar-close-button>
<os-charm-row-group>
<os-charm-row icon="mail" text="Mail"></os-charm-row>
<os-charm-row icon="calendar_month" text="Calendar"> </os-charm-row>
<os-charm-row icon="map" text="Bike and rail directions">
</os-charm-row>
<os-charm-row icon="cloud" text="Weather"> </os-charm-row>
<os-charm-row icon="folder" text="CHEM131"> </os-charm-row>
</os-charm-row-group>
<os-sidebar-group>
<div slot="label">Title</div>
<div slot="content">Content</div>
</os-sidebar-group>
<os-sidebar-group>
<div slot="label">Title</div>
<div slot="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</os-sidebar-group>
</os-navpanel>
</os-navstack>
</os-chrome>
</body>
</html>
51 changes: 51 additions & 0 deletions typescript/packages/common-os-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{
"name": "@commontools/common-os-ui",
"author": "The Common Authors",
"version": "0.0.1",
"description": "Frontend components for Common OS system UI",
"license": "UNLICENSED",
"private": true,
"type": "module",
"scripts": {
"build": "wireit",
"clean": "wireit",
"dev": "vite"
},
"repository": {
"type": "git",
"url": "git+https://github.com/commontoolsinc/labs.git"
},
"bugs": {
"url": "https://github.com/commontoolsinc/labs/issues"
},
"homepage": "https://github.com/commontoolsinc/labs#readme",
"exports": "./lib/index.js",
"files": [
"./lib/index.js"
],
"dependencies": {
"lit": "^3.2.0"
},
"devDependencies": {
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"wireit": "^0.14.4"
},
"wireit": {
"build": {
"dependencies": [
"../common-ui:build"
],
"files": [
"./src/**/*"
],
"output": [
"./lib/**/*"
],
"command": "tsc --build -f"
},
"clean": {
"command": "rm -rf ./lib ./.wireit"
}
}
}
Loading