diff --git a/kallithea/controllers/changeset.py b/kallithea/controllers/changeset.py
--- a/kallithea/controllers/changeset.py
+++ b/kallithea/controllers/changeset.py
@@ -108,7 +108,7 @@ def _ignorews_url(GET, fileid=None):
params['anchor'] = fileid
icon = h.literal('')
- return h.link_to(icon, h.url.current(**params), title=lbl, class_='tooltip')
+ return h.link_to(icon, h.url.current(**params), title=lbl, **{'data-toggle': 'tooltip'})
def get_line_ctx(fid, GET):
@@ -168,7 +168,7 @@ def _context_url(GET, fileid=None):
params['anchor'] = fileid
icon = h.literal('')
- return h.link_to(icon, h.url.current(**params), title=lbl, class_='tooltip')
+ return h.link_to(icon, h.url.current(**params), title=lbl, **{'data-toggle': 'tooltip'})
# Could perhaps be nice to have in the model but is too high level ...
diff --git a/kallithea/lib/helpers.py b/kallithea/lib/helpers.py
--- a/kallithea/lib/helpers.py
+++ b/kallithea/lib/helpers.py
@@ -311,9 +311,9 @@ def pygmentize_annotation(repo_name, fil
author = escape(changeset.author)
date = changeset.date
message = escape(changeset.message)
- tooltip_html = ("
Author:"
- " %s
Date: %s
Message:"
- " %s
") % (author, date, message)
+ tooltip_html = ("Author: %s
"
+ "Date: %s
"
+ "Message: %s") % (author, date, message)
lnk_format = show_id(changeset)
uri = link_to(
@@ -321,9 +321,8 @@ def pygmentize_annotation(repo_name, fil
url('changeset_home', repo_name=repo_name,
revision=changeset.raw_id),
style=get_color_string(changeset.raw_id),
- class_='safe-html-title',
- title=tooltip_html,
- **{'data-toggle': 'tooltip'}
+ **{'data-toggle': 'popover',
+ 'data-content': tooltip_html}
)
uri += '\n'
@@ -568,7 +567,7 @@ def action_parser(user_log, feed=False,
lbl = rev[:12]
title_ = _('Changeset %s not found') % lbl
if parse_cs:
- return link_to(lbl, url_, title=title_, class_='tooltip')
+ return link_to(lbl, url_, title=title_, **{'data-toggle': 'tooltip'})
return link_to(lbl, url_, class_='lazy-cs' if lazy_cs else '',
**{'data-raw_id':rev.raw_id, 'data-repo_name':repo_name})
diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
--- a/kallithea/public/css/style.css
+++ b/kallithea/public/css/style.css
@@ -2624,37 +2624,6 @@ table.code-browser i[class^='icon-'] {
z-index: 2;
}
-#tip-box {
- position: absolute;
-
- background-color: #FFF;
- border: 2px solid #577632;
- font: 100% sans-serif;
- width: auto;
- opacity: 1;
- padding: 8px;
-
- white-space: pre-wrap;
- border-radius: 8px 8px 8px 8px;
- box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
- z-index: 100000;
-}
-
-.hl-tip-box {
- z-index: 1;
- position: absolute;
- color: #666;
- background-color: #FFF;
- border: 2px solid #577632;
- font: 100% sans-serif;
- width: auto;
- opacity: 1;
- padding: 8px;
- white-space: pre-wrap;
- border-radius: 8px 8px 8px 8px;
- box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
-}
-
.mentions-container {
width: 90% !important;
@@ -2983,7 +2952,7 @@ input.btn {
input[disabled].btn,
.btn.disabled {
- color: #999;
+ opacity: 0.5;
}
.label,
@@ -4434,3 +4403,144 @@ div.codeblock div.code-header div.author
ul.user_group_member li {
clear: both;
}
+
+.tooltip {
+ position: absolute;
+ z-index: 1070;
+ display: block;
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.42857143;
+ text-align: left;
+ text-align: start;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ letter-spacing: normal;
+ word-break: normal;
+ word-spacing: normal;
+ word-wrap: normal;
+ white-space: normal;
+}
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+.tooltip-inner {
+ max-width: 200px;
+ padding: 3px 8px;
+ color: #fff;
+ text-align: center;
+ background-color: #000;
+ border-radius: 4px;
+}
+
+.tooltip.top {
+ padding: 5px 0;
+ margin-top: -3px;
+}
+.tooltip.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px 5px 0;
+ border-top-color: #000;
+}
+
+.tooltip.bottom {
+ padding: 5px 0;
+ margin-top: 3px;
+}
+.tooltip.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #000;
+}
+
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1060;
+ max-width: 276px;
+ padding: 1px;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0,0,0,.2);
+ border-radius: 6px;
+ box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.42857143;
+ text-align: left;
+ text-align: start;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ letter-spacing: normal;
+ word-break: normal;
+ word-spacing: normal;
+ word-wrap: normal;
+ white-space: normal;
+}
+
+.popover > .arrow {
+ border-width: 11px;
+}
+.popover > .arrow,
+.popover > .arrow::after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+
+.popover-title {
+ padding: 8px 14px;
+ margin: 0;
+ font-size: 14px;
+ background-color: #f7f7f7;
+ border-bottom: 1px solid #ebebeb;
+ border-radius: 5px 5px 0 0;
+}
+
+.popover-content {
+ padding: 9px 14px;
+}
+
+.popover.top {
+ margin-top: -10px;
+}
+.popover.top > .arrow {
+ bottom: -11px;
+ left: 50%;
+ margin-left: -11px;
+ border-top-color: #999;
+ border-top-color: rgba(0,0,0,.25);
+ border-bottom-width: 0;
+}
+
+.popover.bottom {
+ margin-top: 10px;
+}
+.popover.bottom > .arrow {
+ top: -11px;
+ left: 50%;
+ margin-left: -11px;
+ border-top-width: 0;
+ border-bottom-color: #999;
+ border-bottom-color: rgba(0,0,0,.25);
+}
diff --git a/kallithea/public/js/base.js b/kallithea/public/js/base.js
--- a/kallithea/public/js/base.js
+++ b/kallithea/public/js/base.js
@@ -411,25 +411,6 @@ var show_more_event = function(){
});
};
-/**
- * activate .lazy-cs mouseover for showing changeset tooltip
- */
-var show_changeset_tooltip = function(){
- $('.lazy-cs').mouseover(function(e){
- var $target = $(e.currentTarget);
- var rid = $target.data('raw_id');
- var repo_name = $target.data('repo_name');
- if(rid && !$target.hasClass('tooltip')){
- _show_tooltip(e, _TM['loading ...']);
- var url = pyroutes.url('changeset_info', {"repo_name": repo_name, "revision": rid});
- ajaxGET(url, function(json){
- $target.addClass('tooltip');
- _show_tooltip(e, json['message']);
- _activate_tooltip($target);
- });
- }
- });
-};
var _onSuccessFollow = function(target){
var $target = $(target);
@@ -475,76 +456,56 @@ var showRepoSize = function(target, repo
};
/**
- * tooltips
+ * load tooltips dynamically based on data attributes, used for .lazy-cs changeset links
*/
-
-var tooltip_activate = function(){
- $(document).ready(_init_tooltip);
-};
-
-var _activate_tooltip = function($tt){
- $tt.mouseover(_show_tooltip);
- $tt.mousemove(_move_tooltip);
- $tt.mouseout(_close_tooltip);
-};
+var get_changeset_tooltip = function() {
+ var $target = $(this);
+ var tooltip = $target.data('tooltip');
+ if (!tooltip) {
+ var raw_id = $target.data('raw_id');
+ var repo_name = $target.data('repo_name');
+ var url = pyroutes.url('changeset_info', {"repo_name": repo_name, "revision": raw_id});
-var _init_tooltip = function(){
- var $tipBox = $('#tip-box');
- if(!$tipBox.length){
- $tipBox = $('');
- $(document.body).append($tipBox);
+ $.ajax(url, {
+ async: false,
+ success: function(data) {
+ tooltip = data["message"];
+ }
+ });
+ $target.data('tooltip', tooltip);
}
-
- $tipBox.hide();
- $tipBox.css('position', 'absolute');
- $tipBox.css('max-width', '600px');
-
- _activate_tooltip($('[data-toggle="tooltip"]'));
+ return tooltip;
};
-var _show_tooltip = function(e, tipText, safe){
- e.stopImmediatePropagation();
- var el = e.currentTarget;
- var $el = $(el);
- if(tipText){
- // just use it
- } else if(el.tagName.toLowerCase() === 'img'){
- tipText = el.alt ? el.alt : '';
- } else {
- tipText = el.title ? el.title : '';
- safe = safe || $el.hasClass("safe-html-title");
+/**
+ * activate tooltips and popups
+ */
+var tooltip_activate = function(){
+ function placement(p, e){
+ if(e.getBoundingClientRect().top > 2*$(window).height()/3){
+ return 'top';
+ }else{
+ return 'bottom';
+ }
}
-
- if(tipText !== ''){
- // save org title
- $el.attr('tt_title', tipText);
- // reset title to not show org tooltips
- $el.prop('title', '');
-
- var $tipBox = $('#tip-box');
- if (safe) {
- $tipBox.html(tipText);
- } else {
- $tipBox.text(tipText);
- }
- $tipBox.css('display', 'block');
- }
+ $(document).ready(function(){
+ $('[data-toggle="tooltip"]').tooltip({
+ placement: placement
+ });
+ $('[data-toggle="popover"]').popover({
+ html: true,
+ container: 'body',
+ placement: placement,
+ trigger: 'hover',
+ template: ''
+ });
+ $('.lazy-cs').tooltip({
+ title: get_changeset_tooltip,
+ placement: placement
+ });
+ });
};
-var _move_tooltip = function(e){
- e.stopImmediatePropagation();
- var $tipBox = $('#tip-box');
- $tipBox.css('top', (e.pageY + 15) + 'px');
- $tipBox.css('left', (e.pageX + 15) + 'px');
-};
-
-var _close_tooltip = function(e){
- e.stopImmediatePropagation();
- var $tipBox = $('#tip-box');
- $tipBox.hide();
- var el = e.currentTarget;
- $(el).prop('title', $(el).attr('tt_title'));
-};
/**
* Quick filter widget
diff --git a/kallithea/templates/admin/admin_log.html b/kallithea/templates/admin/admin_log.html
--- a/kallithea/templates/admin/admin_log.html
+++ b/kallithea/templates/admin/admin_log.html
@@ -44,7 +44,6 @@
asynchtml(e.target.href, $user_log, function(){
show_more_event();
tooltip_activate();
- show_changeset_tooltip();
});
e.preventDefault();
});
diff --git a/kallithea/templates/base/root.html b/kallithea/templates/base/root.html
--- a/kallithea/templates/base/root.html
+++ b/kallithea/templates/base/root.html
@@ -81,7 +81,6 @@
$(document).ready(function(){
tooltip_activate();
show_more_event();
- show_changeset_tooltip();
// routes registration
pyroutes.register('home', "${h.url('home')}", []);
pyroutes.register('new_gist', "${h.url('new_gist')}", []);
diff --git a/kallithea/templates/data_table/_dt_elements.html b/kallithea/templates/data_table/_dt_elements.html
--- a/kallithea/templates/data_table/_dt_elements.html
+++ b/kallithea/templates/data_table/_dt_elements.html
@@ -45,7 +45,7 @@
<%def name="revision(name,rev,tip,author,last_msg)">
%if rev >= 0:
-
${'r%s:%s' % (rev,h.short_id(tip))}
+
${'r%s:%s' % (rev,h.short_id(tip))}
%else:
${_('No changesets yet')}
%endif
diff --git a/kallithea/templates/files/files_source.html b/kallithea/templates/files/files_source.html
--- a/kallithea/templates/files/files_source.html
+++ b/kallithea/templates/files/files_source.html
@@ -20,13 +20,13 @@