menu buttons are now divs
This commit is contained in:
David Mosbach
parent
9402b3ddba
commit
d4e76f1326
22
editor.css
22
editor.css
@ -19,8 +19,6 @@ body {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
padding-left: 10px;
|
||||
/* background-color: rgba(230, 230, 230, 0.8); */
|
||||
/* transition: all 100ms ease-out 50ms; */
|
||||
z-index: 5;
|
||||
float: left;
|
||||
backdrop-filter: blur(10px);
|
||||
@ -32,10 +30,10 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuitem button {
|
||||
.menuitem .menubutton {
|
||||
font-family: 'Inter';
|
||||
font-weight: 500;
|
||||
padding: 10 0 10 0;
|
||||
padding: 5 0 5 0;
|
||||
margin: 0 10 0 10;
|
||||
font-size: 1em;
|
||||
background-color: transparent;
|
||||
@ -48,11 +46,11 @@ body {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.menuitem:hover button {
|
||||
.menuitem:hover .menubutton {
|
||||
border-bottom: 4px solid rgb(75, 151, 151);
|
||||
}
|
||||
|
||||
.menuitem:active button, .selectedmenuitem button {
|
||||
.menuitem:active .menubutton, .selectedmenuitem .menubutton {
|
||||
border-bottom: 4px solid rgb(75, 151, 151);
|
||||
color: rgb(75, 151, 151);
|
||||
}
|
||||
@ -75,13 +73,12 @@ body {
|
||||
.menuitem #filename {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
padding: 10 0 10 0;
|
||||
padding: 5 0 5 0;
|
||||
margin: 0 10 0 10;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Inter';
|
||||
font-weight: normal;
|
||||
/* color: rgba(120, 120, 120, 0.6); */
|
||||
background-color: transparent;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
@ -90,9 +87,7 @@ body {
|
||||
|
||||
.submenu, #sidepanel, #filepanel {
|
||||
position:fixed;
|
||||
/* background-color: rgba(230, 230, 230, 0.8); */
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
/* transition: all 100ms ease-out 50ms; */
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
@ -101,8 +96,8 @@ body {
|
||||
|
||||
#sidepanel {
|
||||
top: 70px;
|
||||
bottom:20px;
|
||||
right:20px;
|
||||
bottom:15px;
|
||||
right:15px;
|
||||
width: 500px;
|
||||
z-index:10;
|
||||
overflow: hidden;
|
||||
@ -124,7 +119,6 @@ body {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
/* color: rgba(120, 120, 120, 0.538); */
|
||||
}
|
||||
|
||||
#sidecontentedge, #sidecontentnode {
|
||||
@ -184,8 +178,6 @@ body {
|
||||
padding-bottom: 5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
/* background-color: rgba(230, 230, 230, 0.8); */
|
||||
/* opacity: 0.95; */
|
||||
transition: all 100ms ease-out 50ms;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
33
editor.html
33
editor.html
@ -14,7 +14,7 @@
|
||||
<div id="submenu-backdrop"></div>
|
||||
<div id="mainmenu" class="menu-lightmode"> <!--Horizontal main menu-->
|
||||
<div class="menuitem" onclick="openFileMenu(this)">
|
||||
<button>File</button>
|
||||
<div class="menubutton">File</div>
|
||||
<div id="filemenu" class="submenu" onclick="event.stopPropagation()">
|
||||
<div class="menutop menu-lightmode">New Workflow</div>
|
||||
<div class="menucenter menu-lightmode" onclick="openFileDisplay()">Open</div>
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuitem" onclick="openEditMenu(this)">
|
||||
<button>Edit</button>
|
||||
<div class="menubutton">Edit</div>
|
||||
<div id="editmenu" class="submenu" onclick="event.stopPropagation()">
|
||||
<div class="menutop menu-lightmode">Undo</div>
|
||||
<div class="menucenter menu-lightmode">Redo</div>
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuitem" onclick="openViewMenu(this)">
|
||||
<button>View</button>
|
||||
<div class="menubutton">View</div>
|
||||
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
|
||||
<div>
|
||||
<label for="actor">Highlight actor: </label>
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuitem" onclick="openSettingsMenu(this)">
|
||||
<button>Settings</button> <!--Main settings menu-->
|
||||
<div class="menubutton">Settings</div> <!--Main settings menu-->
|
||||
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
|
||||
<table id="settings-table">
|
||||
<tr>
|
||||
@ -89,7 +89,18 @@
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
draw @@init or not, collapse all edges between 2 states
|
||||
draw @@init or not
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label class="toggle" title="Foo">
|
||||
<input type="checkbox" disabled>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
collapse all edges between 2 states
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@ -100,29 +111,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuitem" onclick="openAboutMenu(this)">
|
||||
<button>About</button>
|
||||
<div class="menubutton">About</div>
|
||||
<div class="submenu menu-lightmode">Visualiser & editor for Uni2work workflows</div>
|
||||
</div>
|
||||
<div class="menuitem" onclick="openSearchMenu(this)">
|
||||
<button>Search</button>
|
||||
<div class="menubutton">Search</div>
|
||||
<div class="submenu menu-lightmode">Search for states, edges and their contents</div>
|
||||
</div>
|
||||
<div class="menuitem">
|
||||
<button id="filename" class="contenttype-lightmode"></button>
|
||||
<div id="filename" class="contenttype-lightmode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidepanel" class="menu-lightmode"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
|
||||
<div id="sideheader">
|
||||
<div id="sidecontentedge" class="sidecontenttype contenttype-lightmode">
|
||||
<svg height="10" width="28" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
|
||||
<svg height="10" width="28" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="4" cy="4" r="3" stroke-width="2" fill="none" />
|
||||
<polyline points="8,4 18,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
||||
<circle cx="22" cy="4" r="3" stroke-width="2" fill="none" /> />
|
||||
<circle cx="22" cy="4" r="3" stroke-width="2" fill="none" />
|
||||
</svg>
|
||||
Edge
|
||||
</div>
|
||||
<div id="sidecontentnode" class="sidecontenttype contenttype-lightmode">
|
||||
<svg height="10" width="22" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
|
||||
<svg height="10" width="22" xmlns="http://www.w3.org/2000/svg">
|
||||
<polyline points="2,4 7,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
||||
<circle cx="11" cy="4" r="3" stroke-width="2" fill="none" />
|
||||
<polyline points="15,4 20,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
||||
|
||||
@ -50,6 +50,8 @@ function toggleTheme() {
|
||||
const mainMenu = document.getElementById('mainmenu');
|
||||
var selectedMenuItem = null;
|
||||
|
||||
Array.from(document.getElementsByClassName('submenu')).forEach(subMenu => subMenu.style.top = mainMenu.offsetHeight + 15);
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} menuitem
|
||||
@ -315,6 +317,8 @@ var actionIdCounter = 0;
|
||||
var stateAbbreviations = [];
|
||||
var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new state
|
||||
|
||||
sidePanel.style.top = mainMenu.offsetHeight + 15;
|
||||
|
||||
/**
|
||||
* Marks the given item as selected.
|
||||
* @param {*} item The node or edge to select.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user