fixed features at editor

src/components/containers/Grid/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import * as styles from './styles.scss';
+import * as styles from "./styles.scss";
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
@@ -10,39 +10,42 @@ type IProps = React.HTMLAttributes<HTMLDivElement> & {
   size?: string;
   square?: boolean;
   gap?: number;
+  stretchy?: boolean;
 };
 
 const Grid: FC<IProps> = ({
   children,
-  className = '',
+  className = "",
   horizontal = false,
   vertical = false,
   square = false,
-  size = 'auto',
+  size = "auto",
   style = {},
-  columns = 'auto',
+  columns = "auto",
-  rows = 'auto',
+  rows = "auto",
   gap = 10,
+  stretchy,
   ...props
 }) => (
   <div
-    className={classNames(
+    className={classNames(styles.grid, className, {
-      styles.grid,
+      [styles.horizontal]: horizontal,
-      className,
+      [styles.vertical]: !horizontal,
-      {
+      [styles.square]: square,
-        [styles.horizontal]: horizontal,
+      [styles.stretchy]: stretchy
-        [styles.vertical]: !horizontal,
+    })}
-        [styles.square]: square,
-      },
-    )}
     style={{
       ...style,
-      gridTemplateColumns: square ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})` : columns,
+      gridTemplateColumns: square
-      gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows,
+        ? `repeat(auto-fill, ${(columns !== "auto" && columns) || size})`
+        : columns,
+      gridTemplateRows: square
+        ? `repeat(auto-fill, ${(rows !== "auto" && rows) || size})`
+        : rows,
       gridAutoRows: rows,
       gridAutoColumns: columns,
       gridRowGap: gap,
-      gridColumnGap: gap,
+      gridColumnGap: gap
     }}
     {...props}
   >

src/components/containers/Grid/styles.scss

@@ -15,4 +15,8 @@
   &.square {
     grid-auto-flow: dense;
   }
+
+  &.stretchy {
+    flex: 1;
+  }
 }

src/components/input/Button/index.tsx

@@ -1,25 +1,29 @@
-import classnames from 'classnames';
+import classnames from "classnames";
-import * as styles from './styles.scss';
+import * as styles from "./styles.scss";
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
-import { Icon } from '~/components/input/Icon';
+import { Icon } from "~/components/input/Icon";
 import { IIcon } from "~/redux/types";
 
-type IButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+type IButtonProps = DetailedHTMLProps<
-  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  size?: "mini" | "normal" | "big" | "giant" | "micro";
   iconLeft?: IIcon;
   iconRight?: IIcon;
   seamless?: boolean;
   transparent?: boolean;
   title?: string;
-  red?: boolean,
+  red?: boolean;
-  grey?: boolean,
+  grey?: boolean;
   non_submitting?: boolean;
   is_loading?: boolean;
+  stretchy?: boolean;
 };
 
 export const Button: FC<IButtonProps> = ({
-  className = '',
+  className = "",
-  size = 'normal',
+  size = "normal",
   iconLeft,
   iconRight,
   children,
@@ -30,34 +34,28 @@ export const Button: FC<IButtonProps> = ({
   grey = false,
   is_loading,
   title,
+  stretchy,
   ...props
-}) => (
+}) =>
-  React.createElement(
+  React.createElement(seamless || non_submitting ? "div" : "button", {
-    (seamless || non_submitting) ? 'div' : 'button',
+    className: classnames(styles.button, className, styles[size], {
-    {
+      red,
-      className: classnames(
+      grey,
-        styles.button,
+      seamless,
-        className,
+      transparent,
-        styles[size],
+      disabled: props.disabled,
-        {
+      icon: (iconLeft || iconRight) && !title && !children,
-          red,
+      is_loading,
-          grey,
+      stretchy
-          seamless,
+    }),
-          transparent,
+    children: [
-          disabled: props.disabled,
+      iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-          icon: (iconLeft || iconRight) && !title && !children,
+      title ? (
-          is_loading,
+        <span key={1}>{title}</span>
-        }),
+      ) : (
-      children: [
+        (children && <span key={1}>{children}</span>) || null
-        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+      ),
-        (
+      iconRight && <Icon icon={iconRight} size={20} key={2} />
-          title
+    ],
-            ? <span key={1}>{title}</span>
+    ...props
-            : (children && <span key={1}>{children}</span>) || null
+  });
-        ),
-        iconRight && <Icon icon={iconRight} size={20} key={2} />,
-      ],
-      ...props,
-    },
-  )
-);

src/components/input/Button/styles.scss

@@ -1,6 +1,10 @@
 @keyframes pulse {
-  0% { opacity: 1; }
+  0% {
-  100% { opacity: 0.3; }
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
 }
 
 .button {
@@ -28,23 +32,27 @@
   justify-content: center;
 
   // box-shadow: transparentize(#E933A5, 0.6) 0 2px 8px;
-  box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+  box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
   filter: grayscale(0);
 
   transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
   opacity: 0.8;
 
+  span {
+    flex: 1;
+  }
+
   &:hover {
     opacity: 1;
-    box-shadow: transparentize(#E933A5, 0.4) 0 2px 8px;
+    box-shadow: transparentize(#e933a5, 0.4) 0 2px 8px;
 
     &:global(.disabled) {
-      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
       cursor: auto;
     }
 
     &:active {
-      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
     }
   }
 
@@ -72,7 +80,12 @@
     color: $red;
   }
 
-  &:global(.disabled), &:global(.grey) {
+  &:global(.stretchy) {
+    flex: 1;
+  }
+
+  &:global(.disabled),
+  &:global(.grey) {
     opacity: 0.3;
     //background: black;
     filter: grayscale(100%);
@@ -84,7 +97,8 @@
   }
 
   &:global(.is_loading) {
-    span, svg {
+    span,
+    svg {
       animation: pulse 0.25s infinite alternate;
     }
   }
@@ -92,16 +106,34 @@
   > * {
     margin: 0 5px;
 
-    &:first-child { margin-left: 0; }
+    &:first-child {
-    &:last-child { margin-right: 0; }
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
-.micro { height: 20px; font: $font_12_semibold; padding: 0 15px;}
+.micro {
-.mini { height: 28px; }
+  height: 20px;
-.normal { height: 38px; }
+  font: $font_12_semibold;
-.big { height: 40px; }
+  padding: 0 15px;
-.giant { height: 50px; padding: 0 15px; min-width: 50px; }
+}
+.mini {
+  height: 28px;
+}
+.normal {
+  height: 38px;
+}
+.big {
+  height: 40px;
+}
+.giant {
+  height: 50px;
+  padding: 0 15px;
+  min-width: 50px;
+}
 .disabled {
   opacity: 0.5;
 }

src/components/input/Icon/index.tsx

@@ -1,23 +1,19 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
-import { IIcon } from '~/redux/types';
+import { IIcon } from "~/redux/types";
 
 type IProps = React.SVGAttributes<SVGElement> & {
   size?: number;
   icon: IIcon;
 };
 
-export const Icon: FC<IProps> = ({
+export const Icon: FC<IProps> = ({ size = 20, icon, style, ...props }) => (
-  size = 20,
-  icon,
-  ...props
-}) => (
   <svg
     width={size}
     height={size}
     viewBox={`0 0 24 24`}
     preserveAspectRatio="xMidYMid slice"
+    style={{ ...style, outline: "none" }}
     {...props}
-    style={{ ...props.style, outline: 'none' }}
   >
     <use xlinkHref={`#${icon}`} />
   </svg>

src/components/main/Header/index.tsx

@@ -1,28 +1,38 @@
-import * as React from 'react';
+import * as React from "react";
 import { Logo } from "~/components/main/Logo";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
 import { IUserState } from "~/redux/user/reducer";
-import { push as historyPush } from 'connected-react-router';
+import { push as historyPush } from "connected-react-router";
 
-import * as style from './style.scss';
+import * as style from "./style.scss";
-import {Filler} from "~/components/containers/Filler";
+import { Filler } from "~/components/containers/Filler";
-import {Group} from "~/components/containers/Group";
+import { Link } from "react-router-dom";
-import { Link } from 'react-router-dom';
+
+const mapStateToProps = ({
+  user: {
+    profile: { username, is_user }
+  }
+}: {
+  user: IUserState;
+}) => ({ username, is_user });
 
-const mapStateToProps = ({ user: { profile: { username, is_user } } }: { user: IUserState }) => ({ username, is_user });
 const mapDispatchToProps = {
-  push: historyPush,
+  push: historyPush
 };
 
-type IHeaderProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+type IHeaderProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {};
 
-export const Component: React.FunctionComponent<IHeaderProps> = ({ username, is_user }) => {
+export const Component: React.FunctionComponent<IHeaderProps> = ({
+  username,
+  is_user
+}) => {
   return (
     <div className="default_container head_container">
       <div className={style.container}>
-        <Logo/>
+        <Logo />
 
-        <Filler/>
+        <Filler />
 
         <div className={style.plugs}>
           <Link to="/">flow</Link>
@@ -31,15 +41,18 @@ export const Component: React.FunctionComponent<IHeaderProps> = ({ username, is_
           <Link to="/examples/horizontal">horizontal</Link>
         </div>
 
-        <Filler/>
+        <Filler />
 
-        <Group horizontal className={style.user_button}>
+        {/* <Group horizontal className={style.user_button}>
           <div>username</div>
           <div className={style.user_avatar}/>
-        </Group>
+        </Group> */}
       </div>
     </div>
   );
 };
 
-export const Header = connect(mapStateToProps, mapDispatchToProps)(Component);
+export const Header = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Component);

src/containers/examples/EditorExample/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
 import { Card } from "~/components/containers/Card";
-import * as styles from './styles.scss';
+import * as styles from "./styles.scss";
 import { Group } from "~/components/containers/Group";
 import { CellGrid } from "~/components/containers/CellGrid";
 import { Panel } from "~/components/containers/Panel";
@@ -11,71 +11,63 @@ import { Button } from "~/components/input/Button";
 import { Filler } from "~/components/containers/Filler";
 import { InputText } from "~/components/input/InputText";
 import { Icon } from "~/components/input/Icon";
+import { Grid } from "~/components/containers/Grid";
 
 interface IProps {}
 
 const EditorExample: FC<IProps> = () => (
-    <Card className={styles.wrap} seamless>
+  <Card className={styles.wrap} seamless>
-      <Group horizontal className={styles.group} seamless>
+    <Group horizontal className={styles.group} seamless>
-        <div className={styles.editor}>
+      <div className={styles.editor}>
-          <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
+        <Panel
-            <Scroll>
+          className={classNames(styles.editor_panel, styles.editor_image_panel)}
-              <CellGrid className={styles.editor_image_container} size={200}>
+        >
-                <div className={styles.editor_image} />
+          <Scroll>
-                <div className={styles.editor_image} />
+            <CellGrid className={styles.editor_image_container} size={200}>
-                <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
-                <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
-              </CellGrid>
+              <div className={styles.editor_image} />
-            </Scroll>
+              <div className={styles.editor_image} />
-          </Panel>
+            </CellGrid>
-        </div>
+          </Scroll>
+        </Panel>
 
-        <div className={styles.panel}>
+        <Panel>
-          <Panel>
+          <Grid columns="1fr" stretchy>
-            <Group>
+            <Card className={styles.feature_card}>
-              <InputText title="Заголовок" />
+              <div className={styles.cover} />
+            </Card>
+          </Grid>
+        </Panel>
+      </div>
 
-              <Tags
+      <div className={styles.panel}>
-                tags={[
+        <Panel>
-                  { title: 'Избранный', feature: 'red' },
+          <Group>
-                  { title: 'Плейлист', feature: 'green' },
+            <InputText title="Заголовок" />
-                  { title: 'Просто' },
-                  { title: '+ фото', feature: 'black' },
-                  { title: '+ с музыкой', feature: 'black' },
-                ]}
-              />
-            </Group>
-          </Panel>
 
-          <Panel stretchy>
+            <Tags
-            <Group>
+              tags={[
-              <Card className={styles.feature_card}>
+                { title: "Избранный", feature: "red" },
-                <div className={styles.cover} />
+                { title: "Плейлист", feature: "green" },
-              </Card>
+                { title: "Просто" },
+                { title: "+ фото", feature: "black" },
+                { title: "+ с музыкой", feature: "black" }
+              ]}
+            />
+          </Group>
+        </Panel>
 
-              <Card className={styles.feature_card} style={{ justifyContent: 'flex-start', height: 72 }}>
+        <Panel stretchy />
-                <Icon icon="play" size={48} />
-              </Card>
 
-              <Card className={styles.feature_card}>
+        <Panel>
-                <Group horizontal className={styles.views}>
+          <Button iconRight="play" stretchy>
-                  <Icon icon="cell-single" size={48} />
+            Submit?
-                  <Icon icon="cell-double-h" size={48} />
+          </Button>
-                  <Icon icon="cell-single" size={48} />
+        </Panel>
-                  <Icon icon="cell-double-h" size={48} />
+      </div>
-                </Group>                
+    </Group>
-              </Card>
+  </Card>
-
-              <Filler />
-            </Group>
-          </Panel>
-
-          <Panel>
-            <Button>Submit?</Button>
-          </Panel>
-        </div>
-      </Group>
-    </Card>
 );
 
 export { EditorExample };

src/containers/examples/EditorExample/styles.scss

@@ -44,7 +44,7 @@
 }
 
 .feature_card {
-  // height: 120px;
+  height: 120px;
   background: darken($main_bg_color, 6%);
   color: transparentize(white, 0.5);
   display: flex;
@@ -58,7 +58,7 @@
 
 .cover {
   border-radius: $radius;
-  background: url('http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg');
+  background: url("http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg");
   flex: 1;
   height: 120px;
   background-size: cover;
@@ -79,5 +79,9 @@
 }
 
 .views {
-  
+  div {
-}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/sprites/Sprites.tsx

@@ -23,8 +23,7 @@ const Sprites: FC<{}> = () => (
 
     <g id="play">
       <path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/>
-    </g>
+    </g>    
-    
   </svg>
 );