Desktop: Add classnames to DOM elements for theming purposes #4933

andrejilderda · 2021-05-08T09:13:53Z

This PR adds a few classnames to DOM-elements that can not be targeted with CSS in other ways. This includes most of the list that is specified here:
Joplin forum: List of CSS elements which should have a class

Including:

Preferences -> Encryption -> E2EE text
Search bar
Local search
Selected Notebooks / tags
Selected note in notelist
Note title
Last edit timestamp
Button for Markup/WYSIWYG editor
Search field, new todo and new note button
List items (notebook) and note count
DIV for tag area
Command palette/Go to anything
Modal dialogs

This reverts commit 18e1227.

…ctor

laurent22

Thanks for the pull request. I made a few suggestions for the class names to make them a bit more specific, but let me know if some of them are now too specific. I guess we need to strike the right balance between being able to select a specific element, and being able to select all elements of a particular type.

The framework you've suggested before would certainly solve this but I think would require too many changes in too many places.

laurent22 · 2021-05-13T08:25:04Z

packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx

@@ -91,7 +91,7 @@ export default function NoteTitleBar(props: Props) {
 	}, []);

 	function renderTitleBarDate() {
-		return <span style={styles.titleDate}>{time.formatMsToLocal(props.noteUserUpdatedTime)}</span>;
+		return <span className="user-updated-time" style={styles.titleDate}>{time.formatMsToLocal(props.noteUserUpdatedTime)}</span>;


To name the classes, could you follow the pattern "something-type", for example as you've named "tag-bar", or "title-input". So here it could be updated-time-label for example.

laurent22 · 2021-05-13T08:25:13Z

packages/app-desktop/gui/NoteListControls/NoteListControls.tsx

@@ -54,12 +54,14 @@ export default function NoteListControls(props: Props) {
 		return (
 			<ButtonContainer>
 				<StyledButton
+					className="new-todo"


new-todo-button

laurent22 · 2021-05-13T08:25:21Z

packages/app-desktop/gui/NoteListControls/NoteListControls.tsx

 					tooltip={CommandService.instance().label('newTodo')}
 					iconName="far fa-check-square"
 					level={ButtonLevel.Primary}
 					onClick={onNewTodoButtonClick}
 				/>
 				<StyledButton
+					className="new-note"


new-note-button

laurent22 · 2021-05-13T08:25:52Z

packages/app-desktop/gui/NoteListItem.tsx

+		'list-item-container',
+		props.isSelected && 'selected',
+		item.todo_completed && 'todo-completed',
+		item.is_todo ? 'todo' : 'note',


todo-list-item, note-list-item

laurent22 · 2021-05-13T08:26:29Z

packages/app-desktop/gui/NoteListItem.tsx

+		props.isSelected && 'selected',
+		item.todo_completed && 'todo-completed',
+		item.is_todo ? 'todo' : 'note',
+		(props.index + 1) % 2 === 0 ? 'even' : 'odd',


generic terms like "even" or "odd" on their own are fine though. I guess it's just when naming a component that we should use the "something-type" format.

laurent22 · 2021-05-13T08:28:37Z

packages/app-desktop/gui/PromptDialog.jsx

-			inputComp = <Datetime value={this.state.answer} inputProps={{ style: styles.input }} dateFormat={time.dateFormat()} timeFormat={time.timeFormat()} onChange={momentObject => onDateTimeChange(momentObject)} />;
+			inputComp = <Datetime className="select-datetime" value={this.state.answer} inputProps={{ style: styles.input }} dateFormat={time.dateFormat()} timeFormat={time.timeFormat()} onChange={momentObject => onDateTimeChange(momentObject)} />;
 		} else if (this.props.inputType === 'tags') {
-			inputComp = <CreatableSelect styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} value={this.state.answer} placeholder="" components={makeAnimated()} isMulti={true} isClearable={false} backspaceRemovesValue={true} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;
+			inputComp = <CreatableSelect className="select-tag" styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} value={this.state.answer} placeholder="" components={makeAnimated()} isMulti={true} isClearable={false} backspaceRemovesValue={true} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;
 		} else if (this.props.inputType === 'dropdown') {
-			inputComp = <Select styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} components={makeAnimated()} value={this.props.answer} defaultValue={this.props.defaultValue} isClearable={false} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;
+			inputComp = <Select className="select-dropdown" styles={styles.select} theme={styles.selectTheme} ref={this.answerInput_} components={makeAnimated()} value={this.props.answer} defaultValue={this.props.defaultValue} isClearable={false} options={this.props.autocomplete} onChange={onSelectChange} onKeyDown={event => onKeyDown(event)} />;


datetime-picker, tag-selector, item-selector (not sure about the last one)

laurent22 · 2021-05-13T08:28:53Z

packages/app-desktop/gui/PromptDialog.jsx

@@ -254,8 +254,8 @@ class PromptDialog extends React.Component {
 		}

 		return (
-			<div style={styles.modalLayer}>
-				<div style={styles.promptDialog}>
+			<div className="modal" style={styles.modalLayer}>


modal-layer

laurent22 · 2021-05-13T08:29:08Z

packages/app-desktop/gui/Sidebar/Sidebar.tsx

@@ -72,10 +72,10 @@ function ExpandLink(props: any) {
 function FolderItem(props: any) {
 	const { hasChildren, isExpanded, depth, selected, folderId, folderTitle, anchorRef, noteCount, onFolderDragStart_, onFolderDragOver_, onFolderDrop_, itemContextMenu, folderItem_click, onFolderToggleClick_ } = props;

-	const noteCountComp = noteCount ? <StyledNoteCount>{noteCount}</StyledNoteCount> : null;
+	const noteCountComp = noteCount ? <StyledNoteCount className="note-count">{noteCount}</StyledNoteCount> : null;


note-count-label

laurent22 · 2021-05-13T08:29:51Z

packages/app-desktop/gui/Sidebar/Sidebar.tsx

@@ -359,7 +360,7 @@ class SidebarComponent extends React.Component<Props, State> {
 	}

 	renderNoteCount(count: number) {
-		return count ? <StyledNoteCount>{count}</StyledNoteCount> : null;
+		return count ? <StyledNoteCount className="note-count">{count}</StyledNoteCount> : null;


note-count-label

laurent22 · 2021-05-13T08:31:02Z

packages/app-desktop/plugins/GotoAnything.tsx


 		return (
-			<div onClick={this.modalLayer_onClick} style={theme.dialogModalLayer}>
-				<div style={style.dialogBox}>
+			<div className="modal" onClick={this.modalLayer_onClick} style={theme.dialogModalLayer}>


modal-layer

andrejilderda · 2021-05-17T17:55:31Z

Thanks for looking into this @laurent22 ! I've changed all classnames to the ones you proposed. Good suggestions!

laurent22 · 2021-05-17T18:33:27Z

All good now, thanks for the pull request @ajilderda!

andrejilderda added 8 commits April 27, 2021 22:15

Desktop: Add classnames to NoteList components (WIP)

18e1227

Revert "Desktop: Add classnames to NoteList components (WIP)"

ad4eeb3

This reverts commit 18e1227.

Desktop: Add classnames to DOM elements for theming purposes

19be489

Desktop: Add classname to note-search-bar component

8514b5c

Desktop: Add 'selected' classname to selected note in notelist + refa…

1d2661d

…ctor

Desktop: Add classname to tagbar

10899f1

Desktop: Add classnames to GoToAnything component

84154d3

Merge branch 'laurent22:dev' into add-classnames

00cd743

laurent22 reviewed May 13, 2021

View reviewed changes

tessus added the desktop All desktop platforms label May 14, 2021

andrejilderda added 2 commits May 17, 2021 19:41

Desktop: Update classnames based on Laurent's feedback

c915449

Merge branch 'dev' into add-classnames

3cde7dd

laurent22 merged commit f3e03d4 into laurent22:dev May 17, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Desktop: Add classnames to DOM elements for theming purposes #4933

Desktop: Add classnames to DOM elements for theming purposes #4933

andrejilderda commented May 8, 2021

laurent22 left a comment

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

laurent22 May 13, 2021

andrejilderda commented May 17, 2021

laurent22 commented May 17, 2021

Desktop: Add classnames to DOM elements for theming purposes #4933

Desktop: Add classnames to DOM elements for theming purposes #4933

Conversation

andrejilderda commented May 8, 2021

laurent22 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrejilderda commented May 17, 2021

laurent22 commented May 17, 2021