fix: put actions buttons together, closes #1588

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/FileDiffView.vue

@@ -67,6 +67,7 @@
         />
         <VueButton
           :label="$t('org.vue.components.file-diff-view.actions.refresh')"
+          icon-left="refresh"
           class="big"
           @click="refresh()"
         />
@@ -100,7 +101,7 @@
         </VueFormField>
       </div>
 
-      <div slot="footer" class="actions space-between">
+      <div slot="footer" class="actions center">
         <VueButton
           :label="$t('org.vue.components.file-diff-view.modals.commit.actions.cancel')"
           class="flat"
@@ -273,4 +274,8 @@ export default {
     height 0
     overflow-x hidden
     overflow-y auto
+
+  .actions-bar
+    .vue-ui-button
+      min-width 190px
 </style>

packages/@vue/cli-ui/src/components/FolderExplorer.vue

@@ -176,7 +176,7 @@
         </VueFormField>
       </div>
 
-      <div slot="footer" class="actions space-between">
+      <div slot="footer" class="actions end">
         <VueButton
           :label="$t('org.vue.components.folder-explorer.new-folder.cancel')"
           class="flat close"

packages/@vue/cli-ui/src/components/NpmPackageSearch.vue

@@ -49,18 +49,20 @@
       </ais-index>
     </div>
 
-    <div class="actions-bar no-padding-x space-between">
+    <div class="actions-bar no-padding-x">
+      <div class="algolia">
+        <img class="ais-logo" src="~@/assets/search-by-algolia.svg">
+      </div>
+
+      <div class="vue-ui-spacer"/>
+
       <VueButton
         icon-left="close"
         :label="$t('org.vue.views.project-plugins-add.tabs.search.buttons.cancel')"
         class="big"
         @click="close()"
       />
 
-      <div class="algolia">
-        <img class="ais-logo" src="~@/assets/search-by-algolia.svg">
-      </div>
-
       <VueButton
         icon-left="file_download"
         :label="selectedIdModel ? $t('org.vue.views.project-plugins-add.tabs.search.buttons.install', { target: selectedIdModel }) : $t('org.vue.views.project-plugins-add.tabs.search.buttons.default-install')"
@@ -158,13 +160,9 @@ export default {
   overflow hidden
 
 .algolia
-  position absolute
-  margin 0 auto
-  top 0
-  left 0
-  width 100%
+  width 200px
   height 100%
-  pointer-events none
+  margin-left $padding-item
   h-box()
   box-center()
 </style>

packages/@vue/cli-ui/src/components/StepWizard.vue

@@ -106,9 +106,9 @@ export default {
       overflow-y auto
 
     > .actions-bar
-      justify-content space-between
-      &.center
-        justify-content center
+      justify-content center
+      .vue-ui-button:not(.icon-button)
+        min-width 190px
 
   .title
     padding $padding-item

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

@@ -28,15 +28,7 @@
       </div>
     </template>
 
-    <div class="actions-bar space-between">
-      <VueButton
-        :disabled="!hasPromptsChanged"
-        icon-left="cancel"
-        class="big"
-        :label="$t('org.vue.views.project-configuration-details.actions.cancel')"
-        @click="cancel()"
-      />
-
+    <div class="actions-bar">
       <VueButton
         v-if="configuration && configuration.link"
         icon-right="open_in_new"
@@ -46,6 +38,16 @@
         target="_blank"
       />
 
+      <div class="vue-ui-spacer"/>
+
+      <VueButton
+        :disabled="!hasPromptsChanged"
+        icon-left="cancel"
+        class="big"
+        :label="$t('org.vue.views.project-configuration-details.actions.cancel')"
+        @click="cancel()"
+      />
+
       <VueButton
         v-if="configuration && !hasPromptsChanged"
         icon-left="refresh"

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

@@ -357,7 +357,7 @@
         </VueFormField>
       </div>
 
-      <div slot="footer" class="actions space-between">
+      <div slot="footer" class="actions end">
         <VueButton
           :label="$t('org.vue.views.project-create.tabs.presets.remote.cancel')"
           class="flat"
@@ -385,7 +385,7 @@
         {{ $t('org.vue.views.project-create.tabs.details.modal.body') }}
       </div>
 
-      <div slot="footer" class="actions space-between">
+      <div slot="footer" class="actions end">
         <VueButton
           :label="$t('org.vue.views.project-create.tabs.details.modal.buttons.back')"
           class="flat"
@@ -427,11 +427,9 @@
           @click="showSavePreset = false"
         />
 
-        <div class="vue-ui-spacer"/>
-
         <VueButton
           :label="$t('org.vue.views.project-create.tabs.configuration.modal.buttons.continue')"
-          class="flat continue"
+          class="continue"
           @click="createWithoutSaving()"
         />
 

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

@@ -116,7 +116,7 @@
         {{ $t('org.vue.views.project-dependencies.uninstall.body', { id: selectedId }) }}
       </div>
 
-      <div slot="footer" class="actions space-between">
+      <div slot="footer" class="actions end">
         <VueButton
           :label="$t('org.vue.views.project-dependencies.uninstall.cancel')"
           class="flat"

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

@@ -80,18 +80,15 @@
         {{ $t('org.vue.views.project-plugins-add.modal.body', { target: pluginId }) }}
       </div>
 
-      <div slot="footer" class="actions space-between">
+      <div slot="footer" class="actions end">
         <VueButton
           :label="$t('org.vue.views.project-plugins-add.modal.buttons.back')"
           class="flat"
           @click="showCancelInstall = false"
         />
 
-        <div class="vue-ui-spacer"/>
-
         <VueButton
           :label="$t('org.vue.views.project-plugins-add.modal.buttons.cancel')"
-          class="flat"
           @click="cancelInstall()"
         />