livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2024-09-20 10:05:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Focus fixes (#831)

Browse source
This commit is contained in:
Jonatan Kłosko 2021-12-28 19:42:04 +01:00 committed by GitHub
parent 50aeb6289f
commit 145f8a6992
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/utilities.css
View file

@ -27,10 +27,6 @@
transform: scaleY(-1);
}
.scroll-smooth {
scroll-behavior: smooth;
}
/* Animations */
.fade-in {

15
assets/js/cell/index.js
View file

@ -216,15 +216,14 @@ function handleInsertModeChanged(hook, insertMode) {
hook.state.insertMode = insertMode;
if (hook.state.liveEditor) {
// For some reason, when clicking the editor for a brief moment it is
// already focused and the cursor is in the previous location, which
// makes the browser immediately scroll there. We blur the editor,
// then wait for the editor to update the cursor position, finally
// we focus the editor and scroll if the cursor is not in the view
// (when entering insert mode with "i").
hook.state.liveEditor.blur();
hook.state.liveEditor.focus();
// The insert mode may be enabled as a result of clicking the editor,
// in which case we want to wait until editor handles the click and
// sets new cursor position. To achieve this, we simply put this task
// at the end of event loop, ensuring the editor mousedown handler is
// executed first
setTimeout(() => {
hook.state.liveEditor.focus();
scrollIntoView(document.activeElement, {
scrollMode: "if-needed",
behavior: "smooth",

2
lib/livebook_web/live/session_live.ex
View file

@ -119,7 +119,7 @@ defmodule LivebookWeb.SessionLive do
<.runtime_info data_view={@data_view} session={@session} socket={@socket} empty_default_runtime={@empty_default_runtime} />
</div>
</div>
<div class="flex-grow overflow-y-auto scroll-smooth relative" data-element="notebook">
<div class="flex-grow overflow-y-auto relative" data-element="notebook">
<div data-element="output-iframes" phx-update="ignore" id="output-iframes"></div>
<div class="w-full max-w-screen-lg px-16 mx-auto py-7" data-element="notebook-content">
<div class="flex items-center pb-4 mb-6 space-x-4 border-b border-gray-200"

4
lib/livebook_web/templates/layout/root.html.heex
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
@ -10,7 +10,7 @@
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")}/>
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/js/app.js")}></script>
</head>
<body class="scroll-smooth">
<body>
<%= @inner_content %>
</body>
</html>