From c79c9c4c2f7256015cbdbc34b0eea644c1e8bef3 Mon Sep 17 00:00:00 2001 From: asrient <44570278+asrient@users.noreply.github.com> Date: Wed, 7 Apr 2021 01:48:10 +0530 Subject: [PATCH] Desktop: Resolve #3695: Show notebook and note title in the title bar (#4390) --- .eslintignore | 6 +++ .gitignore | 8 ++++ packages/app-desktop/gui/Navigator.jsx | 19 ++++---- .../app-desktop/gui/getWindowTitle.test.ts | 47 +++++++++++++++++++ packages/app-desktop/gui/getWindowTitle.ts | 25 ++++++++++ 5 files changed, 96 insertions(+), 9 deletions(-) create mode 100644 packages/app-desktop/gui/getWindowTitle.test.ts create mode 100644 packages/app-desktop/gui/getWindowTitle.ts diff --git a/.eslintignore b/.eslintignore index 3ee6d36d7..107469185 100644 --- a/.eslintignore +++ b/.eslintignore @@ -610,6 +610,12 @@ packages/app-desktop/gui/ToolbarButton/styles/index.js.map packages/app-desktop/gui/dialogs.d.ts packages/app-desktop/gui/dialogs.js packages/app-desktop/gui/dialogs.js.map +packages/app-desktop/gui/getWindowTitle.d.ts +packages/app-desktop/gui/getWindowTitle.js +packages/app-desktop/gui/getWindowTitle.js.map +packages/app-desktop/gui/getWindowTitle.test.d.ts +packages/app-desktop/gui/getWindowTitle.test.js +packages/app-desktop/gui/getWindowTitle.test.js.map packages/app-desktop/gui/hooks/useEffectDebugger.d.ts packages/app-desktop/gui/hooks/useEffectDebugger.js packages/app-desktop/gui/hooks/useEffectDebugger.js.map diff --git a/.gitignore b/.gitignore index ae093bced..4f8d3af2d 100644 --- a/.gitignore +++ b/.gitignore @@ -597,6 +597,12 @@ packages/app-desktop/gui/ToolbarButton/styles/index.js.map packages/app-desktop/gui/dialogs.d.ts packages/app-desktop/gui/dialogs.js packages/app-desktop/gui/dialogs.js.map +packages/app-desktop/gui/getWindowTitle.d.ts +packages/app-desktop/gui/getWindowTitle.js +packages/app-desktop/gui/getWindowTitle.js.map +packages/app-desktop/gui/getWindowTitle.test.d.ts +packages/app-desktop/gui/getWindowTitle.test.js +packages/app-desktop/gui/getWindowTitle.test.js.map packages/app-desktop/gui/hooks/useEffectDebugger.d.ts packages/app-desktop/gui/hooks/useEffectDebugger.js packages/app-desktop/gui/hooks/useEffectDebugger.js.map @@ -1492,3 +1498,5 @@ packages/tools/tool-utils.d.ts packages/tools/tool-utils.js packages/tools/tool-utils.js.map # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD +packages/app-desktop/gui/getWindowTitle.js +packages/app-desktop/gui/getWindowTitle.test.js diff --git a/packages/app-desktop/gui/Navigator.jsx b/packages/app-desktop/gui/Navigator.jsx index 48e5d5590..bc79e1472 100644 --- a/packages/app-desktop/gui/Navigator.jsx +++ b/packages/app-desktop/gui/Navigator.jsx @@ -1,22 +1,19 @@ const React = require('react'); const Component = React.Component; -const Setting = require('@joplin/lib/models/Setting').default; const { connect } = require('react-redux'); const bridge = require('electron').remote.require('./bridge').default; +const getWindowTitle = require('./getWindowTitle').default; + class NavigatorComponent extends Component { + constructor(props) { + super(props); + } UNSAFE_componentWillReceiveProps(newProps) { if (newProps.route) { - const screenInfo = this.props.screens[newProps.route.routeName]; - const devMarker = Setting.value('env') === 'dev' ? ' (DEV)' : ''; - const windowTitle = [`Joplin${devMarker}`]; - if (screenInfo.title) { - windowTitle.push(screenInfo.title()); - } - this.updateWindowTitle(windowTitle.join(' - ')); + this.updateWindowTitle(getWindowTitle(newProps.notes, newProps.selectedNoteIds, newProps.selectedFolderId, newProps.folders, newProps.screens, newProps.route)); } } - updateWindowTitle(title) { try { if (bridge().window()) bridge().window().setTitle(title); @@ -49,6 +46,10 @@ class NavigatorComponent extends Component { const Navigator = connect(state => { return { route: state.route, + selectedNoteIds: state.selectedNoteIds, + selectedFolderId: state.selectedFolderId, + folders: state.folders, + notes: state.notes, }; })(NavigatorComponent); diff --git a/packages/app-desktop/gui/getWindowTitle.test.ts b/packages/app-desktop/gui/getWindowTitle.test.ts new file mode 100644 index 000000000..239b72607 --- /dev/null +++ b/packages/app-desktop/gui/getWindowTitle.test.ts @@ -0,0 +1,47 @@ +import getWindowTitle from './getWindowTitle'; +const Setting = require('@joplin/lib/models/Setting').default; + +const props: any = { + 'screens': { 'Main': {}, 'DropboxLogin': { title: function() { return 'Dropbox Login'; } } }, + 'route': { 'type': 'NAV_GO', 'routeName': 'Main', 'props': {} }, + 'selectedNoteIds': ['1ce557cf187249e38f2458c78c20d09a'], + 'selectedFolderId': 'cea30a191961480ea7284861e90d5a54', + 'folders': [ + { + 'id': '349fcee65ad14fb2b64e69746c29a2d9', + 'title': 'self care', + }, + { + 'id': 'cea30a191961480ea7284861e90d5a54', + 'title': 'testbook', + }], + 'notes': [{ + 'id': '1ce557cf187249e38f2458c78c20d09a', + 'title': 'Open source projects to contribute', + 'parent_id': 'cea30a191961480ea7284861e90d5a54', + }], +}; + +describe('Get Window Title', () => { + Setting.setConstant('env', 'dev'); + test('Should produce string as Folder > Note', () => { + const title = getWindowTitle(props.notes, props.selectedNoteIds, props.selectedFolderId, props.folders, props.screens, props.route); + expect(title).toBe('testbook > Open source projects to contribute - Joplin (DEV)'); + }); + test('When no note is selected', () => { + const title = getWindowTitle(props.notes, [], props.selectedFolderId, props.folders, props.screens, props.route); + expect(title).toBe('testbook - Joplin (DEV)'); + }); + test('When no folder is selected', () => { + const title = getWindowTitle(props.notes, props.selectedNoteIds, null, props.folders, props.screens, props.route); + expect(title).toBe('testbook > Open source projects to contribute - Joplin (DEV)'); + }); + test('When no note and folder is selected', () => { + const title = getWindowTitle(props.notes, [], null, props.folders, props.screens, props.route); + expect(title).toBe('Joplin (DEV)'); + }); + test('When not on main screen (dropbox login)', () => { + const title = getWindowTitle(props.notes, props.selectedNoteIds, props.selectedFolderId, props.folders, props.screens, { 'type': 'NAV_GO', 'routeName': 'DropboxLogin', 'props': {} }); + expect(title).toBe('Dropbox Login - Joplin (DEV)'); + }); +}); diff --git a/packages/app-desktop/gui/getWindowTitle.ts b/packages/app-desktop/gui/getWindowTitle.ts new file mode 100644 index 000000000..b981e77ed --- /dev/null +++ b/packages/app-desktop/gui/getWindowTitle.ts @@ -0,0 +1,25 @@ +const Setting = require('@joplin/lib/models/Setting').default; +import BaseModel from '@joplin/lib/BaseModel'; +import { _ } from '@joplin/lib/locale'; +const { substrWithEllipsis } = require('@joplin/lib/string-utils'); + + +export default function getWindowTitle(notes: any[], selectedNoteIds: string[], selectedFolderId: string, folders: any[], screens: any, route: { type: string; routeName: string; props: any}) { + const windowTitle = []; + const note = selectedNoteIds.length ? BaseModel.byId(notes, selectedNoteIds[0]) : null; + const folderId = note ? note.parent_id : selectedFolderId; + const folder = folderId ? BaseModel.byId(folders, folderId) : null; + const screenInfo = screens[route.routeName]; + if (screenInfo.title) { + windowTitle.push(screenInfo.title()); + } else if (route.routeName == 'Main' && folder) { + const folderTitle = folder.title; + if (note) { + const noteTitle = note.title.length ? note.title : _('Untitled'); + windowTitle.push(`${substrWithEllipsis(folderTitle, 0, 30)} > ${substrWithEllipsis(noteTitle, 0, 50)}`); + } else { windowTitle.push(folderTitle); } + } + const devMarker = Setting.value('env') === 'dev' ? ' (DEV)' : ''; + windowTitle.push(`Joplin${devMarker}`); + return windowTitle.join(' - '); +}