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 9030fa0cf4
commit d4e9f7af71
16 changed files with 265 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ export const Sidebar = (props: RouteSectionProps) => {
}));
return (
<aside class="w-80 rounded-xl border border-slate-900 bg-slate-800 pb-10">
<aside class="w-80 rounded-xl border border-slate-900 bg-slate-800 pb-10">
<div class="m-4 flex flex-col text-center capitalize text-white">
<span class="text-lg">{clanQuery.data?.name}</span>
<span class="text-sm">{clanQuery.data?.description}</span>

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>
)
}

41
pkgs/webview-ui/app/src/index.css
View File

@@ -1,3 +1,4 @@
@import "material-icons/iconfont/filled.css";
/* List of icons: https://marella.me/material-icons/demo/ */
@@ -21,6 +22,46 @@
src: url(../.fonts/Archiv0-Bold.otf) format("opentype");
}
:root {
--clr-bg-def-1: theme(colors.white);
--clr-bg-def-2: theme(colors.clan-secondary.50);
--clr-bg-def-3: theme(colors.clan-secondary.100);
--clr-bg-def-4: theme(colors.clan-secondary.200);
--clr-bg-def-5: theme(colors.clan-secondary.300);
--clr-border-def-1: theme(colors.clan-primary.50);
--clr-border-def-2: theme(colors.clan-primary.100);
--clr-border-def-3: theme(colors.clan-primary.200);
--clr-border-def-4: theme(colors.clan-primary.300);
--clr-border-def-5: theme(colors.clan-primary.400);
--clr-bg-inv-1: theme(colors.clan-primary.600);
--clr-bg-inv-2: theme(colors.clan-primary.700);
--clr-bg-inv-3: theme(colors.clan-primary.800);
--clr-bg-inv-4: theme(colors.clan-primary.900);
--clr-bg-inv-5: theme(colors.clan-primary.950);
--clr-border-inv-1: theme(colors.clan-primary.800);
--clr-border-inv-2: theme(colors.clan-primary.900);
--clr-border-inv-3: theme(colors.clan-primary.900);
--clr-border-inv-4: theme(colors.clan-primary.950);
--clr-border-inv-5: theme(colors.black);
--clr-bg-inv-acc-1: theme(colors.clan-secondary.500);
--clr-bg-inv-acc-2: theme(colors.clan-secondary.600);
--clr-bg-inv-acc-3: theme(colors.clan-secondary.700);
--clr-fg-def-1: theme(colors.clan-secondary.950);
--clr-fg-def-2: theme(colors.clan-secondary.900);
--clr-fg-def-3: theme(colors.clan-secondary.700);
--clr-fg-def-4: theme(colors.clan-secondary.500);
--clr-fg-inv-1: theme(colors.white);
--clr-fg-inv-2: theme(colors.clan-secondary.100);
--clr-fg-inv-3: theme(colors.clan-secondary.300);
--clr-fg-inv-4: theme(colors.clan-secondary.400);
}
html {
@apply font-sans;
overflow-x: hidden;

3
pkgs/webview-ui/app/src/layout/layout.tsx
View File

@@ -1,6 +1,7 @@
import { Component, createEffect, Show } from "solid-js";
import { Header } from "./header";
import { Sidebar } from "../Sidebar";
import {Sidebar as SidebarUpdate} from "@/src/components/Sidebar"
import { activeURI, clanList } from "../App";
import { redirect, RouteSectionProps, useNavigate } from "@solidjs/router";
@@ -16,6 +17,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
navigate("/welcome");
}
});
return (
<div class="h-screen bg-base-100 p-4">
<div class="drawer lg:drawer-open ">
@@ -42,6 +44,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
aria-label="close sidebar"
class="drawer-overlay"
></label>
<SidebarUpdate/>
<Sidebar {...props} />
</div>
</div>