From 05291589a68f405df2d203827e3e0c9bad9ce481 Mon Sep 17 00:00:00 2001
From: Avijit Gupta <526avijit@gmail.com>
Date: Mon, 4 Jul 2016 05:24:17 +0530
Subject: [PATCH] Fix part of #1366: Card view for creator dashboard (#2170)

* Add card view to dashboard

* Display view toggler only for explorations

* Use track by in repeater

* Fix alphabetic ordering of css properties

* UI fixes

* Fix delayed hide/show of views

* Add sharing links to card view

* Revert "Add sharing links to card view"

This reverts commit 2eaa5bc260dba13c3d83b130f93c9e55899b507a.

Revert adding sharing links with outdated directive

* Add sharing links to dashboard card view

* css fixes for card view

* Add translation for last updated

* Minor fixes to view

* 4 cards per row; fix margin of container
---
 core/controllers/dashboard.py                 |  11 +
 core/templates/dev/head/css/oppia.css         |  91 ++++++--
 .../templates/dev/head/dashboard/Dashboard.js |   7 +
 .../dev/head/dashboard/dashboard.html         | 200 +++++++++++++-----
 i18n/en.json                                  |   1 +
 i18n/es.json                                  |   1 +
 i18n/id.json                                  |   1 +
 i18n/qqq.json                                 |   1 +
 8 files changed, 248 insertions(+), 65 deletions(-)

diff --git a/core/controllers/dashboard.py b/core/controllers/dashboard.py
index 85a30dec90e6..4e1dbb926562 100644
--- a/core/controllers/dashboard.py
+++ b/core/controllers/dashboard.py
@@ -33,6 +33,15 @@
 EXPLORATION_ID_KEY = 'explorationId'
 COLLECTION_ID_KEY = 'collectionId'
 
+DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD = config_domain.ConfigProperty(
+    'default_twitter_share_message_dashboard', {
+        'type': 'unicode',
+    },
+    'Default text for the Twitter share message for the dashboard',
+    default_value=(
+        'Check out this interactive lesson I created on Oppia - a free '
+        'platform for teaching and learning!'))
+
 
 class NotificationsDashboardPage(base.BaseHandler):
     """Page with notifications for the user."""
@@ -122,6 +131,8 @@ def get(self):
                     config_domain.WHITELISTED_COLLECTION_EDITOR_USERNAMES.value
                 ),
                 'allow_yaml_file_upload': feconf.ALLOW_YAML_FILE_UPLOAD,
+                'DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD': (
+                    DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD.value)
             })
             self.render_template(
                 'dashboard/dashboard.html', redirect_url_on_logout='/')
diff --git a/core/templates/dev/head/css/oppia.css b/core/templates/dev/head/css/oppia.css
index d5d461965eb5..febb79e4c941 100644
--- a/core/templates/dev/head/css/oppia.css
+++ b/core/templates/dev/head/css/oppia.css
@@ -131,6 +131,11 @@ body {
   max-width: 800px;
 }
 
