From 9d4b34cad727262fa3843fe809c4b5d3d6c7bc9f Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Wed, 6 Feb 2019 23:52:29 +0000 Subject: [PATCH] All: Applied styles to mobile too --- ElectronClient/app/theme.js | 13 ++---- ReactNativeClient/lib/MdToHtml.js | 9 ++--- .../lib/components/global-style.js | 40 +++++++------------ 3 files changed, 22 insertions(+), 40 deletions(-) diff --git a/ElectronClient/app/theme.js b/ElectronClient/app/theme.js index b0f929938..309021a8e 100644 --- a/ElectronClient/app/theme.js +++ b/ElectronClient/app/theme.js @@ -81,10 +81,7 @@ const lightStyle = { warningBackgroundColor: "#FFD08D", - // codeColor: "#EFF0F1", - // codeBorderColor: '#CBCBCB', - - htmlColor:'#222222', // Note: CSS in WebView component only supports named colors or rgb() notation + htmlColor:'#222222', htmlBackgroundColor: 'white', htmlDividerColor: 'rgb(230,230,230)', htmlLinkColor: 'rgb(80,130,190)', @@ -119,12 +116,10 @@ const darkStyle = { warningBackgroundColor: "#CC6600", - // codeColor: "#2F3031", - // codeBorderColor: '#464646', - - htmlColor: 'rgb(220,220,220)', // Note: CSS in WebView component only supports named colors or rgb() notation + htmlColor: 'rgb(220,220,220)', htmlBackgroundColor: 'rgb(29,32,36)', - htmlDividerColor: 'rgb(230,230,230)', + htmlDividerColor: '#3D444E', + htmlCodeColor: '#ffffff', htmlLinkColor: 'rgb(166,166,255)', htmlCodeBackgroundColor: 'rgb(47, 48, 49)', htmlCodeBorderColor: 'rgb(70, 70, 70)', diff --git a/ReactNativeClient/lib/MdToHtml.js b/ReactNativeClient/lib/MdToHtml.js index 332908a85..598ef0a7c 100644 --- a/ReactNativeClient/lib/MdToHtml.js +++ b/ReactNativeClient/lib/MdToHtml.js @@ -525,7 +525,6 @@ class MdToHtml { b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none} `; - // TODO: Apply style changes to global-style (mobile) // TODO: Find good font for Windows and Linux const fontFamily = "'Avenir', sans-serif"; @@ -542,7 +541,7 @@ class MdToHtml { -webkit-print-color-adjust: exact; } p, h1, h2, h3, h4, h5, h6, ul, table { - margin-top: .4em; + margin-top: .6em; margin-bottom: .65em; } h1, h2, h3, h4, h5, h6 { @@ -557,8 +556,8 @@ class MdToHtml { h2 { font-size: 1.3em; font-weight: bold; - border-bottom: 1px solid ` + style.htmlDividerColor + `; - padding-bottom: .1em; + / *border-bottom: 1px solid ` + style.htmlDividerColor + `; + padding-bottom: .1em; */ } h3 { font-size: 1.1em; @@ -699,7 +698,7 @@ class MdToHtml { const output = styleHtml + renderedBody; - // console.info(output); + // console.info('' + output + ''); this.cachedContent_ = output; this.cachedContentKey_ = cacheKey; diff --git a/ReactNativeClient/lib/components/global-style.js b/ReactNativeClient/lib/components/global-style.js index 891025a34..44219662b 100644 --- a/ReactNativeClient/lib/components/global-style.js +++ b/ReactNativeClient/lib/components/global-style.js @@ -27,11 +27,15 @@ const globalStyle = { // For WebView - must correspond to the properties above htmlFontSize: '16px', - htmlColor: 'black', // Note: CSS in WebView component only supports named colors or rgb() notation + htmlColor: '#222222', htmlBackgroundColor: 'white', - htmlDividerColor: 'Gainsboro', - htmlLinkColor: 'blue', - htmlLineHeight: '20px', + htmlDividerColor: 'rgb(230,230,230)', + htmlLinkColor: 'rgb(80,130,190)', + htmlLineHeight: '1.6em', + + htmlCodeBackgroundColor: 'rgb(243, 243, 243)', + htmlCodeBorderColor: 'rgb(220, 220, 220)', + htmlCodeColor: 'rgb(0,0,0)', }; globalStyle.marginRight = globalStyle.margin; @@ -40,28 +44,6 @@ globalStyle.marginTop = globalStyle.margin; globalStyle.marginBottom = globalStyle.margin; globalStyle.htmlMarginLeft = ((globalStyle.marginLeft / 10) * 0.6).toFixed(2) + 'em'; -// globalStyle.icon = { -// color: globalStyle.color, -// fontSize: 30, -// }; - -// globalStyle.lineInput = { -// color: globalStyle.color, -// backgroundColor: globalStyle.backgroundColor, -// }; - -// globalStyle.buttonRow = { -// flexDirection: 'row', -// borderTopWidth: 1, -// borderTopColor: globalStyle.dividerColor, -// paddingTop: 10, -// }; - -// globalStyle.normalText = { -// color: globalStyle.color, -// fontSize: globalStyle.fontSize, -// }; - let themeCache_ = {}; function addExtraStyles(style) { @@ -130,6 +112,12 @@ function themeStyle(theme) { output.htmlBackgroundColor = 'rgb(29,32,36)'; output.htmlLinkColor = 'rgb(166,166,255)'; + output.htmlDividerColor = '#3D444E'; + output.htmlLinkColor = 'rgb(166,166,255)'; + output.htmlCodeColor = '#ffffff'; + output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)'; + output.htmlCodeBorderColor = 'rgb(70, 70, 70)'; + output.colorUrl = '#7B81FF'; themeCache_[theme] = output;