submit bar

src/components/bars/PlayerBar/styles.scss

@@ -1,14 +1,8 @@
 .place {
   position: relative;
-  height: 64px;
+  height: $bar_height;
   flex: 0 1 500px;
   display: flex;
-
-  &:hover {
-    .seeker {
-      transform: translate(0, -64px);
-    }
-  }
 }
 
 .wrap {
@@ -22,7 +16,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 64px;
+  height: $bar_height;
   flex-direction: column;
   transform: translate(0, 0);
   z-index: 3;
@@ -30,18 +24,18 @@
 }
 
 .status {
-  flex: 0 0 64px;
+  flex: 0 0 $bar_height;
   display: flex;
   flex-direction: row;
   width: 100%;
   position: absolute;
   z-index: 1;
-  height: 64px;
+  height: $bar_height;
 }
 
 .playpause,
 .close {
-  flex: 0 0 48px;
+  flex: 0 0 $bar_height;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/bars/SubmitBar/index.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useCallback } from 'react';
+import { connect } from 'react-redux';
+import { Icon } from '~/components/input/Icon';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { DIALOGS } from '~/redux/modal/constants';
+
+import * as styles from './styles.scss';
+
+const mapStateToProps = null;
+const mapDispatchToProps = {
+  showDialog: MODAL_ACTIONS.modalShowDialog,
+};
+
+type IProps = typeof mapDispatchToProps & {};
+
+const SubmitBarUnconnected: FC<IProps> = ({ showDialog }) => {
+  const onOpenImageEditor = useCallback(() => showDialog(DIALOGS.EDITOR_IMAGE), [showDialog]);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.panel}>
+        <div onClick={onOpenImageEditor}>
+          <Icon icon="image" />
+        </div>
+      </div>
+
+      <div className={styles.button}>
+        <Icon icon="plus" />
+      </div>
+    </div>
+  );
+};
+
+const SubmitBar = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SubmitBarUnconnected);
+
+export { SubmitBar };

src/components/bars/SubmitBar/styles.scss

@@ -0,0 +1,65 @@
+.wrap {
+  position: absolute;
+  right: -($bar_height + $gap);
+
+  &:hover {
+    .panel {
+      transform: translate(0, 0);
+    }
+  }
+
+  @include tablet {
+    position: relative;
+    right: 0;
+    margin-left: $gap;
+  }
+}
+
+.button {
+  background: $red_gradient;
+  width: $bar_height;
+  height: $bar_height;
+  border-radius: $bar_height / 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius $radius 0 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.panel {
+  background: lighten($content_bg, 4%);
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  padding-bottom: $bar_height;
+  border-radius: $radius $radius 0 0;
+  transform: translate(0, 100%);
+  transition: transform 250ms;
+
+  div {
+    @include outer_shadow;
+    height: $bar_height;
+    width: $bar_height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    svg {
+      width: 32px;
+      height: 32px;
+    }
+
+    &:first-child {
+      border-radius: $radius $radius 0 0;
+    }
+  }
+}

src/components/main/Header/index.tsx

@@ -12,9 +12,7 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { DIALOGS } from '~/redux/modal/constants';
 import { pick } from 'ramda';
 import { Icon } from '~/components/input/Icon';
-import { url } from 'inspector';
 import { getURL } from '~/utils/dom';
-import path from 'ramda/es/path';
 
 const mapStateToProps = state => ({
   user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
@@ -29,7 +27,6 @@ type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
 
 const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, showDialog }) => {
   const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
-  const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
   return (
     <div className={style.container}>
@@ -38,7 +35,6 @@ const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, sho
       <Filler />
 
       <div className={style.plugs}>
-        <div onClick={onOpenEditor}>editor</div>
         <Link to="/">flow</Link>
       </div>
 

src/containers/main/BottomContainer/index.tsx

@@ -1,15 +1,24 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { PlayerBar } from '~/components/bars/PlayerBar';
+import { SubmitBar } from '~/components/bars/SubmitBar';
+import { selectUser } from '~/redux/auth/selectors';
+import pick from 'ramda/es/pick';
+import { connect } from 'react-redux';
 
-interface IProps {}
+const mapStateToProps = state => pick(['is_user'], selectUser(state));
 
-const BottomContainer: FC<IProps> = ({}) => (
+type IProps = ReturnType<typeof mapStateToProps> & {};
+
+const BottomContainerUnconnected: FC<IProps> = ({ is_user }) => (
   <div className={styles.wrap}>
     <div className={styles.content}>
       <PlayerBar />
+
+      {is_user && <SubmitBar />}
     </div>
   </div>
 );
 
+const BottomContainer = connect(mapStateToProps)(BottomContainerUnconnected);
 export { BottomContainer };

src/containers/main/BottomContainer/styles.scss

@@ -4,7 +4,7 @@
   bottom: 0;
   pointer-events: none;
   touch-action: none;
-  height: 64px;
+  height: $bar_height;
   display: flex;
   z-index: 10;
   width: 100%;
@@ -18,7 +18,7 @@
 .content {
   position: relative;
   flex: 0 1 $content_width;
-  height: 48px;
+  height: $bar_height;
   display: flex;
   align-items: center;
   justify-content: flex-end;

src/containers/main/MainLayout/styles.scss

@@ -6,6 +6,10 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
+
+  @include tablet {
+    padding: 0;
+  }
 }
 
 .content {

src/redux/modal/constants.ts

@@ -1,5 +1,4 @@
 import { ValueOf } from '~/redux/types';
-import { HorizontalExample } from '~/containers/examples/HorizontalExample';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
 import { LoginDialog } from '~/containers/dialogs/LoginDialog';
 
@@ -10,12 +9,12 @@ export const MODAL_ACTIONS = {
 };
 
 export const DIALOGS = {
-  EDITOR: 'EDITOR',
+  EDITOR_IMAGE: 'EDITOR_IMAGE',
   LOGIN: 'LOGIN',
 };
 
 export const DIALOG_CONTENT = {
-  [DIALOGS.EDITOR]: EditorDialog,
+  [DIALOGS.EDITOR_IMAGE]: EditorDialog,
   [DIALOGS.LOGIN]: LoginDialog,
 };
 

src/redux/modal/reducer.ts

@@ -10,7 +10,7 @@ export interface IModalState {
 
 const INITIAL_STATE: IModalState = {
   is_shown: false,
-  dialog: DIALOGS.EDITOR,
+  dialog: null,
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

src/styles/variables.scss

@@ -6,6 +6,7 @@ $content_width: $cell * 4 + $grid_line * 3;
 $gap: 10px;
 $spc: $gap * 2;
 $comment_height: 72px;
+$bar_height: 64px;
 
 $radius: 8px;
 $cell_radius: $radius;
@@ -67,7 +68,7 @@ $input_shadow_error: inset $red 0 0 0 1px;
 $input_shadow_filled: $input_shadow;
 
 @mixin outer_shadow() {
-  box-shadow: inset transparentize(white, 0.95) 0 1px, transparentize(black, 0.8) 0 3px;
+  box-shadow: inset transparentize(white, 0.95) 1px 1px, transparentize(black, 0.8) -1px -1px;
 }
 
 @mixin inner_shadow() {