better editor layout

src/components/containers/Panel/index.tsx

@@ -4,15 +4,17 @@ import classNames = require("classnames");
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
+  stretchy?: boolean
 }
 
 const Panel: FC<IProps> = ({
   className,
   children,
   seamless,
+  stretchy,
   ...props
 }) => (
-    <div className={classNames(styles.panel, className, { seamless })} {...props}>
+    <div className={classNames(styles.panel, className, { seamless, stretchy })} {...props}>
       {children}
     </div>
 );

src/components/containers/Panel/styles.scss

@@ -10,4 +10,5 @@
   @include outer_shadow();
 
   &:global(.seamless) { padding: 0; }
+  &:global(.stretchy) { flex: 1; align-items: flex-start; }
 }

src/components/main/Header/index.tsx

@@ -1,40 +1,45 @@
 import * as React from 'react';
 import { Logo } from "~/components/main/Logo";
 import { connect } from 'react-redux';
-import { IUserProfile, IUserState } from "~/redux/user/reducer";
+import { IUserState } from "~/redux/user/reducer";
+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';
 
-interface IHeaderProps {
-  username?: IUserProfile['username'],
-  is_user?: IUserProfile['is_user'],
-}
+const mapStateToProps = ({ user: { profile: { username, is_user } } }: { user: IUserState }) => ({ username, is_user });
+const mapDispatchToProps = {
+  push: historyPush,
+};
 
-export const Component: React.FunctionComponent<IHeaderProps> = ({ username, is_user }) => (
+type IHeaderProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+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}>
-        <div>depth</div>
-        <div>boris</div>
-        <div>flow</div>
+          <Link to="/">flow</Link>
+          <Link to="/examples/image">image</Link>
+          <Link to="/examples/edit">editor</Link>
+          <Link to="/examples/horizontal">horizontal</Link>
         </div>
 
-      <Filler />
+        <Filler/>
 
         <Group horizontal className={style.user_button}>
           <div>username</div>
-        <div className={style.user_avatar} />
+          <div className={style.user_avatar}/>
         </Group>
       </div>
     </div>
-);
+  );
+};
 
-const mapStateToProps = ({ user: { profile: { username, is_user } } }: { user: IUserState }) => ({ username, is_user });
-
-export const Header = connect(mapStateToProps)(Component);
+export const Header = connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/main/Header/style.scss

@@ -17,13 +17,15 @@
   font: $font_16_medium;
   text-transform: uppercase;
 
