liangsheng8708
/
ruffle
mirror of https://mirror.ghproxy.com/https://github.com/ruffle-rs/ruffle.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

web: Redesign the context menu

This commit is contained in:
Adrian Wielgosik 2021-01-24 17:09:05 +01:00 committed by Mike Welsh
parent 4c3783b6ff
commit 9195491f1b
2 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/packages/core/src/ruffle-player.ts
View File

@ -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

36
web/packages/core/src/shadow-template.ts
View File

@ -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>