diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx index f98ccfc..b295db1 100644 --- a/src/webviews/apps/plus/graph/GraphWrapper.tsx +++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx @@ -48,6 +48,7 @@ import type { Subscription } from '../../../../subscription'; import { getSubscriptionTimeRemaining, SubscriptionState } from '../../../../subscription'; import { pluralize } from '../../../../system/string'; import type { IpcNotificationType } from '../../../../webviews/protocol'; +import { PopOver } from '../../shared/components/overlays/react'; import { SearchBox } from '../../shared/components/search/react'; import type { SearchNavigationEventDetail } from '../../shared/components/search/search-box'; import type { DateTimeFormat } from '../../shared/date'; @@ -533,11 +534,8 @@ export function GraphWrapper({ } return ( - - + + {label} {subText && ( <> @@ -546,6 +544,12 @@ export function GraphWrapper({ )} + + You have access to GitLens+ features on {isPro ? 'any repo' : 'local & public repos'}, and all other + GitLens features on any repo. +
+
✨ indicates GitLens+ features +
); }; diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss index ebe874a..458cc95 100644 --- a/src/webviews/apps/plus/graph/graph.scss +++ b/src/webviews/apps/plus/graph/graph.scss @@ -3,6 +3,16 @@ @import '../../shared/glicons'; @import '../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css'; +.vscode-high-contrast, +.vscode-dark { + --popover-bg: var(--color-background--lighten-15); +} + +.vscode-high-contrast-light, +.vscode-light { + --popover-bg: var(--color-background--darken-15); +} + body { .vertical_scrollbar, .horizontal_scrollbar { @@ -51,11 +61,29 @@ a { font-weight: 700; text-transform: uppercase; + &.is-help { + cursor: help; + } + small { font-size: inherit; opacity: 0.6; font-weight: 400; } + + &-container { + position: relative; + } + + &-popover { + width: max-content; + right: 0; + bottom: 100%; + } + + &:not(:hover) + &-popover { + display: none; + } } .actionbar { @@ -210,7 +238,6 @@ a { .repo-access { font-size: 1.1em; margin-right: 0.2rem; - cursor: help; &:not(.is-pro) { filter: grayscale(1) brightness(0.7); diff --git a/src/webviews/apps/shared/components/overlays/pop-over.ts b/src/webviews/apps/shared/components/overlays/pop-over.ts index 6929ca0..c4a9cfb 100644 --- a/src/webviews/apps/shared/components/overlays/pop-over.ts +++ b/src/webviews/apps/shared/components/overlays/pop-over.ts @@ -44,10 +44,14 @@ const styles = css` gap: 0.4rem; } - :host([caret]) { + :host([caret]:not([placement~='bottom'])) { transform: translateY(0.8rem); } + :host([caret][placement~='bottom']) { + transform: translateY(-0.8rem); + } + .top { display: flex; flex-direction: row; @@ -63,13 +67,29 @@ const styles = css` .caret { position: absolute; - bottom: 100%; width: 0; height: 0; border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-bottom: 0.8rem solid var(--popover-bg); } + + :host(:not([placement~='bottom'])) .caret { + bottom: 100%; + } + + :host([placement~='bottom']) .caret { + top: 100%; + transform: rotate(180deg); + } + + :host(:not([placement~='end'])) .caret { + left: 1.2rem; + } + + :host([placement~='end']) .caret { + right: 1.2rem; + } `; @customElement({ name: 'pop-over', template: template, styles: styles }) @@ -80,6 +100,9 @@ export class PopOver extends FASTElement { @attr({ mode: 'boolean' }) caret = true; + @attr + placement?: string; + @observable typeNodes?: Node[];