Journal list: improve look.

master
Tom Hacohen 7 years ago
parent 1bf6314ac3
commit b0741978d0

@ -1,4 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { List, ListItem } from 'material-ui/List';
import IconAdd from 'material-ui/svg-icons/content/add';
import IconDelete from 'material-ui/svg-icons/action/delete';
import IconEdit from 'material-ui/svg-icons/editor/mode-edit';
import * as ICAL from 'ical.js'; import * as ICAL from 'ical.js';
@ -22,24 +26,53 @@ export class JournalViewEntries extends React.Component {
const entries = this.props.entries.map((syncEntry, idx) => { const entries = this.props.entries.map((syncEntry, idx) => {
const comp = new ICAL.Component(ICAL.parse(syncEntry.content)); const comp = new ICAL.Component(ICAL.parse(syncEntry.content));
let icon;
if (syncEntry.action === EteSync.SyncEntryAction.Add) {
icon = (<IconAdd color="#16B14B" />);
} else if (syncEntry.action === EteSync.SyncEntryAction.Change) {
icon = (<IconEdit color="#FEB115" />);
} else if (syncEntry.action === EteSync.SyncEntryAction.Delete) {
icon = (<IconDelete color="#F20C0C" />);
}
if (comp.name === 'vcalendar') { if (comp.name === 'vcalendar') {
const vevent = new ICAL.Event(comp.getFirstSubcomponent('vevent')); const vevent = new ICAL.Event(comp.getFirstSubcomponent('vevent'));
return (<li key={idx}>{syncEntry.action}: {vevent.summary} ({vevent.uid})</li>); return (
<ListItem
key={idx}
leftIcon={icon}
primaryText={vevent.summary}
secondaryText={vevent.uid}
/>
);
} else if (comp.name === 'vcard') { } else if (comp.name === 'vcard') {
const vcard = comp; const vcard = comp;
const name = vcard.getFirstPropertyValue('fn'); const name = vcard.getFirstPropertyValue('fn');
const uid = vcard.getFirstPropertyValue('uid'); const uid = vcard.getFirstPropertyValue('uid');
return (<li key={idx}>{syncEntry.action}: {name} ({uid})</li>); return (
<ListItem
key={idx}
leftIcon={icon}
primaryText={name}
secondaryText={uid}
/>
);
} else { } else {
return (<li key={idx}>{syncEntry.action}: {syncEntry.content}</li>); return (
<ListItem
key={idx}
leftIcon={icon}
primaryText="Error processing entry"
/>
);
} }
}).reverse(); }).reverse();
return ( return (
<div> <div>
<ul> <List>
{entries} {entries}
</ul> </List>
</div> </div>
); );
} }

Loading…
Cancel
Save