martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-24 02:25:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

starting session component

Browse Source
This commit is contained in:
balzack 2024-08-30 23:12:39 -07:00
parent 03ee71ae69
commit 3ac5a09081
5 changed files with 143 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/client/web/src/App.tsx
View File

@ -19,9 +19,9 @@ const theme = createTheme({
'#eef6f2',
'#cce5d9',
'#aad4bf',
'#88c3a6',
'#66b28c',
'#4d9973',
'#68c4af',
'#559e83',
'#559e83',
'#3c7759',
'#2b5540',
'#1a3326',
@ -75,6 +75,36 @@ const theme = createTheme({
'#888888',
'#999999',
],
'dark-databag-green': [
'#99bb99',
'#559e83',
],
'light-databag-green': [
'#888888',
'#448844',
],
'dark-tab': [
'#111111',
'#222222',
'#333333',
'#444444',
],
'light-tab': [
'#dddddd',
'#cccccc',
'#bbbbbb',
'#aaaaaa',
],
dbgreen: virtualColor({
name: 'dbgreen',
dark: 'dark-databag-green',
light: 'light-databag-green',
}),
tab: virtualColor({
name: 'tab',
dark: 'dark-tab',
light: 'light-tab',
}),
surface: virtualColor({
name: 'surface',
dark: 'dark-surface',

2
app/client/web/src/access/Access.tsx
View File

@ -339,7 +339,7 @@ export function Access() {
leftSectionPointerEvents="none"
leftSection={<IconServer />}
placeholder={state.strings.host}
value={state.node}
value={state.host}
onKeyDown={(ev) => {
if (ev.code === 'Enter') urlClose()
}}

20
app/client/web/src/access/useAccess.hook.ts
View File

@ -19,7 +19,6 @@ export function useAccess() {
code: '',
scheme: '',
language: '',
node: '',
loading: false,
secure: false,
host: '',
@ -46,7 +45,7 @@ export function useAccess() {
}
const { protocol, host } = location
setUrl(`${protocol}//${host}`)
updateState({ host, secure: protocol === 'https' });
}, [])
useEffect(() => {
@ -57,18 +56,6 @@ export function useAccess() {
}
}, [state.mode, state.username, state.token, state.host, state.secure])
const setUrl = (node: string) => {
try {
const url = new URL(node)
const { protocol, host } = url
updateState({ node, host, secure: protocol === 'https:' })
} catch (err) {
console.log(err)
const { protocol, host } = location
updateState({ node, host, secure: protocol === 'https:' })
}
}
const getAvailable = (node: string, secure: boolean) => {
clearTimeout(debounceAvailable.current)
debounceAvailable.current = setTimeout(async () => {
@ -133,8 +120,9 @@ export function useAccess() {
setCode: (code: string) => {
updateState({ code })
},
setNode: (node: string) => {
setUrl(node)
setNode: (host: string) => {
const insecure = /^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|:\d+$|$)){4}$/.test(host);
updateState({ host, secure: !insecure });
},
setLanguage: (code: string) => {
settings.actions.setLanguage(code)

52
app/client/web/src/session/Session.module.css Normal file
View File

@ -0,0 +1,52 @@
.session {
position: relative;
width: 100%;
height: 100%;
.tabs {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
.activeTabItem {
flex: 1;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--mantine-color-tab-2);
color: var(--mantine-color-dbgreen-1);
padding-bottom: 8px;
padding-top: 8px;
cursor: pointer;
}
.idleTabItem {
flex: 1;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--mantine-color-tab-1);
color: var(--mantine-color-dbgreen-0);
padding-bottom: 8px;
padding-top: 8px;
cursor: pointer;
&:hover {
background: var(--mantine-color-tab-3);
}
}
.tabDivider {
width: 2px;
}
.tabIcon {
width: 32px;
height: 32px;
}
}
}

56
app/client/web/src/session/Session.tsx
View File

@ -1,10 +1,60 @@
import React, { useContext } from 'react'
import { Button } from '@mantine/core'
import React, { useState, useContext } from 'react'
import { Text, Button } from '@mantine/core'
import { AppContext } from '../context/AppContext'
import { SettingsContext } from '../context/SettingsContext';
import { ContextType } from '../context/ContextType'
import classes from './Session.module.css'
import { IconAddressBook, IconMessages, IconUser, IconSettings } from '@tabler/icons-react'
export function Session() {
const [ tab, setTab ] = useState('channels');
const app = useContext(AppContext) as ContextType
const settings = useContext(SettingsContext) as ContextType
return <Button onClick={app.actions.accountLogout}>Session Logout</Button>
console.log(tab);
return (
<div className={classes.session}>
{ settings.state.display === 'small' && (
<div className={classes.tabs}>
{ tab === 'channels' && (
<div className={classes.activeTabItem}><IconMessages className={classes.tabIcon} /></div>
)}
{ tab !== 'channels' && (
<div className={classes.idleTabItem} onClick={() => setTab('channels')}><IconMessages className={classes.tabIcon} /></div>
)}
<div className={classes.tabDivider} />
{ tab === 'contacts' && (
<div className={classes.activeTabItem}><IconAddressBook className={classes.tabIcon} /></div>
)}
{ tab !== 'contacts' && (
<div className={classes.idleTabItem} onClick={() => setTab('contacts')}><IconAddressBook className={classes.tabIcon} /></div>
)}
<div className={classes.tabDivider} />
{ tab === 'profile' && (
<div className={classes.activeTabItem}><IconUser className={classes.tabIcon} /></div>
)}
{ tab !== 'profile' && (
<div className={classes.idleTabItem} onClick={() => setTab('profile')}><IconUser className={classes.tabIcon} /></div>
)}
<div className={classes.tabDivider} />
{ tab === 'settings' && (
<div className={classes.activeTabItem}><IconSettings className={classes.tabIcon} /></div>
)}
{ tab !== 'settings' && (
<div className={classes.idleTabItem} onClick={() => setTab('settings')}><IconSettings className={classes.tabIcon} /></div>
)}
</div>
)}
{ settings.state.display === 'medium' && (
<div>MEDIUM DISPLAY</div>
)}
{ settings.state.display === 'large' && (
<div>LARGE DISPLAY</div>
)}
<Button onClick={app.actions.accountLogout}>Session Logout</Button>
</div>
);
}