Skip to content

Commit

Permalink
Merge pull request processing#2347 from dewanshDT/dewanshmobile/FAB
Browse files Browse the repository at this point in the history
FloatingActionButton: added the component to be used in smaller views
  • Loading branch information
lindapaiste authored Sep 3, 2023
2 parents 37ee7af + b5aae6b commit f7ace88
Showing 1 changed file with 65 additions and 0 deletions.
65 changes: 65 additions & 0 deletions client/modules/IDE/components/FloatingActionButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react';
import styled from 'styled-components';
import classNames from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import PlayIcon from '../../../images/triangle-arrow-right.svg';
import StopIcon from '../../../images/stop.svg';
import { prop, remSize } from '../../../theme';
import { startSketch, stopSketch } from '../actions/ide';

const Button = styled.button`
position: fixed;
right: ${remSize(20)};
bottom: ${remSize(20)};
height: ${remSize(60)};
width: ${remSize(60)};
z-index: 3;
padding: 0;
${prop('Button.secondary.default')};
aspect-ratio: 1/1;
border-radius: 99999px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
&.stop {
${prop('Button.primary.default')}
g {
fill: ${prop('Button.primary.default.foreground')};
}
}
> svg {
width: 35%;
height: 35%;
> g {
fill: ${prop('Button.primary.hover.foreground')};
}
}
`;

const FloatingActionButton = (props) => {
const isPlaying = useSelector((state) => state.ide.isPlaying);
const dispatch = useDispatch();

return (
<Button
className={classNames({ stop: isPlaying })}
style={{ paddingLeft: isPlaying ? 0 : remSize(5) }}
onClick={() => {
if (!isPlaying) {
props.syncFileContent();
dispatch(startSketch());
} else dispatch(stopSketch());
}}
>
{isPlaying ? <StopIcon /> : <PlayIcon />}
</Button>
);
};

FloatingActionButton.propTypes = {
syncFileContent: PropTypes.func.isRequired
};

export default FloatingActionButton;

0 comments on commit f7ace88

Please sign in to comment.