From 3941104bd59dd79c19d612da1b11c05d87c2ed1c Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Mon, 28 Jul 2025 19:42:10 +0200 Subject: [PATCH] Tooltip Menu change to modern layout --- css_test.html | 542 ++++++++++++++++++++++++++++++++++++++++ js/css/canvas_view.css | 49 ++-- src/css/canvas_view.css | 49 ++-- 3 files changed, 606 insertions(+), 34 deletions(-) create mode 100644 css_test.html diff --git a/css_test.html b/css_test.html new file mode 100644 index 0000000..a5787d6 --- /dev/null +++ b/css_test.html @@ -0,0 +1,542 @@ + + + + + + Canvas View CSS Test - All Button Styles + + + + +

Canvas View CSS Test Page

+

This page demonstrates all button styles from src/css/canvas_view.css

+ +
+ + + +
+ + +
+

CanvasView Control Panel Layout

+
+ + +
+ + + + +
+ + +
+
+ +
+ + +
+ + + + + +
+ +
+ + +
+ + + + + +
+ +
+ + +
+ + + +
+ +
+ + +
+ + + + + + + +
+ +
+ + +
+ + +
+
+
+ + +
+

Basic Painter Buttons

+ +
+ Normal Button: + + + +
+ +
+ Primary Button: + + + +
+ +
+ Disabled Buttons: + + +
+ +
+ Matting Buttons: + + +
+
+ + +
+

Button Groups and Controls

+ +

Painter Controls Container

+
+ + + +
+ + +
+ +

Button Group

+
+ + + +
+ +

Clipboard Group

+
+ + + +
+
+ + +
+

Clipboard Switch

+ +
+ Clipboard Switch: + +
+
+ + +
+

Sliders and Controls

+ +
+
+ + + 50% +
+
+
+ + + 25px +
+
+
+ + +
+

Container Examples

+ +

Normal Container

+
+

This is a normal painter container

+ +
+ +

Container with Focus

+
+

This container has focus (white border)

+ +
+ +

Drag Over Container

+
+

This container is in drag-over state (green dashed border)

+ +
+
+ + +
+

Modal and Dialog

+ + + +

Dialog Example

+
+

Sample Dialog

+

Enter values:

+ + +
+ + +
+
+ + + + + + + + + + + diff --git a/js/css/canvas_view.css b/js/css/canvas_view.css index c2b4982..d2d16bc 100644 --- a/js/css/canvas_view.css +++ b/js/css/canvas_view.css @@ -386,17 +386,18 @@ .painter-tooltip { position: fixed; display: none; - background: #3a3a3a; + background: #2B2B2B; color: #f0f0f0; - border: 1px solid #555; - border-radius: 8px; + border: 1px solid #444; + border-top: 2px solid #4a90e2; + border-radius: 6px; padding: 12px 18px; z-index: 9999; - font-size: 13px; - line-height: 1.7; + font-size: 12px; + line-height: 1.5; width: auto; - max-width: min(500px, calc(100vw - 40px)); - box-shadow: 0 4px 12px rgba(0,0,0,0.3); + max-width: min(450px, calc(100vw - 30px)); + box-shadow: 0 4px 15px rgba(0,0,0,0.3); pointer-events: none; transform-origin: top left; transition: transform 0.2s ease; @@ -420,8 +421,9 @@ } .painter-tooltip table td { - padding: 2px 8px; + padding: 4px 8px; vertical-align: middle; + transition: background-color 0.2s; } .painter-tooltip table td:first-child { @@ -435,7 +437,10 @@ } .painter-tooltip table tr:nth-child(odd) td { - background-color: rgba(0,0,0,0.1); + background-color: rgba(255, 255, 255, 0.02); +} +.painter-tooltip table tr:hover td { + background-color: rgba(74, 144, 226, 0.15); } @media (max-width: 600px) { @@ -508,10 +513,15 @@ .painter-tooltip h4 { margin-top: 10px; - margin-bottom: 5px; - color: #4a90e2; /* Jasnoniebieski akcent */ - border-bottom: 1px solid #555; + margin-bottom: 6px; + color: #4a90e2; + border-bottom: 1px solid #4a90e2; padding-bottom: 4px; + font-size: 14px; + font-weight: 600; +} +.painter-tooltip h4:first-child { + margin-top: 0; } .painter-tooltip ul { @@ -521,13 +531,18 @@ } .painter-tooltip kbd { - background-color: #2a2a2a; - border: 1px solid #1a1a1a; - border-radius: 3px; + background-color: #444; + border: 1px solid #555; + border-bottom-width: 2px; + border-radius: 4px; padding: 2px 6px; font-family: monospace; - font-size: 12px; - color: #d0d0d0; + font-size: 11px; + color: #e0e0e0; + box-shadow: 0 1px 1px rgba(0,0,0,0.15); + margin: 0 1px; + display: inline-block; + vertical-align: middle; } .painter-container.has-focus { diff --git a/src/css/canvas_view.css b/src/css/canvas_view.css index c2b4982..d2d16bc 100644 --- a/src/css/canvas_view.css +++ b/src/css/canvas_view.css @@ -386,17 +386,18 @@ .painter-tooltip { position: fixed; display: none; - background: #3a3a3a; + background: #2B2B2B; color: #f0f0f0; - border: 1px solid #555; - border-radius: 8px; + border: 1px solid #444; + border-top: 2px solid #4a90e2; + border-radius: 6px; padding: 12px 18px; z-index: 9999; - font-size: 13px; - line-height: 1.7; + font-size: 12px; + line-height: 1.5; width: auto; - max-width: min(500px, calc(100vw - 40px)); - box-shadow: 0 4px 12px rgba(0,0,0,0.3); + max-width: min(450px, calc(100vw - 30px)); + box-shadow: 0 4px 15px rgba(0,0,0,0.3); pointer-events: none; transform-origin: top left; transition: transform 0.2s ease; @@ -420,8 +421,9 @@ } .painter-tooltip table td { - padding: 2px 8px; + padding: 4px 8px; vertical-align: middle; + transition: background-color 0.2s; } .painter-tooltip table td:first-child { @@ -435,7 +437,10 @@ } .painter-tooltip table tr:nth-child(odd) td { - background-color: rgba(0,0,0,0.1); + background-color: rgba(255, 255, 255, 0.02); +} +.painter-tooltip table tr:hover td { + background-color: rgba(74, 144, 226, 0.15); } @media (max-width: 600px) { @@ -508,10 +513,15 @@ .painter-tooltip h4 { margin-top: 10px; - margin-bottom: 5px; - color: #4a90e2; /* Jasnoniebieski akcent */ - border-bottom: 1px solid #555; + margin-bottom: 6px; + color: #4a90e2; + border-bottom: 1px solid #4a90e2; padding-bottom: 4px; + font-size: 14px; + font-weight: 600; +} +.painter-tooltip h4:first-child { + margin-top: 0; } .painter-tooltip ul { @@ -521,13 +531,18 @@ } .painter-tooltip kbd { - background-color: #2a2a2a; - border: 1px solid #1a1a1a; - border-radius: 3px; + background-color: #444; + border: 1px solid #555; + border-bottom-width: 2px; + border-radius: 4px; padding: 2px 6px; font-family: monospace; - font-size: 12px; - color: #d0d0d0; + font-size: 11px; + color: #e0e0e0; + box-shadow: 0 1px 1px rgba(0,0,0,0.15); + margin: 0 1px; + display: inline-block; + vertical-align: middle; } .painter-container.has-focus {