Ticket #116: Better display of recent activities

Caio Almeida
1 parent 011ca4fd
Showing 6 changed files with 80 additions and 9 deletions Show diff stats
src/app/layout/blocks/recent-activities-plugin-activities/activities/event.html
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component.ts
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.html
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.scss
src/languages/en.json
src/languages/pt.json
@@ -0,0 +1,3 @@
+<img ng-src="{{activity.params.first_image}}" ng-attr-alt="{{activity.params.name}}" class="event-image" />
+<p class="event-description"><b>{{activity.params.name}}</b><br />{{activity.params.lead | stripTags}}</p>
+<br style="clear: both;" />
@@ -18,7 +18,12 @@ export class RecentActivitiesPluginActivitiesBlockComponent {
     constructor(private blockService: BlockService, private $state: any) { }
     getActivityTemplate(activity: any) {
-        return 'app/layout/blocks/recent-activities-plugin-activities/activities/' + activity.verb + '.html';
+        if (activity.label === 'events') {
+          return 'app/layout/blocks/recent-activities-plugin-activities/activities/event.html';
+        }
+        else {
+          return 'app/layout/blocks/recent-activities-plugin-activities/activities/' + activity.verb + '.html';
+        }
     }
     urlFor(params: any) {
 <div class="deckgrid recent-activities-block">
   <div ng-repeat="activity in ctrl.activities" class="a-card panel media">
+
+    <div class="subheader">
+      <p ng-if="activity.label === 'events'">
+      {{ 'activities.event.description' | translate }} <b>{{ activity.start_date | date:longDate }}</b> {{ 'time.at' | translate }} {{ activity.start_date | date:'HH:mm' }} - <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a> <span class="activity-label">{{activity.label}}</span>
+      </p>
+
+      <p ng-if="activity.label !== 'events'">
+      {{ 'date.on' | translate }} <b>{{ activity.created_at | date:longDate }}</b> {{ 'time.at' | translate }} {{ activity.created_at | date:'HH:mm' }} - <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a> <span class="activity-label">{{activity.label}}</span>
+      </p>
+    </div>
+
     <div class="header media-body">
       <h5 class="title media-heading">
-        <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a>&nbsp;<ng-include src="ctrl.getActivityTemplate(activity)"></ng-include>
+        <ng-include src="ctrl.getActivityTemplate(activity)"></ng-include>
       </h5>
     </div>
-    <div class="subheader">
-      <span class="time">
-        <i class="fa fa-clock-o"></i> <span am-time-ago="activity.created_at | dateFormat"></span>
-      </span>
-    </div>
+
+    <hr />
   </div>
 </div>
@@ -20,4 +20,53 @@
       display: none;
     }
   }
+
+  .panel {
+    margin-bottom: 15px;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  h5 {
+    text-transform: capitalize;
+  }
+
+  .subheader {
+    p {
+      margin: 2px 0;
+      font-size: 11px;
+    }
+  }
+
+  hr {
+    border: 0;
+    height: 1px;
+    background: #ccc;
+    margin: 0;
+    margin-top: 15px;
+  }
+
+  .activity-label {
+    @include border-radius(2px);
+    font-size: 11px;
+    text-transform: capitalize;
+    background: #333;
+    color: #fff;
+    padding: 2px;
+    margin-left: 5px;
+    display: inline-block;
+  }
+
+  .event-image {
+    width: 15%;
+    height: auto;
+    float: left;
+  }
+
+  .event-description {
+    width: 83%;
+    margin: 2px 0 0 2px;
+    float: left;
+    display: block;
+  }
 }
@@ -97,5 +97,8 @@
   "block.edition.display_user.all": "All users",
   "block.edition.display_user.logged": "Logged",
   "block.edition.display_user.not_logged": "Not logged",
-  "block.edition.language.label": "Show for:"
+  "block.edition.language.label": "Show for:",
+  "activities.event.description": "Event on",
+  "time.at": "at",
+  "date.on": "On"
 }
@@ -97,5 +97,8 @@
   "block.edition.display_user.all": "Todos os usuários",
   "block.edition.display_user.logged": "Logados",
   "block.edition.display_user.not_logged": "Não logados",
-  "block.edition.language.label": "Exibir para:"
+  "block.edition.language.label": "Exibir para:",
+  "activities.event.description": "Evento em",
+  "time.at": "às",
+  "date.on": "Em"
 }
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+<img ng-src="{{activity.params.first_image}}" ng-attr-alt="{{activity.params.name}}" class="event-image" />
	2	+<p class="event-description"><b>{{activity.params.name}}</b><br />{{activity.params.lead \| stripTags}}</p>
	3	+<br style="clear: both;" />
	@@ -20,4 +20,53 @@		@@ -20,4 +20,53 @@
20	display: none;	20	display: none;
21	}	21	}
22	}	22	}
		23	+
		24	+ .panel {
		25	+ margin-bottom: 15px;
		26	+ box-shadow: none;
		27	+ border-radius: 0;
		28	+ }
		29	+
		30	+ h5 {
		31	+ text-transform: capitalize;
		32	+ }
		33	+
		34	+ .subheader {
		35	+ p {
		36	+ margin: 2px 0;
		37	+ font-size: 11px;
		38	+ }
		39	+ }
		40	+
		41	+ hr {
		42	+ border: 0;
		43	+ height: 1px;
		44	+ background: #ccc;
		45	+ margin: 0;
		46	+ margin-top: 15px;
		47	+ }
		48	+
		49	+ .activity-label {
		50	+ @include border-radius(2px);
		51	+ font-size: 11px;
		52	+ text-transform: capitalize;
		53	+ background: #333;
		54	+ color: #fff;
		55	+ padding: 2px;
		56	+ margin-left: 5px;
		57	+ display: inline-block;
		58	+ }
		59	+
		60	+ .event-image {
		61	+ width: 15%;
		62	+ height: auto;
		63	+ float: left;
		64	+ }
		65	+
		66	+ .event-description {
		67	+ width: 83%;
		68	+ margin: 2px 0 0 2px;
		69	+ float: left;
		70	+ display: block;
		71	+ }
23	}	72	}