From 8cf8f2697c29affbd30cd80f662fd32870a759f0 Mon Sep 17 00:00:00 2001 From: Wojtek Mach Date: Wed, 16 Jun 2021 13:31:53 +0200 Subject: [PATCH] Use for keyboard keys (#351) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Use for keyboard keys * Show keyboard icon * Render each key explicitly * Update lib/livebook_web/live/session_live/shortcuts_component.ex Co-authored-by: Wojtek Mach * Add Livebook specific icons to the introductory notebooks * More updates Co-authored-by: Jonatan Kłosko --- assets/css/app.css | 1 + assets/css/notebook.css | 29 +++++++++++++ .../explore/elixir_and_livebook.livemd | 16 ++++--- .../notebook/explore/intro_to_livebook.livemd | 41 +++++++++--------- .../live/session_live/shortcuts_component.ex | 43 ++++++++----------- 5 files changed, 79 insertions(+), 51 deletions(-) create mode 100644 assets/css/notebook.css diff --git a/assets/css/app.css b/assets/css/app.css index 124815247..af724379b 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -11,3 +11,4 @@ @import "./js_interop.css"; @import "./tooltips.css"; @import "./editor.css"; +@import "./notebook.css"; diff --git a/assets/css/notebook.css b/assets/css/notebook.css new file mode 100644 index 000000000..eebe84cb4 --- /dev/null +++ b/assets/css/notebook.css @@ -0,0 +1,29 @@ +/* + Specific icons used in the built-in notebooks + + Note: we use the ri- prefix to use the existing + Remix icon CSS +*/ + +.ri-livebook-sections, +.ri-livebook-runtime, +.ri-livebook-shortcuts, +.ri-livebook-save { + @apply text-xl align-middle; +} + +.ri-livebook-sections:before { + content: "\eade"; +} + +.ri-livebook-runtime:before { + content: "\ebf0"; +} + +.ri-livebook-shortcuts:before { + content: "\ee72"; +} + +.ri-livebook-save:before { + content: "\f0b3"; +} diff --git a/lib/livebook/notebook/explore/elixir_and_livebook.livemd b/lib/livebook/notebook/explore/elixir_and_livebook.livemd index c9900804b..ee9190488 100644 --- a/lib/livebook/notebook/explore/elixir_and_livebook.livemd +++ b/lib/livebook/notebook/explore/elixir_and_livebook.livemd @@ -55,10 +55,11 @@ and options. ## Autocompletion Elixir code cells also support autocompletion by -pressing Ctrl + Spacebar. Try it out by +pressing ctrl + ␣ +(⌘ + ␣ on a Mac). Try it out by autocompleting the code below to `System.version()`. First put the cursor after the `.` below and -press Ctrl + Spacebar: +press ctrl + ␣: ```elixir System. @@ -68,7 +69,7 @@ You should have seen the editor listing many different options, which you can use to find `version`. Executing the code will return the Elixir version. -Note you can also press `Tab` to cycle across the completion +Note you can also press tab to cycle across the completion alternatives. ## Imports @@ -129,15 +130,16 @@ runtime. Let's learn how to do that. Livebook has a concept of **runtime**, which in practice is an Elixir node responsible for evaluating your code. You can choose the runtime by clicking the "Runtime" icon -on the sidebar (or by using the `rs` keyword shortcut). +() on the sidebar (or by using the s r +keyboard shortcut). By default, a new Elixir node is started (similarly to starting `iex`). You can click reconnect whenever you want to discard the current node and start a new one. -You can also choose to run inside a _Mix_ project (as you would with `iex -S mix`), -manually _attach_ to an existing distributed node, or run your Elixir notebook -_embedded_ within the Livebook source itself. +You can also choose to run inside a *Mix* project (as you would with `iex -S mix`), +manually *attach* to an existing distributed node, or run your Elixir notebook +*embedded* within the Livebook source itself. ## Running tests diff --git a/lib/livebook/notebook/explore/intro_to_livebook.livemd b/lib/livebook/notebook/explore/intro_to_livebook.livemd index 9fb94412c..6f290dc15 100644 --- a/lib/livebook/notebook/explore/intro_to_livebook.livemd +++ b/lib/livebook/notebook/explore/intro_to_livebook.livemd @@ -43,9 +43,9 @@ as you keep working on it! ## Sections You can leverage so called **sections** to nicely group related cells together. -Click on the "Book" icon in the sidebar to reveal a list of all sections. -As you can see, this approach helps to easily jump around the notebook, -especially once it grows. +Click on the "Book" icon () in the sidebar +to reveal a list of all sections. As you can see, this approach helps to easily +jump around the notebook, especially once it grows. Let's make use of this section to see how output is captured! @@ -64,8 +64,8 @@ end By default notebooks are kept in memory, which is fine for interactive hacking, but oftentimes you will want to save your work for later. Fortunately, notebooks -can be persisted by clicking on the "Disk" icon in the bottom-right corner -and selecting the file location. +can be persisted by clicking on the "Disk" icon () +in the bottom-right corner and selecting the file location. Notebooks are stored in **live markdown** format, which is essentially the markdown you know, with just a few assumptions on how particular elements are represented. Thanks to this @@ -74,11 +74,11 @@ You can also easily preview those files, reuse for blog posts, and even edit in ## Math -Livebook uses $\\TeX$ syntax for math. -It supports both inline math like $e^{\\pi i} + 1 = 0$, as well as display math: +Livebook uses $\TeX$ syntax for math. +It supports both inline math like $e^{\pi i} + 1 = 0$, as well as display math: $$ -S(x) = \\frac{1}{1 + e^{-x}} = \\frac{e^{x}}{e^{x} + 1} +S(x) = \frac{1}{1 + e^{-x}} = \frac{e^{x}}{e^{x} + 1} $$ You can explore all supported expressions [here](https://katex.org/docs/supported.html). @@ -88,24 +88,25 @@ You can explore all supported expressions [here](https://katex.org/docs/supporte Once you start using notebooks more, it's gonna be beneficial to optimise how you move around. Livebook leverages the concept of **navigation**/**insert** modes and offers many shortcuts for common operations. -Make sure to check out the shortcuts by clicking the "Keyboard" icon in -the sidebar or by typing `?`. +Make sure to check out the shortcuts by clicking the "Keyboard" icon +() in the sidebar or +by pressing ?. ## Next steps That's our quick your intro to Livebook! Where to go next? - * If you are not familiar with Elixir, there is a fast paced - introduction to the language in the [Distributed portals - with Elixir](/explore/notebooks/distributed-portals-with-elixir) - notebook; +* If you are not familiar with Elixir, there is a fast paced + introduction to the language in the [Distributed portals + with Elixir](/explore/notebooks/distributed-portals-with-elixir) + notebook; - * Learn how Elixir integrates with Livebook in the - [Elixir and Livebook](/explore/notebooks/elixir-and-livebook) notebook; +* Learn how Elixir integrates with Livebook in the + [Elixir and Livebook](/explore/notebooks/elixir-and-livebook) notebook; - * Finally, remember Livebook is an open source project, so feel free to - look into [the repository](https://github.com/elixir-nx/livebook) - to contribute, report bugs, suggest features or just skim over the - codebase. +* Finally, remember Livebook is an open source project, so feel free to + look into [the repository](https://github.com/elixir-nx/livebook) + to contribute, report bugs, suggest features or just skim over the + codebase. Now go ahead and build something cool! 🚢 diff --git a/lib/livebook_web/live/session_live/shortcuts_component.ex b/lib/livebook_web/live/session_live/shortcuts_component.ex index c06da1caa..7ee5088d5 100644 --- a/lib/livebook_web/live/session_live/shortcuts_component.ex +++ b/lib/livebook_web/live/session_live/shortcuts_component.ex @@ -4,10 +4,11 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do @shortcuts %{ insert_mode: [ %{seq: ["esc"], desc: "Switch back to navigation mode"}, - %{seq: ["ctrl", "↵"], desc: "Evaluate cell and stay in insert mode"}, + %{seq: ["ctrl", "↵"], press_all: true, desc: "Evaluate cell and stay in insert mode"}, %{seq: ["tab"], desc: "Autocomplete expression when applicable"}, %{ seq: ["ctrl", "␣"], + press_all: true, transform_for_mac: false, desc: "Show completion list, use twice for details" } @@ -24,18 +25,18 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do %{seq: ["N"], desc: "Insert Elixir cell above"}, %{seq: ["M"], desc: "Insert Markdown cell above"}, %{seq: ["S"], desc: "Add section"}, - %{seq: ["dd"], desc: "Delete cell"}, - %{seq: ["ee"], desc: "Evaluate cell"}, - %{seq: ["es"], desc: "Evaluate section"}, - %{seq: ["ea"], desc: "Evaluate all stale/new cells"}, - %{seq: ["ej"], desc: "Evaluate cells below"}, - %{seq: ["ex"], desc: "Cancel cell evaluation"}, - %{seq: ["ss"], desc: "Toggle sections panel"}, - %{seq: ["su"], desc: "Toggle users panel"}, - %{seq: ["sr"], desc: "Show runtime settings"} + %{seq: ["d", "d"], desc: "Delete cell"}, + %{seq: ["e", "e"], desc: "Evaluate cell"}, + %{seq: ["e", "s"], desc: "Evaluate section"}, + %{seq: ["e", "a"], desc: "Evaluate all stale/new cells"}, + %{seq: ["e", "j"], desc: "Evaluate cells below"}, + %{seq: ["e", "x"], desc: "Cancel cell evaluation"}, + %{seq: ["s", "s"], desc: "Toggle sections panel"}, + %{seq: ["s", "u"], desc: "Toggle users panel"}, + %{seq: ["s", "r"], desc: "Show runtime settings"} ], universal: [ - %{seq: ["ctrl", "s"], desc: "Save notebook"} + %{seq: ["ctrl", "s"], press_all: true, desc: "Save notebook"} ] } @@ -113,17 +114,18 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do shortcut.seq end - joiner = remix_icon("add-line", class: "text-xl text-gray-600") + press_all = Map.get(shortcut, :press_all, false) - elements = - seq - |> Enum.map(&render_key/1) - |> Enum.intersperse(joiner) + joiner = + if press_all do + remix_icon("add-line", class: "text-xl text-gray-600") + end + elements = Enum.map_intersperse(seq, joiner, &content_tag("kbd", &1)) assigns = %{elements: elements} ~L""" -
+
<%= for element <- @elements do %> <%= element %> <% end %> @@ -131,13 +133,6 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do """ end - defp render_key(key) do - content_tag("span", key, - class: - "bg-editor text-gray-200 text-sm font-semibold h-8 w-8 flex items-center justify-center rounded-lg inline-flex items-center" - ) - end - defp seq_for_mac(seq) do Enum.map(seq, fn "ctrl" -> "⌘"