Skip to content

Commit

Permalink
fixes #1 & #2
Browse files Browse the repository at this point in the history 
И мелкие изменения/фиксы
  • Loading branch information
@reyzitwo
reyzitwo committed Jul 17, 2021
1 parent d5e99cb commit 074a87e
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 201 deletions.
328 changes: 164 additions & 164 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {goBack, closeModal, setStory} from "./js/store/router/actions";
import {getActivePanel} from "./js/services/_functions";
import * as VK from './js/services/VK';

import {
Epic,
Expand Down Expand Up @@ -39,187 +38,188 @@ import HomeBotsListModal from './js/components/modals/HomeBotsListModal';
import HomeBotInfoModal from './js/components/modals/HomeBotInfoModal';

class App extends React.Component {
constructor(props) {
super(props);
constructor(props) {
super(props);

this.state = {
isDesktop: false
}

this.lastAndroidBackAction = 0;
this.state = {
hasHeader: true,
isDesktop: false,
Platform: platform()
}

async componentDidMount() {
const {goBack, dispatch} = this.props;

dispatch(VK.initApp());

let parsedUrl = new URL(window.location.href)
if (parsedUrl.searchParams.get('vk_platform') === 'desktop_web') {
this.setState({ isDesktop: true })
}

window.onpopstate = () => {
let timeNow = +new Date();
this.lastAndroidBackAction = 0;
}

if (timeNow - this.lastAndroidBackAction > 500) {
this.lastAndroidBackAction = timeNow;
async componentDidMount() {
const {goBack} = this.props;

goBack();
} else {
window.history.pushState(null, null);
}
};
let parsedUrl = new URL(window.location.href)
if (parsedUrl.searchParams.get('vk_platform') === 'desktop_web') {
this.setState({
isDesktop: true,
hasHeader: false,
Platform: VKCOM
})
}

componentDidUpdate(prevProps, prevState, snapshot) {
const {activeView, activeStory, activePanel, scrollPosition} = this.props;
window.onpopstate = () => {
let timeNow = +new Date();

if (
prevProps.activeView !== activeView ||
prevProps.activePanel !== activePanel ||
prevProps.activeStory !== activeStory
) {
let pageScrollPosition = scrollPosition[activeStory + "_" + activeView + "_" + activePanel] || 0;
if (timeNow - this.lastAndroidBackAction > 500) {
this.lastAndroidBackAction = timeNow;

window.scroll(0, pageScrollPosition);
}
}
goBack();
} else {
window.history.pushState(null, null);
}
};
}

render() {
const {goBack, setStory, closeModal, popouts, activeView, activeStory, activeModals, panelsHistory} = this.props;

const hasHeader = platform !== VKCOM;
const { isDesktop } = this.state

let history = (panelsHistory[activeView] === undefined) ? [activeView] : panelsHistory[activeView];
let popout = (popouts[activeView] === undefined) ? null : popouts[activeView];
let activeModal = (activeModals[activeView] === undefined) ? null : activeModals[activeView];

const homeModals = (
<ModalRoot activeModal={activeModal}>
<HomeBotsListModal
id="MODAL_PAGE_BOTS_LIST"
onClose={() => closeModal()}
/>
<HomeBotInfoModal
id="MODAL_PAGE_BOT_INFO"
onClose={() => closeModal()}
/>
</ModalRoot>
);

return (

<ConfigProvider isWebView={true}>
<AdaptivityProvider>
<AppRoot>
<SplitLayout
header={hasHeader && <PanelHeader separator={false} />}
style={{ justifyContent: "center" }}
>
componentDidUpdate(prevProps, prevState, snapshot) {
const {activeView, activeStory, activePanel, scrollPosition} = this.props;

{isDesktop && (
<SplitCol fixed width='280px' maxWidth='280px'>
<Panel>
{hasHeader && <PanelHeader/>}
<Group>
<Cell
onClick={() => setStory('home', 'base')}
disabled={activeStory === 'home'}
before={<Icon28HomeOutline/>}
style={ activeStory === 'home' ? {
backgroundColor: 'var(--button_secondary_background)',
borderRadius: 8
} : {}}
>
Главная
</Cell>
<Cell
onClick={() => setStory('more', 'callmodal')}
disabled={activeStory === 'more'}
before={<Icon28Profile/>}
style={ activeStory === 'more' ? {
backgroundColor: 'var(--button_secondary_background)',
borderRadius: 8
} : {}}
>
Профиль
</Cell>
</Group>
</Panel>
</SplitCol>
)}

<SplitCol
animate={!isDesktop}
spaced={isDesktop}
width={isDesktop ? '560px' : '100%'}
maxWidth={isDesktop ? '560px' : '100%'}>

<Epic activeStory={activeStory} tabbar={ !isDesktop && <Tabbar>
<TabbarItem
onClick={() => setStory('home', 'base')}
selected={activeStory === 'home'}
text='Главная'
><Icon28HomeOutline/></TabbarItem>
<TabbarItem
onClick={() => setStory('more', 'callmodal')}
selected={activeStory === 'more'}
text='Профиль'
><Icon28Profile/></TabbarItem>
</Tabbar>
}>
<Root id="home" activeView={activeView} popout={popout}>
<View
id="home"
modal={homeModals}
activePanel={getActivePanel("home")}
history={history}
onSwipeBack={() => goBack()}
>
<HomePanelBase id="base" withoutEpic={false}/>
<HomePanelPlaceholder id="placeholder"/>
</View>
</Root>
<Root id="more" activeView={activeView} popout={popout}>
<View
id="more"
modal={homeModals}
activePanel={getActivePanel("more")}
history={history}
onSwipeBack={() => goBack()}
>
<MorePanelBase id="callmodal"/>
</View>
</Root>
</Epic>
</SplitCol>
</SplitLayout>
</AppRoot>
</AdaptivityProvider>
</ConfigProvider>
);
if (
prevProps.activeView !== activeView ||
prevProps.activePanel !== activePanel ||
prevProps.activeStory !== activeStory
) {
let pageScrollPosition = scrollPosition[activeStory + "_" + activeView + "_" + activePanel] || 0;

window.scroll(0, pageScrollPosition);
}
}

render() {
const {goBack, setStory, closeModal, popouts, activeView, activeStory, activeModals, panelsHistory} = this.props;
const { isDesktop, hasHeader, Platform } = this.state

let history = (panelsHistory[activeView] === undefined) ? [activeView] : panelsHistory[activeView];
let popout = (popouts[activeView] === undefined) ? null : popouts[activeView];
let activeModal = (activeModals[activeView] === undefined) ? null : activeModals[activeView];

const homeModals = (
<ModalRoot activeModal={activeModal}>
<HomeBotsListModal
id="MODAL_PAGE_BOTS_LIST"
onClose={() => closeModal()}
/>
<HomeBotInfoModal
id="MODAL_PAGE_BOT_INFO"
onClose={() => closeModal()}
/>
</ModalRoot>
);

return (
<ConfigProvider platform={Platform} isWebView={true}>
<AdaptivityProvider>
<AppRoot>
<SplitLayout
header={hasHeader && <PanelHeader separator={false} />}
style={{ justifyContent: "center" }}
>
<SplitCol
animate={!isDesktop}
spaced={isDesktop}
width={isDesktop ? '560px' : '100%'}
maxWidth={isDesktop ? '560px' : '100%'}
>
<Epic activeStory={activeStory} tabbar={ !isDesktop &&
<Tabbar>
<TabbarItem
onClick={() => setStory('home', 'base')}
selected={activeStory === 'home'}
text='Главная'
><Icon28HomeOutline/></TabbarItem>
<TabbarItem
onClick={() => setStory('more', 'callmodal')}
selected={activeStory === 'more'}
text='Профиль'
><Icon28Profile/></TabbarItem>
</Tabbar>}>
<Root id="home" activeView={activeView} popout={popout}>
<View
id="home"
modal={homeModals}
activePanel={getActivePanel("home")}
history={history}
onSwipeBack={() => goBack()}
>
<HomePanelBase id="base" withoutEpic={false}/>
<HomePanelPlaceholder id="placeholder"/>
</View>
</Root>
<Root id="more" activeView={activeView} popout={popout}>
<View
id="more"
modal={homeModals}
activePanel={getActivePanel("more")}
history={history}
onSwipeBack={() => goBack()}
>
<MorePanelBase id="callmodal"/>
</View>
</Root>
</Epic>
</SplitCol>

{isDesktop && (
<SplitCol fixed width='280px' maxWidth='280px'>
<Panel id='menuDesktop'>
{hasHeader && <PanelHeader/>}
<Group>
<Cell
onClick={() => setStory('home', 'base')}
disabled={activeStory === 'home'}
before={<Icon28HomeOutline/>}
style={ activeStory === 'home' ? {
backgroundColor: 'var(--button_secondary_background)',
borderRadius: 8
} : {}}
>
Главная
</Cell>
<Cell
onClick={() => setStory('more', 'callmodal')}
disabled={activeStory === 'more'}
before={<Icon28Profile/>}
style={ activeStory === 'more' ? {
backgroundColor: 'var(--button_secondary_background)',
borderRadius: 8
} : {}}
>
Профиль
</Cell>
</Group>
</Panel>
</SplitCol>
)}

</SplitLayout>
</AppRoot>
</AdaptivityProvider>
</ConfigProvider>
);
}
}

const mapStateToProps = (state) => {
return {
activeView: state.router.activeView,
activeStory: state.router.activeStory,
panelsHistory: state.router.panelsHistory,
activeModals: state.router.activeModals,
popouts: state.router.popouts,
scrollPosition: state.router.scrollPosition,
};
return {
activeView: state.router.activeView,
activeStory: state.router.activeStory,
panelsHistory: state.router.panelsHistory,
activeModals: state.router.activeModals,
popouts: state.router.popouts,
scrollPosition: state.router.scrollPosition,
};
};


function mapDispatchToProps(dispatch) {
return {
dispatch,
...bindActionCreators({setStory, goBack, closeModal}, dispatch)
}
return {
dispatch,
...bindActionCreators({setStory, goBack, closeModal}, dispatch)
}
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);
25 changes: 13 additions & 12 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,22 @@
margin: 0 auto;
}

.div-center img {
width: 10rem;
}

.buttons-group {
.ProfileUser {
display: flex;
margin: -7px -7px 0 -7px;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 32px;
}

.buttons-group button:first-child {
margin-right: 8px;
.NameUser {
margin-bottom: 8px;
margin-top: 20px
}

a, div, img, p, button {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
.SubheaderUser {
margin-bottom: 24px;
color: var(--text_secondary)
}
Loading

0 comments on commit 074a87e

Please sign in to comment.