Merge c234cc1 into 00d9f3c

coveo · Apr 18, 2017 · 98a44e8 · 98a44e8
2 parents 00d9f3c + c234cc1
commit 98a44e8
Show file tree

Hide file tree

Showing 39 changed files with 488 additions and 140 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>

diff --git a/pages/Dropbox.html b/pages/Dropbox.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>

diff --git a/pages/Email.html b/pages/Email.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>

diff --git a/pages/GoogleDrive.html b/pages/GoogleDrive.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>

diff --git a/pages/Jira.html b/pages/Jira.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>

diff --git a/pages/Lithium.html b/pages/Lithium.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>

diff --git a/pages/Salesforce.html b/pages/Salesforce.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>

diff --git a/pages/SharePoint.html b/pages/SharePoint.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
   <head>

diff --git a/sass/_Result.scss b/sass/_Result.scss
@@ -196,7 +196,7 @@
     }
   }
   // These divs are used for filling the space when the number of cards is not even
-  > div:empty {
+  &:empty {
     width: 300px;
     height: 0;
     @include flex-grow(1);
@@ -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,17 @@ $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;
+  }
+}
+
+.coveo-result-list-table-header .CoveoSort:not(.coveo-selected) {
+  .coveo-icon {
+    visibility: hidden;
+  }
 }
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 {

diff --git a/src/ui/ResultLayout/ResultLayout.ts b/src/ui/ResultLayout/ResultLayout.ts
@@ -137,7 +137,6 @@ export class ResultLayout extends Component {
     Assert.check(this.isLayoutDisplayedByButton(layout), 'Layout not available or invalid');
 
     if (layout !== this.currentLayout || this.getModelValue() === '') {
-
       this.setModelValue(layout);
       const lastResults = this.queryController.getLastResults();
       this.setLayout(layout, lastResults);
@@ -164,13 +163,12 @@ export class ResultLayout extends Component {
 
   public disableLayouts(layouts: ValidLayout[]) {
     if (Utils.isNonEmptyArray(layouts)) {
-      _.each(layouts, (layout) => {
-        this.disableLayout(layout);
-      });
+      _.each(layouts, layout => this.disableLayout(layout));
 
       let remainingValidLayouts = _.difference(_.keys(this.currentActiveLayouts), layouts);
-      if (remainingValidLayouts && remainingValidLayouts[0]) {
-        this.changeLayout(<ValidLayout>remainingValidLayouts[0]);
+      if (!_.isEmpty(remainingValidLayouts)) {
+        const newLayout = _.contains(remainingValidLayouts, this.currentLayout) ? this.currentLayout : remainingValidLayouts[0];
+        this.changeLayout(<ValidLayout>newLayout);
       } else {
         this.logger.error('Cannot disable the last valid layout ... Re-enabling the first one possible');
         let firstPossibleValidLayout = <ValidLayout>_.keys(this.currentActiveLayouts)[0];
@@ -199,11 +197,10 @@ export class ResultLayout extends Component {
     }
   }
 
-
   private hideButton(layout: ValidLayout) {
     if (this.isLayoutDisplayedByButton(layout)) {
       let btn = this.currentActiveLayouts[<string>layout].button;
-      $$(btn.el).hide();
+      $$(btn.el).addClass('coveo-hidden');
       btn.visible = false;
       this.updateSelectorAppearance();
     }
@@ -212,7 +209,7 @@ export class ResultLayout extends Component {
   private showButton(layout: ValidLayout) {
     if (this.isLayoutDisplayedByButton(layout)) {
       let btn = this.currentActiveLayouts[<string>layout].button;
-      $$(btn.el).show();
+      $$(btn.el).removeClass('coveo-hidden');
       btn.visible = true;
     }
   }