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

added lab post lines

Browse source
This commit is contained in:
Fedor Katurov 2021-10-12 16:21:08 +07:00
parent a553a06ac5
commit bf16c0ca22
6 changed files with 33 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/lab/LabLine/index.tsx Normal file
View file

@ -0,0 +1,14 @@
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { INodeComponentProps } from '~/redux/node/constants';
import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
interface Props extends INodeComponentProps {}
const LabLine: FC<Props> = ({ node: { title } }) => {
const background = useColorGradientFromString(title, 5, 3, 270);
return <div className={styles.line} style={{ background }} />;
};
export { LabLine };

7
src/components/lab/LabLine/styles.module.scss Normal file
View file

@ -0,0 +1,7 @@
@import "~/styles/variables";
.line {
height: 4px;
border-radius: $radius $radius 0 0;
width: 100%;
}

1
src/components/lab/LabNode/styles.module.scss
View file

@ -3,6 +3,7 @@
.wrap {
@include outer_shadow;
position: relative;
background-color: $lab_post_bg;
cursor: pointer;

3
src/redux/node/constants.ts
View file

@ -22,6 +22,7 @@ import { LabPad } from '~/components/lab/LabPad';
import { LabDescription } from '~/components/lab/LabDescription';
import { LabVideo } from '~/components/lab/LabVideo';
import { LabAudio } from '~/components/lab/LabAudioBlock';
import { LabLine } from '~/components/lab/LabLine';
const prefix = 'NODE.';
export const NODE_ACTIONS = {
@ -94,7 +95,7 @@ export const LAB_PREVIEW_LAYOUT: Record<string, FC<INodeComponentProps>[]> = {
[NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabDescription],
[NODE_TYPES.VIDEO]: [LabVideo, LabPad, LabNodeTitle, LabDescription],
[NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, LabPad, NodeAudioImageBlock, LabAudio, LabPad],
[NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad],
[NODE_TYPES.TEXT]: [LabLine, LabPad, LabNodeTitle, LabPad, LabText, LabPad],
};
export const NODE_HEADS: INodeComponents = {

4
src/utils/color.ts
View file

@ -10,6 +10,6 @@ export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnes
const saturation = hsla[1];
const lightness = hsla[2];
const desaturated = desaturate(color, saturation ** saturationExp);
return darken(desaturated, lightness ** lightnessExp);
const desaturated = saturationExp > 1 ? desaturate(color, saturation ** saturationExp) : color;
return lightnessExp > 1 ? darken(desaturated, lightness ** lightnessExp) : desaturated;
};

9
src/utils/hooks/useColorGradientFromString.ts
View file

@ -3,7 +3,12 @@ import { adjustHue } from 'color2k';
import { normalizeBrightColor } from '~/utils/color';
import { stringToColour } from '~/utils/dom';
export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) =>
export const useColorGradientFromString = (
val?: string,
saturation = 3,
lightness = 3,
angle = 155
) =>
useMemo(() => {
if (!val) {
return '';
@ -13,5 +18,5 @@ export const useColorGradientFromString = (val?: string, saturation = 3, lightne
const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness);
const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
return `linear-gradient(155deg, ${color}, ${second}, ${third})`;
return `linear-gradient(${angle}deg, ${color}, ${second}, ${third})`;
}, [val]);