diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx index 543e557..98e4af8 100644 --- a/src/webviews/apps/plus/graph/GraphWrapper.tsx +++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx @@ -161,10 +161,10 @@ const debounceFrame = (func: DebouncableFn): DebouncedFn => { }; const createIconElements = (): { [key: string]: ReactElement } => { - const iconList = ['vm', 'cloud', 'tag', 'inbox', 'check', 'loading', 'warning']; + const iconList = ['head', 'remote', 'tag', 'stash', 'check', 'loading', 'warning']; const elementLibrary: { [key: string]: ReactElement } = {}; iconList.forEach(iconKey => { - elementLibrary[iconKey] = createElement('span', { className: `codicon codicon-${iconKey}` }); + elementLibrary[iconKey] = createElement('span', { className: `graph-icon icon--${iconKey}` }); }); return elementLibrary; }; diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss index 806d326..f4addc7 100644 --- a/src/webviews/apps/plus/graph/graph.scss +++ b/src/webviews/apps/plus/graph/graph.scss @@ -161,6 +161,88 @@ body { } } +// TODO: move this to host-side +.graph-icon { + font: normal normal normal 14px/1 codicon; + display: inline-block; + text-decoration: none; + text-rendering: auto; + text-align: center; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + + vertical-align: middle; + line-height: 2rem; + letter-spacing: normal; +} + +.icon--head { + &::before{ + // codicon-vm + font-family: codicon; + content: '\ea7a'; + } +} + +.icon--remote { + &::before{ + // codicon-cloud + font-family: codicon; + content: '\ebaa'; + } +} + +.icon--tag { + &::before{ + // codicon-tag + font-family: codicon; + content: '\ea66'; + } +} + +.icon--stash { + &::before { + // codicon-inbox + font-family: codicon; + content: '\eb09'; + } +} + +.icon--check { + &::before{ + // codicon-check + font-family: codicon; + content: '\eab2'; + } +} + +.icon--loading { + &::before{ + // codicon-loading + font-family: codicon; + content: '\eb19'; + } + animation: spin 1s infinite linear; + animation-delay: .2s; + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } +} + +.icon--warning { + :before{ + // codicon-vm + font-family: codicon; + content: '\ea6c'; + } + color: #DE9B43; +} + .graph-app { --fs-2: 1.3rem; --scroll-thumb-bg: var(--vscode-scrollbarSlider-background);