Add selected state to theme
authorChloe Laisne <chloe.laisne@gmail.com>
Sun, 25 Sep 2016 22:43:38 +0200
changeset 293 eba7dac7f27b
parent 292 df030ddd4eca
child 294 f3dae62a0d8a
Add selected state to theme
cms/app-client/app/components/sorting-component.js
cms/app-client/app/styles/components/sorting-component.scss
cms/app-client/app/templates/components/sorting-component.hbs
--- a/cms/app-client/app/components/sorting-component.js	Sun Sep 25 22:35:12 2016 +0200
+++ b/cms/app-client/app/components/sorting-component.js	Sun Sep 25 22:43:38 2016 +0200
@@ -4,7 +4,7 @@
 
     classNames: ['sorting-component'],
 
-    filterService: Ember.inject.service('filter'),
+    filter: Ember.inject.service(),
 
     isAlphabetical: true,
     isPopularity: Ember.computed('isAlphabetical', function() { return !this.get('isAlphabetical'); }),
@@ -28,7 +28,7 @@
     actions: {
 
         setQueryParameters: function(id) {
-            this.get('filterService').set('theme', id);
+            this.get('filter').set('theme', id);
         },
 
         sortBy: function (type) {
--- a/cms/app-client/app/styles/components/sorting-component.scss	Sun Sep 25 22:35:12 2016 +0200
+++ b/cms/app-client/app/styles/components/sorting-component.scss	Sun Sep 25 22:43:38 2016 +0200
@@ -61,18 +61,23 @@
     padding: 0 5px;
 }
 
-.sorting-component div.tags ul li.not-popular{
+.sorting-component div.tags ul li.not-popular {
     font-size: 12px;
 }
 
-.sorting-component div.tags ul li.popular{
+.sorting-component div.tags ul li.popular {
     font-size: 16px;
 }
 
-.sorting-component div.tags ul li.very-popular{
+.sorting-component div.tags ul li.very-popular {
     font-size: 20px;
 }
 
+.sorting-component div.tags ul li.selected {
+    color: $medium-blue;
+    font-size: 20px
+}
+
 .sorting-component div.options ul li.active {
     font-weight: bold;
 }
--- a/cms/app-client/app/templates/components/sorting-component.hbs	Sun Sep 25 22:35:12 2016 +0200
+++ b/cms/app-client/app/templates/components/sorting-component.hbs	Sun Sep 25 22:43:38 2016 +0200
@@ -9,7 +9,7 @@
 <div class="tags{{if more " hasMore"}}">
     <ul>
     {{#each themes as |theme|}}
-        <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
+        <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}{{if (eq filter.theme theme.id) ' selected'}}">{{ theme.label }} ({{ theme.count }})</li>
     {{/each }}
     </ul>
     {{#if more}}<button class="more" {{ action 'loadMore' }}>Voir plus</button>{{/if}}