urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-24 13:06:09 +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 { uuid, uxToHex } from '/lib/util';
import { uuid, uxToHex, hexToRgba } from '/lib/util';
const DEFAULT_INPUT_HEIGHT = 28;
@ -31,9 +31,13 @@ function ChatInputSuggestion({ ship, contacts, selected, onSelect }) {
let sigilClass = "v-mid mix-blend-diff"
let nickname;
let nameStyle = {};
const isSelected = ship === selected;
if (contact) {
color = `#${uxToHex(contact.color)}`;
nameStyle.color = color;
const hex = uxToHex(contact.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";
nickname = contact.nickname;
}
@ -42,14 +46,10 @@ function ChatInputSuggestion({ ship, contacts, selected, onSelect }) {
<div
onClick={() => onSelect(ship)}
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,
'black-d': ship === selected,
'bg-gray0-d': ship !== selected,
'bg-white': ship !== selected,
'bg-gray1-d': ship === selected,
'bg-gray4': ship === selected
'white-d bg-gray0-d bg-white': !isSelected,
'black-d bg-gray1-d bg-gray4': isSelected,
}
)}
key={ship}

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

@ -72,6 +72,23 @@ export function uxToHex(ux) {
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) {
return new Promise(function (resolve, reject) {
@ -114,4 +131,4 @@ export function cite(ship) {
return shortened;
}
return `~${patp}`;
}
}