public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 01:36:22 +00:00
Code Issues Releases Wiki Activity

Merge pull request #3136 from hikerpig/feature/scrollbarAppearance

Browse Source 
tweak MarkdownPreview style to optimize overflow scrollbar display
This commit is contained in:
Junyoung Choi
2019-09-03 02:03:23 +09:00
committed by GitHub
parent e9975d1ea5 9a704a2bcb
commit 1332b337f3
1 changed files with 34 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
browser/components/MarkdownPreview.js
View File

@@ -42,16 +42,31 @@ const CSS_FILES = [
`${appPath}/node_modules/react-image-carousel/lib/css/main.min.css` `${appPath}/node_modules/react-image-carousel/lib/css/main.min.css`
] ]
function buildStyle ( /**
fontFamily, * @param {Object} opts
fontSize, * @param {String} opts.fontFamily
codeBlockFontFamily, * @param {Numberl} opts.fontSize
lineNumber, * @param {String} opts.codeBlockFontFamily
scrollPastEnd, * @param {String} opts.theme
theme, * @param {Boolean} [opts.lineNumber] Should show line number
allowCustomCSS, * @param {Boolean} [opts.scrollPastEnd]
customCSS * @param {Boolean} [opts.optimizeOverflowScroll] Should tweak body style to optimize overflow scrollbar display
) { * @param {Boolean} [opts.allowCustomCSS] Should add custom css
* @param {String} [opts.customCSS] Will be added to bottom, only if `opts.allowCustomCSS` is truthy
* @returns {String}
*/
function buildStyle (opts) {
const {
fontFamily,
fontSize,
codeBlockFontFamily,
lineNumber,
scrollPastEnd,
optimizeOverflowScroll,
theme,
allowCustomCSS,
customCSS
} = opts
return ` return `
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
@@ -81,12 +96,14 @@ function buildStyle (
url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'), url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype'); url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
} }
${markdownStyle} ${markdownStyle}
body { body {
font-family: '${fontFamily.join("','")}'; font-family: '${fontFamily.join("','")}';
font-size: ${fontSize}px; font-size: ${fontSize}px;
${scrollPastEnd && 'padding-bottom: 90vh;'} ${scrollPastEnd ? 'padding-bottom: 90vh;' : ''}
${optimizeOverflowScroll ? 'height: 100%;' : ''}
} }
@media print { @media print {
body { body {
@@ -312,7 +329,7 @@ export default class MarkdownPreview extends React.Component {
customCSS customCSS
} = this.getStyleParams() } = this.getStyleParams()
const inlineStyles = buildStyle( const inlineStyles = buildStyle({
fontFamily, fontFamily,
fontSize, fontSize,
codeBlockFontFamily, codeBlockFontFamily,
@@ -321,7 +338,7 @@ export default class MarkdownPreview extends React.Component {
theme, theme,
allowCustomCSS, allowCustomCSS,
customCSS customCSS
) })
let body = this.markdown.render(noteContent) let body = this.markdown.render(noteContent)
body = attachmentManagement.fixLocalURLS( body = attachmentManagement.fixLocalURLS(
body, body,
@@ -652,16 +669,18 @@ export default class MarkdownPreview extends React.Component {
this.getWindow().document.getElementById( this.getWindow().document.getElementById(
'codeTheme' 'codeTheme'
).href = this.getCodeThemeLink(codeBlockTheme) ).href = this.getCodeThemeLink(codeBlockTheme)
this.getWindow().document.getElementById('style').innerHTML = buildStyle( this.getWindow().document.getElementById('style').innerHTML = buildStyle({
fontFamily, fontFamily,
fontSize, fontSize,
codeBlockFontFamily, codeBlockFontFamily,
lineNumber, lineNumber,
scrollPastEnd, scrollPastEnd,
optimizeOverflowScroll: true,
theme, theme,
allowCustomCSS, allowCustomCSS,
customCSS customCSS
) })
this.getWindow().document.documentElement.style.overflowY = 'hidden'
} }
getCodeThemeLink (name) { getCodeThemeLink (name) {