Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set scrollbar colors as global styles #1484

Merged
merged 5 commits into from
Nov 25, 2020
Merged

Set scrollbar colors as global styles #1484

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
80c0aa0
Setting global webkit-scrollbar styles
aleksfront Nov 23, 2020
1250751
Removing usage of custom-scrollbar mixin
aleksfront Nov 23, 2020
becd971
Set overflow:auto on .Table
aleksfront Nov 23, 2020
e5e02f0
Fixing .drawer-content paddings
aleksfront Nov 23, 2020
055e69b
Cleaning up
aleksfront Nov 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/renderer/components/+apps-releases/release-details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
border: 1px solid var(--drawerSubtitleBackground);
border-radius: $radius;
overflow: auto;
@include custom-scrollbar();

.TableHead {
border-bottom: none;
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/+preferences/preferences.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
.Badge {
display: flex;
margin: 0;
margin-bottom: 1px;
margin-bottom: 1px!important;
padding: $padding $spacing;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/+whats-new/whats-new.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

> .content {
@include custom-scrollbar;
overflow: auto;
margin-top: $spacing;
padding: $spacing * 2;

Expand Down
8 changes: 0 additions & 8 deletions src/renderer/components/ace-editor/ace-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@

.theme-light & {
border: 1px solid gainsboro;

.ace_scrollbar {
@include custom-scrollbar(dark);
}
}

> .editor {
Expand Down Expand Up @@ -51,8 +47,4 @@
.ace_comment {
color: #808080;
}

.ace_scrollbar {
@include custom-scrollbar;
}
}
36 changes: 27 additions & 9 deletions src/renderer/components/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
@import "~flex.box";
@import "fonts";

*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
outline: none;
-webkit-font-smoothing: antialiased;
}

:root {
--unit: 8px;
--padding: var(--unit);
Expand All @@ -27,6 +18,33 @@
--drag-region-height: 22px
}

*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
outline: none;
-webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
width: 16px;
height: 15px; // Align sizes visually
background: transparent;
}

::-webkit-scrollbar-thumb {
background: var(--scrollBarColor);
background-clip: padding-box;
border: 4px solid transparent;
border-right-width: 5px;
border-radius: 16px;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}

::selection {
background: $primary;
color: white;
Expand Down
3 changes: 1 addition & 2 deletions src/renderer/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@

.Dialog {
@include custom-scrollbar;

position: fixed;
overflow: auto;
left: 0;
Expand All @@ -11,6 +9,7 @@
padding: $unit * 5;
z-index: $zIndex-dialog;
overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX
overflow: auto;

&.modal {
background: transparentize(#222, .5);
Expand Down
5 changes: 0 additions & 5 deletions src/renderer/components/dock/pod-logs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@
--overlay-active-bg: orange;

.logs {
@include custom-scrollbar;

// fix for `this.logsElement.scrollTop = this.logsElement.scrollHeight`
// `overflow: overlay` don't allow scroll to the last line
overflow: auto;

position: relative;
color: $textColorAccent;
background: $logsBackground;
Expand Down
10 changes: 0 additions & 10 deletions src/renderer/components/dock/terminal-window.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,7 @@
margin-left: $padding * 2;
margin-top: $padding * 2;

.theme-light & {
.xterm-viewport {
@include custom-scrollbar(dark);
}
}

> .xterm {
overflow: hidden;
}

.xterm-viewport {
@include custom-scrollbar;
}
}
13 changes: 2 additions & 11 deletions src/renderer/components/drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@
box-shadow: 0 0 $unit * 2 $boxShadow;
z-index: $zIndex-drawer;

.theme-light & {
.drawer-content {
@include custom-scrollbar(dark);
}
}

&.left {
left: 0;
}
Expand Down Expand Up @@ -71,11 +65,8 @@
}

.drawer-content {
@include custom-scrollbar;

> *:not(.Spinner) {
padding: var(--spacing);
}
overflow: auto;
padding: var(--spacing);

.Table .TableHead {
background-color: $contentColor;
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/layout/page-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

> .content-wrapper {
@include custom-scrollbar-themed;
overflow: auto;
padding: $spacing * 2;
display: flex;
flex-direction: column;
Expand Down
8 changes: 1 addition & 7 deletions src/renderer/components/layout/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,7 @@

&.pinned {
.sidebar-nav {
@include custom-scrollbar;

.theme-light & {
@include custom-scrollbar(dark);
}
overflow: auto;
}
}

Expand Down Expand Up @@ -63,8 +59,6 @@
}

.sidebar-nav {
@include hidden-scrollbar;

padding: $padding / 1.5 0;

.Icon {
Expand Down
5 changes: 0 additions & 5 deletions src/renderer/components/layout/tab-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,8 @@


main {
@include custom-scrollbar;
$spacing: $margin * 2;

.theme-light & {
@include custom-scrollbar(dark);
}

grid-area: main;
overflow-y: scroll; // always reserve space for scrollbar (17px)
overflow-x: auto;
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/layout/wizard-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
grid-template-columns: 1fr 40%;

> * {
@include custom-scrollbar-themed;
--flex-gap: #{$spacing};
overflow: auto;
padding: $spacing;
}

Expand Down
10 changes: 3 additions & 7 deletions src/renderer/components/markdown-viewer/markdown-viewer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@
line-height: 1.5;
word-wrap: break-word;

&.light {
pre, table {
@include custom-scrollbar(dark);
}
pre, table {
overflow: auto;
}

.pl-c {
Expand Down Expand Up @@ -513,7 +511,6 @@
}

table {
@include custom-scrollbar;
border-collapse: collapse;
display: table;
width: 100%;
Expand Down Expand Up @@ -581,13 +578,12 @@

.highlight pre,
pre {
@include custom-scrollbar;
padding: 16px;
font-size: 85%;
line-height: 1.45;
background-color: $helmDescriptionPreBackground;
border-radius: 3px;
overflow: auto !important;
overflow: auto;
}

pre code {
Expand Down
3 changes: 1 addition & 2 deletions src/renderer/components/markdown-viewer/markdown-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import React, { Component } from "react";
import marked from "marked";
import DOMPurify from "dompurify";
import { cssNames } from "../../utils";
import { themeStore } from "../../theme.store";

DOMPurify.addHook('afterSanitizeAttributes', function (node) {
// Set all elements owning target to target=_blank
Expand All @@ -29,7 +28,7 @@ export class MarkdownViewer extends Component<Props> {
const html = DOMPurify.sanitize(marked(markdown));
return (
<div
className={cssNames("MarkDownViewer", className, themeStore.activeTheme.type)}
className={cssNames("MarkDownViewer", className)}
dangerouslySetInnerHTML={{ __html: html }}
/>
);
Expand Down
46 changes: 0 additions & 46 deletions src/renderer/components/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,52 +6,6 @@
@import "table/table.mixins";
@import "+network/network-mixins";

// todo: re-use in other places with theming
@mixin custom-scrollbar-themed($invert: false) {
@if ($invert) {
@include custom-scrollbar(dark);
.theme-light & {
@include custom-scrollbar(light);
}
} @else {
// fits better with dark background
@include custom-scrollbar(light);
.theme-light & {
@include custom-scrollbar(dark);
}
}
}

@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) {
$themes: (
light: #5f6064,
dark: #bbb,
);

$scrollBarColor: if(map_has_key($themes, $theme), map_get($themes, $theme), none);
$scrollBarSize: calc(#{$size} + #{$borderSpacing} * 2);

overflow: auto; // allow scrolling for container

// Webkit
&::-webkit-scrollbar {
width: $scrollBarSize;
height: $scrollBarSize;
background: transparent;
}

&::-webkit-scrollbar-thumb {
background: $scrollBarColor;
background-clip: padding-box;
border: $borderSpacing solid transparent;
border-radius: $scrollBarSize;
}

&::-webkit-scrollbar-corner {
background-color: transparent;
}
}

// Hide scrollbar but keep the element scrollable
@mixin hidden-scrollbar {
overflow: auto;
Expand Down
5 changes: 0 additions & 5 deletions src/renderer/components/select/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ html {
min-width: 100%;

&-list {
@include custom-scrollbar;
padding-right: 1px;
padding-left: 1px;
width: max-content;
Expand Down Expand Up @@ -152,10 +151,6 @@ html {
--select-option-selected-bgc: $textColorSecondary;

.Select {
&__menu-list {
@include custom-scrollbar($theme: dark);
}

&__multi-value {
background: none;
box-shadow: 0 0 0 1px $textColorSecondary;
Expand Down
13 changes: 4 additions & 9 deletions src/renderer/components/table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
.Table {
&.scrollable {
.theme-light & {
@include custom-scrollbar(dark);
}

@include custom-scrollbar();
flex: 1 0 0; // hackfix: flex-basis must be "0" for proper work in firefox
}

&.autoSize {
.TableCell {
flex: 1 0;
}
}

&.scrollable {
overflow: auto;
}

&.selectable {
.TableHead, .TableRow {
padding: 0 $padding;
Expand Down
8 changes: 1 addition & 7 deletions src/renderer/components/virtual-list/virtual-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,6 @@
overflow: hidden;

> .list {
@include custom-scrollbar;

.theme-light & {
@include custom-scrollbar(dark);
}

overflow-y: overlay !important;
overflow-y: overlay!important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why !important?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It overrides overflow: auto inline styles defined by VirtualList component.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or by react-window internals did you mean?

}
}
Loading