+.oppia-dashboard-container .exp-private-text {
+  color: #aaa;
+  font-style: italic;
+}
+
 .oppia-profile-container {
   margin: 30px auto 30px auto;
   max-width: 980px;
@@ -1184,6 +1189,39 @@ textarea {
   padding-top: 50px;
 }
 
+.oppia-dashboard-tabs .list-card-view-toggle {
+  margin-left: auto;
+  width: auto;
+}
+
+.list-card-view-toggle button {
+  background: #fff;
+  border: 1px solid #ddd;
+  color: #009688;
+  height: 32px;
+  margin-top: 7px;
+  padding: 5px 12px;
+}
+
+.list-card-view-toggle .list-view-btn {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.list-card-view-toggle .card-view-btn {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.list-card-view-toggle .dashboard-active-view {
+  background: #009688;
+  color: #fff;
+}
+
+.list-card-view-toggle .card-view-btn {
+  margin-left: -1px;
+}
+
 /* Rules for the tiles in the creator dashboard. */
 
 .oppia-dashboard-intro-card {
@@ -1239,16 +1277,6 @@ md-card.oppia-dashboard-tile {
   text-decoration: none;
 }
 
-.oppia-dashboard-tile-collection-label {
-  background-color: #333;
-  border-radius: 5px;
-  bottom: 0;
-  color: #f0f0f0;
-  padding: 5px;
-  position: absolute;
-  right: 0;
-}
-
 .oppia-dashboard-tile-image-container {
   height: 120px;
   left: 0;
@@ -2131,7 +2159,7 @@ md-card.oppia-dashboard-tile {
   position: relative;
 }
 
-.oppia-dashboard-list-view-card {
+.oppia-dashboard-list-view-item {
   background: #fff;
   margin: 20px auto 0;
   padding: 10px 20px;
@@ -2161,9 +2189,7 @@ md-card.oppia-dashboard-tile {
 }
 
 .exploration-list-item .exp-private-text {
-  color: #aaa;
   font-size: 15px;
-  font-style: italic;
 }
 
 .exploration-list-item .featured-badge {
@@ -3489,7 +3515,7 @@ md-card.preview-conversation-skin-supplemental-card {
   opacity: 0.4;
   position: absolute;
   top: 0;
-  width: 200px;
+  width: 100%;
   z-index: 10;
 }
 
@@ -3616,6 +3642,43 @@ md-card.preview-conversation-skin-supplemental-card {
   padding: 5px 8px 4px 8px;
 }
 
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item {
+  height: 250px;
+  margin-left: 0;
+  margin-right: 15px;
+  width: 184px;
+}
+
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item .exp-private-text {
+  font-size: 13px;
+  margin: 13px 11px 0;
+}
+
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item .metrics {
+  height: 50px;
+  margin: 13px 0 0 0;
+}
+
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item .metrics > li {
+  padding: 0 0 4px 14px;
+  text-align: left;
+}
+
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item .oppia-sharing-links {
+  margin-top: 3px;
+  padding-left: 12px;
+}
+
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item .oppia-sharing-links .share-option-img,
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item .oppia-sharing-links i.embed-link {
+  height: 16px;
+  width: 16px;
+}
+
+.oppia-activity-summary-tile.oppia-dashboard-card-view-item .oppia-sharing-links i.embed-link {
+  font-size: 16px;
+}
+
 /* Styles for small-width screens. */
 
 .oppia-activity-summary-tile.small-width {
diff --git a/core/templates/dev/head/dashboard/Dashboard.js b/core/templates/dev/head/dashboard/Dashboard.js
index 46e3fc0049c6..6fa0314d3a4c 100644
--- a/core/templates/dev/head/dashboard/Dashboard.js
+++ b/core/templates/dev/head/dashboard/Dashboard.js
@@ -24,6 +24,8 @@ oppia.controller('Dashboard', [
       $scope, $rootScope, $window, oppiaDatetimeFormatter, alertsService,
       DashboardBackendApiService, RatingComputationService,
       ExplorationCreationService, FATAL_ERROR_CODES) {
+    $scope.DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD = (
+        GLOBALS.DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD);
     $scope.getAverageRating = RatingComputationService.computeAverageRating;
     $scope.createNewExploration = (
       ExplorationCreationService.createNewExploration);
@@ -39,6 +41,11 @@ oppia.controller('Dashboard', [
       $window.location = '/create/' + explorationId;
     };
 
+    $scope.myExplorationsView = 'list';
+    $scope.setMyExplorationsView = function(viewType) {
+      $scope.myExplorationsView = viewType;
+    };
+
     $rootScope.loadingMessage = 'Loading';
     DashboardBackendApiService.fetchDashboardData().then(
       function(response) {
diff --git a/core/templates/dev/head/dashboard/dashboard.html b/core/templates/dev/head/dashboard/dashboard.html
index 09331df1f184..c11e74ddcce6 100644
--- a/core/templates/dev/head/dashboard/dashboard.html
+++ b/core/templates/dev/head/dashboard/dashboard.html
@@ -4,6 +4,13 @@
   Creator Dashboard - Oppia
 {% endblock maintitle %}
 
+{% block header_js %}
+  {{ super() }}
+  <script type="text/javascript">
+    GLOBALS.DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD = JSON.parse('{{DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD|js_string}}');
+  </script>
+{% endblock header_js %}
+
 {% block navbar_breadcrumb %}
   <ul class="nav navbar-nav oppia-navbar-breadcrumb">
     <li>
@@ -49,16 +56,33 @@ <h1 class="stat-value"><[dashboardStats.total_plays]></h1>
             </a>
           </li>
         {% endif %}
+        <li class="list-card-view-toggle" ng-if="activeTab === 'myExplorations'">
+          <button class="list-view-btn"
+                  ng-class="{'dashboard-active-view': myExplorationsView === 'list'}"
+                  ng-click="setMyExplorationsView('list')">
+            <span class="fa fa-list fa-lg"></span>
+          </button>
+          <button class="card-view-btn"
+                  ng-class="{'dashboard-active-view': myExplorationsView === 'card'}"
+                  ng-click="setMyExplorationsView('card')">
+            <span class="fa fa-th-large fa-lg"></span>
+          </button>
+        </li>
       </ul>
     </div>
 
     <div ng-if="explorationsList.length === 0 && collectionsList.length === 0">
-      <h2 style="margin-bottom: -20px; margin-left: 52px;">Creator Dashboard</h2>
+      <h2 style="margin-bottom: -20px;
+                 margin-left: 52px;
+                 font-family: 'Capriola', 'Roboto', Arial, sans-serif;">
+        Creator Dashboard
+      </h2>
     </div>
 
     <div ng-if="activeTab === 'myExplorations'">
       <div ng-if="explorationsList.length === 0" class="oppia-dashboard-empty-text">
-        <md-card layout="row" class="oppia-page-card oppia-dashboard-intro-card"
+        <md-card layout="row"
+                 class="oppia-page-card oppia-dashboard-intro-card"
                  style="margin-top: 0;">
           <div>
             <p>
@@ -77,54 +101,125 @@ <h2 style="margin-bottom: -20px; margin-left: 52px;">Creator Dashboard</h2>
         </md-card>
       </div>
 
-      <md-card layout="row"
-               ng-if="explorationsList.length > 0"
-               class="oppia-dashboard-list-view-card">
-        <table class="oppia-dashboard-table">
-           <colgroup>
-             <col style="width: 40%;">
-             <col style="width: 15%;">
-             <col style="width: 15%;">
-             <col style="width: 15%;">
-             <col style="width: 15%;">
-          </colgroup>
-          <tr>
-            <th>Exploration</th>
-            <th>Rating</th>
-            <th>Plays</th>
-            <th>Feedback</th>
-            <th>Last Updated</th>
-          </tr>
-          <tr ng-repeat="exploration in explorationsList"
-              ng-click="showExplorationEditor(exploration.id)"
-              class="exploration-list-item">
-            <td>
-              <[exploration.title || 'Untitled']>
-              <span ng-if="exploration.status === 'publicized'"
-                    class="featured-badge">
-                featured
-              </span>
-            </td>
-            <td colspan="3"
-                ng-if="exploration.status === 'private'"
-                class="exp-private-text">
-              This exploration is private. Publish to receive statistics.
-            </td>
-            <td ng-if="exploration.status !== 'private'">
-              <[(getAverageRating(exploration.ratings) | number:1) || 'N/A']>
-            </td>
-            <td ng-if="exploration.status !== 'private'">
-              <[exploration.num_views]>
-            </td>
-            <td ng-if="exploration.status !== 'private'">
-              <[exploration.num_total_threads]>
-            </td>
-            <td>
-              <[getLocaleAbbreviatedDatetimeString(exploration.last_updated_msec)]>
-            </td>
-          </tr>
-        </table>
-      </md-card>
+      <div ng-if="myExplorationsView === 'list' && explorationsList.length > 0">
+        <md-card layout="row"
+                 class="oppia-dashboard-list-view-item">
+          <table class="oppia-dashboard-table">
+             <colgroup>
+               <col style="width: 40%;">
+               <col style="width: 15%;">
+               <col style="width: 15%;">
+               <col style="width: 15%;">
+               <col style="width: 15%;">
+            </colgroup>
+            <tr>
+              <th>Exploration</th>
+              <th>Rating</th>
+              <th>Plays</th>
+              <th>Feedback</th>
+              <th>Last Updated</th>
+            </tr>
+            <tr ng-repeat="exploration in explorationsList track by exploration.id"
+                ng-click="showExplorationEditor(exploration.id)"
+                class="exploration-list-item">
+              <td>
+                <[exploration.title || 'Untitled']>
+                <span ng-if="exploration.status === 'publicized'"
+                      class="featured-badge">
+                  featured
+                </span>
+              </td>
+              <td colspan="3"
+                  ng-if="exploration.status === 'private'"
+                  class="exp-private-text">
+                This exploration is private. Publish to receive statistics.
+              </td>
+              <td ng-if="exploration.status !== 'private'">
+                <[(getAverageRating(exploration.ratings) | number:1) || 'N/A']>
+              </td>
+              <td ng-if="exploration.status !== 'private'">
+                <[exploration.num_views]>
+              </td>
+              <td ng-if="exploration.status !== 'private'">
+                <[exploration.num_total_threads]>
+              </td>
+              <td>
+                <[getLocaleAbbreviatedDatetimeString(exploration.last_updated_msec)]>
+              </td>
+            </tr>
+          </table>
+        </md-card>
+      </div>
+
+      <div ng-if="myExplorationsView === 'card' && explorationsList.length > 0"
+           style="margin-top: 8px;">
+        <md-card ng-repeat="exploration in explorationsList track by exploration.id"
+                 class="oppia-activity-summary-tile oppia-dashboard-card-view-item"
+                 ng-click="showExplorationEditor(exploration.id)">
+            <div class="title-section" style="background-color: <[exploration.thumbnail_bg_color]>;">
+              <img class="thumbnail-image" ng-src="<[exploration.thumbnail_icon_url]>">
+              <h2 class="activity-title protractor-test-exp-summary-tile-title">
+                <span><[exploration.title || 'Untitled' | truncate:40]></span>
+              </h2>
+            </div>
+            <div class="title-section-mask"></div>
+
+            <div ng-attr-section="'<['right-section']>">
+              <div ng-if="exploration.status === 'private'" class="exp-private-text">
+                This exploration is private. Publish to receive statistics.
+              </div>
+              <ul ng-if="exploration.status !== 'private'"
+                  layout="row"
+                  layout-wrap
+                  class="metrics"
+                  layout-align="space-between center">
+                <li flex="50">
+                  <span class="protractor-test-exp-summary-tile-rating">
+                    <span class="fa fa-star fa-lg"
+                          tooltip="<['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]>"
+                          tooltip-placement="top">
+                    </span>
+                    <span>
+                      <[(getAverageRating(exploration.ratings) | number:1) || 'N/A']>
+                    </span>
+                  </span>
+                </li>
+
+                <li flex="50">
+                  <span class="fa fa-eye fa-lg"
+                        tooltip="<['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]>"
+                        tooltip-placement="top">
+                  </span>
+                  <[exploration.num_views]>
+                </li>
+
+                <li flex="50">
+                  <span class="fa fa-clock-o fa-lg"
+                        tooltip="<['I18N_LIBRARY_LAST_UPDATED' | translate]>"
+                        tooltip-placement="top">
+                    <[getLocaleAbbreviatedDatetimeString(exploration.last_updated_msec)]>
+                  </span>
+                </li>
+
+                <li flex="50">
+                  <span class="fa fa-comments fa-lg"
+                        tooltip="<['I18N_PLAYER_FEEDBACK_TOOLTIP' | translate]>"
+                        tooltip-placement="top">
+                  </span>
+                  <[exploration.num_total_threads]>
+                </li>
+                <sharing-links ng-if="exploration.status !== 'private'"
+                               flex="100"
+                               layout-type="row"
+                               layout-align-type="center left"
+                               twitter-text="DEFAULT_TWITTER_SHARE_MESSAGE_DASHBOARD"
+                               exploration-id="exploration.id">
+               </sharing-links>
+              </ul>
+            </div>
+        </md-card>
+      </div>
+
     </div>
 
     {% if can_create_collections %}
@@ -160,7 +255,6 @@ <h2 style="margin-bottom: -20px; margin-left: 52px;">Creator Dashboard</h2>
                 </div>
                 <div class="oppia-dashboard-tile-contents">
                   <span class="oppia-dashboard-tile-image-container" style="position: absolute;">
-                    <div class="oppia-dashboard-tile-collection-label">Collection</div>
                     <img class="oppia-dashboard-tile-image" ng-src="<[collection.thumbnail_icon_url]>" style="background-color: <[collection.thumbnail_bg_color]>" ng-class="{'oppia-dashboard-tile-image-private': collection.status === 'private'}">
                   </span>
 
@@ -204,6 +298,8 @@ <h2 style="margin-bottom: -20px; margin-left: 52px;">Creator Dashboard</h2>
   </div>
 
   {% include 'components/create_activity_modal.html' %}
+  {% include 'components/exploration_embed_button_modal.html' %}
+  {% include 'components/sharing_links_directive.html' %}
   {% include 'components/upload_activity_modal.html' %}
 {% endblock %}
 
@@ -211,6 +307,8 @@ <h2 style="margin-bottom: -20px; margin-left: 52px;">Creator Dashboard</h2>
   {{ super() }}
   <script>
     {{ include_js_file('components/CollectionCreationService.js') }}
+    {{ include_js_file('components/ExplorationEmbedButtonService.js') }}
+    {{ include_js_file('components/SharingLinksDirective.js') }}
     {{ include_js_file('dashboard/Dashboard.js') }}
     {{ include_js_file('domain/dashboard/DashboardBackendApiService.js') }}
   </script>
diff --git a/i18n/en.json b/i18n/en.json
index b872cd1b17b5..9320374b2b29 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -134,6 +134,7 @@
   "I18N_LIBRARY_GROUPS_SCIENCE" : "Science",
   "I18N_LIBRARY_GROUPS_SOCIAL_SCIENCE": "Social Science",
   "I18N_LIBRARY_GROUPS_TOP_RATED_EXPLORATIONS": "Top-Rated Explorations",
+  "I18N_LIBRARY_LAST_UPDATED": "Last updated",
   "I18N_LIBRARY_LOADING": "Loading",
   "I18N_LIBRARY_MAIN_HEADER": "Imagine what you could learn today...",
   "I18N_LIBRARY_N/A": "N/A",
diff --git a/i18n/es.json b/i18n/es.json
index 5bda049cd18b..d0c17259d43b 100644
--- a/i18n/es.json
+++ b/i18n/es.json
@@ -134,6 +134,7 @@
   "I18N_LIBRARY_GROUPS_SCIENCE" : "Ciencias",
   "I18N_LIBRARY_GROUPS_SOCIAL_SCIENCE": "Ciencias Sociales",
   "I18N_LIBRARY_GROUPS_TOP_RATED_EXPLORATIONS": "Exploraciones Mejor Calificadas",
+  "I18N_LIBRARY_LAST_UPDATED": "Última actualización",
   "I18N_LIBRARY_LOADING": "Cargando",
   "I18N_LIBRARY_MAIN_HEADER": "Imagina lo que podrías aprender hoy...",
   "I18N_LIBRARY_N/A": "N/A",
diff --git a/i18n/id.json b/i18n/id.json
index d92c5f751ca8..346beefc4a5f 100644
--- a/i18n/id.json
+++ b/i18n/id.json
@@ -134,6 +134,7 @@
   "I18N_LIBRARY_GROUPS_SCIENCE" : "Sains",
   "I18N_LIBRARY_GROUPS_SOCIAL_SCIENCE": "Ilmu Sosial",
   "I18N_LIBRARY_GROUPS_TOP_RATED_EXPLORATIONS": "Eksplorasi Terbaik",
+  "I18N_LIBRARY_LAST_UPDATED": "Terakhir diperbarui",
   "I18N_LIBRARY_LOADING": "Memuat",
   "I18N_LIBRARY_MAIN_HEADER": "Bayangkan apa yang dapat anda pelajari hari ini...",
   "I18N_LIBRARY_N/A": "N/A",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 3362fa8b4c1b..46451dae73af 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -134,6 +134,7 @@
   "I18N_LIBRARY_GROUPS_SCIENCE" : "Title of a group of explorations - This text is shown on top of a group of explorations regarding the same topic.",
   "I18N_LIBRARY_GROUPS_SOCIAL_SCIENCE": "Title of a group of explorations - This text is shown on top of a group of explorations regarding the same topic.",
   "I18N_LIBRARY_GROUPS_TOP_RATED_EXPLORATIONS": "Title of a group of explorations - This text is shown on top of a group of explorations. It makes reference to explorations with higher score given by the users.",
+  "I18N_LIBRARY_LAST_UPDATED": "Text displayed when hovered over the clock icon inside an exploration tile in card view of creator dashboard.",
   "I18N_LIBRARY_LOADING": "Text displayed in the middle of the page while the content is being loaded.",
   "I18N_LIBRARY_MAIN_HEADER": "Main title of the library page. - The library page shows all the explorations and collections available. It should be a single phrase and fit in one line.",
   "I18N_LIBRARY_N/A": "Text displayed inside the exploration card in the library - It's shown when the exploration has no rating. It should be very small as it's replacing a two digit number.",