Browse Source

Updates graph webview styling

main
Eric Amodio 2 years ago
parent
commit
8cfdb0aa80
4 changed files with 99 additions and 86 deletions
  1. +1
    -0
      src/webviews/apps/plus/graph/GraphWrapper.tsx
  2. +59
    -57
      src/webviews/apps/plus/graph/graph.scss
  3. +15
    -15
      src/webviews/apps/plus/graph/graph.tsx
  4. +24
    -14
      src/webviews/apps/shared/theme.ts

+ 1
- 0
src/webviews/apps/plus/graph/GraphWrapper.tsx View File

@ -727,6 +727,7 @@ export function GraphWrapper({
aria-haspopup="listbox"
id="repo-actioncombo-label"
className="actioncombo__label"
disabled={repos.length < 2}
role="combobox"
aria-activedescendant={
repoExpanded

+ 59
- 57
src/webviews/apps/plus/graph/graph.scss View File

@ -3,18 +3,6 @@
@import '../../shared/glicons';
@import '../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css';
body {
&.vscode-dark {
--actionbar-background-color: var(--color-background--lighten-05);
--actionbar-hover-background-color: var(--color-background--lighten-075);
}
&.vscode-light {
--actionbar-background-color: var(--color-background--darken-05);
--actionbar-hover-background-color: var(--color-background--darken-075);
}
}
a {
text-decoration: none;
&:hover {
@ -30,7 +18,7 @@ a {
.actionbar {
--actionbar-height: 22px;
background-color: var(--actionbar-background-color);
background-color: var(--color-graph-actionbar-background);
color: var(--color-foreground);
padding: 0 1rem;
height: var(--actionbar-height);
@ -81,7 +69,7 @@ a {
--actioncombo-height: 2.2rem;
--actioncombo-items: 1;
--actioncombo-items-height: 2.6rem;
--actioncombo-items-height: 2.4rem;
position: relative;
display: inline-flex;
@ -92,55 +80,27 @@ a {
height: var(--actioncombo-height);
line-height: var(--actioncombo-height);
&__label,
&__item {
&__label {
appearance: none;
font-family: inherit;
background-color: transparent;
background-color: var(--color-graph-actionbar-background);
border: none;
color: inherit;
padding: 0 0.75rem;
cursor: pointer;
background-color: var(--actionbar-background-color);
text-align: left;
&:hover {
color: var(--vscode-menu-selectionForeground);
background-color: var(--vscode-menu-selectionBackground);
}
height: var(--actioncombo-height);
line-height: var(--actioncombo-height);
border-radius: 3px;
&[disabled] {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
&[aria-selected='true'] {
opacity: 1;
background-color: var(--actionbar-hover-background-color);
}
}
&__label {
height: var(--actioncombo-height);
line-height: var(--actioncombo-height);
}
&__item {
display: flex;
align-items: center;
height: var(--actioncombo-items-height);
line-height: var(--actioncombo-items-height);
}
&__icon.codicon[class*='codicon-'] {
margin-right: 0.4rem;
}
&__icon:not(.codicon) {
display: inline-block;
margin-right: 0.4rem;
width: 16px;
&:hover {
background-color: var(--color-graph-actionbar-selectedBackground);
}
}
&__list {
@ -153,7 +113,8 @@ a {
min-width: 100%;
width: max-content;
z-index: 10000;
background-color: var(--actionbar-background-color);
background-color: var(--vscode-menu-background);
border: 1px solid var(--vscode-menu-border);
}
&__label:not([aria-expanded='true']) + &__list {
@ -161,14 +122,53 @@ a {
}
&__item {
appearance: none;
font-family: inherit;
border: none;
padding: 0 0.75rem;
cursor: pointer;
color: var(--vscode-menu-foreground);
background-color: var(--vscode-menu-background);
text-align: left;
display: flex;
align-items: center;
height: var(--actioncombo-items-height);
line-height: var(--actioncombo-items-height);
&:hover {
color: var(--vscode-menu-selectionForeground);
background-color: var(--vscode-menu-selectionBackground);
}
&[disabled] {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
&[aria-selected='true'] {
opacity: 1;
color: var(--vscode-menu-selectionForeground);
background-color: var(--vscode-menu-background);
}
}
&__icon.codicon[class*='codicon-'] {
margin-right: 0.4rem;
}
&__icon:not(.codicon) {
display: inline-block;
margin-right: 0.4rem;
width: 16px;
}
}
.column-button {
--column-button-height: 22px;
--column-button-height: 20px;
position: absolute;
top: 0;
top: 1px;
right: 0;
z-index: 2;
@ -178,14 +178,16 @@ a {
border: none;
color: var(--text-disabled, hsla(0, 0%, 100%, 0.4));
margin: 0;
padding: 0 2px;
padding: 0 4px;
height: var(--column-button-height);
cursor: pointer;
background-color: var(--actionbar-background-color);
background-color: var(--color-graph-actionbar-background);
text-align: left;
border-radius: 3px;
&:hover {
background-color: var(--actionbar-hover-background-color);
background-color: var(--vscode-toolbar-hoverBackground);
color: var(--color-foreground);
}
&:focus {
@ -199,7 +201,7 @@ a {
}
.codicon[class*='codicon-'] {
font-size: inherit;
font-size: 1.1rem;
}
}

+ 15
- 15
src/webviews/apps/plus/graph/graph.tsx View File

@ -313,27 +313,27 @@ export class GraphApp extends App {
return {
cssVariables: {
'--app__bg0': bgColor,
'--panel__bg0': computedStyle.getPropertyValue('--graph-panel-bg'),
'--panel__bg1': computedStyle.getPropertyValue('--graph-panel-bg2'),
'--section-border': computedStyle.getPropertyValue('--graph-panel-bg2'),
'--panel__bg0': computedStyle.getPropertyValue('--color-graph-background'),
'--panel__bg1': computedStyle.getPropertyValue('--color-graph-background2'),
'--section-border': computedStyle.getPropertyValue('--color-graph-background2'),
'--selected-row': computedStyle.getPropertyValue('--graph-selected-row'),
'--selected-row': computedStyle.getPropertyValue('--color-graph-selected-row'),
'--selected-row-border': isHighContrastTheme
? `1px solid ${computedStyle.getPropertyValue('--graph-contrast-border-color')}`
? `1px solid ${computedStyle.getPropertyValue('--color-graph-contrast-border-color')}`
: 'none',
'--hover-row': computedStyle.getPropertyValue('--graph-hover-row'),
'--hover-row': computedStyle.getPropertyValue('--color-graph-hover-row'),
'--hover-row-border': isHighContrastTheme
? `1px dashed ${computedStyle.getPropertyValue('--graph-contrast-border-color')}`
? `1px dashed ${computedStyle.getPropertyValue('--color-graph-contrast-border-color')}`
: 'none',
'--text-selected': computedStyle.getPropertyValue('--graph-text-selected'),
'--text-selected-row': computedStyle.getPropertyValue('--graph-text-selected-row'),
'--text-hovered': computedStyle.getPropertyValue('--graph-text-hovered'),
'--text-dimmed-selected': computedStyle.getPropertyValue('--graph-text-dimmed-selected'),
'--text-dimmed': computedStyle.getPropertyValue('--graph-text-dimmed'),
'--text-normal': computedStyle.getPropertyValue('--graph-text-normal'),
'--text-secondary': computedStyle.getPropertyValue('--graph-text-secondary'),
'--text-disabled': computedStyle.getPropertyValue('--graph-text-disabled'),
'--text-selected': computedStyle.getPropertyValue('--color-graph-text-selected'),
'--text-selected-row': computedStyle.getPropertyValue('--color-graph-text-selected-row'),
'--text-hovered': computedStyle.getPropertyValue('--color-graph-text-hovered'),
'--text-dimmed-selected': computedStyle.getPropertyValue('--color-graph-text-dimmed-selected'),
'--text-dimmed': computedStyle.getPropertyValue('--color-graph-text-dimmed'),
'--text-normal': computedStyle.getPropertyValue('--color-graph-text-normal'),
'--text-secondary': computedStyle.getPropertyValue('--color-graph-text-secondary'),
'--text-disabled': computedStyle.getPropertyValue('--color-graph-text-disabled'),
'--text-accent': computedStyle.getPropertyValue('--color-link-foreground'),
'--text-inverse': computedStyle.getPropertyValue('--vscode-input-background'),

+ 24
- 14
src/webviews/apps/shared/theme.ts View File

@ -104,31 +104,41 @@ export function initializeAndWatchThemeColors() {
bodyStyle.setProperty('--color-hover-statusBarBackground', color);
// graph-specific colors
bodyStyle.setProperty('--graph-theme-opacity-factor', isLightTheme ? '0.5' : '1');
bodyStyle.setProperty(
'--graph-panel-bg',
'--color-graph-actionbar-background',
isLightTheme ? darken(backgroundColor, 5) : lighten(backgroundColor, 5),
);
bodyStyle.setProperty(
'--graph-panel-bg2',
'--color-graph-actionbar-selectedBackground',
isLightTheme ? darken(backgroundColor, 10) : lighten(backgroundColor, 10),
);
bodyStyle.setProperty(
'--color-graph-background',
isLightTheme ? darken(backgroundColor, 5) : lighten(backgroundColor, 5),
);
bodyStyle.setProperty(
'--color-graph-background2',
isLightTheme ? darken(backgroundColor, 10) : lighten(backgroundColor, 10),
);
bodyStyle.setProperty('--graph-theme-opacity-factor', isLightTheme ? '0.5' : '1');
color = computedStyle.getPropertyValue('--vscode-list-focusOutline').trim();
bodyStyle.setProperty('--graph-contrast-border-color', color);
bodyStyle.setProperty('--color-graph-contrast-border-color', color);
color = computedStyle.getPropertyValue('--vscode-list-activeSelectionBackground').trim();
bodyStyle.setProperty('--graph-selected-row', color);
bodyStyle.setProperty('--color-graph-selected-row', color);
color = computedStyle.getPropertyValue('--vscode-list-hoverBackground').trim();
bodyStyle.setProperty('--graph-hover-row', color);
bodyStyle.setProperty('--color-graph-hover-row', color);
color = computedStyle.getPropertyValue('--vscode-list-activeSelectionForeground').trim();
bodyStyle.setProperty('--graph-text-selected-row', color);
bodyStyle.setProperty('--graph-text-dimmed-selected', opacity(color, 50));
bodyStyle.setProperty('--graph-text-dimmed', opacity(foregroundColor, 20));
bodyStyle.setProperty('--color-graph-text-selected-row', color);
bodyStyle.setProperty('--color-graph-text-dimmed-selected', opacity(color, 50));
bodyStyle.setProperty('--color-graph-text-dimmed', opacity(foregroundColor, 20));
color = computedStyle.getPropertyValue('--vscode-list-hoverForeground').trim();
bodyStyle.setProperty('--graph-text-hovered', color);
bodyStyle.setProperty('--graph-text-selected', foregroundColor);
bodyStyle.setProperty('--graph-text-normal', opacity(foregroundColor, 85));
bodyStyle.setProperty('--graph-text-secondary', opacity(foregroundColor, 65));
bodyStyle.setProperty('--graph-text-disabled', opacity(foregroundColor, 50));
bodyStyle.setProperty('--color-graph-text-hovered', color);
bodyStyle.setProperty('--color-graph-text-selected', foregroundColor);
bodyStyle.setProperty('--color-graph-text-normal', opacity(foregroundColor, 85));
bodyStyle.setProperty('--color-graph-text-secondary', opacity(foregroundColor, 65));
bodyStyle.setProperty('--color-graph-text-disabled', opacity(foregroundColor, 50));
// alert colors
color = computedStyle.getPropertyValue('--vscode-inputValidation-infoBackground').trim();

||||||
x
 
000:0
Loading…
Cancel
Save