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; }
.editor__unsaved-changes svg {
width: ${remSize(16)};
padding: 0px;
vertical-align: top
}
`;
const IconContainer = styled.div`

View file

@ -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) => (
<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`
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 (
<Screen fullscreen>
<Header
title={project.name}
title={getTitle(project.name, unsavedChanges)}
subtitle={selectedFile.name}
>
<NavItem>
@ -273,6 +284,8 @@ MobileIDEView.propTypes = {
project_id: PropTypes.string,
username: PropTypes.string
}).isRequired,
unsavedChanges: PropTypes.bool.isRequired
};
function mapStateToProps(state) {