fix: tree-node selection in acl tab, tree scroll container

projectcaluma · Dec 10, 2021 · 0b831b1 · 0b831b1
1 parent d38b6f0
commit 0b831b1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/addon/components/tree.hbs b/addon/components/tree.hbs
@@ -1,4 +1,4 @@
-<div ...attributes>
+<div ...attributes class="tree-wrapper">
   <div class="uk-inline uk-margin-small-bottom uk-width-1-1">
     <span class="uk-form-icon" uk-icon="icon: search"></span>
     <Input

diff --git a/addon/controllers/scopes.js b/addon/controllers/scopes.js
@@ -14,4 +14,11 @@ export default class ScopesController extends Controller {
   get rootScopes() {
     return this.model?.filter((scope) => !scope.parent);
   }
+
+  get itemRoute() {
+    if (this.router.currentRouteName.includes("acl")) {
+      return "scopes.edit.acl";
+    }
+    return "scopes.edit";
+  }
 }
diff --git a/addon/templates/scopes.hbs b/addon/templates/scopes.hbs
@@ -1,11 +1,11 @@
 <SectionTitle @model="scopes" />
 
 <div class="uk-grid">
-  <div class="uk-width-1-4 uk-first-column tree-wrapper">
+  <div class="uk-width-1-4 uk-first-column emeis-border-right">
     <Tree
       class="uk-margin-small-left"
       @items={{this.rootScopes}}
-      @itemRoute="scopes.edit"
+      @itemRoute={{this.itemRoute}}
       @activeItem={{this.activeScope}}
     />
   </div>

diff --git a/app/styles/ember-emeis.scss b/app/styles/ember-emeis.scss
@@ -61,12 +61,24 @@ $ember-power-select-default-border-radius: 0;
 $ember-power-select-border-color: $global-border;
 @import "ember-power-select";
 
+.emeis-border-right {
+  border-right: solid 1px $global-border;
+}
+
 $tree_indicator_width: 0.6em;
 $tree_indicator_height: 0.6em;
 
 .tree-wrapper {
-  border-right: solid 1px $global-border;
-  padding: 1em;
+  display: flex;
+  flex-direction: column;
+
+  padding-right: $tree_indicator_width;
+  position: relative;
+  max-height: 100%;
+
+  .tree {
+    overflow-y: auto;
+  }
 }
 
 ul.tree,