Merge branch 'feature-sc/3805-fix-upload-menu-css' into 'dev'

Correct upload menu

Closes #3805

See merge request !452

browser/css/dark.css

@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #000000;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid darkred;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #000000;
   cursor: pointer;

browser/css/light.css

@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid #8b0000;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;

browser/css/segmenter_page.css

@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid #8b0000;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;

browser/css/svg.css

@@ -83,11 +83,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -810,6 +806,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid darkred;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;

browser/css/talk.css

@@ -84,11 +84,7 @@ ul {
   top: 32px;
 }
 #upload_summary {
-  float: right;
   display: none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: #ffffff;
 }
@@ -812,6 +808,11 @@ span .end-codon {
 #add_clone_menu > #addclone_input.error {
   border: 1px solid darkred;
 }
+#menu_right_part {
+  float: right;
+  display: flex;
+  justify-content: flex-end;
+}
 .buttonSelector {
   background: #ffffff;
   cursor: pointer;

browser/css/vidjil.less

@@ -123,11 +123,7 @@ ul{
 }
 
 #upload_summary {
-  float: right;
   display:none;
-  margin-right: 200px;
-  position: relative;
-  right: 200px;
   z-index: 10;
   background-color: @background;
 }
@@ -983,6 +979,12 @@ span .end-codon-not-first {
   border: 1px solid @message_border_red;
 }
 
