Merge pull request #8326 from nihco2/fix-stock-design

Fix stock design
PrestaShop · Oct 20, 2017 · 99bbff2 · 99bbff2
2 parents 197d76a + ebcceef
commit 99bbff2
Show file tree

Hide file tree

Showing 25 changed files with 379 additions and 312 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,8 @@ docs/phpdoc-sf/
 composer.lock
 tests/Selenium/errorShots/
 tests/Selenium/errorDumps/
+*.hot-update.js
+*.hot-update.json
 
 admin-dev/autoupgrade/*
 admin-dev/backups/*

diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/app.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/app.vue
@@ -23,18 +23,18 @@
  * International Registered Trademark & Property of PrestaShop SA
  *-->
 <template>
-  <div v-if="isReady" id="app" class="stock-app">
+  <div v-if="isReady" id="app" class="stock-app container-fluid">
     <StockHeader />
     <Search @search="onSearch" @applyFilter="applyFilter" />
     <LowFilter v-if="isOverview" :filters="filters" @lowStockChecked="onLowStockChecked" />
-    <div class="card pa-2">
+    <div class="card container-fluid pa-2 clearfix">
       <router-view class="view" @resetFilters="resetFilters" @fetch="fetch"></router-view>
+      <PSPagination
+        :currentIndex="currentPagination"
+        :pagesCount="pagesCount"
+        @pageChanged="onPageChanged"
+      />
     </div>
-    <PSPagination
-      :currentIndex="currentPagination"
-      :pagesCount="pagesCount"
-      @pageChanged="onPageChanged"
-    />
   </div>
 </template>
 
@@ -113,23 +113,38 @@
   };
 </script>
 
-<style lang="sass">
+<style lang="sass" type="text/scss">
   @import "../../../../../scss/config/_settings.scss";
   .header-toolbar {
-    z-index: 0;
-    height: 120px;
+    height: 0;
+    border: none;
+    .title {
+      display: none;
+    }
   }
   .stock-app {
-    padding-top: 3em;
+    padding: 3em 0 0 0;
   }
-  .table tr td {
-    border: none;
-    padding: 5px 5px 5px;
-    vertical-align: top;
-    &:not(.qty-spinner) {
-      padding-top:14px;
+  .table {
+    td {
+      border: none;
+      padding: 5px 5px 5px;
+      word-wrap: break-word;
+      white-space: normal;
+    }
+    thead th {
+      padding: 5px inherit;
+      vertical-align: middle;
+      .material-icons {
+        color: $gray-medium;
+        vertical-align: middle;
+      }
+    }
+    td:first-child {
+      // product description inside the product column
+      p {
+        margin-bottom: 0;
+      }
     }
-    word-wrap: break-word;
-    white-space: normal;
   }
 </style>
diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/header/filters.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/header/filters.vue
@@ -29,10 +29,10 @@
       <i class="material-icons float-right ">keyboard_arrow_down</i>
       {{trans('button_advanced_filter')}}
     </button>
-    <div class="collapse" id="filters">
+    <div id="filters" class="container-fluid collapse">
       <div class="row">
-        <div class="col-md-4">
-          <div v-if="isOverview" class="py-2 px-2">
+        <div class="col-lg-4">
+          <div v-if="isOverview" class="py-3">
             <h2>{{trans('filter_suppliers')}}</h2>
             <FilterComponent
               :placeholder="trans('filter_search_suppliers')"
@@ -42,16 +42,16 @@
               @active="onFilterActive"
             />
           </div>
-          <div v-else class="py-2 px-2">
+          <div v-else class="py-3">
             <h2>{{trans('filter_movements_type')}}</h2>
             <PSSelect :items="movementsTypes" itemID="id_stock_mvt_reason" itemName="name" @change="onChange">
               {{trans('none')}}
             </PSSelect>
-            <h2 class="mt-2">{{trans('filter_movements_employee')}}</h2>
+            <h2 class="mt-4">{{trans('filter_movements_employee')}}</h2>
             <PSSelect :items="employees" itemID="id_employee" itemName="name" @change="onChange">
              {{trans('none')}}
             </PSSelect>
-            <h2 class="mt-2">{{trans('filter_movements_period')}}</h2>
+            <h2 class="mt-4">{{trans('filter_movements_period')}}</h2>
             <form class="row">
               <div class="col-md-6">
                 <label>{{trans('filter_datepicker_from')}}</label>
@@ -64,8 +64,8 @@
             </form>
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="py-2 px-2">
+        <div class="col-lg-4">
+          <div class="py-3">
             <h2>{{trans('filter_categories')}}</h2>
             <FilterComponent
               :placeholder="trans('filter_search_category')"
@@ -76,8 +76,8 @@
             />
           </div>
         </div>
-        <div class="col-md-4">
-          <div class="py-2 px-2">
+        <div class="col-lg-4">
+          <div class="py-3">
             <h2>{{trans('filter_status')}}</h2>
             <PSRadio
               id="enable"
@@ -214,6 +214,10 @@
     box-shadow: 1px 2px 3px 0 rgba(108, 134, 142, 0.3);
     border: solid 1px #b9cdd2;
     width: 150%;
+
+    .row {
+      padding: 0.625rem; // 10px
+    }
   }
   .collapse-button {
     width: 100%;

diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/header/filters/filter-component.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/header/filters/filter-component.vue
@@ -27,31 +27,32 @@
     <PSTags
       v-if="!hasChildren"
       ref="tags"
-      class="form-control search search-input"
+      class="form-control search search-input mb-2"
       :tags="tags"
       :placeholder="hasPlaceholder?placeholder:''"
+      :hasIcon="true"
       @tagChange="onTagChanged"
       @typing="onTyping"
     />
     <div v-if="hasChildren">
-        <PSTree
-          v-if="isOverview"
-          v-once
-          ref="tree"
-          :hasCheckbox="true"
-          :model="list"
-          @checked="onCheck"
-          :translations="PSTreeTranslations"
-        >
-        </PSTree>
-         <PSTree
-            v-else
-            ref="tree"
-            :hasCheckbox="true"
-            :model="list"
-            @checked="onCheck"
-            :translations="PSTreeTranslations"
-          >
+      <PSTree
+        v-if="isOverview"
+        v-once
+        ref="tree"
+        :hasCheckbox="true"
+        :model="list"
+        @checked="onCheck"
+        :translations="PSTreeTranslations"
+      >
+      </PSTree>
+      <PSTree
+        v-else
+        ref="tree"
+        :hasCheckbox="true"
+        :model="list"
+        @checked="onCheck"
+        :translations="PSTreeTranslations"
+      >
       </PSTree>
     </div>
     <ul
@@ -198,5 +199,6 @@
   ul {
     list-style: none;
     padding-left: 0;
+    margin-bottom: 0;
   }
 </style>
diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/header/filters/low-filter.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/header/filters/low-filter.vue
@@ -24,24 +24,27 @@
  *-->
 
 <template>
-	<div class="row py-2">
-    <div class="col row ml-1">
-		  <PSCheckbox ref="low-filter" id="low-filter" class="mt-1" @checked="onCheck" />
-		  <p class="ml-2 low-filter-label" @click="onLabelClick">{{trans('filter_low_stock')}}</p>
-    </div>
-    <div class="col">
-      <a class="float-sm-right ml-2" :href="stockImportUrl" target="_blank">
-        <span data-toggle="pstooltip" :title="stockImportTitle" data-html="true" data-placement="top">
-          <i class="material-icons">cloud_download</i>
-        </span>
-      </a>
-      <a class="float-sm-right" :href="stockExporttUrl">
-        <span data-toggle="pstooltip" :title="stockExportTitle" data-html="true" data-placement="top">
-          <i class="material-icons">cloud_upload</i>
-        </span>
-      </a>
+  <div class="container-fluid">
+     <div class="row py-2">
+       <div class="col row ml-1">
+         <PSCheckbox ref="low-filter" id="low-filter" class="mt-1" @checked="onCheck">
+           <label slot="label" for="low-filter" class="low-filter-label ml-1">{{trans('filter_low_stock')}}</label>
+         </PSCheckbox>
+       </div>
+       <div class="col mr-3 d-flex align-items-center justify-content-end">
+         <a :href="stockExporttUrl">
+           <span data-toggle="pstooltip" :title="stockExportTitle" data-html="true" data-placement="top">
+             <i class="material-icons">cloud_upload</i>
+           </span>
+         </a>
+         <a class="ml-2" :href="stockImportUrl" target="_blank">
+           <span data-toggle="pstooltip" :title="stockImportTitle" data-html="true" data-placement="top">
+             <i class="material-icons">cloud_download</i>
+           </span>
+         </a>
+       </div>
+     </div>
   </div>
-	</div>
 </template>
 
 <script>
@@ -66,9 +69,6 @@ export default {
     },
   },
   methods: {
-    onLabelClick() {
-      this.$refs['low-filter'].checked = !this.$refs['low-filter'].checked;
-    },
     onCheck(checkbox) {
       const isChecked = checkbox.checked ? 1 : 0;
       this.$emit('lowStockChecked', isChecked);

diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/header/search.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/header/search.vue
@@ -123,7 +123,10 @@
     }
     .alert-box {
       padding-top: 28px;
-      z-index: -1;
+      z-index: 3;
+      position: fixed;
+      right: 5px;
+      top: 40px;
     }
     .search-form {
       width: calc(100% - 130px);

diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/header/stock-header.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/header/stock-header.vue
@@ -24,7 +24,7 @@
  *-->
 
 <template>
-  <div class="stock-header">
+  <div class="stock-header px-3">
     <Breadcrumb />
     <h1>{{trans('head_title')}}</h1>
     <Tabs />
@@ -46,9 +46,10 @@
 <style lang="sass" scoped>
   .stock-header {
     position: fixed;
-    top: 40px;
+    top: 39px;
     background: white;
     width: 100%;
     z-index: 3;
+    margin-left: -15px;
   }
 </style>
diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/movements/movement-line.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/movements/movement-line.vue
@@ -24,8 +24,9 @@
  *-->
 <template>
   <tr>
-    <td>
+    <td class="d-flex align-items-center">
       <PSMedia
+        class="d-flex align-items-center"
         :thumbnail="thumbnail"
       >
         <p>

diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/overview/product-line.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/overview/product-line.vue
@@ -24,15 +24,15 @@
  *-->
 <template>
   <tr :class="{'low-stock':lowStock}">
-    <td class="d-flex align-items-center pr-1">
+    <td class="d-flex align-items-center">
       <PSCheckbox
         :id="id"
         :ref="id"
         :model="product"
         @checked="productChecked"
       />
       <PSMedia
-        class="ml-1"
+        class="d-flex align-items-center ml-2"
         :thumbnail="thumbnail"
       >
         <p>
@@ -65,16 +65,16 @@
     <td class="text-sm-center" :class="{'stock-warning':lowStock}">
       {{ product.product_reserved_quantity }}
     </td>
-    <td class="text-sm-left pl-4" :class="{'stock-warning':lowStock}">
+    <td class="text-sm-center" :class="{'stock-warning':lowStock}">
       {{ product.product_available_quantity }}
       <span v-if="updatedQty" class="qty-update" :class="{'stock-warning':lowStock}">
         <i class="material-icons">trending_flat</i>
         {{availableQtyUpdated}}
       </span>
-      <span v-if="lowStock" class="stock-warning ico ml-4" data-toggle="pstooltip" data-placement="top" data-html="true" :title="lowStockLevel">!</span>
+      <span v-if="lowStock" class="stock-warning ico ml-2" data-toggle="pstooltip" data-placement="top" data-html="true" :title="lowStockLevel">!</span>
     </td>
-    <td class="qty-spinner">
-      <Spinner :product="product" class="pull-xs-right" @updateProductQty="updateProductQty" />
+    <td class="qty-spinner text-sm-right">
+      <Spinner :product="product" @updateProductQty="updateProductQty" />
     </td>
   </tr>
 </template>
@@ -171,7 +171,7 @@
   };
 </script>
 
-<style lang="sass" scoped>
+<style lang="sass" type="text/scss" scoped>
   @import "../../../../../../scss/config/_settings.scss";
   .qty-update {
     color: $brand-primary;

diff --git a/admin-dev/themes/new-theme/js/app/pages/stock/components/overview/products-actions.vue b/admin-dev/themes/new-theme/js/app/pages/stock/components/overview/products-actions.vue
@@ -35,15 +35,15 @@
         :isIndeterminate="isIndeterminate"
         @checked="bulkChecked"
       />
-      <div class="ml-1">
+      <div class="ml-2">
         <small>{{trans('title_bulk')}}</small>
         <PSNumber
           class="bulk-qty"
           :danger="danger"
           :value="bulkEditQty"
           :buttons="this.isFocused"
           @focus="focusIn"
-          @blur="focusOut"
+          @blur="focusOut($event)"
           @change="onChange"
           @keyup="onKeyUp"
         />
@@ -111,8 +111,8 @@
           EventBus.$emit('displayBulkAlert', 'error');
         }
       },
-      focusOut() {
-        this.isFocused = false;
+      focusOut(event) {
+        this.isFocused = $(event.target).hasClass('ps-number');
         this.danger = false;
       },
       bulkChecked(checkbox) {