improve repl title appearance.

pull/6808/head
Yuichiro Yamashita 5 years ago
parent 547fbc6ebd
commit 2ebf2b40b6

@ -21,6 +21,7 @@
let downloading = false; let downloading = false;
let justSaved = false; let justSaved = false;
let justForked = false; let justForked = false;
let title_input;
function wait(ms) { function wait(ms) {
return new Promise(f => setTimeout(f, ms)); return new Promise(f => setTimeout(f, ms));
@ -167,7 +168,11 @@ export default app;` });
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
<div class="app-controls"> <div class="app-controls">
<button class="icon" on:click="{() => title_input.focus()}">
<Icon name="edit" />
</button>
<input <input
bind:this={title_input}
bind:value={name} bind:value={name}
on:focus="{e => e.target.select()}" on:focus="{e => e.target.select()}"
use:enter="{e => e.target.blur()}" use:enter="{e => e.target.blur()}"
@ -260,9 +265,17 @@ export default app;` });
opacity: 0.7; opacity: 0.7;
outline: none; outline: none;
flex: 1; flex: 1;
margin: 0 0.2em 0 .4rem;
padding-top: 0.2em;
border-bottom: 1px solid transparent;
} }
input:hover {
border-bottom: 1px solid currentColor;
opacity: 1;
}
input:focus { input:focus {
border-bottom: 1px solid currentColor;
opacity: 1; opacity: 1;
} }

Loading…
Cancel
Save