From 438e6d4df983aec7ab1fe1e5ff5a8e089900200e Mon Sep 17 00:00:00 2001 From: tomholford Date: Thu, 3 Mar 2022 17:10:54 -0600 Subject: [PATCH] ui: style tabs also rename join --> useDark; clean up extraneous logging statements --- pkg/interface/webterm/{app.tsx => App.tsx} | 10 ++--- pkg/interface/webterm/Buffer.tsx | 11 ++--- pkg/interface/webterm/Tab.tsx | 2 +- pkg/interface/webterm/Tabs.tsx | 2 +- pkg/interface/webterm/index.html | 43 ++++++++++++++----- .../webterm/{join.ts => lib/useDark.ts} | 8 ++-- 6 files changed, 45 insertions(+), 31 deletions(-) rename pkg/interface/webterm/{app.tsx => App.tsx} (91%) rename pkg/interface/webterm/{join.ts => lib/useDark.ts} (75%) diff --git a/pkg/interface/webterm/app.tsx b/pkg/interface/webterm/App.tsx similarity index 91% rename from pkg/interface/webterm/app.tsx rename to pkg/interface/webterm/App.tsx index d7c782f296..9ad1d61858 100644 --- a/pkg/interface/webterm/app.tsx +++ b/pkg/interface/webterm/App.tsx @@ -1,13 +1,12 @@ -/* eslint-disable max-lines */ import React, { useCallback, useEffect } from 'react'; -import useTermState, { Sessions } from './state'; -import { useDark } from './join'; +import useTermState from './state'; +import { useDark } from './lib/useDark'; import api from './api'; -import { Reset, _dark, _light } from '@tlon/indigo-react'; +import { _dark, _light } from '@tlon/indigo-react'; import 'xterm/css/xterm.css'; @@ -83,11 +82,10 @@ export default function TermApp(props: TermAppProps) { return ( <> -
{names.map(name => { - return ; + return ; })}
diff --git a/pkg/interface/webterm/Buffer.tsx b/pkg/interface/webterm/Buffer.tsx index ef65c592bd..8ef69e2e94 100644 --- a/pkg/interface/webterm/Buffer.tsx +++ b/pkg/interface/webterm/Buffer.tsx @@ -12,8 +12,7 @@ import useTermState from './state'; import React from 'react'; import { Box, Col } from '@tlon/indigo-react'; import { makeTheme } from './lib/theme'; -import { useDark } from './join'; -import { showBlit, csi, showSlog } from './lib/blit'; +import { showBlit, csi } from './lib/blit'; const termConfig: ITerminalOptions = { logLevel: 'warn', @@ -138,11 +137,11 @@ const onInput = (name: string, session: Session, e: string) => { interface BufferProps { name: string, selected: boolean, + dark: boolean, } -export default function Buffer({ name, selected }: BufferProps) { +export default function Buffer({ name, selected, dark }: BufferProps) { const container = useRef(null); - const dark = useDark(); const session: Session = useTermState(s => s.sessions[name]); @@ -210,10 +209,6 @@ export default function Buffer({ name, selected }: BufferProps) { let newContainer = containerRef || container.current; if(session && newContainer) { container.current = newContainer; - console.log('newcont', newContainer); - // session.term.open(newContainer); - } else { - console.log('kaboom', session); } }, [session]); diff --git a/pkg/interface/webterm/Tab.tsx b/pkg/interface/webterm/Tab.tsx index f55627f6d7..0813292bde 100644 --- a/pkg/interface/webterm/Tab.tsx +++ b/pkg/interface/webterm/Tab.tsx @@ -44,7 +44,7 @@ export const Tab = ( { session, name }: TabProps ) => { }, [session]); return ( -
+
{session?.hasBell ? '🔔 ' : ''} {name === DEFAULT_SESSION ? 'default' : name} diff --git a/pkg/interface/webterm/Tabs.tsx b/pkg/interface/webterm/Tabs.tsx index bf3d32b64b..e98c38d3f4 100644 --- a/pkg/interface/webterm/Tabs.tsx +++ b/pkg/interface/webterm/Tabs.tsx @@ -29,7 +29,7 @@ export const Tabs = () => { ); })} - +
); }; diff --git a/pkg/interface/webterm/index.html b/pkg/interface/webterm/index.html index ed7f861119..e2f4a18c27 100644 --- a/pkg/interface/webterm/index.html +++ b/pkg/interface/webterm/index.html @@ -29,32 +29,38 @@ } .buffer-container { - height: calc(100% - 33px); + height: calc(100% - 40px); } div.tabs { - height: 33px; + height: 40px; display: flex; flex-flow: row nowrap; justify-content: flex-start; - padding: 5px 0; + padding: 5px 5px 0 5px; border-bottom: 1px solid black; + background-color: white; } div.tabs > * { margin-left: 5px; margin-right: 5px; border: solid 1px black; - padding: 7px; + padding: 10px; cursor: pointer; } - div.tab { - text-align: center; - /* display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: space-between; */ + div.tab, button.tab { + margin-bottom: -1px; /** To overlay the selected tab on the tabs container bottom border */ + border-top-left-radius: 5px; + border-top-right-radius: 5px; + font-family: monospace; + font-size: 14px; + line-height: 18px; + } + + div.tabs > div.selected { + border-bottom: white solid 1px; } div.tabs > div.selected > a.session-name { @@ -65,6 +71,23 @@ padding: 5px; } + @media (prefers-color-scheme: dark) { + div.tabs { + background-color: rgb(26, 26, 26); + color: rgba(255, 255, 255, 0.9); + border-bottom-color: rgba(255, 255, 255, 0.9); + } + + div.tab, button.tab { + background-color: rgb(26, 26, 26); + color: rgba(255, 255, 255, 0.9); + border-color: rgba(255, 255, 255, 0.9); + } + + div.tabs > div.selected { + border-bottom: black solid 1px; + } + } diff --git a/pkg/interface/webterm/join.ts b/pkg/interface/webterm/lib/useDark.ts similarity index 75% rename from pkg/interface/webterm/join.ts rename to pkg/interface/webterm/lib/useDark.ts index 957abbd3d1..cd96254033 100644 --- a/pkg/interface/webterm/join.ts +++ b/pkg/interface/webterm/lib/useDark.ts @@ -1,6 +1,5 @@ import { useEffect, useState } from 'react'; -import { useTheme } from './settings'; -import useTermState from './state'; +import useTermState from '../state'; export function useDark() { const [osDark, setOsDark] = useState(false); @@ -11,12 +10,11 @@ export function useDark() { setOsDark(e.matches); }; setOsDark(themeWatcher.matches); - themeWatcher.addListener(update); + themeWatcher.addEventListener('change', update); return () => { - themeWatcher.removeListener(update); + themeWatcher.removeEventListener('change', update); } - }, []); const theme = useTermState(s => s.theme);