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

tags

Browse source
This commit is contained in:
muerwre 2019-07-27 05:50:18 +07:00
parent 163a46ace2
commit b8b1e49d94
11 changed files with 176 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/containers/TagField/index.tsx Normal file
View 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
View file

@ -0,0 +1,7 @@
.wrap {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}

7
src/components/input/Info/style.scss
View file

@ -11,18 +11,17 @@
&:global(.danger) {
color: white;
background: transparentize($color_red, 0.5);
background: transparentize($red, 0.5);
}
&:global(.warning) {
color: white;
background: transparentize($color_yellow, 0.5);
background: transparentize($red, 0.5);
}
&:global(.primary) {
color: white;
background: transparentize($color_blue, 0.5);
background: transparentize($red, 0.5);
}
}

1
src/components/node/Comment/styles.scss
View file

@ -2,6 +2,7 @@
background: $comment_bg;
min-height: 200px;
display: flex;
box-shadow: $comment_shadow;
}
.text {

3
src/components/node/NodePanel/styles.scss
View file

@ -52,7 +52,6 @@
.mark {
flex: 0 0 32px;
background: red;
position: relative;
&::after {
@ -62,7 +61,7 @@
right: 4px;
width: 24px;
height: 52px;
background: #ff3344;
background: $olive;
box-shadow: transparentize(black, 0.8) 4px 2px;
}
}

20
src/components/node/Tag/index.tsx Normal file
View 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
View 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;
}

87
src/containers/examples/ImageExample/index.tsx
View file

@ -7,6 +7,8 @@ import range from 'ramda/es/range';
import { Comment } from "~/components/node/Comment";
import { NodePanel } from "~/components/node/NodePanel";
import { Filler } from "~/components/containers/Filler";
import { Tag } from "~/components/node/Tag";
import { TagField } from "~/components/containers/TagField";
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" />
</div>
<Group>
<NodePanel />
<NodePanel />
<Padder horizontal>
<Group>
<Padder>
<Group horizontal className={styles.content}>
<Group className={styles.comments}>
{
@ -38,45 +40,56 @@ const ImageExample: FC<IProps> = () => (
</Group>
<div className={styles.panel}>
<Padder className={styles.buttons}>
<Group>
<div className={styles.button}>
<Group horizontal>
<div className={styles.button_icon}>
<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>
<Group style={{ flex: 1 }}>
<Padder className={styles.buttons}>
<Group>
<div className={styles.button}>
<Group horizontal>
<div className={styles.button_icon}>
<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>
<div className={styles.button_title}>На главной</div>
</Filler>
</Group>
</div>
<Filler>
<div className={styles.button_title}>На главной</div>
</Filler>
</Group>
</div>
<div className={styles.button}>
<Group horizontal>
<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>
</div>
<div className={styles.button}>
<Group horizontal>
<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>
</div>
<Filler>
<div className={styles.button_title}>Видно всем</div>
</Filler>
</Group>
</div>
<Filler>
<div className={styles.button_title}>Видно всем</div>
</Filler>
</Group>
</div>
<div className={styles.button}>
<Group horizontal>
<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>
</div>
<div className={styles.button}>
<Group horizontal>
<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>
</div>
<Filler>
<div className={styles.button_title}>Редактировать</div>
</Filler>
</Group>
</div>
</Group>
</Padder>
<Filler>
<div className={styles.button_title}>Редактировать</div>
</Filler>
</Group>
</div>
</Group>
</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>
</Group>
</Padder>

3
src/containers/examples/ImageExample/styles.scss
View file

@ -30,6 +30,7 @@
.node {
background: $node_bg;
box-shadow: $node_shadow;
}
.image {
@ -40,7 +41,7 @@
background: #161616;
flex: 1;
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;
//top: -64px
}

11
src/styles/colors.scss
View file

@ -1,6 +1,9 @@
$color_red: #ff3344;
$color_yellow: #ffd60f;
$color_blue: complement($color_red);
$red: #ff3344;
$yellow: #ffd60f;
$dark_blue: #3c75ff;
$blue: #3ca1ff;
$green: #00d2b9;
$olive: #8bc12a;
//$color_yellow: complement($color_red);
//$color_yellow: yellow;
@ -19,7 +22,7 @@ $text_big: 20px;
$text_sign: 22px;
$input_bg_color: transparentize(black, 0.8);
$button_bg_color: #ff3344;
$button_bg_color: $red;
$comment_bg: #191919;
$panel_bg: #191919;

8
src/styles/variables.scss
View file

@ -49,6 +49,14 @@ $font_10_semibold: $semibold 10px $font;
$font_cell_title: $font_24_bold;
$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() {
box-shadow: inset transparentize(white, 0.95) 0 1px,
inset transparentize(black, 0.5) 0 -1px;