From 580d121c2a33b2ffa8f2f5e22d14a6f5f69ff907 Mon Sep 17 00:00:00 2001 From: Vivek Date: Mon, 15 Jan 2024 19:15:05 +0530 Subject: [PATCH 1/4] Removed the ability to edit w/o duplicate. --- .../IDE/components/Editor/MobileEditor.jsx | 1 + .../modules/IDE/components/Editor/index.jsx | 26 ++++++++- .../IDE/components/Header/MobileNav.jsx | 50 ++++++++++++++--- .../modules/IDE/components/Header/Toolbar.jsx | 53 +++++++++++++------ client/modules/IDE/pages/IDEView.jsx | 3 ++ client/styles/components/_editor.scss | 3 ++ client/styles/components/_toolbar.scss | 46 ++++++++++++++-- 7 files changed, 154 insertions(+), 28 deletions(-) diff --git a/client/modules/IDE/components/Editor/MobileEditor.jsx b/client/modules/IDE/components/Editor/MobileEditor.jsx index c3e56afd79..90f239ead7 100644 --- a/client/modules/IDE/components/Editor/MobileEditor.jsx +++ b/client/modules/IDE/components/Editor/MobileEditor.jsx @@ -33,6 +33,7 @@ export const EditorContainer = styled.div` export const EditorHolder = styled.div` min-height: 100%; + pointer-events: ${(props) => (props.readOnly ? 'none' : '')}; `; export const PreviewWrapper = styled.div` diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx index cd060d3bb5..66f09d0198 100644 --- a/client/modules/IDE/components/Editor/index.jsx +++ b/client/modules/IDE/components/Editor/index.jsx @@ -41,7 +41,7 @@ import { CSSLint } from 'csslint'; import { HTMLHint } from 'htmlhint'; import classNames from 'classnames'; import { debounce } from 'lodash'; -import { connect } from 'react-redux'; +import { connect, useSelector } from 'react-redux'; import { bindActionCreators } from 'redux'; import MediaQuery from 'react-responsive'; import '../../../../utils/htmlmixed'; @@ -423,6 +423,17 @@ class Editor extends React.Component { closeOnUnfocus: false }; + const getUserAndProject = () => { + const { user, project } = useSelector((state) => ({ + user: state.user, + project: state.project + })); + + return { user, project }; + }; + + getUserAndProject(); + if (_cm.options.mode === 'javascript') { // JavaScript CodeMirror.showHint( @@ -505,7 +516,10 @@ class Editor extends React.Component { const editorHolderClass = classNames({ 'editor-holder': true, 'editor-holder--hidden': - this.props.file.fileType === 'folder' || this.props.file.url + this.props.file.fileType === 'folder' || this.props.file.url, + // eslint-disable-next-line no-dupe-keys + 'editor-holder--readonly': + this.props.project.owner?.username !== this.props.user.username }); return ( @@ -567,6 +581,10 @@ class Editor extends React.Component {
{ this.codemirrorContainer = element; }} @@ -588,6 +606,10 @@ class Editor extends React.Component { } Editor.propTypes = { + // eslint-disable-next-line react/forbid-prop-types + user: PropTypes.object.isRequired, + // eslint-disable-next-line react/forbid-prop-types + project: PropTypes.object.isRequired, autocloseBracketsQuotes: PropTypes.bool.isRequired, autocompleteHinter: PropTypes.bool.isRequired, lineNumbers: PropTypes.bool.isRequired, diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx index 9d81cf6d22..726ab37902 100644 --- a/client/modules/IDE/components/Header/MobileNav.jsx +++ b/client/modules/IDE/components/Header/MobileNav.jsx @@ -35,6 +35,8 @@ import { setLanguage } from '../../actions/preferences'; import Overlay from '../../../App/components/Overlay'; import ProjectName from './ProjectName'; import CollectionCreate from '../../../User/components/CollectionCreate'; +import { cloneProject } from '../../actions/project'; +import EditIcon from '../../../../images/pencil.svg'; const Nav = styled(NavBar)` background: ${prop('MobilePanel.default.background')}; @@ -67,15 +69,20 @@ const LogoContainer = styled.div` const Title = styled.div` display: flex; - flex-direction: column; - gap: ${remSize(2)}; + gap: ${remSize(10)}; * { padding: 0; margin: 0; } - > h5 { + p { + margin-left: 2px; + padding: 3px 8px; + } + + h5 { + margin-top: 2px; font-size: ${remSize(13)}; font-weight: normal; } @@ -205,6 +212,8 @@ const MobileNav = () => { const user = useSelector((state) => state.user); const { t } = useTranslation(); + const theme = useSelector((state) => state.preferences.theme); + console.log(theme); const editorLink = useSelector(selectSketchPath); const pageName = useWhatPage(); @@ -228,7 +237,7 @@ const MobileNav = () => { } const title = useMemo(resolveTitle, [pageName, project.name]); - + const dispatch = useDispatch(); const Logo = AsteriskIcon; return (