# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1466373501 -7200
# Node ID 64afd482ac7140e88754449797fcb06dc8ff26c7
# Parent  e1435b37301a3e9528f86eea90656532ceb5263a
/thematiques endpoint autocomplete design
basic application colors

diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/components/filtering-component.js
--- a/cms/app-client/app/components/filtering-component.js	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/components/filtering-component.js	Sun Jun 19 23:58:21 2016 +0200
@@ -2,24 +2,43 @@
 
 export default Ember.Component.extend({
 
+    classNames: ['filtering-component'],
+
+    isDropdownOpen: false,
+
     filter: '',
-
     filteredThemes: Ember.computed.filter('themes', function(item) {
-        return this.get('filter') && (item.get('label') || '').match(this.get('filter'));
+        return this.get('filter') && (item.get('label') || '').match(new RegExp('^' + this.get('filter')));
     }).property('filter'),
 
+    init: function() {
+        this._super(...arguments);
+        jQuery(window).on('click', this, Ember.run.bind(this, this.get('elementFocusOut')));
+    },
+
+    elementFocusOut: function(event) {
+        if(!$.contains(this.get('element'), event.target)) {
+            this.set('isDropdownOpen', false);
+        }
+    },
+
     actions: {
 
         setQueryParameters: function(id) {
             this.get('setQueryParameters')(id);
+            this.set('filter', '');
         },
 
-        filterBy: function(input) {
-            this.set('filter', input && new RegExp('^' + input));
-            this.get('filteredThemes');
+        focusIn: function() {
+            this.set('isDropdownOpen', true);
         }
 
+    },
+
+
+    didDestroyElement: function() {
+        this._super(...arguments);
+        jQuery(window).off('click', this.get('elementFocusOut'));
     }
 
-
 });
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/components/visu-carto.js
--- a/cms/app-client/app/components/visu-carto.js	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/components/visu-carto.js	Sun Jun 19 23:58:21 2016 +0200
@@ -37,34 +37,34 @@
         areas: [{
             id: "africa",
             linkToObject: worldDataProvider,
-            color: "#7CACAE",
+            color: "#373737",
             passZoomValuesToTarget: true
         }, {
             id: "asia",
             linkToObject: worldDataProvider,
-            color: "#fff",
+            color: "#515151",
             selectable: false,
             passZoomValuesToTarget: true
         }, {
             id: "australia",
             linkToObject: worldDataProvider,
-            color: "#fff",
+            color: "#6c6c6c",
             selectable: false,
             passZoomValuesToTarget: true
         }, {
             id: "europe",
             linkToObject: worldDataProvider,
-            color: "#2D7073",
+            color: "#888888",
             passZoomValuesToTarget: true
         }, {
             id: "north_america",
             linkToObject: worldDataProvider,
-            color: "#B0D1D3",
+            color: "#a2a2a2",
             passZoomValuesToTarget: true
         }, {
             id: "south_america",
             linkToObject: worldDataProvider,
-            color: "#fff",
+            color: "#f1f1f1",
             selectable: false,
             passZoomValuesToTarget: true
         }]
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/controllers/application.js
--- a/cms/app-client/app/controllers/application.js	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Sun Jun 19 23:58:21 2016 +0200
@@ -34,7 +34,7 @@
             return null;
         }
         Ember.$("div[id='" + this.get('currentId') + "']").toggleClass("playing", true);
