mirror of
https://github.com/sigmasternchen/tagify
synced 2025-03-15 07:08:55 +00:00
feat: some initial styling
This commit is contained in:
parent
24312b2cac
commit
702a6a29e4
13 changed files with 96 additions and 48 deletions
4
src/components/Media/Media.css
Normal file
4
src/components/Media/Media.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
.media img, .media video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
|
@ -2,6 +2,8 @@ import React, {FunctionComponent} from "react";
|
|||
import {MediaFile} from "../../database/file";
|
||||
import {MediaFileType} from "../../database/file-type";
|
||||
|
||||
import "./Media.css"
|
||||
|
||||
export type MediaPreviewProps = {
|
||||
basePath: string,
|
||||
file: MediaFile
|
||||
|
@ -11,19 +13,19 @@ const MediaPreview: FunctionComponent<MediaPreviewProps> = ({basePath, file}) =>
|
|||
switch (file.getType()) {
|
||||
case MediaFileType.unknown:
|
||||
return (
|
||||
<div>
|
||||
<div className="media">
|
||||
unknown file type
|
||||
</div>
|
||||
)
|
||||
case MediaFileType.video:
|
||||
return (
|
||||
<div>
|
||||
<div className="media">
|
||||
videos not yet supported
|
||||
</div>
|
||||
)
|
||||
case MediaFileType.image:
|
||||
return (
|
||||
<div>
|
||||
<div className="media">
|
||||
<img src={"media://" + basePath + "/" + file.getPath()} alt={file.getPath()} />
|
||||
</div>
|
||||
)
|
|
@ -1,6 +1,6 @@
|
|||
import React, {FunctionComponent, useEffect, useState} from "react";
|
||||
import {MediaFile} from "../../database/file";
|
||||
import MediaPreview from "../MediaPreview";
|
||||
import MediaPreview from "../Media";
|
||||
import Autocomplete from "../Autocomplete";
|
||||
|
||||
export type MediaDetailsProps = {
|
||||
|
|
4
src/components/MediaList/MediaList.css
Normal file
4
src/components/MediaList/MediaList.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
.media-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
|
@ -4,6 +4,8 @@ import MediaListItem from "../MediaListItem";
|
|||
import {Query} from "../../database/query";
|
||||
import PageControl from "../PageControl";
|
||||
|
||||
import "./MediaList.css"
|
||||
|
||||
const pageLimit = 10
|
||||
|
||||
export type MediaListProps = {
|
||||
|
@ -31,11 +33,13 @@ const MediaList: FunctionComponent<MediaListProps> = ({basePath, query, onSelect
|
|||
{ size > 0 &&
|
||||
<>
|
||||
<PageControl current={page} max={maxPage} onChange={setPage} />
|
||||
{
|
||||
files.map(f => (
|
||||
<MediaListItem key={f.getPath()} basePath={basePath} file={f} onClick={onSelect}/>
|
||||
))
|
||||
}
|
||||
<div className="media-list">
|
||||
{
|
||||
files.map(f => (
|
||||
<MediaListItem key={f.getPath()} basePath={basePath} file={f} onClick={onSelect}/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<PageControl current={page} max={maxPage} onChange={setPage} />
|
||||
</>
|
||||
}
|
||||
|
|
6
src/components/MediaListItem/MediaListItem.css
Normal file
6
src/components/MediaListItem/MediaListItem.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
.media-list-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
}
|
|
@ -1,6 +1,8 @@
|
|||
import React, {FunctionComponent} from "react";
|
||||
import {MediaFile} from "../../database/file";
|
||||
import MediaPreview from "../MediaPreview";
|
||||
import MediaPreview from "../Media";
|
||||
|
||||
import "./MediaListItem.css"
|
||||
|
||||
export type MediaListItemProps = {
|
||||
basePath: string,
|
||||
|
@ -10,7 +12,7 @@ export type MediaListItemProps = {
|
|||
|
||||
const MediaListItem: FunctionComponent<MediaListItemProps> = ({basePath, file, onClick}) => {
|
||||
return (
|
||||
<div onClick={() => onClick(file)}>
|
||||
<div onClick={() => onClick(file)} className="media-list-item">
|
||||
<MediaPreview basePath={basePath} file={file} />
|
||||
</div>
|
||||
)
|
||||
|
|
3
src/components/PageControl/PageControl.css
Normal file
3
src/components/PageControl/PageControl.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
.page-control {
|
||||
width: 100%;
|
||||
}
|
|
@ -1,5 +1,7 @@
|
|||
import React, {FunctionComponent} from "react";
|
||||
|
||||
import "./PageControl.css"
|
||||
|
||||
export type PageControlProps = {
|
||||
current: number,
|
||||
max: number,
|
||||
|
@ -8,7 +10,7 @@ export type PageControlProps = {
|
|||
|
||||
const PageControl: FunctionComponent<PageControlProps> = ({current, max, onChange}) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="page-control">
|
||||
<button
|
||||
onClick={() => onChange(current - 1)}
|
||||
disabled={current == 0}
|
||||
|
|
6
src/components/Sidebar/Sidebar.css
Normal file
6
src/components/Sidebar/Sidebar.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
.sidebar {
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background-color: #4BD5F2;
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
import React, {FunctionComponent} from "react";
|
||||
import {CountedTag} from "../../database/query";
|
||||
import "./Sidebar.css"
|
||||
|
||||
export type SidebarProps = {
|
||||
countedTags: CountedTag[],
|
||||
|
@ -9,7 +10,7 @@ export type SidebarProps = {
|
|||
|
||||
const Sidebar: FunctionComponent<SidebarProps> = ({countedTags, selected, onSelect}) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
{
|
||||
countedTags.map(t => (
|
||||
|
|
10
src/views/Home/Home.css
Normal file
10
src/views/Home/Home.css
Normal file
|
@ -0,0 +1,10 @@
|
|||
body {
|
||||
background-color: #DEDEEE;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 300px;
|
||||
box-sizing: inherit;
|
||||
}
|
|
@ -7,7 +7,9 @@ import {Database} from "../../database/database";
|
|||
import MediaDetails from "../../components/MediaDetails";
|
||||
import Repository from "../../repository";
|
||||
import {ipcRenderer} from "electron";
|
||||
import MediaPreview from "../../components/MediaPreview";
|
||||
import MediaPreview from "../../components/Media";
|
||||
|
||||
import "./Home.css"
|
||||
|
||||
const OPEN_REPOSITORY_MESSAGE_NAME = "MSG_OPEN_REPO"
|
||||
|
||||
|
@ -113,40 +115,42 @@ const Home: FunctionComponent<HomeProps> = () => {
|
|||
setTags(_tags)
|
||||
}}
|
||||
/>
|
||||
{ selected &&
|
||||
<>
|
||||
<button onClick={() => setSelected(null)}>Back</button>
|
||||
<MediaDetails basePath={basePath} file={selected} onUpdate={mediaUpdate} allTags={allTags} />
|
||||
</>
|
||||
}
|
||||
{ !selected && showUntagged &&
|
||||
<>
|
||||
<h1>Untagged</h1>
|
||||
<button onClick={() => setShowUntagged(false)}>Back</button>
|
||||
{ untagged.map(u => new MediaFile(u)).map(u => (
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelected(u)
|
||||
}}
|
||||
key={u.getPath()}
|
||||
>
|
||||
<MediaPreview basePath={basePath} file={u} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
}
|
||||
{ !selected && !showUntagged &&
|
||||
<>
|
||||
{ untagged.length > 0 &&
|
||||
<a
|
||||
onClick={() => setShowUntagged(true) }
|
||||
>
|
||||
{untagged.length} untagged files
|
||||
</a>
|
||||
}
|
||||
<MediaList basePath={basePath} query={query} onSelect={setSelected} />
|
||||
</>
|
||||
}
|
||||
<div className="main">
|
||||
{ selected &&
|
||||
<>
|
||||
<button onClick={() => setSelected(null)}>Back</button>
|
||||
<MediaDetails basePath={basePath} file={selected} onUpdate={mediaUpdate} allTags={allTags} />
|
||||
</>
|
||||
}
|
||||
{ !selected && showUntagged &&
|
||||
<>
|
||||
<h1>Untagged</h1>
|
||||
<button onClick={() => setShowUntagged(false)}>Back</button>
|
||||
{ untagged.map(u => new MediaFile(u)).map(u => (
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelected(u)
|
||||
}}
|
||||
key={u.getPath()}
|
||||
>
|
||||
<MediaPreview basePath={basePath} file={u} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
}
|
||||
{ !selected && !showUntagged &&
|
||||
<>
|
||||
{ untagged.length > 0 &&
|
||||
<a
|
||||
onClick={() => setShowUntagged(true) }
|
||||
>
|
||||
{untagged.length} untagged files
|
||||
</a>
|
||||
}
|
||||
<MediaList basePath={basePath} query={query} onSelect={setSelected} />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue