self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-30 10:36:35 +02:00
Code Issues Releases Activity

Mobile: Custom mobile editor font (#1797)

Browse Source 
* Make editor font "Menlo"

* Add .vscode/* to .gitignore

* Add "editor font" config UI

* Render "editor font" chosen in config

* Add shim.mobilePlatform()

* Use style.editor.fontFamily rather than editorFont

* Add default font option

* Fixed for Android
This commit is contained in:
Devon Zuegel 2019-09-17 13:32:00 -07:00 committed by Laurent Cozic
parent fe9a037cf9
commit 4ba4910a9c
5 changed files with 73 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ReactNativeClient/lib/components/global-style.js
View File

@ -98,9 +98,25 @@ function addExtraStyles(style) {
return style;
}
function editorFont(fontId) {
// IMPORTANT: The font mapping must match the one in Setting.js
const fonts = {
[Setting.FONT_DEFAULT]: null,
[Setting.FONT_MENLO]: 'Menlo',
[Setting.FONT_COURIER_NEW]: 'Courier New',
[Setting.FONT_AVENIR]: 'Avenir',
[Setting.FONT_MONOSPACE]: 'monospace',
};
if (!fontId) {
console.warn('Editor font not set! Falling back to default font."');
fontId = Setting.FONT_DEFAULT;
}
return fonts[fontId];
}
function themeStyle(theme) {
if (!theme) {
console.warn('Theme not set!! Defaulting to Light theme');
console.warn('Theme not set! Defaulting to Light theme.');
theme = Setting.THEME_LIGHT;
}
@ -140,4 +156,4 @@ function themeStyle(theme) {
return addExtraStyles(themeCache_[theme]);
}
module.exports = { globalStyle, themeStyle };
module.exports = { globalStyle, themeStyle, editorFont };

4
ReactNativeClient/lib/components/screens/note.js
View File

@ -24,7 +24,7 @@ const { reg } = require('lib/registry.js');
const { shim } = require('lib/shim.js');
const ResourceFetcher = require('lib/services/ResourceFetcher');
const { BaseScreenComponent } = require('lib/components/base-screen.js');
const { themeStyle } = require('lib/components/global-style.js');
const { themeStyle, editorFont } = require('lib/components/global-style.js');
const { dialogs } = require('lib/dialogs.js');
const DialogBox = require('react-native-dialogbox').default;
const { NoteBodyViewer } = require('lib/components/note-body-viewer.js');
@ -209,6 +209,7 @@ class NoteScreenComponent extends BaseScreenComponent {
color: theme.color,
backgroundColor: theme.backgroundColor,
fontSize: theme.fontSize,
fontFamily: editorFont(this.props.editorFont),
},
noteBodyViewer: {
flex: 1,
@ -916,6 +917,7 @@ const NoteScreen = connect(state => {
folders: state.folders,
searchQuery: state.searchQuery,
theme: state.settings.theme,
editorFont: [state.settings['style.editor.fontFamily']],
ftsEnabled: state.settings['db.ftsEnabled'],
sharedData: state.sharedData,
showSideMenu: state.showSideMenu,

44
ReactNativeClient/lib/models/Setting.js
View File

@ -22,6 +22,7 @@ class Setting extends BaseModel {
if (this.metadata_) return this.metadata_;
const platform = shim.platformName();
const mobilePlatform = shim.mobilePlatform();
const emptyDirWarning = _('Attention: If you change this location, make sure you copy all your content to it before syncing, otherwise all files will be removed! See the FAQ for more details: %s', 'https://joplinapp.org/faq/');
@ -334,7 +335,42 @@ class Setting extends BaseModel {
'encryption.passwordCache': { value: {}, type: Setting.TYPE_OBJECT, public: false, secure: true },
'style.zoom': { value: 100, type: Setting.TYPE_INT, public: true, appTypes: ['desktop'], section: 'appearance', label: () => _('Global zoom percentage'), minimum: 50, maximum: 500, step: 10 },
'style.editor.fontSize': { value: 13, type: Setting.TYPE_INT, public: true, appTypes: ['desktop'], section: 'appearance', label: () => _('Editor font size'), minimum: 4, maximum: 50, step: 1 },
'style.editor.fontFamily': { value: '', type: Setting.TYPE_STRING, public: true, appTypes: ['desktop'], section: 'appearance', label: () => _('Editor font family'), description: () => _('This must be *monospace* font or it will not work properly. If the font is incorrect or empty, it will default to a generic monospace font.') },
'style.editor.fontFamily':
(!!mobilePlatform) ?
({
value: Setting.FONT_DEFAULT,
type: Setting.TYPE_STRING,
isEnum: true,
public: true,
label: () => _('Editor font'),
appTypes: ['mobile'],
section: 'appearance',
options: () => {
// IMPORTANT: The font mapping must match the one in global-styles.js::editorFont()
if (mobilePlatform === 'ios') {
return {
[Setting.FONT_DEFAULT]: 'Default',
[Setting.FONT_MENLO]: 'Menlo',
[Setting.FONT_COURIER_NEW]: 'Courier New',
[Setting.FONT_AVENIR]: 'Avenir',
};
}
return {
[Setting.FONT_DEFAULT]: 'Default',
[Setting.FONT_MONOSPACE]: 'Monospace',
};
},
}) : {
value: '',
type: Setting.TYPE_STRING,
public: true,
appTypes: ['desktop'],
section: 'appearance',
label: () => _('Editor font family'),
description: () =>
_('This must be *monospace* font or it will not work properly. If the font ' +
'is incorrect or empty, it will default to a generic monospace font.'),
},
'style.sidebar.width': { value: 150, minimum: 80, maximum: 400, type: Setting.TYPE_INT, public: false, appTypes: ['desktop'] },
'style.noteList.width': { value: 150, minimum: 80, maximum: 400, type: Setting.TYPE_INT, public: false, appTypes: ['desktop'] },
autoUpdateEnabled: { value: true, type: Setting.TYPE_BOOL, section: 'application', public: true, appTypes: ['desktop'], label: () => _('Automatically update the application') },
@ -847,6 +883,12 @@ Setting.THEME_DARK = 2;
Setting.THEME_SOLARIZED_LIGHT = 3;
Setting.THEME_SOLARIZED_DARK = 4;
Setting.FONT_DEFAULT = 0;
Setting.FONT_MENLO = 1;
Setting.FONT_COURIER_NEW = 2;
Setting.FONT_AVENIR = 3;
Setting.FONT_MONOSPACE = 4;
Setting.DATE_FORMAT_1 = 'DD/MM/YYYY';
Setting.DATE_FORMAT_2 = 'DD/MM/YY';
Setting.DATE_FORMAT_3 = 'MM/DD/YYYY';

6
ReactNativeClient/lib/shim-init-react.js
View File

@ -6,7 +6,7 @@ const { generateSecureRandom } = require('react-native-securerandom');
const FsDriverRN = require('lib/fs-driver-rn.js').FsDriverRN;
const urlValidator = require('valid-url');
const { Buffer } = require('buffer');
const { Linking } = require('react-native');
const { Linking, Platform } = require('react-native');
const mimeUtils = require('lib/mime-utils.js').mime;
const { basename, fileExtension } = require('lib/path-utils.js');
const { uuid } = require('lib/uuid.js');
@ -145,6 +145,10 @@ function shimInit() {
});
};
shim.mobilePlatform = () => {
return Platform.OS;
};
// NOTE: This is a limited version of createResourceFromPath - unlike the Node version, it
// only really works with images. It does not resize the image either.
shim.createResourceFromPath = async function(filePath, defaultProps = null) {

4
ReactNativeClient/lib/shim.js
View File

@ -41,6 +41,10 @@ shim.platformName = function() {
throw new Error('Cannot determine platform');
};
shim.mobilePlatform = function() {
return ''; // Default if we're not on mobile (React Native)
};
// https://github.com/cheton/is-electron
shim.isElectron = () => {
// Renderer process