Implement popup boxes to change titles
This commit is contained in:
Eike Foken
@@ -560,6 +560,11 @@ a.job_start {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
a.rename {
|
||||
background: url(../images/icons/document-rename.png) 10px center no-repeat #f3f3f3;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
a.results {
|
||||
background: url(../images/icons/blue-folder-open-document-text.png) 10px center no-repeat #f3f3f3;
|
||||
padding-left: 30px;
|
||||
@@ -870,6 +875,151 @@ div.progress_bar strong {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Popup windows */
|
||||
|
||||
#popup_container {
|
||||
font: 12px Arial, sans-serif;
|
||||
min-width: 300px; /* Dialog will be no smaller than this */
|
||||
max-width: 600px; /* Dialog will wrap after this width */
|
||||
background: #fff;
|
||||
border: solid 1px #ccc;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
-ms-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#popup_title {
|
||||
color: #6e6e6e;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1.75em;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
background: #f3f3f3;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
0% 40%,
|
||||
0% 70%,
|
||||
from(#f5f5f5),
|
||||
to(#f1f1f1)
|
||||
);
|
||||
background: -webkit-linear-gradient(
|
||||
0 40% 270deg,
|
||||
#f5f5f5,
|
||||
#f1f1f1,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
background: -moz-linear-gradient(
|
||||
0 40% 270deg,
|
||||
#f5f5f5,
|
||||
#f1f1f1,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
background: -ms-linear-gradient(
|
||||
0 40% 270deg,
|
||||
#f5f5f5,
|
||||
#f1f1f1,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
background: -o-linear-gradient(
|
||||
0 40% 270deg,
|
||||
#f5f5f5,
|
||||
#f1f1f1,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
border-bottom: solid 1px #ccc;
|
||||
cursor: default;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#popup_content {
|
||||
background: url('../images/icons-big/information.png') 16px 16px no-repeat;
|
||||
padding: 1em 1.75em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#popup_content.alert {
|
||||
background-image: url('../images/icons-big/information.png');
|
||||
}
|
||||
|
||||
#popup_content.confirm {
|
||||
background-image: url('../images/icons-big/exclamation.png');
|
||||
}
|
||||
|
||||
#popup_content.prompt {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#popup_message {
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
#popup_content.prompt > div {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#popup_panel {
|
||||
text-align: center;
|
||||
margin: 1em 0 0 1em;
|
||||
}
|
||||
|
||||
#popup_prompt {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
#popup_panel input {
|
||||
cursor: pointer;
|
||||
color: #6e6e6e;
|
||||
font: bold 12px Helvetica, Arial, sans-serif;
|
||||
padding: 7px 12px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
-webkit-transition: border-color .218s;
|
||||
-moz-transition: border .218s;
|
||||
-ms-transition: border-color .218s;
|
||||
-o-transition: border-color .218s;
|
||||
transition: border-color .218s;
|
||||
background-color: #f3f3f3;
|
||||
border: solid 1px #dcdcdc;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-ms-border-radius: 2px;
|
||||
-o-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#popup_panel input:hover {
|
||||
color: #333;
|
||||
border-color: #999;
|
||||
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
-ms-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#popup_panel input:active {
|
||||
color: #000;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
#popup_ok {
|
||||
background: url(../images/icons/tick.png) 10px center no-repeat;
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
|
||||
#popup_cancel {
|
||||
background: url(../images/icons/slash.png) 10px center no-repeat;
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
|
||||
/* Dashboard */
|
||||
|
||||
#dashboard a.button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
333
assets/js/jquery.alerts.js
Normal file
333
assets/js/jquery.alerts.js
Normal file
@@ -0,0 +1,333 @@
|
||||
/*
|
||||
* jQuery Alert Dialogs Plugin
|
||||
*
|
||||
* Version 1.1
|
||||
*
|
||||
* Cory S.N. LaViska
|
||||
* A Beautiful Site (http://abeautifulsite.net/)
|
||||
* 14 May 2009
|
||||
*
|
||||
* Visit http://abeautifulsite.net/notebook/87 for more information
|
||||
*
|
||||
* Usage:
|
||||
* jAlert(message, [title, callback])
|
||||
* jConfirm(message, [title, callback])
|
||||
* jPrompt(message, [value, title, callback])
|
||||
*
|
||||
* License:
|
||||
*
|
||||
* This plugin is dual-licensed under the GNU General Public License and the MIT License and
|
||||
* is copyright 2008 A Beautiful Site, LLC.
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
$.alerts = {
|
||||
/**
|
||||
* Vertical offset (in pixels) of the dialog from center screen.
|
||||
*/
|
||||
verticalOffset: -75,
|
||||
|
||||
/**
|
||||
* Horizontal offset (in pixels) of the dialog from center screen.
|
||||
*/
|
||||
horizontalOffset: 0,
|
||||
|
||||
/**
|
||||
* Re-centers the dialog on window resize.
|
||||
*/
|
||||
repositionOnResize: true,
|
||||
|
||||
/**
|
||||
* Transparency level of overlay.
|
||||
*/
|
||||
overlayOpacity: .5,
|
||||
|
||||
/**
|
||||
* Base color of overlay.
|
||||
*/
|
||||
overlayColor: '#fff',
|
||||
|
||||
/**
|
||||
* Text for the OK button.
|
||||
*/
|
||||
okButton: ' OK ',
|
||||
|
||||
/**
|
||||
* Text for the cancel button.
|
||||
*/
|
||||
cancelButton: ' Cancel ',
|
||||
|
||||
/**
|
||||
* If specified, this class will be applied to all dialogs.
|
||||
*/
|
||||
dialogClass: null,
|
||||
|
||||
/**
|
||||
* Shows an alert box.
|
||||
*
|
||||
* @param message
|
||||
* @param title
|
||||
* @param callback
|
||||
*/
|
||||
alert: function(message, title, callback) {
|
||||
if (title == null) title = 'Alert';
|
||||
$.alerts._show(title, message, null, 'alert', function(result) {
|
||||
if (callback) callback(result);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows a confirmation box.
|
||||
*
|
||||
* @param message
|
||||
* @param title
|
||||
* @param callback
|
||||
*/
|
||||
confirm: function(message, title, callback) {
|
||||
if (title == null) title = 'Confirmation';
|
||||
$.alerts._show(title, message, null, 'confirm', function(result) {
|
||||
if (callback) callback(result);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows a prompt box.
|
||||
*
|
||||
* @param message
|
||||
* @param value
|
||||
* @param title
|
||||
* @param callback
|
||||
*/
|
||||
prompt: function(message, value, title, callback) {
|
||||
if (title == null) title = 'Prompt';
|
||||
$.alerts._show(title, message, value, 'prompt', function(result) {
|
||||
if (callback) callback(result);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows a popup box with the specified options.
|
||||
*
|
||||
* @param title
|
||||
* @param msg
|
||||
* @param value
|
||||
* @param type
|
||||
* @param callback
|
||||
*/
|
||||
_show: function(title, msg, value, type, callback) {
|
||||
$.alerts._hide();
|
||||
$.alerts._overlay('show');
|
||||
|
||||
$('BODY').append('<div id="popup_container"><h1 id="popup_title"></h1>'
|
||||
+ '<div id="popup_content"><div id="popup_message"></div></div></div>');
|
||||
|
||||
if ($.alerts.dialogClass) {
|
||||
$('#popup_container').addClass($.alerts.dialogClass);
|
||||
}
|
||||
|
||||
// IE6 Fix
|
||||
var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute' : 'fixed';
|
||||
|
||||
$('#popup_container').css({
|
||||
position: pos,
|
||||
zIndex: 99999,
|
||||
padding: 0,
|
||||
margin: 0
|
||||
});
|
||||
|
||||
$('#popup_title').text(title);
|
||||
$('#popup_content').addClass(type);
|
||||
$('#popup_message').text(msg);
|
||||
$('#popup_message').html($('#popup_message').text().replace(/\n/g, '<br />'));
|
||||
|
||||
$('#popup_container').css({
|
||||
minWidth: $('#popup_container').outerWidth(),
|
||||
maxWidth: $('#popup_container').outerWidth()
|
||||
});
|
||||
|
||||
$.alerts._reposition();
|
||||
$.alerts._maintainPosition(true);
|
||||
|
||||
switch (type) {
|
||||
case 'alert':
|
||||
$('#popup_message').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
|
||||
$('#popup_ok').click(function() {
|
||||
$.alerts._hide();
|
||||
callback(true);
|
||||
});
|
||||
$('#popup_ok').focus().keypress(function(e) {
|
||||
if (e.keyCode == 13 || e.keyCode == 27) {
|
||||
$('#popup_ok').trigger('click');
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'confirm':
|
||||
$('#popup_message').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
|
||||
$('#popup_ok').click(function() {
|
||||
$.alerts._hide();
|
||||
if (callback) callback(true);
|
||||
});
|
||||
$('#popup_cancel').click(function() {
|
||||
$.alerts._hide();
|
||||
if (callback) callback(false);
|
||||
});
|
||||
$('#popup_ok').focus();
|
||||
$('#popup_ok, #popup_cancel').keypress(function(e) {
|
||||
if (e.keyCode == 13) $("#popup_ok").trigger('click');
|
||||
if (e.keyCode == 27) $("#popup_cancel").trigger('click');
|
||||
});
|
||||
break;
|
||||
case 'prompt':
|
||||
$('#popup_message').append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
|
||||
$('#popup_prompt').width($('#popup_message').width());
|
||||
$('#popup_ok').click(function() {
|
||||
var val = $('#popup_prompt').val();
|
||||
$.alerts._hide();
|
||||
if (callback) callback(val);
|
||||
});
|
||||
$('#popup_cancel').click(function() {
|
||||
$.alerts._hide();
|
||||
if (callback) callback(null);
|
||||
});
|
||||
$('#popup_prompt, #popup_ok, #popup_cancel').keypress(function(e) {
|
||||
if (e.keyCode == 13) $('#popup_ok').trigger('click');
|
||||
if (e.keyCode == 27) $('#popup_cancel').trigger('click');
|
||||
});
|
||||
if (value) $('#popup_prompt').val(value);
|
||||
$('#popup_prompt').focus().select();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Hides the popup box.
|
||||
*/
|
||||
_hide: function() {
|
||||
$('#popup_container').remove();
|
||||
$.alerts._overlay('hide');
|
||||
$.alerts._maintainPosition(false);
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the overlay.
|
||||
*
|
||||
* @param status
|
||||
*/
|
||||
_overlay: function(status) {
|
||||
switch (status) {
|
||||
case 'show':
|
||||
$.alerts._overlay('hide');
|
||||
$('BODY').append('<div id="popup_overlay"></div>');
|
||||
$('#popup_overlay').css({
|
||||
position: 'absolute',
|
||||
zIndex: 99998,
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: $(document).height(),
|
||||
background: $.alerts.overlayColor,
|
||||
opacity: $.alerts.overlayOpacity
|
||||
});
|
||||
break;
|
||||
case 'hide':
|
||||
$('#popup_overlay').remove();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Repositions the popup box on window resize.
|
||||
*/
|
||||
_reposition: function() {
|
||||
var top = (($(window).height() / 2) - ($('#popup_container').outerHeight() / 2)) + $.alerts.verticalOffset;
|
||||
var left = (($(window).width() / 2) - ($('#popup_container').outerWidth() / 2)) + $.alerts.horizontalOffset;
|
||||
|
||||
if (top < 0) {
|
||||
top = 0;
|
||||
}
|
||||
if (left < 0) {
|
||||
left = 0;
|
||||
}
|
||||
|
||||
// IE6 fix
|
||||
if ($.browser.msie && parseInt($.browser.version) <= 6) {
|
||||
top = top + $(window).scrollTop();
|
||||
}
|
||||
|
||||
$('#popup_container').css({
|
||||
top: top + 'px',
|
||||
left: left + 'px'
|
||||
});
|
||||
$('#popup_overlay').height($(document).height());
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param status
|
||||
*/
|
||||
_maintainPosition: function(status) {
|
||||
if ($.alerts.repositionOnResize) {
|
||||
switch(status) {
|
||||
case true:
|
||||
$(window).bind('resize', $.alerts._reposition);
|
||||
break;
|
||||
case false:
|
||||
$(window).unbind('resize', $.alerts._reposition);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Shortcut function for alert boxes.
|
||||
*/
|
||||
jAlert = function(message, title, callback) {
|
||||
$.alerts.alert(message, title, callback);
|
||||
};
|
||||
|
||||
/**
|
||||
* Shortcut function for confirm boxes.
|
||||
*/
|
||||
jConfirm = function(message, title, callback) {
|
||||
$.alerts.confirm(message, title, callback);
|
||||
};
|
||||
|
||||
/**
|
||||
* Asks the user if he is sure to delete an item.
|
||||
*
|
||||
* @param url
|
||||
*/
|
||||
deleteConfirm = function(url) {
|
||||
var title = 'Delete Confirmation';
|
||||
|
||||
$.alerts.confirm('Are you sure you want to delete this item?', title, function(answer) {
|
||||
if (answer) {
|
||||
window.location = url;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Allows users to change titles.
|
||||
*/
|
||||
changeTitle = function(value, url) {
|
||||
var title = 'Change title';
|
||||
|
||||
$.alerts.prompt('Enter the new title:', value, title, function(text) {
|
||||
if (text) {
|
||||
$.post(url, { title: text }, function(data) {
|
||||
window.location = data;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Shortcut function for prompt boxes.
|
||||
*/
|
||||
jPrompt = function(message, value, title, callback) {
|
||||
$.alerts.prompt(message, value, title, callback);
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -9,19 +9,6 @@ function getNotifications() {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Asks the user if he is sure to delete an item.
|
||||
*
|
||||
* @param url
|
||||
*/
|
||||
function deleteConfirm(url) {
|
||||
var answer = confirm('Are you sure?');
|
||||
|
||||
if (answer) {
|
||||
window.location = url;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a cookie.
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user