added edit menu

This commit is contained in:
David Mosbach 2023-06-03 03:22:11 +02:00
parent 6b03475f13
commit 9402b3ddba
3 changed files with 28 additions and 15 deletions

View File

@ -179,7 +179,7 @@ body {
-webkit-backdrop-filter: blur(10px);
}
.contextmenu div, #filemenu div {
.contextmenu div, #filemenu div, #editmenu div {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
@ -203,40 +203,40 @@ body {
border-bottom-right-radius: 5px;
}
.contextmenu .menu-lightmode:hover, #filemenu .menu-lightmode:hover {
.contextmenu .menu-lightmode:hover, #filemenu .menu-lightmode:hover, #editmenu .menu-lightmode:hover {
background-color: rgb(240, 240, 240, 0.8);
}
.contextmenu .menu-lightmode:active, #filemenu .menu-lightmode:active {
.contextmenu .menu-lightmode:active, #filemenu .menu-lightmode:active, #editmenu .menu-lightmode:active {
background-color: rgb(250, 250, 250, 0.8);
}
.contextmenu .menu-darkmode:hover, #filemenu .menu-darkmode:hover {
.contextmenu .menu-darkmode:hover, #filemenu .menu-darkmode:hover, #editmenu .menu-darkmode:hover {
background-color: rgba(35, 35, 35, 0.8);
}
.contextmenu .menu-darkmode:active, #filemenu .menu-darkmode:active {
.contextmenu .menu-darkmode:active, #filemenu .menu-darkmode:active, #editmenu .menu-darkmode:active {
background-color: rgba(45, 45, 45, 0.8);
}
#filemenu .menutop {
#filemenu .menutop, #editmenu .menutop {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-top: 20px;
}
#filemenu .menubottom {
#filemenu .menubottom, #editmenu .menubottom {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
padding-bottom: 20px;
}
#filemenu {
#filemenu, #editmenu {
padding: 0 0 0 0;
background-color: transparent;
}
#filemenu div {
#filemenu div, #editmenu div {
padding-left: 20px;
padding-right: 20px;
}

View File

@ -12,16 +12,24 @@
<div id="editor">
<div id="curtain" onclick="closeFileDisplay()"></div> <!--Backdrop behind the file menu-->
<div id="submenu-backdrop"></div>
<div id="mainmenu" class="menu-lightmode"> <!--Horizontal bar on top for selecting highlighting modes-->
<div id="mainmenu" class="menu-lightmode"> <!--Horizontal main menu-->
<div class="menuitem" onclick="openFileMenu(this)">
<button>File</button>
<div id="filemenu" class="submenu" onclick="event.stopPropagation()">
<div class="menutop menu-lightmode">Undo (Ctrl + Z)</div>
<div class="menucenter menu-lightmode">Redo (Ctrl + Y)</div>
<div class="menucenter menu-lightmode">Save (Ctrl + S)</div>
<div class="menutop menu-lightmode">New Workflow</div>
<div class="menucenter menu-lightmode" onclick="openFileDisplay()">Open</div>
<div class="menucenter menu-lightmode">Save</div>
<div class="menucenter menu-lightmode">Save As</div>
<div class="menucenter menu-lightmode">Export</div>
<div class="menubottom menu-lightmode" onclick="openFileDisplay()">Open</div>
<div class="menubottom menu-lightmode">Export</div>
</div>
</div>
<div class="menuitem" onclick="openEditMenu(this)">
<button>Edit</button>
<div id="editmenu" class="submenu" onclick="event.stopPropagation()">
<div class="menutop menu-lightmode">Undo</div>
<div class="menucenter menu-lightmode">Redo</div>
<div class="menucenter menu-lightmode">Edit Description</div>
<div class="menubottom menu-lightmode">Run Linter</div>
</div>
</div>
<div class="menuitem" onclick="openViewMenu(this)">

View File

@ -11,6 +11,7 @@ function toggleTheme() {
Array.from(item.getElementsByClassName('submenu')).forEach(subMenu => menus.push(subMenu))
);
Array.from(fileMenu.children).forEach(child => menus.push(child));
Array.from(document.getElementById('editmenu').children).forEach(child => menus.push(child));
Array.from(contextMenuBg.children).forEach(child => menus.push(child));
Array.from(contextMenuEd.children).forEach(child => menus.push(child));
Array.from(contextMenuSt.children).forEach(child => menus.push(child));
@ -108,6 +109,10 @@ function openFileMenu(menuitem) {
openMenuItem(menuitem);
}
function openEditMenu(menuitem) {
openMenuItem(menuitem);
}
function openViewMenu(menuitem) {
openMenuItem(menuitem);
}