From 9195491f1bdbb5540567af04287774ef894d5129 Mon Sep 17 00:00:00 2001
From: Adrian Wielgosik <adrian.wielgosik@gmail.com>
Date: Sun, 24 Jan 2021 17:09:05 +0100
Subject: [PATCH] web: Redesign the context menu

---
 web/packages/core/src/ruffle-player.ts   | 26 +++++++++++++----
 web/packages/core/src/shadow-template.ts | 36 ++++++++----------------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/web/packages/core/src/ruffle-player.ts b/web/packages/core/src/ruffle-player.ts
index bb5ba9e30..ec7728ed3 100644
--- a/web/packages/core/src/ruffle-player.ts
+++ b/web/packages/core/src/ruffle-player.ts
@@ -569,7 +569,13 @@ export class RufflePlayer extends HTMLElement {
             }
         }
         items.push({
-            text: `Ruffle %VERSION_NAME%`,
+            text: "SEPARATOR",
+            onClick() {
+                // do nothing.
+            },
+        });
+        items.push({
+            text: `About Ruffle (%VERSION_NAME%)`,
             onClick() {
                 window.open(RUFFLE_ORIGIN, "_blank");
             },
@@ -593,11 +599,19 @@ export class RufflePlayer extends HTMLElement {
 
         // Populate context menu items.
         for (const { text, onClick } of this.contextMenuItems()) {
-            const element = document.createElement("li");
-            element.className = "menu_item active";
-            element.textContent = text;
-            element.addEventListener("click", onClick);
-            this.contextMenuElement.appendChild(element);
+            if (text == "SEPARATOR") {
+                const element = document.createElement("li");
+                element.className = "menu_separator";
+                const hr = document.createElement("hr");
+                element.appendChild(hr);
+                this.contextMenuElement.appendChild(element);
+            } else {
+                const element = document.createElement("li");
+                element.className = "menu_item active";
+                element.textContent = text;
+                element.addEventListener("click", onClick);
+                this.contextMenuElement.appendChild(element);
+            }
         }
 
         // Place a context menu in the top-left corner, so
diff --git a/web/packages/core/src/shadow-template.ts b/web/packages/core/src/shadow-template.ts
index 9ac7754e6..79921ed87 100644
--- a/web/packages/core/src/shadow-template.ts
+++ b/web/packages/core/src/shadow-template.ts
@@ -157,13 +157,12 @@ ruffleShadowTemplate.innerHTML = `
         }
 
         #context-menu {
-            display: none;
-            color: #FFAD33;
-            background-color: #37528c;
-            border-radius: 5px;
-            box-shadow: 0px 5px 15px -5px #000;
+            color: black;
+            background-color: #FAFAFA;
+            border: 1px solid gray;
+            box-shadow: 0px 5px 10px -5px black;
             position: absolute;
-            font-size: 16px;
+            font-size: 14px;
             text-align: left;
             list-style: none;
             padding: 0;
@@ -174,36 +173,25 @@ ruffleShadowTemplate.innerHTML = `
             padding: 5px 10px;
         }
 
-        #context-menu .menu_separator {
-            padding: 5px 5px;
-        }
 
         #context-menu .active {
             cursor: pointer;
-            color: #FFAD33;
+            color: black;
         }
 
         #context-menu .disabled {
             cursor: default;
-            color: #94672F;
+            color: gray;
         }
 
         #context-menu .active:hover {
-            background-color: #184778;
+            background-color: lightgray;
         }
 
-        #context-menu hr {
-            color: #FFAD33;
-        }
-
-        #context-menu > :first-child {
-            border-top-right-radius: 5px;
-            border-top-left-radius: 5px;
-        }
-
-        #context-menu > :last-child {
-            border-bottom-right-radius: 5px;
-            border-bottom-left-radius: 5px;
+        #context-menu .menu_separator hr {
+            border: none;
+            border-bottom: 1px solid lightgray;
+            margin: 2px;
         }
     </style>
     <style id="dynamic_styles"></style>