fixed features at editor

2025-04-25 04:46:40 +07:00 · 2019-08-01 19:11:01 +07:00 · 2019-08-01 19:11:01 +07:00 · 393813ce4e
commit 393813ce4e
parent 85ee879c2f
9 changed files with 204 additions and 163 deletions
--- a/src/components/containers/Grid/index.tsx
+++ b/src/components/containers/Grid/index.tsx
@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import classNames from 'classnames';
-import * as styles from './styles.scss';
+import React, { FC } from "react";
+import classNames from "classnames";
+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',
-  rows = 'auto',
+  columns = "auto",
+  rows = "auto",
  gap = 10,
+  stretchy,
  ...props
 }) => (
  <div
-    className={classNames(
-      styles.grid,
-      className,
-      {
-        [styles.horizontal]: horizontal,
-        [styles.vertical]: !horizontal,
-        [styles.square]: square,
-      },
-    )}
+    className={classNames(styles.grid, className, {
+      [styles.horizontal]: horizontal,
+      [styles.vertical]: !horizontal,
+      [styles.square]: square,
+      [styles.stretchy]: stretchy
+    })}
    style={{
      ...style,
-      gridTemplateColumns: square ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})` : columns,
-      gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows,
+      gridTemplateColumns: square
+        ? `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}
  >
--- a/src/components/containers/Grid/styles.scss
+++ b/src/components/containers/Grid/styles.scss
@ -15,4 +15,8 @@
  &.square {
    grid-auto-flow: dense;
  }
+
+  &.stretchy {
+    flex: 1;
+  }
 }
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@ -1,25 +1,29 @@
-import classnames from 'classnames';
-import * as styles from './styles.scss';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
-import { Icon } from '~/components/input/Icon';
+import classnames from "classnames";
+import * as styles from "./styles.scss";
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
+import { Icon } from "~/components/input/Icon";
 import { IIcon } from "~/redux/types";

-type IButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
+type IButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  size?: "mini" | "normal" | "big" | "giant" | "micro";
  iconLeft?: IIcon;
  iconRight?: IIcon;
  seamless?: boolean;
  transparent?: boolean;
  title?: string;
-  red?: boolean,
-  grey?: boolean,
+  red?: boolean;
+  grey?: boolean;
  non_submitting?: boolean;
  is_loading?: boolean;
+  stretchy?: boolean;
 };

 export const Button: FC<IButtonProps> = ({
-  className = '',
-  size = 'normal',
+  className = "",
+  size = "normal",
  iconLeft,
  iconRight,
  children,
@ -30,34 +34,28 @@ export const Button: FC<IButtonProps> = ({
  grey = false,
  is_loading,
  title,
+  stretchy,
  ...props
-}) => (
-  React.createElement(
-    (seamless || non_submitting) ? 'div' : 'button',
-    {
-      className: classnames(
-        styles.button,
-        className,
-        styles[size],
-        {
-          red,
-          grey,
-          seamless,
-          transparent,
-          disabled: props.disabled,
-          icon: (iconLeft || iconRight) && !title && !children,
-          is_loading,
-        }),
-      children: [
-        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-        (
-          title
-            ? <span key={1}>{title}</span>
-            : (children && <span key={1}>{children}</span>) || null
-        ),
-        iconRight && <Icon icon={iconRight} size={20} key={2} />,
-      ],
-      ...props,
-    },
-  )
-);
+}) =>
+  React.createElement(seamless || non_submitting ? "div" : "button", {
+    className: classnames(styles.button, className, styles[size], {
+      red,
+      grey,
+      seamless,
+      transparent,
+      disabled: props.disabled,
+      icon: (iconLeft || iconRight) && !title && !children,
+      is_loading,
+      stretchy
+    }),
+    children: [
+      iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+      title ? (
+        <span key={1}>{title}</span>
+      ) : (
+        (children && <span key={1}>{children}</span>) || null
+      ),
+      iconRight && <Icon icon={iconRight} size={20} key={2} />
+    ],
+    ...props
+  });
--- a/src/components/input/Button/styles.scss
+++ b/src/components/input/Button/styles.scss
@ -1,6 +1,10 @@
@keyframes pulse {
-  0% { opacity: 1; }
-  100% { opacity: 0.3; }
+  0% {
+    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; }
-    &:last-child { margin-right: 0; }
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
  }
 }

