Replace CANCEL button by BACK button in steps forms to fit design moc…

…k-ups

CHANGELOG.md

@@ -1,14 +1,25 @@
 # Changelog
 
+## UNRELEASED
+
+### Changed
+
+- Replaced the "CANCEL" button in the footer by a "Back" button in the header.
+
 ## [0.8.0] - 2020-01-03
 
 ### Added
 
 - `logBackendError` and `resetBackendErrors` mutations.
 
 ### Breaking
+
 - removed `setBackendError` mutation, please use `logBackendError` instead.
 
+### Changed
+
+- Replaced the "CANCEL" button in the footer by a "Back" button in the header.
+
 ## [0.7.0] - 2019-12-17
 
 ### Added

docs/_docs/tech/stepforms.md

@@ -9,12 +9,11 @@ Chances are that you'll want to reuse the standard step form layout
 (i.e. with a title, an `ok` and `cancel` button, etc.). To do that,
 you can leverage a few components and base classes provided:
 
-- `@/components/stepforms/StepFormTitle.vue` is the component that
-  generates a standard step form title bar. It should be fed with a
-  `title` props, e.g.:
+- `@/components/stepforms/StepFormHeader.vue` is the component that
+  generates a standard step form header bar. It should be fed with a `cancel` event handler and a `title` prop, e.g.:
 
   ```typescript
-  <step-form-title :title="title"></step-form-title>
+  <step-form-header :cancel= "cancelEventHandler" :title="title"></step-form-header>
   ```
 
 - `@/components/stepforms/StepFormButtonBar.vue` is the component that

src/components/stepforms/AddTextColumnStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <InputTextWidget
       id="textInput"
       v-model="editedStep.text"

src/components/stepforms/AggregateStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <MultiselectWidget
       id="groupbyColumnsInput"
       v-model="editedStep.on"

src/components/stepforms/AppendStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <MultiselectWidget
       id="pipelinesInput"
       v-model="editedStep.pipelines"

src/components/stepforms/ArgmaxStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="valueColumnInput"
       v-model="editedStep.column"

src/components/stepforms/ArgminStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="valueColumnInput"
       v-model="editedStep.column"

src/components/stepforms/ConcatenateStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ListWidget
       addFieldName="Add columns"
       id="toConcatenate"

src/components/stepforms/ConvertStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <MultiselectWidget
       id="columnsInput"
       v-model="editedStep.columns"

src/components/stepforms/DeleteColumnStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <MultiselectWidget
       id="columnsInput"
       v-model="editedStep.columns"

src/components/stepforms/DomainStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <AutocompleteWidget
       id="domainInput"
       v-model="editedStep.domain"

src/components/stepforms/DuplicateColumnStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="columnInput"
       v-model="editedStep.column"

src/components/stepforms/FillnaStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       v-model="editedStep.column"
       id="columnInput"

src/components/stepforms/FilterStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="filter-form" :class="multipleConditionsClass">
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <div class="filter-form-headers__container">
       <div class="filter-form-header">Values in...</div>
       <div class="filter-form-header">Must...</div>

src/components/stepforms/FormulaStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <InputTextWidget
       id="formulaInput"
       v-model="editedStep.formula"

src/components/stepforms/FromDateStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="column"
       v-model="editedStep.column"

src/components/stepforms/JoinStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <AutocompleteWidget
       id="rightPipelineInput"
       v-model="editedStep.right_pipeline"

src/components/stepforms/PercentageStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="valueColumnInput"
       v-model="editedStep.column"

src/components/stepforms/PivotStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <MultiselectWidget
       id="indexInput"
       v-model="editedStep.index"

src/components/stepforms/RenameStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       v-model="editedStep.oldname"
       id="oldnameInput"

src/components/stepforms/ReplaceStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="searchColumnInput"
       v-model="editedStep.search_column"

src/components/stepforms/SelectColumnStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <MultiselectWidget
       id="columnsInput"
       v-model="editedStep.columns"

src/components/stepforms/SortStepForm.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
-
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ListWidget
       addFieldName="Add Column"
       id="sortColumn"

src/components/stepforms/SplitStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="columnToSplit"
       v-model="editedStep.column"
@@ -26,7 +26,7 @@
       data-path=".number_cols_to_keep"
       :errors="errors"
     />
-    <step-form-buttonbar :cancel="cancelEdition" :submit="submit" />
+    <step-form-buttonbar :submit="submit" />
   </div>
 </template>
 

src/components/stepforms/StepForm.vue

@@ -7,7 +7,7 @@ import Ajv, { ValidateFunction, ErrorObject } from 'ajv';
 import { VQBModule } from '@/store';
 import { MutationCallbacks } from '@/store/mutations';
 import StepFormButtonbar from '@/components/stepforms/StepFormButtonbar.vue';
-import StepFormTitle from '@/components/stepforms/StepFormTitle.vue';
+import StepFormHeader from '@/components/stepforms/StepFormHeader.vue';
 import schemaFactory from '@/components/stepforms/schemas';
 import { addAjvKeywords } from '@/components/stepforms/schemas/utils';
 import { Pipeline, PipelineStep } from '@/lib/steps';
@@ -76,7 +76,7 @@ function componentProxyBoundOn(self: Vue) {
  */
 @Component({
   components: {
-    StepFormTitle,
+    StepFormHeader,
     StepFormButtonbar,
   },
 })

src/components/stepforms/StepFormButtonbar.vue

@@ -5,10 +5,6 @@
         class="widget-form-action__button widget-form-action__button--validate"
         @click="props.submit()"
       >Save changes</button>
-      <button
-        class="widget-form-action__button widget-form-action__button--cancel"
-        @click="props.cancel()"
-      >Cancel</button>
     </div>
     <div v-if="props.errors" class="errors">
       <ul>

src/components/stepforms/StepFormHeader.vue

@@ -0,0 +1,74 @@
+<template functional>
+  <div class="step-edit-form">
+    <button class="step-edit-form__back-button" @click="props.cancel()">
+      <i class="fas fa-angle-left" />
+      BACK
+    </button>
+    <div class="step-edit-form__title-container">
+      <h1>{{ props.title }}</h1>
+      <a :href="`https://weaverbird.toucantoco.com/docs/${props.stepName}`" target="_blank">
+        <i class="fas fa-question-circle" />
+      </a>
+    </div>
+    <div class="step-edit-form__empty" />
+  </div>
+</template>
+<style lang="scss" scoped>
+@import '../../styles/_variables';
+
+.step-edit-form {
+  border-bottom: 1px solid $grey;
+  display: flex;
+  align-items: center;
+  padding-bottom: 20px;
+  margin: 10px 0 15px;
+  width: 100%;
+}
+
+.step-edit-form__back-button {
+  align-items: center;
+  border: none;
+  color: #404040;
+  display: flex;
+  flex: 1;
+  font-family: Montserrat, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.step-edit-form__empty {
+  // For alignment purposes
+  flex: 1;
+}
+
+.step-edit-form__title-container {
+  display: flex;
+  align-items: center;
+
+  h1 {
+    color: $base-color;
+    font-weight: 600;
+    font-size: 17px;
+    margin: 0;
+  }
+}
+
+.fas.fa-angle-left {
+  font-size: 19px;
+  margin-right: 5px;
+}
+
+.fas.fa-question-circle {
+  margin-left: 5px;
+  color: $base-color;
+  font-size: 14px;
+
+  &:hover {
+    color: $active-color;
+  }
+}
+</style>

src/components/stepforms/SubstringStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="column"
       v-model="editedStep.column"

src/components/stepforms/ToDateStepForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <step-form-title :title="title" :stepName="this.editedStep.name" />
+    <step-form-header :cancel="cancelEdition" :title="title" :stepName="this.editedStep.name" />
     <ColumnPicker
       id="column"
       v-model="editedStep.column"