mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
tags
This commit is contained in:
muerwre
parent
163a46ace2
commit
b8b1e49d94
11 changed files with 176 additions and 48 deletions
14
src/components/containers/TagField/index.tsx
Normal file
14
src/components/containers/TagField/index.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React, {FC, HTMLAttributes} from 'react';
|
||||||
|
import * as styles from './styles.scss';
|
||||||
|
|
||||||
|
type IProps = HTMLAttributes<HTMLDivElement> & {}
|
||||||
|
|
||||||
|
const TagField: FC<IProps> = ({
|
||||||
|
children,
|
||||||
|
}) => (
|
||||||
|
<div className={styles.wrap}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export { TagField };
|
||||||
7
src/components/containers/TagField/styles.scss
Normal file
7
src/components/containers/TagField/styles.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.wrap {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
@ -11,18 +11,17 @@
|
||||||
|
|
||||||
&:global(.danger) {
|
&:global(.danger) {
|
||||||
color: white;
|
color: white;
|
||||||
background: transparentize($color_red, 0.5);
|
background: transparentize($red, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.warning) {
|
&:global(.warning) {
|
||||||
color: white;
|
color: white;
|
||||||
background: transparentize($color_yellow, 0.5);
|
background: transparentize($red, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.primary) {
|
&:global(.primary) {
|
||||||
color: white;
|
color: white;
|
||||||
background: transparentize($color_blue, 0.5);
|
background: transparentize($red, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
background: $comment_bg;
|
background: $comment_bg;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
box-shadow: $comment_shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,6 @@
|
||||||
|
|
||||||
.mark {
|
.mark {
|
||||||
flex: 0 0 32px;
|
flex: 0 0 32px;
|
||||||
background: red;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -62,7 +61,7 @@
|
||||||
right: 4px;
|
right: 4px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
background: #ff3344;
|
background: $olive;
|
||||||
box-shadow: transparentize(black, 0.8) 4px 2px;
|
box-shadow: transparentize(black, 0.8) 4px 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
20
src/components/node/Tag/index.tsx
Normal file
20
src/components/node/Tag/index.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React, { FC } from 'react';
|
||||||
|
import * as styles from './styles.scss';
|
||||||
|
import classNames = require("classnames");
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
title: string;
|
||||||
|
color?: 'red' | 'blue' | 'green' | 'olive' | 'black';
|
||||||
|
}
|
||||||
|
|
||||||
|
const Tag: FC<IProps> = ({
|
||||||
|
title,
|
||||||
|
color,
|
||||||
|
}) => (
|
||||||
|
<div className={classNames(styles.tag, color)}>
|
||||||
|
<div className={styles.hole} />
|
||||||
|
<div className={styles.title}>{title}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Tag };
|
||||||
63
src/components/node/Tag/styles.scss
Normal file
63
src/components/node/Tag/styles.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
.tag {
|
||||||
|
height: $tag_height;
|
||||||
|
background: #333333;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: stretch;
|
||||||
|
border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2);
|
||||||
|
font: $font_12_semibold;
|
||||||
|
align-self: flex-start;
|
||||||
|
padding: 0 8px 0 0;
|
||||||
|
box-shadow: $shadow_depth_2;
|
||||||
|
margin: ($gap / 2) $gap ($gap / 2) 0;
|
||||||
|
|
||||||
|
&:global(.red) {
|
||||||
|
background: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:global(.blue) {
|
||||||
|
background: $blue;
|
||||||
|
//color: transparentize(black, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:global(.green) {
|
||||||
|
background: $green;
|
||||||
|
color: transparentize(black, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:global(.olive) {
|
||||||
|
background: $olive;
|
||||||
|
color: transparentize(black, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:global(.black) {
|
||||||
|
background: transparentize(black, 0.7);
|
||||||
|
box-shadow: none;
|
||||||
|
color: transparentize(white, 0.6);
|
||||||
|
|
||||||
|
.hole::after { background: transparentize(white, 0.98); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hole {
|
||||||
|
width: $tag_height;
|
||||||
|
height: $tag_height;
|
||||||
|
display: flex;
|
||||||
|
margin-right: 3px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
background: transparentize(black, 0.7);
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
@ -7,6 +7,8 @@ import range from 'ramda/es/range';
|
||||||
import { Comment } from "~/components/node/Comment";
|
import { Comment } from "~/components/node/Comment";
|
||||||
import { NodePanel } from "~/components/node/NodePanel";
|
import { NodePanel } from "~/components/node/NodePanel";
|
||||||
import { Filler } from "~/components/containers/Filler";
|
import { Filler } from "~/components/containers/Filler";
|
||||||
|
import { Tag } from "~/components/node/Tag";
|
||||||
|
import { TagField } from "~/components/containers/TagField";
|
||||||
|
|
||||||
interface IProps {}
|
interface IProps {}
|
||||||
|
|
||||||
|
|
@ -22,10 +24,10 @@ const ImageExample: FC<IProps> = () => (
|
||||||
<img className={styles.image} src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg" />
|
<img className={styles.image} src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Group>
|
<NodePanel />
|
||||||
<NodePanel />
|
|
||||||
|
|
||||||
<Padder horizontal>
|
<Group>
|
||||||
|
<Padder>
|
||||||
<Group horizontal className={styles.content}>
|
<Group horizontal className={styles.content}>
|
||||||
<Group className={styles.comments}>
|
<Group className={styles.comments}>
|
||||||
{
|
{
|
||||||
|
|
@ -38,45 +40,56 @@ const ImageExample: FC<IProps> = () => (
|
||||||
</Group>
|
</Group>
|
||||||
|
|
||||||
<div className={styles.panel}>
|
<div className={styles.panel}>
|
||||||
<Padder className={styles.buttons}>
|
<Group style={{ flex: 1 }}>
|
||||||
<Group>
|
<Padder className={styles.buttons}>
|
||||||
<div className={styles.button}>
|
<Group>
|
||||||
<Group horizontal>
|
<div className={styles.button}>
|
||||||
<div className={styles.button_icon}>
|
<Group horizontal>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
|
<div className={styles.button_icon}>
|
||||||
</div>
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Filler>
|
<Filler>
|
||||||
<div className={styles.button_title}>На главной</div>
|
<div className={styles.button_title}>На главной</div>
|
||||||
</Filler>
|
</Filler>
|
||||||
</Group>
|
</Group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.button}>
|
<div className={styles.button}>
|
||||||
<Group horizontal>
|
<Group horizontal>
|
||||||
<div className={styles.button_icon}>
|
<div className={styles.button_icon}>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Filler>
|
<Filler>
|
||||||
<div className={styles.button_title}>Видно всем</div>
|
<div className={styles.button_title}>Видно всем</div>
|
||||||
</Filler>
|
</Filler>
|
||||||
</Group>
|
</Group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.button}>
|
<div className={styles.button}>
|
||||||
<Group horizontal>
|
<Group horizontal>
|
||||||
<div className={styles.button_icon}>
|
<div className={styles.button_icon}>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Filler>
|
<Filler>
|
||||||
<div className={styles.button_title}>Редактировать</div>
|
<div className={styles.button_title}>Редактировать</div>
|
||||||
</Filler>
|
</Filler>
|
||||||
</Group>
|
</Group>
|
||||||
</div>
|
</div>
|
||||||
</Group>
|
</Group>
|
||||||
</Padder>
|
</Padder>
|
||||||
|
|
||||||
|
<TagField>
|
||||||
|
<Tag title="Tag" />
|
||||||
|
<Tag title="Some tag" color="red" />
|
||||||
|
<Tag title="Some another tag" color="blue" />
|
||||||
|
<Tag title="Some tag" color="green" />
|
||||||
|
<Tag title="Some tag" color="olive" />
|
||||||
|
<Tag title="Some tag" color="black" />
|
||||||
|
</TagField>
|
||||||
|
</Group>
|
||||||
</div>
|
</div>
|
||||||
</Group>
|
</Group>
|
||||||
</Padder>
|
</Padder>
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@
|
||||||
|
|
||||||
.node {
|
.node {
|
||||||
background: $node_bg;
|
background: $node_bg;
|
||||||
|
box-shadow: $node_shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
|
|
@ -40,7 +41,7 @@
|
||||||
background: #161616;
|
background: #161616;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border-radius: $panel_radius;
|
border-radius: $panel_radius;
|
||||||
box-shadow: transparentize(black, 0.3) 0 4px, inset transparentize(white, 0.98) 0 1px;
|
box-shadow: $comment_shadow;
|
||||||
//position: relative;
|
//position: relative;
|
||||||
//top: -64px
|
//top: -64px
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
$color_red: #ff3344;
|
$red: #ff3344;
|
||||||
$color_yellow: #ffd60f;
|
$yellow: #ffd60f;
|
||||||
$color_blue: complement($color_red);
|
$dark_blue: #3c75ff;
|
||||||
|
$blue: #3ca1ff;
|
||||||
|
$green: #00d2b9;
|
||||||
|
$olive: #8bc12a;
|
||||||
//$color_yellow: complement($color_red);
|
//$color_yellow: complement($color_red);
|
||||||
//$color_yellow: yellow;
|
//$color_yellow: yellow;
|
||||||
|
|
||||||
|
|
@ -19,7 +22,7 @@ $text_big: 20px;
|
||||||
$text_sign: 22px;
|
$text_sign: 22px;
|
||||||
|
|
||||||
$input_bg_color: transparentize(black, 0.8);
|
$input_bg_color: transparentize(black, 0.8);
|
||||||
$button_bg_color: #ff3344;
|
$button_bg_color: $red;
|
||||||
|
|
||||||
$comment_bg: #191919;
|
$comment_bg: #191919;
|
||||||
$panel_bg: #191919;
|
$panel_bg: #191919;
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,14 @@ $font_10_semibold: $semibold 10px $font;
|
||||||
$font_cell_title: $font_24_bold;
|
$font_cell_title: $font_24_bold;
|
||||||
$font_hero_title: $font_48_semibold;
|
$font_hero_title: $font_48_semibold;
|
||||||
|
|
||||||
|
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
|
||||||
|
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
|
||||||
|
|
||||||
|
$comment_shadow: $shadow_depth_2;
|
||||||
|
$node_shadow: transparentize(black, 0.8) 1px 2px;
|
||||||
|
|
||||||
|
$tag_height: 24px;
|
||||||
|
|
||||||
@mixin outer_shadow() {
|
@mixin outer_shadow() {
|
||||||
box-shadow: inset transparentize(white, 0.95) 0 1px,
|
box-shadow: inset transparentize(white, 0.95) 0 1px,
|
||||||
inset transparentize(black, 0.5) 0 -1px;
|
inset transparentize(black, 0.5) 0 -1px;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue