tags

src/components/containers/TagField/index.tsx

@@ -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 };

src/components/containers/TagField/styles.scss

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

src/components/input/Info/style.scss

@@ -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);
   }
-
 }
 

src/components/node/Comment/styles.scss

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

src/components/node/NodePanel/styles.scss

@@ -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;
   }
 }

src/components/node/Tag/index.tsx

@@ -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 };

src/components/node/Tag/styles.scss

@@ -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;
+}

src/containers/examples/ImageExample/index.tsx

@@ -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 />
 
-        <Padder horizontal>
+      <Group>
+        <Padder>
           <Group horizontal className={styles.content}>
             <Group className={styles.comments}>
               {
@@ -38,6 +40,7 @@ const ImageExample: FC<IProps> = () => (
             </Group>
 
             <div className={styles.panel}>
+              <Group style={{ flex: 1 }}>
                 <Padder className={styles.buttons}>
                   <Group>
                     <div className={styles.button}>
@@ -77,6 +80,16 @@ const ImageExample: FC<IProps> = () => (
                     </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>

src/containers/examples/ImageExample/styles.scss

@@ -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
 }

src/styles/colors.scss

@@ -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;

src/styles/variables.scss

@@ -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;