self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-04-17 11:26:26 +02:00
Code Issues Releases Activity

Electron: styling

Browse Source
This commit is contained in:
Laurent Cozic 2017-11-12 17:53:26 +00:00
parent 6d2a5a7b32
commit 6e75c93f3c
5 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ElectronClient/app/gui/SideBar.jsx
View File

@ -73,6 +73,7 @@ class SideBarComponent extends React.Component {
display: 'flex', display: 'flex',
alignItems: 'left', alignItems: 'left',
justifyContent: 'top', justifyContent: 'top',
flexDirection: 'column',
marginTop: 10, marginTop: 10,
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
@ -182,8 +183,11 @@ class SideBarComponent extends React.Component {
} }
let lines = Synchronizer.reportToLines(this.props.syncReport); let lines = Synchronizer.reportToLines(this.props.syncReport);
while (lines.length < 10) lines.push(''); // Add blank lines so that height of report text is fixed and doesn't affect scrolling console.info(lines);
const syncReportText = lines.join("\n"); const syncReportText = [];
for (let i = 0; i < lines.length; i++) {
syncReportText.push(<div key={i}>{lines[i]}</div>);
}
items.push(this.synchronizeButton(this.props.syncStarted ? _('Cancel') : _('Synchronise'))); items.push(this.synchronizeButton(this.props.syncStarted ? _('Cancel') : _('Synchronise')));

14
ElectronClient/app/gui/note-viewer/index.html
View File

@ -131,4 +131,18 @@ contentElement.addEventListener('scroll', function(e) {
const m = maxScrollTop(); const m = maxScrollTop();
ipcRenderer.sendToHost('percentScroll', m ? contentElement.scrollTop / m : 0); ipcRenderer.sendToHost('percentScroll', m ? contentElement.scrollTop / m : 0);
}); });
// Disable drag and drop otherwise it's possible to drop a URL
// on it and it will open in the view as a website.
document.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
});
document.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
});
webview.addEventListener('dragover', function(e) {
e.preventDefault();
});
</script> </script>

19
ElectronClient/app/style.css
View File

@ -15,7 +15,12 @@ body, textarea {
.side-bar .list-item:hover, .side-bar .list-item:hover,
.side-bar .synchronize-button:hover { .side-bar .synchronize-button:hover {
background-color: #533d7d; background-color: #453E53;
}
.side-bar .list-item:active,
.side-bar .synchronize-button:active {
background-color: #564B6C;
} }
.header .button:hover { .header .button:hover {
@ -24,6 +29,12 @@ body, textarea {
box-sizing: 'border-box'; box-sizing: 'border-box';
} }
.header .button:active {
background-color: rgba(0,160,255,0.2);
border: 1px solid rgba(0,160,255,0.7);
box-sizing: 'border-box';
}
.header .button { .header .button {
border: 1px solid rgba(0,160,255,0); border: 1px solid rgba(0,160,255,0);
} }
@ -32,4 +43,10 @@ body, textarea {
background-color: rgba(0,0,0,0.05) !important; background-color: rgba(0,0,0,0.05) !important;
border: 1px solid rgba(0,0,0,0.10); border: 1px solid rgba(0,0,0,0.10);
border-radius: 5px; border-radius: 5px;
}
.icon-button:active {
background-color: rgba(0,0,0,0.10) !important;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 5px;
} }

4
ElectronClient/app/theme.js
View File

@ -20,9 +20,9 @@ const globalStyle = {
buttonMinHeight: 30, buttonMinHeight: 30,
textAreaLineHeight: 17, textAreaLineHeight: 17,
backgroundColor2: "#3B314E", backgroundColor2: "#2B2634",
color2: "#ffffff", color2: "#ffffff",
selectedColor2: "#674b98", selectedColor2: "#5A4D70",
headerHeight: 35, headerHeight: 35,
headerButtonHPadding: 6, headerButtonHPadding: 6,

4
ReactNativeClient/lib/models/setting.js
View File

@ -346,7 +346,7 @@ Setting.metadata_ = {
'locale': { value: defaultLocale(), type: Setting.TYPE_STRING, isEnum: true, public: true, label: () => _('Language'), options: () => { 'locale': { value: defaultLocale(), type: Setting.TYPE_STRING, isEnum: true, public: true, label: () => _('Language'), options: () => {
return supportedLocalesToLanguages(); return supportedLocalesToLanguages();
}}, }},
'theme': { value: Setting.THEME_LIGHT, type: Setting.TYPE_INT, public: true, appTypes: ['mobile', 'desktop'], isEnum: true, label: () => _('Theme'), options: () => { 'theme': { value: Setting.THEME_LIGHT, type: Setting.TYPE_INT, public: true, appTypes: ['mobile'], isEnum: true, label: () => _('Theme'), options: () => {
let output = {}; let output = {};
output[Setting.THEME_LIGHT] = _('Light'); output[Setting.THEME_LIGHT] = _('Light');
output[Setting.THEME_DARK] = _('Dark'); output[Setting.THEME_DARK] = _('Dark');
@ -374,7 +374,7 @@ Setting.metadata_ = {
86400: _('%d hours', 24), 86400: _('%d hours', 24),
}; };
}}, }},
'showAdvancedOptions': { value: false, type: Setting.TYPE_BOOL, public: true, appTypes: ['mobile', 'desktop'], label: () => _('Show advanced options') }, 'showAdvancedOptions': { value: false, type: Setting.TYPE_BOOL, public: true, appTypes: ['mobile' ], label: () => _('Show advanced options') },
'noteVisiblePanes': { value: ['editor', 'viewer'], type: Setting.TYPE_ARRAY, public: false, appTypes: ['desktop'] }, 'noteVisiblePanes': { value: ['editor', 'viewer'], type: Setting.TYPE_ARRAY, public: false, appTypes: ['desktop'] },
}; };