Skip to content

Thinner close button stroke and deduplicate shared resources #47

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

Merged
cyanzhong merged 3 commits into from
Mar 19, 2026
Merged

Thinner close button stroke and deduplicate shared resources #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d8c312
Initial plan
Copilot Mar 18, 2026
c7f146f
Make close button stroke width thinner (1.5 → 1.2)
Copilot Mar 18, 2026
f59d045
Extract close SVG and system font into shared constants
Copilot Mar 19, 2026
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
4 changes: 4 additions & 0 deletions src/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
export const repoUrl = 'https://github.com/MarkEdit-app/MarkEdit-proofreading';

export const closeSvg = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"><line x1="2" y1="2" x2="10" y2="10"/><line x1="10" y1="2" x2="2" y2="10"/></svg>';

export const systemFont = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif';
5 changes: 3 additions & 2 deletions src/panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { ViewUpdate } from '@codemirror/view';
import { diagnosticsField, setDiagnosticsEffect } from './decoration';
import type { Diagnostic } from './decoration';
import { setAccentColor, findDiagnostic, buildCardContent, injectCardCSS } from './card';
import { closeSvg, systemFont } from './const';
import { injectStyleSheet } from './styling';

const paneWidth = 290;
Expand Down Expand Up @@ -171,7 +172,7 @@ function renderPane(dom: HTMLElement, view: EditorView) {

const closeBtn = document.createElement('button');
closeBtn.className = 'harper-pane-close';
closeBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="2" y1="2" x2="10" y2="10"/><line x1="10" y1="2" x2="2" y2="10"/></svg>';
closeBtn.innerHTML = closeSvg;
closeBtn.title = 'Close';
closeBtn.ariaLabel = 'Close';
closeBtn.onclick = () => {
Expand Down Expand Up @@ -334,7 +335,7 @@ export function paneCSS(): string {
right: 0;
bottom: 0;
width: ${paneWidth}px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
font-family: ${systemFont};
border-left: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(12px);
Expand Down
5 changes: 3 additions & 2 deletions src/tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type { Tooltip, TooltipView } from '@codemirror/view';
import { diagnosticsField } from './decoration';
import type { Diagnostic } from './decoration';
import { setAccentColor, buildCardContent, ignoreDiagnostic, injectCardCSS } from './card';
import { closeSvg, systemFont } from './const';
import { injectStyleSheet } from './styling';

export const setClickTooltip = StateEffect.define<Diagnostic | null>();
Expand Down Expand Up @@ -85,7 +86,7 @@ export const tooltipCSS = `
overflow: hidden;
max-width: 320px;
min-width: 220px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
font-family: ${systemFont};
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
Expand Down Expand Up @@ -159,7 +160,7 @@ function createTooltip(view: EditorView, diagnostic: Diagnostic) {
// Close button at card level (top-right corner)
const close = document.createElement('button');
close.className = 'harper-close';
close.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="2" y1="2" x2="10" y2="10"/><line x1="10" y1="2" x2="2" y2="10"/></svg>';
close.innerHTML = closeSvg;
close.title = 'Close';
close.ariaLabel = 'Close';
close.onmousedown = (e) => e.preventDefault();
Expand Down
Loading