make unsaved changes dot on project name

This commit is contained in:
ghalestrilo 2020-08-12 10:55:54 -03:00
parent a28a4a5c83
commit 214f5d655a
2 changed files with 21 additions and 2 deletions

View file

@ -35,6 +35,12 @@ const HeaderDiv = styled.div`
} }
& svg path { fill: ${textColor} !important; } & svg path { fill: ${textColor} !important; }
.editor__unsaved-changes svg {
width: ${remSize(16)};
padding: 0px;
vertical-align: top
}
`; `;
const IconContainer = styled.div` const IconContainer = styled.div`

View file

@ -21,6 +21,7 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports // Local Imports
import Editor from '../components/Editor'; import Editor from '../components/Editor';
import { PlayIcon, MoreIcon } from '../../../common/icons'; import { PlayIcon, MoreIcon } from '../../../common/icons';
import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
import IconButton from '../../../components/mobile/IconButton'; import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header'; import Header from '../../../components/mobile/Header';
@ -38,6 +39,16 @@ import Dropdown from '../../../components/Dropdown';
const isUserOwner = ({ project, user }) => const isUserOwner = ({ project, user }) =>
project.owner && project.owner.id === user.id; project.owner && project.owner.id === user.id;
const getTitle = (title, unsavedChanges = false) => (
<span>
{title}
<span className="editor__unsaved-changes">
{unsavedChanges &&
<UnsavedChangesDotIcon role="img" aria-label="Sketch has unsaved changes" focusable="false" />}
</span>
</span>
);
const Expander = styled.div` const Expander = styled.div`
height: ${props => (props.expanded ? remSize(160) : remSize(27))}; height: ${props => (props.expanded ? remSize(160) : remSize(27))};
`; `;
@ -65,7 +76,7 @@ const MobileIDEView = (props) => {
const { const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
selectedFile, updateFileContent, files, user, params, selectedFile, updateFileContent, files, user, params,
closeEditorOptions, showEditorOptions, closeEditorOptions, showEditorOptions, unsavedChanges,
startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState
} = props; } = props;
@ -99,7 +110,7 @@ const MobileIDEView = (props) => {
return ( return (
<Screen fullscreen> <Screen fullscreen>
<Header <Header
title={project.name} title={getTitle(project.name, unsavedChanges)}
subtitle={selectedFile.name} subtitle={selectedFile.name}
> >
<NavItem> <NavItem>
@ -273,6 +284,8 @@ MobileIDEView.propTypes = {
project_id: PropTypes.string, project_id: PropTypes.string,
username: PropTypes.string username: PropTypes.string
}).isRequired, }).isRequired,
unsavedChanges: PropTypes.bool.isRequired
}; };
function mapStateToProps(state) { function mapStateToProps(state) {