ui: tweaks
This commit is contained in:
cha0s
parent
4ac61747a1
commit
103ea4b22b
|
|
@ -133,7 +133,6 @@ select {
|
|||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
margin: 0;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
padding: 0.5em;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.operator {
|
||||
margin: 0;
|
||||
margin: 0 0 0.125em 0;
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
|
||||
.label {
|
||||
color: #999;
|
||||
font-size: 0.8em;
|
||||
left: -2.5em;
|
||||
font-size: 0.6em;
|
||||
left: -1.25em;
|
||||
position: absolute;
|
||||
writing-mode: vertical-lr;
|
||||
top: -1em;
|
||||
top: 0.125em;
|
||||
}
|
||||
|
||||
.key {
|
||||
|
|
@ -24,16 +24,18 @@
|
|||
}
|
||||
|
||||
.args {
|
||||
margin-left: 2em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.arg {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
margin-left: 1.5em;
|
||||
padding: 0.5em;
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0.125em;
|
||||
padding: 0.125em 0.125em 0.125em 0;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:nth-of-type(2n) {
|
||||
background-color: rgba(0, 0, 0, 0.025);
|
||||
|
|
@ -44,13 +46,25 @@
|
|||
}
|
||||
|
||||
.arg label {
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
padding: 0.0125em 0 0;
|
||||
position: relative;
|
||||
> .text {
|
||||
position: absolute;
|
||||
top: -0.75em;
|
||||
font-size: 0.7em;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.arg .expression {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.arg .op {
|
||||
margin: 0 0 0 0.125em;
|
||||
}
|
||||
|
||||
.paren {
|
||||
color: #999999;
|
||||
line-height: 1.75em;
|
||||
|
|
@ -59,11 +73,15 @@
|
|||
.invoke {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.empty {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.assign {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.125em;
|
||||
}
|
||||
|
||||
.eql {
|
||||
|
|
@ -74,8 +92,5 @@
|
|||
|
||||
.op {
|
||||
align-self: flex-start;
|
||||
margin-right: 0.125em;
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
margin: 0.125em 0 0.125em 0.125em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
description as typeDescription,
|
||||
} from '@avocado/behavior';
|
||||
import {compose} from '@avocado/core';
|
||||
import classnames from 'classnames';
|
||||
import contempo from 'contempo';
|
||||
import React from 'react';
|
||||
|
||||
|
|
@ -104,45 +105,55 @@ const Expression = (props) => {
|
|||
case 'invoke': {
|
||||
const description = descriptionFromOps(context, ops.slice(0, i + 1));
|
||||
const args = description.args || [];
|
||||
const argSpecs = Object.values(args).map(([, argSpec]) => argSpec);
|
||||
const argSpecs = Object.values(args).map(([name, argSpec]) => ({
|
||||
...argSpec,
|
||||
name,
|
||||
}));
|
||||
return (
|
||||
<div className="invoke">
|
||||
<div
|
||||
className={classnames(
|
||||
'invoke',
|
||||
{empty: 0 === args.length},
|
||||
)}
|
||||
>
|
||||
<span className="paren open">(</span>
|
||||
{op.args.map((arg, j) => {
|
||||
const argSpec = argSpecs[j] || {type: 'any'};
|
||||
return (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<div className="arg" key={j}>
|
||||
<label>
|
||||
{arg.label}
|
||||
<Value.Component
|
||||
context={context}
|
||||
onChange={(argValue, event) => (
|
||||
onChange({
|
||||
type: 'expression',
|
||||
ops: [
|
||||
...ops.slice(0, i),
|
||||
{
|
||||
...ops[i],
|
||||
args: [
|
||||
...ops[i].args.slice(0, j),
|
||||
makeCompilable(argValue),
|
||||
...ops[i].args.slice(j + 1),
|
||||
],
|
||||
},
|
||||
...ops.slice(i + 1),
|
||||
],
|
||||
assign,
|
||||
}, event)
|
||||
)}
|
||||
options={argSpec.options}
|
||||
type={argSpec.type}
|
||||
value={arg}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="args">
|
||||
{op.args.map((arg, j) => {
|
||||
const argSpec = argSpecs[j] || {type: 'any'};
|
||||
return (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<div className="arg" key={j}>
|
||||
<label>
|
||||
<span className="text">{argSpec.name}</span>
|
||||
<Value.Component
|
||||
context={context}
|
||||
onChange={(argValue, event) => (
|
||||
onChange({
|
||||
type: 'expression',
|
||||
ops: [
|
||||
...ops.slice(0, i),
|
||||
{
|
||||
...ops[i],
|
||||
args: [
|
||||
...ops[i].args.slice(0, j),
|
||||
makeCompilable(argValue),
|
||||
...ops[i].args.slice(j + 1),
|
||||
],
|
||||
},
|
||||
...ops.slice(i + 1),
|
||||
],
|
||||
assign,
|
||||
}, event)
|
||||
)}
|
||||
options={argSpec.options}
|
||||
type={argSpec.type}
|
||||
value={arg}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<span className="paren close">)</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
:scope {
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media(min-width: 48em) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
|
@ -8,10 +11,10 @@
|
|||
|
||||
li {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: none;
|
||||
padding: 1em;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5em;
|
||||
&:last-child {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:nth-of-type(2n) {
|
||||
background-color: rgba(0, 0, 0, 0.025);
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@
|
|||
}
|
||||
|
||||
select {
|
||||
margin-right: 0.125em;
|
||||
margin: 0 0.125em
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
.routine > label .text {
|
||||
font-size: 0.9em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user