chat-fe: correct light mode autocomplete styling

This commit is contained in:
Liam Fitzgerald 2020-03-20 15:22:32 +10:00
parent 19b97040f2
commit 2f97099e94

View File

@ -10,8 +10,12 @@ import { uuid, uxToHex } from '/lib/util';
const DEFAULT_INPUT_HEIGHT = 28; const DEFAULT_INPUT_HEIGHT = 28;
function getAdvance(a, b) { function getAdvance(a, b) {
let res = ''; let res = '';
if(!a) {
return b;
}
for (let i = 0; i < Math.min(a.length, b.length); i++) { for (let i = 0; i < Math.min(a.length, b.length); i++) {
if (a[i] !== b[i]) { if (a[i] !== b[i]) {
return res; return res;
@ -29,26 +33,23 @@ function ChatInputSuggestions({ suggestions, onSelect, selected }) {
left: '48px' left: '48px'
}} }}
className={ className={
'absolute bg-white bg-gray0-d ' + 'absolute black white-d bg-white bg-gray0-d ' +
'w7 pv3 z-1 mt1 ba b--white-d overflow-y-scroll' 'w7 pv1 z-1 mt1 ba b--gray1-d b--gray4'
} }
> >
{suggestions.map(ship => ( {suggestions.map(ship => (
<div <div
className={cn( className={cn(
'list mono f8 pv1 ph3 pointer' + ' hover-bg-gray4 relative', 'list mono f8 pv1 ph3 pointer' + ' hover-bg-gray4 relative bb b--gray1-d b--gray4',
{ {
'white-d': ship !== selected, 'white-d': ship !== selected,
'black-d': ship === selected, 'black-d': ship === selected,
'bg-gray0-d': ship !== selected, 'bg-gray0-d': ship !== selected,
'bg-gray1-d': ship === selected 'bg-white': ship !== selected,
'bg-gray1-d': ship === selected,
'bg-gray5': ship === selected
} }
)} )}
style={{
borderBottom: '1px solid #4d4d4d',
zIndex: '99',
fontFamily: 'monospace'
}}
key={ship} key={ship}
> >
<Sigil <Sigil
@ -57,7 +58,7 @@ function ChatInputSuggestions({ suggestions, onSelect, selected }) {
color="#000000" color="#000000"
classes="mix-blend-diff v-mid" classes="mix-blend-diff v-mid"
/> />
<span className="v-mid ml2 mw5 truncate dib mix-blend-diff"> <span className="v-mid ml2 mw5 truncate dib">
{'~' + ship} {'~' + ship}
</span> </span>
</div> </div>
@ -139,21 +140,20 @@ export class ChatInput extends Component {
const match = /~([a-z\-]*)$/.exec(message); const match = /~([a-z\-]*)$/.exec(message);
if (!match) { if (!match) {
return null; this.setState({ patpSuggestions: [] })
} }
const envelopes = ['hastuc', 'hastuc-dibtux', 'hasfun'];
// const suggestions = _.chain(props.envelopes) const suggestions = _.chain(this.props.envelopes)
// .map("author") .map("author")
// .uniq() .uniq()
const suggestions = _.chain(envelopes)
.filter(s => s.startsWith(match[1])) .filter(s => s.startsWith(match[1]))
.take(3)
.value(); .value();
const advance = _.chain(suggestions) const advance = _.chain(suggestions)
.map(s => s.replace(match[0], '')) .map(s => s.replace(match[0], ''))
.reduce(getAdvance) .reduce(getAdvance, )
.value(); .value();
let newState = { let newState = {