✨ 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; }
|
& 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`
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue