Electron: started unsynchronisable items UI

ElectronClient/app/gui/MainScreen.jsx

@@ -229,8 +229,8 @@ class MainScreenComponent extends React.Component {
 		}
 	}
 
-	styles(themeId, width, height) {
+	styles(themeId, width, height, messageBoxVisible) {
-		const styleKey = themeId + '_' + width + '_' + height;
+		const styleKey = themeId + '_' + width + '_' + height + '_' + messageBoxVisible;
 		if (styleKey === this.styleKey_) return this.styles_;
 
 		const theme = themeStyle(themeId);
@@ -239,12 +239,21 @@ class MainScreenComponent extends React.Component {
 
 		this.styles_ = {};
 
-		const rowHeight = height - theme.headerHeight;
-
 		this.styles_.header = {
 			width: width,
 		};
 
+		this.styles_.messageBox = {
+			width: width,
+			height: 30,
+			display: 'flex',
+			alignItems: 'center',
+			paddingLeft: 10,
+			backgroundColor: theme.warningBackgroundColor,
+		}
+
+		const rowHeight = height - theme.headerHeight - (messageBoxVisible ? this.styles_.messageBox.height : 0);
+
 		this.styles_.sideBar = {
 			width: Math.floor(layoutUtils.size(width * .2, 150, 300)),
 			height: rowHeight,
@@ -280,7 +289,8 @@ class MainScreenComponent extends React.Component {
 		const folders = this.props.folders;
 		const notes = this.props.notes;
 
-		const styles = this.styles(this.props.theme, style.width, style.height);
+		const styles = this.styles(this.props.theme, style.width, style.height, true);
+		const theme = themeStyle(this.props.theme);
 
 		const headerButtons = [];
 
@@ -325,6 +335,21 @@ class MainScreenComponent extends React.Component {
 			}
 		}
 
+		const onViewDisabledItemsClick = () => {
+			this.props.dispatch({
+				type: 'NAV_GO',
+				routeName: 'SyncDisabledItems',
+			});
+		}
+
+		const messageComp = (
+			<div style={styles.messageBox}>
+				<span style={theme.textStyle}>
+					{_('Some items cannot be synchronised.')} <a href="#" onClick={() => { onViewDisabledItemsClick() }}>{_('View them now')}</a>
+				</span>
+			</div>
+		);
+
 		return (
 			<div style={style}>
 				<PromptDialog
@@ -339,6 +364,7 @@ class MainScreenComponent extends React.Component {
 					buttons={promptOptions && ('buttons' in promptOptions) ? promptOptions.buttons : null}
 					inputType={promptOptions && ('inputType' in promptOptions) ? promptOptions.inputType : null} />
 				<Header style={styles.header} showBackButton={false} buttons={headerButtons} />
+				{messageComp}
 				<SideBar style={styles.sideBar} />
 				<NoteList style={styles.noteList} />
 				<NoteText style={styles.noteText} visiblePanes={this.props.noteVisiblePanes} />

ElectronClient/app/gui/Root.jsx

@@ -8,6 +8,7 @@ const { Setting } = require('lib/models/setting.js');
 
 const { MainScreen } = require('./MainScreen.min.js');
 const { OneDriveLoginScreen } = require('./OneDriveLoginScreen.min.js');
+const { SyncDisabledItemsScreen } = require('./SyncDisabledItemsScreen.min.js');
 const { ImportScreen } = require('./ImportScreen.min.js');
 const { ConfigScreen } = require('./ConfigScreen.min.js');
 const { Navigator } = require('./Navigator.min.js');
@@ -75,6 +76,7 @@ class RootComponent extends React.Component {
 			OneDriveLogin: { screen: OneDriveLoginScreen, title: () => _('OneDrive Login') },
 			Import: { screen: ImportScreen, title: () => _('Import') },
 			Config: { screen: ConfigScreen, title: () => _('Options') },
+			SyncDisabledItems: { screen: SyncDisabledItemsScreen, title: () => _('Items that cannot be synchronised') },
 		};
 
 		return (

ElectronClient/app/gui/SyncDisabledItemsScreen.jsx

@@ -0,0 +1,45 @@
+const React = require('react');
+const { connect } = require('react-redux');
+const { reg } = require('lib/registry.js');
+const { Setting } = require('lib/models/setting.js');
+const { bridge } = require('electron').remote.require('./bridge');
+const { Header } = require('./Header.min.js');
+const { themeStyle } = require('../theme.js');
+const { _ } = require('lib/locale.js');
+
+class SyncDisabledItemsScreenComponent extends React.Component {
+
+	render() {
+		const theme = themeStyle(this.props.theme);
+		const style = this.props.style;
+
+		const headerStyle = {
+			width: style.width,
+		};
+
+		const containerStyle = {
+			padding: 10,
+		};
+		
+		return (
+			<div style={style}>
+				<Header style={headerStyle} />
+				<div style={containerStyle}>
+				</div>
+			</div>
+		);
+	}
+
+}
+
+const mapStateToProps = (state) => {
+	return {
+		theme: state.settings.theme,
+		settings: state.settings,
+		locale: state.settings.locale,
+	};
+};
+
+const SyncDisabledItemsScreen = connect(mapStateToProps)(SyncDisabledItemsScreenComponent);
+
+module.exports = { SyncDisabledItemsScreen };

ElectronClient/app/theme.js

@@ -25,6 +25,8 @@ const globalStyle = {
 	selectedColor2: "#5A4D70",
 	colorError2: "#ff6c6c",
 
+	warningBackgroundColor: "#FFD08D",
+
 	headerHeight: 35,
 	headerButtonHPadding: 6,