--- /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);
+ }
+ }
+
+});
--- /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']
+
+});
--- 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');
--- 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;
- }
}
}
--- /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
--- /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
--- 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;
}
--- 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 {
--- 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 @@
-<div id="info-modal"></div>
-<div class="corpus-app-container">
- {{outlet}}
-</div>
-
-<div class="corpus-app-wrapper">
- <div class="corpus-app-player">
+<div class="corpus-app-player">
<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>
</div>
- {{partial "results"}}
+
+
+<div id="info-modal"></div>
+
+<div>
+
+ <div class="corpus-app-container">
+ {{outlet}}
+ </div>
+
+ <div class="corpus-app-wrapper">
+
+ {{filter-component}}
+
+ {{playlist-component filteredDocuments=filteredDocuments}}
+
+ </div>
+
</div>
{{#if detail}}
--- /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 @@
+<h2>Filtres</h2>
+<ul>
+{{#if filter.location}}
+ <li class="filter location">{{filter.location}}<span{{action 'removeFilter' 'location'}}>✕</span></li>
+{{/if}}
+{{#if filter.langue}}
+ <li class="filter langue">{{filter.langue}}<span{{action 'removeFilter' 'langue'}}>✕</span></li>
+{{/if}}
+{{#if filter.discours}}
+<li class="filter discours">{{filter.discours}}<span{{action 'removeFilter' 'discours'}}>✕</span></li>
+{{/if}}
+{{#if dateIntervals}}
+ {{#each dateIntervals as |item| }}
+ <li class="filter date" data-dates="{{item}}">{{interval item}}<span{{action 'removeFilter' 'date' item }}>✕</span></li>
+ {{/each}}
+{{/if}}
+{{#if filter.thematique}}
+ <li class="filter thematique">{{filter.thematique}}<span{{action 'removeFilter' 'thematique'}}>✕</span></li>
+{{/if}}
+</ul>
\ No newline at end of file
--- 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 @@
<span class="audio-controls fa fa-backward" {{action 'prevNextDocument' 'previous'}}></span>
<div id="audio_player">
<span id="action_play" class="btn btn_play" {{action 'tooglePlay'}}>Play</span>
- <div class="background"></div>
<div class="progress">
<div class="slice">
<div class="pie"></div>
--- /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 @@
+<h2>Résultats</h2>
+<ul>
+ {{#each filteredDocuments as |item| }}
+ <li id="{{item.id}}">
+ <div class="tools">
+ <span class="play playing-indicator" {{action 'play' item}}>▶</span>
+ <button{{action 'openNotice' item}}>Notice</button>
+ </div>
+ <span class="title">{{ item.title }}</span>
+ {{doc-language url=item.language class="language"}}
+ </li>
+ {{/each}}
+</ul>
\ No newline at end of file
--- 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 @@
-<div class="result-header">
- <p>
- Filtres:
- {{#if location}}
- <span class="filters location">{{location}}<span class="fa fa-times" {{action 'deleteTag' 'location'}}></span></span>
- {{/if}}
- {{#if langue}}
- <span class="filters langue">{{langue}}<span class="fa fa-times" {{action 'deleteTag' 'langue'}}></span></span>
- {{/if}}
- {{#if discours}}
- <span class="filters discours">{{discours}}<span class="fa fa-times" {{action 'deleteTag' 'discours'}}></span></span>
- {{/if}}
- {{#if dateIntervals}}
- {{#each dateIntervals as |item| }}
- <span class="filters date" data-dates="{{item}}">{{interval item}}<span class="fa fa-times" {{action 'deleteTag' 'date' item }}></span></span>
- {{/each}}
- {{/if}}
- {{#if thematique}}
- <span class="filters thematique">{{thematique}}<span class="fa fa-times" {{action 'deleteTag' 'thematique'}}></span></span>
- {{/if}}
- </p>
-</div>
-
-<div class='result-list'>
- {{#each filteredDocuments as |item| }}
- <div id="{{item.id}}" {{action "showMore" item}} class='result-item'>
- <span class="playing-indicator fa fa-play-circle fa-lg fa-fw pull-right" {{action 'play' item}}></span>
- <strong>{{ item.title }}</strong>
- <div class="description">{{doc-language url=item.language}}</div>
- <div class="hidden-elt"><button class="pull-right" {{action 'toggleModal' item}}>Details</button></div>
- </div>
- {{/each}}
-</div>
--- /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');
+});
--- /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');
+});
--- /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);
+});