Merge ca64284 into 65bd4ae

coveo · Mar 27, 2017 · af22d65 · af22d65
2 parents 65bd4ae + ca64284
commit af22d65
Show file tree

Hide file tree

Showing 46 changed files with 12,275 additions and 130 deletions.
diff --git a/gulpTasks/templatesParser.js b/gulpTasks/templatesParser.js
@@ -43,7 +43,8 @@ function parseDirectory(directory, conditions) {
       path: path.dirname(path.relative(directory, template)),
       content: content,
       priority: condition != null ? condition.priority || 0 : -1,
-      layout: condition != null ? condition.layout : null
+      layout: condition != null ? condition.layout : null,
+      role: condition != null ? condition.role : null
     };
     buildRegisterTemplate(templateObj);
     buildTemplateHtml(templateObj);
@@ -62,7 +63,8 @@ function buildRegisterTemplate(template) {
           'condition': addToJsonIfNotNull(template, 'value'),
           'layout': addToJsonIfNotNull(template, 'layout'),
           'fieldsToMatch': addToJsonIfNotNull(template, 'fieldsToMatch'),
-          'mobile': addToJsonIfNotNull(template, 'mobile')
+          'mobile': addToJsonIfNotNull(template, 'mobile'),
+          'role': addToJsonIfNotNull(template, 'role')
         }) + '),'
         +
         (!template.subtemplate).toString(),
@@ -74,9 +76,9 @@ function buildTemplateHtml(template) {
   const cssClassName = 'result-template';
   const type = template.type == 'HtmlTemplate' ? 'text/html' : 'text/underscore';
   const layout = template.layout != null ? `data-layout="${template.layout}"` : '';
+  const role = template.role != null ? `data-role="${template.role}"`: '';
   let fieldsCondition = '';
   if (template.condition) {
-
     if (template.condition.fieldsToMatch) {
       template.condition.fieldsToMatch.forEach((fieldToMatch)=> {
         fieldsCondition += `data-field-${fieldToMatch.field}`;
@@ -88,7 +90,7 @@ function buildTemplateHtml(template) {
       });
     }
   }
-  template.html = `<script id="${template.name}" class="${cssClassName}" type="${type}" ${layout} ${fieldsCondition}>${template.content}</script>`
+  template.html = `<script id="${template.name}" class="${cssClassName}" type="${type}" ${layout} ${role} ${fieldsCondition}>${template.content}</script>`
 }
 
 function compileTemplates(directory, destination, fileName, conditions, done) {

diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@salesforce-ux/design-system": "2.0.3",
+    "bluebird": "^3.4.7",
     "@types/d3": "3.5.36",
     "@types/d3-scale": "1.0.4",
     "@types/fastclick": "^1.0.28",

diff --git a/pages/All.html b/pages/All.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
   <head>
     <title>All Content</title>
@@ -60,6 +60,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Chatter.html b/pages/Chatter.html
@@ -60,6 +60,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Dropbox.html b/pages/Dropbox.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>
@@ -59,6 +59,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/DynamicsCrm.html b/pages/DynamicsCrm.html
@@ -57,6 +57,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Email.html b/pages/Email.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>
@@ -63,6 +63,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/GoogleDrive.html b/pages/GoogleDrive.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>
@@ -63,6 +63,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Index.html b/pages/Index.html
@@ -57,6 +57,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Jira.html b/pages/Jira.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>
@@ -75,6 +75,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Lithium.html b/pages/Lithium.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>
@@ -60,6 +60,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/People.html b/pages/People.html
@@ -60,6 +60,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Recommendation.html b/pages/Recommendation.html
@@ -60,6 +60,7 @@
           <div class="CoveoErrorReport"></div>
           <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
           <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+          <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
           <div class="CoveoPager"></div>
           <div class="CoveoResultsPerPage"></div>
         </div>

diff --git a/pages/Salesforce.html b/pages/Salesforce.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>
@@ -63,6 +63,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/SalesforceCase.html b/pages/SalesforceCase.html
@@ -61,6 +61,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/SharePoint.html b/pages/SharePoint.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>
@@ -63,6 +63,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/pages/Slack.html b/pages/Slack.html
@@ -60,6 +60,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
       </div>
     </div>

diff --git a/pages/YouTube.html b/pages/YouTube.html
@@ -57,6 +57,7 @@
         <div class="CoveoErrorReport"></div>
         <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
+        <div class="CoveoResultList" data-layout="table" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
         <div class="CoveoPager"></div>
         <div class="CoveoLogo"></div>
         <div class="CoveoResultsPerPage"></div>

diff --git a/sass/_Result.scss b/sass/_Result.scss
@@ -205,16 +205,25 @@
 }
 
 .coveo-table-layout {
-  display: table;
-  border-collapse: collapse;
-  width: 100%;
-  margin-bottom: 20px;
-  > .CoveoResult {
-    display: table-row;
-    > * {
-      padding: .5em 0;
-      border-bottom: $default-border;
-    }
+  display: table-row;
+  td {
+    display: table-cell;
+    padding: 9px 15px;
+    white-space: nowrap;
+    border-bottom: $default-border;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  th {
+    text-align: left;
+    font-size: 12px;
+    color: $color-greyish-teal-blue;
+    font-weight: bold;
+    border-bottom: $default-border;
+    padding: 7px 15px;
+  }
+  &:hover td {
+    background-color: $color-blueish-white-grey;
   }
 }
 

diff --git a/sass/_ResultLayout.scss b/sass/_ResultLayout.scss
@@ -10,4 +10,7 @@
   .coveo-icon {
     margin-right: 5px;
   }
+  &.coveo-hidden {
+    display: none;
+  }
 }
diff --git a/sass/_ResultList.scss b/sass/_ResultList.scss
@@ -19,16 +19,43 @@
   &.coveo-hidden {
     display: none;
   }
+
+  &[data-layout="table"] {
+    overflow-x: auto;
+    margin-bottom: 20px;
+  }
 }
 
 .coveo-card-layout-container {
   @include display(flex);
   @include flex-wrap(wrap);
+  margin-right: -20px;
+  @include mediaSelector(480) {
+    margin-right: 0;
+  }
+}
+
+.coveo-table-layout-container {
+  display: table;
+  white-space: nowrap;
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.coveo-result-list-table-footer {
+  border-bottom: none;
 }
 
 @include mediaSelector(800) {
   .CoveoResultList {
     margin-left: 10px;
     margin-right: 10px;
   }
+  .coveo-table-layout-container {
+    table-layout: auto;
+    td {
+      max-width: 300px;
+    }
+  }
 }
diff --git a/sass/_Sort.scss b/sass/_Sort.scss
@@ -12,6 +12,9 @@ $stop-float: new-breakpoint(max-width 480px 1);
     position: relative;
     top: 2px;
     @extend .coveo-sprites-arrow-down;
+    &.coveo-hidden {
+      visibility: hidden;
+    }
   }
 
   &.coveo-ascending {
@@ -28,4 +31,11 @@ $stop-float: new-breakpoint(max-width 480px 1);
   &.coveo-sort-hidden {
     display: none;
   }
-}
+
+  &.coveo-table-header-sort {
+    text-transform: inherit;
+    padding-top: inherit;
+    padding-bottom: inherit;
+    display: table-cell;
+  }
+}
diff --git a/src/ui/ResponsiveComponents/ResponsiveComponentsManager.ts b/src/ui/ResponsiveComponents/ResponsiveComponentsManager.ts
@@ -2,9 +2,7 @@ import { $$, Dom } from '../../utils/Dom';
 import { InitializationEvents } from '../../events/InitializationEvents';
 import { Component } from '../Base/Component';
 import { SearchInterface } from '../SearchInterface/SearchInterface';
