feat(color): only use one color now

BREAKING CHANGES Cannot use the colors parameter anymore, color is the new one.
algolia · Apr 18, 2016 · 39545b5 · 39545b5
1 parent 50a07e4
commit 39545b5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 34 deletions.
diff --git a/app/css/index.scss b/app/css/index.scss
@@ -57,15 +57,15 @@
   border: 1px solid #d9d9d9;
   border-radius: 3px;
   background-color: #fff;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 0 0 #ccc, 0 2px 3px 0 #e6e6e6;
   font-size: 14px;
   padding: 24px;
 }
 
 .aa-article-hit--category {
   height: 24px;
   font-size: 18px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #e6e6e6;
   height: 18px;
   margin-bottom: 5px;
 }

diff --git a/app/src/AlgoliasearchZendeskHC.js b/app/src/AlgoliasearchZendeskHC.js
@@ -19,10 +19,7 @@ const optionsStructure = {required: true, type: 'Object', children: {
     hitsPerPage: {type: 'number', value: 5, validators: [hitsPerPageValidator]}
   }},
   baseUrl: {type: 'string', value: '/hc/'},
-  colors: {type: 'Object', value: {}, children: {
-    primary: {type: 'string', value: '#D4D4D4'},
-    secondary: {type: 'string', value: '#D4D4D4'}
-  }},
+  color: {type: 'string', value: '#158EC2'},
   indexPrefix: {type: 'string', value: 'zendesk_'},
   instantsearch: {type: 'Object', value: {}, children: {
     enabled: {type: 'boolean', value: true},

diff --git a/app/src/autocomplete.js b/app/src/autocomplete.js
@@ -36,7 +36,7 @@ class Autocomplete {
       inputSelector
     },
     baseUrl,
-    colors,
+    color,
     poweredBy,
     translations
   }) {
@@ -46,7 +46,7 @@ class Autocomplete {
 
     this.locale = require('./I18n.js').locale;
 
-    addCSS(templates.autocomplete.css.render({colors}));
+    addCSS(templates.autocomplete.css.render({color}));
     this.autocompletes = [];
 
     for (let i = 0; i < this.$inputs.length; ++i) {
@@ -84,7 +84,7 @@ class Autocomplete {
       let aa = autocomplete($input, {
         hint: false,
         debug: process.env.NODE_ENV === 'development',
-        templates: this._templates({colors, poweredBy, translations})
+        templates: this._templates({poweredBy, translations})
       }, [{
         source: this._source(params),
         name: 'articles',
@@ -149,10 +149,10 @@ class Autocomplete {
     return flattenedHits;
   }
 
-  _templates({colors, poweredBy, translations}) {
+  _templates({poweredBy, translations}) {
     let res = {};
     if (poweredBy === true) {
-      res.footer = templates.autocomplete.footer.render({colors, translations});
+      res.header = templates.autocomplete.poweredBy.render({translations});
     }
     return res;
   }

diff --git a/app/src/templates.js b/app/src/templates.js
@@ -2,18 +2,6 @@ import Hogan from 'hogan.js';
 
 export default {
   autocomplete: {
-    // Autocompletion template for a section
-    section: Hogan.compile(
-      `<div class="hit-section" style="border-bottom-color: {{colors.secondary}}">
-        <div class="title overflow-block-container">
-          <span class="overflow-block">
-            {{{ _highlightResult.category.title.value }}} > {{{ _highlightResult.title.value }}}
-          </span>
-          <small class="overflow-block text-muted">({{ nb_articles_text }})</small>
-        </div>
-        <div class="body">{{{ _highlightResult.body.value }}}</div>
-      </div>`),
-
     // Autocompletion template for an article
     article: Hogan.compile(
       `<div
@@ -46,7 +34,7 @@ export default {
       </div>`),
 
     // Powered By
-    footer: Hogan.compile(`<div class="aa-powered-by" style="border-top-color: {{colors.secondary}}">
+    poweredBy: Hogan.compile(`<div class="aa-powered-by">
       {{ translations.search_by }}
       <a
         href="https://www.algolia.com/?utm_source=zendesk_hc&utm_medium=link&utm_campaign=autocomplete"
@@ -56,22 +44,18 @@ export default {
       </a>
     </div>`),
 
-    // CSS to add to handle the colors
+    // CSS to add to handle the color
     css: Hogan.compile(`
       .aa-article-hit--highlight {
-        color: {{ colors.primary }};
+        color: {{ color }};
       }
 
       .aa-article-hit--highlight::before {
-        background-color: {{ colors.primary }};
+        background-color: {{ color }};
       }
 
       .aa-article-hit--category {
-        color: {{ colors.primary }};
-      }
-
-      .aa-article-hit--section, .aa-article-hit--content {
-        border-color: {{ colors.secondary }};
+        color: {{ color }};
       }
     `)
   },
@@ -93,10 +77,10 @@ export default {
     // Instant search result template
     hit: (`
 <div class="search-result">
-  <a class="search-result-link" href="{{baseUrl}}{{ locale.locale }}/articles/{{ id }}">
+  <a class="search-result-link" href="{{ baseUrl }}{{ locale.locale }}/articles/{{ id }}">
     {{{ _highlightResult.title.value }}}
   </a>
-  {{#vote_sum}}<span class="search-result-votes">{{ vote_sum }}</span>{{/vote_sum}}
+  {{# vote_sum }}<span class="search-result-votes">{{ vote_sum }}</span>{{/ vote_sum }}
   <div class="search-result-meta">
     <time data-datetime="relative" datetime="{{ created_at_iso }}"></time>
   </div>