Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Desktop: Put title bar and toolbar button over two lines when window size is below 800px

pull/4093/head
Laurent Cozic 2020-11-15 19:21:47 +00:00
parent ce5276ba97
commit 6769026265
1 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
View File

@ -5,6 +5,29 @@ import { ChangeEvent, useCallback } from 'react';
import NoteToolbar from '../../NoteToolbar/NoteToolbar'; import NoteToolbar from '../../NoteToolbar/NoteToolbar';
import { buildStyle } from '@joplin/lib/theme'; import { buildStyle } from '@joplin/lib/theme';
import time from '@joplin/lib/time'; import time from '@joplin/lib/time';
import styled from 'styled-components';
const StyledRoot = styled.div`
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 800px) {
flex-direction: column;
align-items: flex-start;
}
`;
const InfoGroup = styled.div`
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 800px) {
border-top: 1px solid ${props => props.theme.dividerColor};
width: 100%;
}
`;
interface Props { interface Props {
themeId: number; themeId: number;
@ -19,14 +42,11 @@ interface Props {
function styles_(props: Props) { function styles_(props: Props) {
return buildStyle(['NoteEditorTitleBar'], props.themeId, (theme: any) => { return buildStyle(['NoteEditorTitleBar'], props.themeId, (theme: any) => {
return { return {
root: {
display: 'flex', flexDirection: 'row', alignItems: 'center', height: theme.topRowHeight,
},
titleInput: { titleInput: {
flex: 1, flex: 1,
display: 'inline-block', display: 'inline-block',
paddingTop: 5, paddingTop: 5,
minHeight: 35, minHeight: 38,
boxSizing: 'border-box', boxSizing: 'border-box',
fontWeight: 'bold', fontWeight: 'bold',
paddingBottom: 5, paddingBottom: 5,
@ -42,8 +62,8 @@ function styles_(props: Props) {
titleDate: { titleDate: {
...theme.textStyle, ...theme.textStyle,
color: theme.colorFaded, color: theme.colorFaded,
paddingLeft: 10, paddingLeft: 8,
paddingRight: 10, whiteSpace: 'nowrap',
}, },
toolbarStyle: { toolbarStyle: {
marginBottom: 0, marginBottom: 0,
@ -81,7 +101,7 @@ export default function NoteTitleBar(props: Props) {
} }
return ( return (
<div style={styles.root}> <StyledRoot>
<input <input
type="text" type="text"
ref={props.titleInputRef} ref={props.titleInputRef}
@ -91,8 +111,10 @@ export default function NoteTitleBar(props: Props) {
onKeyDown={onTitleKeydown} onKeyDown={onTitleKeydown}
value={props.noteTitle} value={props.noteTitle}
/> />
{renderTitleBarDate()} <InfoGroup>
{renderNoteToolbar()} {renderTitleBarDate()}
</div> {renderNoteToolbar()}
</InfoGroup>
</StyledRoot>
); );
} }