From 8059c8c647a76c196977f8c1b88843e26ec0be42 Mon Sep 17 00:00:00 2001 From: Jeff Gordon Date: Mon, 30 Mar 2020 00:10:57 -0500 Subject: [PATCH 1/3] Theme Scrollbars Updated scrollbars to match windows webkit styling for both light and dark mode --- app/styles/_variables.scss | 7 ++++--- app/styles/themes/_dark.scss | 4 ++-- app/styles/ui/_scroll.scss | 37 ++++++++++++++++++++++++++++++++++++ 3 files changed, 43 insertions(+), 5 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 324a8fe2616..e73f362014a 100644 --- a/app/styles/themes/_dark.scss +++ b/app/styles/themes/_dark.scss @@ -40,7 +40,7 @@ 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(0, 0, 0, 0.7); @@ -48,7 +48,7 @@ body.theme-dark { * 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.8); diff --git a/app/styles/ui/_scroll.scss b/app/styles/ui/_scroll.scss index 30f477b7296..bfcb445ab5b 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(--win32-scroll-bar-size); + height: var(--win32-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; + } + } + } +} From 6a30deaf1629b00bb6fda6044606570c35b9bd93 Mon Sep 17 00:00:00 2001 From: Jeff Gordon Date: Mon, 30 Mar 2020 12:27:14 -0500 Subject: [PATCH 2/3] Update _scroll.scss Separating linux from win32 reference, in case we want to adjust for the future and not impact the other --- app/styles/ui/_scroll.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/styles/ui/_scroll.scss b/app/styles/ui/_scroll.scss index bfcb445ab5b..6d7f5152e77 100644 --- a/app/styles/ui/_scroll.scss +++ b/app/styles/ui/_scroll.scss @@ -63,8 +63,8 @@ @include linux-context { // Linux scrollbars need styled, too ::-webkit-scrollbar { - width: var(--win32-scroll-bar-size); - height: var(--win32-scroll-bar-size); + width: var(--linux-scroll-bar-size); + height: var(--linux-scroll-bar-size); background: transparent; cursor: pointer; From 47309856b89f4ce15d8f844990ec6d2e8d76908f Mon Sep 17 00:00:00 2001 From: Jeff Gordon Date: Wed, 1 Apr 2020 10:49:50 -0500 Subject: [PATCH 3/3] 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/themes/_dark.scss | 14 +++++++------- docs/technical/editor-integration.md | 4 ++++ docs/technical/shell-integration.md | 12 ++++++++++++ 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss index e73f362014a..0d0ec1a9c18 100644 --- a/app/styles/themes/_dark.scss +++ b/app/styles/themes/_dark.scss @@ -42,15 +42,15 @@ body.theme-dark { * * Note: Only applies to win32 and linux platforms */ - --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.7); + --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 and linux platforms - */ - --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.8); + * 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/docs/technical/editor-integration.md b/docs/technical/editor-integration.md index 8ea4f65ece3..533cd8d5470 100644 --- a/docs/technical/editor-integration.md +++ b/docs/technical/editor-integration.md @@ -368,6 +368,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: @@ -379,6 +380,7 @@ export enum ExternalEditor { SublimeText = 'Sublime Text', Typora = 'Typora', SlickEdit = 'SlickEdit', + ElementaryCode = 'Code', } ``` @@ -414,6 +416,7 @@ export async function getAvailableEditors(): Promise< sublimePath, typoraPath, slickeditPath, + elementaryCodePath, ] = await Promise.all([ getEditorPath(ExternalEditor.Atom), getEditorPath(ExternalEditor.VisualStudioCode), @@ -421,6 +424,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}`) }