fixed typos

2025-04-25 12:56:41 +07:00 · 2019-08-02 18:43:24 +07:00 · 2019-08-02 18:43:24 +07:00 · 840af25df4
commit 840af25df4
parent 6066c91060
17 changed files with 438 additions and 125 deletions
--- a/src/components/flow/TestGrid/index.tsx
+++ b/src/components/flow/TestGrid/index.tsx
@ -1,38 +1,45 @@
 import * as React from 'react';
-import { Cell } from "~/components/flow/Cell";
+import { Cell } from '~/components/flow/Cell';
 import { range } from 'ramda';

 import * as styles from './styles.scss';

 export const TestGrid = () => (
-  <div className={styles.grid_test}>
-    <div style={{
-      gridRow: '1 / 2',
-      gridColumn: '1 / -1',
-      background: 'green',
-    }}
+  <div>
+    <div
+      style={{
+        // gridRow: "1 / 2",
+        // gridColumn: "1 / -1",
+        background: '#222222',
+        borderRadius: 6,
+        height: 300,
+        marginBottom: 4,
+        display: 'flex',
+      }}
    >
      HERO
    </div>

-    <div style={{
-      gridRow: '2 / 4',
-      gridColumn: '-2 / -1',
-      background: 'blue',
-    }}
-    >
-      STAMP
-    </div>
+    <div className={styles.grid_test}>
+      <div
+        style={{
+          gridRow: '2 / 4',
+          gridColumn: '-2 / -1',
+          background: '#090909',
+          borderRadius: 4,
+        }}
+      >
+        STAMP
+      </div>

-    {
-      range(1,20).map(el => (
+      {range(1, 20).map(el => (
        <Cell
          width={Math.floor(Math.random() * 3)}
          height={Math.floor(Math.random() * 3)}
          title={`Cell ${el}`}
          key={el}
        />
-      ))
-    }
+      ))}
+    </div>
  </div>
 );
--- a/src/containers/dialogs/ExampleDialog/index.tsx
+++ b/src/containers/dialogs/ExampleDialog/index.tsx
@ -1,12 +1,12 @@
-import React, { FC } from "react";
-import { ScrollDialog } from "../ScrollDialog";
-import { IDialogProps } from "~/redux/modal/constants";
-import { useCloseOnEscape } from "~/utils/hooks";
-import { Group } from "~/components/containers/Group";
-import { InputText } from "~/components/input/InputText";
-import { Button } from "../../../components/input/Button/index";
-import { Padder } from "~/components/containers/Padder";
-import * as styles from "~/containers/examples/HorizontalExample/styles.scss";
+import React, { FC } from 'react';
+import { ScrollDialog } from '../ScrollDialog';
+import { IDialogProps } from '~/redux/modal/constants';
+import { useCloseOnEscape } from '~/utils/hooks';
+import { Group } from '~/components/containers/Group';
+import { InputText } from '~/components/input/InputText';
+import { Button } from '../../../components/input/Button/index';
+import { Padder } from '~/components/containers/Padder';
+import * as styles from '~/containers/examples/HorizontalExample/styles.scss';

 type IProps = IDialogProps & {};

--- a/src/containers/dialogs/LoginDialog/index.tsx
+++ b/src/containers/dialogs/LoginDialog/index.tsx
@ -1,17 +1,17 @@
-import React, { FC, useState } from "react";
-import { ScrollDialog } from "../ScrollDialog";
-import { IDialogProps } from "~/redux/modal/constants";
-import { useCloseOnEscape } from "~/utils/hooks";
-import { Group } from "~/components/containers/Group";
-import { InputText } from "~/components/input/InputText";
-import { Button } from "../../../components/input/Button/index";
-import { Padder } from "~/components/containers/Padder";
-import * as styles from "./styles.scss";
+import React, { FC, useState } from 'react';
+import { ScrollDialog } from '../ScrollDialog';
+import { IDialogProps } from '~/redux/modal/constants';
+import { useCloseOnEscape } from '~/utils/hooks';
+import { Group } from '~/components/containers/Group';
+import { InputText } from '~/components/input/InputText';
+import { Button } from '../../../components/input/Button/index';
+import { Padder } from '~/components/containers/Padder';
+import * as styles from './styles.scss';
 type IProps = IDialogProps & {};

 const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
