urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 13:54:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat-fe: improve name legibility in autocomplete

Browse Source
This commit is contained in:
Liam Fitzgerald 2020-03-24 10:50:53 +10:00
parent 6c403f5135
commit 302c3dc4cc
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/arvo/app/chat/js/index.js
View File

File diff suppressed because one or more lines are too long

20
pkg/interface/chat/src/js/components/lib/chat-input.js
View File

@ -6,7 +6,7 @@ import cn from 'classnames';
import { Sigil } from '/components/lib/icons/sigil'; import { Sigil } from '/components/lib/icons/sigil';
import { uuid, uxToHex } from '/lib/util'; import { uuid, uxToHex, hexToRgba } from '/lib/util';
const DEFAULT_INPUT_HEIGHT = 28; const DEFAULT_INPUT_HEIGHT = 28;
@ -31,9 +31,13 @@ function ChatInputSuggestion({ ship, contacts, selected, onSelect }) {
let sigilClass = "v-mid mix-blend-diff" let sigilClass = "v-mid mix-blend-diff"
let nickname; let nickname;
let nameStyle = {}; let nameStyle = {};
const isSelected = ship === selected;
if (contact) { if (contact) {
color = `#${uxToHex(contact.color)}`; const hex = uxToHex(contact.color);
nameStyle.color = color; color = `#${hex}`;
nameStyle.color = hexToRgba(hex, .7);
nameStyle.textShadow = '0px 0px 0px #000';
nameStyle.filter = 'contrast(1.3) saturate(1.5)';
sigilClass = "v-mid"; sigilClass = "v-mid";
nickname = contact.nickname; nickname = contact.nickname;
} }
@ -42,14 +46,10 @@ function ChatInputSuggestion({ ship, contacts, selected, onSelect }) {
<div <div
onClick={() => onSelect(ship)} onClick={() => onSelect(ship)}
className={cn( className={cn(
'f8 pv1 ph3 pointer hover-bg-gray4 relative hover-bg-gray1-d flex items-center', 'f8 pv1 ph3 pointer hover-bg-gray1-d hover-bg-gray4 relative flex items-center',
{ {
'white-d': ship !== selected, 'white-d bg-gray0-d bg-white': !isSelected,
'black-d': ship === selected, 'black-d bg-gray1-d bg-gray4': isSelected,
'bg-gray0-d': ship !== selected,
'bg-white': ship !== selected,
'bg-gray1-d': ship === selected,
'bg-gray4': ship === selected
} }
)} )}
key={ship} key={ship}

19
pkg/interface/chat/src/js/lib/util.js
View File

@ -72,6 +72,23 @@ export function uxToHex(ux) {
return value; return value;
} }
function hexToDec(hex) {
const alphabet = '0123456789ABCDEF'.split('');
return hex.reverse().reduce((acc, digit, idx) => {
const dec = alphabet.findIndex(a => a === digit.toUpperCase());
if(dec < 0) {
console.log(hex);
throw new Error("Incorrect hex formatting");
}
return acc + dec * (16 ** idx);
}, 0);
}
export function hexToRgba(hex, a) {
const [r,g,b] = _.chunk(hex, 2).map(hexToDec);
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
export function writeText(str) { export function writeText(str) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
@ -114,4 +131,4 @@ export function cite(ship) {
return shortened; return shortened;
} }
return `~${patp}`; return `~${patp}`;
} }