Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: create first UI draft for photo library #14

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"recommendations": [
"arcanis.vscode-zipfs",
"bradlc.vscode-tailwindcss",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
Expand Down
13 changes: 8 additions & 5 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
{
"search.exclude": {
"**/.yarn": true,
"**/.pnp.*": true
"editor.quickSuggestions": {
"strings": true
},
"eslint.nodePath": ".yarn/sdks",
"prettier.prettierPath": ".yarn/sdks/prettier/index.js",
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
"search.exclude": {
"**/.pnp.*": true,
"**/.yarn": true
},
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.tsdk": ".yarn/sdks/typescript/lib"
}
22 changes: 11 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ concept playground for yet another RAW photo library and editor made with web te

### Inspiration

| Editor | Notes |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| [Capture One](https://www.captureone.com/de) | + great user interface<br>+ license without subscription available |
| [Darktable](https://www.darktable.org/) | + powerful editing modules<br>+ xmp sidecar file <br>- steep learning curve (filmic) |
| [FastRawViewer](https://www.fastrawviewer.com/) | + histogram based on RAW edits |
| [Lightroom CC](https://lightroom.adobe.com/) | + great user interface<br>+ powerful editing algorithms<br>- expensive subscriptions for personal use |
| [Luminar](https://skylum.com/luminar) | + great user interface<br>- slow processing speed<br>- broken gallery thumbnails |
| [Picturama](https://picturama.github.io/) | + built with [Electron](https://www.electronjs.org/)<br>+ fast and easy to use |
| [RawTherapee](https://rawtherapee.com/) | - steep learning curve |
| Editor | Notes |
| -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| [Capture One](https://www.captureone.com/de) | + great user interface<br>+ license without subscription available |
| [Darktable](https://www.darktable.org/) ([Repo](https://github.com/darktable-org/darktable)) | + powerful editing modules<br>+ xmp sidecar file <br>- steep learning curve (filmic) |
| [FastRawViewer](https://www.fastrawviewer.com/) | + histogram based on RAW edits |
| [Lightroom CC](https://lightroom.adobe.com/) | + great user interface<br>+ powerful editing algorithms<br>- expensive subscriptions for personal use |
| [Luminar](https://skylum.com/luminar) | + great user interface<br>- slow processing speed<br>- broken gallery thumbnails |
| [Picturama](https://picturama.github.io/) ([Repo](https://github.com/picturama/picturama)) | + built with [Electron](https://www.electronjs.org/)<br>+ fast and easy to use |
| [RawTherapee](https://rawtherapee.com/) ([Repo](https://github.com/Beep6581/RawTherapee)) | - steep learning curve |

## Development

Expand All @@ -62,8 +62,8 @@ nano packages/app/.env
# create development database (also: https://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgres)
npx prisma migrate dev --name init

# start up the application
yarn start:app
# start up the Electron application
yarn start

# create a new component
yarn new
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"lint": "eslint . --fix --format=codeframe",
"new": "plop",
"postinstall": "husky install",
"start:app": "yarn workspace app start"
"start": "yarn workspace app start"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.12.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/catalog/Catalog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const addFiles = (files: string[] = []) => {
});
});

notifyFilesAdded(files?.length);
files?.length > 0 && notifyFilesAdded(files?.length);
};

const getFiles = async () => {
Expand Down
16 changes: 8 additions & 8 deletions packages/app/src/catalog/PhotoGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React, { FunctionComponent, useEffect, useState } from 'react';
import Rawdicchio from '../core/Rawdicchio';

export interface PhotoGridProps {
label?: string;
className?: string;
}

const PhotoGrid: FunctionComponent<PhotoGridProps> = () => {
const PhotoGrid: FunctionComponent<PhotoGridProps> = ({ className }) => {
const [files, setFiles] = useState<string[]>();

useEffect(() => {
Expand All @@ -20,22 +20,22 @@ const PhotoGrid: FunctionComponent<PhotoGridProps> = () => {

// photo grid: https://css-tricks.com/adaptive-photo-layout-with-flexbox/
return (
<>
<div className={className}>
<button onClick={openDialog}>Click to add images</button>
<h1>2022-02-22</h1>
<ul className="flex flex-wrap gap-0.5 list-none">
<div className="flex flex-wrap gap-1 list-none overflow-y-auto">
{files?.map((file, index) => (
<li className="flex-auto h-[33vh]" key={`${index}-${file}`}>
<li className="flex-auto h-72 max-w-[50%]" key={`${index}-${file}`}>
<img
alt={file}
className="align-bottom max-h-full min-w-full object-cover"
className="align-bottom max-h-full min-h-full min-w-full object-cover"
src={`file://${file}`}
title={file}
/>
</li>
))}
</ul>
</>
</div>
</div>
);
};

Expand Down
10 changes: 5 additions & 5 deletions packages/app/src/core/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import PhotoGrid from '../catalog/PhotoGrid';

const App: FunctionComponent = () => {
return (
<ul className="bg-gray-800 text-white">
<h1>Photo catalog</h1>
<hr />
<PhotoGrid />
</ul>
<div className="bg-gray-800 font-sans gap-2 grid grid-cols-6 h-screen text-white">
<div>sidebar right</div>
<PhotoGrid className="col-span-4" />
<div>sidebar right</div>
</div>
);
};

Expand Down
6 changes: 6 additions & 0 deletions packages/app/src/core/electronMain.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { app, BrowserWindow, protocol } from 'electron';
import installExtension, {
REACT_DEVELOPER_TOOLS,
} from 'electron-devtools-installer';
import path from 'path';

import { registerCatalog } from '../catalog/Catalog';
Expand All @@ -12,6 +15,7 @@ const createWindow = (): BrowserWindow => {
height: 800,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
// consider fixing: https://www.electronjs.org/docs/latest/tutorial/security#6-do-not-disable-websecurity
webSecurity: false,
},
width: 1200,
Expand All @@ -35,6 +39,8 @@ app
})
.whenReady()
.then(() => {
!app.isPackaged && installExtension(REACT_DEVELOPER_TOOLS);

protocol.registerFileProtocol('file', (request, callback) => {
const pathname = decodeURIComponent(request.url.replace('file:///', ''));
callback(pathname);
Expand Down
9 changes: 1 addition & 8 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6906,14 +6906,7 @@ __metadata:
languageName: node
linkType: hard

"path-parse@npm:^1.0.6":
version: 1.0.6
resolution: "path-parse@npm:1.0.6"
checksum: 962a85dd384d68d469ec5ba4010df8f8f9b7e936ce603bbe3211476c5615feb3c2b1ca61211a78445fadc833f0b1a86ea6484c861035ec4ac93011ba9aff9a11
languageName: node
linkType: hard

"path-parse@npm:^1.0.7":
"path-parse@npm:^1.0.6, path-parse@npm:^1.0.7":
version: 1.0.7
resolution: "path-parse@npm:1.0.7"
checksum: 49abf3d81115642938a8700ec580da6e830dde670be21893c62f4e10bd7dd4c3742ddc603fe24f898cba7eb0c6bc1777f8d9ac14185d34540c6d4d80cd9cae8a
Expand Down