aligner.js + css : harmonize aligner menu

browser/css/aligner.less

@@ -200,7 +200,7 @@
 .menu-content{
   display: none;
   position: absolute;
-  bottom: 124px;
+  bottom: 154px;
   background-color: white;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;

browser/css/dark.css

@@ -576,6 +576,10 @@ line {
   min-width: 60px;
   padding: 2px 2px 1px 2px;
   cursor: pointer;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
 }
 .hiddenCheckBox {
   display: none;
@@ -2355,7 +2359,7 @@ span .end-codon {
 .menu-content {
   display: none;
   position: absolute;
-  bottom: 124px;
+  bottom: 154px;
   background-color: white;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;

browser/css/light.css

@@ -576,6 +576,10 @@ line {
   min-width: 60px;
   padding: 2px 2px 1px 2px;
   cursor: pointer;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
 }
 .hiddenCheckBox {
   display: none;
@@ -2355,7 +2359,7 @@ span .end-codon {
 .menu-content {
   display: none;
   position: absolute;
-  bottom: 124px;
+  bottom: 154px;
   background-color: white;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;

browser/css/segmenter_page.css

@@ -576,6 +576,10 @@ line {
   min-width: 60px;
   padding: 2px 2px 1px 2px;
   cursor: pointer;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
 }
 .hiddenCheckBox {
   display: none;
@@ -2355,7 +2359,7 @@ span .end-codon {
 .menu-content {
   display: none;
   position: absolute;
-  bottom: 124px;
+  bottom: 154px;
   background-color: white;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
@@ -2365,9 +2369,18 @@ span .end-codon {
   text-decoration: none;
   display: block;
 }
+.menu-content label {
+  padding: 8px 12px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
 .menu-content a:hover {
   background-color: #dddddd;
 }
+.menu-content label:hover {
+  background-color: #dddddd;
+}
 .seq_layer {
   position: absolute;
   top: 0px;
@@ -2566,7 +2579,7 @@ textarea {
 }
 #segmenter_panel {
   bottom: 0;
-  height: 144px;
+  height: 154px;
   position: fixed;
   width: 97.2%;
 }

browser/css/segmenter_page.less

@@ -121,7 +121,7 @@ textarea {
 
 #segmenter_panel {
   bottom: 0;
-  height: 144px;
+  height: 154px;
   position: fixed;
   width: 97.2%;
 }

browser/css/svg.css

@@ -575,6 +575,10 @@ line {
   min-width: 60px;
   padding: 2px 2px 1px 2px;
   cursor: pointer;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
 }
 .hiddenCheckBox {
   display: none;
@@ -2364,9 +2368,18 @@ span .end-codon {
   text-decoration: none;
   display: block;
 }
+.menu-content label {
+  padding: 8px 12px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
 .menu-content a:hover {
   background-color: #dddddd;
 }
+.menu-content label:hover {
+  background-color: #dddddd;
+}
 .seq_layer {
   position: absolute;
   top: 0px;

browser/css/talk.css

@@ -576,6 +576,10 @@ line {
   min-width: 60px;
   padding: 2px 2px 1px 2px;
   cursor: pointer;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
 }
 .hiddenCheckBox {
   display: none;
@@ -2365,9 +2369,18 @@ span .end-codon {
   text-decoration: none;
   display: block;
 }
+.menu-content label {
+  padding: 8px 12px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+}
 .menu-content a:hover {
   background-color: #dddddd;
 }
+.menu-content label:hover {
+  background-color: #dddddd;
+}
 .seq_layer {
   position: absolute;
   top: 0px;

browser/css/vidjil.less

@@ -714,6 +714,10 @@ line {
     min-width: 60px;
     padding: 2px 2px 1px 2px;
     cursor : pointer;
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
 }	      
 
 .hiddenCheckBox {

browser/js/aligner.js

@@ -176,6 +176,7 @@ Aligner.prototype = {
         this.div_segmenter = clone.getElementsByClassName("segmenter")[0];
         self.min_H = 130;
         self.max_H = 500;
+        $(".menu-content").css("bottom", (self.min_H+22)+"px");
         $(this.div_segmenter)
             .scroll(function () {
                 var leftScroll = $(self.div_segmenter).scrollLeft();
@@ -187,14 +188,14 @@ Aligner.prototype = {
                     var cur_H = seg.height();
                     var auto_H = seg.css('height', 'auto').height();
 
-                    if (auto_H > self.min_H+10) {
+                    if (auto_H > self.min_H) {
                         if (auto_H > self.max_H) auto_H = self.max_H;
                         if (cur_H  < self.min_H) cur_H  = self.min_H;
-                        seg.stop().height(cur_H).animate({ height: auto_H+20 }, 250);
-                        $(".menu-content").css("bottom", (auto_H+40)+"px");
+                        $(".menu-content").css("bottom", (auto_H+22)+"px");
+                        seg.stop().height(cur_H).animate({ height: auto_H }, 250);
                     } else {
+                        $(".menu-content").css("bottom", (self.min_H+22)+"px");
                         seg.stop().height(self.min_H);
-                        $(".menu-content").css("bottom", (auto_H+24)+"px");
                     }
                     self.is_open = true;
                 }
@@ -213,7 +214,7 @@ Aligner.prototype = {
                         else 
                             seg.stop();
                         
-                        $(".menu-content").css("bottom", (self.min_H+24)+"px");
+                        $(".menu-content").css("bottom", (self.min_H+22)+"px");
                         self.is_open = false;
                         
                     }, 200);