parent
5f41c5c5f4
commit
b83580fa05
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -1,59 +0,0 @@
|
||||
.NoteList {
|
||||
height: 25%;
|
||||
list-style-type: none;
|
||||
border-color: black;
|
||||
border-width: 2px;
|
||||
border-style: groove;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
overflow-y: scroll;
|
||||
min-height: 75px;
|
||||
}
|
||||
|
||||
.NoteList li:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NoteList li:nth-child(even) {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem h2 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem .TagList {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem .TagList input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem .TagList span {
|
||||
font-size: 10pt;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem .TagList ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
font-size: 8pt;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem .TagList li {
|
||||
background-color: #333;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
}
|
@ -1,84 +0,0 @@
|
||||
import React, { Fragment, useState } from "react";
|
||||
import { noop } from "../state.js";
|
||||
import "./NoteList.css";
|
||||
|
||||
export default function NoteList({
|
||||
notes = [],
|
||||
onSelect = noop,
|
||||
onTagUpdate = noop
|
||||
}) {
|
||||
return (
|
||||
<ul className="NoteList">
|
||||
{notes.map(n => (
|
||||
<li key={n.title}>
|
||||
<a onClick={() => onSelect(n.title)}>
|
||||
<NoteListItem
|
||||
title={n.title}
|
||||
tags={n.tags}
|
||||
content={n.content}
|
||||
onTagUpdate={onTagUpdate}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{notes.length === 0 && (
|
||||
<li>Click the text box above to create a note.</li>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
const NoteListItem = ({
|
||||
title = "empty note",
|
||||
tags = [],
|
||||
content = "",
|
||||
onTagUpdate = noop
|
||||
}) => (
|
||||
<div className="NoteListItem">
|
||||
<h2>{title}</h2>
|
||||
<TagList tags={tags} onTagUpdate={onTagUpdate} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const TagList = ({ tags = [], onTagUpdate = noop }) => {
|
||||
const getTags = () => tags.join(",");
|
||||
|
||||
const [state, setState] = useState({
|
||||
editMode: false,
|
||||
editTags: getTags()
|
||||
});
|
||||
|
||||
const { editMode, editTags } = state;
|
||||
|
||||
const toggleEditMode = () => {
|
||||
setState({ editMode: !editMode });
|
||||
if (editMode) {
|
||||
onTagUpdate(editTags.split(","));
|
||||
}
|
||||
};
|
||||
|
||||
const updateTags = ({ target }) =>
|
||||
setState({ editMode: editMode, editTags: target.value });
|
||||
|
||||
return (
|
||||
<span className="TagList" onDoubleClick={toggleEditMode}>
|
||||
{editMode ? (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={getTags()}
|
||||
onChange={updateTags}
|
||||
/>
|
||||
) : (
|
||||
<Fragment>
|
||||
<span>tags</span>
|
||||
<ul>
|
||||
{tags.map(t => (
|
||||
<li key={t}> {t} </li>
|
||||
))}
|
||||
</ul>
|
||||
</Fragment>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
@ -0,0 +1,57 @@
|
||||
.NoteList {
|
||||
height: 25%;
|
||||
list-style-type: none;
|
||||
border-color: black;
|
||||
border-width: 2px;
|
||||
border-style: groove;
|
||||
border-top-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
overflow-y: scroll;
|
||||
min-height: 75px;
|
||||
}
|
||||
|
||||
.NoteList li:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NoteList li:nth-child(even) {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.NoteListItem .attributes {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
flex-basis: min-content;
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
.NoteListItem .attributes .lastModified {
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.NoteList .NoteListItem h2 {
|
||||
flex: 0 1 min-content;
|
||||
white-space: pre;
|
||||
font-size: 1rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.NoteListItem .preview {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #777;
|
||||
padding: 0 5px 0 10px;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 2 min-content;
|
||||
}
|
@ -0,0 +1,52 @@
|
||||
import React from "react";
|
||||
import { formatRelative } from "date-fns";
|
||||
import { noop } from "../../state.js";
|
||||
import TagList from "../TagList/TagList";
|
||||
|
||||
import "./NoteList.css";
|
||||
|
||||
export default function NoteList({
|
||||
notes = [],
|
||||
onSelect = noop,
|
||||
onTagUpdate = noop
|
||||
}) {
|
||||
return (
|
||||
<ul className="NoteList">
|
||||
{notes.map(n => (
|
||||
<li key={n.title}>
|
||||
<NoteListItem
|
||||
{...n}
|
||||
onSelect={onSelect}
|
||||
onTagUpdate={onTagUpdate}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{notes.length === 0 && (
|
||||
<li>Click the text box above to create a note.</li>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
const NoteListItem = ({
|
||||
content,
|
||||
title,
|
||||
tags,
|
||||
lastModified,
|
||||
onSelect,
|
||||
onTagUpdate
|
||||
}) => {
|
||||
return (
|
||||
<div className="NoteListItem" onClick={() => onSelect(title)}>
|
||||
<h2>{title}</h2>
|
||||
<p className="preview">-- {content}</p>
|
||||
<span className="attributes">
|
||||
<TagList tags={tags} onTagUpdate={onTagUpdate} />
|
||||
<span className="lastModified">
|
||||
{formatRelative(new Date(lastModified), new Date())}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -0,0 +1,32 @@
|
||||
.TagList {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.TagList input {
|
||||
max-width: 100%;
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
.TagList span {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.TagList ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
font-size: 8pt;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.TagList li {
|
||||
margin: 0 2px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 10px;
|
||||
background-color: #ccc !important;
|
||||
color: #333 !important;
|
||||
white-space: nowrap;
|
||||
}
|
@ -0,0 +1,42 @@
|
||||
import React, { Fragment, useState } from "react";
|
||||
import { noop, enterKeyPressed } from "../../state.js";
|
||||
import "./TagList.css";
|
||||
|
||||
export default function TagList({ tags = [], onTagUpdate = noop }) {
|
||||
const getTags = () => tags.join(",");
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [editTags, setEditTags] = useState(getTags());
|
||||
|
||||
const toggleEditMode = () => {
|
||||
setEditMode(!editMode);
|
||||
if (editMode) {
|
||||
onTagUpdate(editTags.split(",").map(x => x.trim()));
|
||||
}
|
||||
};
|
||||
|
||||
const updateTags = ({ target }) => setEditTags(target.value);
|
||||
|
||||
return (
|
||||
<span className="TagList" onDoubleClick={toggleEditMode}>
|
||||
{editMode ? (
|
||||
<input
|
||||
type="text"
|
||||
style={{ width: `${editTags.length - 2}ch` }}
|
||||
defaultValue={getTags()}
|
||||
onChange={updateTags}
|
||||
onKeyPress={enterKeyPressed(toggleEditMode)}
|
||||
onBlur={() => editMode && toggleEditMode()}
|
||||
/>
|
||||
) : (
|
||||
<Fragment>
|
||||
{tags.length <= 0 && <span>tags</span>}
|
||||
<ul>
|
||||
{tags.map(t => (
|
||||
<li key={t}>{t}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Fragment>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
Before Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue