Merge pull request #50 from preactjs/visual-fixes

Minor UI polishing

Author: marvinhagemeister

src/view/components/DataInput/DataInput.css

@@ -28,6 +28,8 @@
 	padding-right: 0.2em;
 	min-width: 0;
 	box-shadow: none;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .innerWrapper {

src/view/components/DataInput/index.tsx

@@ -11,6 +11,7 @@ export interface InputProps {
 	name: string;
 	value: any;
 	class?: string;
+	placeholder?: string;
 	onChange: (value: any) => void;
 }
 
@@ -84,6 +85,7 @@ export function DataInput({ value, onChange, name, ...props }: InputProps) {
 					onBlur={store.onBlur}
 					onKeyUp={onKeyUp}
 					onInput={onInput}
+					placeholder={props.placeholder}
 					data-type={type}
 				/>
 				<button

src/view/components/IconBtn.css

@@ -27,17 +27,33 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	outline: none;
+}
+
+.root:active .inner,
+.root:focus .inner {
+	position: relative;
+	z-index: 2;
 }
 
 .root:not([disabled])[data-active] .inner,
 .root:focus .inner,
-.root:not([disabled]) .inner:active {
+.root:not([disabled]):active .inner {
 	color: var(--color-selected-text);
 }
 
-.root:focus-within .inner::after,
-.root:not([disabled]):active .inner::after,
-.root:not([disabled])[data-active] .inner::after {
+.bg {
+	display: none;
+}
+
+.root:focus .bg {
+	z-index: -1;
+}
+
+.root:focus-within .bg,
+.root:not([disabled]):active .bg,
+.root:not([disabled])[data-active] .bg {
+	display: block;
 	content: "";
 	position: absolute;
 	left: -0.25rem;

src/view/components/IconBtn.tsx

@@ -25,6 +25,7 @@ export function IconBtn(props: Props) {
 		>
 			<span class={s.inner} tabIndex={-1}>
 				{props.children}
+				<span class={s.bg} />
 			</span>
 		</button>
 	);

src/view/components/sidebar/NewProp.css

@@ -10,7 +10,14 @@
 	background: var(--color-props-input-bg);
 }
 
+.nameWrapper::after {
+	margin: 0 0.2rem;
+	display: inline-block;
+}
+
 .value {
 	background: var(--color-props-input-bg);
 	max-width: 5rem;
+	padding-left: 0.2rem;
+	border: 1px solid #aaa;
 }

src/view/components/sidebar/NewProp.tsx

@@ -29,7 +29,7 @@ export function NewProp(props: NewPropProps) {
 
 	return (
 		<div class={s.root}>
-			<div class={s2.name}>
+			<div class={`${s2.name} ${s.nameWrapper}`}>
 				<input
 					type="text"
 					placeholder="new prop"
@@ -42,6 +42,7 @@ export function NewProp(props: NewPropProps) {
 				class={s.value}
 				value={undefined}
 				onChange={onCommit}
+				placeholder="new value"
 				name="foobar"
 			/>
 		</div>