mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-20 14:38:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Desktop - Add more tooltips (#519)

Browse Source
This commit is contained in:
Jeremy Möglich
2023-01-17 02:32:14 +01:00
committed by GitHub
parent a53b162f4b
commit 1a1ddf3409
7 changed files with 96 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
packages/interface/src/components/explorer/ExplorerTopBar.tsx
View File

@@ -265,20 +265,22 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
<SearchBar ref={searchRef} />
<div className="flex mx-8 space-x-2">
<OverlayPanel
className="focus:outline-none"
trigger={
// <Tooltip label="Major Key Alert">
<TopBarButton>
<Key className={TOP_BAR_ICON_STYLE} />
</TopBarButton>
// </Tooltip>
}
>
<div className="block w-[350px]">
<KeyManager className={TOP_BAR_ICON_STYLE} />
</div>
</OverlayPanel>
<Tooltip label="Key Manager">
<OverlayPanel
className="focus:outline-none"
trigger={
// <Tooltip label="Major Key Alert">
<TopBarButton>
<Key className={TOP_BAR_ICON_STYLE} />
</TopBarButton>
// </Tooltip>
}
>
<div className="block w-[350px]">
<KeyManager className={TOP_BAR_ICON_STYLE} />
</div>
</OverlayPanel>
</Tooltip>
<Tooltip label="Tag Assign Mode">
<TopBarButton
onClick={() => (getExplorerStore().tagAssignMode = !store.tagAssignMode)}
@@ -303,31 +305,39 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
</div>
</div>
<div className="flex mr-3 space-x-2">
<OverlayPanel
className="focus:outline-none"
trigger={
// <Tooltip label="Major Key Alert">
<TopBarButton className="my-2">
<List className={TOP_BAR_ICON_STYLE} />
</TopBarButton>
// </Tooltip>
}
<Tooltip label="File display options" position="left">
<OverlayPanel
className="focus:outline-none"
trigger={
// <Tooltip label="Major Key Alert">
<TopBarButton className="my-2">
<List className={TOP_BAR_ICON_STYLE} />
</TopBarButton>
// </Tooltip>
}
>
<div className="block w-[250px] ">
<ExplorerOptionsPanel />
</div>
</OverlayPanel>
</Tooltip>
<Tooltip
label={store.showInspector ? 'Hide Inspector' : 'Show Inspector'}
position="left"
>
<div className="block w-[250px] ">
<ExplorerOptionsPanel />
</div>
</OverlayPanel>
<TopBarButton
active={store.showInspector}
onClick={() => (getExplorerStore().showInspector = !store.showInspector)}
className="my-2"
>
{store.showInspector ? (
<SidebarSimple className={TOP_BAR_ICON_STYLE} />
) : (
<SidebarSimple className={TOP_BAR_ICON_STYLE} />
)}
</TopBarButton>
<TopBarButton
active={store.showInspector}
onClick={() => (getExplorerStore().showInspector = !store.showInspector)}
className="my-2"
>
{store.showInspector ? (
<SidebarSimple className={TOP_BAR_ICON_STYLE} />
) : (
<SidebarSimple className={TOP_BAR_ICON_STYLE} />
)}
</TopBarButton>
</Tooltip>
{/* <Dropdown
// className="absolute block h-6 w-44 top-2 right-4"
align="right"

1
packages/interface/src/components/explorer/FileItem.tsx
View File

@@ -6,6 +6,7 @@ import { HTMLAttributes } from 'react';
import { getExplorerStore } from '../../hooks/useExplorerStore';
import { ObjectKind } from '../../util/kind';
import { GenericAlertDialogProps } from '../dialog/AlertDialog';
import { Tooltip } from '../tooltip/Tooltip';
import { FileItemContextMenu } from './ExplorerContextMenu';
import FileThumb from './FileThumb';
import { isObject } from './utils';

20
packages/interface/src/components/jobs/JobManager.tsx
View File

@@ -87,10 +87,14 @@ export function JobsManager() {
<div className="flex-grow" />
<Button onClick={() => clearAllJobs.mutate(null)} size="icon">
<Trash className="w-5 h-5" />
<Tooltip label="Clear out finished jobs">
<Trash className="w-5 h-5" />
</Tooltip>
</Button>
<Button size="icon">
<X className="w-5 h-5" />
<Tooltip label="Close">
<X className="w-5 h-5" />
</Tooltip>
</Button>
</HeaderContainer>
<div className="h-full mr-1 overflow-x-hidden custom-scroll inspector-scroll">
@@ -152,16 +156,22 @@ function Job({ job }: { job: JobReport }) {
<div className="flex flex-row space-x-2 ml-7">
{job.status === 'Running' && (
<Button size="icon">
<Pause className="w-4 h-4" />
<Tooltip label="Pause">
<Pause className="w-4 h-4" />
</Tooltip>
</Button>
)}
{job.status === 'Failed' && (
<Button size="icon">
<ArrowsClockwise className="w-4" />
<Tooltip label="Retry">
<ArrowsClockwise className="w-4" />
</Tooltip>
</Button>
)}
<Button size="icon">
<X className="w-4 h-4" />
<Tooltip label="Remove">
<X className="w-4 h-4" />
</Tooltip>
</Button>
</div>
</div>

13
packages/interface/src/components/layout/Sidebar.tsx
View File

@@ -25,15 +25,16 @@ import clsx from 'clsx';
import { CheckCircle, CirclesFour, Gear, Lock, Planet, Plus, ShareNetwork } from 'phosphor-react';
import React, { PropsWithChildren, useState } from 'react';
import { NavLink, NavLinkProps } from 'react-router-dom';
import { useOperatingSystem } from '~/hooks/useOperatingSystem';
import { usePlatform } from '~/util/Platform';
import AddLocationDialog from '../dialog/AddLocationDialog';
import CreateLibraryDialog from '../dialog/CreateLibraryDialog';
import { Folder } from '../icons/Folder';
import { JobsManager } from '../jobs/JobManager';
import { MacTrafficLights } from '../os/TrafficLights';
import { InputContainer } from '../primitive/InputContainer';
import { Tooltip } from '../tooltip/Tooltip';
const SidebarBody = tw.div`flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full border-r border-sidebar-divider bg-sidebar`;
@@ -123,7 +124,9 @@ export function Sidebar() {
variant="outline"
className="text-ink-faint ring-offset-sidebar"
>
<Gear className="w-5 h-5" />
<Tooltip label="Settings">
<Gear className="w-5 h-5" />
</Tooltip>
</ButtonLink>
<OverlayPanel
transformOrigin="bottom left"
@@ -134,7 +137,11 @@ export function Sidebar() {
variant="outline"
className="radix-state-open:bg-sidebar-selected/50 text-ink-faint ring-offset-sidebar"
>
{library && <IsRunningJob />}
{library && (
<Tooltip label="Recent Jobs">
<IsRunningJob />
</Tooltip>
)}
</Button>
}
>

9
packages/interface/src/components/location/LocationListItem.tsx
View File

@@ -6,6 +6,7 @@ import { Repeat, Trash } from 'phosphor-react';
import { useState } from 'react';
import { Folder } from '../icons/Folder';
import { Tooltip } from '../tooltip/Tooltip';
import { useZodForm, z } from '@sd/ui/src/forms';
@@ -70,7 +71,9 @@ export default function LocationListItem({ location }: LocationListItemProps) {
ctaLabel="Delete"
trigger={
<Button variant="gray" className="!p-1.5">
<Trash className="w-4 h-4" />
<Tooltip label="Delete Location">
<Trash className="w-4 h-4" />
</Tooltip>
</Button>
}
/>
@@ -82,7 +85,9 @@ export default function LocationListItem({ location }: LocationListItemProps) {
locRescan(location.id);
}}
>
<Repeat className="w-4 h-4" />
<Tooltip label="Rescan Location">
<Repeat className="w-4 h-4" />
</Tooltip>
</Button>
{/* <Button variant="gray" className="!p-1.5">
<CogIcon className="w-4 h-4" />

5
packages/interface/src/screens/settings/library/TagsSettings.tsx
View File

@@ -8,6 +8,7 @@ import { InputContainer } from '~/components/primitive/InputContainer';
import { PopoverPicker } from '~/components/primitive/PopoverPicker';
import { SettingsContainer } from '~/components/settings/SettingsContainer';
import { SettingsHeader } from '~/components/settings/SettingsHeader';
import { Tooltip } from '~/components/tooltip/Tooltip';
import { Form, Input, useZodForm, z } from '@sd/ui/src/forms';
@@ -159,7 +160,9 @@ export default function TagsSettings() {
ctaLabel="Delete"
trigger={
<Button variant="gray" className="h-[38px] mt-[22px]">
<Trash className="w-4 h-4" />
<Tooltip label="Delete Tag">
<Trash className="w-4 h-4" />
</Tooltip>
</Button>
}
/>

16
packages/interface/src/screens/settings/node/LibrariesSettings.tsx
View File

@@ -3,11 +3,11 @@ import { LibraryConfigWrapped } from '@sd/client';
import { Button, ButtonLink, Card, tw } from '@sd/ui';
import { Database, DotsSixVertical, Link, Pen, Pencil, Trash } from 'phosphor-react';
import { useState } from 'react';
import CreateLibraryDialog from '~/components/dialog/CreateLibraryDialog';
import DeleteLibraryDialog from '~/components/dialog/DeleteLibraryDialog';
import { SettingsContainer } from '~/components/settings/SettingsContainer';
import { SettingsHeader } from '~/components/settings/SettingsHeader';
import { Tooltip } from '~/components/tooltip/Tooltip';
const Pill = tw.span`px-1.5 ml-2 py-[2px] rounded text-xs font-medium bg-accent`;
@@ -31,15 +31,21 @@ function LibraryListItem(props: { library: LibraryConfigWrapped; current: boolea
<p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
</div>
<div className="flex flex-row items-center space-x-2">
<Button className="!p-1.5" onClick={() => { }} variant="gray">
<Database className="w-4 h-4" />
<Button className="!p-1.5" onClick={() => {}} variant="gray">
<Tooltip label="TODO">
<Database className="w-4 h-4" />
</Tooltip>
</Button>
<ButtonLink className="!p-1.5" to="/settings/library" variant="gray">
<Pencil className="w-4 h-4" />
<Tooltip label="Edit Library">
<Pencil className="w-4 h-4" />
</Tooltip>
</ButtonLink>
<DeleteLibraryDialog libraryUuid={props.library.uuid}>
<Button className="!p-1.5" variant="gray">
<Trash className="w-4 h-4" />
<Tooltip label="Delete Library">
<Trash className="w-4 h-4" />
</Tooltip>
</Button>
</DeleteLibraryDialog>
</div>