diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js index 978eb0003..36dd5f83f 100644 --- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js +++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js @@ -20,9 +20,9 @@ function SessionsMenu(props) { const capturingAll = props.captureRate && props.captureRate.get('captureAll'); - useEffect(() => { - showModal(, {}); - }, []) + // useEffect(() => { + // showModal(, {}); + // }, []) return (
@@ -30,8 +30,8 @@ function SessionsMenu(props) {
Sessions
- {capturingAll && Manage} - { !capturingAll && ( + showModal(, { right: true })}>Manage + {/* { !capturingAll && ( - )} + )} */}
+ {/*
showModal(, {})}> + Capture, Listing, and Timezone Settings +
*/}
+ {component} , document.querySelector("#modal-root"), diff --git a/frontend/app/components/Modal/ModalOverlay.css b/frontend/app/components/Modal/ModalOverlay.css index e3e33562a..806b59137 100644 --- a/frontend/app/components/Modal/ModalOverlay.css +++ b/frontend/app/components/Modal/ModalOverlay.css @@ -7,13 +7,26 @@ /* transition: all 0.3s ease-in-out; */ animation: fade 1s forwards; } + .slide { position: absolute; + /* left: -100%; */ + /* -webkit-animation: slide 0.5s forwards; + animation: slide 0.5s forwards; */ +} + +.slideLeft { left: -100%; -webkit-animation: slide 0.5s forwards; animation: slide 0.5s forwards; } +.slideRight { + right: -100%; + -webkit-animation: slideRight 0.5s forwards; + animation: slideRight 0.5s forwards; +} + @keyframes fade { 0% { opacity: 0; @@ -29,4 +42,12 @@ @keyframes slide { 100% { left: 0; } +} + +@-webkit-keyframes slideRight { + 100% { right: 0; } +} + +@keyframes slideRight { + 100% { right: 0%; } } \ No newline at end of file diff --git a/frontend/app/components/Modal/ModalOverlay.tsx b/frontend/app/components/Modal/ModalOverlay.tsx index ef46024e1..270840a65 100644 --- a/frontend/app/components/Modal/ModalOverlay.tsx +++ b/frontend/app/components/Modal/ModalOverlay.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { useModal } from 'App/components/Modal'; import stl from './ModalOverlay.css' +import cn from 'classnames'; -function ModalOverlay({ children }) { +function ModalOverlay({ children, left = false, right = false }) { let modal = useModal(); return ( @@ -12,7 +13,7 @@ function ModalOverlay({ children }) { className={stl.overlay} style={{ background: "rgba(0,0,0,0.5)" }} /> -
{children}
+
{children}
); } diff --git a/frontend/app/components/Modal/index.tsx b/frontend/app/components/Modal/index.tsx index a653ed24f..339a79fbd 100644 --- a/frontend/app/components/Modal/index.tsx +++ b/frontend/app/components/Modal/index.tsx @@ -4,7 +4,9 @@ import Modal from './Modal'; const ModalContext = createContext({ component: null, - props: {}, + props: { + right: false, + }, showModal: (component: any, props: any) => {}, hideModal: () => {} }); diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js index ab1baba3e..abbf40803 100644 --- a/frontend/app/components/Session_/Player/Controls/Controls.js +++ b/frontend/app/components/Session_/Player/Controls/Controls.js @@ -276,13 +276,13 @@ export default class Controls extends React.Component { label="Back" icon="replay-10" /> - + /> */} )} diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx index c4523cf25..85418f5fc 100644 --- a/frontend/app/components/shared/Select/Select.tsx +++ b/frontend/app/components/shared/Select/Select.tsx @@ -4,11 +4,11 @@ import Select from 'react-select'; interface Props { options: any[]; isSearchable?: boolean; - defaultValue?: any; + defaultValue?: string; plain?: boolean; [x:string]: any; } -export default function({ plain = false, options, isSearchable = false, defaultValue, ...rest }: Props) { +export default function({ plain = false, options, isSearchable = false, defaultValue = '', ...rest }: Props) { const customStyles = { option: (provided, state) => ({ ...provided, @@ -39,11 +39,12 @@ export default function({ plain = false, options, isSearchable = false, defaultV return { ...provided, opacity, transition }; } } + const defaultSelected = defaultValue ? options.find(x => x.value === defaultValue) : options[0]; return ( { - sessionSettings.updateKey('timezone', value); + defaultValue={timezone} + className="w-full" + onChange={({ value }) => { + setTimezone(value); setChanged(true); }} />
diff --git a/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx index 1779a2e01..d9f137daa 100644 --- a/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx +++ b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx @@ -14,9 +14,9 @@ const periodOptions = [ ] function ListingVisibility(props) { + const [changed, setChanged] = React.useState(false); const { settingsStore } = useStore(); const sessionSettings = useObserver(() => settingsStore.sessionSettings) - const [changed, setChanged] = React.useState(false); const [durationSettings, setDurationSettings] = React.useState(sessionSettings.durationFilter); return ( @@ -24,28 +24,41 @@ function ListingVisibility(props) {

Listing Visibility

Do not show sessions duration with.
-
+
{ + setDurationSettings({ ...durationSettings, count: value }); + setChanged(true); + }} />