-  const [username, setUserName] = useState("");
-  const [password, setPassword] = useState("");
+  const [username, setUserName] = useState('');
+  const [password, setPassword] = useState('');

  const title = <div>title</div>;

@ -30,6 +30,11 @@ const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
      <Padder>
        <div className={styles.wrap}>
          <Group>
+            <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
+
+            <div />
+            <div />
+
            <InputText title="Логин" handler={setUserName} value={username} />
            <InputText title="Пароль" handler={setPassword} value={password} />
          </Group>
--- a/src/containers/dialogs/LoginDialog/styles.scss
+++ b/src/containers/dialogs/LoginDialog/styles.scss
@ -1,6 +1,8 @@
 .wrap {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  justify-content: center;
  min-height: 400px;
+  padding: 20px;
+  margin: auto;
 }
--- a/src/containers/dialogs/Modal/index.tsx
+++ b/src/containers/dialogs/Modal/index.tsx
@ -1,16 +1,16 @@
-import React, { Attributes, FC, useCallback } from "react";
-import * as styles from "./styles.scss";
-import { IState } from "~/redux/store";
-import * as ACTIONS from "~/redux/modal/actions";
-import { connect } from "react-redux";
-import { DIALOG_CONTENT, IDialogProps } from "~/redux/modal/constants";
-import ReactDOM from "react-dom";
+import React, { Attributes, FC, useCallback } from 'react';
+import * as styles from './styles.scss';
+import { IState } from '~/redux/store';
+import * as ACTIONS from '~/redux/modal/actions';
+import { connect } from 'react-redux';
+import { DIALOG_CONTENT, IDialogProps } from '~/redux/modal/constants';
+import ReactDOM from 'react-dom';

 const mapStateToProps = ({ modal }: IState) => ({ ...modal });
 const mapDispatchToProps = {
  modalSetShown: ACTIONS.modalSetShown,
  modalSetDialog: ACTIONS.modalSetDialog,
-  modalShowDialog: ACTIONS.modalShowDialog
+  modalShowDialog: ACTIONS.modalShowDialog,
 };

 type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
