Skip to content

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

IF component

parents 0f6a11c7 830c27b8
Showing with 261 additions and 34 deletions
src/core/data/store/Store.js
......@@ -217,5 +217,12 @@ Store.OR = Store.AGGREGATE(function(values, length) {
}
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);
\ No newline at end of file
src/global-styles/fonts.scss
......@@ -3,8 +3,8 @@
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-Regular.woff2") format("woff2"),
url("fonts/SFProText-Regular.woff") format("woff");
src: url("/fonts/SFProText-Regular.woff2") format("woff2"),
url("/fonts/SFProText-Regular.woff") format("woff");
}
@font-face {
......@@ -12,8 +12,8 @@
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-RegularItalic.woff2") format("woff2"),
url("fonts/SFProText-RegularItalic.woff") format("woff");
src: url("/fonts/SFProText-RegularItalic.woff2") format("woff2"),
url("/fonts/SFProText-RegularItalic.woff") format("woff");
}
@font-face {
......@@ -21,8 +21,8 @@
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/SFProText-Medium.woff2") format("woff2"),
url("fonts/SFProText-Medium.woff") format("woff");
src: url("/fonts/SFProText-Medium.woff2") format("woff2"),
url("/fonts/SFProText-Medium.woff") format("woff");
}
@font-face {
......@@ -30,8 +30,8 @@
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("fonts/SFProText-MediumItalic.woff2") format("woff2"),
url("fonts/SFProText-MediumItalic.woff") format("woff");
src: url("/fonts/SFProText-MediumItalic.woff2") format("woff2"),
url("/fonts/SFProText-MediumItalic.woff") format("woff");
}
@font-face {
......@@ -39,8 +39,8 @@
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/SFProText-Semibold.woff2") format("woff2"),
url("fonts/SFProText-Semibold.woff") format("woff");
src: url("/fonts/SFProText-Semibold.woff2") format("woff2"),
url("/fonts/SFProText-Semibold.woff") format("woff");
}
@font-face {
......@@ -48,8 +48,8 @@
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("fonts/SFProText-SemiboldItalic.woff2") format("woff2"),
url("fonts/SFProText-SemiboldItalic.woff") format("woff");
src: url("/fonts/SFProText-SemiboldItalic.woff2") format("woff2"),
url("/fonts/SFProText-SemiboldItalic.woff") format("woff");
}
@font-face {
......@@ -57,8 +57,8 @@
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/SFProText-Bold.woff2") format("woff2"),
url("fonts/SFProText-Bold.woff") format("woff");
src: url("/fonts/SFProText-Bold.woff2") format("woff2"),
url("/fonts/SFProText-Bold.woff") format("woff");
}
@font-face {
......@@ -66,6 +66,6 @@
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("fonts/SFProText-BoldItalic.woff2") format("woff2"),
url("fonts/SFProText-BoldItalic.woff") format("woff");
src: url("/fonts/SFProText-BoldItalic.woff2") format("woff2"),
url("/fonts/SFProText-BoldItalic.woff") format("woff");
}
src/index.html
......@@ -3,7 +3,7 @@
<head>
<title>Category mapper</title>
<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/Require.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 @@
min-height: 90px;
background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
z-index: 10;
}
src/view/cmp/button/Button.jsx
import './button.scss';
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 {
position: relative;
padding: 5px 43px;
box-sizing: border-box;
padding: 0 32px;
text-align: center;
font-family: inherit;
font-weight: 500;
font-size: 17px;
line-height: 36px;
color: $accent-dark;
background-color: rgba(#ffffff, 0);
border-width: 2px;
border-style: solid;
border-color: rgba($bg-main, 0);
......@@ -24,9 +27,24 @@
&:disabled {
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 {
padding: 5px 48px;
min-width: 200px;
......@@ -36,14 +54,91 @@
&:active {
color: $bg-main;
background-color: $accent-medium;
border-color: $accent-medium;
}
&:focus {
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;
box-shadow: 0px 4px 10px rgba(190, 190, 190, 0.5);
}
&:disabled {
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 Input from './Input.jsx';
export default D.declare('view.cmp.field.LabeledField', (cfg)=>
<div class="labeled-field">
export default D.declare('view.cmp.field.LabeledField', (cfg, children)=>
<div class={D.cls("labeled-field", {"labeled-field--invalid": cfg.invalid})}>
<label class="labeled-field__label">
<span class="labeled-field__label-text">{cfg.label}</span>
<Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
</label>
{children}
</div>
)
src/view/cmp/field/LabeledField.scss
.labeled-field {
position: relative;
margin-bottom: 35px;
}
.labeled-field__label {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.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) => {
if(Array.isArray(contentHash)){
contentHash = contentHash.reduce(function(store, {id, children}) {
......
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';
import Button from '../../cmp/button/Button.jsx';
import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss';
import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx';
/*import {AsyncAjax} from '/core/Ajax.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', () => {
const loginStore = new Store( {
phone: '7',
const loginStore = new Store({
phone: '7123456789',
code: '',
codeValid: false,
active: 'enterPhone',
phoneValid: false,
phoneChecking: false,
incorrectPhone: false
incorrectPhone: false,
authHelp: false,
codeError: false
});
loginStore.sub('phone', function (phone) {
loginStore.set('phoneValid', phone.length === 11);
});
loginStore.sub('code', function (code) {
loginStore.set('codeValid', (code+'').length === 6);
});
const checkPhone = async function() {
loginStore.set('phoneChecking', true);
try{
......@@ -32,16 +39,26 @@ export default D.declare('view.page.Login', () => {
loginStore.set('active', 'enterCode');
}, 2000)
};
const checkCode = function () {
loginStore.set('codeChecking', true);
setTimeout(function() {
loginStore.set('codeChecking', false);
loginStore.set('codeError', true);
}, 2000)
};
return <div className={"login-page"}>
<div class="login-page__big-logo">
<Logo width="660" height="300"/>
</div>
<h1 class="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<Switch store={loginStore} key='authHelp'>
<Switch.Item id={false}>
<form action="#" method="post" className="authorization-form">
<Switch store={loginStore} key='active'>
<Switch.Item id='enterPhone'>
<view.cmp.field.LabeledField label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>
<view.cmp.field.LabeledField required label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>
<Button
class={"button button--primary authorization-form__button"}
onclick={checkPhone}
......@@ -49,13 +66,38 @@ export default D.declare('view.page.Login', () => {
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}
>Ну да</Button>
><span>Далее</span><Arr width="17" height="11"/></Button>
</Switch.Item>
<Switch.Item id='enterCode'>
<button onClick={() => loginStore.set('active', 'enterPhone')}>Взат</button>,
<view.cmp.field.LabeledField label={'Code'}/>
<view.cmp.field.LabeledField
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>
})
src/view/page/login/loginPage.scss
......@@ -13,6 +13,7 @@
}
.login-page__big-logo {
margin-bottom: 35px;
width: 300px;
height: 147px;
}
......@@ -25,6 +26,10 @@
.login-page__title {
@include headline;
margin: 0 auto;
margin: 0 auto 14px;
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