muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

refactored flow cells, added colors for lab (#78)

Browse source 
* made better flow cells

* made cubical desaturation

* made colorfull lab nodes

* colorful lab nodes for all text ones

* all lab nodes are colorful

* disabled lazy loading on heroes

* fixed color calculation hook

* fixed lab color gradients calculation

* fixed cell text on flow
This commit is contained in:
muerwre 2021-10-08 11:33:53 +07:00 • committed by GitHub
parent 7d6f35b0af
commit 94c656fe0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 345 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/node/NodeRelatedItem/index.tsx
View file

@ -6,6 +6,9 @@ import { PRESETS, URLS } from '~/constants/urls';
import { RouteComponentProps, withRouter } from 'react-router';
import { getURL, stringToColour } from '~/utils/dom';
import { Avatar } from '~/components/common/Avatar';
import { normalizeBrightColor } from '~/utils/color';
import { adjustHue } from 'color2k';
import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
type IProps = RouteComponentProps & {
item: Partial<INode>;
@ -37,10 +40,8 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
() => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''),
[item]
);
const backgroundColor = useMemo(
() => (!thumb && item.title && stringToColour(item.title)) || '',
[]
);
const background = useColorGradientFromString(!thumb ? item.title : '');
useEffect(() => {
if (!ref.current) return;
@ -76,13 +77,13 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
/>
{!item.thumbnail && size === 'small' && (
<div className={styles.letters} style={{ backgroundColor }}>
<div className={styles.letters} style={{ background }}>
{getTitleLetters(item.title)}
</div>
)}
{!item.thumbnail && size !== 'small' && (
<div className={styles.title} style={{ backgroundColor }}>
<div className={styles.title} style={{ background }}>
{item.title}
</div>
)}