@ -20,7 +20,7 @@ const ModalUnconnected: FC<IProps> = ({
  modalSetDialog,
  modalShowDialog,
  is_shown,
-  dialog
+  dialog,
 }) => {
  const onRequestClose = useCallback(() => {
    modalSetShown(false);
@ -37,19 +37,19 @@ const ModalUnconnected: FC<IProps> = ({
          <div className={styles.content_padder}>
            {React.createElement(DIALOG_CONTENT[dialog], {
              onRequestClose,
-              onDialogChange: modalShowDialog
+              onDialogChange: modalShowDialog,
            } as IDialogProps)}
          </div>
        </div>
      </div>
    </div>,
-    document.body
+    document.body,
  );
 };

 const Modal = connect(
  mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(ModalUnconnected);

 export { ModalUnconnected, Modal };
--- a/src/containers/dialogs/ScrollDialog/index.tsx
+++ b/src/containers/dialogs/ScrollDialog/index.tsx
@ -21,7 +21,6 @@ const ScrollDialog: FC<IProps> = ({
  children,
  title,
  buttons,
-  size = "medium",
  width = 800,
  top_sticky,
  top_sticky_offset,
@ -61,7 +60,7 @@ const ScrollDialog: FC<IProps> = ({
      <div
        className={classNames(styles.content, {
          has_buttons: !!buttons,
-          has_title: !!title
+          has_title: true
        })}
        style={{ flexBasis: width }}
      >
@ -84,6 +83,14 @@ const ScrollDialog: FC<IProps> = ({
          </div>
        )}

+        {!title && (
+          <div className={styles.top}>
+            <div className={styles.wrap} style={{ flexBasis: width }}>
+              <div className={styles.top_cap} />
+            </div>
+          </div>
+        )}
+
        {!!buttons && (
          <div className={styles.bottom}>
            <div className={styles.wrap} style={{ flexBasis: width }}>
--- a/src/containers/dialogs/ScrollDialog/styles.scss
+++ b/src/containers/dialogs/ScrollDialog/styles.scss
@ -50,6 +50,13 @@
  z-index: 2;
 }

+.top {
+  .wrap {
+    display: flex;
+    align-items: flex-end;
+  }
+}
+
 .bottom {
  bottom: 15px;
  top: auto;
@ -94,5 +101,22 @@

 .children {
  background: $content_bg;
-  radius: $radius;
+  border-radius: $radius;
+}
+
+.top_cap {
+  height: $radius;
+  background: $content_bg;
+  border-radius: $radius $radius 0 0;
+  flex: 1;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: " ";
+    width: 100%;
+    height: $gap;
+    background: linear-gradient($content_bg, transparentize($content_bg, 1));
+    bottom: -$gap;
+  }
 }
--- a/src/containers/examples/HorizontalExample/index.tsx
+++ b/src/containers/examples/HorizontalExample/index.tsx
@ -1,12 +1,12 @@
-import React, { FC } from "react";
-import { Card } from "~/components/containers/Card";
-import * as styles from "./styles.scss";
-import {Padder} from "~/components/containers/Padder";
-import {Group} from "~/components/containers/Group";
-import {InputText} from "~/components/input/InputText";
-import {Button} from "~/components/input/Button";
-import {Filler} from "~/components/containers/Filler";
-import {Icon} from "~/components/input/Icon";
+import React, { FC } from 'react';
+import { Card } from '~/components/containers/Card';
+import * as styles from './styles.scss';
+import { Padder } from '~/components/containers/Padder';
+import { Group } from '~/components/containers/Group';
+import { InputText } from '~/components/input/InputText';
+import { Button } from '~/components/input/Button';
+import { Filler } from '~/components/containers/Filler';
+import { Icon } from '~/components/input/Icon';

 interface IProps {}

--- a/src/redux/modal/constants.ts
+++ b/src/redux/modal/constants.ts
@ -1,22 +1,22 @@
-import { ValueOf } from "~/redux/types";
-import { HorizontalExample } from "~/containers/examples/HorizontalExample";
-import { ExampleDialog } from "~/containers/dialogs/ExampleDialog";
-import { LoginDialog } from "~/containers/dialogs/LoginDialog";
+import { ValueOf } from '~/redux/types';
+import { HorizontalExample } from '~/containers/examples/HorizontalExample';
+import { ExampleDialog } from '~/containers/dialogs/ExampleDialog';
+import { LoginDialog } from '~/containers/dialogs/LoginDialog';

 export const MODAL_ACTIONS = {
-  SET_SHOWN: "MODAL.SET_SHOWN",
-  SET_DIALOG: "SET_DIALOG",
-  SHOW_DIALOG: "SHOW_DIALOG"
+  SET_SHOWN: 'MODAL.SET_SHOWN',
+  SET_DIALOG: 'SET_DIALOG',
+  SHOW_DIALOG: 'SHOW_DIALOG',
 };

 export const DIALOGS = {
-  TEST: "TEST",
-  LOGIN: "LOGIN"
+  TEST: 'TEST',
+  LOGIN: 'LOGIN',
 };

 export const DIALOG_CONTENT = {
  [DIALOGS.TEST]: ExampleDialog,
-  [DIALOGS.LOGIN]: LoginDialog
+  [DIALOGS.LOGIN]: LoginDialog,
 };

 export interface IDialogProps {
--- a/src/redux/modal/reducer.ts
+++ b/src/redux/modal/reducer.ts
@ -1,7 +1,7 @@
-import { MODAL_HANDLERS } from "~/redux/modal/handlers";
-import { createReducer } from "~/utils/reducer";
-import { DIALOGS } from "~/redux/modal/constants";
-import { ValueOf } from "~/redux/types";
+import { MODAL_HANDLERS } from '~/redux/modal/handlers';
+import { createReducer } from '~/utils/reducer';
+import { DIALOGS } from '~/redux/modal/constants';
+import { ValueOf } from '~/redux/types';

 export interface IModalState {
  is_shown: boolean;
@ -10,7 +10,7 @@ export interface IModalState {

 const INITIAL_STATE: IModalState = {
  is_shown: true,
-  dialog: DIALOGS.LOGIN
+  dialog: DIALOGS.LOGIN,
 };

 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@ -1,10 +1,10 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from "react";
-import { DIALOGS } from "~/redux/modal/constants";
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DIALOGS } from '~/redux/modal/constants';

-export type ITag = {
+export interface ITag {
  title: string;
-  feature?: "red" | "blue" | "green" | "olive" | "black";
-};
+  feature?: 'red' | 'blue' | 'green' | 'olive' | 'black';
+}

 export type IInputTextProps = DetailedHTMLProps<
  InputHTMLAttributes<HTMLInputElement>,
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -9,14 +9,15 @@ body {
  min-height: 100vh;
  background: url("http://vault48.org/pixmaps/texture.jpg");
  color: $main_text_color;
-  font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  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: '';
+    content: "";
    position: absolute;
    height: 400px;
    width: 100%;
@ -43,9 +44,15 @@ body {
 :global(.spc) {
  height: $spc;

-  &:global(.double) { height: $spc * 2; }
-  &:global(.quadro) { height: $spc * 4; }
-  &:global(.sixty)  { height: $spc * 6; }
+  &:global(.double) {
+    height: $spc * 2;
+  }
+  &:global(.quadro) {
+    height: $spc * 4;
+  }
+  &:global(.sixty) {
+    height: $spc * 6;
+  }
 }

 :global(.padded) {
@ -62,7 +69,6 @@ body {
  // background: $content_bg_color;
 }

-
 :global(.head_container) {
  //background: $main_bg_color;
 }
@ -71,3 +77,6 @@ body {
  height: 40px;
 }

+:global(h2) {
+  font: $font_24_bold;
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@ -1,4 +1,4 @@
-@import 'colors';
+@import "colors";

 $cell: 256px;
 $content_width: 1100px;
@ -25,7 +25,9 @@ $medium: 500;
 $light: 300;
 $extra_light: 200;

-$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+  "Noto Color Emoji";

 $font_48_semibold: $semibold 48px $font;
 $font_24_bold: $bold 24px $font;
@ -54,7 +56,7 @@ $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0
 $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;
+$node_shadow: transparentize(black, 0.8) 1px 2px;

 $tag_height: 22px;

@ -63,18 +65,15 @@ $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) 0 1px, transparentize(black, 0.8) 0 3px;
 }

@mixin inner_shadow() {
-  box-shadow: inset transparentize(white, 0.95) 0 -1px,
-              inset transparentize(black, 0.5) 0 1px;
+  box-shadow: inset transparentize(white, 0.95) 0 -1px, inset transparentize(black, 0.5) 0 1px;
 }

@mixin input_shadow() {
-  box-shadow: inset transparentize(white, 0.92) 0 -1px,
-              inset transparentize(black, 0.8) 0 1px;
+  box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
 }

@mixin modal_mixin() {
@ -90,7 +89,7 @@ $input_shadow_filled: $input_shadow;
  position: $position;

  &::after {
-    content: ' ';
+    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@ -1,24 +1,24 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from 'react';
 export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
  const onEscape = useCallback(
    event => {
-      if (event.key !== "Escape") return;
+      if (event.key !== 'Escape') return;
      if (
        ignore_inputs &&
-        (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA")
+        (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
      )
        return;

      onRequestClose();
    },
-    [onRequestClose]
+    [onRequestClose],
  );

  useEffect(() => {
-    window.addEventListener("keyup", onEscape);
+    window.addEventListener('keyup', onEscape);

    return () => {
-      window.removeEventListener("keyup", onEscape);
+      window.removeEventListener('keyup', onEscape);
    };
  }, [onEscape]);
 };