+#menu_right_part {
+   float:right;
+   display: flex;
+   justify-content: flex-end;
+}
+
 .buttonSelector {
   background : @background;
   cursor:pointer;

browser/index.html

@@ -70,13 +70,6 @@
                                     m.loadAnalysis('upload_analysis');">start</button> 
         </div>
         
-        <div id="upload_summary" style="" class="menu" onmouseover="showSelector('upload_summary_selector');" onmouseout="hideSelector();">
-            <span id="upload_summary_label">upload</span>
-            <div id="upload_summary_selector" class="selector"><div>
-
-            </div></div>
-        </div>
-
         <div id="add_clone_menu">
             <span class="closeButton" onclick="cancel();">X</span>
             <h2>Add clones from sequences</h2>
@@ -282,40 +275,49 @@
                 </div>
             </div>
 
-            <div class="menu" id="alert" style="float: right;"></div>
-            <div id="logo" style="float: right;" onclick="console.log({'type': 'popup', 'default':'welcome'})">Vidjil <span class='logo'>(beta)</span></div>
 
-            <div class="menu" style="float: right" onmouseover="showSelector('helpSelector');"> help
-                <div id="helpSelector" class="selector"><div>
-                    <a class="buttonSelector getHelp" onclick="report.sendMail()">get support</a>
-                    <a class="buttonSelector" href="http://www.vidjil.org/doc/user" target="_blank">manual</a>
-                    <a class="buttonSelector" href="http://www.vidjil.org/doc/tutorial/mastering-vidjil.html" target="_blank">tutorial</a>
-                    <a class="buttonSelector devel-mode" onclick="my_tips.reset()">reset tips of the day</a>
+        <div id="menu_right_part">
+            <div id='live-ajax'>
+                <div class="active-container">
+                    <img src="images/ajax-loader.gif" />
+                </div>
+            </div>
+
+            <div id="upload_summary" class="menu" onmouseover="showSelector('upload_summary_selector');" onmouseout="hideSelector();">
+              <span id="upload_summary_label">upload</span>
+              <div id="upload_summary_selector" class="selector"><div>
+
               </div></div>
             </div>
 
-            <div style="float: right" class="menu" onmouseover="showSelector('paletteSelector');"> palette 
+            <div id="palette_menu" class="menu" onmouseover="showSelector('paletteSelector');"> palette
                 <div id="paletteSelector" class="selector"><div>
-                    <a class="buttonSelector" onclick="changeStyle('solarizeL')">light</a>
-                    <a class="buttonSelector" onclick="changeStyle('display')">light (presentation)</a>
-                    <a class="buttonSelector" onclick="changeStyle('solarizeD')">dark</a>
+                    <a id="palette_light" class="buttonSelector" onclick="changeStyle('solarizeL')">light</a>
+                    <a id="palette_light_presentation" class="buttonSelector" onclick="changeStyle('display')">light (presentation)</a>
+                    <a id="palette_dark" class="buttonSelector" onclick="changeStyle('solarizeD')">dark</a>
                 </div></div>
             </div>
-            <div style="float: right; margin: 5px;" id='live-ajax'>
-                <div class="active-container">
-                    <img src="images/ajax-loader.gif" />
-                </div>
+            <div id="help_menu" class="menu" onmouseover="showSelector('helpSelector');"> help
+                <div id="helpSelector" class="selector"><div>
+                    <a id="help_support" class="buttonSelector getHelp" onclick="report.sendMail()">get support</a>
+                    <a id="help_manual" class="buttonSelector" href="http://www.vidjil.org/doc/user" target="_blank">manual</a>
+                    <a id="help_tutorial" class="buttonSelector" href="http://www.vidjil.org/doc/tutorial/mastering-vidjil.html" target="_blank">tutorial</a>
+                    <a class="buttonSelector devel-mode" onclick="my_tips.reset()">reset tips of the day</a>
+                </div></div>
                 </div>
 
-            <div id="fps" style="float: right; display: none"> </div>
+            <div id="fps" style="display: none"> </div>
             <div id="header_messages" class="message_container header"></div>
 
+            <div class="menu" id="alert"></div>
+            <div id="logo"  onclick="console.log({'type': 'popup', 'default':'welcome'})">Vidjil <span class='logo'>(beta)</span></div>
 <!--
 	    <div class="menu" style="float: right; margin-right:100px"><span style="padding: 4px 5px; background-color: #fef6e3; font-family: ubuntulight;">
 		<b>Maintenance:</b> Vidjil will be offline Tuesday 7, 11:00 → 13:00 CEST. Thank you for your understanding.
 	    </span></div>
 -->
          </div>
+        </div>  
         <!-- fin top-container-->
         
         <!-- MID-CONTAINER -->

browser/test/functional/test_multilocus.rb

@@ -12,6 +12,9 @@ class TestMultilocus < BrowserTest
       if $b.div(id: 'tip-container').present?
         $b.div(:id => 'tip-container').div(:class => 'tip_1').element(:class => 'icon-cancel').click
       end
+
+      # Make upload menu appear to test the application with this menu too
+      $b.execute_script("$('#upload_summary')[0].style.display='block';")
     end
   end
 
@@ -132,7 +135,6 @@ class TestMultilocus < BrowserTest
 
   def check_when_list_or_scatterplot_clicked
     clone_name = $b.clone_info('25')[:name]
-    assert ( $b.infoline.inner_html == clone_name.title), ">> Clone name is not correct in focus div"
     assert ( $b.clone_in_list('25').class_name.include? "list_select" ), ">> Incorrect class name, clone is not selected"
     assert ( $b.clone_in_scatterplot('25', :class => "circle_select").exists?)
     assert ( $b.clone_in_graph('25', :class=> "graph_select").exists?)
@@ -195,7 +197,7 @@ class TestMultilocus < BrowserTest
       name = $b.tag_item('0')[:name]
       name.wait_until(&:present?)
       name.click
-      name.wait_while(&:present?)
+      $b.until { not $b.tag_item('0')[:name].present? }
 
       $b.until {$b.clone_info('25')[:name].style('color') ==  'rgba(220, 50, 47, 1)' }
     end
@@ -385,6 +387,34 @@ class TestMultilocus < BrowserTest
     end
   end
 
+  def test_20_menu_palette
+    original_color = $b.body.style('background-color')
+    dark = $b.menu_item('palette_dark')
+    dark.click
+
+    assert ($b.body.style('background-color') != original_color)
+    assert ($b.body.style('background-color').include? "51, 51, 51"), "Background should be dark"
+
+    $b.menu_item('palette_light').click
+
+    assert ($b.body.style('background-color') == original_color)
+  end
+
+  def test_21_menu_manual
+    $b.menu_item('help_manual').click
+
+    assert ($b.window(:title => /user manual/)), "User manual is opened"
+    $b.window(:title => /user manual/).use do
+      assert ($b.h1(:text => /user manual/).present?), "Make sure the page is loaded"
+    end
+  end
+
+  def test_22_menu_tutorial
+    $b.menu_item('help_tutorial').click
+
+    assert ($b.window(:title => /Mastering the Vidjil web application/)), "Tutorial is opened"
+  end
+
   # Not really a test
   def test_zz_close
     close_everything

browser/test/functional/vidjil_browser.rb

@@ -171,6 +171,18 @@ class VidjilBrowser < Watir::Browser
     return div(:id => 'settings_menu')
   end
 
+  def menu_palette
+    return div(:id => 'palette_menu')
+  end
+
+  def menu_help
+    return div(:id => 'help_menu')
+  end
+
+  def menu_upload
+    return div(:id => 'upload_summary')
+  end
+
   def menu_item_export(id, extra = {})
     menu = menu_import_export
     menu.click
@@ -185,6 +197,19 @@ class VidjilBrowser < Watir::Browser
     return menu_item_export('export_fasta_align', extra)
   end
 
+  def menu_item(id, extra = {})
+    item = element(extra.merge(:id => id))
+    assert(item.exists?)
+    parent = item.parent
+    while parent.tag_name != "body" and not parent.classes.include? "menu"
+      parent = parent.parent
+    end
+    if parent.tag_name != "body"
+      parent.click
+    end
+    return item
+  end
+
   def merge
     return element(:id => 'merge')
   end