add save button to bottom bar

This commit is contained in:
ghalestrilo 2020-08-17 15:21:37 -03:00
parent e996d49db3
commit 100a6a0637
4 changed files with 34 additions and 29 deletions

View file

@ -14,6 +14,7 @@ import Preferences from '../images/preferences.svg';
import Play from '../images/triangle-arrow-right.svg';
import More from '../images/more.svg';
import Code from '../images/code.svg';
import Save from '../images/save.svg';
import Terminal from '../images/terminal.svg';
@ -81,3 +82,4 @@ export const PlayIcon = withLabel(Play);
export const MoreIcon = withLabel(More);
export const TerminalIcon = withLabel(Terminal);
export const CodeIcon = withLabel(Code);
export const SaveIcon = withLabel(Save);

View file

@ -1,13 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { bindActionCreators } from 'redux';
import { useDispatch, useSelector } from 'react-redux';
import { remSize } from '../../theme';
import IconButton from './IconButton';
import { TerminalIcon } from '../../common/icons';
import * as IDEActions from '../../modules/IDE/actions/ide';
const BottomBarContent = styled.h2`
const BottomBarContent = styled.div`
display: grid;
grid-template-columns: repeat(8,1fr);
padding: ${remSize(8)};
svg {
@ -15,13 +14,7 @@ const BottomBarContent = styled.h2`
}
`;
export default () => {
const { expandConsole, collapseConsole } = bindActionCreators(IDEActions, useDispatch());
const { consoleIsExpanded } = useSelector(state => state.ide);
const actions = [{ icon: TerminalIcon, aria: 'Say Something', action: consoleIsExpanded ? collapseConsole : expandConsole }];
return (
const ActionStrip = ({ actions }) => (
<BottomBarContent>
{actions.map(({ icon, aria, action }) =>
(<IconButton
@ -30,6 +23,14 @@ export default () => {
key={`bottom-bar-${aria}`}
onClick={() => action()}
/>))}
</BottomBarContent>
);
</BottomBarContent>);
ActionStrip.propTypes = {
actions: PropTypes.arrayOf(PropTypes.shape({
icon: PropTypes.element.isRequired,
aria: PropTypes.string.isRequired,
action: PropTypes.func.isRequired
})).isRequired
};
export default ActionStrip;

1
client/images/save.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>

After

Width:  |  Height:  |  Size: 280 B

View file

@ -29,9 +29,10 @@ import { remSize } from '../../../theme';
// import OverlayManager from '../../../components/OverlayManager';
import ActionStrip from '../../../components/mobile/ActionStrip';
import useAsModal from '../../../components/useAsModal';
import { PreferencesIcon } from '../../../common/icons';
import { PreferencesIcon, TerminalIcon, SaveIcon } from '../../../common/icons';
import Dropdown from '../../../components/Dropdown';
import { useEffectWithComparison, useEventListener } from '../../../utils/custom-hooks';
import * as device from '../../../utils/device';
@ -147,10 +148,6 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) =
const doAutosave = () => autosaveProject(true);
console.log(user);
console.log(isUserOwner(props), project);
if (isUserOwner(props) && project.id) {
if (preferences.autosave && ide.unsavedChanges && !ide.justOpenedProject) {
if (file.name === oldFile.name && file.content !== oldFile.content) {
@ -172,8 +169,8 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) =
const MobileIDEView = (props) => {
const {
ide, preferences, project, selectedFile, user, params, unsavedChanges, collapseConsole,
stopSketch, startSketch, getProject, clearPersistedState, autosaveProject
ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject
} = props;
@ -216,6 +213,10 @@ const MobileIDEView = (props) => {
useEventListener('keydown', handleGlobalKeydown(props, cmController), false, [props]);
const projectActions =
[{ icon: TerminalIcon, aria: 'Toggle console open/closed', action: consoleIsExpanded ? collapseConsole : expandConsole },
{ icon: SaveIcon, aria: 'Save project', action: () => saveProject(cmController.getContent(), false, true) }
];
return (
<Screen fullscreen>
@ -246,7 +247,7 @@ const MobileIDEView = (props) => {
<Console />
</Expander>
)}
<ActionStrip />
<ActionStrip actions={projectActions} />
</Footer>
</Screen>
);