diff --git a/ElectronClient/app/gui/MainScreen.jsx b/ElectronClient/app/gui/MainScreen.jsx
index 6f41da59b..74fa3d457 100644
--- a/ElectronClient/app/gui/MainScreen.jsx
+++ b/ElectronClient/app/gui/MainScreen.jsx
@@ -229,8 +229,8 @@ class MainScreenComponent extends React.Component {
}
}
- styles(themeId, width, height) {
- const styleKey = themeId + '_' + width + '_' + height;
+ styles(themeId, width, height, messageBoxVisible) {
+ 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 = (
+
+ );
+
return (
+ {messageComp}
diff --git a/ElectronClient/app/gui/Root.jsx b/ElectronClient/app/gui/Root.jsx
index b009ab607..c54b57799 100644
--- a/ElectronClient/app/gui/Root.jsx
+++ b/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 (
diff --git a/ElectronClient/app/gui/SyncDisabledItemsScreen.jsx b/ElectronClient/app/gui/SyncDisabledItemsScreen.jsx
new file mode 100644
index 000000000..1da491635
--- /dev/null
+++ b/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 (
+
+ );
+ }
+
+}
+
+const mapStateToProps = (state) => {
+ return {
+ theme: state.settings.theme,
+ settings: state.settings,
+ locale: state.settings.locale,
+ };
+};
+
+const SyncDisabledItemsScreen = connect(mapStateToProps)(SyncDisabledItemsScreenComponent);
+
+module.exports = { SyncDisabledItemsScreen };
\ No newline at end of file
diff --git a/ElectronClient/app/theme.js b/ElectronClient/app/theme.js
index d8a26abdf..1f02828de 100644
--- a/ElectronClient/app/theme.js
+++ b/ElectronClient/app/theme.js
@@ -25,6 +25,8 @@ const globalStyle = {
selectedColor2: "#5A4D70",
colorError2: "#ff6c6c",
+ warningBackgroundColor: "#FFD08D",
+
headerHeight: 35,
headerButtonHPadding: 6,