-  > div {
+  > a {
     display: flex;
     align-items: center;
     position: relative;
     padding: $gap;
     cursor: pointer;
     transition: color 0.25s;
+    text-decoration: none;
+    color: white;
 
     &:hover {
       color: $red;
@@ -65,6 +67,7 @@
   font: $font_16_medium;
   text-transform: uppercase;
   flex: 0 !important;
+  opacity: 0.3;
 }
 
 .user_avatar {

src/containers/App.tsx

@@ -10,6 +10,8 @@ import { LoginLayout } from "~/containers/login/LoginLayout";
 import { MainLayout } from "~/containers/main/MainLayout";
 import { ImageExample } from "~/containers/examples/ImageExample";
 import { EditorExample } from "~/containers/examples/EditorExample";
+import { HorizontalExample } from "~/containers/examples/HorizontalExample";
+import { Sprites } from "~/sprites/Sprites";
 
 interface IAppProps {}
 interface IAppState {}
@@ -19,9 +21,12 @@ class Component extends React.Component<IAppProps, IAppState> {
     return (
       <ConnectedRouter history={history}>
         <MainLayout>
+          <Sprites />
+
           <Switch>
             <Route path="/examples/image" component={ImageExample} />
             <Route path="/examples/edit" component={EditorExample} />
+            <Route path="/examples/horizontal" component={HorizontalExample} />
             <Route path="/" component={FlowLayout} />
 
             <Route path="/login" component={LoginLayout} />

src/containers/examples/EditorExample/index.tsx

@@ -8,11 +8,12 @@ import { Panel } from "~/components/containers/Panel";
 import { TextInput } from "~/components/input/TextInput";
 import classNames = require("classnames");
 import { Scroll } from "~/components/containers/Scroll";
-import { Grid } from "~/components/containers/Grid";
 import { Tags } from "~/components/node/Tags";
 import { Button } from "~/components/input/Button";
 import { Filler } from "~/components/containers/Filler";
 import { InputText } from "~/components/input/InputText";
+import {Grid} from "~/components/containers/Grid";
+import {Icon} from "~/components/input/Icon";
 
 interface IProps {}
 
@@ -20,14 +21,6 @@ const EditorExample: FC<IProps> = () => (
     <Card className={styles.wrap} seamless>
       <Group horizontal className={styles.group} seamless>
         <div className={styles.editor}>
-          <Panel>
-            <TextInput onChange={console.log} label="Название" value="Значение" />
-          </Panel>
-
-          <Panel>
-            <InputText title="Заголовок" />
-          </Panel>
-
           <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
             <Scroll>
               <CellGrid className={styles.editor_image_container} size={200}>
@@ -41,14 +34,9 @@ const EditorExample: FC<IProps> = () => (
         </div>
 
         <div className={styles.panel}>
-          <Filler>
-            <Padder>
+          <Panel>
             <Group>
-                <Card className={styles.feature_card}>Layout setup</Card>
-
-                <Card className={styles.feature_card}>Cover changer</Card>
-
-                <Card className={styles.feature_card}>Track</Card>
+              <InputText title="Заголовок" />
 
               <Tags
                 tags={[
@@ -59,12 +47,22 @@ const EditorExample: FC<IProps> = () => (
                   { title: '+ с музыкой', feature: 'black' },
                 ]}
               />
+            </Group>
+          </Panel>
+
+          <Panel stretchy>
+            <Group>
+              <Card className={styles.feature_card}>ОБОИ ПОСТА</Card>
+
+              <Card className={styles.feature_card}>МУЗЫКА</Card>
+
+              <Card className={styles.feature_card}>
+                <Icon icon="cell-single" />
+              </Card>
 
               <Filler />
-
             </Group>
-            </Padder>
-          </Filler>
+          </Panel>
 
           <Panel>
             <Button>Submit?</Button>

src/containers/examples/EditorExample/styles.scss

@@ -16,12 +16,10 @@
 .panel {
   background: $editor_panel_bg;
   flex: 1;
-  //border-radius: 0 $radius $radius 0;
   border-radius: $radius;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  //@include outer_shadow();
 }
 
 .editor {
@@ -49,8 +47,14 @@
 }
 
 .feature_card {
-  height: 100px;
-  background: darken($main_bg_color, 3%);
+  height: 120px;
+  background: darken($main_bg_color, 6%);
+  color: transparentize(white, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  font: $font_18_semibold;
 }
 
 .panel_main {

src/containers/examples/HorizontalExample/index.tsx

@@ -0,0 +1,79 @@
+import React, { FC } from 'react';
+import { Card } from "~/components/containers/Card";
+import * as styles from './styles.scss';
+import { Group } from "~/components/containers/Group";
+import { Padder } from "~/components/containers/Padder";
+import { CellGrid } from "~/components/containers/CellGrid";
+import { Panel } from "~/components/containers/Panel";
+import classNames = require("classnames");
+import { Scroll } from "~/components/containers/Scroll";
+import { Tags } from "~/components/node/Tags";
+import { Button } from "~/components/input/Button";
+import { InputText } from "~/components/input/InputText";
+import {Grid} from "~/components/containers/Grid";
+
+interface IProps {}
+
+const HorizontalExample: FC<IProps> = () => (
+  <Card className={styles.wrap} seamless>
+    <Group className={styles.group} seamless>
+      <div className={styles.editor}>
+        <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
+          <Scroll autoHeight autoHeightMax={500}>
+            <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} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+              <div className={styles.editor_image} />
+            </CellGrid>
+          </Scroll>
+        </Panel>
+        <Panel>
+          <InputText title="Заголовок" />
+        </Panel>
+      </div>
+
+      <div className={styles.panel}>
+        <Padder>
+          <Grid columns="1fr 1fr 1fr">
+            <Group>
+              <Card className={styles.feature_card}>Layout setup</Card>
+
+              <Card className={styles.feature_card}>Cover changer</Card>
+
+              <Card className={styles.feature_card}>Track</Card>
+            </Group>
+
+            <div>
+              <Tags
+                tags={[
+                  { title: 'Избранный', feature: 'red' },
+                  { title: 'Плейлист', feature: 'green' },
+                  { title: 'Просто' },
+                  { title: '+ фото', feature: 'black' },
+                  { title: '+ с музыкой', feature: 'black' },
+                ]}
+              />
+            </div>
+
+            <div>
+              <Button>Submit?</Button>
+            </div>
+          </Grid>
+        </Padder>
+      </div>
+    </Group>
+  </Card>
+);
+
+export { HorizontalExample };

src/containers/examples/HorizontalExample/styles.scss

@@ -0,0 +1,65 @@
+.wrap {
+  align-items: stretch;
+  justify-content: center;
+  display: flex;
+  background: $editor_bg;
+  //flex: 1;
+}
+
+.group {
+  display: flex;
+  align-items: stretch !important;
+  justify-content: stretch;
+  //flex: 1;
+}
+
+.panel {
+  background: $editor_panel_bg;
+  //flex: 1;
+  border-radius: $radius;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor {
+  //flex: 2;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.editor_panel {
+}
+
+.editor_image_panel {
+  // flex: 1;
+}
+
+.editor_image_container {
+  flex: 1;
+}
+
+.editor_image {
+  background: transparentize(white, 0.95);
+  padding-bottom: 100%;
+  border-radius: $radius;
+}
+
+.feature_card {
+  height: 100px;
+  background: darken($main_bg_color, 3%);
+}
+
+.panel_main {
+  flex: 1;
+  display: flex;
+}
+
+.close_icon {
+  height: 24px;
+  width: 24px;
+  background: transparentize(white, 0.95);
+  flex: 0 0 24px;
+  border-radius: $radius;
+}

src/sprites/Sprites.tsx

@@ -0,0 +1,11 @@
+import React, {FC} from 'react';
+
+const Sprites: FC<{}> = () => (
+  <svg width={0} height={0} viewBox="0 0 20 20">
+    <g id="cell-single">
+      <path d="M0 0L20 20L0 10Z" />
+    </g>
+  </svg>
+);
+
+export { Sprites };

src/styles/global.scss

@@ -8,12 +8,14 @@ body {
   background: darken($main_bg_color, 12%);
   min-height: 100vh;
   //background: $main_bg_color url("../sprites/dots.svg");
-  // background: url("http://vault48.org/pixmaps/texture.jpg");
+  //background: url("http://vault48.org/pixmaps/texture.jpg");
   //background: #111111;
   color: $main_text_color;
   font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: 16px;
+  fill: white;
+  stroke: white;
 
   &::before {
     content: '';
@@ -24,8 +26,8 @@ body {
     left: 0;
     z-index: -1;
     // background: url("../sprites/circles.svg");
-    // background: url("http://vault48.org/pixmaps/texture_alt.jpg");
-    background: linear-gradient(darken($main_bg_color, 15%), darken($main_bg_color, 12%));
+    //background: url("http://vault48.org/pixmaps/texture_alt.jpg");
+    //background: linear-gradient(darken($main_bg_color, 15%), darken($main_bg_color, 12%));
     pointer-events: none;
     //background-size: cover;
   }