added search bar
This commit is contained in:
David Mosbach
parent
d4e76f1326
commit
bdce4f4deb
102
editor.css
102
editor.css
@ -32,18 +32,18 @@ body {
|
||||
|
||||
.menuitem .menubutton {
|
||||
font-family: 'Inter';
|
||||
font-weight: 500;
|
||||
padding: 5 0 5 0;
|
||||
margin: 0 10 0 10;
|
||||
padding: 5 0 5 0;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
transition: all 200ms ease-out 0ms;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
transition: all 200ms ease-out 0ms;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.menuitem:hover .menubutton {
|
||||
@ -55,13 +55,77 @@ body {
|
||||
color: rgb(75, 151, 151);
|
||||
}
|
||||
|
||||
.submenu #search-container {
|
||||
/* position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px; */
|
||||
padding: 5 5 5 5;
|
||||
background-color: transparent;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#search-container input {
|
||||
/* height: 100%; */
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgb(117, 117, 117);
|
||||
padding-left: 10px;
|
||||
padding-right: 38px;
|
||||
outline: none;
|
||||
transition: all 100ms ease-out 50ms;
|
||||
}
|
||||
|
||||
#search-container:hover input, #search-container input:active, #search-container input:focus {
|
||||
border: 2px solid rgb(117, 117, 117);
|
||||
/* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); */
|
||||
padding-left: 9px;
|
||||
padding-right: 37px;
|
||||
}
|
||||
|
||||
#search-container input:focus {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba(75, 151, 151, 0.702);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#search-container .search-button {
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
/* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); */
|
||||
padding: 6 6 6 6;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 10;
|
||||
right: 10;
|
||||
background-color: transparent;
|
||||
transition: all 100ms ease-out 50ms;
|
||||
/* background-color: rgb(120, 120, 120); */
|
||||
}
|
||||
#search-container .search-button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#search-container .search-button svg {
|
||||
stroke: rgb(117, 117, 117);
|
||||
}
|
||||
|
||||
.submenu {
|
||||
font-family: 'Inter';
|
||||
width: fit-content;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
overflow: hidden;
|
||||
padding: 20 20 20 20;
|
||||
display: none;
|
||||
cursor: default;
|
||||
}
|
||||
@ -88,7 +152,7 @@ body {
|
||||
.submenu, #sidepanel, #filepanel {
|
||||
position:fixed;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
padding: 20px;
|
||||
padding: 5px;
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
@ -214,13 +278,13 @@ body {
|
||||
#filemenu .menutop, #editmenu .menutop {
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
padding-top: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#filemenu .menubottom, #editmenu .menubottom {
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#filemenu, #editmenu {
|
||||
@ -391,13 +455,17 @@ label {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#settings-table {
|
||||
.submenu > table {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#settings-table, #view-table {
|
||||
line-height: 2;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#settings-table tr td:first-child {
|
||||
#settings-table tr td:first-child, #view-table tr td:first-child {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@ -441,11 +509,11 @@ label {
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
input:checked + .toggle-slider {
|
||||
.toggle input:checked + .toggle-slider {
|
||||
background-color: rgb(75, 151, 151);
|
||||
}
|
||||
|
||||
input:checked + .toggle-slider:before {
|
||||
.toggle input:checked + .toggle-slider:before {
|
||||
-webkit-transform: translateX(10px);
|
||||
-ms-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
@ -481,6 +549,16 @@ input:checked + .toggle-slider:before {
|
||||
stroke: rgb(192, 192, 192);
|
||||
}
|
||||
|
||||
.menu-lightmode #search-container input {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.menu-darkmode #search-container input {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contenttype-lightmode, .menuitem .contenttype-lightmode {
|
||||
color: rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
|
||||
38
editor.html
38
editor.html
@ -35,14 +35,24 @@
|
||||
<div class="menuitem" onclick="openViewMenu(this)">
|
||||
<div class="menubutton">View</div>
|
||||
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
|
||||
<div>
|
||||
<label for="actor">Highlight actor: </label>
|
||||
<select name="actor" id="actor" onchange="selectActor();"></select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="viewer">Highlight viewer: </label>
|
||||
<select name="viewer" id="viewer" onchange="selectViewer();"></select>
|
||||
</div>
|
||||
<table id="view-table">
|
||||
<tr>
|
||||
<td>
|
||||
<label for="actor">Highlight actor:</label>
|
||||
</td>
|
||||
<td>
|
||||
<select name="actor" id="actor" onchange="selectActor();"></select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="viewer">Highlight viewer:</label>
|
||||
</td>
|
||||
<td>
|
||||
<select name="viewer" id="viewer" onchange="selectViewer();"></select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuitem" onclick="openSettingsMenu(this)">
|
||||
@ -116,7 +126,17 @@
|
||||
</div>
|
||||
<div class="menuitem" onclick="openSearchMenu(this)">
|
||||
<div class="menubutton">Search</div>
|
||||
<div class="submenu menu-lightmode">Search for states, edges and their contents</div>
|
||||
<div class="submenu menu-lightmode" onclick="event.stopPropagation()">
|
||||
<div id="search-container">
|
||||
<input type="text" placeholder="Nodes, Edges, ...">
|
||||
<span class="search-button">
|
||||
<svg height="18" width="18" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="11" cy="7" r="6" stroke-width="2" fill="none" />
|
||||
<polyline points="8,10 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuitem">
|
||||
<div id="filename" class="contenttype-lightmode"></div>
|
||||
|
||||
@ -311,6 +311,7 @@ const fileButtons = document.getElementById('filebuttons');
|
||||
const contextMenuBg = document.getElementById('ctmenubg'); //Click on background
|
||||
const contextMenuSt = document.getElementById('ctmenust'); //Click on state
|
||||
const contextMenuEd = document.getElementById('ctmenued'); //Click on edge
|
||||
const searchContainer = document.getElementById('search-container');
|
||||
// Counters for placeholder IDs of states/actions added via GUI
|
||||
var stateIdCounter = 0;
|
||||
var actionIdCounter = 0;
|
||||
@ -318,6 +319,7 @@ var stateAbbreviations = [];
|
||||
var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new state
|
||||
|
||||
sidePanel.style.top = mainMenu.offsetHeight + 15;
|
||||
// searchContainer.style.left = mainMenu.offsetWidth / 2 - searchContainer.offsetWidth / 2;
|
||||
|
||||
/**
|
||||
* Marks the given item as selected.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user