Merge pull request #849 from dmytropanontko/fix/intets-scroll-bar

fix(nlu): added scroll for intents list (resolve #846)
botpress · Aug 15, 2018 · 52ca905 · 52ca905
2 parents 69c91b2 + b85d3c3
commit 52ca905
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/functionals/botpress-nlu/src/views/index.jsx b/packages/functionals/botpress-nlu/src/views/index.jsx
@@ -126,15 +126,15 @@ export default class Module extends React.Component {
       })
 
     return (
-      <div>
+      <div className={style.intentsContainer}>
         <div>
           <span>Intents ({intents.length})</span>
           <span className={caret} onClick={this.toggleProp('showNavIntents')}>
             <span className="caret" />
           </span>
         </div>
         <Collapse in={this.state.showNavIntents}>
-          <ul>
+          <ul className={style.intentsList}>
             {intents.map((el, i) => (
               <li key={i} className={getClassName(el)} onClick={() => this.setCurrentIntent(el.name)}>
                 {el.name}&nbsp;({_.get(el, 'utterances.length') || 0})

diff --git a/packages/functionals/botpress-nlu/src/views/style.scss b/packages/functionals/botpress-nlu/src/views/style.scss
@@ -20,6 +20,7 @@ footer {
 .main {
   flex: 1 1 auto;
   display: flex;
+  height: 100%;
 }
 
 .navigationBar {
@@ -28,6 +29,7 @@ footer {
   display: flex;
   flex-direction: column;
   width: 240px;
+  height: 100%;
   background-color: #fcfcfc;
   border-right: 1px solid #e5e5e5;
 
@@ -41,7 +43,7 @@ footer {
       font-size: 14px;
     }
     .checkbox input {
-        width: auto;
+      width: auto;
     }
   }
 
@@ -50,6 +52,7 @@ footer {
     position: relative;
     overflow: hidden;
     padding: 7px;
+    height: 100%;
 
     ul {
       list-style: none;
@@ -92,6 +95,31 @@ footer {
   }
 }
 
+.intentsContainer {
+  height: 100%;
+}
+
+.intentsList {
+  max-height: calc(100% - 20px);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #888;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+}
+
 .childContent {
   flex: 1 1 auto;
   position: relative;