diff --git a/.fantasticonrc.js b/.fantasticonrc.js index f1cc3725ce234..cd617e07542ff 100644 --- a/.fantasticonrc.js +++ b/.fantasticonrc.js @@ -12,10 +12,12 @@ const config = { fontTypes: ['woff2'], normalize: true, // @ts-ignore - assetTypes: ['html', 'scss', 'json'], + assetTypes: ['html', 'scss', 'json', 'sass', 'css'], templates: { html: './images/icons/template/icons-contribution.hbs', scss: './images/icons/template/styles.hbs', + sass: './images/icons/template/sass-map.hbs', + css: './images/icons/template/component-map.hbs', }, formatOptions: { json: { @@ -25,8 +27,10 @@ const config = { pathOptions: { woff2: './dist/glicons.woff2', scss: './dist/glicons.scss', + sass: './dist/glicons-map.scss', html: './dist/icons-contribution.json', json: './images/icons/template/mapping.json', + css: './dist/glicons-map.ts', }, }; diff --git a/.prettierignore b/.prettierignore index 7d8921d9a4936..2bdff08fd9022 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,8 +4,14 @@ out node_modules git.d.ts glicons.scss +images/icons/template/component-map.hbs images/icons/template/icons-contribution.hbs images/icons/template/mapping.json +images/icons/template/sass-map.hbs images/icons/template/styles.hbs src/emojis.generated.ts +src/webviews/apps/shared/components/icons/codicons-map.ts +src/webviews/apps/shared/components/icons/glicons-map.ts +src/webviews/apps/shared/styles/icons/codicons-map.scss +src/webviews/apps/shared/styles/icons/glicons-map.scss pnpm-lock.yaml diff --git a/images/icons/diff-multiple.svg b/images/icons/diff-multiple.svg deleted file mode 100644 index b2f793b170800..0000000000000 --- a/images/icons/diff-multiple.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/images/icons/diff-single.svg b/images/icons/diff-single.svg deleted file mode 100644 index e5e1c9bacb0f5..0000000000000 --- a/images/icons/diff-single.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/images/icons/repo-fetch.svg b/images/icons/repo-fetch.svg deleted file mode 100644 index 1fd0ea8dd589e..0000000000000 --- a/images/icons/repo-fetch.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/images/icons/repo-force-push.svg b/images/icons/repo-force-push.svg deleted file mode 100644 index 15878f3d3d21e..0000000000000 --- a/images/icons/repo-force-push.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/images/icons/repo-pull.svg b/images/icons/repo-pull.svg deleted file mode 100644 index e28c1240cda95..0000000000000 --- a/images/icons/repo-pull.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/images/icons/repo-push.svg b/images/icons/repo-push.svg deleted file mode 100644 index 878d60ae0fac3..0000000000000 --- a/images/icons/repo-push.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/images/icons/template/component-map.hbs b/images/icons/template/component-map.hbs new file mode 100644 index 0000000000000..f9297120b1d72 --- /dev/null +++ b/images/icons/template/component-map.hbs @@ -0,0 +1,10 @@ +// This file is generated by (vscode-gitlens)/scripts/export-codicons.js +// Do not edit this file directly + +export const iconFontFamily = '{{ name }}'; + +export const iconMap = Object.freeze({ +{{#each codepoints}} + '{{ @key }}': '\\\{{ codepoint this }}', +{{/each}} +}); diff --git a/images/icons/template/mapping.json b/images/icons/template/mapping.json index 59174b8aa8e57..766c1bdd24b93 100644 --- a/images/icons/template/mapping.json +++ b/images/icons/template/mapping.json @@ -27,7 +27,6 @@ "switch": 61720, "expand": 61721, "list-auto": 61722, - "repo-force-push": 61723, "pinned-filled": 61724, "clock": 61725, "provider-azdo": 61726, @@ -46,11 +45,6 @@ "repository-filled": 61739, "gitlens-filled": 61740, "code-suggestion": 61741, - "diff-multiple": 61742, - "diff-single": 61743, - "repo-fetch": 61744, - "repo-pull": 61745, - "repo-push": 61746, "provider-jira": 61747, "play-button": 61748, "rocket-filled": 61749, diff --git a/images/icons/template/sass-map.hbs b/images/icons/template/sass-map.hbs new file mode 100644 index 0000000000000..2b6099d80eec9 --- /dev/null +++ b/images/icons/template/sass-map.hbs @@ -0,0 +1,10 @@ +// This file is generated by (vscode-gitlens)/scripts/export-codicons.js +// Do not edit this file directly + +$icon-font-family: '{{ name }}'; + +$icon-map: ( +{{#each codepoints}} + '{{@key}}': '\\{{ codepoint this }}', +{{/each}} +); diff --git a/package.json b/package.json index 9ab45f68568cf..19a51758c20dd 100644 --- a/package.json +++ b/package.json @@ -7014,21 +7014,21 @@ "command": "gitlens.fetchRepositories", "title": "Fetch", "category": "GitLens", - "icon": "$(gitlens-repo-fetch)", + "icon": "$(repo-fetch)", "enablement": "!operationInProgress" }, { "command": "gitlens.pullRepositories", "title": "Pull", "category": "GitLens", - "icon": "$(gitlens-repo-pull)", + "icon": "$(repo-pull)", "enablement": "!operationInProgress" }, { "command": "gitlens.pushRepositories", "title": "Push", "category": "GitLens", - "icon": "$(gitlens-repo-push)", + "icon": "$(repo-push)", "enablement": "!operationInProgress" }, { @@ -7112,7 +7112,7 @@ { "command": "gitlens.views.fetch", "title": "Fetch", - "icon": "$(gitlens-repo-fetch)", + "icon": "$(repo-fetch)", "enablement": "!operationInProgress" }, { @@ -7130,19 +7130,19 @@ { "command": "gitlens.views.pull", "title": "Pull", - "icon": "$(gitlens-repo-pull)", + "icon": "$(repo-pull)", "enablement": "!operationInProgress" }, { "command": "gitlens.views.push", "title": "Push", - "icon": "$(gitlens-repo-push)", + "icon": "$(repo-push)", "enablement": "!operationInProgress" }, { "command": "gitlens.views.pushWithForce", "title": "Push (force)", - "icon": "$(gitlens-repo-force-push)", + "icon": "$(repo-force-push)", "enablement": "!operationInProgress" }, { @@ -7482,7 +7482,7 @@ { "command": "gitlens.views.pushToCommit", "title": "Push to Commit...", - "icon": "$(gitlens-repo-push)", + "icon": "$(repo-push)", "enablement": "!operationInProgress" }, { @@ -8829,25 +8829,25 @@ { "command": "gitlens.graph.push", "title": "Push", - "icon": "$(gitlens-repo-push)", + "icon": "$(repo-push)", "enablement": "!operationInProgress" }, { "command": "gitlens.graph.pull", "title": "Pull", - "icon": "$(gitlens-repo-pull)", + "icon": "$(repo-pull)", "enablement": "!operationInProgress" }, { "command": "gitlens.graph.pushWithForce", "title": "Push (force)", - "icon": "$(gitlens-repo-force-push)", + "icon": "$(repo-force-push)", "enablement": "!operationInProgress" }, { "command": "gitlens.graph.fetch", "title": "Fetch", - "icon": "$(gitlens-repo-fetch)", + "icon": "$(repo-fetch)", "enablement": "!operationInProgress" }, { @@ -9513,13 +9513,6 @@ "fontCharacter": "\\f11a" } }, - "gitlens-repo-force-push": { - "description": "repo-force-push icon", - "default": { - "fontPath": "dist/glicons.woff2", - "fontCharacter": "\\f11b" - } - }, "gitlens-pinned-filled": { "description": "pinned-filled icon", "default": { @@ -9646,41 +9639,6 @@ "fontCharacter": "\\f12d" } }, - "gitlens-diff-multiple": { - "description": "diff-multiple icon", - "default": { - "fontPath": "dist/glicons.woff2", - "fontCharacter": "\\f12e" - } - }, - "gitlens-diff-single": { - "description": "diff-single icon", - "default": { - "fontPath": "dist/glicons.woff2", - "fontCharacter": "\\f12f" - } - }, - "gitlens-repo-fetch": { - "description": "repo-fetch icon", - "default": { - "fontPath": "dist/glicons.woff2", - "fontCharacter": "\\f130" - } - }, - "gitlens-repo-pull": { - "description": "repo-pull icon", - "default": { - "fontPath": "dist/glicons.woff2", - "fontCharacter": "\\f131" - } - }, - "gitlens-repo-push": { - "description": "repo-push icon", - "default": { - "fontPath": "dist/glicons.woff2", - "fontCharacter": "\\f132" - } - }, "gitlens-provider-jira": { "description": "provider-jira icon", "default": { @@ -19559,7 +19517,7 @@ "build:extension": "webpack --mode development --config-name extension:node", "build:extension:browser": "webpack --mode development --config-name extension:webworker", "build:webviews": "webpack --mode development --config-name webviews", - "build:icons": "pnpm run icons:svgo && pnpm fantasticon && pnpm run icons:apply", + "build:icons": "pnpm run icons:svgo && pnpm fantasticon && pnpm run icons:apply && pnpm run icons:export", "build:tests": "node ./scripts/esbuild.tests.mjs --mode development", "generate:docs:telemetry": "node ./scripts/generate-telemetry-docs.mjs", "generate:emoji": "node ./scripts/generateEmojiShortcodeMap.mjs", @@ -19576,6 +19534,7 @@ "graph:unlink": "pnpm unlink @gitkraken/gitkraken-components && pnpm install --force", "graph:unlink:main": "pnpm graph:unlink && pushd \"../GitKrakenComponents\" && pnpm unlink && popd", "icons:apply": "node ./scripts/applyIconsContribution.mjs", + "icons:export": "node ./scripts/export-codicons.mjs", "icons:svgo": "svgo -q -f ./images/icons/ --config svgo.config.js", "lint": "pnpm run clean:lint && eslint .", "lint:fix": "pnpm run clean:lint && eslint . --fix", diff --git a/scripts/applyIconsContribution.mjs b/scripts/applyIconsContribution.mjs index cd36a303e4df5..d0287ce40d102 100644 --- a/scripts/applyIconsContribution.mjs +++ b/scripts/applyIconsContribution.mjs @@ -8,6 +8,10 @@ const packageJSONPromises = Promise.all([ const scssPromises = Promise.all([ fs.promises.readFile('./dist/glicons.scss', 'utf8'), fs.promises.readFile('./src/webviews/apps/shared/glicons.scss', 'utf8'), + fs.promises.readFile('./dist/glicons-map.scss', 'utf8'), + fs.promises.readFile('./src/webviews/apps/shared/styles/icons/glicons-map.scss', 'utf8'), + fs.promises.readFile('./dist/glicons-map.ts', 'utf8'), + fs.promises.readFile('./src/webviews/apps/shared/components/icons/glicons-map.ts', 'utf8'), ]); let pending = []; @@ -22,11 +26,24 @@ if (JSON.stringify(packageJSON.contributes.icons) !== JSON.stringify(icons.icons } // Update the scss file -const [newScss, scss] = await scssPromises; +const [newScss, scss, newSassMap, sassMap, newTsMap, tsMap] = await scssPromises; if (scss !== newScss) { pending.push(fs.promises.writeFile('./src/webviews/apps/shared/glicons.scss', newScss)); } -pending.push(fs.promises.rm('./dist/icons-contribution.json'), fs.promises.rm('./dist/glicons.scss')); +if (sassMap !== newSassMap) { + pending.push(fs.promises.writeFile('./src/webviews/apps/shared/styles/icons/glicons-map.scss', newSassMap)); +} + +if (tsMap !== newTsMap) { + pending.push(fs.promises.writeFile('./src/webviews/apps/shared/components/icons/glicons-map.ts', newTsMap)); +} + +pending.push( + fs.promises.rm('./dist/icons-contribution.json'), + fs.promises.rm('./dist/glicons.scss'), + fs.promises.rm('./dist/glicons-map.scss'), + fs.promises.rm('./dist/glicons-map.ts'), +); await Promise.allSettled(pending); diff --git a/scripts/export-codicons.mjs b/scripts/export-codicons.mjs new file mode 100644 index 0000000000000..600aa60331f05 --- /dev/null +++ b/scripts/export-codicons.mjs @@ -0,0 +1,46 @@ +import fs from 'fs'; + +function numberToCssContent(number, escape = '\\\\') { + return `${escape}${number.toString(16)}`; +} + +console.time('Exported codicons'); + +const { default: iconConfig } = await import('../node_modules/@vscode/codicons/.fantasticonrc.js'); +const { name, codepoints: icons } = iconConfig; + +const headerText = `// This file is generated by (vscode-gitlens)/scripts/export-codicons.js +// Do not edit this file directly +`; + +const sassMapEntries = []; +const tsMapEntries = []; +for (const [key, value] of Object.entries(icons)) { + sassMapEntries.push(` '${key}': '${numberToCssContent(value, '\\')}'`); + tsMapEntries.push(` '${key}': '${numberToCssContent(value)}'`); +} + +// create a sass map of codicons and a ts file with a frozen object +const scss = `${headerText} +$icon-font-family: '${name}'; + +$icon-map: ( +${sassMapEntries.join(',\n')} +); +`; + +const ts = `${headerText} +export const iconFontFamily = '${name}'; + +export const iconMap = Object.freeze({ +${tsMapEntries.join(',\n')} +}); +`; + +const pending = []; + +pending.push(fs.promises.writeFile('./src/webviews/apps/shared/styles/icons/codicons-map.scss', scss)); +pending.push(fs.promises.writeFile('./src/webviews/apps/shared/components/icons/codicons-map.ts', ts)); + +await Promise.allSettled(pending); +console.timeEnd('Exported codicons'); diff --git a/src/commands/quickCommand.buttons.ts b/src/commands/quickCommand.buttons.ts index 88015bb4d0b98..5afc74056adfe 100644 --- a/src/commands/quickCommand.buttons.ts +++ b/src/commands/quickCommand.buttons.ts @@ -73,7 +73,7 @@ export const FeedbackQuickInputButton: QuickInputButton = { }; export const FetchQuickInputButton: QuickInputButton = { - iconPath: new ThemeIcon('gitlens-repo-fetch'), + iconPath: new ThemeIcon('repo-fetch'), tooltip: 'Fetch', }; diff --git a/src/webviews/apps/commitDetails/components/gl-status-nav.ts b/src/webviews/apps/commitDetails/components/gl-status-nav.ts index 1c6d3f65b0bf7..9324d74b2b984 100644 --- a/src/webviews/apps/commitDetails/components/gl-status-nav.ts +++ b/src/webviews/apps/commitDetails/components/gl-status-nav.ts @@ -140,7 +140,7 @@ export class GlStatusNav extends LitElement {
this.handleAction(e, 'fetch')} - >
`; diff --git a/src/webviews/apps/commitDetails/components/gl-wip-details.ts b/src/webviews/apps/commitDetails/components/gl-wip-details.ts index 7fc0d90a15707..5e7b79d87c0f1 100644 --- a/src/webviews/apps/commitDetails/components/gl-wip-details.ts +++ b/src/webviews/apps/commitDetails/components/gl-wip-details.ts @@ -205,7 +205,7 @@ export class GlWipDetails extends GlDetailsBase { if (ahead === 0 && behind === 0) return undefined; const fetchLabel = behind > 0 ? 'Pull' : ahead > 0 ? 'Push' : 'Fetch'; - const fetchIcon = behind > 0 ? 'gl-repo-pull' : ahead > 0 ? 'gl-repo-push' : 'gl-repo-fetch'; + const fetchIcon = behind > 0 ? 'repo-pull' : ahead > 0 ? 'repo-push' : 'repo-fetch'; return html`

