From 5d1d36d4af7a9b21fe4dfd7049f9210c141eedac Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Wed, 3 Jun 2020 05:01:21 +0200 Subject: [PATCH 1/3] Fix color contrast in Markdown Editor (both light & dark). Fixed color issues that were making things hard to read: - selected text color, including inline code. - HTML tags - Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting. - blockquote (was gray over gray) Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart. --- ui/scss/component/_markdown-editor.scss | 42 ++++++++++++++++++++++-- ui/scss/component/_markdown-preview.scss | 11 ++++--- ui/scss/themes/dark.scss | 16 +++++++++ ui/scss/themes/light.scss | 16 +++++++++ 4 files changed, 78 insertions(+), 7 deletions(-) diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss index ce6902abc..2862a1921 100644 --- a/ui/scss/component/_markdown-editor.scss +++ b/ui/scss/component/_markdown-editor.scss @@ -55,9 +55,47 @@ .form-field--SimpleMDE { margin-top: var(--spacing-l); - // Override hyperlink styles + .cm-s-easymde .CodeMirror-cursor { + border-left: 1px solid var(--color-editor-cursor); + } + + .cm-s-easymde .CodeMirror-selected { + background: var(--color-editor-selected); + } + + .cm-s-easymde .cm-hr { + color: var(--color-editor-tag); + } + + .cm-s-easymde .cm-tag { + color: var(--color-editor-tag); + } + + .cm-s-easymde .cm-attribute { + color: var(--color-editor-attr); + } + + .cm-s-easymde .cm-string { + color: var(--color-editor-string); + } + + .cm-s-easymde .cm-comment { + background: var(--color-editor-inline-code-bg); + padding: 3px 0px; // @todo: should fill up line-spacing instead of harcoded. + } + .cm-s-easymde .cm-link { - color: inherit; + color: var(--color-editor-link); + } + + .cm-s-easymde .cm-url { + color: var(--color-editor-url); + font-style: italic; + } + + .cm-s-easymde .cm-quote { + color: var(--color-editor-quote); + font-style: italic; } // Overriding the lbry/components form styling diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index 21e459281..fde589f40 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -114,6 +114,7 @@ margin-bottom: 2rem; position: relative; top: 1rem; + border: 1px solid var(--color-editor-hr-preview); } // Code blocks @@ -123,8 +124,8 @@ word-break: break-all; code { - margin-bottom: var(--spacing-m); - padding: var(--spacing-m); + margin-bottom: var(--spacing-medium); + padding: var(--spacing-s) var(--spacing-s) calc(var(--spacing-s) - 2px); display: block; white-space: pre-wrap; } @@ -132,12 +133,12 @@ // Inline code code { - background-color: var(--color-blockquote); + color: var(--color-editor-inline-code-fg-preview); + background-color: var(--color-editor-inline-code-bg-preview); display: inline-block; - margin: var(--spacing-xxs); border-radius: 0.2rem; font-size: var(--font-small); - padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs); + padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs) calc(var(--spacing-xxs) - 5px); } a { diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 7021c8e8d..4a23b023e 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -98,6 +98,22 @@ // Snack --color-snack-bg: var(--color-secondary); + // Editor + --color-editor-cursor: var(--color-text); + --color-editor-quote: #d3d3d3; + --color-editor-tag: #efbe5d; + --color-editor-attr: #68ccf9; + --color-editor-string: #ff8b6b; + --color-editor-inline-code-fg: #ce9178; + --color-editor-inline-code-fg-preview: #eeeeee; + --color-editor-inline-code-bg: rgba(20, 68, 102, 0.3); + --color-editor-inline-code-bg-preview: #8f9499; + --color-editor-selected: #264f78; + --color-editor-link: var(--color-link); + --color-editor-url: var(--color-editor-string); + --color-editor-hr: var(--color-editor-tag); + --color-editor-hr-preview: #a0a0a0; + // Ads --color-ads-background: #475057; --color-ads-text: #111; diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 96120294b..9b825a48c 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -67,6 +67,22 @@ --color-snack-bg-error: var(--color-danger); --color-snack-upgrade: var(--color-tertiary); + // Editor + --color-editor-cursor: var(--color-text); + --color-editor-quote: #707070; + --color-editor-tag: #ea9400; + --color-editor-attr: #04b0f4; + --color-editor-string: #ff7451; + --color-editor-inline-code-fg: var(--color-text); + --color-editor-inline-code-fg-preview: #eeeeee; + --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3); + --color-editor-inline-code-bg-preview: #8f9499; + --color-editor-selected: #add6ff; + --color-editor-link: var(--color-link); + --color-editor-url: var(--color-editor-string); + --color-editor-hr: var(--color-editor-tag); + --color-editor-hr-preview: #cccccc; + // Ads --color-ads-background: #fae5ff; --color-ads-link: var(--color-link); -- 2.45.3 From 369164548b27c9c2302d466ddf7f11d8acc31691 Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Thu, 28 May 2020 17:47:18 +0800 Subject: [PATCH 2/3] Create transient "status bar" to display the hover URL. Implementation: - listens to 'update-target-url' and will show/hide itself as needed. - Handled the display of "lbry://" protocol. CSS: - The colors chosen should work on both Light and Dark Theme. - The delay is necessary to avoid blinkies when the mouse is moving around. #4259 --- electron/createWindow.js | 12 ++++++++ ui/component/common/status-bar.jsx | 48 ++++++++++++++++++++++++++++++ ui/scss/all.scss | 1 + ui/scss/component/_status-bar.scss | 23 ++++++++++++++ 4 files changed, 84 insertions(+) create mode 100644 ui/component/common/status-bar.jsx create mode 100644 ui/scss/component/_status-bar.scss diff --git a/electron/createWindow.js b/electron/createWindow.js index 39a3d1d54..f8cb129f1 100644 --- a/electron/createWindow.js +++ b/electron/createWindow.js @@ -164,5 +164,17 @@ export default appState => { shell.openExternal(url); }); + window.webContents.on('update-target-url', (event, url) => { + // Change internal links to the lbry protocol. External (https) links should remain unchanged. + let dispUrl = url.replace(`http://localhost:${WEBPACK_ELECTRON_PORT}/`, lbryProto); + // Non-claims don't need the lbry protocol: + if (dispUrl === lbryProto) { + dispUrl = 'Home'; + } else if (dispUrl.startsWith(lbryProto + '$/')) { + dispUrl = dispUrl.replace(lbryProto, '/'); + } + window.webContents.send('update-target-url', dispUrl); + }); + return window; }; diff --git a/ui/component/common/status-bar.jsx b/ui/component/common/status-bar.jsx new file mode 100644 index 000000000..1bd607a9b --- /dev/null +++ b/ui/component/common/status-bar.jsx @@ -0,0 +1,48 @@ +// @flow +import React from 'react'; +import { ipcRenderer } from 'electron'; +import classnames from 'classnames'; + +type Props = {}; + +type State = { + hoverUrl: string, + show: boolean, +}; + +class StatusBar extends React.PureComponent { + constructor() { + super(); + this.state = { + hoverUrl: '', + show: false, + }; + (this: any).handleUrlChange = this.handleUrlChange.bind(this); + } + + componentDidMount() { + ipcRenderer.on('update-target-url', this.handleUrlChange); + } + + componentWillUnmount() { + ipcRenderer.removeListener('update-target-url', this.handleUrlChange); + } + + handleUrlChange(event: any, url: string) { + // We want to retain the previous URL so that it can fade out + // without the component collapsing. + if (url === '') { + this.setState({ show: false }); + } else { + this.setState({ show: true }); + this.setState({ hoverUrl: url }); + } + } + + render() { + const { hoverUrl, show } = this.state; + return
{hoverUrl}
; + } +} + +export default StatusBar; diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 68d2bd5bc..c6ff80fdd 100644 --- a/ui/scss/all.scss +++ b/ui/scss/all.scss @@ -44,6 +44,7 @@ @import 'component/snack-bar'; @import 'component/spinner'; @import 'component/splash'; +@import 'component/status-bar'; @import 'component/subscriptions'; @import 'component/syntax-highlighter'; @import 'component/table'; diff --git a/ui/scss/component/_status-bar.scss b/ui/scss/component/_status-bar.scss new file mode 100644 index 000000000..d181a532a --- /dev/null +++ b/ui/scss/component/_status-bar.scss @@ -0,0 +1,23 @@ +.status-bar { + background-color: #505050; + border: solid 1px #707070; + border-bottom-color: #505050; + border-left-color: #505050; + color: #e0e0e0; + position: fixed; + left: 0; + bottom: 0; + font-size: var(--font-small); + padding-top: 2px; + padding-left: var(--spacing-xsmall); + padding-right: var(--spacing-xsmall); + border-top-right-radius: var(--spacing-xsmall); + opacity: 0; + transition: opacity 0.3s ease; + transition-delay: 400ms; + + &.visible { + opacity: 1; + transition-delay: 0s; + } +} -- 2.45.3 From fd8b6a0a8cd93e07dfae52674952db56d5684fdf Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Thu, 28 May 2020 18:02:59 +0800 Subject: [PATCH 3/3] Add StatusBar into Page for 'app' only. #3776 #4259 --- CHANGELOG.md | 3 ++- ui/component/page/view.jsx | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c2b32f083..e4467558b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Support drag-and-drop file publishing _community pr!_ ([#4170](https://github.com/lbryio/lbry-desktop/pull/4170)) - Add advanced editor for comments _community pr!_ ([#4224](https://github.com/lbryio/lbry-desktop/pull/4224)) - Paid content improvements ([#4234](https://github.com/lbryio/lbry-desktop/pull/4234)) +- Add status-bar to display a link's destination _community pr!_ ([#4259](https://github.com/lbryio/lbry-desktop/pull/4259)) ### Changed @@ -27,7 +28,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Fixed - Channel selector alignment on creator analytics page _community pr!_ ([#4157](https://github.com/lbryio/lbry-desktop/pull/4157)) -- Fix inconsistent relative-date string for claims, comments, etc. ([#4172](https://github.com/lbryio/lbry-desktop/pull/4172)) +- Fix inconsistent relative-date string for claims, comments, etc. _community pr!_ ([#4172](https://github.com/lbryio/lbry-desktop/pull/4172)) - Error opening certain files with special characters in name #2777 _community pr!_ ([#4161](https://github.com/lbryio/lbry-desktop/pull/4161)) - Comic-book file page shows download button first, and then viewer after download _community pr!_ ([#4161](https://github.com/lbryio/lbry-desktop/pull/4161)) - Only show "start at" on share modal for video/audio _community pr!_ ([#4194](https://github.com/lbryio/lbry-desktop/pull/4194)) diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx index a887bb5f2..a43aa0037 100644 --- a/ui/component/page/view.jsx +++ b/ui/component/page/view.jsx @@ -5,6 +5,9 @@ import classnames from 'classnames'; import SideNavigation from 'component/sideNavigation'; import Header from 'component/header'; import Footer from 'web/component/footer'; +/* @if TARGET='app' */ +import StatusBar from 'component/common/status-bar'; +/* @endif */ export const MAIN_CLASS = 'main'; type Props = { @@ -27,6 +30,9 @@ function Page(props: Props) {
{children}
{!authPage && !noSideNavigation && } + {/* @if TARGET='app' */} + + {/* @endif */}
{/* @if TARGET='web' */} {!noFooter &&