added blur effects
This commit is contained in:
David Mosbach
parent
f2a5b858ad
commit
04dc0ee9b1
48
editor.css
48
editor.css
@ -20,11 +20,13 @@ body {
|
||||
position: fixed;
|
||||
/* padding: 8 8 8 8; */
|
||||
padding-left: 10px;
|
||||
background-color: rgb(230, 230, 230);
|
||||
opacity: 0.95;
|
||||
z-index: 2;
|
||||
background-color: rgba(230, 230, 230, 0.8);
|
||||
/* opacity: 0.95; */
|
||||
z-index: 5;
|
||||
float: left;
|
||||
overflow: auto;
|
||||
/* overflow: auto; */
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.menuitem {
|
||||
@ -89,11 +91,13 @@ body {
|
||||
|
||||
.submenu, #sidepanel, #filepanel {
|
||||
position:fixed;
|
||||
background-color: rgb(230, 230, 230);
|
||||
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);
|
||||
opacity: 0.95;
|
||||
/* opacity: 0.95; */
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
#sidepanel {
|
||||
@ -106,6 +110,10 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidepanel * {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#sideheader, #fileheader {
|
||||
width: 100%;
|
||||
}
|
||||
@ -168,12 +176,14 @@ body {
|
||||
line-height: 2;
|
||||
position: absolute;
|
||||
z-index: 15;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.contextmenu div, #filemenu div {
|
||||
padding: 5px;
|
||||
background-color: rgb(230, 230, 230);
|
||||
opacity: 0.95;
|
||||
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;
|
||||
@ -192,11 +202,11 @@ body {
|
||||
}
|
||||
|
||||
.contextmenu div:hover, #filemenu div:hover {
|
||||
background-color: rgb(240, 240, 240);
|
||||
background-color: rgb(240, 240, 240, 0.8);
|
||||
}
|
||||
|
||||
.contextmenu div:active, #filemenu div:active {
|
||||
background-color: rgb(250, 250, 250);
|
||||
background-color: rgb(250, 250, 250, 0.8);
|
||||
}
|
||||
|
||||
#filemenu .menutop {
|
||||
@ -213,6 +223,7 @@ body {
|
||||
|
||||
#filemenu {
|
||||
padding: 0 0 0 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#filemenu div {
|
||||
@ -366,11 +377,24 @@ label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#submenu-backdrop {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
display: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.force-graph-container .graph-tooltip {
|
||||
color: black;
|
||||
background-color: rgb(230, 230, 230);
|
||||
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);
|
||||
opacity: 0.95;
|
||||
/* opacity: 0.95; */
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
font-family: 'Inter';
|
||||
font-size: .75em;
|
||||
border-radius: 5px;
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
|
||||
<body>
|
||||
<div id="editor">
|
||||
<div id="curtain" onclick="closeFileDisplay()"></div>
|
||||
<div id="curtain" onclick="closeFileDisplay()"></div> <!--Backdrop behind the file menu-->
|
||||
<div id="submenu-backdrop"></div>
|
||||
<div id="mainmenu"> <!--Horizontal bar on top for selecting highlighting modes-->
|
||||
<div class="menuitem" onclick="openFileMenu(this)">
|
||||
<button>File</button>
|
||||
@ -38,7 +39,7 @@
|
||||
</div>
|
||||
<div class="menuitem" onclick="openSettingsMenu(this)">
|
||||
<button>Settings</button>
|
||||
<div class="submenu">Dark mode, visualisation settings, language</div>
|
||||
<div class="submenu">Dark mode, visualisation settings, draw @@init or not, collapse all edges between 2 states, language</div>
|
||||
</div>
|
||||
<div class="menuitem" onclick="openAboutMenu(this)">
|
||||
<button>About</button>
|
||||
|
||||
36
editor.js
36
editor.js
@ -16,13 +16,29 @@ function openMenuItem(menuitem) {
|
||||
var fadeOuts = [];
|
||||
Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => {
|
||||
other.classList.remove('selectedmenuitem');
|
||||
Array.from(other.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0}));
|
||||
Array.from(other.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0, step: 0.1}));
|
||||
});
|
||||
fadeOut(...fadeOuts);
|
||||
menuitem.classList.add('selectedmenuitem');
|
||||
var fadeIns = [];
|
||||
Array.from(menuitem.getElementsByClassName('submenu')).forEach(subMenu => fadeIns.push({element: subMenu, max: 0.95}));
|
||||
fadeIn(null, ...fadeIns);
|
||||
var fadeIns = [{element: submenuBackdrop, max: 1}];
|
||||
var lastSubMenu = null;
|
||||
Array.from(menuitem.getElementsByClassName('submenu')).forEach(subMenu => {
|
||||
fadeIns.push({element: subMenu, max: 1});
|
||||
lastSubMenu = subMenu;
|
||||
});
|
||||
function callback() {
|
||||
var smRect = lastSubMenu.getBoundingClientRect();
|
||||
console.log(smRect);
|
||||
submenuBackdrop.style.top = smRect.top;// sideHeading.offsetHeight + parseFloat(smStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom);
|
||||
submenuBackdrop.style.left = smRect.left;
|
||||
submenuBackdrop.style.width = lastSubMenu.offsetWidth;
|
||||
submenuBackdrop.style.height = lastSubMenu.offsetHeight;
|
||||
// var sbStyle = window.getComputedStyle(sideButtons);
|
||||
// sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(smStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom);
|
||||
// console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom);
|
||||
// var width =
|
||||
}
|
||||
fadeIn(callback, ...fadeIns);
|
||||
selectedMenuItem = menuitem;
|
||||
}
|
||||
|
||||
@ -35,8 +51,8 @@ function closeContextMenus(...menus) {
|
||||
function closeMenuItem() {
|
||||
if (!selectedMenuItem) return;
|
||||
selectedMenuItem.classList.remove('selectedmenuitem');
|
||||
var fadeOuts = [];
|
||||
Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0}));
|
||||
var fadeOuts = [{element: submenuBackdrop, min: 0, step: 0.1}];
|
||||
Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0, step: 0.1}));
|
||||
fadeOut(...fadeOuts);
|
||||
selectedMenuItem = null;
|
||||
}
|
||||
@ -73,7 +89,7 @@ function openFileDisplay() {
|
||||
var bStyle = window.getComputedStyle(fileButtons);
|
||||
fileContent.style.bottom = fileButtons.offsetHeight + parseFloat(pStyle.paddingBottom) + parseFloat(bStyle.marginTop) + parseFloat(bStyle.marginBottom);
|
||||
}
|
||||
fadeIn(callback, {element: filePanel, max: 0.95, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
|
||||
fadeIn(callback, {element: filePanel, max: 1, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
|
||||
closeMenuItem();
|
||||
}
|
||||
|
||||
@ -218,7 +234,9 @@ var selection = null; // The currently selected node/edge.
|
||||
var rightSelection = null; // The currently right clicked node/edge.
|
||||
var edgeTo = null; // Target of an edge to be created.
|
||||
var edgeFrom = null; // Start on an edge to be created.
|
||||
//Utility elements
|
||||
const curtain = document.getElementById('curtain');
|
||||
const submenuBackdrop = document.getElementById('submenu-backdrop');
|
||||
//Side Panel
|
||||
const sidePanel = document.getElementById('sidepanel');
|
||||
const sideContent = document.getElementById('sidecontent');
|
||||
@ -272,7 +290,7 @@ function select(item) {
|
||||
sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom);
|
||||
// console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom);
|
||||
}
|
||||
fadeIn(callback, {element: sidePanel, max: 0.95});
|
||||
fadeIn(callback, {element: sidePanel, max: 1});
|
||||
|
||||
} else {
|
||||
fadeOut({element: sidePanel, min: 0});
|
||||
@ -705,7 +723,7 @@ function getEdgeColour(edge) {
|
||||
}
|
||||
}
|
||||
wfGraph
|
||||
.linkDirectionalArrowLength(6)
|
||||
.linkDirectionalArrowLength(4)
|
||||
.linkDirectionalArrowRelPos(1)
|
||||
.linkColor(getEdgeColour)
|
||||
.linkCurvature('curvature')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user