-        return this.store.findRecord('document', this.get('currentId'));
+        return this.store.findRecord('document', this.get('currentId');
     }),
 
     modalItem: Ember.computed('detail', function() {
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Sun Jun 19 23:58:21 2016 +0200
@@ -1,3 +1,8 @@
+#corpus-app {
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
 #corpus-app {
   border: 1px solid;
   width: 1108px;
@@ -19,7 +24,30 @@
 }
 
 .corpus-app-container {
-    overflow: hidden;
+  background-color: #becfd4;
+  padding: 0 20px;
+  color: #687a84;
+}
+
+.corpus-app-wrapper {
+  background-color: #253946;
+}
+
+.corpus-app-container {
+overflow: hidden;
+display: block;
+width: 50%;
+height: 600px;
+float: left;
+border-top: none;
+}
+
+.corpus-app-wrapper {
+height: 600px;
+display : flex;
+flex-flow: column;
+border: none;
+padding: 0 0 0 10px;
 }
 
 .mapdiv{
@@ -30,25 +58,10 @@
 
 .corpus-app {
   @at-root {
-    @import 'container';
     @import 'player';
     @import 'results';
     @import 'modal';
 
-    &-container{
-      display: block;
-      width: 50%;
-      height: 600px;
-      float: left;
-      border-top: none;
-    }
-    &-wrapper{
-      height: 600px;
-      display : flex;
-      flex-flow: column;
-      border: none;
-      padding: 0 0 0 10px;
-    }
     &-player{
       flex: 0 1 auto;
       float: left;
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/styles/components/filtering-component.scss
--- a/cms/app-client/app/styles/components/filtering-component.scss	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/components/filtering-component.scss	Sun Jun 19 23:58:21 2016 +0200
@@ -1,3 +1,62 @@
-ul.filtering {
-	margin: 0;
+.filtering-component {
+    width: 250px;
+    margin: 15px auto;
+    position: relative;
+}
+
+.filtering-component > * {
+    width: 100%;
+    line-height: 24px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.filtering-component input {
+    border: none;
+    background-color: transparent;
+    border: 1px solid #ffffff;
+    font-family: sans-serif;
+    color: #25333e;
+    padding: 0 10px;
+}
+
+.filtering-component input::-webkit-input-placeholder {
+    color: #ffffff;
+    font-weight: normal;
+    font-size: 12px;
+}
+
+.filtering-component ul {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    list-style: none;
+    max-height: 400px;
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    overflow-y: scroll;
+}
+
+.filtering-component ul.open {
+    display: block;
+}
+
+.filtering-component ul li {
+    padding: 0 10px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.filtering-component ul li:hover {
+    background-color: rgba(190,207,212,.5);
+}
+
+
+.filtering-component ul li span {
+    margin-left: 5px;
+    font-weight: bold;
 }
\ No newline at end of file
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/styles/components/sorting-component.scss
--- a/cms/app-client/app/styles/components/sorting-component.scss	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/components/sorting-component.scss	Sun Jun 19 23:58:21 2016 +0200
@@ -1,54 +1,64 @@
 .sorting-component {
     position: relative;
-    height: calc(100% - 45px);
+    height: calc(100% - 55px);
 }
 
-ul.options,
-ul.tags {
+.sorting-component div.options {
+    text-align: right;
+    color: #25333e;
+}
+
+.sorting-component ul {
     list-style: none;
     padding: 0;
+    font-size: 0px;
 }
 
-ul.options {
+.sorting-component div.options ul {
     margin: 0;
     display: inline-block;
 }
 
-ul.tags {
+.sorting-component div.tags ul {
     text-align: justify;
     position: absolute;
     overflow-y: scroll;
+    margin: 15px 0;
+    top: 14px;
     bottom: 0px;
-    top: 18px;
-    margin: 10px 0;
 }
 
-ul.options li,
-ul.tags li {
+.sorting-component ul li {
+    font-size: 12px;
+}
+
+.sorting-component div.options ul li,
+.sorting-component div.tags ul li {
     display: inline;
     cursor: pointer;
 }
 
-ul.tags li {
+.sorting-component div.tags ul li {
     line-height: 24px;
 }
 
-ul.options li:not(:first-child)::before {
+.sorting-component div.options ul li:not(:first-child)::before {
     content: '|';
+    padding: 0 5px;
 }
 
-ul.tags li.not-popular{
-  font-size: 16px;
+.sorting-component div.tags ul li.not-popular{
+    font-size: 12px;
 }
 
-ul.tags li.popular{
-  font-size: 20px;
+.sorting-component div.tags ul li.popular{
+    font-size: 16px;
 }
 
-ul.tags li.very-popular{
-  font-size: 24px;
+.sorting-component div.tags ul li.very-popular{
+    font-size: 20px;
 }
 
-ul.options li.active {
+.sorting-component div.options ul li.active {
     font-weight: bold;
 }
\ No newline at end of file
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/styles/container.scss
--- a/cms/app-client/app/styles/container.scss	Wed Jun 15 11:10:20 2016 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,34 +0,0 @@
-&-em-tabs, &-em-tab-list, &-em-tab-panel {
-  display: block;
-}
-
-&-em-tab-list {
-  border-bottom: 1px solid #eee;
-  padding-left: 0;
-  margin-top: 0;
-}
-
-&-em-tab {
-  display: inline-block;
-  padding: 10px 10px;
-  border: 1px solid transparent;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  cursor: pointer;
-  margin-bottom: -1px;
-  position: relative;
-
-  a{
-    color: grey;
-    text-decoration: none;
-  }
-}
-
-&-em-tab.active {
-  border-color: #eee;
-  border-bottom-color: #fff;
-
-  a{
-    color: black;
-  }
-}
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/styles/tabs/carto.scss
--- a/cms/app-client/app/styles/tabs/carto.scss	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/tabs/carto.scss	Sun Jun 19 23:58:21 2016 +0200
@@ -1,5 +1,4 @@
 #mapdiv{
   width: 100%;
   height: 600px;
-  background: #eeeeee;
 }
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/styles/tabs/thematiques.scss
--- a/cms/app-client/app/styles/tabs/thematiques.scss	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/tabs/thematiques.scss	Sun Jun 19 23:58:21 2016 +0200
@@ -1,32 +0,0 @@
-input[type="text"] {
-  display: block;
-  margin: auto;
-  width: 250px;
-  font-family: sans-serif;
-  font-size: 18px;
-  appearance: none;
-  box-shadow: none;
-  border-radius: none;
-}
-input[type="text"]:focus {
-  outline: none;
-}
-
-.search-box{
-  display: block;
-    height: 100px;
-    width: 400px;
-    margin: 50px auto auto;
-}
-
-.search-box input[type="text"] {
-  padding: 10px;
-  border: none;
-  border-bottom: solid 2px #c9c9c9;
-  transition: border 0.3s;
-  outline: 30px solid #efefef;
-}
-.search-box input[type="text"]:focus,
-.search-box input[type="text"].focus {
-  border-bottom: solid 2px #969696;
-}
\ No newline at end of file
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/templates/components/filtering-component.hbs
--- a/cms/app-client/app/templates/components/filtering-component.hbs	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/templates/components/filtering-component.hbs	Sun Jun 19 23:58:21 2016 +0200
@@ -1,11 +1,9 @@
 {{yield}}
 
-{{ input type='text' key-up='filterBy' placeholder='Entrez une thématique'}}
+{{ input value=filter type='text' placeholder='Entrez une thématique' focus-in='focusIn'}}
 
-<ul id="filtering">
-
+<ul class="filters{{if isDropdownOpen ' open'}}">
     {{#each filteredThemes as |theme|}}
-    <li {{ action 'setQueryParameters' theme.id }}>{{ theme.label }} ({{ theme.count }})</li>
+    <li {{ action 'setQueryParameters' theme.id on='mouseUp'}}>{{ theme.label }}<span>({{ theme.count }})</span></li>
     {{/each}}
-
 </ul>
\ No newline at end of file
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/templates/components/sorting-component.hbs
--- a/cms/app-client/app/templates/components/sorting-component.hbs	Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/templates/components/sorting-component.hbs	Sun Jun 19 23:58:21 2016 +0200
@@ -1,24 +1,19 @@
 {{yield}}
 
-<div>
-
+<div class="options">
     Trier par :
-
-    <ul class="options">
+    <ul>
         <li {{ action 'sortBy' 'alphabetical' }} class="{{if isAlphabetical "active"}}">Ordre alphabétique</li>
         <li {{ action 'sortBy' 'popularity' }} class="{{if isPopularity "active"}}">Popularité</li>
     </ul>
-
 </div>
 
-<ul class="tags">
-
-    {{#each sortedThemes as |theme| }}
-        
-        {{#if theme.label}}
-        <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
-        {{/if}}
-    
-    {{/each }}
-
-</ul>
\ No newline at end of file
+<div class="tags">
+    <ul>
+        {{#each sortedThemes as |theme| }}
+            {{#if theme.label}}
+            <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
+            {{/if}}
+        {{/each }}
+    </ul>
+</div>
\ No newline at end of file
diff -r e1435b37301a -r 64afd482ac71 cms/app-client/app/templates/player.hbs
--- a/cms/app-client/app/templates/player.hbs	Wed Jun 15 11:10:20 2016 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,7 +0,0 @@
-<div class="corpus-app-content">
-
-  {{player-component action="changeDocument" document=currentItem}}
-
-  <p><strong>{{ currentItem.title }}</strong></p>
-  <p>{{doc-language url=currentItem.language}}</p>
-</div>