yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui/sidebar: finishes general structure of new sidebar components

Browse Source
This commit is contained in:
Timo
2024-10-19 08:40:30 +02:00
parent f2ead637bc
commit 7821c343d6
16 changed files with 265 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pkgs/webview-ui/app/src/components/Helpers/List.tsx Normal file
View File

@@ -0,0 +1,21 @@
import {type JSX} from 'solid-js'
type sizes = 'small' | 'medium' | 'large'
const gapSizes:{[size in sizes]:string} = {
small: 'gap-2',
medium: 'gap-4',
large: 'gap-6'
}
interface List {
children: JSX.Element;
gapSize: sizes
}
export const List = (props: List) =>{
const {children, gapSize} = props
return <ul class={`flex flex-col ${gapSizes[gapSize]}`}> {children}
</ul>
}

1
pkgs/webview-ui/app/src/components/Helpers/index.tsx Normal file
View File

@@ -0,0 +1 @@
export {List} from './List'

2
pkgs/webview-ui/app/src/components/MachineListItem.tsx
View File

@@ -103,7 +103,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
};
return (
<li>
<div class="card card-side m-2 bg-base-100">
<div class="card card-side m-2 timo">
<figure class="pl-2">
<span
class="material-icons content-center text-5xl"

2
pkgs/webview-ui/app/src/components/Menu.tsx
View File

@@ -1,4 +1,4 @@
import { children, Component, createSignal, type JSX } from "solid-js";
import { children, createSignal, type JSX } from "solid-js";
import { useFloating } from "@/src/floating";
import {
autoUpdate,

12
pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx Normal file
View File

@@ -0,0 +1,12 @@
import {List} from '@/src/components/Helpers'
import {SidebarListItem} from '../SidebarListItem'
export const SidebarFlyout= () =>{
return <div class="sidebar__flyout">
<div class="sidebar__flyout__inner">
<List gapSize='small'>
<SidebarListItem title='Settings' delegateClick={()=>{}} />
</List>
</div>
</div>
}

11
pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx Normal file
View File

@@ -0,0 +1,11 @@
import {SidebarFlyout} from './SidebarFlyout'
export const SidebarHeader = ()=>{
return <header class="sidebar__header">
<div class="sidebar__header__inner">
<div class="sidebar__profile">P</div>
<h3 class="sidebar__title">Paul's Clan</h3>
</div>
<SidebarFlyout/>
</header>
}

11
pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx Normal file
View File

@@ -0,0 +1,11 @@
interface SidebarListItem {
title:string;
delegateClick: () => void;
}
export const SidebarListItem = (props: SidebarListItem) =>{
const {title} = props;
return <li class="sidebar__list__item">
<span class="sidebar__list__content">{title}</span></li>
}

21
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css Normal file
View File

@@ -0,0 +1,21 @@
.sidebar__flyout {
top: 0;
position: absolute;
z-index: theme(zIndex.30);
padding: theme(padding[1]);
width: 100%;
height: auto;
}
.sidebar__flyout__inner {
position: relative;
width: inherit;
height: inherit;
padding: theme(padding.12) theme(padding.3) theme(padding.3);
background-color: rgba(var(--clr-bg-inv-4)/0.90);
border: 1px solid var(--clr-border-inv-4);
border-radius: theme(borderRadius.lg);
}

26
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css Normal file
View File

@@ -0,0 +1,26 @@
.sidebar__header {
position: relative;
padding: 1px 1px 0;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(var(--clr-bg-inv-3));
border-top-left-radius: theme(borderRadius.xl);
border-top-right-radius: theme(borderRadius.xl);
}
}
.sidebar__header__inner {
position: relative;
z-index: theme(zIndex.40);
display: flex;
align-items: center;
gap: 0 theme(gap.3);
padding: theme(padding.3) theme(padding.3);
}

40
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css Normal file
View File

@@ -0,0 +1,40 @@
.sidebar__list__item {
position: relative;
padding: theme(padding.3);
cursor: theme(cursor.pointer);
&:after {
content: '';
position: absolute;
z-index: theme(zIndex.10);
top: 0;
left:0;
width: 100%;
height: 100%;
border-radius: theme(borderRadius.md);
transform: scale(0.98);
transition: transform 0.24s ease-in-out;
}
&:hover:after {
background: rgb(var(--clr-bg-inv-acc-2));
transform: scale(theme(scale.100));
transition: transform 0.24s ease-in-out;
}
&:active {
transform: scale(0.99);
transition: transform 0.08s ease-in-out;
}
&:active:after {
background: rgb(var(--clr-bg-inv-acc-3));
transform: scale(theme(scale.100));
}
}
.sidebar__list__content {
position: relative;
z-index: 20;
}

11
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css Normal file
View File

@@ -0,0 +1,11 @@
.sidebar__profile {
display: flex;
justify-content: center;
align-items: center;
width: theme(width.8);
height: theme(height.8);
background: rgb(var(--clr-bg-inv-4));
border-radius: 50%;
}

27
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css Normal file
View File

@@ -0,0 +1,27 @@
/* Sidebar Elements */
@import './sidebar-header';
@import './sidebar-flyout';
@import './sidebar-list-item';
@import './sidebar-profile';
/* Sidebar Structure */
.sidebar {
background-color: rgb(var(--clr-bg-inv-2));
border: 1px solid rgb(var(--clr-border-inv-2));
border-radius: theme(borderRadius.xl);
}
.sidebar__body {
display: flex;
flex-direction: column;
gap: theme(padding.2);
padding: theme(padding.4) theme(padding.2);
}
.sidebar__section {
padding: theme(padding.2);
background-color: rgba(var(--clr-bg-inv-3)/0.9);
border-radius: theme(borderRadius.md);
}

37
pkgs/webview-ui/app/src/components/Sidebar/index.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { type JSX } from "solid-js"
import { List } from "../Helpers";
import {SidebarHeader} from "./SidebarHeader"
import "./css/sidebar.css";
import { SidebarListItem } from "./SidebarListItem";
export const SidebarSection = (props:{children: JSX.Element}) =>{
const {children} = props
return <div class="sidebar__section">{children}</div>
}
export const Sidebar = () => {
return (
<div class="sidebar bg-opacity-95">
<SidebarHeader/>
<div class="sidebar__body">
<SidebarSection>
<List gapSize="small">
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
</List>
</SidebarSection>
<SidebarSection>
<List gapSize="small">
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
<SidebarListItem title="test" delegateClick={()=>{}}/>
</List>
</SidebarSection>
</div>
</div>
)
}