github-starred/yaak
2
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-11 17:46:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Focus states

Browse Source
This commit is contained in:
Gregory Schier
2023-02-24 12:35:13 -08:00
parent 5a9fb5a3a7
commit a5829a9b6b
5 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src-web/App.tsx
View File

@@ -2,13 +2,11 @@ import { useState } from 'react';
import { invoke } from '@tauri-apps/api/tauri';
import Editor from './components/Editor/Editor';
import { HStack, VStack } from './components/Stacks';
import { Dropdown, DropdownMenuRadio } from './components/Dropdown';
import { Dropdown } from './components/Dropdown';
import { WindowDragRegion } from './components/WindowDragRegion';
import { IconButton } from './components/IconButton';
import { Sidebar } from './components/Sidebar';
import { UrlBar } from './components/UrlBar';
import { Input } from './components/Input';
import { Button } from './components/Button';
import { Grid } from './components/Grid';
interface Response {
@@ -53,7 +51,8 @@ function App() {
<Sidebar />
<Grid cols={2}>
<VStack className="w-full">
<HStack as={WindowDragRegion} items="center" className="pl-3 pr-1.5">
<HStack as={WindowDragRegion} items="center" className="pl-3 pr-1.5"></HStack>
<VStack className="pl-3 px-1.5 py-3" space={3}>
<UrlBar
method={method}
url={url}
@@ -61,23 +60,11 @@ function App() {
onUrlChange={setUrl}
sendRequest={sendRequest}
/>
</HStack>
<VStack className="pl-3 px-1.5 py-3" space={3}>
<Editor value="" contentType={contentType} />
</VStack>
</VStack>
<VStack className="w-full">
<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">
{response && (
<div className="my-1 italic text-gray-500 text-sm w-full pointer-events-none">
{response.method.toUpperCase()}
&nbsp;&bull;&nbsp;
{response.status}
&nbsp;&bull;&nbsp;
{response.elapsed}ms &nbsp;&bull;&nbsp;
{response.elapsed2}ms
</div>
)}
<Dropdown
items={[
{
@@ -97,6 +84,15 @@ function App() {
{error && <div className="text-white bg-red-500 px-3 py-1 rounded">{error}</div>}
{response !== null && (
<>
<HStack
items="center"
className="italic text-gray-500 text-sm w-full pointer-events-none h-10 mb-3 flex-shrink-0"
>
{response.status}
&nbsp;&bull;&nbsp;
{response.elapsed}ms &nbsp;&bull;&nbsp;
{response.elapsed2}ms
</HStack>
{contentType.includes('html') ? (
<iframe
title="Response preview"

14
src-web/components/Editor/Editor.css
View File

@@ -10,19 +10,21 @@
right: 0;
top: 0;
bottom: 0;
border-radius: var(--border-radius-lg);
border: 1px solid hsl(var(--color-gray-50));
font-size: 0.9rem;
}
.cm-editor .cm-scroller {
border: 1px solid hsl(var(--color-gray-50));
border-radius: var(--border-radius-lg);
background-color: hsl(var(--color-gray-50));
}
.cm-editor.cm-focused {
outline: none !important;
border-color: hsl(var(--color-gray-100));
}
.cm-editor .cm-scroller {
border-radius: var(--border-radius-lg);
background-color: hsl(var(--color-gray-50));
.cm-editor.cm-focused .cm-scroller {
border-color: hsl(var(--color-blue-400)/0.4);
}
.cm-editor .cm-line {

14
src-web/components/Input.tsx
View File

@@ -29,10 +29,16 @@ export function Input({
return (
<HStack
items="center"
className={classnames(containerClassName, 'w-full bg-gray-50 rounded-md text-sm')}
className={classnames(
containerClassName,
'w-full bg-gray-50 rounded-md text-sm overflow-hidden text-gray-900',
'border border-transparent focus-within:border-blue-400/40',
size === 'md' && 'h-10',
size === 'sm' && 'h-8',
)}
>
{leftSlot}
<VStack className={classnames('w-full border-gray-100/50')}>
<VStack className="w-full">
<label
htmlFor={name}
className={classnames(
@@ -47,11 +53,9 @@ export function Input({
id={id}
className={classnames(
className,
'bg-transparent min-w-0 pl-3 pr-2 w-full focus:outline-none text-gray-900',
'bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
leftSlot && 'pl-1',
rightSlot && 'pr-1',
size === 'md' && 'h-10',
size === 'sm' && 'h-8',
)}
{...props}
/>

2
src-web/components/Stacks.tsx
View File

@@ -19,7 +19,7 @@ const spaceClassesY = {
interface HStackProps extends BaseStackProps {
space?: keyof typeof spaceClassesX;
children: ReactNode;
children?: ReactNode;
}
export function HStack({ className, space, children, ...props }: HStackProps) {

7
src-web/components/UrlBar.tsx
View File

@@ -28,10 +28,9 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
};
return (
<form onSubmit={handleSendRequest} className="w-full flex items-center overflow-hidden">
<form onSubmit={handleSendRequest} className="w-full flex items-center">
<Input
hideLabel
size="sm"
name="url"
label="Enter URL"
className="font-mono"
@@ -48,7 +47,7 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
{ label: 'POST', value: 'POST' },
]}
>
<Button disabled={loading} size="xs" className="ml-1" justify="start">
<Button disabled={loading} size="sm" className="ml-1" justify="start">
{method.label}
</Button>
</DropdownMenuRadio>
@@ -58,7 +57,7 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
icon={loading ? 'update' : 'paper-plane'}
spin={loading}
disabled={loading}
size="xs"
size="sm"
className="mr-1"
/>
}