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/mixins/_platform.scss b/app/styles/mixins/_platform.scss index 0191bdd2dcc..b3c7bd55584 100644 --- a/app/styles/mixins/_platform.scss +++ b/app/styles/mixins/_platform.scss @@ -41,3 +41,25 @@ @content; } } + +// A mixin which takes a content block that should only +// be applied when the current (real or emulated) operating +// system is Linux. +// +// This helper mixin is useful in so far that it allows us +// to keep platform specific styles next to cross-platform +// styles instead of splitting them out and possibly forgetting +// about them. +@mixin linux { + body.platform-linux & { + @content; + } +} + +// An exact copy of the linux mixin except that it allows for +// writing base-level rules +@mixin linux-context { + body.platform-linux { + @content; + } +} diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss index 324a8fe2616..0d0ec1a9c18 100644 --- a/app/styles/themes/_dark.scss +++ b/app/styles/themes/_dark.scss @@ -40,17 +40,17 @@ 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); + --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 - */ - --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/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 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}`) }