-.micro { height: 20px; font: $font_12_semibold; padding: 0 15px;}
-.mini { height: 28px; }
-.normal { height: 38px; }
-.big { height: 40px; }
-.giant { height: 50px; padding: 0 15px; min-width: 50px; }
+.micro {
+  height: 20px;
+  font: $font_12_semibold;
+  padding: 0 15px;
+}
+.mini {
+  height: 28px;
+}
+.normal {
+  height: 38px;
+}
+.big {
+  height: 40px;
+}
+.giant {
+  height: 50px;
+  padding: 0 15px;
+  min-width: 50px;
+}
 .disabled {
  opacity: 0.5;
 }
--- a/src/components/input/Icon/index.tsx
+++ b/src/components/input/Icon/index.tsx
@ -1,23 +1,19 @@
-import React, { FC } from 'react';
-import { IIcon } from '~/redux/types';
+import React, { FC } from "react";
+import { IIcon } from "~/redux/types";

 type IProps = React.SVGAttributes<SVGElement> & {
  size?: number;
  icon: IIcon;
 };

-export const Icon: FC<IProps> = ({
-  size = 20,
-  icon,
-  ...props
-}) => (
+export const Icon: FC<IProps> = ({ size = 20, icon, style, ...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>
--- a/src/components/main/Header/index.tsx
+++ b/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 {Filler} from "~/components/containers/Filler";
-import {Group} from "~/components/containers/Group";
-import { Link } from 'react-router-dom';
+import * as style from "./style.scss";
+import { Filler } from "~/components/containers/Filler";
+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);
--- a/src/containers/examples/EditorExample/index.tsx
+++ b/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>
-      <Group horizontal className={styles.group} seamless>
-        <div className={styles.editor}>
-          <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
-            <Scroll>
-              <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>
-            </Scroll>
-          </Panel>
-        </div>
+  <Card className={styles.wrap} seamless>
+    <Group horizontal className={styles.group} seamless>
+      <div className={styles.editor}>
+        <Panel
+          className={classNames(styles.editor_panel, styles.editor_image_panel)}
+        >
+          <Scroll>
+            <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>
+          </Scroll>
+        </Panel>

-        <div className={styles.panel}>
-          <Panel>
-            <Group>
-              <InputText title="Заголовок" />
+        <Panel>
+          <Grid columns="1fr" stretchy>
+            <Card className={styles.feature_card}>
+              <div className={styles.cover} />
+            </Card>
+          </Grid>
+        </Panel>
+      </div>

-              <Tags
-                tags={[
-                  { title: 'Избранный', feature: 'red' },
-                  { title: 'Плейлист', feature: 'green' },
-                  { title: 'Просто' },
-                  { title: '+ фото', feature: 'black' },
-                  { title: '+ с музыкой', feature: 'black' },
-                ]}
-              />
-            </Group>
-          </Panel>
+      <div className={styles.panel}>
+        <Panel>
+          <Group>
+            <InputText title="Заголовок" />

-          <Panel stretchy>
-            <Group>
-              <Card className={styles.feature_card}>
-                <div className={styles.cover} />
-              </Card>
+            <Tags
+              tags={[
+                { title: "Избранный", feature: "red" },
+                { title: "Плейлист", feature: "green" },
+                { title: "Просто" },
+                { title: "+ фото", feature: "black" },
+                { title: "+ с музыкой", feature: "black" }
+              ]}
+            />
+          </Group>
+        </Panel>

-              <Card className={styles.feature_card} style={{ justifyContent: 'flex-start', height: 72 }}>
-                <Icon icon="play" size={48} />
-              </Card>
+        <Panel stretchy />

-              <Card className={styles.feature_card}>
-                <Group horizontal className={styles.views}>
-                  <Icon icon="cell-single" size={48} />
-                  <Icon icon="cell-double-h" size={48} />
-                  <Icon icon="cell-single" size={48} />
-                  <Icon icon="cell-double-h" size={48} />
-                </Group>                
-              </Card>
-
-              <Filler />
-            </Group>
-          </Panel>
-
-          <Panel>
-            <Button>Submit?</Button>
-          </Panel>
-        </div>
-      </Group>
-    </Card>
+        <Panel>
+          <Button iconRight="play" stretchy>
+            Submit?
+          </Button>
+        </Panel>
+      </div>
+    </Group>
+  </Card>
 );

 export { EditorExample };
--- a/src/containers/examples/EditorExample/styles.scss
+++ b/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;
+  }
+}
--- a/src/sprites/Sprites.tsx
+++ b/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>
 );