sigmasternchen/tagify
1
0
Fork 0
mirror of https://github.com/sigmasternchen/tagify synced 2025-03-15 07:08:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: some initial styling

Browse source
This commit is contained in:
overflowerror 2021-10-14 15:28:52 +02:00
parent 24312b2cac
commit 702a6a29e4
13 changed files with 96 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Media/Media.css Normal file
View file

@ -0,0 +1,4 @@
.media img, .media video {
max-width: 100%;
max-height: 100%;
}

8
src/components/MediaPreview/index.tsx → src/components/Media/index.tsx
View file

@ -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>
)

2
src/components/MediaDetails/index.tsx
View file

@ -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
View file

@ -0,0 +1,4 @@
.media-list {
display: flex;
flex-wrap: wrap;
}

14
src/components/MediaList/index.tsx
View file

@ -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
View file

@ -0,0 +1,6 @@
.media-list-item {
width: 150px;
height: 150px;
margin: 10px;
cursor: pointer;
}

6
src/components/MediaListItem/index.tsx
View file

@ -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
View file

@ -0,0 +1,3 @@
.page-control {
width: 100%;
}

4
src/components/PageControl/index.tsx
View file

@ -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
View file

@ -0,0 +1,6 @@
.sidebar {
position: fixed;
width: 300px;
height: 100%;
background-color: #4BD5F2;
}

3
src/components/Sidebar/index.tsx
View file

@ -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
View file

@ -0,0 +1,10 @@
body {
background-color: #DEDEEE;
padding: 0;
margin: 0;
}
.main {
margin-left: 300px;
box-sizing: inherit;
}

74
src/views/Home/index.tsx
View file

@ -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>