Skip to content

K
kus-admin
Commit 170f7211 by Иван Кубота
Options

IF component

parents 0f6a11c7 830c27b8
Showing with 282 additions and 56 deletions
src/core/data/store/Store.js
...@@ -217,5 +217,12 @@ Store.OR = Store.AGGREGATE(function(values, length) { ...@@ -217,5 +217,12 @@ Store.OR = Store.AGGREGATE(function(values, length) {
} }
return result; return result;
}); });
Store.IF = function(cfg, children){
return function( update ){
if( 'condition' in cfg )
cfg.condition( function( cond ){
update( cond ? children : null );
} );
}
};
typeof module === 'object' && (module.exports = Store); typeof module === 'object' && (module.exports = Store);
\ No newline at end of file
src/global-styles/fonts.scss
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-Regular.woff2") format("woff2"), src: url("/fonts/SFProText-Regular.woff2") format("woff2"),
url("fonts/SFProText-Regular.woff") format("woff"); url("/fonts/SFProText-Regular.woff") format("woff");
} }
@font-face { @font-face {
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-RegularItalic.woff2") format("woff2"), src: url("/fonts/SFProText-RegularItalic.woff2") format("woff2"),
url("fonts/SFProText-RegularItalic.woff") format("woff"); url("/fonts/SFProText-RegularItalic.woff") format("woff");
} }
@font-face { @font-face {
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-Medium.woff2") format("woff2"), src: url("/fonts/SFProText-Medium.woff2") format("woff2"),
url("fonts/SFProText-Medium.woff") format("woff"); url("/fonts/SFProText-Medium.woff") format("woff");
} }
@font-face { @font-face {
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-MediumItalic.woff2") format("woff2"), src: url("/fonts/SFProText-MediumItalic.woff2") format("woff2"),
url("fonts/SFProText-MediumItalic.woff") format("woff"); url("/fonts/SFProText-MediumItalic.woff") format("woff");
} }
@font-face { @font-face {
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-Semibold.woff2") format("woff2"), src: url("/fonts/SFProText-Semibold.woff2") format("woff2"),
url("fonts/SFProText-Semibold.woff") format("woff"); url("/fonts/SFProText-Semibold.woff") format("woff");
} }
@font-face { @font-face {
...@@ -48,8 +48,8 @@ ...@@ -48,8 +48,8 @@
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-SemiboldItalic.woff2") format("woff2"), src: url("/fonts/SFProText-SemiboldItalic.woff2") format("woff2"),
url("fonts/SFProText-SemiboldItalic.woff") format("woff"); url("/fonts/SFProText-SemiboldItalic.woff") format("woff");
} }
@font-face { @font-face {
...@@ -57,8 +57,8 @@ ...@@ -57,8 +57,8 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-Bold.woff2") format("woff2"), src: url("/fonts/SFProText-Bold.woff2") format("woff2"),
url("fonts/SFProText-Bold.woff") format("woff"); url("/fonts/SFProText-Bold.woff") format("woff");
} }
@font-face { @font-face {
...@@ -66,6 +66,6 @@ ...@@ -66,6 +66,6 @@
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
src: url("fonts/SFProText-BoldItalic.woff2") format("woff2"), src: url("/fonts/SFProText-BoldItalic.woff2") format("woff2"),
url("fonts/SFProText-BoldItalic.woff") format("woff"); url("/fonts/SFProText-BoldItalic.woff") format("woff");
} }
src/index.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<title>Category mapper</title> <title>Category mapper</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale="/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="core/Path.js"></script> <script src="core/Path.js"></script>
<script src="core/Require.js"></script> <script src="core/Require.js"></script>
<script src="core/LivestReloading.js"></script> <script src="core/LivestReloading.js"></script>
......
src/svg/arr-back.svg 0 → 100644
<svg width="17" height="11" viewBox="0 0 17 11" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75667 10.6538C6.3956 11.0717 5.76411 11.1177 5.34621 10.7567L0.346207 6.43667C0.131602 6.25125 0.00582357 5.98343 0.000182138 5.69987C-0.00545977 5.41632 0.109567 5.14371 0.316626 4.9499L5.31663 0.2699C5.71984 -0.107509 6.35266 -0.0865889 6.73007 0.316626C7.10748 0.719839 7.08656 1.35266 6.68334 1.73007L2.49513 5.65024L6.65376 9.2433C7.07167 9.60437 7.11774 10.2359 6.75667 10.6538Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 5.5C16.5 6.05228 16.0523 6.5 15.5 6.5L1.5 6.5C0.947715 6.5 0.5 6.05228 0.5 5.5C0.5 4.94771 0.947715 4.5 1.5 4.5L15.5 4.5C16.0523 4.5 16.5 4.94772 16.5 5.5Z" fill="currentColor"/>
</svg>
src/view/block/header/Header.scss
...@@ -6,4 +6,5 @@ ...@@ -6,4 +6,5 @@
min-height: 90px; min-height: 90px;
background-color: $bg-main; background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25); box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
z-index: 10;
} }
src/view/cmp/button/Button.jsx
import './button.scss'; import './button.scss';
export default D.declare('view.cmp.Button', function(cfg, children) { export default D.declare('view.cmp.Button', function(cfg, children) {
return <button type={cfg.type} {...cfg}>{children}</button> return <button type={cfg.type} class={'button'} {...cfg}>{children}</button>
}); });
src/view/cmp/button/button.scss
.button { .button {
position: relative; position: relative;
padding: 5px 43px; box-sizing: border-box;
padding: 0 32px;
text-align: center; text-align: center;
font-family: inherit;
font-weight: 500; font-weight: 500;
font-size: 17px; font-size: 17px;
line-height: 36px; line-height: 36px;
color: $accent-dark; color: $accent-dark;
background-color: rgba(#ffffff, 0);
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
border-color: rgba($bg-main, 0); border-color: rgba($bg-main, 0);
...@@ -24,9 +27,24 @@ ...@@ -24,9 +27,24 @@
&:disabled { &:disabled {
color: $gray-medium; color: $gray-medium;
cursor: not-allowed;
} }
} }
.button svg {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.button svg:last-child {
right: 0;
}
.button svg:first-child {
left: 0;
}
.button--primary { .button--primary {
padding: 5px 48px; padding: 5px 48px;
min-width: 200px; min-width: 200px;
...@@ -36,14 +54,91 @@ ...@@ -36,14 +54,91 @@
&:active { &:active {
color: $bg-main; color: $bg-main;
background-color: $accent-medium;
border-color: $accent-medium;
} }
&:focus { &:focus {
color: $bg-main; color: $bg-main;
background-color: $accent-main;
border-color: #27EF60;
outline: none;
}
&:disabled {
color: $bg-main;
background-color: $gray-medium;
border-color: $gray-medium;
}
}
.button--secondary {
padding: 5px 48px;
min-width: 200px;
color: #030303;
background-color: $bg-main;
border-color: $bg-main;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
&:active {
color: #030303;
background-color: $bg-accent;
border-color: $bg-accent;
box-shadow: 0px 2px 5px rgba(190, 190, 190, 0.5);
}
&:focus {
padding: 6px 49px;
color: #030303;
background-color: $bg-main;
border-width: 1px;
border-color: $accent-main;
outline: none; outline: none;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
} }
&:disabled { &:disabled {
color: $bg-main; color: $bg-main;
background-color: $gray-medium;
border-color: $gray-medium;
} }
} }
.button--bordered {
padding: 5px 48px;
min-width: 200px;
color: $accent-dark;
background-color: $bg-main;
border-color: $accent-dark;
&:active {
color: $bg-main;
background-color: $accent-dark;
border-color: $accent-dark;
}
&:focus {
color: $accent-medium;
background-color: $bg-main;
border-color: $accent-medium;
outline: none;
}
&:disabled {
color: $gray-medium;
background-color: $bg-main;
border-color: $gray-medium;
}
}
.button--primary svg:last-child,
.button--bordered svg:last-child,
.button--secondary svg:last-child {
right: 18px;
}
.button--primary svg:first-child,
.button--bordered svg:first-child,
.button--secondary svg:first-child {
left: 18px;
}
src/view/cmp/field/LabeledField.jsx
import './LabeledField.scss'; import './LabeledField.scss';
import Input from './Input.jsx'; import Input from './Input.jsx';
export default D.declare('view.cmp.field.LabeledField', (cfg)=> export default D.declare('view.cmp.field.LabeledField', (cfg, children)=>
<div class="labeled-field"> <div class={D.cls("labeled-field", {"labeled-field--invalid": cfg.invalid})}>
<label class="labeled-field__label"> <label class="labeled-field__label">
<span class="labeled-field__label-text">{cfg.label}</span> <span class="labeled-field__label-text">{cfg.label}</span>
<Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/> <Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
</label> </label>
{children}
</div> </div>
) )
src/view/cmp/field/LabeledField.scss
.labeled-field {
position: relative;
margin-bottom: 35px;
}
.labeled-field__label { .labeled-field__label {
display: flex; display: flex;
flex-direction: column;
align-items: center;
text-align: center;
} }
.labeled-field__label-text { .labeled-field__label-text {
min-width: 150px; @include mainBodyText;
margin-bottom: 25px;
}
.labeled-field__input {
display: block;
box-sizing: border-box;
width: 300px;
height: 50px;
font-family: inherit;
text-align: center;
font-size: 17px;
line-height: 36px;
color: $text-main;
background-color: $bg-accent;
border: 1px solid rgba(208, 209, 209, 0.8);
border-radius: 25px;
transition: all 0.3s ease;
&::placeholder {
color: $gray-medium;
}
&:invalid:not(:placeholder-shown),
.labeled-field--invalid & {
color: $red;
background-color: rgba(255, 0, 0, 0.1);
border-color: $red;
}
&:hover {
background-color: #F2F2F2;
border-color: #D7D8D7;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
&:focus {
background-color: $bg-accent;
border-color: #D7D8D7;
box-shadow: none;
outline: none;
&::placeholder {
color: rgba(201, 199, 199, 0.5);
}
}
}
.labeled-field__error-message {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 5px);
display: block;
width: 800px;
max-width: 100%;
font-size: 16px;
line-height: 30px;
color: $red;
} }
src/view/cmp/switch/Switch.jsx
import './Switch.scss';
export default D.declare('Switch', (cfg, contentHash) => { export default D.declare('Switch', (cfg, contentHash) => {
if(Array.isArray(contentHash)){ if(Array.isArray(contentHash)){
contentHash = contentHash.reduce(function(store, {id, children}) { contentHash = contentHash.reduce(function(store, {id, children}) {
...@@ -31,4 +32,4 @@ Switch.Item = function(cfg, children) { ...@@ -31,4 +32,4 @@ Switch.Item = function(cfg, children) {
} }
this.id = cfg.id; this.id = cfg.id;
this.children = children; this.children = children;
}; };
\ No newline at end of file
src/view/cmp/switch/Switch.scss 0 → 100644
.cmp-switch {
position: relative;
width: 100%;
}
src/view/page/login/Login.jsx
...@@ -2,23 +2,30 @@ import '../../cmp/field/LabeledField.jsx'; ...@@ -2,23 +2,30 @@ import '../../cmp/field/LabeledField.jsx';
import Button from '../../cmp/button/Button.jsx'; import Button from '../../cmp/button/Button.jsx';
import Logo from '../../../svg/logo_vkusvill.svg'; import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss'; import './loginPage.scss';
import {AsyncAjax} from '/core/Ajax.jsx'; /*import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx'; import {API} from '/dict/Consts.jsx';*/
import Arr from '../../../svg/arr.svg';
import ArrB from '../../../svg/arr-back.svg';
const {AND, OR} = Store; const {AND, OR, IF} = Store;
export default D.declare('view.page.Login', () => { export default D.declare('view.page.Login', () => {
const loginStore = new Store( { const loginStore = new Store({
phone: '7', phone: '7123456789',
code: '', code: '',
active: 'enterPhone', codeValid: false,
phoneValid: false, active: 'enterPhone',
phoneChecking: false, phoneValid: false,
incorrectPhone: false phoneChecking: false,
incorrectPhone: false,
authHelp: false,
codeError: false
}); });
loginStore.sub('phone', function (phone) { loginStore.sub('phone', function (phone) {
loginStore.set('phoneValid', phone.length === 11); loginStore.set('phoneValid', phone.length === 11);
}); });
loginStore.sub('code', function (code) {
loginStore.set('codeValid', (code+'').length === 6);
});
const checkPhone = async function() { const checkPhone = async function() {
loginStore.set('phoneChecking', true); loginStore.set('phoneChecking', true);
try{ try{
...@@ -32,30 +39,65 @@ export default D.declare('view.page.Login', () => { ...@@ -32,30 +39,65 @@ export default D.declare('view.page.Login', () => {
loginStore.set('active', 'enterCode'); loginStore.set('active', 'enterCode');
}, 2000) }, 2000)
}; };
const checkCode = function () {
loginStore.set('codeChecking', true);
setTimeout(function() {
loginStore.set('codeChecking', false);
loginStore.set('codeError', true);
}, 2000)
};
return <div className={"login-page"}> return <div className={"login-page"}>
<div class="login-page__big-logo"> <div class="login-page__big-logo">
<Logo width="660" height="300"/> <Logo width="660" height="300"/>
</div> </div>
<h1 class="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1> <h1 class="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form"> <Switch store={loginStore} key='authHelp'>
<Switch store={loginStore} key='active'> <Switch.Item id={false}>
<Switch.Item id='enterPhone'> <form action="#" method="post" className="authorization-form">
<view.cmp.field.LabeledField label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/> <Switch store={loginStore} key='active'>
<Button <Switch.Item id='enterPhone'>
class={"button button--primary authorization-form__button"} <view.cmp.field.LabeledField required label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>
onclick={checkPhone} <Button
disabled={OR( class={"button button--primary authorization-form__button"}
loginStore.valFalse('phoneValid'), onclick={checkPhone}
loginStore.valTrue('phoneChecking') disabled={OR(
)} loginStore.valFalse('phoneValid'),
>Ну да</Button> loginStore.valTrue('phoneChecking')
</Switch.Item> )}
<Switch.Item id='enterCode'> ><span>Далее</span><Arr width="17" height="11"/></Button>
<button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>, </Switch.Item>
<view.cmp.field.LabeledField label={'Code'}/> <Switch.Item id='enterCode'>
</Switch.Item> <button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
</Switch> <view.cmp.field.LabeledField
</form> required
label={'Введите код из СМС'}
placeholder={'Код'}
type={'number'}
bind={loginStore.bind('code')}
invalid={loginStore.valTrue('codeError')}
>
<IF condition={loginStore.valTrue('codeError')}>
<span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
</IF>
</view.cmp.field.LabeledField>
<Button
class={"button button--primary authorization-form__button"}
onclick={checkCode}
disabled={OR(
loginStore.valFalse('codeValid'),
loginStore.valTrue('codeChecking')
)}><span>Далее</span><Arr width="17" height="11"/></Button>
</Switch.Item>
</Switch>
<Button onClick={() => loginStore.set('authHelp', true)}>Проблемы с авторизацией?</Button>
</form>
</Switch.Item>
<Switch.Item id={true}>
<Button onClick={() => loginStore.set('authHelp', false)}><ArrB width="17" height="11"/><span>Вернуться к авторизации</span></Button>
</Switch.Item>
</Switch>
</div> </div>
}) })
src/view/page/login/loginPage.scss
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
} }
.login-page__big-logo { .login-page__big-logo {
margin-bottom: 35px;
width: 300px; width: 300px;
height: 147px; height: 147px;
} }
...@@ -25,6 +26,10 @@ ...@@ -25,6 +26,10 @@
.login-page__title { .login-page__title {
@include headline; @include headline;
margin: 0 auto; margin: 0 auto 14px;
max-width: 800px; max-width: 800px;
} }
.authorization-form__button {
margin: 15px 0 44px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment