Add shortcuts for toggling sections panel and showing settings (#110)

* Add shortcuts for toggling sections panel and showing settings

* List new shortcuts
This commit is contained in:
Jonatan Kłosko 2021-03-23 15:27:03 +01:00 committed by GitHub
parent ad99680a82
commit 92c34b8718
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 5 deletions

View file

@ -56,7 +56,7 @@ const Session = {
document document
.querySelector(`[data-element="sections-panel-toggle"]`) .querySelector(`[data-element="sections-panel-toggle"]`)
.addEventListener("click", (event) => { .addEventListener("click", (event) => {
this.el.toggleAttribute("data-js-sections-panel-expanded"); toggleSectionsPanel(this);
}); });
// Server events // Server events
@ -142,6 +142,10 @@ function handleDocumentKeyDown(hook, event) {
queueFocusedSectionEvaluation(hook); queueFocusedSectionEvaluation(hook);
} else if (keyBuffer.tryMatch(["e", "j"])) { } else if (keyBuffer.tryMatch(["e", "j"])) {
queueChildCellsEvaluation(hook); queueChildCellsEvaluation(hook);
} else if (keyBuffer.tryMatch(["s", "s"])) {
toggleSectionsPanel(hook);
} else if (keyBuffer.tryMatch(["s", "n"])) {
showNotebookSettings(hook);
} else if (keyBuffer.tryMatch(["e", "x"])) { } else if (keyBuffer.tryMatch(["e", "x"])) {
cancelFocusedCellEvaluation(hook); cancelFocusedCellEvaluation(hook);
} else if (keyBuffer.tryMatch(["?"])) { } else if (keyBuffer.tryMatch(["?"])) {
@ -265,6 +269,14 @@ function updateSectionListHighlight() {
// User action handlers (mostly keybindings) // User action handlers (mostly keybindings)
function toggleSectionsPanel(hook) {
hook.el.toggleAttribute("data-js-sections-panel-expanded");
}
function showNotebookSettings(hook) {
hook.pushEvent("show_notebook_settings", {});
}
function deleteFocusedCell(hook) { function deleteFocusedCell(hook) {
if (hook.state.focusedCellId) { if (hook.state.focusedCellId) {
hook.pushEvent("delete_cell", { cell_id: hook.state.focusedCellId }); hook.pushEvent("delete_cell", { cell_id: hook.state.focusedCellId });

View file

@ -78,19 +78,19 @@ defmodule LivebookWeb.SessionLive do
Lb Lb
</div> </div>
<% end %> <% end %>
<span class="tooltip right distant" aria-label="Sections"> <span class="tooltip right distant" aria-label="Sections (ss)">
<button class="text-2xl text-gray-600 hover:text-gray-50 focus:text-gray-50" data-element="sections-panel-toggle"> <button class="text-2xl text-gray-600 hover:text-gray-50 focus:text-gray-50" data-element="sections-panel-toggle">
<%= remix_icon("booklet-fill") %> <%= remix_icon("booklet-fill") %>
</button> </button>
</span> </span>
<span class="tooltip right distant" aria-label="Notebook settings"> <span class="tooltip right distant" aria-label="Notebook settings (sn)">
<%= live_patch to: Routes.session_path(@socket, :settings, @session_id, "file"), <%= live_patch to: Routes.session_path(@socket, :settings, @session_id, "file"),
class: "text-gray-600 hover:text-gray-50 focus:text-gray-50 #{if(@live_action == :settings, do: "text-gray-50")}" do %> class: "text-gray-600 hover:text-gray-50 focus:text-gray-50 #{if(@live_action == :settings, do: "text-gray-50")}" do %>
<%= remix_icon("settings-4-fill", class: "text-2xl") %> <%= remix_icon("settings-4-fill", class: "text-2xl") %>
<% end %> <% end %>
</span> </span>
<div class="flex-grow"></div> <div class="flex-grow"></div>
<span class="tooltip right distant" aria-label="Keyboard shortcuts"> <span class="tooltip right distant" aria-label="Keyboard shortcuts (?)">
<%= live_patch to: Routes.session_path(@socket, :shortcuts, @session_id), <%= live_patch to: Routes.session_path(@socket, :shortcuts, @session_id),
class: "text-gray-600 hover:text-gray-50 focus:text-gray-50" do %> class: "text-gray-600 hover:text-gray-50 focus:text-gray-50" do %>
<%= remix_icon("keyboard-box-fill", class: "text-2xl") %> <%= remix_icon("keyboard-box-fill", class: "text-2xl") %>
@ -313,6 +313,13 @@ defmodule LivebookWeb.SessionLive do
push_patch(socket, to: Routes.session_path(socket, :shortcuts, socket.assigns.session_id))} push_patch(socket, to: Routes.session_path(socket, :shortcuts, socket.assigns.session_id))}
end end
def handle_event("show_notebook_settings", %{}, socket) do
{:noreply,
push_patch(socket,
to: Routes.session_path(socket, :settings, socket.assigns.session_id, "file")
)}
end
@impl true @impl true
def handle_info({:operation, operation}, socket) do def handle_info({:operation, operation}, socket) do
case Session.Data.apply_operation(socket.assigns.data, operation) do case Session.Data.apply_operation(socket.assigns.data, operation) do

View file

@ -22,7 +22,9 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
%{seq: ["es"], desc: "Evaluate section"}, %{seq: ["es"], desc: "Evaluate section"},
%{seq: ["ea"], desc: "Evaluate all stale/new cells"}, %{seq: ["ea"], desc: "Evaluate all stale/new cells"},
%{seq: ["ej"], desc: "Evaluate cells below"}, %{seq: ["ej"], desc: "Evaluate cells below"},
%{seq: ["ex"], desc: "Cancel cell evaluation"} %{seq: ["ex"], desc: "Cancel cell evaluation"},
%{seq: ["ss"], desc: "Toggle sections panel"},
%{seq: ["sn"], desc: "Show notebook settings"}
] ]
} }