gristlabs_grist-core/app/client/aclui/ACLMemoEditor.ts

36 lines
990 B
TypeScript
Raw Normal View History

import {theme} from 'app/client/ui2018/cssVars';
import {dom, DomElementArg, Observable, styled} from 'grainjs';
export function aclMemoEditor(obs: Observable<string>, ...args: DomElementArg[]): HTMLInputElement {
return cssMemoInput(
dom.prop('value', obs),
dom.on('input', (_e, elem) => obs.set(elem.value)),
...args,
);
}
const cssMemoInput = styled('input', `
width: 100%;
min-height: 28px;
padding: 4px 5px;
border-radius: 3px;
border: 1px solid transparent;
cursor: pointer;
color: ${theme.controlFg};
background-color: ${theme.inputBg};
caret-color : ${theme.inputFg};
font: 12px 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
border: 1px solid ${theme.inputBorder};
}
&:not(&-disabled):focus-within {
outline: none !important;
cursor: text;
box-shadow: inset 0 0 0 1px ${theme.controlFg};
border-color: ${theme.controlFg};
}
`);