cha0s/persea-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: tweaks

Browse Source
This commit is contained in:
cha0s 2020-06-25 13:39:59 -05:00
parent 4ac61747a1
commit 103ea4b22b
7 changed files with 85 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/index.scss
View File

@ -133,7 +133,6 @@ select {
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
font-size: 0.75em; font-size: 0.75em;
margin: 0;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.5em; padding: 0.5em;

2
src/client/types/condition.raw.scss
View File

@ -6,7 +6,7 @@
} }
.operator { .operator {
margin: 0; margin: 0 0 0.125em 0;
text-align: center; text-align: center;
text-align-last: center; text-align-last: center;
} }

39
src/client/types/expression.raw.scss
View File

@ -6,11 +6,11 @@
.label { .label {
color: #999; color: #999;
font-size: 0.8em; font-size: 0.6em;
left: -2.5em; left: -1.25em;
position: absolute; position: absolute;
writing-mode: vertical-lr; writing-mode: vertical-lr;
top: -1em; top: 0.125em;
} }
.key { .key {
@ -24,16 +24,18 @@
} }
.args { .args {
margin-left: 2em; display: flex;
flex-wrap: wrap;
} }
.arg { .arg {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
display: flex; display: flex;
margin-left: 1.5em; margin-left: 1.5em;
padding: 0.5em; margin-bottom: 0.125em;
&:not(:last-of-type) { padding: 0.125em 0.125em 0.125em 0;
border-bottom: none; &:last-of-type {
margin-bottom: 0;
} }
&:nth-of-type(2n) { &:nth-of-type(2n) {
background-color: rgba(0, 0, 0, 0.025); background-color: rgba(0, 0, 0, 0.025);
@ -44,13 +46,25 @@
} }
.arg label { .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 { .arg .expression {
display: flex; display: flex;
} }
.arg .op {
margin: 0 0 0 0.125em;
}
.paren { .paren {
color: #999999; color: #999999;
line-height: 1.75em; line-height: 1.75em;
@ -59,11 +73,15 @@
.invoke { .invoke {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.empty {
flex-direction: row;
}
} }
.assign { .assign {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0.125em;
} }
.eql { .eql {
@ -74,8 +92,5 @@
.op { .op {
align-self: flex-start; align-self: flex-start;
margin-right: 0.125em; margin: 0.125em 0 0.125em 0.125em;
&:last-of-type {
margin-right: 0;
}
} }

85
src/client/types/expression.type-renderer.jsx
View File

@ -4,6 +4,7 @@ import {
description as typeDescription, description as typeDescription,
} from '@avocado/behavior'; } from '@avocado/behavior';
import {compose} from '@avocado/core'; import {compose} from '@avocado/core';
import classnames from 'classnames';
import contempo from 'contempo'; import contempo from 'contempo';
import React from 'react'; import React from 'react';
@ -104,45 +105,55 @@ const Expression = (props) => {
case 'invoke': { case 'invoke': {
const description = descriptionFromOps(context, ops.slice(0, i + 1)); const description = descriptionFromOps(context, ops.slice(0, i + 1));
const args = description.args || []; const args = description.args || [];
const argSpecs = Object.values(args).map(([, argSpec]) => argSpec); const argSpecs = Object.values(args).map(([name, argSpec]) => ({
...argSpec,
name,
}));
return ( return (
<div className="invoke"> <div
className={classnames(
'invoke',
{empty: 0 === args.length},
)}
>
<span className="paren open">(</span> <span className="paren open">(</span>
{op.args.map((arg, j) => { <div className="args">
const argSpec = argSpecs[j] || {type: 'any'}; {op.args.map((arg, j) => {
return ( const argSpec = argSpecs[j] || {type: 'any'};
// eslint-disable-next-line react/no-array-index-key return (
<div className="arg" key={j}> // eslint-disable-next-line react/no-array-index-key
<label> <div className="arg" key={j}>
{arg.label} <label>
<Value.Component <span className="text">{argSpec.name}</span>
context={context} <Value.Component
onChange={(argValue, event) => ( context={context}
onChange({ onChange={(argValue, event) => (
type: 'expression', onChange({
ops: [ type: 'expression',
...ops.slice(0, i), ops: [
{ ...ops.slice(0, i),
...ops[i], {
args: [ ...ops[i],
...ops[i].args.slice(0, j), args: [
makeCompilable(argValue), ...ops[i].args.slice(0, j),
...ops[i].args.slice(j + 1), makeCompilable(argValue),
], ...ops[i].args.slice(j + 1),
}, ],
...ops.slice(i + 1), },
], ...ops.slice(i + 1),
assign, ],
}, event) assign,
)} }, event)
options={argSpec.options} )}
type={argSpec.type} options={argSpec.options}
value={arg} type={argSpec.type}
/> value={arg}
</label> />
</div> </label>
); </div>
})} );
})}
</div>
<span className="paren close">)</span> <span className="paren close">)</span>
</div> </div>
); );

11
src/client/types/expressions.raw.scss
View File

@ -1,6 +1,9 @@
:scope { :scope {
font-size: 0.8em; font-size: 0.8em;
margin-top: 0.5em; margin-bottom: 0.5em;
&:last-of-type {
margin-bottom: 0;
}
@media(min-width: 48em) { @media(min-width: 48em) {
font-size: 1em; font-size: 1em;
} }
@ -8,10 +11,10 @@
li { li {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none; padding: 0;
padding: 1em; margin-bottom: 0.5em;
&:last-child { &:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0;
} }
&:nth-of-type(2n) { &:nth-of-type(2n) {
background-color: rgba(0, 0, 0, 0.025); background-color: rgba(0, 0, 0, 0.025);

2
src/client/types/literal.raw.scss
View File

@ -5,5 +5,5 @@
} }
select { select {
margin-right: 0.125em; margin: 0 0.125em
} }

1
src/client/types/routines.raw.scss
View File

@ -1,3 +1,4 @@
.routine > label .text { .routine > label .text {
font-size: 0.9em; font-size: 0.9em;
margin-right: 1.5em;
} }