lmu/uni2work.workflows.visualiser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added edit menu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
editor.css
View File

@ -179,7 +179,7 @@ body {
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
} }
.contextmenu div, #filemenu div { .contextmenu div, #filemenu div, #editmenu div {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
padding-left: 10px; padding-left: 10px;
@ -203,40 +203,40 @@ body {
border-bottom-right-radius: 5px; 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); 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); 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); 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); background-color: rgba(45, 45, 45, 0.8);
} }
#filemenu .menutop { #filemenu .menutop, #editmenu .menutop {
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
padding-top: 20px; padding-top: 20px;
} }
#filemenu .menubottom { #filemenu .menubottom, #editmenu .menubottom {
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;
padding-bottom: 20px; padding-bottom: 20px;
} }
#filemenu { #filemenu, #editmenu {
padding: 0 0 0 0; padding: 0 0 0 0;
background-color: transparent; background-color: transparent;
} }
#filemenu div { #filemenu div, #editmenu div {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }

20
editor.html
View File

@ -12,16 +12,24 @@
<div id="editor"> <div id="editor">
<div id="curtain" onclick="closeFileDisplay()"></div> <!--Backdrop behind the file menu--> <div id="curtain" onclick="closeFileDisplay()"></div> <!--Backdrop behind the file menu-->
<div id="submenu-backdrop"></div> <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)"> <div class="menuitem" onclick="openFileMenu(this)">
<button>File</button> <button>File</button>
<div id="filemenu" class="submenu" onclick="event.stopPropagation()"> <div id="filemenu" class="submenu" onclick="event.stopPropagation()">
<div class="menutop menu-lightmode">Undo (Ctrl + Z)</div> <div class="menutop menu-lightmode">New Workflow</div>
<div class="menucenter menu-lightmode">Redo (Ctrl + Y)</div> <div class="menucenter menu-lightmode" onclick="openFileDisplay()">Open</div>
<div class="menucenter menu-lightmode">Save (Ctrl + S)</div> <div class="menucenter menu-lightmode">Save</div>
<div class="menucenter menu-lightmode">Save As</div> <div class="menucenter menu-lightmode">Save As</div>
<div class="menucenter menu-lightmode">Export</div> <div class="menubottom menu-lightmode">Export</div>
<div class="menubottom menu-lightmode" onclick="openFileDisplay()">Open</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> </div>
<div class="menuitem" onclick="openViewMenu(this)"> <div class="menuitem" onclick="openViewMenu(this)">

5
editor.js
View File

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