mirror/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia.git synced 2026-04-21 14:47:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(sidebar): improve default size and reset default order (#7309)

Browse Source 
* reset default order

* set sidebar default size to be smaller

* remove unessesary default size

* add default size and decrease minSize
This commit is contained in:
James Gatz
2024-04-24 15:31:21 +02:00
committed by George He
parent 1210dfd927
commit 006f6fda04
7 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/insomnia/src/common/constants.ts
View File

@@ -157,6 +157,7 @@ export const MIN_INTERFACE_FONT_SIZE = 8;
export const MAX_INTERFACE_FONT_SIZE = 24;
export const MIN_EDITOR_FONT_SIZE = 8;
export const MAX_EDITOR_FONT_SIZE = 24;
export const DEFAULT_SIDEBAR_SIZE = 25;
// Activities
export type GlobalActivity =

6
packages/insomnia/src/ui/routes/debug.tsx
View File

@@ -33,7 +33,7 @@ import {
useSearchParams,
} from 'react-router-dom';
import { SORT_ORDERS, SortOrder, sortOrderName } from '../../common/constants';
import { DEFAULT_SIDEBAR_SIZE, SORT_ORDERS, SortOrder, sortOrderName } from '../../common/constants';
import { ChangeBufferEvent, database as db } from '../../common/database';
import { generateId } from '../../common/misc';
import { PlatformKeyCombinations } from '../../common/settings';
@@ -313,7 +313,7 @@ export const Debug: FC = () => {
if (layout && layout[0] > 0) {
layout[0] = 0;
} else {
layout[0] = 30;
layout[0] = DEFAULT_SIDEBAR_SIZE;
}
sidebarPanelRef.current?.setLayout(layout);
@@ -684,7 +684,7 @@ export const Debug: FC = () => {
return (
<PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
<Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
<Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
<div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
<div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
<Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 pb-[--padding-sm] border-b border-solid border-[--hl-sm] font-bold w-full'>

6
packages/insomnia/src/ui/routes/design.tsx
View File

@@ -48,7 +48,7 @@ import YAML from 'yaml';
import YAMLSourceMap from 'yaml-source-map';
import { parseApiSpec } from '../../common/api-specs';
import { ACTIVITY_SPEC } from '../../common/constants';
import { ACTIVITY_SPEC, DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
import { debounce } from '../../common/misc';
import { ApiSpec } from '../../models/api-spec';
import { Environment } from '../../models/environment';
@@ -368,7 +368,7 @@ const Design: FC = () => {
if (layout && layout[0] > 0) {
layout[0] = 0;
} else {
layout[0] = 30;
layout[0] = DEFAULT_SIDEBAR_SIZE;
}
sidebarPanelRef.current?.setLayout(layout);
@@ -452,7 +452,7 @@ const Design: FC = () => {
return (
<PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
<Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
<Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
<div className='flex h-full flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden'>
<div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
<Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 pb-[--padding-sm] border-b border-solid border-[--hl-sm] font-bold w-full'>

5
packages/insomnia/src/ui/routes/mock-server.tsx
View File

@@ -4,6 +4,7 @@ import { Breadcrumb, Breadcrumbs, Button, GridList, GridListItem, Menu, MenuTrig
import { ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import { LoaderFunction, NavLink, Route, Routes, useFetcher, useLoaderData, useNavigate, useParams } from 'react-router-dom';
import { DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
import * as models from '../../models';
import { MockRoute } from '../../models/mock-route';
import { invariant } from '../../utils/invariant';
@@ -132,7 +133,7 @@ const MockServerRoute = () => {
if (layout && layout[0] > 0) {
layout[0] = 0;
} else {
layout[0] = 30;
layout[0] = DEFAULT_SIDEBAR_SIZE;
}
sidebarPanelRef.current?.setLayout(layout);
@@ -172,7 +173,7 @@ const MockServerRoute = () => {
return (
<PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
<Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
<Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
<div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
<div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
<Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 font-bold w-full'>

3
packages/insomnia/src/ui/routes/project.tsx
View File

@@ -45,6 +45,7 @@ import {
DASHBOARD_SORT_ORDERS,
DashboardSortOrder,
dashboardSortOrderName,
DEFAULT_SIDEBAR_SIZE,
getAppWebsiteBaseURL,
} from '../../common/constants';
import { database } from '../../common/database';
@@ -859,7 +860,7 @@ const ProjectRoute: FC = () => {
<ErrorBoundary>
<Fragment>
<PanelGroup autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
<Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
<Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
<div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
<div className="p-[--padding-sm]">
<Select

5
packages/insomnia/src/ui/routes/unit-test.tsx
View File

@@ -31,6 +31,7 @@ import {
useRouteLoaderData,
} from 'react-router-dom';
import { DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
import { database } from '../../common/database';
import * as models from '../../models';
import { Environment } from '../../models/environment';
@@ -138,7 +139,7 @@ const TestRoute: FC = () => {
if (layout && layout[0] > 0) {
layout[0] = 0;
} else {
layout[0] = 30;
layout[0] = DEFAULT_SIDEBAR_SIZE;
}
sidebarPanelRef.current?.setLayout(layout);
@@ -295,7 +296,7 @@ const TestRoute: FC = () => {
return (
<PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
<Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
<Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
<ErrorBoundary showAlert>
<div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
<div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">

4
packages/insomnia/src/ui/routes/workspace.tsx
View File

@@ -123,9 +123,9 @@ export const workspaceLoader: LoaderFunction = async ({
const sortOrder = searchParams.get('sortOrder') as SortOrder;
const defaultSort = (a: Request | GrpcRequest | WebSocketRequest | RequestGroup, b: Request | GrpcRequest | WebSocketRequest | RequestGroup) => {
if (a.metaSortKey === b.metaSortKey) {
return a._id > b._id ? 1 : -1;
return a._id > b._id ? -1 : 1;
}
return a.metaSortKey < b.metaSortKey ? 1 : -1;
return a.metaSortKey < b.metaSortKey ? -1 : 1;
};
const sortFunction = sortMethodMap[sortOrder] || defaultSort;