From 4d04a513c5ef9e4f30d524773f452700f0ffef9e Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Thu, 10 Nov 2022 14:12:42 +0200
Subject: [PATCH] layout focus fix

---
 client/css/misc/layout-manager-grid.css     | 308 ++++++++++----------
 client/css/misc/layout-manager-rows.css     |  96 +++---
 client/res/templates/admin/layouts/grid.tpl |   2 +-
 client/res/templates/admin/layouts/rows.tpl |   2 +-
 client/src/views/admin/layouts/grid.js      |   4 +
 client/src/views/admin/layouts/rows.js      |   2 +
 6 files changed, 214 insertions(+), 200 deletions(-)

diff --git a/client/css/misc/layout-manager-grid.css b/client/css/misc/layout-manager-grid.css
index 7d85f19465..050e1e85b8 100644
--- a/client/css/misc/layout-manager-grid.css
+++ b/client/css/misc/layout-manager-grid.css
@@ -1,180 +1,184 @@
-    #layout ul {
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-    }
+#layout ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
 
-    #layout ul > li {
-        background-color: var(--select-item-bg);
-        border-radius: var(--border-radius);
-    }
+#layout ul > li {
+    background-color: var(--select-item-bg);
+    border-radius: var(--border-radius);
+}
 
-    #layout ul.panels > li {
-        padding: 5px 10px;
-        margin-bottom: 20px;
-        min-height: 80px;
-        border: 1px solid var(--select-item-border);
-        border-radius: var(--border-radius);
-        background-color: var(--panel-bg);
-        list-style: none;
-    }
+#layout ul.panels > li {
+    padding: 5px 10px;
+    margin-bottom: 20px;
+    min-height: 80px;
+    border: 1px solid var(--select-item-border);
+    border-radius: var(--border-radius);
+    background-color: var(--panel-bg);
+    list-style: none;
+}
 
-    #layout ul.rows {
-        min-height: 80px;
-    }
+#layout ul.rows {
+    min-height: 80px;
+}
 
-    #layout ul.rows > li  {
-        list-style: none;
-        border: 1px solid var(--select-item-border);
-        background-color: var(--panel-bg);
-        border-radius: var(--border-radius);
-        margin: 8px 0;
-        padding: 5px;
-        height: 72px;
-    }
+#layout ul.rows > li  {
+    list-style: none;
+    border: 1px solid var(--select-item-border);
+    background-color: var(--panel-bg);
+    border-radius: var(--border-radius);
+    margin: 8px 0;
+    padding: 5px;
+    height: 72px;
+}
 
-    #layout ul.cells  {
-        min-height: 30px;
-        margin-top: 12px;
-    }
+#layout ul.cells  {
+    min-height: 30px;
+    margin-top: 12px;
+}
 
-    #layout ul.panels ul.cells > li {
-        width: 46%;
-        float: left;
-    }
+#layout ul.panels ul.cells > li {
+    width: 46%;
+    float: left;
+}
 
-    #layout ul.panels ul.cells > li[data-full-width="true"] {
-        width: 94%;
-    }
+#layout ul.panels ul.cells > li[data-full-width="true"] {
+    width: 94%;
+}
 
-    #layout ul.panels ul.cells[data-cell-count="1"] > li {
-        width: 94%;
-        a[data-action="minusCell"] {
-            display: none;
-        }
-    }
-
-    #layout ul.panels ul.cells[data-cell-count="2"] > li {
-        width: 46%;
-    }
-
-    #layout ul.panels ul.cells[data-cell-count="3"] > li {
-        width: 30%;
-    }
-
-    #layout ul.panels ul.cells[data-cell-count="4"] > li {
-        width: 22%;
-    }
-
-    #layout ul.cells > li {
-        list-style: none;
-        border: 1px solid var(--select-item-border);
-        margin: 5px;
-        padding: 5px;
-        height: 34px;
-    }
-
-    #layout ul.cells > li.ui-state-hover {
-        border-color: var(--brand-primary);
-    }
-
-    #layout  ul.cells.disabled > li {
-        margin: 5px 0;
-    }
-
-    #layout ul.rows > li > div {
-
-    }
-
-    #layout ul.disabled {
-        min-height: 200px;
-        width: 100%;
-    }
-
-    #layout ul.disabled > li a {
+#layout ul.panels ul.cells[data-cell-count="1"] > li {
+    width: 94%;
+    a[data-action="minusCell"] {
         display: none;
     }
+}
 
-    #layout header {
-        font-weight: 600;
-        margin-bottom: 10px;
-    }
+#layout ul.panels ul.cells[data-cell-count="2"] > li {
+    width: 46%;
+}
 
-    #layout ul.panels > li label {
-        display: inline;
-    }
+#layout ul.panels ul.cells[data-cell-count="3"] > li {
+    width: 30%;
+}
 
-    #layout ul.panels > li header a {
-        font-weight: normal;
-    }
+#layout ul.panels ul.cells[data-cell-count="4"] > li {
+    width: 22%;
+}
 
-    #layout ul.panels > li > div {
-        width: auto;
-        text-align: left;
-        margin-left: 5px;
-    }
+#layout ul.cells > li {
+    list-style: none;
+    border: 1px solid var(--select-item-border);
+    margin: 5px;
+    padding: 5px;
+    height: 34px;
+}
 
-    ul.cells li.cell a.remove-field {
-        display: none;
-    }
+#layout ul.cells > li.ui-state-hover {
+    border-color: var(--brand-primary);
+}
 
-    ul.cells li.cell:hover a.remove-field {
-        display: block;
-    }
+#layout  ul.cells.disabled > li {
+    margin: 5px 0;
+}
 
-    ul.cells[data-cell-count="1"] li.cell:hover a.remove-field[data-action="minusCell"] {
-        display: none;
-    }
+#layout ul.rows > li > div {
 
-    ul.panels > li a.remove-panel {
-        display: none;
-    }
+}
 
-    ul.panels > li:hover a.remove-panel {
-        display: block;
-    }
+#layout ul.disabled {
+    min-height: 200px;
+    width: 100%;
+}
 
-    ul.rows > li a.remove-row {
-        display: none;
-        width: 5px;
-        height: 5px;
-    }
+#layout ul.disabled > li a {
+    display: none;
+}
 
-    ul.rows > li:hover a.remove-row {
-        display: block;
-    }
+#layout header {
+    font-weight: 600;
+    margin-bottom: 10px;
+}
 
-    ul.rows > li a.add-cell {
-        display: none;
-        position: relative;
-        width: 5px;
-        height: 5px;
-        top: 19px;
-        right: 7px;
-    }
+#layout ul.panels > li label {
+    display: inline;
+}
 
-    ul.rows > li:hover a.add-cell {
-        display: block;
-    }
+#layout ul.panels > li header a {
+    font-weight: normal;
+}
 
-    ul.rows > li[data-cell-count="4"]:hover a.add-cell {
-        display: none;
-    }
+#layout ul.panels > li > div {
+    width: auto;
+    text-align: left;
+    margin-left: 5px;
+}
 
-    ul.panels > li a.edit-panel-label {
-        display: none;
-    }
+ul.cells li.cell a.remove-field {
+    display: none;
+}
 
-    ul.panels > li:hover a.edit-panel-label {
-        display: inline-block;
-    }
+ul.cells li.cell:hover a.remove-field {
+    display: block;
+}
 
-    div.row-actions {
-        float: right;
-        height: 50px;
-        width: 12px;
-    }
+ul.cells[data-cell-count="1"] li.cell:hover a.remove-field[data-action="minusCell"] {
+    display: none;
+}
 
-    .cell.ui-draggable-dragging {
-        opacity: 0.7;
-    }
+ul.panels > li a.remove-panel {
+    display: none;
+}
+
+ul.panels > li:hover a.remove-panel {
+    display: block;
+}
+
+ul.rows > li a.remove-row {
+    display: none;
+    width: 5px;
+    height: 5px;
+}
+
+ul.rows > li:hover a.remove-row {
+    display: block;
+}
+
+ul.rows > li a.add-cell {
+    display: none;
+    position: relative;
+    width: 5px;
+    height: 5px;
+    top: 19px;
+    right: 7px;
+}
+
+ul.rows > li:hover a.add-cell {
+    display: block;
+}
+
+ul.rows > li[data-cell-count="4"]:hover a.add-cell {
+    display: none;
+}
+
+ul.panels > li a.edit-panel-label {
+    display: none;
+}
+
+ul.panels > li:hover a.edit-panel-label {
+    display: inline-block;
+}
+
+div.row-actions {
+    float: right;
+    height: 50px;
+    width: 12px;
+}
+
+.cell.ui-draggable-dragging {
+    opacity: 0.7;
+}
+
+#layout .well:focus-visible {
+    outline: 0;
+}
diff --git a/client/css/misc/layout-manager-rows.css b/client/css/misc/layout-manager-rows.css
index 02c10b86c2..c5e4729635 100644
--- a/client/css/misc/layout-manager-rows.css
+++ b/client/css/misc/layout-manager-rows.css
@@ -1,57 +1,61 @@
-    #layout ul {
-        width: 100%;
-        min-height: 100px;
-        padding: 0;
-        list-style-type: none;
-        margin: 0;
-    }
+#layout ul {
+    width: 100%;
+    min-height: 100px;
+    padding: 0;
+    list-style-type: none;
+    margin: 0;
+}
 
-    #layout ul li {
-        list-style: none;
-        border: 1px solid var(--select-item-border);
-        margin: 5px 0;
-        padding: 5px;
-        height: 34px;
-    }
+#layout ul li {
+    list-style: none;
+    border: 1px solid var(--select-item-border);
+    margin: 5px 0;
+    padding: 5px;
+    height: 34px;
+}
 
-    #layout header {
-        font-weight: 600;
-    }
+#layout header {
+    font-weight: 600;
+}
 
-    #layout ul > li .left {
-        float: left;
-    }
+#layout ul > li .left {
+    float: left;
+}
 
-    #layout ul > li {
-        background-color: var(--select-item-bg);
-        color: var(--select-item-text-color);
-        border-radius: var(--border-radius);
-    }
+#layout ul > li {
+    background-color: var(--select-item-bg);
+    color: var(--select-item-text-color);
+    border-radius: var(--border-radius);
+}
 
-    #layout ul.enabled > li .right {
-        float: right;
-    }
+#layout ul.enabled > li .right {
+    float: right;
+}
 
-    #layout ul.disabled > li .right {
-        display: none;
-    }
+#layout ul.disabled > li .right {
+    display: none;
+}
 
-    #layout ul > li .width {
-        font-size: small;
-    }
+#layout ul > li .width {
+    font-size: small;
+}
 
-    #layout ul.disabled > li .width {
-        display: none;
-    }
+#layout ul.disabled > li .width {
+    display: none;
+}
 
-    #layout label {
-        font-weight: normal;
-    }
+#layout label {
+    font-weight: normal;
+}
 
-    .enabled li a.edit-field {
-        display: none;
-    }
+.enabled li a.edit-field {
+    display: none;
+}
 
-    .enabled li:hover a.edit-field {
-        display: block;
-    }
+.enabled li:hover a.edit-field {
+    display: block;
+}
+
+#layout .well:focus-visible {
+    outline: 0;
+}
diff --git a/client/res/templates/admin/layouts/grid.tpl b/client/res/templates/admin/layouts/grid.tpl
index 8cc9828c3a..b8e9c20064 100644
--- a/client/res/templates/admin/layouts/grid.tpl
+++ b/client/res/templates/admin/layouts/grid.tpl
@@ -8,7 +8,7 @@
 
 <div id="layout" class="row">
     <div class="col-md-8">
-        <div class="well">
+        <div class="well enabled-well" tabindex="-1">
             <header>{{translate 'Layout' scope='LayoutManager'}}</header>
             <ul class="panels">
             {{#each panelDataList}}
diff --git a/client/res/templates/admin/layouts/rows.tpl b/client/res/templates/admin/layouts/rows.tpl
index ea6db6ffe4..d4ea621885 100644
--- a/client/res/templates/admin/layouts/rows.tpl
+++ b/client/res/templates/admin/layouts/rows.tpl
@@ -8,7 +8,7 @@
 
 <div id="layout" class="row">
     <div class="col-sm-5">
-        <div class="well">
+        <div class="well enabled-well" tabindex="-1">
             <header>{{translate 'Enabled' scope='Admin'}}</header>
             <ul class="enabled connected">
                 {{#each layout}}
diff --git a/client/src/views/admin/layouts/grid.js b/client/src/views/admin/layouts/grid.js
index 9094099d54..0ef8112344 100644
--- a/client/src/views/admin/layouts/grid.js
+++ b/client/src/views/admin/layouts/grid.js
@@ -229,6 +229,8 @@ function (Dep, styleCss) {
 
                         view.close();
 
+                        this.$el.find('.well').focus();
+
                         this.setIsChanged();
                     });
                 });
@@ -459,6 +461,8 @@ function (Dep, styleCss) {
 
         afterRender: function () {
             this.makeDraggable();
+
+            this.$el.find('.enabled-well').focus();
         },
 
         fetch: function () {
diff --git a/client/src/views/admin/layouts/rows.js b/client/src/views/admin/layouts/rows.js
index 6ba9fb109f..c6c8ac4f33 100644
--- a/client/src/views/admin/layouts/rows.js
+++ b/client/src/views/admin/layouts/rows.js
@@ -92,6 +92,8 @@ function (Dep, styleCss) {
                     }
                 },
             });
+
+            this.$el.find('.enabled-well').focus();
         },
 
         onDrop: function (e) {},