Removes unused CSS from the graph

d13 · d13 · commit 51b3cc1415c9 · 2025-03-07T15:29:38.000-05:00
diff --git a/src/webviews/apps/plus/graph-next/actions/gitActionsButtons.ts b/src/webviews/apps/plus/graph-next/actions/gitActionsButtons.ts
@@ -1,4 +1,4 @@
-import { html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { fromNow } from '../../../../../system/date';
 import { pluralize } from '../../../../../system/string';
@@ -23,7 +23,6 @@ export class GitActionsButtons extends LitElement {
 	@property({ type: Object })
 	state!: State;
 
-	@state()
 	private get fetchedText() {
 		if (!this.lastFetched) return undefined;
 
@@ -105,7 +104,29 @@ export class GlFetchButton extends LitElement {
 
 @customElement('gl-push-pull-button')
 export class PushPullButton extends LitElement {
-	static override styles = [linkBase, inlineCode, actionButton, ruleBase];
+	static override styles = [
+		linkBase,
+		inlineCode,
+		actionButton,
+		ruleBase,
+		css`
+			.pill {
+				display: inline-block;
+				padding: 0.2rem 0.5rem;
+				border-radius: 0.5rem;
+				font-size: 1rem;
+				font-weight: 500;
+				line-height: 1.2;
+				text-transform: uppercase;
+				color: var(--vscode-foreground);
+				background-color: var(--vscode-editorWidget-background);
+			}
+			.pill code-icon {
+				font-size: inherit !important;
+				line-height: inherit !important;
+			}
+		`,
+	];
 
 	@property({ type: Object })
 	branchState?: BranchState;
diff --git a/src/webviews/apps/plus/graph-next/gate.ts b/src/webviews/apps/plus/graph-next/gate.ts
@@ -1,5 +1,5 @@
 import { consume } from '@lit/context';
-import { html } from 'lit';
+import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createWebviewCommandLink } from '../../../../system/webview';
@@ -11,7 +11,13 @@ import '../../shared/components/feature-gate';
 
 @customElement('gl-graph-gate')
 export class GlGraphGate extends GlElement {
-	static override styles = [];
+	static override styles = css`
+		gl-feature-gate gl-feature-badge {
+			vertical-align: super;
+			margin-left: 0.4rem;
+			margin-right: 0.4rem;
+		}
+	`;
 
 	@consume({ context: stateContext, subscribe: true })
 	@state()
diff --git a/src/webviews/apps/plus/graph-next/graph-header.ts b/src/webviews/apps/plus/graph-next/graph-header.ts
@@ -47,6 +47,7 @@ import type { TelemetryContext } from '../../shared/contexts/telemetry';
 import { telemetryContext } from '../../shared/contexts/telemetry';
 import { emitTelemetrySentEvent } from '../../shared/telemetry';
 import { stateContext } from './context';
+import { actionButton, linkBase, titlebarStyles } from './graph.css';
 import { graphStateContext } from './stateProvider';
 import '@shoelace-style/shoelace/dist/components/option/option.js';
 import '@shoelace-style/shoelace/dist/components/select/select.js';
@@ -100,10 +101,12 @@ function getSearchResultIdByIndex(results: GraphSearchResults, index: number): s
 
 @customElement('gl-graph-header')
 export class GlGraphHeader extends SignalWatcher(LitElement) {
+	static override styles = [linkBase, actionButton, titlebarStyles];
+
 	// FIXME: remove light DOM
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
+	// protected override createRenderRoot(): HTMLElement | DocumentFragment {
+	// 	return this;
+	// }
 
 	@consume({ context: ipcContext })
 	_ipc!: typeof ipcContext.__context__;
diff --git a/src/webviews/apps/plus/graph-next/graph-next.html b/src/webviews/apps/plus/graph-next/graph-next.html
@@ -20,16 +20,11 @@
 	</head>
 
 	<body
-		class="graph-app scrollable"
+		class="scrollable"
 		data-placement="#{placement}"
 		data-vscode-context='{ "preventDefaultContextMenuItems": true, "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
 	>
-		<gl-graph-app
-			class="graph-app__container"
-			name="GraphView"
-			placement="#{placement}"
-			bootstrap="#{state}"
-		></gl-graph-app>
+		<gl-graph-app name="GraphView" placement="#{placement}" bootstrap="#{state}"></gl-graph-app>
 		#{endOfBody}
 	</body>
 </html>
diff --git a/src/webviews/apps/plus/graph-next/graph.css.ts b/src/webviews/apps/plus/graph-next/graph.css.ts
@@ -136,3 +136,66 @@ export const actionButton = css`
 		background-color: var(--branch-status-both-hover-background);
 	}
 `;
+
+export const titlebarStyles = css`
+	.titlebar {
+		background: var(--titlebar-bg);
+		color: var(--titlebar-fg);
+		padding: {
+			left: 0.8rem;
+			right: 0.8rem;
+			top: 0.6rem;
+			bottom: 0.6rem;
+		}
+		font-size: 1.3rem;
+		flex-wrap: wrap;
+	}
+	.titlebar,
+	.titlebar__row,
+	.titlebar__group {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.titlebar > *,
+	.titlebar__row > *,
+	.titlebar__group > * {
+		margin: 0;
+	}
+
+	.titlebar,
+	.titlebar__row {
+		justify-content: space-between;
+	}
+
+	.titlebar__row {
+		flex: 0 0 100%;
+	}
+	.titlebar__row--wrap {
+		display: grid;
+		grid-auto-flow: column;
+		justify-content: start;
+		grid-template-columns: 1fr min-content;
+	}
+
+	.titlebar__group {
+		flex: auto 1 1;
+	}
+
+	.titlebar__row--wrap .titlebar__group {
+		white-space: nowrap;
+	}
+	.titlebar__row--wrap .titlebar__group:nth-child(odd) {
+		min-width: 0;
+	}
+
+	.titlebar__debugging > * {
+		display: inline-block;
+	}
+
+	.titlebar gl-feature-badge {
+		color: var(--color-foreground);
+	}
+`;
diff --git a/src/webviews/apps/plus/graph-next/graph.scss b/src/webviews/apps/plus/graph-next/graph.scss
