# HG changeset patch # User Chloe Laisne # Date 1466511870 -7200 # Node ID 7550cb541901cfb8c1a1cb5f569e8f88a13e8f20 # Parent 9d083636bd99b57bdb33290646ef76c45c362e2e Filter as a service Document list as a component Styling and cleanup diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/components/filter-component.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/components/filter-component.js Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,21 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + + classNames: ['filter-component'], + + filter: Ember.inject.service(), + + init: function() { + this._super(...arguments); + //console.log('component.filter', this.get('filter').get('date')); + }, + + actions: { + removeFilter: function(key, value) { + //console.log(key, value); + this.get('filter').set(key, value); + } + } + +}); diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/components/playlist-component.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/components/playlist-component.js Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,7 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + + classNames: ['playlist-component'] + +}); diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/controllers/application.js --- a/cms/app-client/app/controllers/application.js Mon Jun 20 17:04:59 2016 +0200 +++ b/cms/app-client/app/controllers/application.js Tue Jun 21 14:24:30 2016 +0200 @@ -3,11 +3,45 @@ export default Ember.Controller.extend({ queryParams: ['location', 'langue', 'discours', 'date', 'thematique', 'detail'], - location: null, - langue: null, + + filter: Ember.inject.service(), + + date: [], + setDateFilter: Ember.observer('date', function() { + this.get('filter').set('date', this.get('date')); + }), + setDate: Ember.observer('filter.date', function() { + this.set('date', this.get('filter').get('date')); + }), discours: null, - date: [], + setDiscoursFilter: Ember.observer('discours', function() { + this.get('filter').set('discours', this.get('discours')); + }), + setDiscours: Ember.observer('filter.discours', function() { + this.set('discours', this.get('filter').get('discours')); + }), + langue: null, + setLangueFilter: Ember.observer('langue', function() { + this.get('filter').set('langue', this.get('langue')); + }), + setLangue: Ember.observer('filter.langue', function() { + this.set('langue', this.get('filter').get('langue')); + }), + location: null, + setLocationFilter: Ember.observer('location', function() { + this.get('filter').set('location', this.get('location')); + }), + setLocation: Ember.observer('filter.location', function() { + this.set('location', this.get('filter').get('location')); + }), thematique: null, + setThematiqueFilter: Ember.observer('thematique', function() { + this.get('filter').set('thematique', this.get('thematique')); + }), + setThematique: Ember.observer('filter.thematique', function() { + this.set('thematique', this.get('filter').get('thematique')); + }), + detail: null, dateIntervals: Ember.computed('date', function() { @@ -41,7 +75,7 @@ return this.store.findRecord('document', this.get('detail')); }), - filteredDocuments: Ember.computed('location', 'langue', 'discours', 'date', 'thematique', 'model', function() { + filteredDocuments: Ember.computed('filter.location', 'filter.langue', 'filter.discours', 'filter.date', 'filter.thematique', 'model', function() { var location = this.get('location'); var langue = this.get('langue'); var discours = this.get('discours'); diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/styles/app.scss --- a/cms/app-client/app/styles/app.scss Mon Jun 20 17:04:59 2016 +0200 +++ b/cms/app-client/app/styles/app.scss Tue Jun 21 14:24:30 2016 +0200 @@ -1,3 +1,7 @@ +body { + background-color: #f5f5f5; +} + #corpus-app { font-family: sans-serif; font-size: 12px; @@ -21,6 +25,8 @@ @import 'components/sorting-component'; @import 'components/filtering-component'; + @import 'components/filter-component'; + @import 'components/playlist-component'; } h1, h2, h3, h4, h5, h6 { @@ -52,21 +58,22 @@ background-color: #253946; } +.corpus-app-container, +.corpus-app-wrapper { + box-sizing: border-box; + height: 600px; + width: 50%; +} + .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; + float: right; } .mapdiv{ @@ -75,20 +82,16 @@ height: 500px; } +.corpus-app-content { + background-color: #13212d; + overflow: hidden; + height: 80px; +} + .corpus-app { @at-root { @import 'player'; @import 'results'; @import 'modal'; - - &-player{ - flex: 0 1 auto; - float: left; - border-left: none; - border-top: none; - margin-bottom: 10px; - background-color: #eeeeee; - padding: 0 10px; - } } } diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/styles/components/filter-component.scss --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/styles/components/filter-component.scss Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,33 @@ +.filter-component { + padding: 15px; + background-color: #253946; +} + +.filter-component h2 { + +} + +.filter-component ul { + list-style: none; + padding: 0px; + margin: 15px 0px; + font-size: 0px; +} + +.filter-component ul li { + display: inline-block; + background-color: #becfd4; + border-radius: 4px; + font-size: 12px; + line-height: 24px; + padding: 0 10px; + margin-right: 10px; +} + +.filter-component ul li:last-child { + margin-right: 0px; +} + +.filter-component ul li span { + padding-left: 10px; +} \ No newline at end of file diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/styles/components/playlist-component.scss --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/styles/components/playlist-component.scss Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,66 @@ +.playlist-component { + background-color: #13212d; +} + +.playlist-component h2 { + line-height: 40px; + text-transform: none; + padding: 0px 20px; + text-align: left; +} + +.playlist-component ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0px; +} + +.playlist-component ul li { + padding: 15px; + font-size: 12px; + line-height: 20px; + border-bottom: 1px solid #859097; + background-color: #fbfbfb; + color: #59626b; +} + +.playlist-component ul li .tools { + float: right; +} + +.playlist-component ul li button, +.playlist-component ul li .play { + color: #878e94; + border: 2px solid #878e94; + cursor: pointer; +} + +.playlist-component ul li button { + background-color: transparent; +} + +.playlist-component ul li .play { + box-sizing: border-box; + border-radius: 100%; + width: 25px; + height: 25px; + line-height: 25px; + text-align: center; + display: block; + padding-left: 4px; +} + +.playlist-component ul li .title { + font-weight: bold; +} + +.playlist-component ul li .language { + display: block; +} + +.playlist-component ul li .language a { + text-transform: capitalize; + text-decoration: none; + color: inherit; +} \ No newline at end of file diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/styles/player.scss --- a/cms/app-client/app/styles/player.scss Mon Jun 20 17:04:59 2016 +0200 +++ b/cms/app-client/app/styles/player.scss Tue Jun 21 14:24:30 2016 +0200 @@ -1,5 +1,6 @@ .player-component{ text-align: center; + height: 80px; } #audio_player { @@ -9,16 +10,9 @@ position: relative; padding: 8px; margin: 10px auto; - background: #fff; border-radius: 88px; } -#audio_player .background { - width: 60px; - height: 60px; - border: solid 10px #e5e5e5; - background: #fff; - border-radius: 80px; -} + #audio_player .btn { cursor: pointer; } diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/styles/results.scss --- a/cms/app-client/app/styles/results.scss Mon Jun 20 17:04:59 2016 +0200 +++ b/cms/app-client/app/styles/results.scss Tue Jun 21 14:24:30 2016 +0200 @@ -47,41 +47,11 @@ padding: 5px 10px; } -.result-item { - margin-bottom: 1px; - min-height: 64px; - cursor: pointer; - padding: 5px; - overflow: hidden; - background-color: #fff; - border-bottom: 1px solid #eee; - color: #777; - transition: all 0.4s ease 0s; -} -.result-item:hover { - // box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75); -} -.result-item .hidden-elt { - display: none; -} -.result-item.show-more .hidden-elt{ - display: block; -} - -.result-item.show-more { +.playlist-component ul li.show-more { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin: 1rem 0rem; z-index: 200; - // height: inherit; -} - -.result-item .description{ - margin-top: 10px; -} - -.playing-indicator{ - color: #287288; } .result-item.playing .playing-indicator { diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/templates/application.hbs --- a/cms/app-client/app/templates/application.hbs Mon Jun 20 17:04:59 2016 +0200 +++ b/cms/app-client/app/templates/application.hbs Tue Jun 21 14:24:30 2016 +0200 @@ -1,17 +1,28 @@ -
-
- {{outlet}} -
- -
-
+
{{player-component action="changeDocument" document=currentItem}}

