mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-21 15:07:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1252] Hidden files will now be 50% opacity. (#1548)

Browse Source 
* [ENG-1252] Hidden files will now be grayscale and at 50% opacity.

* [ENG-1252] Removed grayscale

* [ENG-1252] Make enverything opacity 50
This commit is contained in:
Tilo
2023-10-16 12:44:01 +02:00
committed by GitHub
parent 151c26dfd3
commit 5b650c88b3
4 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/app/$libraryId/Explorer/View/GridList.tsx
View File

@@ -20,6 +20,7 @@ import { getQuickPreviewStore } from '../QuickPreview/store';
import { getExplorerStore, isCut, useExplorerStore } from '../store';
import { uniqueId } from '../util';
import { useExplorerViewContext } from '../ViewContext';
import clsx from 'clsx';
const SelectoContext = createContext<{
selecto: React.RefObject<Selecto>;
@@ -625,7 +626,6 @@ export default ({ children }: { children: RenderItem }) => {
<GridList grid={grid} scrollRef={explorer.scrollRef}>
{(index) => {
const item = explorer.items?.[index];
if (!item) return null;
return (

5
interface/app/$libraryId/Explorer/View/GridView.tsx
View File

@@ -25,6 +25,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
const location = getItemLocation(data);
const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId');
const isFolder = 'is_dir' in data.item ? data.item.is_dir || data.type === 'Location' : false;
const hidden = filePathData?.hidden ?? false;
const showSize =
showBytesInGridView &&
@@ -34,7 +35,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
(!isRenaming || (isRenaming && !selected));
return (
<ViewItem data={data} className="h-full w-full">
<ViewItem data={data} className={clsx("h-full w-full", hidden && 'opacity-50')}>
<div
className={clsx('mb-1 aspect-square rounded-lg', selected && 'bg-app-selectedItem')}
>
@@ -52,7 +53,7 @@ const GridViewItem = memo(({ data, selected, cut, isRenaming }: GridViewItemProp
{showSize && filePathData?.size_in_bytes_bytes && (
<span
className={clsx(
'cursor-default truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull '
'cursor-default truncate rounded-md px-1.5 py-[1px] text-center text-tiny text-ink-dull'
)}
>
{`${byteSize(filePathData.size_in_bytes_bytes)}`}

8
interface/app/$libraryId/Explorer/View/ListView/index.tsx
View File

@@ -11,7 +11,7 @@ import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from
import BasicSticky from 'react-sticky-el';
import { useKey, useMutationObserver, useWindowEventListener } from 'rooks';
import useResizeObserver from 'use-resize-observer';
import { type ExplorerItem } from '@sd/client';
import { getItemFilePath, type ExplorerItem } from '@sd/client';
import { ContextMenu, Tooltip } from '@sd/ui';
import { useIsTextTruncated } from '~/hooks';
import { isNonEmptyObject } from '~/util';
@@ -45,6 +45,9 @@ interface ListViewItemProps {
}
const ListViewItem = memo((props: ListViewItemProps) => {
const filePathData = getItemFilePath(props.row.original);
const hidden = filePathData?.hidden ?? false;
return (
<ViewItem
data={props.row.original}
@@ -58,7 +61,8 @@ const ListViewItem = memo((props: ListViewItemProps) => {
className={clsx(
'table-cell shrink-0 px-4 text-xs text-ink-dull',
cell.column.id !== 'name' && 'truncate',
cell.column.columnDef.meta?.className
cell.column.columnDef.meta?.className,
hidden && 'opacity-50'
)}
style={{ width: cell.column.getSize() }}
>

7
interface/app/$libraryId/Explorer/View/MediaView.tsx
View File

@@ -1,7 +1,7 @@
import { ArrowsOutSimple } from '@phosphor-icons/react';
import clsx from 'clsx';
import { memo } from 'react';
import { ExplorerItem } from '@sd/client';
import { ExplorerItem, getItemFilePath } from '@sd/client';
import { Button } from '@sd/ui';
import { useExplorerContext } from '../Context';
@@ -18,13 +18,16 @@ interface MediaViewItemProps {
const MediaViewItem = memo(({ data, selected, cut }: MediaViewItemProps) => {
const settings = useExplorerContext().useSettingsSnapshot();
const filePathData = getItemFilePath(data);
const hidden = filePathData?.hidden ?? false;
return (
<ViewItem
data={data}
className={clsx(
'h-full w-full overflow-hidden border-2',
selected ? 'border-accent' : 'border-transparent'
selected ? 'border-accent' : 'border-transparent',
hidden && 'opacity-50'
)}
>
<div