frontend: fix folder.svg usage
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<linearGradient id="a" gradientTransform="matrix(0.45451 0 0 0.455522 -1210.292114 616.172607)" gradientUnits="userSpaceOnUse" x1="2689.251953" x2="2918.069824" y1="-1106.802979" y2="-1106.802979">
|
||||
<stop offset="0" stop-color="#62a0ea"/>
|
||||
<stop offset="0.0576991" stop-color="#afd4ff"/>
|
||||
<stop offset="0.122204" stop-color="#62a0ea"/>
|
||||
<stop offset="0.873306" stop-color="#62a0ea"/>
|
||||
<stop offset="0.955997" stop-color="#c0d5ea"/>
|
||||
<stop offset="1" stop-color="#62a0ea"/>
|
||||
</linearGradient>
|
||||
<path d="m 21.976562 12 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 86.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -72.085938 c 0 -6.628906 -5.359375 -12 -11.972656 -12 h -46.027344 c -2.453125 0 -4.695312 -1.386718 -5.796875 -3.582031 l -1.503906 -2.992187 c -1.65625 -3.292969 -5.019531 -5.371094 -8.699219 -5.371094 z m 0 0" fill="#438de6"/>
|
||||
<path d="m 65.976562 36 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 54.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -62.03125 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="url(#a)"/>
|
||||
<path d="m 65.976562 32 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 55.976562 c 0 5.539063 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.460937 9.980469 -10 v -63.976562 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="#a4caee"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -1,9 +1,7 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import { resolveDocumentAssetUrl } from '../asset_manager';
|
||||
import { getTagColorStyle } from '../utils/colors';
|
||||
import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon } from '../ui/icons';
|
||||
|
||||
const FOLDER_ICON_SRC = '/folder.svg';
|
||||
import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon } from '../ui/icons';
|
||||
|
||||
const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
|
||||
|
||||
@@ -370,10 +368,9 @@ const DocumentsTable = ({
|
||||
}}
|
||||
>
|
||||
<div className="folder-card__icon">
|
||||
<img
|
||||
src={FOLDER_ICON_SRC}
|
||||
alt="Folder"
|
||||
<FolderIcon
|
||||
className="folder-card__icon-svg"
|
||||
size={128}
|
||||
/>
|
||||
</div>
|
||||
<div className="folder-card__meta">
|
||||
@@ -550,10 +547,9 @@ const DocumentsTable = ({
|
||||
>
|
||||
<td className="thumb-cell">
|
||||
<div className="thumb-icon">
|
||||
<img
|
||||
src={FOLDER_ICON_SRC}
|
||||
alt="Folder"
|
||||
<FolderIcon
|
||||
className="thumb-icon__image"
|
||||
size={32}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { ChevronIcon, TrashIcon, EditIcon } from '../ui/icons';
|
||||
import { ChevronIcon, TrashIcon, EditIcon, FolderIcon } from '../ui/icons';
|
||||
|
||||
const FOLDER_ICON_SRC = '/folder.svg';
|
||||
import { getTagColorStyle } from '../utils/colors';
|
||||
|
||||
const FolderNode = ({
|
||||
@@ -68,7 +67,7 @@ const FolderNode = ({
|
||||
</span>
|
||||
)}
|
||||
<span className="name">
|
||||
<img src={FOLDER_ICON_SRC} alt="Folder" className="folder-icon-image" />
|
||||
<FolderIcon className="folder-icon-image" size={16} />
|
||||
{node.name}
|
||||
</span>
|
||||
{node.id !== 'root' && (
|
||||
|
||||
@@ -858,12 +858,6 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.folder-row span.name .folder-icon-image {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.folder-row:hover {
|
||||
background: var(--sidebar-hover-bg);
|
||||
color: var(--fg);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import {
|
||||
IconChevronRight as TablerChevronRight,
|
||||
IconDownload as TablerDownload,
|
||||
IconFolderFilled,
|
||||
IconPencil,
|
||||
IconTagFilled,
|
||||
IconUserFilled,
|
||||
@@ -9,6 +8,7 @@ import {
|
||||
IconLayoutList,
|
||||
IconLayoutGrid,
|
||||
} from '@tabler/icons-react';
|
||||
import FolderSvg from '../assets/folder.svg';
|
||||
|
||||
const composeClassName = (base, extra) => (extra ? `${base} ${extra}` : base);
|
||||
|
||||
@@ -39,14 +39,21 @@ export const EditIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) =>
|
||||
/>
|
||||
);
|
||||
|
||||
export const FolderIcon = ({ className, size = '1em', stroke = 0, ...rest }) => (
|
||||
<IconFolderFilled
|
||||
className={composeClassName('icon icon--fill', className)}
|
||||
size={size}
|
||||
stroke={stroke}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
export const FolderIcon = ({ className, size = 16, title, ...rest }) => {
|
||||
const dimensionProps = typeof size === 'number' ? { width: size, height: size } : {};
|
||||
|
||||
return (
|
||||
<FolderSvg
|
||||
className={composeClassName('folder-icon', className)}
|
||||
{...dimensionProps}
|
||||
role={title ? 'img' : 'presentation'}
|
||||
aria-hidden={title ? undefined : true}
|
||||
focusable="false"
|
||||
title={title}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const TagIcon = ({ className, size = '1em', stroke = 0, ...rest }) => (
|
||||
<IconTagFilled
|
||||
|
||||
Reference in New Issue
Block a user