diff --git a/public/style.css b/public/style.css index beed9e8..ea5ae63 100644 --- a/public/style.css +++ b/public/style.css @@ -220,6 +220,34 @@ aside button { background: transparent; /* optional: just make scrollbar invisible */ } +/* Metamenu */ + +.meta-menu-expander { + position: absolute; + transform: translateY(calc(-100% + 20px)); + top: 0; + right: 0; + transition: transform 100ms ease-out; +} + +.expand-meta-menu { + display: block; + margin-left: auto; +} + +.meta-menu-expander.expanded { + transform: translateY(0); +} + +.meta-menu { + background: white; + border: 0 #f0f0f0 dashed; + border-bottom-width: 3px; + border-left-width: 3px; + padding: 10px; + margin-bottom: 3px; +} + /* Dark Mode */ .dark-mode.app-wrapper { diff --git a/src/components/MetaMenu/index.js b/src/components/MetaMenu/index.js new file mode 100644 index 0000000..4bc3e19 --- /dev/null +++ b/src/components/MetaMenu/index.js @@ -0,0 +1,48 @@ +import React from 'react'; +import {renderExpression} from '../../lib/lambda' + +class MetaMenu extends React.Component { + state = { + isExpanded: false, + } + + toggleExpanded = () => { + this.setState({ + isExpanded: !this.state.isExpanded + }); + } + + render() { + const classname = 'meta-menu-expander' + (this.state.isExpanded ? ' expanded' : ''); + // AKA breaking the model horribly + const definedVariables = this + .props + .lambdaActor + .executionContext + .definedVariables; + + const kvEntries = Object + .entries(definedVariables) + .map(([varName, expr]) => ( +