From 214f5d655a19724cea3ea80e0aa77734492b1ddc Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 10:55:54 -0300 Subject: [PATCH 01/19] :sparkles: make unsaved changes dot on project name --- client/components/mobile/Header.jsx | 6 ++++++ client/modules/IDE/pages/MobileIDEView.jsx | 17 +++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index cb6702ed..96e82177 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -35,6 +35,12 @@ const HeaderDiv = styled.div` } & svg path { fill: ${textColor} !important; } + + .editor__unsaved-changes svg { + width: ${remSize(16)}; + padding: 0px; + vertical-align: top + } `; const IconContainer = styled.div` diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index c33c6cda..fa08ef60 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -21,6 +21,7 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; import { PlayIcon, MoreIcon } from '../../../common/icons'; +import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg'; import IconButton from '../../../components/mobile/IconButton'; import Header from '../../../components/mobile/Header'; @@ -38,6 +39,16 @@ import Dropdown from '../../../components/Dropdown'; const isUserOwner = ({ project, user }) => project.owner && project.owner.id === user.id; +const getTitle = (title, unsavedChanges = false) => ( + + {title} + + {unsavedChanges && + } + + +); + const Expander = styled.div` height: ${props => (props.expanded ? remSize(160) : remSize(27))}; `; @@ -65,7 +76,7 @@ const MobileIDEView = (props) => { const { preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, user, params, - closeEditorOptions, showEditorOptions, + closeEditorOptions, showEditorOptions, unsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState } = props; @@ -99,7 +110,7 @@ const MobileIDEView = (props) => { return (
@@ -273,6 +284,8 @@ MobileIDEView.propTypes = { project_id: PropTypes.string, username: PropTypes.string }).isRequired, + + unsavedChanges: PropTypes.bool.isRequired }; function mapStateToProps(state) { From 7402a6b07d7a94b4be64cc8831e16f7298b29518 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 10:56:46 -0300 Subject: [PATCH 02/19] :recycle: rename getTitle to withChangeDot --- client/modules/IDE/pages/MobileIDEView.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index fa08ef60..59e4314f 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -39,7 +39,7 @@ import Dropdown from '../../../components/Dropdown'; const isUserOwner = ({ project, user }) => project.owner && project.owner.id === user.id; -const getTitle = (title, unsavedChanges = false) => ( +const withChangeDot = (title, unsavedChanges = false) => ( {title} @@ -110,7 +110,7 @@ const MobileIDEView = (props) => { return (
From 682db4def5fd5b06b6b9c0681712dc352e531186 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Wed, 12 Aug 2020 11:15:36 -0300 Subject: [PATCH 03/19] :recycle: connect --- client/modules/IDE/components/Editor.jsx | 57 ++++++++++++++- client/modules/IDE/pages/MobileIDEView.jsx | 82 +++------------------- 2 files changed, 64 insertions(+), 75 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index e07dd001..30aaf040 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -26,6 +26,8 @@ import { CSSLint } from 'csslint'; import { HTMLHint } from 'htmlhint'; import classNames from 'classnames'; import { debounce } from 'lodash'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; import '../../../utils/htmlmixed'; import '../../../utils/p5-javascript'; import '../../../utils/webGL-clike'; @@ -39,6 +41,16 @@ import beepUrl from '../../../sounds/audioAlert.mp3'; import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg'; import RightArrowIcon from '../../../images/right-arrow.svg'; import LeftArrowIcon from '../../../images/left-arrow.svg'; +import { getHTMLFile } from '../reducers/files'; + +import * as FileActions from '../actions/files'; +import * as IDEActions from '../actions/ide'; +import * as ProjectActions from '../actions/project'; +import * as EditorAccessibilityActions from '../actions/editorAccessibility'; +import * as PreferencesActions from '../actions/preferences'; +import * as UserActions from '../../User/actions'; +import * as ToastActions from '../actions/toast'; +import * as ConsoleActions from '../actions/console'; search(CodeMirror); @@ -411,4 +423,47 @@ Editor.defaultProps = { consoleEvents: [], }; -export default Editor; + +function mapStateToProps(state) { + return { + files: state.files, + file: + state.files.find(file => file.isSelectedFile) || + state.files.find(file => file.name === 'sketch.js') || + state.files.find(file => file.name !== 'root'), + htmlFile: getHTMLFile(state.files), + ide: state.ide, + preferences: state.preferences, + editorAccessibility: state.editorAccessibility, + user: state.user, + project: state.project, + toast: state.toast, + console: state.console, + + ...state.preferences, + ...state.ide, + ...state.project, + ...state.editorAccessibility, + isExpanded: state.ide.consoleIsExpanded, + projectSavedTime: state.project.updatedAt + }; +} + +function mapDispatchToProps(dispatch) { + return bindActionCreators( + Object.assign( + {}, + EditorAccessibilityActions, + FileActions, + ProjectActions, + IDEActions, + PreferencesActions, + UserActions, + ToastActions, + ConsoleActions + ), + dispatch + ); +} + +export default connect(mapStateToProps, mapDispatchToProps)(Editor); diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 59e4314f..0dcedb44 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -74,16 +74,14 @@ const getNatOptions = (username = undefined) => const MobileIDEView = (props) => { const { - preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, - selectedFile, updateFileContent, files, user, params, - closeEditorOptions, showEditorOptions, unsavedChanges, - startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, - showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState + ide, project, selectedFile, user, params, + stopSketch, startSketch, getProject, clearPersistedState } = props; const [tmController, setTmController] = useState(null); // eslint-disable-line const { username } = user; + const { unsavedChanges } = ide; const [triggerNavDropdown, NavDropDown] = useAsModal( {
- +