فهرست منبع

HUE-1412 [core] Add splash screen to Follow me tour plugin

Splash modal is shown whenever there's a tour available on the page
Possibility to dismiss the modal forever
Changed icon to checkered flag
Enrico Berti 12 سال پیش
والد
کامیت
8f523476ab
2فایلهای تغییر یافته به همراه32 افزوده شده و 1 حذف شده
  1. 21 0
      desktop/core/src/desktop/templates/common_footer.mako
  2. 11 1
      desktop/core/static/js/Source/jHue/jquery.tour.js

+ 21 - 0
desktop/core/src/desktop/templates/common_footer.mako

@@ -171,6 +171,27 @@ from django.template.defaultfilters import escape, escapejs
 </script>
 %if tours_and_tutorials:
   <script src="/static/js/Source/jHue/available.tours.js"></script>
+  <div id="jHueTourModal" class="modal hide fade">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+      <h3>${_('Did you know?')}</h3>
+    </div>
+    <div class="modal-body">
+      <div class="pull-left" style="color: #DDDDDD;font-size: 116px;margin: 10px; margin-right: 20px"><i class="icon-flag-checkered"></i></div>
+      <div style="margin: 10px">
+      <p>
+        ${_('There is one or more tours available for this page. These tours were created to guide you around.')}
+      </p>
+      <p>
+        ${_('You can see the list of the tours by clicking on the checkered flag badge on the side of this page.')}
+      </p>
+        </div>
+    </div>
+    <div class="modal-footer">
+      <label class="checkbox" style="float:left"><input id="jHueTourModalChk" type="checkbox" />${_('Do not show this dialog again')}</label>
+      <a href="#" class="btn btn-primary disable-feedback" data-dismiss="modal">${_('Got it, prof!')}</a>
+    </div>
+  </div>
 %endif
   </body>
 </html>

+ 11 - 1
desktop/core/static/js/Source/jHue/jquery.tour.js

@@ -116,7 +116,7 @@
   Plugin.prototype.initQuestionMark = function () {
     var _this = this;
     $("#jHueTourQuestion").remove();
-    var _questionMark = $("<div>").attr("id", "jHueTourQuestion").html('<i class="icon-question"></i>').addClass("jHueTourBadge");
+    var _questionMark = $("<div>").attr("id", "jHueTourQuestion").html('<i class="icon-flag-checkered" style=""></i>').addClass("jHueTourBadge");
     if (_this.options.questionMarkPlacement == "left"){
       _questionMark.addClass("jHueTourBadgeLeft");
     }
@@ -161,6 +161,16 @@
           _toursHtml += '<li>' + _this.options.labels.NO_AVAILABLE_TOURS + '</li>';
         }
       }
+      if (_added > 0 && typeof $.totalStorage !== "undefined" && ($.totalStorage("jHueTourHideModal") == null || $.totalStorage("jHueTourHideModal") == false)) {
+        $(document).ready(function () {
+          $("#jHueTourModal").modal();
+          $.totalStorage("jHueTourHideModal", true);
+          $("#jHueTourModalChk").attr("checked", "checked");
+          $("#jHueTourModalChk").on("change", function () {
+            $.totalStorage("jHueTourHideModal", $(this).is(":checked"));
+          });
+        });
+      }
       if (_this.options.showRemote){
         _toursHtml += '<li>' +
           ' <div class="input-append" style="margin-top: 10px">' +