You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@bloodhound.apache.org by gj...@apache.org on 2012/05/28 19:02:48 UTC
svn commit: r1343320 - in
/incubator/bloodhound/trunk/bloodhound_theme/bhtheme: htdocs/
htdocs/scripts/ templates/
Author: gjm
Date: Mon May 28 17:02:47 2012
New Revision: 1343320
URL: http://svn.apache.org/viewvc?rev=1343320&view=rev
Log:
theme: implements quick ticket confirmations - #86 (from olemis)
Added:
incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-popover.js (with props)
incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-tooltip.js (with props)
incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-transition.js (with props)
Modified:
incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css
incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/theme.js
incubator/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html
Modified: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css?rev=1343320&r1=1343319&r2=1343320&view=diff
==============================================================================
--- incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css (original)
+++ incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css Mon May 28 17:02:47 2012
@@ -368,3 +368,13 @@ h1, h2, h3, h4 {
/* @end */
+/* @group Bootstrap extensions */
+
+#alert-log {
+ left: 500px;
+ position: fixed;
+ top: 50px;
+ width: 250px;
+}
+
+/* @end */
Added: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-popover.js
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-popover.js?rev=1343320&view=auto
==============================================================================
--- incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-popover.js (added)
+++ incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-popover.js Mon May 28 17:02:47 2012
@@ -0,0 +1,98 @@
+/* ===========================================================
+ * bootstrap-popover.js v2.0.3
+ * http://twitter.github.com/bootstrap/javascript.html#popovers
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================================================== */
+
+
+!function ($) {
+
+ "use strict"; // jshint ;_;
+
+
+ /* POPOVER PUBLIC CLASS DEFINITION
+ * =============================== */
+
+ var Popover = function ( element, options ) {
+ this.init('popover', element, options)
+ }
+
+
+ /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
+ ========================================== */
+
+ Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
+
+ constructor: Popover
+
+ , setContent: function () {
+ var $tip = this.tip()
+ , title = this.getTitle()
+ , content = this.getContent()
+
+ $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
+ $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)
+
+ $tip.removeClass('fade top bottom left right in')
+ }
+
+ , hasContent: function () {
+ return this.getTitle() || this.getContent()
+ }
+
+ , getContent: function () {
+ var content
+ , $e = this.$element
+ , o = this.options
+
+ content = $e.attr('data-content')
+ || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
+
+ return content
+ }
+
+ , tip: function () {
+ if (!this.$tip) {
+ this.$tip = $(this.options.template)
+ }
+ return this.$tip
+ }
+
+ })
+
+
+ /* POPOVER PLUGIN DEFINITION
+ * ======================= */
+
+ $.fn.popover = 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]()
+ })
+ }
+
+ $.fn.popover.Constructor = Popover
+
+ $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
+ placement: 'right'
+ , content: ''
+ , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
+ })
+
+}(window.jQuery);
\ No newline at end of file
Propchange: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-popover.js
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-popover.js
------------------------------------------------------------------------------
svn:mime-type = text/javascript
Added: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-tooltip.js
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-tooltip.js?rev=1343320&view=auto
==============================================================================
--- incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-tooltip.js (added)
+++ incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-tooltip.js Mon May 28 17:02:47 2012
@@ -0,0 +1,275 @@
+/* ===========================================================
+ * bootstrap-tooltip.js v2.0.3
+ * http://twitter.github.com/bootstrap/javascript.html#tooltips
+ * Inspired by the original jQuery.tipsy by Jason Frame
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+ "use strict"; // jshint ;_;
+
+
+ /* TOOLTIP PUBLIC CLASS DEFINITION
+ * =============================== */
+
+ var Tooltip = function (element, options) {
+ this.init('tooltip', element, options)
+ }
+
+ Tooltip.prototype = {
+
+ constructor: Tooltip
+
+ , init: function (type, element, options) {
+ var eventIn
+ , eventOut
+
+ this.type = type
+ this.$element = $(element)
+ this.options = this.getOptions(options)
+ this.enabled = true
+
+ if (this.options.trigger != 'manual') {
+ eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
+ eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
+ this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
+ this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
+ }
+
+ this.options.selector ?
+ (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
+ this.fixTitle()
+ }
+
+ , getOptions: function (options) {
+ options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
+
+ if (options.delay && typeof options.delay == 'number') {
+ options.delay = {
+ show: options.delay
+ , hide: options.delay
+ }
+ }
+
+ return options
+ }
+
+ , enter: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (!self.options.delay || !self.options.delay.show) return self.show()
+
+ clearTimeout(this.timeout)
+ self.hoverState = 'in'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'in') self.show()
+ }, self.options.delay.show)
+ }
+
+ , leave: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+ clearTimeout(this.timeout)
+ self.hoverState = 'out'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'out') self.hide()
+ }, self.options.delay.hide)
+ }
+
+ , 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
+ }
+
+ $tip
+ .css(tp)
+ .addClass(placement)
+ .addClass('in')
+ }
+ }
+
+ , isHTML: function(text) {
+ // html string detection logic adapted from jQuery
+ return typeof text != 'string'
+ || ( text.charAt(0) === "<"
+ && text.charAt( text.length - 1 ) === ">"
+ && text.length >= 3
+ ) || /^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(text)
+ }
+
+ , setContent: function () {
+ var $tip = this.tip()
+ , title = this.getTitle()
+
+ $tip.find('.tooltip-inner')[this.isHTML(title) ? 'html' : 'text'](title)
+ $tip.removeClass('fade in top bottom left right')
+ }
+
+ , hide: function () {
+ var that = this
+ , $tip = this.tip()
+
+ $tip.removeClass('in')
+
+ function removeWithAnimation() {
+ var timeout = setTimeout(function () {
+ $tip.off($.support.transition.end).remove()
+ }, 500)
+
+ $tip.one($.support.transition.end, function () {
+ clearTimeout(timeout)
+ $tip.remove()
+ })
+ }
+
+ $.support.transition && this.$tip.hasClass('fade') ?
+ removeWithAnimation() :
+ $tip.remove()
+ }
+
+ , fixTitle: function () {
+ var $e = this.$element
+ if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+ $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+ }
+ }
+
+ , hasContent: function () {
+ return this.getTitle()
+ }
+
+ , getPosition: function (inside) {
+ return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
+ width: this.$element[0].offsetWidth
+ , height: this.$element[0].offsetHeight
+ })
+ }
+
+ , getTitle: function () {
+ var title
+ , $e = this.$element
+ , o = this.options
+
+ title = $e.attr('data-original-title')
+ || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
+
+ return title
+ }
+
+ , tip: function () {
+ return this.$tip = this.$tip || $(this.options.template)
+ }
+
+ , validate: function () {
+ if (!this.$element[0].parentNode) {
+ this.hide()
+ this.$element = null
+ this.options = null
+ }
+ }
+
+ , enable: function () {
+ this.enabled = true
+ }
+
+ , disable: function () {
+ this.enabled = false
+ }
+
+ , toggleEnabled: function () {
+ this.enabled = !this.enabled
+ }
+
+ , toggle: function () {
+ this[this.tip().hasClass('in') ? 'hide' : 'show']()
+ }
+
+ }
+
+
+ /* TOOLTIP PLUGIN DEFINITION
+ * ========================= */
+
+ $.fn.tooltip = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('tooltip')
+ , options = typeof option == 'object' && option
+ if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.tooltip.Constructor = Tooltip
+
+ $.fn.tooltip.defaults = {
+ animation: true
+ , placement: 'top'
+ , selector: false
+ , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+ , trigger: 'hover'
+ , title: ''
+ , delay: 0
+ }
+
+}(window.jQuery);
\ No newline at end of file
Propchange: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-tooltip.js
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-tooltip.js
------------------------------------------------------------------------------
svn:mime-type = text/javascript
Added: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-transition.js
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-transition.js?rev=1343320&view=auto
==============================================================================
--- incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-transition.js (added)
+++ incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-transition.js Mon May 28 17:02:47 2012
@@ -0,0 +1,61 @@
+/* ===================================================
+ * bootstrap-transition.js v2.0.3
+ * http://twitter.github.com/bootstrap/javascript.html#transitions
+ * ===================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+ $(function () {
+
+ "use strict"; // jshint ;_;
+
+
+ /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
+ * ======================================================= */
+
+ $.support.transition = (function () {
+
+ var transitionEnd = (function () {
+
+ var el = document.createElement('bootstrap')
+ , transEndEventNames = {
+ 'WebkitTransition' : 'webkitTransitionEnd'
+ , 'MozTransition' : 'transitionend'
+ , 'OTransition' : 'oTransitionEnd'
+ , 'msTransition' : 'MSTransitionEnd'
+ , 'transition' : 'transitionend'
+ }
+ , name
+
+ for (name in transEndEventNames){
+ if (el.style[name] !== undefined) {
+ return transEndEventNames[name]
+ }
+ }
+
+ }())
+
+ return transitionEnd && {
+ end: transitionEnd
+ }
+
+ })()
+
+ })
+
+}(window.jQuery);
\ No newline at end of file
Propchange: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-transition.js
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/bootstrap-transition.js
------------------------------------------------------------------------------
svn:mime-type = text/javascript
Modified: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/theme.js
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/theme.js?rev=1343320&r1=1343319&r2=1343320&view=diff
==============================================================================
--- incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/theme.js (original)
+++ incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/scripts/theme.js Mon May 28 17:02:47 2012
@@ -1,17 +1,41 @@
$( function () {
- //$('#qct-newticket').popover({});
-
+ var qct_result = {};
+ var qct_timeout = null;
+
// Do not close dropdown menu if user interacts with form controls
$('.dropdown-menu input, .dropdown-menu label, .dropdown-menu select')
.click(function (e) { e.stopPropagation(); });
- /* Helper functions */
+ // Install popover for create ticket shortcut
+ // Important: Further options specified in markup
+ $('#qct-newticket').popover({
+ title : function () {
+ ticket = qct_info.ticket;
+ if (ticket)
+ title = 'Ticket #' + qct_info.ticket;
+ else
+ title = 'Error creating ticket';
+ return title + ' <a class="close" id="qct-alert-close" ' +
+ 'data-dismiss="alert" href="#">×</a>'
+ },
+ content : function () { return qct_info.msg; }
+ });
+ $('body').on('click.close', '#qct-alert-close',
+ function (e) { qct_alert_close() });
- // Display message triggered by quick create box
+ // Display & hide message triggered by quick create box
function qct_alert(msg) {
- alert(msg);
+ qct_info = msg;
+ jQuery('#qct-newticket').popover('show');
+ if (qct_timeout)
+ clearTimeout(qct_timeout);
+ qct_timeout = setTimeout(qct_alert_close, 4000);
+ }
+
+ function qct_alert_close() {
+ jQuery('#qct-newticket').popover('hide');
}
// Clear input controls inside quick create box
@@ -27,10 +51,16 @@ $( function () {
);
$('#qct-create').click(
function() {
- var qct_url = $('#qct-create').attr('data-target');
- $.post(qct_url, $('#qct-form').serialize(),
+ var base_url = $('#qct-create').attr('data-target');
+ $.post(base_url + '/qct', $('#qct-form').serialize(),
function(ticket_id) {
- qct_alert('Created ticket ' + ticket_id);
+ qct_alert({
+ ticket: ticket_id,
+ msg: '<span class="alert alert-success" ' +
+ ' style="padding:3px"> Has been created</span>' +
+ '</span> <a href="' + base_url + '/ticket/' +
+ ticket_id + '" class="pull-right">View / Edit</a>'
+ });
})
.error(function(jqXHR, textStatus, errorMsg) {
var msg = 'Error:' + errorMsg;
@@ -40,7 +70,11 @@ $( function () {
msg = 'Could not create ticket . Error : ' + errorMsg;
else if (textStatus === 'abort')
msg = 'Aborted request'
- qct_alert(msg);
+ qct_alert({
+ ticket : null,
+ msg : '<span class="alert alert-error"' +
+ ' style="display:block">' + msg + '</span>'
+ });
});
qct_clearui();
}
Modified: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html
URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html?rev=1343320&r1=1343319&r2=1343320&view=diff
==============================================================================
--- incubator/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html (original)
+++ incubator/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html Mon May 28 17:02:47 2012
@@ -32,6 +32,8 @@
<script src="${href.chrome('theme/scripts/theme.js')}"
type="text/javascript"></script>
+ <script src="${href.chrome('theme/scripts/bootstrap-transition.js')}"
+ type="text/javascript"></script>
<script src="${href.chrome('theme/scripts/bootstrap-dropdown.js')}"
type="text/javascript"></script>
<script src="${href.chrome('theme/scripts/bootstrap-tooltip.js')}"
@@ -130,8 +132,8 @@
<py:when test="qct">
<div class="btn-group">
<a href="#" class="btn btn-primary dropdown-toggle"
- id="qct-newticket" rel="popover" title="Ticket "
- data-content="Alert box" data-toggle="dropdown">
+ id="qct-newticket" data-animation="true" data-html="true"
+ data-trigger="manual" data-toggle="dropdown">
Create Ticket
</a>
<div id="qct-box" class="dropdown-menu" style="width: 300px;"
@@ -146,7 +148,7 @@
${qct_box()}
</div>
</form>
- <button id="qct-create" class="btn btn-primary" data-target="${href.qct()}">Create</button>
+ <button id="qct-create" class="btn btn-primary" data-target="${href()}">Create</button>
<a id="qct-cancel">Cancel</a>
</py:when>
<py:otherwise>
@@ -221,6 +223,17 @@
<div style="text-align: right;" class="span3"></div>
</div>
<div class="row">
+ <!-- div id="alert-log" class="dropdown-menu" style="display: none">
+ <div class="popover-title">
+ <button id="alert-log-close" data-dismiss="alert"
+ class="close">×</button>
+ <h3 id="alert-log-title"></h3>
+ </div>
+ <div class="popover-content">
+ <div id="alert-msg"></div>
+ <ul id="alert-links" class="nav"></ul>
+ </div>
+ </div -->
<div class="span12" py:if="chrome.warnings or chrome.notices">
<div id="warning" py:if="chrome.warnings" class="alert">
<py:choose test="len(chrome.warnings)">