From 543a65157f2e79aabc762b70d22ce103a74538a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maxime=20Bilo=C3=A9?= <maxime.biloe@gmail.com>
Date: Thu, 7 Sep 2017 16:52:57 +0200
Subject: [PATCH] BO: Fix translation page layout with new ui kit

---
 .../app/pages/translations/components/app.vue |  6 +--
 .../translations/components/header/search.vue | 42 ++++---------------
 .../components/header/translations-header.vue |  2 +-
 .../components/principal/index.vue            | 38 +++++++++--------
 .../principal/translation-input.vue           |  7 +++-
 .../translations/components/sidebar/index.vue |  4 +-
 .../new-theme/js/app/widgets/ps-button.vue    |  4 --
 .../js/app/widgets/ps-pagination.vue          |  2 +-
 .../js/app/widgets/ps-tree/ps-tree-item.vue   |  4 +-
 .../js/app/widgets/ps-tree/ps-tree.vue        |  2 +-
 .../new-theme/scss/config/_settings.scss      |  2 +-
 11 files changed, 44 insertions(+), 69 deletions(-)

diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/app.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/app.vue
index c3c1a04ae72ca..7d548f106068a 100644
--- a/admin-dev/themes/new-theme/js/app/pages/translations/components/app.vue
+++ b/admin-dev/themes/new-theme/js/app/pages/translations/components/app.vue
@@ -26,12 +26,12 @@
   <div v-if="isReady" id="app" class="translations-app">
     <TranslationsHeader />
     <div class="container-fluid">
-      <div class="row">
-        <div class="translations-summary float-xs-right">
+      <div class="row justify-content-between align-items-center">
+        <Search @search="onSearch" />
+        <div class="translations-summary">
           <span>{{ totalTranslations }}</span>
           <span v-show="totalMissingTranslations"> - <span class="missing">{{ totalMissingTranslationsString }}</span></span>
         </div>
-        <Search @search="onSearch" />
       </div>
 
       <div class="row">
diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/header/search.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/header/search.vue
index 4cc2352cb17f1..e0666f71e1707 100644
--- a/admin-dev/themes/new-theme/js/app/pages/translations/components/header/search.vue
+++ b/admin-dev/themes/new-theme/js/app/pages/translations/components/header/search.vue
@@ -23,15 +23,17 @@
  * International Registered Trademark & Property of PrestaShop SA
  *-->
 <template>
-  <div id="search" class="col-md-8 mb-2">
+  <div id="search" class="col-md-8 mb-4">
     <form class="search-form" @submit.prevent>
       <label>{{trans('search_label')}}</label>
-      <div class="search-group">
+      <div class="input-group">
         <PSTags ref="psTags" :tags="tags" @tagChange="onSearch" :placeholder="trans('search_placeholder')" />
-        <button type="button" class="btn btn-primary search-button" @click="onClick">
-          <i class="material-icons">search</i>
-          {{trans('button_search')}}
-        </button>
+        <div class="input-group-btn">
+          <button type="button" class="btn btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="material-icons">search</i>
+            {{trans('button_search')}}
+          </button>
+        </div>
       </div>
     </form>
   </div>
@@ -66,31 +68,3 @@
     },
   };
 </script>
-<style lang="sass?outputStyle=expanded">
-  @import "../../../../../../scss/config/_settings.scss";
-  #search {
-    .search-input {
-      box-shadow: none;
-      border: $gray-light 1px solid;
-      background-color: white;
-      min-height: 35px;
-      outline: none;
-      border-radius: 0;
-      overflow: hidden;
-      float: left;
-      width: 70%;
-    }
-  }
-  .search-form {
-    .search-group {
-      overflow: hidden;
-    }
-    .search-button {
-      float: left;
-      border-radius: 0;
-      height:35px;
-      position: absolute;
-      bottom: 0;
-    }
-  }
-</style>
diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/header/translations-header.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/header/translations-header.vue
index a7decd14f48f8..e714588733d96 100644
--- a/admin-dev/themes/new-theme/js/app/pages/translations/components/header/translations-header.vue
+++ b/admin-dev/themes/new-theme/js/app/pages/translations/components/header/translations-header.vue
@@ -46,7 +46,7 @@
     top: 40px;
     background: white;
     width: 100%;
-    z-index: 2;
+    z-index: 3;
     border-bottom: 1px solid $gray-light;
     height: 128px;
   }
diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/index.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/index.vue
index c4bb4fc675cb7..2e4a5f743e379 100644
--- a/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/index.vue
+++ b/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/index.vue
@@ -24,39 +24,39 @@
  *-->
 <template>
   <transition name="fade">
-    <div class="col-xs-9 card" v-if="principalReady">
-      <div class="pa-1 row translations-wrapper">
+    <div class="col-sm-9 card" v-if="principalReady">
+      <div class="p-3 translations-wrapper">
         <PSAlert v-if="noResult" alertType="ALERT_TYPE_WARNING" :hasClose="false">
           {{noResultInfo}}
         </PSAlert>
-        <div class="translations-catalog" v-else>
+        <div class="translations-catalog row p-0" v-else>
           <PSAlert v-if="searchActive" alertType="ALERT_TYPE_INFO" :hasClose="false">
             {{searchInfo}}
           </PSAlert>
-          <div class="col-xs-8 pt-1" >
-            <h1 class="domain-info">
+          <div class="col-sm-8 pt-3">
+            <h3 class="domain-info">
               <span>{{ currentDomain }}</span>
               <span>{{ currentDomainTotalTranslations }}</span>
               <span v-show="currentDomainTotalMissingTranslations"> - <span class="missing">{{ currentDomainTotalMissingTranslationsString }}</span></span>
-            </h1>
+            </h3>
           </div>
-          <div class="col-xs-4">
+          <div class="col-sm-4">
             <PSPagination
               :currentIndex="currentPagination"
               :pagesCount="pagesCount"
-              class="float-xs-right"
+              class="float-sm-right"
               @pageChanged="onPageChanged"
             />
           </div>
-          <form class="col-xs-12"
+          <form class="col-sm-12"
             method="post"
             :action="saveAction"
             :isEdited="isEdited"
             @submit.prevent="saveTranslations"
           >
             <div class="row">
-              <div class="col-xs-12 mb-2">
-                <PSButton :primary="true" type="submit" class="float-xs-right">
+              <div class="col-sm-12 mb-2">
+                <PSButton :primary="true" type="submit" class="float-sm-right">
                   {{ trans('button_save') }}
                 </PSButton>
               </div>
@@ -72,11 +72,16 @@
               @editedAction="isEdited"
               >
             </TranslationInput>
-            <PSButton :primary="true" type="submit" class="float-xs-right mt-3">
-              {{ trans('button_save') }}
-            </PSButton>
+
+            <div class="row">
+              <div class="col-sm-12">
+                <PSButton :primary="true" type="submit" class="float-sm-right mt-3">
+                  {{ trans('button_save') }}
+                </PSButton>
+              </div>
+            </div>
           </form>
-          <div class="col-xs-12">
+          <div class="col-sm-12">
             <PSPagination
               :currentIndex="currentPagination"
               :pagesCount="pagesCount"
@@ -268,9 +273,6 @@
 <style lang="sass" scoped>
   @import "../../../../../../scss/config/_settings.scss";
 
-  .domain-info {
-    font-size: 1rem;
-  }
   .fade-enter-active, .fade-leave-active {
     transition: opacity .5s
   }
diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/translation-input.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/translation-input.vue
index 00b553eb1ff27..6fd615816985c 100644
--- a/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/translation-input.vue
+++ b/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/translation-input.vue
@@ -26,10 +26,10 @@
   <div class="form-group">
     <label>{{label}}</label>
     <textarea class="form-control" rows="2" v-model="getTranslated" :class="{ missing : isMissing }"></textarea>
-    <PSButton class="mt-1 float-xs-right" :primary="false" ghost @click="resetTranslation">
+    <PSButton class="mt-3 float-sm-right" :primary="false" ghost @click="resetTranslation">
       {{ trans('button_reset') }}
     </PSButton>
-    <small class="mt-1">{{extraInfo}}</small>
+    <small class="mt-3">{{extraInfo}}</small>
   </div>
 </template>
 
@@ -90,6 +90,9 @@
 <style lang="sass" scoped>
   @import "../../../../../../scss/config/_settings.scss";
 
+  .form-group {
+    overflow: hidden;
+  }
   .missing {
     border: 1px solid $danger;
   }
diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/sidebar/index.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/sidebar/index.vue
index aace15ccc401a..444f3dd1082e1 100644
--- a/admin-dev/themes/new-theme/js/app/pages/translations/components/sidebar/index.vue
+++ b/admin-dev/themes/new-theme/js/app/pages/translations/components/sidebar/index.vue
@@ -23,8 +23,8 @@
  * International Registered Trademark & Property of PrestaShop SA
  *-->
 <template>
-  <div class="col-xs-3">
-    <div class="card pa-1">
+  <div class="col-sm-3">
+    <div class="card p-3">
       <PSTree
         ref="domainTree"
         :model="domainsTree"
diff --git a/admin-dev/themes/new-theme/js/app/widgets/ps-button.vue b/admin-dev/themes/new-theme/js/app/widgets/ps-button.vue
index e402bbebabc7b..eda0d26fe21f1 100644
--- a/admin-dev/themes/new-theme/js/app/widgets/ps-button.vue
+++ b/admin-dev/themes/new-theme/js/app/widgets/ps-button.vue
@@ -53,10 +53,6 @@
 
 <style lang="sass" scoped>
   @import "../../../scss/config/_settings.scss";
-  .btn {
-    border-radius:0;
-    min-height: 34px;
-  }
   .btn-secondary {
     background-color: $gray-medium;
     border: none;
diff --git a/admin-dev/themes/new-theme/js/app/widgets/ps-pagination.vue b/admin-dev/themes/new-theme/js/app/widgets/ps-pagination.vue
index 43813610080ac..c44f6586d32a0 100644
--- a/admin-dev/themes/new-theme/js/app/widgets/ps-pagination.vue
+++ b/admin-dev/themes/new-theme/js/app/widgets/ps-pagination.vue
@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *-->
 <template>
-  <nav class="float-xs-right mt-1" v-if="displayPagination">
+  <nav class="float-sm-right mt-1" v-if="displayPagination">
     <ul class="pagination" :class="{'multi':isMultiPagination}">
       <li v-if="isMultiPagination" class="page-item">
         <button v-show="activeLeftArrow" class="float-left page-link" @click="prev($event)">
diff --git a/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree-item.vue b/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree-item.vue
index 6d67ff80f841e..8d0ed19a2e9ae 100644
--- a/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree-item.vue
+++ b/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree-item.vue
@@ -31,8 +31,8 @@
       </div>
       <PSCheckbox :ref="model.name" :id="id" :model="model" @checked="onCheck" v-if="hasCheckbox"/>
       <span class="tree-label" :class="{warning: isWarning}">{{model.name}}</span>
-      <span class="tree-extra-label hidden-lg-down" v-if="displayExtraLabel">{{getExtraLabel}}</span>
-      <span class="tree-extra-label-mini hidden-xl-up" v-if="displayExtraLabel">{{this.model.extraLabel}}</span>
+      <span class="tree-extra-label d-sm-none d-xl-inline-block" v-if="displayExtraLabel">{{getExtraLabel}}</span>
+      <span class="tree-extra-label-mini d-xl-none" v-if="displayExtraLabel">{{this.model.extraLabel}}</span>
     </div>
     <ul v-show="open" v-if="isFolder" class="tree">
       <li v-for="(element, index) in model.children" class="tree-item" :class="{disable: model.disable}">
diff --git a/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree.vue b/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree.vue
index 7c3f94bd24426..d5ee4a4d73f82 100644
--- a/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree.vue
+++ b/admin-dev/themes/new-theme/js/app/widgets/ps-tree/ps-tree.vue
@@ -24,7 +24,7 @@
  *-->
 <template>
   <div>
-    <div class="mb-1 tree-header">
+    <div class="mb-3 tree-header">
       <span class="text-uppercase pointer" @click="expand">
         <i class="material-icons">keyboard_arrow_down</i>
         <strong v-if="translations">{{translations.expand}}</strong>
diff --git a/admin-dev/themes/new-theme/scss/config/_settings.scss b/admin-dev/themes/new-theme/scss/config/_settings.scss
index 8a2ce53ffe4c7..3a5a663976f7e 100644
--- a/admin-dev/themes/new-theme/scss/config/_settings.scss
+++ b/admin-dev/themes/new-theme/scss/config/_settings.scss
@@ -20,7 +20,7 @@ $size-header-toolbar-height: 6.25rem;
 
 $grid-gutter-width: 1.875rem !default;
 
-$border-radius: .25rem !default;
+$border-radius: 0;
 
 //UI Kit variables - to be removed
 $gray-soft: #FAFBFC;