Commit ffaba6a9 by Иван Кубота

isMobile store property.

If we resize Profile page up - it switches to Main Account view. Change Name\Surname to real ones. Made header items work
parent 6d8f8a73
......@@ -22,6 +22,12 @@ export default function() {
}, {})
)}
</div>;
const w = window;
w.addEventListener('resize', function() {
store.set({
isMobile: w.innerWidth < 1025
});
});
};
let latest;
const store = new Store(latest = {
commit: window.CommitID,
isMobile: false,
'navigation': {
current: 'Login'
},
......
......@@ -8,11 +8,23 @@ const AccountBlock = D.declare('view.block.AccountBlock', () => {
<div class="account__info">
<h3 class="account__name">
<User width="32" height="32"/>
<span>{'Ким Ир Сен Константин Му Константинович Константинопольский'.split(/\s/).map(word => <div
cls="title-name-word">{word}</div>)}</span>
<span>
{(update)=>store.sub([
'account.data.firstname',
'account.data.middlename',
'account.data.lastname'
], (f, m, l)=>
update(
[l,f,m]
.join(' ')
.split(/\s+/)
.map(word => <div class="title-name-word">{word}</div>)
)
)}
</span>
</h3>
<p>Химки-2</p>
<p>Кассир</p>
<p>{store.val('account.data.location')}</p>
<p>{store.val('account.data.position.title')}</p>
</div>
<div class="account__rating">
<Rating/>
......
......@@ -8,6 +8,26 @@ import { Page } from "../../page/Page";
const {IF, NOT} = Store;
const Header = D.declare('view.block.Header', () => {
const tempPageMenuHidden = new Store.Value.Boolean(true);
const actions = {
logo: 'Account',
logout: function() {
store.set('account.token', false);
},
profile: 'Profile'
};
store.sub('isMobile', (is)=> actions.profile = is ? 'Profile': 'Account');
const action = function(name) {
if(store.get('isTesting')){
// TODO SHOW MODAL
}else{
if(typeof actions[name] === 'function'){
actions[name]();
}else{
store.set( 'navigation.current', actions[name]);
}
}
};
return <header class={D.cls(
"page-header", {
"page-header--inner": (NOT(store.valEqual( 'navigation.current', 'Login')))
......@@ -32,20 +52,25 @@ const Header = D.declare('view.block.Header', () => {
</div>
<IF condition={NOT(store.valEqual( 'navigation.current', 'Login'))}>
<div className="page-header__wrapper">
<a href="#" class="page-header__logo" aria-label={"Логотип ВкусВилл"}>
<Button class={"button page-header__logo-link page-header__logo"}
aria-label={"Перейти на главную страницу"}
onClick={()=>action('logo')}>
<Logo width="116" height="41"/>
</a>
</Button>
<div class="page-header__user-block">
<Button class={"button page-header__profile-link"}
type={"button"}
aria-label={"Перейти на страницу профиля"}
>
<User width="32" height="32"/><span>Иванов Иван</span>
onClick={()=>action('profile')}>
<User width="32" height="32"/>
<span>
{store.val('account.data.lastname')}{' '}
{store.val('account.data.firstname')}
</span>
</Button>
<Button class={"button page-header__logout-link"}
type={"button"}
aria-label={"Выйти из аккаунта"}
>
onClick={()=>action('logout')}>
<Logout width="18" height="18"/><span>Выйти</span>
</Button>
</div>
......
import './button.scss';
export default D.declare('view.cmp.Button', function(cfg, children) {
return <button type={'button' || cfg.type} class={'button'} {...cfg}>{children}</button>
return <button type={cfg.type || 'button'} class={'button'} {...cfg}>{children}</button>
});
......@@ -3,6 +3,13 @@ import Format from "../../cmp/format/Format";
import AccountBlock from '../../block/account/Account.jsx';
const Account = D.declare('view.page.Account', () => {
store.sub([
'isMobile', 'navigation.current'
], (is, page)=>{
if(!is && page === 'Profile')
store.set('navigation.current', 'Account');
});
return <div class="account-page">
<h1 class="readers-only">Страница личного кабинета сотрудника</h1>
<div class="account-page__wrapper">
......
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