From 7adff4aeb38c73b6a9e29ce877d132d71b1d53d0 Mon Sep 17 00:00:00 2001 From: jfgordon2 <55799997+jfgordon2@users.noreply.github.com> Date: Thu, 2 Apr 2020 07:54:48 -0500 Subject: [PATCH] improve scrollbars when using dark theme (#240) * Theme Scrollbars Updated scrollbars to match windows webkit styling for both light and dark mode * Update _scroll.scss Separating linux from win32 reference, in case we want to adjust for the future and not impact the other * Updated Scroll Color and Docs Adding color change to dark theme scroll bars merged upstream, and updating documentation related to editor and shell updates --- app/styles/_variables.scss | 7 +++--- app/styles/themes/_dark.scss | 12 ++++----- app/styles/ui/_scroll.scss | 37 ++++++++++++++++++++++++++++ docs/technical/editor-integration.md | 4 +++ docs/technical/shell-integration.md | 12 +++++++++ 5 files changed, 63 insertions(+), 9 deletions(-) diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss index 59784e10026..0f20e976587 100644 --- a/app/styles/_variables.scss +++ b/app/styles/_variables.scss @@ -76,7 +76,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4); * Background color for custom scroll bars. * The color is applied to the thumb part of the scrollbar. * - * Note: Only applies to win32 platforms + * Note: Only applies to win32 and linux platforms */ --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2); @@ -84,7 +84,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4); * Background color for custom scroll bars in their active state. * The color is applied to the thumb part of the scrollbar. * - * Note: Only applies to win32 platforms + * Note: Only applies to win32 and linux platforms */ --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5); @@ -271,8 +271,9 @@ $overlay-background-color: rgba(0, 0, 0, 0.4); --list-item-selected-active-badge-background-color: #{$white}; --list-item-hover-background-color: #{$gray-100}; - /** Win32 has custom scrol bars, see _scroll.scss */ + /** Windows/Linux have custom scrollbars, see _scroll.scss */ --win32-scroll-bar-size: 10px; + --linux-scroll-bar-size: 10px; /** * The z-index for popups. Nothing should be higher, but other z-indexes can diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss index 8b17409c4be..0d0ec1a9c18 100644 --- a/app/styles/themes/_dark.scss +++ b/app/styles/themes/_dark.scss @@ -40,16 +40,16 @@ body.theme-dark { * Background color for custom scroll bars. * The color is applied to the thumb part of the scrollbar. * - * Note: Only applies to win32 platforms + * Note: Only applies to win32 and linux platforms */ --scroll-bar-thumb-background-color: rgba(255, 255, 255, 0.2); /** - * Background color for custom scroll bars in their active state. - * The color is applied to the thumb part of the scrollbar. - * - * Note: Only applies to win32 platforms - */ + * Background color for custom scroll bars in their active state. + * The color is applied to the thumb part of the scrollbar. + * + * Note: Only applies to win32 and linux platforms + */ --scroll-bar-thumb-background-color-active: rgba(255, 255, 255, 0.5); // Box diff --git a/app/styles/ui/_scroll.scss b/app/styles/ui/_scroll.scss index 30f477b7296..6d7f5152e77 100644 --- a/app/styles/ui/_scroll.scss +++ b/app/styles/ui/_scroll.scss @@ -59,3 +59,40 @@ } } } + +@include linux-context { + // Linux scrollbars need styled, too + ::-webkit-scrollbar { + width: var(--linux-scroll-bar-size); + height: var(--linux-scroll-bar-size); + background: transparent; + cursor: pointer; + + &-thumb { + background-color: var(--scroll-bar-thumb-background-color); + border-radius: var(--linux-scroll-bar-size); + + // This little hack allows us to have a slim scroll bar + // with a bigger hit area. The scroll bar width/height + // is 10px but we're cutting off 6px using clipping so + // that it appears as if it's actually only 4px. + border-color: transparent; + border-style: solid; + border-width: 3px; + background-clip: padding-box; + + // ...and when it's pressed we'll up the contrast + &:active { + background-color: var(--scroll-bar-thumb-background-color-active); + } + + // When someone hovers over, or presses the bar we'll expand it to 8px + &:hover, + &:active { + border-width: 1px; + background-color: var(--scroll-bar-thumb-background-color-active); + cursor: pointer; + } + } + } +} diff --git a/docs/technical/editor-integration.md b/docs/technical/editor-integration.md index ac6eafdd1c6..52dd3804ddf 100644 --- a/docs/technical/editor-integration.md +++ b/docs/technical/editor-integration.md @@ -388,6 +388,7 @@ These editors are currently supported: - [Sublime Text](https://www.sublimetext.com/) - [Typora](https://typora.io/) - [SlickEdit](https://www.slickedit.com) + - [Code](https://github.com/elementary/code) These are defined in an enum at the top of the file: @@ -400,6 +401,7 @@ export enum ExternalEditor { SublimeText = 'Sublime Text', Typora = 'Typora', SlickEdit = 'SlickEdit', + ElementaryCode = 'Code', } ``` @@ -435,6 +437,7 @@ export async function getAvailableEditors(): Promise< sublimePath, typoraPath, slickeditPath, + elementaryCodePath, ] = await Promise.all([ getEditorPath(ExternalEditor.Atom), getEditorPath(ExternalEditor.VisualStudioCode), @@ -442,6 +445,7 @@ export async function getAvailableEditors(): Promise< getEditorPath(ExternalEditor.SublimeText), getEditorPath(ExternalEditor.Typora), getEditorPath(ExternalEditor.SlickEdit), + getEditorPath(ExternalEditor.ElementaryCode), ]) ... diff --git a/docs/technical/shell-integration.md b/docs/technical/shell-integration.md index 2ba7549925b..7afe649f2f7 100644 --- a/docs/technical/shell-integration.md +++ b/docs/technical/shell-integration.md @@ -226,6 +226,8 @@ These shells are currently supported: - [Konsole](https://konsole.kde.org/) - [XTerm](http://invisible-island.net/xterm/) - [Terminology](https://www.enlightenment.org/docs/apps/terminology.md) + - [Deepin Terminal](https://www.deepin.org/en/original/deepin-terminal/) + - [Elementary Terminal](https://github.com/elementary/terminal) These are defined in an enum at the top of the file: @@ -239,6 +241,8 @@ export enum Shell { Konsole = 'Konsole', Xterm = 'XTerm', Terminology = 'Terminology', + Deepin = 'Deepin Terminal', + Elementary = 'Elementary Terminal', } ``` @@ -273,6 +277,8 @@ export async function getAvailableShells(): Promise< konsolePath, xtermPath, terminologyPath, + deepinPath, + elementaryPath, ] = await Promise.all([ getShellPath(Shell.Gnome), getShellPath(Shell.Mate), @@ -282,6 +288,8 @@ export async function getAvailableShells(): Promise< getShellPath(Shell.Konsole), getShellPath(Shell.Xterm), getShellPath(Shell.Terminology), + getShellPath(Shell.Deepin), + getShellPath(Shell.Elementary), ]) ... @@ -318,6 +326,10 @@ export function launch( return spawn(foundShell.path, ['-e', '/bin/bash'], { cwd: path }) case Shell.Terminology: return spawn(foundShell.path, ['-d', path]) + case Shell.Deepin: + return spawn(foundShell.path, ['-w', path]) + case Shell.Elementary: + return spawn(foundShell.path, ['-w', path]) default: return assertNever(shell, `Unknown shell: ${shell}`) }