-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(GDE-9): Improve the visual of the extension (#7)
- Loading branch information
1 parent
a300311
commit 6060f6c
Showing
8 changed files
with
516 additions
and
205 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| import * as vscode from 'vscode'; | ||
| import { GoldenFailureItem } from '../golden_failure_item'; | ||
|
|
||
| export class FailureCSS { | ||
| static css(panel: vscode.WebviewPanel, item: GoldenFailureItem) { | ||
| return ` | ||
| .diff-inspector { | ||
| height: 100%; | ||
| } | ||
| .legend-container { | ||
| padding-top: 20px; | ||
| display: flex; | ||
| width: 100%; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
| .legend { | ||
| cursor: default; | ||
| padding-left: 14px; | ||
| padding-right: 14px; | ||
| padding-top: 8px; | ||
| padding-bottom: 8px; | ||
| height: 36; | ||
| width: fit-content; | ||
| margin: 4px; | ||
| color: white; | ||
| font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | ||
| font-size: 14px; | ||
| border-radius: 14px; | ||
| box-shadow: 5px 4px 15px #727272; | ||
| } | ||
| .browser-frame { | ||
| margin-top: 30px; | ||
| width: ${item.width}px; | ||
| display: block; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| transition: 0.2s ease-in; | ||
| border-radius: 8px 8px 4px 4px; | ||
| box-shadow: 0px 0px 25px 8px #f62424; | ||
| } | ||
| .browser-frame-header { | ||
| display: flex; | ||
| height: 40px; | ||
| width:${item.width}px; | ||
| padding: 1px; | ||
| align-items: center; | ||
| background-color: #1E1E1E; | ||
| border-radius: 8px 8px 0px 0px; | ||
| } | ||
| .browser-frame-content { | ||
| display: flex; | ||
| justify-content: center; | ||
| height: ${item.height}px; | ||
| width: ${item.width}px; | ||
| background-repeat: no-repeat; | ||
| background-size: ${item.width}px ${item.height}px; | ||
| background-image:url('${panel.webview.asWebviewUri(vscode.Uri.file(item.imageFailure!))}'); | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| display: flex; | ||
| border-top: transparent; | ||
| border: 1px solid #D1D1D1; | ||
| border-radius: 0px 0px 4px 4px; | ||
| } | ||
| .content-flex { | ||
| display: flex; | ||
| justify-content: start; | ||
| } | ||
| .browser-frame-header-action-buttons { | ||
| height: 14px; | ||
| width: 14px; | ||
| margin-left: 8px; | ||
| border-radius: 50%; | ||
| } | ||
| .minimise-button { | ||
| background-color: #FEBB2E; | ||
| } | ||
| .minimise-button:hover { | ||
| background-color: #ffcc5f; | ||
| } | ||
| .maximise-button { | ||
| background-color: #29C840; | ||
| } | ||
| .maximise-button:hover { | ||
| background-color: #33d44c; | ||
| } | ||
| .close-button { | ||
| background-color: #FE5F57; | ||
| } | ||
| .close-button:hover { | ||
| background-color: #ff766f; | ||
| } | ||
| .window-title { | ||
| cursor: default; | ||
| font-size: 16px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| color: white; | ||
| font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | ||
| } | ||
| .golden-image-title { | ||
| cursor: default; | ||
| overflow: hidden; | ||
| word-wrap: break-word; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 1; | ||
| line-clamp: 1; | ||
| -webkit-box-orient: vertical; | ||
| width: ${item.width * 0.35}px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| text-align: center; | ||
| border: none; | ||
| padding-left: 20px; | ||
| background-color: #1E1E1E; | ||
| font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | ||
| } | ||
| .golden-image-title-icon { | ||
| font-size: 14px; | ||
| color: #a0a0a0; | ||
| background-position: 0px 2px; | ||
| transition: 0.2s ease-in; | ||
| background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDE0MzEgOC45NDQ0Mkw3LjY2NTc1IDEwLjExMTFMMTAuMzA3OSA2LjYxMTA4IiBzdHJva2U9IiM5NDk0OTQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjA4MzQgNC4wODMzN0g1LjYzODkzQzQuNzc5ODIgNC4wODMzNyA0LjA4MzM3IDQuNzc5ODIgNC4wODMzNyA1LjYzODkzVjExLjA4MzRDNC4wODMzNyAxMS45NDI1IDQuNzc5ODIgMTIuNjM4OSA1LjYzODkzIDEyLjYzODlIMTEuMDgzNEMxMS45NDI1IDEyLjYzODkgMTIuNjM4OSAxMS45NDI1IDEyLjYzODkgMTEuMDgzNFY1LjYzODkzQzEyLjYzODkgNC43Nzk4MiAxMS45NDI1IDQuMDgzMzcgMTEuMDgzNCA0LjA4MzM3WiIgc3Ryb2tlPSIjOTQ5NDk0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0yLjE3ODU4IDkuMzMxNzlMMS4zNzgyNCAzLjk0NjQ2QzEuMjUyMjQgMy4wOTYzNSAxLjgzODY5IDIuMzA1MzUgMi42ODgwMiAyLjE3OTM1TDguMDczMzYgMS4zNzkwMkM4Ljc5OTAyIDEuMjcwOTEgOS40ODExMyAxLjY4MjM1IDkuNzQ0MDIgMi4zMzQxMyIgc3Ryb2tlPSIjOTQ5NDk0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="); | ||
| background-repeat: no-repeat; | ||
| } | ||
| .golden-image-title-icon:hover { | ||
| font-size: 14px; | ||
| color: white; | ||
| background-position: 0px 2px; | ||
| transition: 0.2s ease-in; | ||
| background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNNi40MTQzMSA4Ljk0NDQyTDcuNjY1NzUgMTAuMTExMUwxMC4zMDc5IDYuNjExMDgiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMS4wODM0IDQuMDgzMzdINS42Mzg5M0M0Ljc3OTgyIDQuMDgzMzcgNC4wODMzNyA0Ljc3OTgyIDQuMDgzMzcgNS42Mzg5M1YxMS4wODM0QzQuMDgzMzcgMTEuOTQyNSA0Ljc3OTgyIDEyLjYzODkgNS42Mzg5MyAxMi42Mzg5SDExLjA4MzRDMTEuOTQyNSAxMi42Mzg5IDEyLjYzODkgMTEuOTQyNSAxMi42Mzg5IDExLjA4MzRWNS42Mzg5M0MxMi42Mzg5IDQuNzc5ODIgMTEuOTQyNSA0LjA4MzM3IDExLjA4MzQgNC4wODMzN1oiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgICAgIDxwYXRoIGQ9Ik0yLjE3ODU4IDkuMzMxNzlMMS4zNzgyNCAzLjk0NjQ2QzEuMjUyMjQgMy4wOTYzNSAxLjgzODY5IDIuMzA1MzUgMi42ODgwMiAyLjE3OTM1TDguMDczMzYgMS4zNzkwMkM4Ljc5OTAyIDEuMjcwOTEgOS40ODExMyAxLjY4MjM1IDkuNzQ0MDIgMi4zMzQxMyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICAgICAgPC9zdmc+"); | ||
| background-repeat: no-repeat; | ||
| } | ||
| .copy-button-icon { | ||
| height: auto; | ||
| margin-left: 14px; | ||
| } | ||
| .status-image-name-copied { | ||
| visibility: hidden; | ||
| transition: 0.4s ease-in; | ||
| font-size: 14px; | ||
| margin-left: 10px; | ||
| color: white; | ||
| font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | ||
| } | ||
| .golden-failure { | ||
| height: 100%; | ||
| width: 100%; | ||
| margin: auto; | ||
| transition: 0.2s ease-in; | ||
| } | ||
| .hidden { | ||
| visibility: hidden; | ||
| }`; | ||
|
|
||
|
|
||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { GoldenFailureItem } from "../golden_failure_item"; | ||
| import { FailureCSS } from "./failure_css"; | ||
|
|
||
| import * as vscode from 'vscode'; | ||
| export class FailureHtml { | ||
| static html(item: GoldenFailureItem, panel: vscode.WebviewPanel) { | ||
| return ` | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| ${FailureCSS.css(panel, item)} | ||
| </style> | ||
| <script> | ||
| function onCopyTextToClipboard() { | ||
| let textEditor = document.createElement("input"); | ||
| textEditor.value = '${item.label}'; | ||
| navigator.clipboard.writeText(textEditor.value); | ||
| document.getElementById("copy_status").style.visibility = 'visible'; | ||
| } | ||
| function onMouseLeave() { | ||
| let goldenFailure = document.getElementById('golden_failure'); | ||
| let browserFrame = document.getElementById('browser_frame'); | ||
| browserFrame.style.boxShadow = '0px 0px 25px 8px #f62424'; | ||
| goldenFailure.style.backgroundColor = 'black'; | ||
| goldenFailure.style.backgroundImage="url('${panel.webview.asWebviewUri(vscode.Uri.file(item.imageFailure!))}')"; | ||
| goldenFailure.style.backgroundSize = '${item.width}px ${item.height}px'; | ||
| } | ||
| function onHoverMaster() { | ||
| let goldenFailure = document.getElementById('golden_failure'); | ||
| let browserFrame = document.getElementById('browser_frame'); | ||
| browserFrame.style.boxShadow = '0px 0px 25px 8px #35f624'; | ||
| goldenFailure.style.backgroundColor = 'black'; | ||
| goldenFailure.style.backgroundImage="url('${panel.webview.asWebviewUri(vscode.Uri.file(item.imageMaster!))}')"; | ||
| goldenFailure.style.backgroundSize = '${item.width}px ${item.height}px'; | ||
| } | ||
| function onHoverIsolated() { | ||
| let goldenFailure = document.getElementById('golden_failure'); | ||
| let browserFrame = document.getElementById('browser_frame'); | ||
| browserFrame.style.boxShadow = '5px 4px 15px #727272'; | ||
| goldenFailure.style.backgroundColor = 'black'; | ||
| goldenFailure.style.backgroundImage="url('${panel.webview.asWebviewUri(vscode.Uri.file(item.imageIsolated!))}')"; | ||
| goldenFailure.style.backgroundSize = '${item.width}px ${item.height}px'; | ||
| } | ||
| function onHoverMasked() { | ||
| let goldenFailure = document.getElementById('golden_failure'); | ||
| let browserFrame = document.getElementById('browser_frame'); | ||
| browserFrame.style.boxShadow = '5px 4px 15px #727272'; | ||
| goldenFailure.style.backgroundColor = 'black'; | ||
| goldenFailure.style.backgroundImage="url('${panel.webview.asWebviewUri(vscode.Uri.file(item.imageMasked!))}')"; | ||
| goldenFailure.style.backgroundSize = '${item.width}px ${item.height}px'; | ||
| } | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div id="browser_frame" class="browser-frame"> | ||
| <div class="browser-frame-header "> | ||
| <div class="content-flex"> | ||
| <div onmouseleave="onMouseLeave()" onmouseenter="onHoverMaster()" class="browser-frame-header-action-buttons close-button" > </div> | ||
| <div onmouseleave="onMouseLeave()" onmouseenter="onHoverIsolated()" class="browser-frame-header-action-buttons minimise-button" > </div> | ||
| <div onmouseleave="onMouseLeave()" onmouseenter="onHoverMasked()" class="browser-frame-header-action-buttons maximise-button" > </div> | ||
| </div> | ||
| <div class="window-title content-flex" onclick="onCopyTextToClipboard()"> | ||
| <div class="golden-image-title golden-image-title-text golden-image-title-icon">${item.label}</div> | ||
| <div id="copy_status" class="status-image-name-copied">Copied!</div> | ||
| </div> | ||
| </div> | ||
| <div class="browser-frame-content"> | ||
| <img class="golden-failure" id="golden_failure" alt=""> | ||
| </div> | ||
| </div> | ||
| <div class="legend-container"> | ||
| <div class="close-button legend" onmouseleave="onMouseLeave()" onmouseenter="onHoverMaster()">Master</div> | ||
| <div class="minimise-button legend" onmouseleave="onMouseLeave()" onmouseenter="onHoverIsolated()">Isolated</div> | ||
| <div class="maximise-button legend" onmouseleave="onMouseLeave()" onmouseenter="onHoverMasked()">Masked</div> | ||
| </div> | ||
| </body> | ||
| </html>`; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| } |
Oops, something went wrong.