diff options
| author | Vincent Schippefilt <vsc@odoo.com> | 2018-03-20 12:48:46 +0100 |
|---|---|---|
| committer | Vincent Schippefilt <vsc@odoo.com> | 2018-04-10 09:39:08 +0200 |
| commit | bc1bba446a57e6b91c76c90a9b2a1d33772480c1 (patch) | |
| tree | 0cb534d5748e1a7fba04ea3efdc934badfd095e5 /addons/web/static/src/less | |
| parent | e0924fd01d8ffaf95b677b10ea0a5627b484a7d6 (diff) | |
[IMP] web: keyboard navigation in kanban view
1. Added the ability to navigate within the kanban view using UP,
DOWN, LEFT and RIGHT keys.
2. By defaults, the focus should be set on the search input field.
3. From the search input field, using the DOWN key, the focus goes
to the first card of the kanban
4. From the search input field, using TAB key, the focus goes to the
create button
5. From the create/import buttons, using TAB or DOWN key goes to the
first card of the kanban, then UP and DOWN keys moves the focus
from card to card in the same column or if it is not a grouped
view from left to right.
6. In grouped view, LEFT and RIGHT keys moves the focus to the next
column
7. When on a card, hitting ENTER opens the view of that card.
Not included in this commit
1. Memorize the position on the kanban when opening an card, than restoring
when going back to that kanban
Diffstat (limited to 'addons/web/static/src/less')
| -rw-r--r-- | addons/web/static/src/less/kanban_dashboard.less | 8 | ||||
| -rw-r--r-- | addons/web/static/src/less/kanban_view.less | 7 |
2 files changed, 15 insertions, 0 deletions
diff --git a/addons/web/static/src/less/kanban_dashboard.less b/addons/web/static/src/less/kanban_dashboard.less index adf67f31bf0..da8f0adac72 100644 --- a/addons/web/static/src/less/kanban_dashboard.less +++ b/addons/web/static/src/less/kanban_dashboard.less @@ -43,6 +43,14 @@ margin-bottom: 10px; } + &:focus, &:focus-within { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,1); + -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,1); + box-shadow: 1px 1px 3px 0px rgba(0,0,0,1); + z-index: 1; // show the shadow on top of the previous & next cards in grouped mode + outline: none; + } + // ------- Generic layout adaptations ------- .container { width: 100%; diff --git a/addons/web/static/src/less/kanban_view.less b/addons/web/static/src/less/kanban_view.less index b9eec962eaf..f9130469665 100644 --- a/addons/web/static/src/less/kanban_view.less +++ b/addons/web/static/src/less/kanban_view.less @@ -154,6 +154,13 @@ @media (max-width: @screen-xs-max) { padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter-mobile; } + &:focus, &:focus-within { + -webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,1); + -moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,1); + box-shadow: 3px 3px 10px 0px rgba(0,0,0,1); + z-index: 1; // show the shadow on top of the previous & next cards in grouped mode + outline: none; + } } .o_kanban_quick_create { |