-import { ResponsiveComponentsUtils } from './ResponsiveComponentsUtils';
 import { Utils } from '../../utils/Utils';
-import { Facet } from '../Facet/Facet';
 import { Tab } from '../Tab/Tab';
 import { ResponsiveFacets } from './ResponsiveFacets';
 import { QueryEvents } from '../../events/QueryEvents';

diff --git a/src/ui/ResponsiveComponents/ResponsiveResultLayout.ts b/src/ui/ResponsiveComponents/ResponsiveResultLayout.ts
@@ -37,19 +37,19 @@ export class ResponsiveResultLayout implements IResponsiveComponent {
 
   public handleResizeEvent() {
     if (this.needSmallMode()) {
-      this.enableAndDisableLayout(<ValidLayout[]>this.resultLayout.options.mobileLayouts);
+      this.enableAndDisableLayouts(<ValidLayout[]>this.resultLayout.options.mobileLayouts);
     } else if (this.needMediumMode()) {
-      this.enableAndDisableLayout(<ValidLayout[]>this.resultLayout.options.tabletLayouts);
+      this.enableAndDisableLayouts(<ValidLayout[]>this.resultLayout.options.tabletLayouts);
     } else {
-      this.enableAndDisableLayout(<ValidLayout[]>this.resultLayout.options.desktopLayouts);
+      this.enableAndDisableLayouts(<ValidLayout[]>this.resultLayout.options.desktopLayouts);
     }
   }
 
-  private enableAndDisableLayout(validLayouts: ValidLayout[]) {
-    let needToDisable = _.difference<any>(ResultLayout.validLayouts, validLayouts);
-    let needToEnable = _.intersection<any>(ResultLayout.validLayouts, validLayouts);
-    this.resultLayout.disableLayouts(needToDisable);
-    this.resultLayout.enableLayouts(needToEnable);
+  private enableAndDisableLayouts(validLayouts: ValidLayout[]) {
+    const layoutsToDisable = _.difference<any>(ResultLayout.validLayouts, validLayouts);
+    const layoutsToEnable = _.intersection<any>(ResultLayout.validLayouts, validLayouts);
+    this.resultLayout.disableLayouts(layoutsToDisable);
+    this.resultLayout.enableLayouts(layoutsToEnable);
   }
 
   private needSmallMode(): boolean {