Bläddra i källkod

HUE-1952 [core] Tutorial panel should be easier to dismiss

Changed display of the popover
Added padding and made close icon bigger
Fixed a few tour labels
Enrico Berti 11 år sedan
förälder
incheckning
964647e

+ 1 - 0
desktop/core/src/desktop/templates/common_header.mako

@@ -139,6 +139,7 @@ from django.utils.translation import ugettext as _
   <script src="/static/js/jquery.datatables.sorting.js"></script>
   <script src="/static/ext/js/bootstrap.min.js"></script>
   <script src="/static/ext/js/fileuploader.js"></script>
+  <script src="/static/js/popover-extra-placements.js"></script>
 
   <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {

+ 6 - 6
desktop/core/src/desktop/templates/tours.mako

@@ -32,14 +32,14 @@ $.jHueTour({
     },
     {
       "name": "hiveheaders",
-      "desc": "${_("Create Hive tables and load quoted CSV data")}",
-      "path": "/hive",
+      "desc": "${_("Create Hive tables and load quoted")}<br/>${_("CSV data")}",
+      "path": "/beeswax",
       "video": "http://player.vimeo.com/video/80460405",
       "blog": "http://gethue.tumblr.com/post/68282571607/hadoop-tutorial-create-hive-tables-and-load-quoted-csv"
     },
     {
       "name": "fbooziesubmit",
-      "desc": "${_("Submit any Oozie jobs directly from HDFS")}",
+      "desc": "${_("Submit any Oozie jobs directly")}<br/>${_("from HDFS")}",
       "path": "/(oozie|filebrowser)",
       "video": "http://player.vimeo.com/video/80749790",
       "blog": "http://gethue.tumblr.com/post/68781982681/hadoop-tutorial-submit-any-oozie-jobs-directly-from"
@@ -67,14 +67,14 @@ $.jHueTour({
     },
     {
       "name": "sentry",
-      "desc": "${_("Hive Query editor with HiveServer2 and Sentry")}",
-      "path": "/(hive|impala)",
+      "desc": "${_("Hive Query editor with HiveServer2")}<br/>${_("and Sentry")}",
+      "path": "/(beeswax|impala)",
       "video": "http://player.vimeo.com/video/79883574",
       "blog": "http://gethue.tumblr.com/post/64916325309/hadoop-tutorial-hive-query-editor-with-hiveserver2-and"
     },
     {
       "name": "superproxy",
-      "desc": "${_("Integrate external Web applications in any language")}",
+      "desc": "${_("Integrate external Web applications in")}<br/>${_("any language")}",
       "path": "/about",
       "video": "http://player.vimeo.com/video/79178858",
       "blog": "http://gethue.tumblr.com/post/66367939672/integrate-external-web-applications-in-any-language"

+ 5 - 6
desktop/core/static/js/jquery.tour.js

@@ -157,14 +157,14 @@
             _removeTour = '<div style="color:red;float:right;margin:4px;cursor: pointer" onclick="javascript:$.jHueTour(\'remove_' + tour.name + '\')"><i class="fa fa-times-circle"></i></div>';
           }
 
-          var _link = '<a href="javascript:$.jHueTour(\'' + tour.name + '\', 1)" style="padding-left:0">';
+          var _link = '<a href="javascript:$.jHueTour(\'' + tour.name + '\', 1)" style="padding:2px">';
 
           if (typeof tour.video != "undefined" && tour.video != null && tour.video != ""){
             _extraIcon = '<i class="fa fa-youtube-play"></i> ';
           }
           else if (typeof tour.blog != "undefined" && tour.blog != null && tour.blog != ""){
             _extraIcon = '<i class="fa fa-external-link"></i> ';
-            _link = '<a href="' + tour.blog + '" target="_blank" style="padding:0">';
+            _link = '<a href="' + tour.blog + '" target="_blank" style="padding:2px">';
           }
           _toursHtml += '<li>' + _removeTour + _tourDone + _link + _extraIcon + tour.desc + '</a></li>';
           _added++;
@@ -206,7 +206,7 @@
     _questionMark.click(function () {
 
       var _closeBtn = $("<a>");
-      _closeBtn.html('<i class="fa fa-times"></i>').addClass("btn-mini").css("cursor", "pointer").css("margin-left", "7px").css("float", "right").css("margin-top", "-4px").css("margin-right", "-6px");
+      _closeBtn.html('<i class="fa fa-times"></i>').css("cursor", "pointer").css("padding", "5px").css("padding-left", "17px").css("padding-right", "7px").css("float", "right").css("margin-top", "-4px").css("margin-right", "-6px");
       _closeBtn.click(function () {
         $(".popover").remove();
       });
@@ -215,14 +215,13 @@
         title: _this.options.labels.AVAILABLE_TOURS,
         content: _toursHtml,
         html: true,
-        trigger: "manual",
-        placement: "left"
+        trigger: "click",
+        placement: "bottomRight"
       }).popover("show");
       if ($(".popover").position().top <= 0) {
         $(".popover").css("top", "10px");
       }
       _closeBtn.prependTo($(".popover-title"));
-
     });
     _questionMark.appendTo($("#jHueTourFlagPlaceholder"));
   };

+ 113 - 0
desktop/core/static/js/popover-extra-placements.js

@@ -0,0 +1,113 @@
+
+(function($) {
+  "use strict";  // jshint;_;
+
+  // save the original plugin function object
+  var _super = $.fn.popover;
+
+  // create a new constructor
+  var Popover = function(element, options) {
+    _super.Constructor.apply(this, arguments);
+  };
+
+  // extend prototypes and create a super function
+  Popover.prototype = $.extend({}, _super.Constructor.prototype, {
+    constructor: Popover,
+    _super: function() {
+      var args = $.makeArray(arguments);
+      _super.Constructor.prototype[args.shift()].apply(this, args);
+    },
+    show: function() {
+      var $tip, inside, pos, actualWidth, actualHeight, placement, tp;
+      
+      if (this.hasContent && this.enabled) {
+        $tip = this.tip();
+        this.setContent();
+      
+        if (this.options.animation) {
+          $tip.addClass('fade');
+        }
+      
+        placement = typeof this.options.placement == 'function' ?
+          this.options.placement.call(this, $tip[0], this.$element[0]) :
+          this.options.placement;
+      
+        inside = /in/.test(placement);
+
+        $tip
+          .remove()
+          .css({ top: 0, left: 0, display: 'block' })
+          .appendTo(inside ? this.$element : document.body);
+      
+        pos = this.getPosition(inside);
+
+        actualWidth = $tip[0].offsetWidth;
+        actualHeight = $tip[0].offsetHeight;
+      
+        switch (inside ? placement.split(' ')[1] : placement) {
+          case 'bottom':
+            tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
+            break;
+          case 'top':
+            tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
+            break;
+          case 'left':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
+            break;
+          case 'right':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
+            break;
+
+          // extend placements (top)
+          case 'topLeft':
+            tp = {top: pos.top - actualHeight,  left: pos.left + pos.width / 2 - (actualWidth * .25)};
+            break;
+          case 'topRight':
+            tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .75)};
+            break;
+
+          // extend placements (right)
+          case 'rightTop':
+            tp = {top: pos.top + pos.height / 2 - (actualHeight *.25), left: pos.left + pos.width};
+            break;
+          case 'rightBottom':
+            tp = {top: pos.top + pos.height / 2 - (actualHeight * .75), left: pos.left + pos.width};
+            break;
+
+          // extend placements (bottom)
+          case 'bottomLeft':
+            tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .25)};
+            break;
+          case 'bottomRight':
+            tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .80)};
+            break;
+
+          // extend placements (left)
+          case 'leftTop':
+            tp = {top: pos.top + pos.height / 2 - (actualHeight *.25), left: pos.left - actualWidth};
+            break;
+          case 'leftBottom':
+            tp = {top: pos.top + pos.height / 2 - (actualHeight * .75), left: pos.left - actualWidth};
+            break;
+
+        }
+      
+        $tip
+          .css(tp)
+          .addClass(placement)
+          .addClass('in');
+      }
+    }
+  });
+
+  $.fn.popover = $.extend(function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('popover')
+        , options = typeof option == 'object' && option;
+      if (!data) $this.data('popover', (data = new Popover(this, options)));
+      if (typeof option == 'string') data[option]();
+    });
+  }, _super);
+
+})(jQuery);