✨ make unsaved changes dot on project name
This commit is contained in:
parent
a28a4a5c83
commit
214f5d655a
2 changed files with 21 additions and 2 deletions
|
@ -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`
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue