mirror of
https://github.com/penpot/penpot.git
synced 2025-02-02 04:19:08 -05:00
✨ Use tabulators to navigate layers
This commit is contained in:
Alejandro Alonso
Alonso Torres
parent
25014a81c3
commit
fbf06a4de0
9 changed files with 121 additions and 16 deletions
|
|
@ -10,6 +10,7 @@
|
|||
- Allow for absolute positioned elements inside layout [Taiga #4834](https://tree.taiga.io/project/penpot/us/4834)
|
||||
- Add z-index option for flex layout items [Taiga #2980](https://tree.taiga.io/project/penpot/us/2980)
|
||||
- Scale content proportionally affects strokes, shadows, blurs and corners [Taiga #1951](https://tree.taiga.io/project/penpot/us/1951)
|
||||
- Use tabulators to navigate layers [Taiga #5010](https://tree.taiga.io/project/penpot/issue/5010)
|
||||
|
||||
### :bug: Bugs fixed
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
(ns app.main.data.shortcuts
|
||||
(:refer-clojure :exclude [meta reset!])
|
||||
(:require
|
||||
["mousetrap" :as mousetrap]
|
||||
["./shortcuts_impl.js$default" :as mousetrap]
|
||||
[app.common.logging :as log]
|
||||
[app.common.spec :as us]
|
||||
[app.config :as cf]
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
(def up-arrow "\u2191")
|
||||
(def right-arrow "\u2192")
|
||||
(def down-arrow "\u2193")
|
||||
(def tab "tab")
|
||||
|
||||
(defn c-mod
|
||||
"Adds the control/command modifier to a shortcuts depending on the
|
||||
|
|
|
|||
27
frontend/src/app/main/data/shortcuts_impl.js
Normal file
27
frontend/src/app/main/data/shortcuts_impl.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*
|
||||
* Copyright (c) KALEIDOS INC
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
import Mousetrap from 'mousetrap'
|
||||
|
||||
const target = Mousetrap.prototype || Mousetrap;
|
||||
target.stopCallback = function(e, element, combo) {
|
||||
// if the element has the class "mousetrap" then no need to stop
|
||||
if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// stop for input, select, textarea and button
|
||||
return element.tagName == 'INPUT' ||
|
||||
element.tagName == 'SELECT' ||
|
||||
element.tagName == 'TEXTAREA' ||
|
||||
element.tagName == 'BUTTON' ||
|
||||
(element.contentEditable && element.contentEditable == 'true');
|
||||
}
|
||||
|
||||
export default Mousetrap;
|
||||
|
|
@ -2046,6 +2046,8 @@
|
|||
(dm/export dws/select-all)
|
||||
(dm/export dws/select-inside-group)
|
||||
(dm/export dws/select-shape)
|
||||
(dm/export dws/select-prev-shape)
|
||||
(dm/export dws/select-next-shape)
|
||||
(dm/export dws/shift-select-shapes)
|
||||
|
||||
;; Highlight
|
||||
|
|
|
|||
|
|
@ -131,6 +131,55 @@
|
|||
objects (wsh/lookup-page-objects state page-id)]
|
||||
(rx/of (dwc/expand-all-parents [id] objects)))))))
|
||||
|
||||
(defn select-prev-shape
|
||||
([]
|
||||
(ptk/reify ::select-prev-shape
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [selected (wsh/lookup-selected state)
|
||||
count-selected (count selected)
|
||||
first-selected (first selected)
|
||||
page-id (:current-page-id state)
|
||||
objects (wsh/lookup-page-objects state page-id)
|
||||
current (get objects first-selected)
|
||||
parent (get objects (:parent-id current))
|
||||
sibling-ids (:shapes parent)
|
||||
current-index (d/index-of sibling-ids first-selected)
|
||||
sibling (if (= (dec (count sibling-ids)) current-index)
|
||||
(first sibling-ids)
|
||||
(nth sibling-ids (inc current-index)))]
|
||||
|
||||
(cond
|
||||
(= 1 count-selected)
|
||||
(rx/of (select-shape sibling))
|
||||
|
||||
(> count-selected 1)
|
||||
(rx/of (select-shape first-selected))))))))
|
||||
|
||||
(defn select-next-shape
|
||||
([]
|
||||
(ptk/reify ::select-next-shape
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [selected (wsh/lookup-selected state)
|
||||
count-selected (count selected)
|
||||
first-selected (first selected)
|
||||
page-id (:current-page-id state)
|
||||
objects (wsh/lookup-page-objects state page-id)
|
||||
current (get objects first-selected)
|
||||
parent (get objects (:parent-id current))
|
||||
sibling-ids (:shapes parent)
|
||||
current-index (d/index-of sibling-ids first-selected)
|
||||
sibling (if (= 0 current-index)
|
||||
(last sibling-ids)
|
||||
(nth sibling-ids (dec current-index)))]
|
||||
(cond
|
||||
(= 1 count-selected)
|
||||
(rx/of (select-shape sibling))
|
||||
|
||||
(> count-selected 1)
|
||||
(rx/of (select-shape first-selected))))))))
|
||||
|
||||
(defn deselect-shape
|
||||
[id]
|
||||
(us/verify ::us/uuid id)
|
||||
|
|
|
|||
|
|
@ -495,8 +495,19 @@
|
|||
:subsections [:navigation-workspace]
|
||||
:fn #(st/emit! (dw/go-to-dashboard))}
|
||||
|
||||
:select-prev {:tooltip (ds/shift "tab")
|
||||
:command "shift+tab"
|
||||
:subsections [:navigation-workspace]
|
||||
:fn #(st/emit! (dw/select-prev-shape))}
|
||||
|
||||
:select-next {:tooltip ds/tab
|
||||
:command "tab"
|
||||
:subsections [:navigation-workspace]
|
||||
:fn #(st/emit! (dw/select-next-shape))}
|
||||
|
||||
;; SHAPE
|
||||
|
||||
|
||||
:bool-union {:tooltip (ds/meta (ds/alt "U"))
|
||||
:command (ds/c-mod "alt+u")
|
||||
:subsections [:shape]
|
||||
|
|
|
|||
|
|
@ -143,6 +143,8 @@
|
|||
;; shortcuts.open-color-picker
|
||||
;; shortcuts.open-comments
|
||||
;; shortcuts.open-dashboard
|
||||
;; shortcuts.select-prev
|
||||
;; shortcuts.select-next
|
||||
;; shortcuts.open-inspect
|
||||
;; shortcuts.open-interactions
|
||||
;; shortcuts.open-viewer
|
||||
|
|
|
|||
|
|
@ -2458,6 +2458,12 @@ msgstr "Go to viewer comment section"
|
|||
msgid "shortcuts.open-dashboard"
|
||||
msgstr "Go to dashboard"
|
||||
|
||||
msgid "shortcuts.select-next"
|
||||
msgstr "Select next layer"
|
||||
|
||||
msgid "shortcuts.select-prev"
|
||||
msgstr "Select previous layer"
|
||||
|
||||
msgid "shortcuts.open-inspect"
|
||||
msgstr "Go to viewer inspect section"
|
||||
|
||||
|
|
|
|||
|
|
@ -2603,6 +2603,12 @@ msgstr "Comentarios"
|
|||
msgid "shortcuts.open-dashboard"
|
||||
msgstr "Ir al dashboard"
|
||||
|
||||
msgid "shortcuts.select-next"
|
||||
msgstr "Seleccionar capa siguiente"
|
||||
|
||||
msgid "shortcuts.select-prev"
|
||||
msgstr "Seleccionar capa anterior"
|
||||
|
||||
msgid "shortcuts.open-inspect"
|
||||
msgstr "Ir al inspector"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue