Add gallery file info (#919)

This commit is contained in:
WithoutPants 2020-11-05 08:18:57 +11:00 committed by GitHub
parent cc81d0b3ee
commit 66c7af62f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 12 deletions

View file

@ -10,6 +10,7 @@ import { GalleryDetailPanel } from "./GalleryDetailPanel";
import { DeleteGalleriesDialog } from "../DeleteGalleriesDialog";
import { GalleryImagesPanel } from "./GalleryImagesPanel";
import { GalleryAddPanel } from "./GalleryAddPanel";
import { GalleryFileInfoPanel } from "./GalleryFileInfoPanel";
interface IGalleryParams {
id?: string;
@ -92,13 +93,13 @@ export const Gallery: React.FC = () => {
<Nav.Item>
<Nav.Link eventKey="gallery-details-panel">Details</Nav.Link>
</Nav.Item>
{/* {gallery.gallery ? (
{gallery.path ? (
<Nav.Item>
<Nav.Link eventKey="gallery-gallery-panel">Gallery</Nav.Link>
<Nav.Link eventKey="gallery-file-info-panel">
File Info
</Nav.Link>
</Nav.Item>
) : (
""
)} */}
) : undefined}
<Nav.Item>
<Nav.Link eventKey="gallery-edit-panel">Edit</Nav.Link>
</Nav.Item>
@ -110,13 +111,13 @@ export const Gallery: React.FC = () => {
<Tab.Pane eventKey="gallery-details-panel" title="Details">
<GalleryDetailPanel gallery={gallery} />
</Tab.Pane>
{/* {gallery.gallery ? (
<Tab.Pane eventKey="gallery-gallery-panel" title="Gallery">
<GalleryViewer gallery={gallery.gallery} />
</Tab.Pane>
) : (
""
)} */}
<Tab.Pane
className="file-info-panel"
eventKey="gallery-file-info-panel"
title="File Info"
>
<GalleryFileInfoPanel gallery={gallery} />
</Tab.Pane>
<Tab.Pane eventKey="gallery-edit-panel" title="Edit">
<GalleryEditPanel
isVisible={activeTabKey === "gallery-edit-panel"}

View file

@ -0,0 +1,40 @@
import React from "react";
import * as GQL from "src/core/generated-graphql";
interface IGalleryFileInfoPanelProps {
gallery: GQL.GalleryDataFragment;
}
export const GalleryFileInfoPanel: React.FC<IGalleryFileInfoPanelProps> = (
props: IGalleryFileInfoPanelProps
) => {
function renderChecksum() {
return (
<div className="row">
<span className="col-4">Checksum</span>
<span className="col-8 text-truncate">{props.gallery.checksum}</span>
</div>
);
}
function renderPath() {
const {
gallery: { path },
} = props;
return (
<div className="row">
<span className="col-4">Path</span>
<span className="col-8 text-truncate">
<a href={`file://${path}`}>{`file://${props.gallery.path}`}</a>{" "}
</span>
</div>
);
}
return (
<div className="container gallery-file-info">
{renderChecksum()}
{renderPath()}
</div>
);
};