starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-18 06:57:11 +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 55970f0a92
commit 2caa13fdec
16 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yaak App</title>
<script src="http://localhost:8097"></script>
<!-- <script src="http://localhost:8097"></script>-->
<style>
body {
background-color: white;

4
src-tauri/src/window_ext.rs
View File

@@ -1,7 +1,7 @@
use tauri::{Runtime, Window};
const TRAFFIC_LIGHT_OFFSET_X: f64 = 15.0;
const TRAFFIC_LIGHT_OFFSET_Y: f64 = 22.0;
const TRAFFIC_LIGHT_OFFSET_X: f64 = 10.0;
const TRAFFIC_LIGHT_OFFSET_Y: f64 = 16.0;
pub trait WindowExt {
fn position_traffic_lights(&self);

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

14
src-web/lib/theme/window.ts
View File

@@ -30,13 +30,13 @@ const lightTheme: AppTheme = {
root: {
colors: {
gray: '#7f8fb0',
red: '#da4545',
orange: '#e38511',
yellow: '#e0c514',
green: '#29d229',
blue: '#1365ff',
pink: '#ff69dc',
violet: '#9959ff',
red: '#ec3f87',
orange: '#ff8b00',
yellow: '#deda00',
green: '#00d365',
blue: '#0090ff',
pink: '#f670f6',
violet: '#ac6cff',
},
},
},

24
tailwind.config.cjs
View File

@@ -1,3 +1,8 @@
const height = {
"sm": "2rem",
"md": "2.5rem"
};
/** @type {import("tailwindcss").Config} */
module.exports = {
darkMode: ["class", "[data-appearance=\"dark\"]"],
@@ -8,20 +13,14 @@ module.exports = {
theme: {
extend: {
opacity: {
'disabled': '0.3',
},
height: {
'sm': '2rem',
'md': '2.5rem',
},
lineHeight: {
'sm': '2rem',
'md': '2.5rem',
"disabled": "0.3"
},
height,
lineHeight: height
},
fontFamily: {
"mono": ["JetBrains Mono", "Menlo", "monospace"],
"sans": ["Inter", "sans-serif"],
"sans": ["Inter", "sans-serif"]
},
fontSize: {
sm: "0.9rem",
@@ -36,7 +35,8 @@ module.exports = {
selection: "hsl(var(--color-violet-500) / 0.4)",
focus: "hsl(var(--color-blue-500) / 0.6)",
invalid: "hsl(var(--color-red-500))",
highlight: "hsl(var(--color-gray-200) / 0.3)",
highlight: "hsl(var(--color-gray-300) / 0.35)",
highlightSecondary: "hsl(var(--color-gray-300) / 0.2)",
transparent: "transparent",
white: "hsl(0 100% 100% / <alpha-value>)",
black: "hsl(0 100% 0% / <alpha-value>)",
@@ -52,7 +52,7 @@ module.exports = {
}
},
plugins: [
require('@tailwindcss/container-queries'),
require("@tailwindcss/container-queries")
]
};