From 4f8fb2736416934195f4ff24d2e8b34b339059ab Mon Sep 17 00:00:00 2001 From: TahaMajlesi <186780445+TahaMjp@users.noreply.github.com> Date: Tue, 12 Aug 2025 00:31:27 -0700 Subject: [PATCH 1/3] Add LaunchMap watermark to webview and update styles Introduces a LaunchMap watermark with logo and text to the webview by updating the HTML and adding new CSS styles. Enhances the appearance and interactivity of the export button and editor, and improves layout responsiveness for smaller screens. --- src/panel/getWebviewHtml.ts | 50 ++++++++++------ webview/styles/base.css | 110 ++++++++++++++++++++++++++++++++++-- 2 files changed, 138 insertions(+), 22 deletions(-) diff --git a/src/panel/getWebviewHtml.ts b/src/panel/getWebviewHtml.ts index 031a69a..864a116 100644 --- a/src/panel/getWebviewHtml.ts +++ b/src/panel/getWebviewHtml.ts @@ -14,24 +14,38 @@ import * as vscode from 'vscode'; -export function getWebviewHtml(webview: vscode.Webview, extensionUri: vscode.Uri): string { - const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'webview', 'script.js')); - const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'webview', 'style.css')); +export function getWebviewHtml( + webview: vscode.Webview, + extensionUri: vscode.Uri +): string { + const scriptUri = webview.asWebviewUri( + vscode.Uri.joinPath(extensionUri, 'webview', 'script.js') + ); + const styleUri = webview.asWebviewUri( + vscode.Uri.joinPath(extensionUri, 'webview', 'style.css') + ); + + const logoUri = webview.asWebviewUri( + vscode.Uri.joinPath(extensionUri, 'assets', 'launchmap-logo.png') + ); return ` - - - - - - - - - -
-
- - - - `; + + + + + + + + + +
+
+ Logo +

LaunchMap

+
+ + + +`; } diff --git a/webview/styles/base.css b/webview/styles/base.css index b7368dc..836a5bb 100644 --- a/webview/styles/base.css +++ b/webview/styles/base.css @@ -14,16 +14,57 @@ top: 12px; right: 12px; z-index: 1000; - background: linear-gradient(145deg, #0e61a9, #0a3f6b); color: #ffffff; border: 2px solid #1c90f3; border-radius: 8px; - font-size: 14px; font-weight: bold; padding: 8px 14px; + box-shadow: 0 0 8px rgba(28, 144, 243, 0.4); + transition: all 0.2s ease; + cursor: pointer; +} + +#export-btn:hover { + background: linear-gradient(145deg, #1287e2, #0b5185); + box-shadow: 0 0 12px rgba(28, 144, 243, 0.6); + transform: translateY(-1px); +} + +#export-btn:active { + transform: translateY(0); + box-shadow: 0 0 6px rgba(28, 144, 243, 0.3); +} + +#zoom-layer { + transform-origin: 0 0; + will-change: transform; +} + +#editor { + width: 100%; + height: 100vh; + background-color: #1e1e1e; + color: white; + position: relative; + overflow: scroll; + font-family: monospace; + margin-top: 40px; +} +#export-btn { + position: fixed; + top: 12px; + right: 12px; + z-index: 1000; + background: linear-gradient(145deg, #0e61a9, #0a3f6b); + color: #ffffff; + border: 2px solid #1c90f3; + border-radius: 8px; + font-size: 14px; + font-weight: bold; + padding: 8px 14px; box-shadow: 0 0 8px rgba(28, 144, 243, 0.4); transition: all 0.2s ease; cursor: pointer; @@ -41,6 +82,67 @@ } #zoom-layer { - transform-origin: 0 0; - will-change: transform; + transform-origin: 0 0; + will-change: transform; +} + +#watermark { + position: fixed; + bottom: 24px; + left: 24px; + z-index: 1000; + background: none; + color: rgba(255, 255, 255, 0.82); + border-radius: 16px; + font-size: 72px; + font-weight: 700; + letter-spacing: 1px; + padding: 0; + cursor: default; + /* Changed to default since no pointer interaction needed */ + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); + transition: all 0.3s ease; + opacity: 0.35; + /* Prevent text selection */ + user-select: none; + /* Make clicks pass through */ + pointer-events: none; +} + +#watermark img { + width: 120px; + height: 120px; + margin-right: 0; + border-radius: 10px; + object-fit: contain; + opacity: 0.95; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); + /* To also prevent pointer events on the image */ + pointer-events: none; +} + +#watermark p { + font-family: 'League Spartan', sans-serif; + font-weight: 700; + margin: 0; + color: rgba(220, 220, 220, 0.9); + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); + user-select: none; + pointer-events: none; +} + +@media (max-width: 768px) { + #watermark { + font-size: 48px; + gap: 10px; + } + + #watermark img { + width: 80px; + height: 80px; + } } \ No newline at end of file From 7451ae9e75046dc96dd4b1f11cd197205ec0f7e1 Mon Sep 17 00:00:00 2001 From: TahaMajlesi <186780445+TahaMjp@users.noreply.github.com> Date: Tue, 12 Aug 2025 03:29:01 -0700 Subject: [PATCH 2/3] Move watermark styles to separate CSS file Extracted all #watermark related styles from base.css into a new watermark.css file and updated style.css to import the new stylesheet. This improves maintainability and separation of concerns for component-specific styles. --- webview/style.css | 1 + webview/styles/base.css | 61 ------------------------------------ webview/styles/watermark.css | 59 ++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 61 deletions(-) create mode 100644 webview/styles/watermark.css diff --git a/webview/style.css b/webview/style.css index 5ccf14d..7f2d9ee 100644 --- a/webview/style.css +++ b/webview/style.css @@ -1,6 +1,7 @@ @import './styles/base.css'; @import './styles/edges.css'; @import './styles/events.css'; +@import './styles/watermark.css'; @import './styles/components/common.css'; @import './styles/components/arguments.css'; @import './styles/components/environment-varaiables.css'; diff --git a/webview/styles/base.css b/webview/styles/base.css index 836a5bb..201e7fc 100644 --- a/webview/styles/base.css +++ b/webview/styles/base.css @@ -84,65 +84,4 @@ #zoom-layer { transform-origin: 0 0; will-change: transform; -} - -#watermark { - position: fixed; - bottom: 24px; - left: 24px; - z-index: 1000; - background: none; - color: rgba(255, 255, 255, 0.82); - border-radius: 16px; - font-size: 72px; - font-weight: 700; - letter-spacing: 1px; - padding: 0; - cursor: default; - /* Changed to default since no pointer interaction needed */ - display: flex; - align-items: center; - justify-content: center; - gap: 14px; - text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); - transition: all 0.3s ease; - opacity: 0.35; - /* Prevent text selection */ - user-select: none; - /* Make clicks pass through */ - pointer-events: none; -} - -#watermark img { - width: 120px; - height: 120px; - margin-right: 0; - border-radius: 10px; - object-fit: contain; - opacity: 0.95; - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); - /* To also prevent pointer events on the image */ - pointer-events: none; -} - -#watermark p { - font-family: 'League Spartan', sans-serif; - font-weight: 700; - margin: 0; - color: rgba(220, 220, 220, 0.9); - text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); - user-select: none; - pointer-events: none; -} - -@media (max-width: 768px) { - #watermark { - font-size: 48px; - gap: 10px; - } - - #watermark img { - width: 80px; - height: 80px; - } } \ No newline at end of file diff --git a/webview/styles/watermark.css b/webview/styles/watermark.css new file mode 100644 index 0000000..2ea06de --- /dev/null +++ b/webview/styles/watermark.css @@ -0,0 +1,59 @@ +#watermark { + position: fixed; + bottom: 24px; + left: 24px; + z-index: 1000; + background: none; + color: rgba(255, 255, 255, 0.82); + border-radius: 16px; + font-size: 72px; + font-weight: 700; + letter-spacing: 1px; + padding: 0; + cursor: default; + /* Changed to default since no pointer interaction needed */ + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); + opacity: 0.35; + /* Prevent text selection */ + user-select: none; + /* Make clicks pass through */ + pointer-events: none; +} + +#watermark img { + width: 120px; + height: 120px; + margin-right: 0; + border-radius: 10px; + object-fit: contain; + opacity: 0.95; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); + /* To also prevent pointer events on the image */ + pointer-events: none; +} + +#watermark p { + font-family: 'League Spartan', sans-serif; + font-weight: 700; + margin: 0; + color: rgba(220, 220, 220, 0.9); + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); + user-select: none; + pointer-events: none; +} + +@media (max-width: 768px) { + #watermark { + font-size: 48px; + gap: 10px; + } + + #watermark img { + width: 80px; + height: 80px; + } +} \ No newline at end of file From 68ac0a269f2a763215094d5fdf84e275ec17a75c Mon Sep 17 00:00:00 2001 From: TahaMajlesi <186780445+TahaMjp@users.noreply.github.com> Date: Tue, 12 Aug 2025 07:19:53 -0700 Subject: [PATCH 3/3] Reduce watermark font and image sizes for better UI Decreased the font size and image dimensions of the watermark for both desktop and mobile breakpoints to improve visual balance and reduce UI dominance. --- webview/styles/watermark.css | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/webview/styles/watermark.css b/webview/styles/watermark.css index 2ea06de..16d1899 100644 --- a/webview/styles/watermark.css +++ b/webview/styles/watermark.css @@ -6,33 +6,29 @@ background: none; color: rgba(255, 255, 255, 0.82); border-radius: 16px; - font-size: 72px; + font-size: 36px; font-weight: 700; letter-spacing: 1px; padding: 0; cursor: default; - /* Changed to default since no pointer interaction needed */ display: flex; align-items: center; justify-content: center; gap: 14px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); opacity: 0.35; - /* Prevent text selection */ user-select: none; - /* Make clicks pass through */ pointer-events: none; } #watermark img { - width: 120px; - height: 120px; + width: 60px; + height: 60px; margin-right: 0; border-radius: 10px; object-fit: contain; opacity: 0.95; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); - /* To also prevent pointer events on the image */ pointer-events: none; } @@ -48,12 +44,12 @@ @media (max-width: 768px) { #watermark { - font-size: 48px; + font-size: 24px; gap: 10px; } #watermark img { - width: 80px; - height: 80px; + width: 40px; + height: 40px; } } \ No newline at end of file