refactor(ui): move task params to dropdown

packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue

@@ -25,14 +25,43 @@
           @click="stopTask()"
         />
 
-        <VueButton
+        <VueDropdown
           v-if="task.prompts.length"
-          icon-left="settings"
-          class="icon-button primary"
-          :disabled="task.status === 'running'"
-          v-tooltip="$t('org.vue.views.project-task-details.parameters')"
-          @click="showParameters = true"
-        />
+          placement="bottom"
+        >
+          <VueButton
+            slot="trigger"
+            icon-left="settings"
+            class="icon-button primary"
+            :disabled="task.status === 'running'"
+            v-tooltip="$t('org.vue.views.project-task-details.parameters')"
+            @click="showParameters = true"
+          />
+
+          <div class="task-settings">
+            <div class="pane-toolbar">
+              <VueIcon icon="settings"/>
+              <div class="title">{{ $t('org.vue.views.project-task-details.parameters') }}</div>
+              <VueButton
+                class="icon-button flat"
+                icon-left="close"
+                v-tooltip="$t('org.vue.views.project-task-details.actions.close')"
+                v-close-popover
+              />
+            </div>
+
+            <PromptsList
+              :prompts="visiblePrompts"
+              class="prompts"
+              @answer="answerPrompt"
+            />
+
+            <div class="vue-ui-text info banner">
+              <VueIcon icon="info" class="big"/>
+              <span>{{ $t('org.vue.views.project-task-details.parameters-info') }}</span>
+            </div>
+          </div>
+        </VueDropdown>
 
         <div
           class="command"
@@ -102,33 +131,6 @@
         />
       </div>
     </template>
-
-    <VueModal
-      v-if="showParameters"
-      :title="$t('org.vue.views.project-task-details.parameters')"
-      class="medium anchor"
-      @close="showParameters = false"
-    >
-      <div class="default-body">
-        <PromptsList
-          :prompts="visiblePrompts"
-          @answer="answerPrompt"
-        />
-
-        <div class="vue-ui-text info banner">
-          <VueIcon icon="info" class="big"/>
-          <span>{{ $t('org.vue.views.project-task-details.parameters-info') }}</span>
-        </div>
-      </div>
-
-      <div slot="footer" class="actions">
-        <VueButton
-          class="primary big"
-          :label="$t('org.vue.views.project-task-details.actions.close')"
-          @click="showParameters = false"
-        />
-      </div>
-    </VueModal>
   </div>
 </template>
 
@@ -378,4 +380,12 @@ export default {
   .description
     color $color-text-light
     margin-left $padding-item
+
+.task-settings
+  padding $padding-item
+  box-sizing border-box
+  width 700px
+  .prompts
+    max-height 500px
+    overflow-y auto
 </style>