Change Modal layout
fix configure store error add css transition effects
This commit is contained in:
parent
0ed5193982
commit
0b3afeb6e0
|
@ -623,8 +623,8 @@ export function showCanvasSelectionModal(): Action {
|
|||
return showModal('CANVAS_SELECTION');
|
||||
}
|
||||
|
||||
export function showChatModal(): Action {
|
||||
if (window.innerWidth > 604) { return toggleChatBox(); }
|
||||
export function showChatModal(forceModal: boolean = false): Action {
|
||||
if (window.innerWidth > 604 && !forceModal) { return toggleChatBox(); }
|
||||
return showModal('CHAT');
|
||||
}
|
||||
|
||||
|
|
|
@ -5,18 +5,13 @@
|
|||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
// import FaFacebook from 'react-icons/lib/fa/facebook';
|
||||
// import FaTwitter from 'react-icons/lib/fa/twitter';
|
||||
// import FaRedditAlien from 'react-icons/lib/fa/reddit-alien';
|
||||
|
||||
import Modal from './Modal';
|
||||
import CanvasItem from './CanvasItem';
|
||||
|
||||
import type { State } from '../reducers';
|
||||
|
||||
|
||||
const CanvasSelectModal = ({ canvases }) => (
|
||||
<Modal title="Canvas Selection">
|
||||
<p style={{
|
||||
textAlign: 'center',
|
||||
paddingLeft: '5%',
|
||||
|
@ -35,7 +30,6 @@ const CanvasSelectModal = ({ canvases }) => (
|
|||
))
|
||||
}
|
||||
</p>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
function mapStateToProps(state: State) {
|
||||
|
@ -43,4 +37,9 @@ function mapStateToProps(state: State) {
|
|||
return { canvases };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(CanvasSelectModal);
|
||||
const data = {
|
||||
content: connect(mapStateToProps)(CanvasSelectModal),
|
||||
title: 'Canvas Selection',
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
|
@ -25,8 +25,8 @@ const Chat = ({ chatMessages, chatChannel }) => {
|
|||
}, [channelMessages.length]);
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
<ul className="chatarea" ref={listRef}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<ul className="chatarea" ref={listRef} style={{ flexGrow: 1 }}>
|
||||
{
|
||||
channelMessages.map((message) => (
|
||||
<p className="chatmsg">
|
||||
|
|
|
@ -3,24 +3,66 @@
|
|||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import type { State } from '../reducers';
|
||||
import useWindowSize from '../utils/reactHookResize';
|
||||
import { showChatModal } from '../actions';
|
||||
|
||||
import Chat from './Chat';
|
||||
|
||||
|
||||
const ChatBox = ({ chatOpen }) => (
|
||||
<div className={(chatOpen) ? "chatbox show" : "chatbox"}>
|
||||
function ChatBox({
|
||||
chatOpen,
|
||||
triggerModal,
|
||||
}) {
|
||||
const [render, setRender] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.setTimeout(() => {
|
||||
if (chatOpen) setRender(true);
|
||||
}, 10);
|
||||
}, [chatOpen]);
|
||||
|
||||
const onTransitionEnd = () => {
|
||||
if (!chatOpen) setRender(false);
|
||||
};
|
||||
|
||||
const { width } = useWindowSize();
|
||||
if (width < 604) {
|
||||
triggerModal();
|
||||
}
|
||||
|
||||
return (
|
||||
(render || chatOpen) && (
|
||||
<div
|
||||
className={(chatOpen && render) ? 'chatbox show' : 'chatbox'}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
>
|
||||
<div
|
||||
id="chatlink"
|
||||
onClick={triggerModal}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
>↷</div>
|
||||
<Chat />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// TODO optimize
|
||||
function mapStateToProps(state: State) {
|
||||
const { chatOpen } = state.modal;
|
||||
return { chatOpen };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(ChatBox);
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
triggerModal() {
|
||||
dispatch(showChatModal(true));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ChatBox);
|
||||
|
|
|
@ -25,7 +25,7 @@ const ChatButton = ({ open }) => (
|
|||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
open() {
|
||||
dispatch(showChatModal());
|
||||
dispatch(showChatModal(false));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -49,26 +49,25 @@ class ChatInput extends React.Component {
|
|||
<div className="chatinput">
|
||||
<form
|
||||
onSubmit={(e) => { this.handleSubmit(e, chatChannel); }}
|
||||
style={{ display: 'inline' }}
|
||||
style={{ display: 'flex', flexDirection: 'row' }}
|
||||
>
|
||||
<input
|
||||
style={{ maxWidth: '58%', width: '240px' }}
|
||||
style={{ flexGrow: 1, minWidth: 40 }}
|
||||
value={message}
|
||||
onChange={(evt) => this.setState({ message: evt.target.value })}
|
||||
type="text"
|
||||
placeholder="Chat here"
|
||||
/>
|
||||
<button
|
||||
style={{ flexGrow: 0 }}
|
||||
id="chatmsginput"
|
||||
type="submit"
|
||||
style={{ height: 22 }}
|
||||
>
|
||||
‣
|
||||
</button>
|
||||
</form>
|
||||
<select
|
||||
style={{ flexGrow: 0 }}
|
||||
onChange={(evt) => setChannel(evt.target.selectedIndex)}
|
||||
style={{ height: 22 }}
|
||||
>
|
||||
{
|
||||
CHAT_CHANNELS.map((ch) => (
|
||||
|
@ -76,6 +75,7 @@ class ChatInput extends React.Component {
|
|||
))
|
||||
}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,19 +5,40 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import Modal from './Modal';
|
||||
import Chat from './Chat';
|
||||
|
||||
|
||||
const ChatModal = () => (
|
||||
<Modal title="Chat">
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: 80,
|
||||
padding: 10,
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
}}
|
||||
>
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
<p className="modaltext">Chat with other people here</p>
|
||||
</p>
|
||||
<div className="inarea" style={{ height: '65%' }}>
|
||||
<div
|
||||
className="inarea"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 10,
|
||||
top: 50,
|
||||
left: 10,
|
||||
right: 10,
|
||||
}}
|
||||
>
|
||||
<Chat />
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default ChatModal;
|
||||
const data = {
|
||||
content: ChatModal,
|
||||
title: 'Chat',
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
|
@ -19,8 +19,7 @@ function renderCoordinates(cell): string {
|
|||
const CoordinatesBox = ({ view, hover, notifyCopy }) => (
|
||||
<div
|
||||
className="coorbox"
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
onClick={() => { copy(location.hash); notifyCopy(); }}
|
||||
onClick={() => { copy(window.location.hash); notifyCopy(); }}
|
||||
role="button"
|
||||
title="Copy to Clipboard"
|
||||
tabIndex="0"
|
||||
|
|
|
@ -6,13 +6,10 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Modal from './Modal';
|
||||
|
||||
import { showUserAreaModal } from '../actions';
|
||||
import NewPasswordForm from './NewPasswordForm';
|
||||
|
||||
const ForgotPasswordModal = ({ login }) => (
|
||||
<Modal title="Restore my Password">
|
||||
<p style={{ paddingLeft: '5%', paddingRight: '5%' }}>
|
||||
<p className="modaltext">
|
||||
Enter your mail adress and we will send you a new password:
|
||||
|
@ -23,7 +20,6 @@ const ForgotPasswordModal = ({ login }) => (
|
|||
<a href="./discord" target="_blank">pixelplanet.fun/discord</a></p>
|
||||
</p>
|
||||
</p>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
|
@ -34,5 +30,9 @@ function mapDispatchToProps(dispatch) {
|
|||
};
|
||||
}
|
||||
|
||||
const data = {
|
||||
content: connect(null, mapDispatchToProps)(ForgotPasswordModal),
|
||||
title: 'Restore my Password',
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(ForgotPasswordModal);
|
||||
export default data;
|
||||
|
|
|
@ -10,11 +10,8 @@ import React from 'react';
|
|||
|
||||
/* eslint-disable max-len */
|
||||
|
||||
import Modal from './Modal';
|
||||
|
||||
|
||||
const HelpModal = () => (
|
||||
<Modal title="Welcome to PixelPlanet.fun">
|
||||
<p style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
||||
<p className="modaltext">Place color pixels on a large canvas with other players online!
|
||||
Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific
|
||||
|
@ -62,7 +59,11 @@ const HelpModal = () => (
|
|||
</small>
|
||||
</p>
|
||||
</p>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
export default HelpModal;
|
||||
const data = {
|
||||
content: HelpModal,
|
||||
title: 'Welcome to PixelPlanet.fun',
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import HelpButton from './HelpButton';
|
||||
|
@ -13,15 +13,36 @@ import LogInButton from './LogInButton';
|
|||
import DownloadButton from './DownloadButton';
|
||||
import MinecraftButton from './MinecraftButton';
|
||||
|
||||
const Menu = ({ menuOpen }) => (
|
||||
<div className={menuOpen ? 'menu show' : 'menu'}>
|
||||
function Menu({
|
||||
menuOpen,
|
||||
}) {
|
||||
const [render, setRender] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.setTimeout(() => {
|
||||
if (menuOpen) setRender(true);
|
||||
}, 10);
|
||||
}, [menuOpen]);
|
||||
|
||||
const onTransitionEnd = () => {
|
||||
if (!menuOpen) setRender(false);
|
||||
};
|
||||
|
||||
return (
|
||||
(render || menuOpen) && (
|
||||
<div
|
||||
className={menuOpen ? 'menu show' : 'menu'}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
>
|
||||
<SettingsButton />
|
||||
<LogInButton />
|
||||
<DownloadButton />
|
||||
<MinecraftButton />
|
||||
<HelpButton />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State) {
|
||||
const { menuOpen } = state.gui;
|
||||
|
|
|
@ -6,17 +6,13 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Modal from './Modal';
|
||||
|
||||
|
||||
const MinecraftModal = () => (
|
||||
<Modal title="PixelPlanet Minecraft Server">
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
<p>You can also place pixels from our Minecraft Server at</p>
|
||||
<p><input type="text" value="mc.pixelplanet.fun" readOnly /></p>
|
||||
<p>Please Note that the Minecraft Server is down from time to time</p>
|
||||
</p>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
function mapStateToProps(state: State) {
|
||||
|
@ -24,4 +20,9 @@ function mapStateToProps(state: State) {
|
|||
return { center };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(MinecraftModal);
|
||||
const data = {
|
||||
content: connect(mapStateToProps)(MinecraftModal),
|
||||
title: 'PixelPlanet Minecraft Server',
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
|
@ -1,47 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Modal from 'react-modal';
|
||||
import { connect } from 'react-redux';
|
||||
import { MdClose } from 'react-icons/md';
|
||||
|
||||
import {
|
||||
hideModal,
|
||||
} from '../actions';
|
||||
|
||||
|
||||
function MyModal({ close, title, children }) {
|
||||
return (
|
||||
<Modal
|
||||
isOpen
|
||||
onClose={close}
|
||||
className="Modal"
|
||||
overlayClassName="Overlay"
|
||||
contentLabel={`${title} Modal`}
|
||||
onRequestClose={close}
|
||||
>
|
||||
<h2 style={{ paddingLeft: '5%' }}>{title}</h2>
|
||||
<div
|
||||
onClick={close}
|
||||
className="ModalClose"
|
||||
role="button"
|
||||
label="close"
|
||||
tabIndex={-1}
|
||||
><MdClose /></div>
|
||||
{children}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
close() {
|
||||
dispatch(hideModal());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(null, mapDispatchToProps)(MyModal);
|
|
@ -6,7 +6,13 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Modal from 'react-modal';
|
||||
import { connect } from 'react-redux';
|
||||
import { MdClose } from 'react-icons/md';
|
||||
|
||||
import {
|
||||
hideModal,
|
||||
} from '../actions';
|
||||
|
||||
import HelpModal from './HelpModal';
|
||||
import SettingsModal from './SettingsModal';
|
||||
|
@ -19,6 +25,7 @@ import MinecraftModal from './MinecraftModal';
|
|||
|
||||
|
||||
const MODAL_COMPONENTS = {
|
||||
NONE: { content: <div />, title: '' },
|
||||
HELP: HelpModal,
|
||||
SETTINGS: SettingsModal,
|
||||
USERAREA: UserAreaModal,
|
||||
|
@ -30,15 +37,43 @@ const MODAL_COMPONENTS = {
|
|||
/* other modals */
|
||||
};
|
||||
|
||||
const ModalRoot = ({ modalType }) => {
|
||||
if (!modalType) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const SpecificModal = MODAL_COMPONENTS[modalType];
|
||||
return <SpecificModal />;
|
||||
const ModalRoot = ({ modalType, modalOpen, close }) => {
|
||||
const choice = MODAL_COMPONENTS[modalType || 'NONE'];
|
||||
const { content: SpecificModal, title } = choice;
|
||||
return (
|
||||
<Modal
|
||||
isOpen={modalOpen}
|
||||
onClose={close}
|
||||
className="Modal"
|
||||
overlayClassName="Overlay"
|
||||
contentLabel={`${title} Modal`}
|
||||
closeTimeoutMS={200}
|
||||
onRequestClose={close}
|
||||
>
|
||||
<h2 style={{ paddingLeft: '5%' }}>{title}</h2>
|
||||
<div
|
||||
onClick={close}
|
||||
className="ModalClose"
|
||||
role="button"
|
||||
label="close"
|
||||
tabIndex={-1}
|
||||
><MdClose /></div>
|
||||
<SpecificModal />
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(
|
||||
(state) => state.modal,
|
||||
)(ModalRoot);
|
||||
function mapStateToProps(state: State) {
|
||||
const { modalType, modalOpen } = state.modal;
|
||||
return { modalType, modalOpen };
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
close() {
|
||||
dispatch(hideModal());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ModalRoot);
|
||||
|
|
|
@ -7,8 +7,8 @@ import React, { useState, useEffect } from 'react';
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import { selectColor } from '../actions';
|
||||
|
||||
import type { State } from '../reducers';
|
||||
import useWindowSize from '../utils/reactHookResize';
|
||||
|
||||
|
||||
/*
|
||||
|
@ -90,27 +90,6 @@ function getStylesByWindowSize(
|
|||
}];
|
||||
}
|
||||
|
||||
function useWindowSize() {
|
||||
const [windowSize, setWindowSize] = useState({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowSize({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
return windowSize;
|
||||
}
|
||||
|
||||
function Palette({
|
||||
colors,
|
||||
selectedColor,
|
||||
|
@ -119,8 +98,20 @@ function Palette({
|
|||
select,
|
||||
clrIgnore,
|
||||
}) {
|
||||
const [render, setRender] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.setTimeout(() => {
|
||||
if (paletteOpen) setRender(true);
|
||||
}, 10);
|
||||
}, [paletteOpen]);
|
||||
|
||||
const onTransitionEnd = () => {
|
||||
if (!paletteOpen) setRender(false);
|
||||
};
|
||||
|
||||
const [paletteStyle, spanStyle] = getStylesByWindowSize(
|
||||
paletteOpen,
|
||||
(render && paletteOpen),
|
||||
useWindowSize(),
|
||||
colors,
|
||||
clrIgnore,
|
||||
|
@ -128,9 +119,11 @@ function Palette({
|
|||
);
|
||||
|
||||
return (
|
||||
(render || paletteOpen) && (
|
||||
<div
|
||||
id="palettebox"
|
||||
style={paletteStyle}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
>
|
||||
{colors.slice(2).map((color, index) => (
|
||||
<span
|
||||
|
@ -150,6 +143,7 @@ function Palette({
|
|||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -6,8 +6,6 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Modal from './Modal';
|
||||
|
||||
import { showUserAreaModal } from '../actions';
|
||||
|
||||
// import { send_registration } from '../ui/register';
|
||||
|
@ -15,7 +13,6 @@ import SignUpForm from './SignUpForm';
|
|||
|
||||
|
||||
const RegisterModal = ({ login }) => (
|
||||
<Modal title="Register New Account">
|
||||
<p style={{ paddingLeft: '5%', paddingRight: '5%' }}>
|
||||
<p className="modaltext">Register new account here</p><br />
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
|
@ -25,7 +22,6 @@ const RegisterModal = ({ login }) => (
|
|||
</p>
|
||||
</p>
|
||||
</p>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
|
@ -36,4 +32,9 @@ function mapDispatchToProps(dispatch) {
|
|||
};
|
||||
}
|
||||
|
||||
export default connect(null, mapDispatchToProps)(RegisterModal);
|
||||
const data = {
|
||||
content: connect(null, mapDispatchToProps)(RegisterModal),
|
||||
title: 'Register New Account',
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Modal from './Modal';
|
||||
import MdToggleButtonHover from './MdToggleButtonHover';
|
||||
import {
|
||||
toggleGrid,
|
||||
|
@ -118,7 +117,6 @@ function SettingsModal({
|
|||
chatNotify,
|
||||
}) {
|
||||
return (
|
||||
<Modal title="Settings">
|
||||
<p style={{ paddingLeft: '5%', paddingRight: '5%', paddingTop: 30 }}>
|
||||
<SettingsItem
|
||||
title="Show Grid"
|
||||
|
@ -193,7 +191,6 @@ function SettingsModal({
|
|||
/>
|
||||
)}
|
||||
</p>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -263,4 +260,9 @@ function mapDispatchToProps(dispatch) {
|
|||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(SettingsModal);
|
||||
const data = {
|
||||
content: connect(mapStateToProps, mapDispatchToProps)(SettingsModal),
|
||||
title: 'Settings',
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
|
@ -6,8 +6,6 @@
|
|||
import React, { Suspense } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Modal from './Modal';
|
||||
|
||||
import type { State } from '../reducers';
|
||||
|
||||
|
||||
|
@ -86,7 +84,6 @@ const LogInArea = ({ register, forgotPassword, me }) => (
|
|||
const UserAreaModal = ({
|
||||
name, register, forgotPassword, doMe, logout, setUserName, setUserMailreg,
|
||||
}) => (
|
||||
<Modal title="User Area">
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
{(name === null)
|
||||
? (
|
||||
|
@ -119,7 +116,6 @@ const UserAreaModal = ({
|
|||
<a href="./discord" target="_blank">pixelplanet.fun/discord</a>
|
||||
</p>
|
||||
</p>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
|
@ -157,4 +153,9 @@ function mapStateToProps(state: State) {
|
|||
return { name };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UserAreaModal);
|
||||
const data = {
|
||||
content: connect(mapStateToProps, mapDispatchToProps)(UserAreaModal),
|
||||
title: 'User Area',
|
||||
};
|
||||
|
||||
export default data;
|
||||
|
|
|
@ -7,11 +7,13 @@
|
|||
import type { Action } from '../actions/types';
|
||||
|
||||
export type ModalState = {
|
||||
modalOpen: boolean,
|
||||
modalType: ?string,
|
||||
chatOpen: boolean,
|
||||
};
|
||||
|
||||
const initialState: ModalState = {
|
||||
modalOpen: false,
|
||||
modalType: null,
|
||||
chatOpen: false,
|
||||
};
|
||||
|
@ -31,6 +33,7 @@ export default function modal(
|
|||
...state,
|
||||
modalType,
|
||||
chatOpen,
|
||||
modalOpen: true,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -38,7 +41,7 @@ export default function modal(
|
|||
case 'HIDE_MODAL':
|
||||
return {
|
||||
...state,
|
||||
modalType: null,
|
||||
modalOpen: false,
|
||||
};
|
||||
|
||||
case 'TOGGLE_CHAT_BOX': {
|
||||
|
|
|
@ -41,7 +41,7 @@ tr:nth-child(even) {
|
|||
border-radius: 21px;
|
||||
}
|
||||
|
||||
#menu > div {
|
||||
.menu > div {
|
||||
z-index: 1;
|
||||
background-color: #15374fd1;
|
||||
}
|
||||
|
@ -81,6 +81,10 @@ tr:nth-child(even) {
|
|||
border-color: #dcddde;
|
||||
}
|
||||
|
||||
.ModalClose:hover {
|
||||
background-color: #6f6f75;
|
||||
}
|
||||
|
||||
.Overlay {
|
||||
background-color: rgba(187, 187, 187, 0.75);
|
||||
}
|
||||
|
@ -89,6 +93,10 @@ tr:nth-child(even) {
|
|||
color: white;
|
||||
}
|
||||
|
||||
#chatlink {
|
||||
color: #f9edde;
|
||||
}
|
||||
|
||||
.statvalue {
|
||||
color: #ecc9ff;
|
||||
}
|
||||
|
@ -98,7 +106,7 @@ tr:nth-child(even) {
|
|||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.actionbuttons:hover, .coorbox:hover, #menu > div:hover {
|
||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||
background-color: #363637;
|
||||
}
|
||||
|
||||
|
|
|
@ -39,7 +39,7 @@ tr:nth-child(even) {
|
|||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
#menu > div {
|
||||
.menu > div {
|
||||
z-index: 1;
|
||||
background-color: #15374fd1;
|
||||
}
|
||||
|
@ -78,6 +78,10 @@ tr:nth-child(even) {
|
|||
border-color: #dcddde;
|
||||
}
|
||||
|
||||
.ModalClose:hover {
|
||||
background-color: #6f6f75;
|
||||
}
|
||||
|
||||
.Overlay {
|
||||
background-color: rgba(187, 187, 187, 0.75);
|
||||
}
|
||||
|
@ -86,6 +90,10 @@ tr:nth-child(even) {
|
|||
color: white;
|
||||
}
|
||||
|
||||
#chatlink {
|
||||
color: #f9edde;
|
||||
}
|
||||
|
||||
.statvalue {
|
||||
color: #ecc9ff;
|
||||
}
|
||||
|
@ -94,7 +102,7 @@ tr:nth-child(even) {
|
|||
background-color: rgba(59, 59, 59, 0.8);
|
||||
}
|
||||
|
||||
.actionbuttons:hover, .coorbox:hover, #menu > div:hover {
|
||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||
background-color: #363637;
|
||||
}
|
||||
|
||||
|
|
|
@ -162,7 +162,7 @@ tr:nth-child(even) {
|
|||
.menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all .1s cubic-bezier(.46,.03,.52,.96);
|
||||
transition: all .15s cubic-bezier(.46,.03,.52,.96);
|
||||
}
|
||||
|
||||
.menu.show {
|
||||
|
@ -341,6 +341,11 @@ tr:nth-child(even) {
|
|||
border-color: #dcddde;
|
||||
top: 30px;
|
||||
right: 40px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.ModalClose:hover {
|
||||
background-color: #e3e3e4;
|
||||
}
|
||||
|
||||
@media (max-width: 604px) {
|
||||
|
@ -376,7 +381,6 @@ tr:nth-child(even) {
|
|||
margin: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
height: 95%;
|
||||
}
|
||||
.chatinput {
|
||||
height: 22px;
|
||||
|
@ -393,6 +397,15 @@ tr:nth-child(even) {
|
|||
user-select: text;
|
||||
margin: 0;
|
||||
}
|
||||
#chatlink {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
right: 17px;
|
||||
top: 5px;
|
||||
color: #4a4a49;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.usermessages {
|
||||
font-size: 14px;
|
||||
|
@ -477,7 +490,7 @@ tr:nth-child(even) {
|
|||
}
|
||||
|
||||
#palettebox, #palettebox span {
|
||||
transition: 0.3s;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#palettebox .selected,
|
||||
|
@ -506,3 +519,16 @@ tr:nth-child(even) {
|
|||
.grecaptcha-badge {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--after-open{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--before-close{
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
@ -5,6 +5,6 @@
|
|||
|
||||
import configureStore from '../store/configureStore';
|
||||
|
||||
const store = configureStore();
|
||||
const store = configureStore(() => null);
|
||||
|
||||
export default store;
|
||||
|
|
31
src/utils/reactHookResize.js
Normal file
31
src/utils/reactHookResize.js
Normal file
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* @flex
|
||||
*
|
||||
* can be used in react components
|
||||
* to trigger on window resize
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
function useWindowSize() {
|
||||
const [windowSize, setWindowSize] = useState({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowSize({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
return windowSize;
|
||||
}
|
||||
|
||||
export default useWindowSize;
|
Loading…
Reference in New Issue
Block a user