From a17cd78c20ded23a05e514d2372045b15b2d5e0a Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Tue, 8 Nov 2022 16:39:52 +0100
Subject: [PATCH] Add view dropdown to experiment screen

---
 .../stylesheets/shared/content_pane.scss      | 15 ++++++++++
 app/views/experiments/_show_header.html.erb   | 28 +++++++++++++++----
 config/locales/en.yml                         |  4 +++
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss
index 5ef1817f6..54c9a8378 100644
--- a/app/assets/stylesheets/shared/content_pane.scss
+++ b/app/assets/stylesheets/shared/content_pane.scss
@@ -90,6 +90,21 @@
             &:hover {
               background: $color-concrete;
             }
+
+            a {
+              display: inline-block;
+              margin: -1em;
+              padding: 1em;
+              width: calc(100% + 2em);
+
+              &.selected::after {
+                @include font-awesome;
+                content: $font-fas-check;
+                margin-left: auto;
+                position: absolute;
+                right: 1em;
+              }
+            }
           }
         }
 
diff --git a/app/views/experiments/_show_header.html.erb b/app/views/experiments/_show_header.html.erb
index d0e06f53a..faacc0320 100644
--- a/app/views/experiments/_show_header.html.erb
+++ b/app/views/experiments/_show_header.html.erb
@@ -20,12 +20,28 @@
       <% end %>
     </h1>
     <div class="header-actions experiment-header">
-      <span class="dropdown actions-button">
-        <button class="btn btn-light dropdown-toggle" type="button" id="exViewMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          <span><%= t('experiments.canvas.view') %></span>
-          <span class="caret"></span>
-        </button>
-      </span>
+      <%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
+        <li>
+          <%= link_to canvas_experiment_path(@experiment), class: ('selected' if action_name == 'canvas') do %>
+            <i class="fas fa-dice-four button-icon"></i>
+            <%= t('experiments.table.view.canvas') %>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to table_experiment_path(@experiment), class: ('selected' if action_name == 'table') do %>
+            <i class="fas fa-list button-icon"></i>
+            <%= t('experiments.table.view.table') %>
+          <% end %>
+        </li>
+        <div role="separator" class="divider"></div>
+        <li>
+          <%= link_to module_archive_experiment_path(@experiment) do %>
+            <i class="fas fa-archive button-icon"></i>
+            <%= t('experiments.table.view.archived_tasks') %>
+          <% end %>
+        </li>
+      <% end %>
+
       <% if can_manage_experiment?(@experiment) || can_clone_experiment?(@experiment)  %>
         <!-- experiment actions -->
         <span class="dropdown actions-button">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9ec185c19..fbae14dfe 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1312,6 +1312,10 @@ en:
         duplicate: 'Duplicate'
         manage_access: 'Manage access'
         task_data: 'Task data display'
+      view:
+        canvas: 'Canvas'
+        table: 'Table'
+        archived_tasks: 'Go to Archived tasks'
       add_tag: '+ Add tag'
     canvas:
       archive_confirm: "Are you sure to archive this experiment?"