correction, change colors for discourse categories, add loding spinner
authorymh <ymh.work@gmail.com>
Tue, 08 Nov 2016 15:48:01 +0100
changeset 404 0a5eef6ad2fe
parent 403 cbd92ebb8c67
child 405 f239c8c5bb94
correction, change colors for discourse categories, add loding spinner
cms/app-client/app/components/discourses-component.js
cms/app-client/app/components/playlist-component.js
cms/app-client/app/controllers/application.js
cms/app-client/app/routes/application.js
cms/app-client/app/services/constants.js
cms/app-client/app/styles/components/player-component.scss
cms/app-client/app/styles/components/playlist-component.scss
cms/app-client/app/templates/application.hbs
cms/app-client/app/templates/components/player-component.hbs
cms/app-client/app/templates/components/playlist-component.hbs
cms/app-client/app/templates/loading.hbs
--- a/cms/app-client/app/components/discourses-component.js	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/components/discourses-component.js	Tue Nov 08 15:48:01 2016 +0100
@@ -24,7 +24,7 @@
     didRender: function() {
         var self = this;
         var baseURL = (ENV.APP.backRootURL || ENV.rootURL).replace(/\/$/,"")+'/api/v1/stats';
-        var url = URI(baseURL+"/stats/discourses").search(this.get('filter').get('queryParamsValuesURI'));
+        var url = URI(baseURL+"/discourses").search(this.get('filter').get('queryParamsValuesURI'));
 
         d3.json(url.href(), function(data) {
             var discourses = data['discourses'];
--- a/cms/app-client/app/components/playlist-component.js	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/components/playlist-component.js	Tue Nov 08 15:48:01 2016 +0100
@@ -7,6 +7,8 @@
     filter: Ember.inject.service(),
     player: Ember.inject.service(),
 
+    isLoading: false,
+
     model: [],
     documents: Ember.computed('model', 'filter.location', 'filter.language', 'filter.discourse', 'filter.date', 'filter.theme', function() {
         return this.get('model');
--- a/cms/app-client/app/controllers/application.js	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/controllers/application.js	Tue Nov 08 15:48:01 2016 +0100
@@ -7,6 +7,8 @@
     filter: Ember.inject.service(),
     constants: Ember.inject.service(),
 
+    isLoading: false,
+
     page: 1,
     limit: Ember.computed(function() {
       return this.get('constants').DOCUMENTS_PAGINATION_PERPAGE;
--- a/cms/app-client/app/routes/application.js	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/routes/application.js	Tue Nov 08 15:48:01 2016 +0100
@@ -64,6 +64,13 @@
     }),
 
     actions: {
+        loading(transition) {
+          let controller = this.controllerFor('application');
+          controller.set('isLoading', true);
+          transition.promise.finally(function() {
+              controller.set('isLoading', false);
+          });
+        },
 
         didTransition: function() {
             // Append body classname depending on the route
--- a/cms/app-client/app/services/constants.js	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/services/constants.js	Tue Nov 08 15:48:01 2016 +0100
@@ -61,20 +61,20 @@
 
 const DISCOURSE_CATEGORY_VALUES = {
   "cat1": {
-    "fill": "#777777",
-    "stroke": "#777777"
+    "fill": "#4FC1FE",
+    "stroke": "#4FC1FE"
   },
   "cat2": {
-    "fill": "#606060",
-    "stroke": "#606060"
+    "fill": "#0AA9FF",
+    "stroke": "#0AA9FF"
   },
   "cat3": {
-    "fill": "#4A4A4A",
-    "stroke": "#4A4A4A"
+    "fill": "#005684",
+    "stroke": "#005684"
   },
   "cat4":{
-    "fill": "#333333",
-    "stroke": "#333333"
+    "fill": "#01283E",
+    "stroke": "#01283E"
   }
 };
 
--- a/cms/app-client/app/styles/components/player-component.scss	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/styles/components/player-component.scss	Tue Nov 08 15:48:01 2016 +0100
@@ -224,3 +224,7 @@
 .player-component #audio .controls.extra i.fa-compress::before {
     font-size: 19px;
 }
+
+.player-component .player-language-list span {
+    display: inline;
+}
--- a/cms/app-client/app/styles/components/playlist-component.scss	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Tue Nov 08 15:48:01 2016 +0100
@@ -116,7 +116,7 @@
     border-radius: 100%;
     width: 22px;
     margin-left: 10px;
-    
+
 }
 
 .playlist-component ul li button,
@@ -218,7 +218,7 @@
 }
 
 .playlist-component ul li .fa-text-height {
-    
+
 }
 
 .playlist-component ul li .fa-text-height::before {
@@ -234,4 +234,8 @@
     pointer-events: none;
     cursor: default;
     color: inherit;
-}
\ No newline at end of file
+}
+
+.playlist-component .document-spinner {
+    margin-left: 1em;
+}
--- a/cms/app-client/app/templates/application.hbs	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/templates/application.hbs	Tue Nov 08 15:48:01 2016 +0100
@@ -19,7 +19,7 @@
 
     <div class="corpus-app-wrapper">
         {{ filter-component }}
-        {{ playlist-component model=model page=page limit=limit pageAction='setPageQueryparams' }}
+        {{ playlist-component model=model page=page limit=limit pageAction='setPageQueryparams' isLoading=isLoading }}
     </div>
 
 </div>
\ No newline at end of file
--- a/cms/app-client/app/templates/components/player-component.hbs	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/templates/components/player-component.hbs	Tue Nov 08 15:48:01 2016 +0100
@@ -1,47 +1,49 @@
 <div id="audio" class="{{if (if-or player.transcript player.model.video) ' extra'}}{{if (if-and player.transcript player.model.video) ' multiple'}}">
-	<div class="controls">
-		<i title="Précédent" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Précédent</i>
-		{{#if player.playing}}
-		<i title="Pause" class="fa fa-pause" {{action 'toggle'}}>Pause</i>
-		{{else}}
-		<i title="Lecture" class="fa fa-play" {{action 'toggle'}}>Lecture</i>
-		{{/if}}
-		<i title="Suivant" class="fa fa-forward{{if isLast ' disabled'}}" {{action 'forward'}}>Suivant</i>
-	</div>
-	<div class="progress">
-		<span class="head">{{to-minutes head}}</span>
-		<span class="bar" onclick={{action 'setTime'}}><span class="value"></span></span>
-		<span class="remaining">- {{to-minutes remaining}}</span>
-	</div>
-	<div class="controls extra">
-	{{#if player.model.video}}
-		{{#if player.videoscreen}}
-		<i title="Compress" class="fa fa-compress" {{action 'display' 'video'}}>Hide video</i>
-		{{else}}
-		<i title="Expand" class="fa fa-expand" {{action 'display' 'video'}}>Show video</i>
-		{{/if}}
-	{{/if}}
-	{{#if player.transcript}}
-		<i title="Transcript" class="fa fa-text-height{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
-	{{/if}}
-	</div>
-	<div class="meta">
-		<p>
-			<span title="{{ item.title }}" class="title"><span>{{ item.title }}</span></span>
-      		{{#each item.languages as |lang index|}}{{if index ", "}}{{doc-language url=lang class="language"}}{{/each}}
-		</p>
-		<p>
-			<span title="{{item.publishers_disp}}" class="author"><span>{{item.publishers_disp}}</span></span>
-			<span class="date">{{short-date item.issued}}</span>
-		</p>
-	</div>
+  <div class="controls">
+    <i title="Précédent" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Précédent</i>
+    {{#if player.playing}}
+    <i title="Pause" class="fa fa-pause" {{action 'toggle'}}>Pause</i>
+    {{else}}
+    <i title="Lecture" class="fa fa-play" {{action 'toggle'}}>Lecture</i>
+    {{/if}}
+    <i title="Suivant" class="fa fa-forward{{if isLast ' disabled'}}" {{action 'forward'}}>Suivant</i>
+  </div>
+  <div class="progress">
+    <span class="head">{{to-minutes head}}</span>
+    <span class="bar" onclick={{action 'setTime'}}><span class="value"></span></span>
+    <span class="remaining">- {{to-minutes remaining}}</span>
+  </div>
+  <div class="controls extra">
+  {{#if player.model.video}}
+    {{#if player.videoscreen}}
+    <i title="Compress" class="fa fa-compress" {{action 'display' 'video'}}>Hide video</i>
+    {{else}}
+    <i title="Expand" class="fa fa-expand" {{action 'display' 'video'}}>Show video</i>
+    {{/if}}
+  {{/if}}
+  {{#if player.transcript}}
+    <i title="Transcript" class="fa fa-text-height{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
+  {{/if}}
+  </div>
+  <div class="meta">
+    <p>
+      <span title="{{ item.title }}" class="title"><span>{{ item.title }}</span></span>
+      <div class="player-language-list">
+          {{#each item.languages as |lang index|}}{{if index ", "}}{{doc-language url=lang class="language"}}{{/each}}
+      </div>
+    </p>
+    <p>
+      <span title="{{item.publishers_disp}}" class="author"><span>{{item.publishers_disp}}</span></span>
+      <span class="date">{{short-date item.issued}}</span>
+    </p>
+  </div>
 </div>
 
 <div id="video">
-	<video id="popcorn-audio">
-		{{#each player.model.media as |medium|}}
-		<source src="{{ medium.url }}" type="{{ medium.format }}">
-		{{/each}}
-	Your browser does not support the audio element.
-	</video>
+  <video id="popcorn-audio">
+    {{#each player.model.media as |medium|}}
+    <source src="{{ medium.url }}" type="{{ medium.format }}">
+    {{/each}}
+  Your browser does not support the audio element.
+  </video>
 </div>
\ No newline at end of file
--- a/cms/app-client/app/templates/components/playlist-component.hbs	Tue Nov 08 14:20:57 2016 +0100
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Tue Nov 08 15:48:01 2016 +0100
@@ -1,5 +1,5 @@
 <div class="header">
-    <h2>Résultat <span class="count">({{ model.meta.total }})</span></h2>
+    <h2>Résultat <span class="count">({{ model.meta.total }})</span>{{#if isLoading}}<span class="document-spinner"><i class="fa fa-circle-o-notch fa-spin"></i></span>{{/if}}</h2>
     <div class="pagination">
         <i class="fa fa-step-backward{{if (eq model.meta.prev_page_url null) ' disabled'}}" {{action 'previous'}}></i>
         <span>{{page}} sur {{model.meta.last_page}}</span>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/loading.hbs	Tue Nov 08 15:48:01 2016 +0100
@@ -0,0 +1,1 @@
+<i class="fa fa-circle-o-notch" style="font-size:48px"></i>
\ No newline at end of file