starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-20 00:23:58 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Resize titlebar and tweak things

Browse Source
This commit is contained in:
Gregory Schier
2023-03-21 16:42:52 -07:00
parent df4dbaecc8
commit c84f2afd09
16 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src-web/components/App.tsx
View File

@@ -1,6 +1,5 @@
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { persistQueryClient } from '@tanstack/react-query-persist-client';
import { invoke } from '@tauri-apps/api';
import { listen } from '@tauri-apps/api/event';
@@ -161,7 +160,7 @@ export function App() {
<HelmetProvider>
<DndProvider backend={HTML5Backend}>
<AppRouter />
<ReactQueryDevtools initialIsOpen={false} />
{/*<ReactQueryDevtools initialIsOpen={false} />*/}
</DndProvider>
</HelmetProvider>
</MotionConfig>

6
src-web/components/GraphQLEditor.tsx
View File

@@ -54,15 +54,17 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P
defaultValue={query ?? ''}
onChange={handleChangeQuery}
contentType="application/graphql"
placeholder="..."
format={formatSdl}
placeholder={`query { }`}
{...extraEditorProps}
/>
<Separator />
<Separator variant="primary" />
{/*<Separator variant="secondary" />*/}
<p className="pt-1 text-gray-500 text-sm">Variables</p>
<Editor
useTemplating
heightMode="auto"
placeholder="{}"
defaultValue={JSON.stringify(variables, null, 2)}
onChange={handleChangeVariables}
contentType="application/json"

4
src-web/components/RequestPane.tsx
View File

@@ -24,7 +24,7 @@ export function RequestPane({ fullHeight, className }: Props) {
const activeRequestId = activeRequest?.id ?? null;
const updateRequest = useUpdateRequest(activeRequestId);
const activeTab = useKeyValue<string>({
key: ['active_request_body_tab', activeRequestId ?? 'n/a'],
key: ['active_request_body_tab'],
defaultValue: 'body',
});
@@ -96,6 +96,7 @@ export function RequestPane({ fullHeight, className }: Props) {
<Editor
key={activeRequest.id}
useTemplating
placeholder="..."
className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
defaultValue={activeRequest.body ?? ''}
@@ -107,6 +108,7 @@ export function RequestPane({ fullHeight, className }: Props) {
<Editor
key={activeRequest.id}
useTemplating
placeholder="..."
className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
defaultValue={activeRequest.body ?? ''}

11
src-web/components/Sidebar.tsx
View File

@@ -3,7 +3,6 @@ import type { ForwardedRef, KeyboardEvent, MouseEvent as ReactMouseEvent } from
import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import type { XYCoord } from 'react-dnd';
import { useDrag, useDrop } from 'react-dnd';
import { Helmet } from 'react-helmet-async';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
@@ -81,12 +80,6 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
return (
<div className="relative">
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
{isResizing && (
<Helmet>
<html className="cursor-ew-resize" />
</Helmet>
)}
<div
aria-hidden
className="group absolute z-10 right-0 w-2 top-0 bottom-0 cursor-ew-resize flex justify-end"
@@ -294,8 +287,8 @@ const _SidebarItem = forwardRef(function SidebarItem(
'w-full',
editing && 'focus-within:border-focus',
active
? 'bg-gray-200/70 text-gray-900'
: 'text-gray-600 group-hover/item:text-gray-800 active:bg-gray-200/30',
? 'bg-highlight text-gray-900'
: 'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
// Move out of the way when trash is shown
'group-hover/item:pr-7',
)}

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

@@ -31,6 +31,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
return (
<form onSubmit={handleSubmit} className={classnames('url-bar', className)}>
<Input
size="sm"
key={requestId}
hideLabel
useTemplating
@@ -41,9 +42,13 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"
onChange={handleUrlChange}
defaultValue={url}
placeholder="Enter a URL..."
placeholder="https://example.com"
leftSlot={
<RequestMethodDropdown method={method} onChange={handleMethodChange} className="mx-0.5" />
<RequestMethodDropdown
method={method}
onChange={handleMethodChange}
className="mx-0.5 h-full my-1"
/>
}
rightSlot={
<IconButton

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

@@ -39,7 +39,7 @@ export default function Workspace() {
<HStack
as={WindowDragRegion}
justifyContent="center"
className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
className="px-3 bg-gray-50 text-gray-900 border-b border-b-highlight pt-[1px]"
alignItems="center"
>
<div className="flex-1 -ml-2 pointer-events-none">

4
src-web/components/core/Button.tsx
View File

@@ -59,14 +59,14 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
return (
<Link ref={ref} to={to} className={classes} {...props}>
{children}
{forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
{forDropdown && <Icon icon="chevronDown" className="ml-1 -mr-1" />}
</Link>
);
} else {
return (
<button ref={ref} className={classes} {...props}>
{children}
{forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
{forDropdown && <Icon icon="chevronDown" size="sm" className="ml-1 -mr-1" />}
</button>
);
}

2
src-web/components/core/Icon.tsx
View File

@@ -3,6 +3,7 @@ import {
CameraIcon,
CheckboxIcon,
CheckIcon,
ChevronDownIcon,
ClockIcon,
CodeIcon,
ColorWheelIcon,
@@ -49,6 +50,7 @@ const icons = {
home: HomeIcon,
listBullet: ListBulletIcon,
magicWand: MagicWandIcon,
chevronDown: ChevronDownIcon,
magnifyingGlass: MagnifyingGlassIcon,
moon: MoonIcon,
paperPlane: PaperPlaneIcon,

2
src-web/components/core/Input.tsx
View File

@@ -80,7 +80,7 @@ export function Input({
className={classnames(
containerClassName,
'relative w-full rounded-md text-gray-900',
'border border-gray-200 focus-within:border-focus',
'border border-highlight focus-within:border-focus',
!isValid && '!border-invalid',
size === 'md' && 'h-md leading-md',
size === 'sm' && 'h-sm leading-sm',

1
src-web/components/core/PairEditor.tsx
View File

@@ -271,7 +271,6 @@ const FormRow = memo(function FormRow({
onChange={handleChangeEnabled}
/>
<div
onDragStart={(e) => e.preventDefault()}
className={classnames(
'grid items-center',
'@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',

6
src-web/components/core/Separator.tsx
View File

@@ -2,16 +2,18 @@ import classnames from 'classnames';
interface Props {
orientation?: 'horizontal' | 'vertical';
variant?: 'primary' | 'secondary';
className?: string;
}
export function Separator({ className, orientation = 'horizontal' }: Props) {
export function Separator({ className, variant = 'primary', orientation = 'horizontal' }: Props) {
return (
<div
role="separator"
className={classnames(
className,
'bg-gray-300/40',
variant === 'primary' && 'bg-highlight',
variant === 'secondary' && 'bg-highlightSecondary',
orientation === 'horizontal' && 'w-full h-[1px]',
orientation === 'vertical' && 'h-full w-[1px]',
)}

2
src-web/components/core/WindowDragRegion.tsx
View File

@@ -10,7 +10,7 @@ export function WindowDragRegion({ className, ...props }: Props) {
return (
<div
data-tauri-drag-region
className={classnames(className, 'w-full h-12 flex-shrink-0')}
className={classnames(className, 'w-full h-md flex-shrink-0')}
{...props}
/>
);