From 8094328e54327b33065c4a461e8f902a31eac990 Mon Sep 17 00:00:00 2001 From: cevcode Date: Mon, 22 Apr 2019 17:00:41 +0200 Subject: [PATCH 1/6] add profile button components --- src/modules/Home/index.ts | 7 ----- src/modules/Home/index.tsx | 13 +++++++++ src/routes.tsx | 2 +- src/theme/global.scss | 32 +++++++++++++++++++++ src/ui/Description/index.tsx | 17 ++++++++---- src/ui/Description/style.scss | 2 ++ src/ui/Title/style.scss | 24 ++-------------- src/ui/enums.ts | 4 ++- src/widgets/Auth/index.tsx | 1 - src/widgets/Header/index.tsx | 38 +++++++++++++++++++------ src/widgets/Header/style.scss | 5 ++++ src/widgets/Profile/helpers.tsx | 4 +++ src/widgets/Profile/index.tsx | 34 +++++++++++++++++++++++ src/widgets/Profile/style.scss | 9 ++++++ yarn.lock | 49 ++++++++++++++++++++++++++++++++- 15 files changed, 193 insertions(+), 48 deletions(-) delete mode 100644 src/modules/Home/index.ts create mode 100644 src/modules/Home/index.tsx create mode 100644 src/widgets/Profile/helpers.tsx create mode 100644 src/widgets/Profile/index.tsx create mode 100644 src/widgets/Profile/style.scss diff --git a/src/modules/Home/index.ts b/src/modules/Home/index.ts deleted file mode 100644 index c3397e7..0000000 --- a/src/modules/Home/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from "react"; - -function Home() { - return "home"; -} - -export { Home }; diff --git a/src/modules/Home/index.tsx b/src/modules/Home/index.tsx new file mode 100644 index 0000000..ab6945b --- /dev/null +++ b/src/modules/Home/index.tsx @@ -0,0 +1,13 @@ +import * as React from "react"; +import { Header } from 'widgets/Header'; +import { Column, Row } from 'ui/Layout'; + +function Home() { + return ( + +
+ + ) +} + +export { Home }; diff --git a/src/routes.tsx b/src/routes.tsx index 946e51b..c4815ba 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,4 +1,4 @@ -import { Home } from "./modules/Home"; +import { Home } from "./modules/Home/index"; import { AuthPage } from "./modules/AuthPage"; export default [ diff --git a/src/theme/global.scss b/src/theme/global.scss index 1cad033..a5eb294 100644 --- a/src/theme/global.scss +++ b/src/theme/global.scss @@ -15,6 +15,10 @@ $brown: #484848; @mixin base-sizes() { &__size { + &_xl { + width: 180px; + height: 42px; + } &_l { width: 130px; } @@ -28,6 +32,34 @@ $brown: #484848; } } +@mixin base-colors() { + &__color { + &_white { + color: $white; + } + &_orange { + color: $orange; + } + &_black { + color: $black; + } + } +} + +@mixin base-font-sizes() { + &__size { + &_l { + font-size: 48px; + } + &_m { + font-size: 36px; + } + &_s { + font-size: 16px; + } + } +} + @mixin placeholder-color($color) { &::-webkit-input-placeholder { color: $color; diff --git a/src/ui/Description/index.tsx b/src/ui/Description/index.tsx index 9fd3baa..ecad211 100644 --- a/src/ui/Description/index.tsx +++ b/src/ui/Description/index.tsx @@ -1,25 +1,28 @@ import cx from "classnames"; import * as React from "react"; -import { AlignType, MarginType } from "../enums"; - -import "./style.scss"; +import {AlignType, ISize, MarginType} from "../enums"; +import { Color } from "csstype"; import * as style from "./style.scss"; export interface IDescription { + size?: ISize; children: string; - className: string; - align: AlignType; + className?: string; + color?: Color; + align?: AlignType; margin: MarginType; } // tslint:disable-next-line:variable-name -const Description: React.FC = ({ children, align, className, margin }) => { +const Description: React.FC = ({ children, align, className, margin, size, color }) => { return (

@@ -33,6 +36,8 @@ Description.defaultProps = { className: "", align: AlignType.left, margin: MarginType.none, + size:ISize.s, + color: "black", }; export { Description }; diff --git a/src/ui/Description/style.scss b/src/ui/Description/style.scss index 1c171d6..55f50df 100644 --- a/src/ui/Description/style.scss +++ b/src/ui/Description/style.scss @@ -4,4 +4,6 @@ @include main-font(500); @include base-aligns(); @include base-margins(); + @include base-font-sizes(); + @include base-colors(); } diff --git a/src/ui/Title/style.scss b/src/ui/Title/style.scss index edb8c34..61bdcff 100644 --- a/src/ui/Title/style.scss +++ b/src/ui/Title/style.scss @@ -2,30 +2,10 @@ @include base-aligns(); @include base-margins(); @include base-weight(); + @include base-font-sizes(); + @include base-colors(); color: $black; &__uppercase { text-transform: uppercase; } - &__size { - &_l { - font-size: 48px; - } - &_m { - font-size: 36px; - } - &_s { - font-size: 18px; - } - } - &__color { - &_white { - color: $white; - } - &_orange { - color: $orange; - } - &_black { - color: $black; - } - } } diff --git a/src/ui/enums.ts b/src/ui/enums.ts index 2d102c5..51b5916 100644 --- a/src/ui/enums.ts +++ b/src/ui/enums.ts @@ -26,6 +26,7 @@ export enum ISize { s = "s", m = "m", l = "l", + xl = "xl", full = "full" } @@ -39,5 +40,6 @@ export type ButtonType = "submit" | "reset" | "button"; export enum Colors { "white", - "orange" + "orange", + "black", } diff --git a/src/widgets/Auth/index.tsx b/src/widgets/Auth/index.tsx index 58d36b0..d9f67aa 100644 --- a/src/widgets/Auth/index.tsx +++ b/src/widgets/Auth/index.tsx @@ -4,7 +4,6 @@ import { Input } from "widgets/fields"; import { Column } from "ui/Layout"; import { Button } from "ui/Button"; import { Title } from "ui/Title"; -import { Description } from "ui/Description"; import { getValidationForField } from "./validations"; import {default as config} from "./config.json"; diff --git a/src/widgets/Header/index.tsx b/src/widgets/Header/index.tsx index cacc340..d6fc242 100644 --- a/src/widgets/Header/index.tsx +++ b/src/widgets/Header/index.tsx @@ -1,29 +1,49 @@ import * as React from "react"; import { Title } from "ui/Title"; -import { Row } from "ui/Layout"; +import { Button } from "ui/Button"; +import { Row, Column } from "ui/Layout"; +import { Profile } from 'widgets/Profile'; import { Link } from "react-router-dom"; +import { ISize } from "ui/enums"; import "statics/logo.svg"; import { default as logo } from "statics/logo.svg"; -import "./style.scss"; import * as style from "./style.scss"; // tslint:disable-next-line:no-empty-interface export interface IHeader { + authorized?: boolean; +} +function renderLogo(title) { + return ( + + logo + {title} + + ) } // tslint:disable-next-line:variable-name -const Header: React.FC = () => { +const Header: React.FC = ({ authorized = false }) => { + if(!authorized) { + return ( + + + {renderLogo('WERP')} + + + ); + } return ( - - - logo - - WERP + + + - ); + ) }; export { Header }; diff --git a/src/widgets/Header/style.scss b/src/widgets/Header/style.scss index 711c17c..3c4c58e 100644 --- a/src/widgets/Header/style.scss +++ b/src/widgets/Header/style.scss @@ -6,4 +6,9 @@ height: 34px; margin-right: 10px; } + + &__home { + height: 60px; + padding: 0; + } } \ No newline at end of file diff --git a/src/widgets/Profile/helpers.tsx b/src/widgets/Profile/helpers.tsx new file mode 100644 index 0000000..88c7723 --- /dev/null +++ b/src/widgets/Profile/helpers.tsx @@ -0,0 +1,4 @@ +export function getFirstLetter(str) { + console.log('st', str); + return str.charAt(0).toUpperCase(); +} \ No newline at end of file diff --git a/src/widgets/Profile/index.tsx b/src/widgets/Profile/index.tsx new file mode 100644 index 0000000..4426643 --- /dev/null +++ b/src/widgets/Profile/index.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import cx from 'classnames'; +import { Row, Column } from 'ui/Layout'; +import { Description } from 'ui/Description'; +import { getFirstLetter } from './helpers'; +import { MarginType, ISize, Colors } from "ui/enums"; +import * as style from './style.scss'; + +export interface IProfile { + size?: ISize; + firstName?: string; + lastName?: string; +} + +const ProfileImage: React.FC = ({ firstName, lastName, size }) => { + const text = `${getFirstLetter(firstName)}${getFirstLetter(lastName)}`; + return ( + + {text} + + ) +}; + +const Profile: React.FC = ({ firstName = 'Ivan', lastName = 'Ivanov', size }) => { + const text = `${firstName} ${lastName}`; + return ( + + + {text} + + ) +}; + +export { Profile }; \ No newline at end of file diff --git a/src/widgets/Profile/style.scss b/src/widgets/Profile/style.scss new file mode 100644 index 0000000..af94409 --- /dev/null +++ b/src/widgets/Profile/style.scss @@ -0,0 +1,9 @@ +.profile { + &__image { + width: 30px; + height: 30px; + border-radius: 50px; + background-color: $orange; + @include base-font-sizes; + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index c261690..6b82c24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1069,16 +1069,53 @@ "@svgr/plugin-svgo" "^4.0.3" loader-utils "^1.1.0" +"@types/jest-diff@*": + version "20.0.1" + resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89" + integrity sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA== + +"@types/jest@^24.0.11": + version "24.0.11" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.11.tgz#1f099bea332c228ea6505a88159bfa86a5858340" + integrity sha512-2kLuPC5FDnWIDvaJBzsGTBQaBbnDweznicvK7UGYzlIJP4RJR2a4A/ByLUXEyEgag6jz8eHdlWExGDtH3EYUXQ== + dependencies: + "@types/jest-diff" "*" + "@types/node@*": version "11.10.5" resolved "https://registry.yarnpkg.com/@types/node/-/node-11.10.5.tgz#fbaca34086bdc118011e1f05c47688d432f2d571" integrity sha512-DuIRlQbX4K+d5I+GMnv+UfnGh+ist0RdlvOp+JZ7ePJ6KQONCFQv/gKYSU1ZzbVdFSUCKZOltjmpFAGGv5MdYA== +"@types/node@^11.13.6": + version "11.13.6" + resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.6.tgz#37ec75690830acb0d74ce3c6c43caab787081e85" + integrity sha512-Xoo/EBzEe8HxTSwaZNLZjaW6M6tA/+GmD3/DZ6uo8qSaolE/9Oarko0oV1fVfrLqOz0tx0nXJB4rdD5c+vixLw== + +"@types/prop-types@*": + version "15.7.1" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6" + integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg== + "@types/q@^1.5.1": version "1.5.1" resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18" integrity sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA== +"@types/react-dom@^16.8.4": + version "16.8.4" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.4.tgz#7fb7ba368857c7aa0f4e4511c4710ca2c5a12a88" + integrity sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA== + dependencies: + "@types/react" "*" + +"@types/react@*", "@types/react@^16.8.14": + version "16.8.14" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.14.tgz#b561bfabeb8f60d12e6d4766367e7a9ae927aa18" + integrity sha512-26tFVJ1omGmzIdFTFmnC5zhz1GTaqCjxgUxV4KzWvsybF42P7/j4RBn6UeO3KbHPXqKWZszMXMoI65xIWm954A== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@types/tapable@1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.2.tgz#e13182e1b69871a422d7863e11a4a6f5b814a4bd" @@ -3113,6 +3150,11 @@ cssstyle@^1.0.0: dependencies: cssom "0.3.x" +csstype@^2.2.0: + version "2.6.4" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f" + integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -8879,7 +8921,7 @@ react-onclickoutside@^6.8.0: resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.8.0.tgz#9f91b5b3ed59f4d9e43fd71620dc200773a4d569" integrity sha512-5Q4Rn7QLEoh7WIe66KFvYIpWJ49GeHoygP1/EtJyZjXKgrWH19Tf0Ty3lWyQzrEEDyLOwUvvmBFSE3dcDdvagA== -react-router-dom@^4.4.0: +react-router-dom@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073" integrity sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ== @@ -10450,6 +10492,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^3.4.4: + version "3.4.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.4.tgz#aac4a08abecab8091a75f10842ffa0631818f785" + integrity sha512-xt5RsIRCEaf6+j9AyOBgvVuAec0i92rgCaS3S+UVf5Z/vF2Hvtsw08wtUTJqp4djwznoAgjSxeCcU4r+CcDBJA== + ua-parser-js@^0.7.18: version "0.7.19" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b" From a322c6a63ac3518305c65f8cc17144f8402c4b93 Mon Sep 17 00:00:00 2001 From: cevcode Date: Tue, 23 Apr 2019 10:35:12 +0200 Subject: [PATCH 2/6] add icons pack && add icons component --- package.json | 1 + src/theme/global.scss | 17 ++++++++++++ src/ui/Button/index.tsx | 3 ++- src/ui/Icon/index.tsx | 26 +++++++++++++++++++ src/ui/enums.ts | 7 +++++ src/widgets/Header/index.tsx | 6 +++-- src/widgets/Header/style.scss | 2 +- yarn.lock | 49 +++++++++++++++++++++++++++++++++-- 8 files changed, 105 insertions(+), 6 deletions(-) create mode 100644 src/ui/Icon/index.tsx diff --git a/package.json b/package.json index 9ee8572..39ccbd5 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "jest-resolve": "23.6.0", "jest-watch-typeahead": "^0.2.1", "lint-staged": "^8.1.5", + "material-icons-react": "^1.0.4", "mini-css-extract-plugin": "0.5.0", "mobx": "^5.9.4", "mobx-react": "^5.4.3", diff --git a/src/theme/global.scss b/src/theme/global.scss index a5eb294..712ec46 100644 --- a/src/theme/global.scss +++ b/src/theme/global.scss @@ -205,4 +205,21 @@ $screenSizes: ( @include screen-lt(mobile-small) { background-position: 51% 0; } +} + +.lds-ripple { + display: inline-block; + position: relative; + width: 64px; + height: 64px; + div { + position: absolute; + border: 4px solid #921515; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; + &:nth-child(2) { + animation-delay: -0.5s; + } + } } \ No newline at end of file diff --git a/src/ui/Button/index.tsx b/src/ui/Button/index.tsx index 6e47de1..e1a27f5 100644 --- a/src/ui/Button/index.tsx +++ b/src/ui/Button/index.tsx @@ -13,10 +13,11 @@ export interface IButton { margin?: MarginType; disabled?: boolean; type?: ButtonType; + icon?: string; } // tslint:disable-next-line:variable-name -const Button: React.FC = ({ onClick, className, children, size, disabled, style, type, margin }) => { +const Button: React.FC = ({ onClick, className, children, size, disabled, style, type, margin, icon }) => { return ( + ) +} + // tslint:disable-next-line:variable-name const Header: React.FC = ({ authorized = false }) => { if(!authorized) { @@ -41,9 +52,19 @@ const Header: React.FC = ({ authorized = false }) => { return ( - + + + {config.map(item => { + const { icon, name } = item; + console.log(icon); + return + + })} + + + ) }; From e064047715e4f69616355b967795063b244e83c8 Mon Sep 17 00:00:00 2001 From: cevcode Date: Tue, 23 Apr 2019 11:47:36 +0200 Subject: [PATCH 4/6] finished header --- src/theme/global.scss | 4 +++- src/ui/Button/style.scss | 2 +- src/ui/enums.ts | 1 + src/widgets/Header/index.tsx | 2 +- 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/theme/global.scss b/src/theme/global.scss index 135d1df..657eecf 100644 --- a/src/theme/global.scss +++ b/src/theme/global.scss @@ -15,9 +15,11 @@ $brown: #484848; @mixin base-sizes() { &__size { + &_xxl { + width: 220px; + } &_xl { width: 180px; - height: 42px; } &_l { width: 130px; diff --git a/src/ui/Button/style.scss b/src/ui/Button/style.scss index 9457255..2f0b750 100644 --- a/src/ui/Button/style.scss +++ b/src/ui/Button/style.scss @@ -35,7 +35,7 @@ $btn-fill: transparent, $white, #ff510047, $white, transparent, $white, $grey, $ @include base-sizes(); @include base-margins(); @include base-paddings(); - height: 27px; + height: 42px; cursor: pointer; font-size: 12px; border-radius: 5px; diff --git a/src/ui/enums.ts b/src/ui/enums.ts index 311505a..68ef33c 100644 --- a/src/ui/enums.ts +++ b/src/ui/enums.ts @@ -35,6 +35,7 @@ export enum ISize { m = "m", l = "l", xl = "xl", + xxl = "xxl", full = "full", auto = "auto", } diff --git a/src/widgets/Header/index.tsx b/src/widgets/Header/index.tsx index 19e6a98..96857ad 100644 --- a/src/widgets/Header/index.tsx +++ b/src/widgets/Header/index.tsx @@ -61,7 +61,7 @@ const Header: React.FC = ({ authorized = false }) => { })} - From 88a8d4536511130812b8477347a6eaad20a47205 Mon Sep 17 00:00:00 2001 From: cevcode Date: Tue, 23 Apr 2019 12:12:04 +0200 Subject: [PATCH 5/6] fixed header styles --- src/widgets/Header/index.tsx | 26 ++++++++++++++++++-------- src/widgets/Header/style.scss | 21 ++++++++++++++++++--- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/widgets/Header/index.tsx b/src/widgets/Header/index.tsx index 96857ad..9c9cf05 100644 --- a/src/widgets/Header/index.tsx +++ b/src/widgets/Header/index.tsx @@ -1,11 +1,12 @@ import * as React from "react"; +import cx from 'classnames'; import { Title } from "ui/Title"; import { Button } from "ui/Button"; import { Icon } from "ui/Icon"; import { Row, Column } from "ui/Layout"; import { Profile } from 'widgets/Profile'; import { Link } from "react-router-dom"; -import {Colors, ISize, ISizeIcon, PaddingType, MarginType } from "ui/enums"; +import {ISize, ISizeIcon, PaddingType, MarginType } from "ui/enums"; import "statics/logo.svg"; import { default as logo } from "statics/logo.svg"; @@ -50,10 +51,17 @@ const Header: React.FC = ({ authorized = false }) => { ); } return ( - - - - + + + + + + + search... + + + + {config.map(item => { const { icon, name } = item; console.log(icon); @@ -61,9 +69,11 @@ const Header: React.FC = ({ authorized = false }) => { })} - + + + ) diff --git a/src/widgets/Header/style.scss b/src/widgets/Header/style.scss index 9f9e78d..81508d5 100644 --- a/src/widgets/Header/style.scss +++ b/src/widgets/Header/style.scss @@ -7,8 +7,23 @@ margin-right: 10px; } - &__home { - height: 60px; - padding: 0 15px; + &__buttons { + > * { + width: 42px; + } } + + &__item { + border-left: 1px solid $grey; + border-right: 1px solid $grey; + padding: 10px 15px; + width: auto; + &:last-child { + border-left: 0; + } + } +} + +.search { + height: 42px; } \ No newline at end of file From df40802b78cbc8758b53bb1b886760ee0084d88c Mon Sep 17 00:00:00 2001 From: cevcode Date: Tue, 23 Apr 2019 12:40:13 +0200 Subject: [PATCH 6/6] rm console --- src/widgets/Header/index.tsx | 1 - src/widgets/Header/style.scss | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/widgets/Header/index.tsx b/src/widgets/Header/index.tsx index 9c9cf05..4583165 100644 --- a/src/widgets/Header/index.tsx +++ b/src/widgets/Header/index.tsx @@ -64,7 +64,6 @@ const Header: React.FC = ({ authorized = false }) => { {config.map(item => { const { icon, name } = item; - console.log(icon); return })} diff --git a/src/widgets/Header/style.scss b/src/widgets/Header/style.scss index 81508d5..29c8c4c 100644 --- a/src/widgets/Header/style.scss +++ b/src/widgets/Header/style.scss @@ -10,6 +10,10 @@ &__buttons { > * { width: 42px; + + &:last-child { + margin-right: 0; + } } }