@@ -278,7 +278,7 @@ export class GlWipDetails extends GlDetailsBase { this.onDataActionClick('open-pr-changes')} > -

Switch to Another Branch...
- {' '} + @@ -1223,7 +1220,7 @@ export function GraphWrapper({ - + - + - Create New Branch from + Create New Branch from + {branchName} @@ -1263,7 +1261,7 @@ export function GraphWrapper({ )}`} className="action-button" > - + @@ -1320,11 +1318,12 @@ export function GraphWrapper({ > Graph Filtering @@ -1421,7 +1420,7 @@ export function GraphWrapper({ aria-checked={graphConfig?.minimap ?? false} onClick={handleOnMinimapToggle} > - + Toggle Minimap @@ -1434,10 +1433,11 @@ export function GraphWrapper({ > Minimap Options diff --git a/src/webviews/apps/plus/graph/actions/fetchButton.tsx b/src/webviews/apps/plus/graph/actions/fetchButton.tsx index d1f53210f5885..bc68bbe0d933a 100644 --- a/src/webviews/apps/plus/graph/actions/fetchButton.tsx +++ b/src/webviews/apps/plus/graph/actions/fetchButton.tsx @@ -2,6 +2,7 @@ import type { ReactNode } from 'react'; import React from 'react'; import type { BranchState, State } from '../../../../../plus/webviews/graph/protocol'; import { createWebviewCommandLink } from '../../../../../system/webview'; +import { CodeIcon } from '../../../shared/components/code-icon.react'; import { GlTooltip } from '../../../shared/components/overlays/tooltip.react'; export const FetchButton = ({ @@ -21,7 +22,7 @@ export const FetchButton = ({ href={createWebviewCommandLink('gitlens.graph.fetch', state.webviewId, state.webviewInstanceId)} className="action-button" > - + Fetch {fetchedText && ({fetchedText})} diff --git a/src/webviews/apps/plus/graph/actions/pushPullButton.tsx b/src/webviews/apps/plus/graph/actions/pushPullButton.tsx index db9aa677f6180..b0e2d625c631a 100644 --- a/src/webviews/apps/plus/graph/actions/pushPullButton.tsx +++ b/src/webviews/apps/plus/graph/actions/pushPullButton.tsx @@ -3,6 +3,7 @@ import React from 'react'; import type { BranchState, State } from '../../../../../plus/webviews/graph/protocol'; import { pluralize } from '../../../../../system/string'; import { createWebviewCommandLink } from '../../../../../system/webview'; +import { CodeIcon } from '../../../shared/components/code-icon.react'; import { GlTooltip } from '../../../shared/components/overlays/tooltip.react'; export const PushPullButton = ({ @@ -42,7 +43,7 @@ export const PushPullButton = ({ if (isBehind) { action = 'pull'; - icon = 'glicon glicon-repo-pull'; + icon = 'repo-pull'; label = 'Pull'; tooltip = ( <> @@ -72,7 +73,7 @@ export const PushPullButton = ({ } } else { action = 'push'; - icon = 'glicon glicon-repo-push'; + icon = 'repo-push'; label = 'Push'; tooltip = ( <> @@ -91,21 +92,21 @@ export const PushPullButton = ({ href={createWebviewCommandLink(`gitlens.graph.${action}`, state.webviewId, state.webviewInstanceId)} className={`action-button${isBehind ? ' is-behind' : ''}${isAhead ? ' is-ahead' : ''}`} > - + {label} {isBehind && ( {branchState.behind} - + )} {isAhead && ( {isBehind && <>  } {branchState.ahead} - + )} @@ -131,7 +132,7 @@ export const PushPullButton = ({ className="action-button" aria-label="Force Push" > - +