JournalsList: show journal color

master
Tal Leibman 5 years ago committed by Tom Hacohen
parent 399724f7e4
commit 643010ccfe

@ -14,6 +14,8 @@ import Container from '../widgets/Container';
import { routeResolver } from '../App'; import { routeResolver } from '../App';
import { JournalsData, UserInfoData, CredentialsData } from '../store'; import { JournalsData, UserInfoData, CredentialsData } from '../store';
import ColorBox from '../widgets/ColorBox';
import { colorIntToHtml } from '../journal-processors';
interface PropsType { interface PropsType {
etesync: CredentialsData; etesync: CredentialsData;
@ -35,16 +37,27 @@ export default function JournalsList(props: PropsType) {
const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived)); const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
const cryptoManager = journal.getCryptoManager(derived, keyPair); const cryptoManager = journal.getCryptoManager(derived, keyPair);
const info = journal.getInfo(cryptoManager); const info = journal.getInfo(cryptoManager);
let colorBox: React.ReactNode;
switch (info.type) {
case 'CALENDAR':
case 'TASKS':
colorBox = (
<ColorBox size={24} color={colorIntToHtml(info.color)} />
);
break;
}
ret[info.type] = ret[info.type] || []; ret[info.type] = ret[info.type] || [];
ret[info.type].push( ret[info.type].push(
<ListItem key={journal.uid} onClick={() => journalClicked(journal.uid)}> <ListItem key={journal.uid} rightIcon={colorBox}
onClick={() => journalClicked(journal.uid)}>
{info.displayName} ({journal.uid.slice(0, 5)}) {info.displayName} ({journal.uid.slice(0, 5)})
</ListItem> </ListItem>
); );
return ret; return ret;
}, },
{ CALENDAR: [], {
CALENDAR: [],
ADDRESS_BOOK: [], ADDRESS_BOOK: [],
TASKS: [], TASKS: [],
}); });

@ -8,6 +8,8 @@ import Container from '../widgets/Container';
import { JournalsData, UserInfoData, CredentialsData } from '../store'; import { JournalsData, UserInfoData, CredentialsData } from '../store';
import ImportDialog from './ImportDialog'; import ImportDialog from './ImportDialog';
import { SyncInfo, SyncInfoJournal } from '../SyncGate'; import { SyncInfo, SyncInfoJournal } from '../SyncGate';
import { colorIntToHtml } from '../journal-processors';
import ColorBox from '../widgets/ColorBox';
interface PropsType { interface PropsType {
etesync: CredentialsData; etesync: CredentialsData;
@ -26,16 +28,27 @@ export default function JournalsList(props: PropsType) {
const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived)); const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
const cryptoManager = journal.getCryptoManager(derived, keyPair); const cryptoManager = journal.getCryptoManager(derived, keyPair);
const info = journal.getInfo(cryptoManager); const info = journal.getInfo(cryptoManager);
let colorBox: React.ReactNode;
switch (info.type) {
case 'CALENDAR':
case 'TASKS':
colorBox = (
<ColorBox size={24} color={colorIntToHtml(info.color)} />
);
break;
}
ret[info.type] = ret[info.type] || []; ret[info.type] = ret[info.type] || [];
ret[info.type].push( ret[info.type].push(
<ListItem key={journal.uid} onClick={() => setSelectedJournal(props.syncInfo.get(journal.uid))}> <ListItem key={journal.uid} rightIcon={colorBox}
onClick={() => setSelectedJournal(props.syncInfo.get(journal.uid))}>
{info.displayName} ({journal.uid.slice(0, 5)}) {info.displayName} ({journal.uid.slice(0, 5)})
</ListItem> </ListItem>
); );
return ret; return ret;
}, },
{ CALENDAR: [], {
CALENDAR: [],
ADDRESS_BOOK: [], ADDRESS_BOOK: [],
TASKS: [], TASKS: [],
}); });

@ -0,0 +1,15 @@
import * as React from 'react';
interface PropsType {
color: string;
size?: number | string;
style?: React.CSSProperties;
}
export default function ColorBox(props: PropsType) {
const size = props.size ?? 64;
const style = { ...props.style, backgroundColor: props.color, width: size, height: size };
return (
<div style={style} />
);
}
Loading…
Cancel
Save