From c6a9c9c57d73a5e84476d473a3b75f3efbdc1392 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Vi=E1=BB=87t=20H=C6=B0ng?= Date: Tue, 5 Jun 2018 21:24:37 +0700 Subject: [PATCH 1/3] fixed disappear scrollbar --- browser/components/MarkdownPreview.js | 18 ++++++++++++++++++ browser/main/global.styl | 13 +++++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 89f71a9b..7b5facf2 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -126,6 +126,21 @@ body p { ` } +const scrollBarStyle = ` +::-webkit-scrollbar-track { + border-radius: 10px; +} + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.3); +} +` + const { shell } = require('electron') const OSX = global.process.platform === 'darwin' @@ -298,6 +313,9 @@ export default class MarkdownPreview extends React.Component { + ` CSS_FILES.forEach((file) => { diff --git a/browser/main/global.styl b/browser/main/global.styl index 7025163f..c68df2b8 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -15,6 +15,16 @@ body font-weight 200 -webkit-font-smoothing antialiased +::-webkit-scrollbar-track + border-radius 10px + +::-webkit-scrollbar + width 12px + +::-webkit-scrollbar-thumb + box-shadow inset 0 0 6px rgba(0, 0, 0, 0.3) + background-color rgba(0, 0, 0, 0.3) + button, input, select, textarea font-family DEFAULT_FONTS @@ -85,7 +95,7 @@ modalBackColor = white absolute top left bottom right background-color modalBackColor z-index modalZIndex + 1 - + body[data-theme="dark"] .ModalBase @@ -140,4 +150,3 @@ body[data-theme="monokai"] background-color $ui-monokai-backgroundColor .sortableItemHelper color: $ui-monokai-text-color - From 31f1ebe801e9ffa5180934aff46fc68e654b9a4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Vi=E1=BB=87t=20H=C6=B0ng?= Date: Tue, 5 Jun 2018 21:31:50 +0700 Subject: [PATCH 2/3] removed unnecessary style --- browser/components/MarkdownPreview.js | 4 ---- browser/main/global.styl | 3 --- 2 files changed, 7 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 7b5facf2..0348996d 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -127,10 +127,6 @@ body p { } const scrollBarStyle = ` -::-webkit-scrollbar-track { - border-radius: 10px; -} - ::-webkit-scrollbar { width: 12px; } diff --git a/browser/main/global.styl b/browser/main/global.styl index c68df2b8..9a967085 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -15,9 +15,6 @@ body font-weight 200 -webkit-font-smoothing antialiased -::-webkit-scrollbar-track - border-radius 10px - ::-webkit-scrollbar width 12px From 7bfb094a40eae4661ca8ec516e08ec636791f12c Mon Sep 17 00:00:00 2001 From: Junyoung Choi Date: Fri, 6 Jul 2018 22:07:06 +0900 Subject: [PATCH 3/3] use lighter color for scroll bar --- browser/components/MarkdownPreview.js | 27 +++++++++++++++++++++++++-- browser/main/global.styl | 9 +++++++-- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 0348996d..f2157882 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -132,7 +132,15 @@ const scrollBarStyle = ` } ::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.15); +} +` +const scrollBarDarkStyle = ` +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); } ` @@ -301,6 +309,21 @@ export default class MarkdownPreview extends React.Component { } } + getScrollBarStyle () { + const { + theme + } = this.props + + switch (theme) { + case 'dark': + case 'solarized-dark': + case 'monokai': + return scrollBarDarkStyle + default: + return scrollBarStyle + } + } + componentDidMount () { this.refs.root.setAttribute('sandbox', 'allow-scripts') this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler) @@ -310,7 +333,7 @@ export default class MarkdownPreview extends React.Component { ` diff --git a/browser/main/global.styl b/browser/main/global.styl index 9a967085..8f3216ef 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -19,8 +19,7 @@ body width 12px ::-webkit-scrollbar-thumb - box-shadow inset 0 0 6px rgba(0, 0, 0, 0.3) - background-color rgba(0, 0, 0, 0.3) + background-color rgba(0, 0, 0, 0.15) button, input, select, textarea font-family DEFAULT_FONTS @@ -95,6 +94,8 @@ modalBackColor = white body[data-theme="dark"] + ::-webkit-scrollbar-thumb + background-color rgba(0, 0, 0, 0.3) .ModalBase .modalBack background-color $ui-dark-backgroundColor @@ -135,6 +136,8 @@ body[data-theme="dark"] z-index modalZIndex + 5 body[data-theme="solarized-dark"] + ::-webkit-scrollbar-thumb + background-color rgba(0, 0, 0, 0.3) .ModalBase .modalBack background-color $ui-solarized-dark-backgroundColor @@ -142,6 +145,8 @@ body[data-theme="solarized-dark"] color: $ui-solarized-dark-text-color body[data-theme="monokai"] + ::-webkit-scrollbar-thumb + background-color rgba(0, 0, 0, 0.3) .ModalBase .modalBack background-color $ui-monokai-backgroundColor