Add Status button

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -499,6 +499,26 @@
   }
 }
 
+.task-information {
+  column-gap: 1em;
+  display: grid;
+  grid-template-columns: auto max-content;
+
+  .task-section-header {
+    grid-column: 1 / span 1;
+  }
+
+  .task-details {
+    grid-column: 1 / span 1;
+    grid-row: 2 / span 1;
+  }
+
+  .task-flows {
+    grid-column: 2 / span 1;
+    grid-row: 1 / span 2;
+  }
+}
+
 @media (max-width: 700px) {
   .my-module-protocol-status {
     .status-info-dropdown {
@@ -514,4 +534,18 @@
       }
     }
   }
+
+  .task-information {
+    grid-template-columns: auto;
+    row-gap: .5em;
+
+    .task-details {
+      grid-row: 3 / span 1;
+    }
+
+    .task-flows {
+      grid-column: unset;
+      grid-row: 2 / span 1;
+    }
+  }
 }

app/assets/stylesheets/my_modules/status_flow.scss

@@ -0,0 +1,21 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+// scss-lint:disable SelectorFormat
+// scss-lint:disable ImportantRule
+
+@import "constants";
+@import "mixins";
+
+.content-pane.my-modules-protocols-index {
+  .status-flow-dropdown {
+    .dropdown-toggle {
+      color: $color-white;
+      text-align: left;
+      width: 15em;
+
+      .caret {
+        margin: 8px 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/shared_styles/elements/dropdown.scss

@@ -12,7 +12,7 @@
       border-color: $brand-focus;
 
       .caret {
-        transform: rotateX(180deg)
+        transform: rotateX(180deg);
       }
     }
 

app/views/my_modules/_state_button_complete.html.erb

@@ -1,4 +0,0 @@
-<button class="btn btn-primary">
-  <i class="fas fa-check"></i>
-  <%= t("my_modules.buttons.complete") %>
-</button>

app/views/my_modules/_state_button_uncomplete.html.erb

@@ -1,4 +0,0 @@
-<button class="btn btn-secondary ">
-  <i class="fas fa-undo-alt"></i>
-  <%= t("my_modules.buttons.uncomplete") %>
-</button>

app/views/my_modules/_state_buttons.html.erb

@@ -1,5 +1,33 @@
-<div class="pull-right my_module-state-buttons">
-  <% if can_complete_module?(@my_module) %>
+
+<div>
+  <div class="status-label">Status</div>
+  <div class="dropdown sci-dropdown status-flow-dropdown">
+    <button class="btn btn-secondary dropdown-toggle"
+            type="button"
+            id="dropdownTaskFlow"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="true"
+            style="background-color: #4cae4c;">
+      <span>In progress</span>
+      <span class="caret pull-right"></span>
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="dropdownTaskFlow">
+      <li>
+        <span><%= t('my_modules.protocol.options_dropdown.load_from_repo') %></span>
+      </li>
+      <li>
+        <span><%= t('my_modules.protocol.options_dropdown.import') %></span>
+      </li>
+      <li>
+        <span><%= t('my_modules.protocol.options_dropdown.export') %></span>
+      </li>
+      <li>
+        <span><%= t('my_modules.protocol.options_dropdown.save_to_repo') %></span>
+      </li>
+    </ul>
+  </div>
+  <% if false && can_complete_module?(@my_module) %>
     <div class="btn-group">
       <% if !@my_module.completed? %>
         <div data-action="complete-task" data-link-url="<%= toggle_task_state_my_module_path(@my_module) %>">

app/views/my_modules/protocols.html.erb

@@ -6,7 +6,7 @@
 
 <div class="content-pane my-modules-protocols-index" data-task-id="<%= @my_module.id %>">
   <!-- Details -->
-  <div class="task-section">
+  <div class="task-section task-information">
     <div class="task-section-header">
       <span id="taskDetailsLabel" class="task-section-title">
         <h2>
@@ -20,13 +20,14 @@
         </div>
       </span>
 
-      <div class="actions-block">
-        <%= render partial: "my_modules/state_buttons.html.erb" %>
-      </div>
+
     </div>
     <div class="task-details">
       <%= render partial: "my_module_details" %>
     </div>
+    <div class="task-flows">
+      <%= render partial: "my_modules/state_buttons.html.erb" %>
+    </div>
   </div>
   <!-- Notes -->
   <div class="task-section hidden">