From 82cf3c02135b024adc321a683c21ce70df873e29 Mon Sep 17 00:00:00 2001
From: Tori Rose <46499982+ttorir@users.noreply.github.com>
Date: Thu, 15 Dec 2022 10:50:37 -0500
Subject: [PATCH] dropdown task page actions now (#381)

* dropdown task page actions now

* remove comment
---
 neuvue_project/templates/tasks.html           | 68 +++++++++++++------
 neuvue_project/workspace/static/css/tasks.css | 17 +++--
 2 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/neuvue_project/templates/tasks.html b/neuvue_project/templates/tasks.html
index 6c9fabf4..721c8be4 100644
--- a/neuvue_project/templates/tasks.html
+++ b/neuvue_project/templates/tasks.html
@@ -4,6 +4,12 @@
 
 {% block header_includes %}
 <link rel="stylesheet" href="{% static 'css/tasks.css' %}">
+<!--Add for Palette Dropdown-->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+<!--End Palette Dropdown-->
 {% endblock %}
 
 {% block content %}
@@ -24,9 +30,27 @@
                                 </span>
                             {% endif %}
                         </div>
-                        {% if context.can_self_assign_tasks and context.total_pending < context.max_pending_tasks_allowed %}
-                            <div class="header-button">
-                                <button class="header-button-text"
+                        {% if context.can_self_assign_tasks and context.total_pending < context.max_pending_tasks_allowed or context.can_unassign_tasks %}
+                        <div class="header-sizing btn-toolbar">
+                            <button type="button" 
+                                    class="header-button header-outline dropdown-toggle dropdown-toggle-split" 
+                                    style="margin-right: 5pt"
+                                    data-toggle="dropdown" 
+                                    aria-haspopup="true" 
+                                    aria-expanded="false">
+                                <span class="sr-only header-box-text">Toggle Dropdown</span>
+                              </button>
+                            <span class="header-button header-outline rightBorderRounded" onclick="document.location='{% url 'workspace' namespace=namespace %}'"> 
+                                <button class="header-box-text"
+                                    onclick="triggerLoadingSpinner('{{namespace}}NgSpinner')">
+                                    <div id='{{namespace}}NgSpinner'>
+                                        Start Proofreading
+                                    </div>
+                                </button>
+                            </span>
+                            <div class="dropdown-menu dropdown-menu-dark">
+                                {% if context.can_self_assign_tasks and context.total_pending < context.max_pending_tasks_allowed %}
+                                <button class="dropdown-item"
                                     data-bs-toggle="modal"
                                     data-bs-target="#confirmAddTasksModal"
                                     data-bs-display-name="{{context.display_name}}"
@@ -36,30 +60,31 @@
                                     </div>
                                     <input type="hidden" name="namespace" value="{{ namespace }}">
                                 </button>
+                                {% endif %}
+                                {% if context.can_unassign_tasks%}
+                                <button class="dropdown-item" style="font-size: 1.15vh;"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#confirmReassignTasksModal"
+                                    data-bs-display-name="{{context.display_name}}"
+                                    data-bs-namespace="{{namespace}}">
+                                    <div id='{{namespace}}TasksSpinnerReassign'>
+                                        Remove Skipped Tasks
+                                    </div>
+                                    <input type="hidden" name="namespace" value="{{ namespace }}">
+                                </button>
+                                {% endif %} 
                             </div>
-                        {% endif %}
-                        {% if context.can_unassign_tasks%}
-                        <div class="header-button">
-                            <button class="header-button-text" style="font-size: 1.15vh;"
-                                data-bs-toggle="modal"
-                                data-bs-target="#confirmReassignTasksModal"
-                                data-bs-display-name="{{context.display_name}}"
-                                data-bs-namespace="{{namespace}}">
-                                <div id='{{namespace}}TasksSpinnerReassign'>
-                                    Remove Skipped Tasks
-                                </div>
-                                <input type="hidden" name="namespace" value="{{ namespace }}">
-                            </button>
                         </div>
-                        {% endif %}
-                        <div class="header-button rightBorderRounded" onclick="document.location='{% url 'workspace' namespace=namespace %}'"> 
-                            <button class="header-button-text"
+                        {% else %}
+                        <div class="header-sizing header-outline rightBorderRounded" onclick="document.location='{% url 'workspace' namespace=namespace %}'"> 
+                            <button class="header-box-text"
                                 onclick="triggerLoadingSpinner('{{namespace}}NgSpinner')">
                                 <div id='{{namespace}}NgSpinner'>
                                     Start Proofreading
                                 </div>
                             </button>
                         </div>
+                        {% endif %}
                     </div>
                     <div id="{{namespace}}Table" class ="bin" style="display:none;">
                         <div class="tab">
@@ -138,8 +163,8 @@
                 <div id="pinkyHeader" class="pinkyHeader jobHeader active">
                     Pinky Sandbox
                 </div>
-                <div class="header-button rightBorderRounded" onclick="document.location='{% url 'inspect' task_id='6269888a101fc4da81fdd410' %}'"> 
-                    <button class="header-button-text" id='pinkySandboxButton'
+                <div class="header-sizing header-outline rightBorderRounded" onclick="document.location='{% url 'inspect' task_id='6269888a101fc4da81fdd410' %}'"> 
+                    <button class="header-box-text" id='pinkySandboxButton'
                     onclick="triggerLoadingSpinner('PinkyNgSpinner')">
                         <div id='PinkyNgSpinner'>
                             Start Sandbox
@@ -147,6 +172,7 @@
                     </button>
                 </div>
             </div>
+
         </div>
 
 
diff --git a/neuvue_project/workspace/static/css/tasks.css b/neuvue_project/workspace/static/css/tasks.css
index 4e8987b3..781b7c7b 100644
--- a/neuvue_project/workspace/static/css/tasks.css
+++ b/neuvue_project/workspace/static/css/tasks.css
@@ -66,11 +66,16 @@
 }
 
 /* Task category header buttons */
-.header-button {
+.header-sizing {
   margin: 1% 0 1% 0.5%;
   background-color: transparent;
   right:0;
-  width: 12.5%;
+  height: 3.2vh;
+}
+
+.header-outline {
+  background-color: transparent;
+  right:0;
   height: 3.2vh;
   border: 1.5px solid var(--complete-color);
   padding: 0.2vh 0.2vw;
@@ -78,14 +83,16 @@
   font-family: var(--header-font);
   font-size: 1.5vh;
   cursor: pointer;
+  color: var(--complete-color);
 }
 
-.header-button:hover{
+.header-outline:hover{
   background: var(--primary-accent);
   border-color: transparent;
+  color: var(--background);
 }
 
-.header-button-text{
+.header-box-text{
   position: relative;
   width:100%;
   height:100%;
@@ -98,7 +105,7 @@
   color: var(--complete-color);
 }
 
-.header-button-text:hover {
+.header-box-text:hover {
   color: var(--background);
 }