{{ currentItem.title }}

{{doc-language url=currentItem.language}}

- {{partial "results"}} + + +
+ +
+ +
+ {{outlet}} +
+ +
+ + {{filter-component}} + + {{playlist-component filteredDocuments=filteredDocuments}} + +
+
{{#if detail}} diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/templates/components/filter-component.hbs --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/templates/components/filter-component.hbs Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,20 @@ +

Filtres

+
    +{{#if filter.location}} +
  • {{filter.location}}✕
    • +{{/if}} +{{#if filter.langue}} +
  • {{filter.langue}}✕
    • +{{/if}} +{{#if filter.discours}} +
  • {{filter.discours}}✕
    • +{{/if}} +{{#if dateIntervals}} + {{#each dateIntervals as |item| }} +
  • {{interval item}}✕
    • + {{/each}} +{{/if}} +{{#if filter.thematique}} +
  • {{filter.thematique}}✕
    • +{{/if}} +
\ No newline at end of file diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/templates/components/player-component.hbs --- a/cms/app-client/app/templates/components/player-component.hbs Mon Jun 20 17:04:59 2016 +0200 +++ b/cms/app-client/app/templates/components/player-component.hbs Tue Jun 21 14:24:30 2016 +0200 @@ -2,7 +2,6 @@
Play -
diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/templates/components/playlist-component.hbs --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/app/templates/components/playlist-component.hbs Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,13 @@ +

Résultats

+
    + {{#each filteredDocuments as |item| }} +
  • +
    + ▶ + Notice +
    + {{ item.title }} + {{doc-language url=item.language class="language"}} +
    • + {{/each}} +
\ No newline at end of file diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/app/templates/results.hbs --- a/cms/app-client/app/templates/results.hbs Mon Jun 20 17:04:59 2016 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,33 +0,0 @@ -
-

- Filtres: - {{#if location}} - {{location}} - {{/if}} - {{#if langue}} - {{langue}} - {{/if}} - {{#if discours}} - {{discours}} - {{/if}} - {{#if dateIntervals}} - {{#each dateIntervals as |item| }} - {{interval item}} - {{/each}} - {{/if}} - {{#if thematique}} - {{thematique}} - {{/if}} -

-
- -
- {{#each filteredDocuments as |item| }} -
- - {{ item.title }} -
{{doc-language url=item.language}}
-
-
- {{/each}} -
diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/tests/integration/components/filter-component-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/integration/components/filter-component-test.js Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('filter-component', 'Integration | Component | filter component', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{filter-component}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#filter-component}} + template block text + {{/filter-component}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/tests/integration/components/playlist-component-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/integration/components/playlist-component-test.js Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('playlist-component', 'Integration | Component | playlist component', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{playlist-component}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#playlist-component}} + template block text + {{/playlist-component}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff -r 9d083636bd99 -r 7550cb541901 cms/app-client/tests/unit/services/filter-test.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/cms/app-client/tests/unit/services/filter-test.js Tue Jun 21 14:24:30 2016 +0200 @@ -0,0 +1,12 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('service:filter', 'Unit | Service | filter', { + // Specify the other units that are required for this test. + // needs: ['service:foo'] +}); + +// Replace this with your real tests. +test('it exists', function(assert) { + let service = this.subject(); + assert.ok(service); +});