Commit 141ee71b authored by Nigel Cunningham's avatar Nigel Cunningham
Browse files

Bug1051844: Fix block configure dialog width.

The configure dialog for blocks is currently set to a fixed width via
Javascript, but there is no handler for browser resizing and it results in the
dialogue being very wide for the sake of just one line when a license agreement
is enabled.

Fix this issue by making all dimensions percentages, and using a combination of
max-width: 90% and width: max-content. In addition, make the dialog fixed
position with its own scrollbars as needed (the body's scrollbar is disabled
when the dialog is shown).

Contextual help's width code and CSS is also adjusted so that it wraps within
dialog boxes rather than pushing the width out.

Change-Id: If2a40739f1510cedcf9a6133ccfb8f0a18257356
parent e20841c0
......@@ -7,9 +7,6 @@ $j('#instconf_select_container input[type="radio"][value="0"]').click(function()
$j('#externalgalleryhelp').addClass('hidden');
$j('#instconf_folder_header').removeClass('hidden');
$j('#instconf_folder_container').removeClass('hidden');
// Recalculate the width of config block
var width = getElementDimensions($('instconf_folder_container')).w;
updateBlockConfigWidth(getFirstParentByTagAndClassName($('instconf_folder_container'), 'div', 'blockinstance'), width);
});
$j('#instconf_select_container input[type="radio"][value="1"]').click(function() {
$j('#instconf_folder_header').addClass('hidden');
......@@ -20,9 +17,6 @@ $j('#instconf_select_container input[type="radio"][value="1"]').click(function()
$j('#externalgalleryhelp').addClass('hidden');
$j('#instconf_images_header').removeClass('hidden');
$j('#instconf_images_container').removeClass('hidden');
// Recalculate the width of config block
var width = getElementDimensions($('instconf_images_container')).w;
updateBlockConfigWidth(getFirstParentByTagAndClassName($('instconf_images_container'), 'div', 'blockinstance'), width);
});
$j('#instconf_select_container input[type="radio"][value="2"]').click(function() {
$j('#instconf_images_header').addClass('hidden');
......@@ -33,9 +27,6 @@ $j('#instconf_select_container input[type="radio"][value="2"]').click(function()
$j('#instconf_external_container').removeClass('hidden');
$j('#instconf_external').removeClass('hidden');
$j('#externalgalleryhelp').removeClass('hidden');
// Recalculate the width of config block
var width = getElementDimensions($('instconf_external_container')).w;
updateBlockConfigWidth(getFirstParentByTagAndClassName($('instconf_external_container'), 'div', 'blockinstance'), width);
});
$j('#instconf_style_container input[type="radio"][value="0"]').click(function () {
$j('#instconf_width').val('75');
......
......@@ -331,12 +331,6 @@ function FileBrowser(idprefix, folderid, config, globalconfig) {
return false;
});
// Recalculate the width of config block
if ($('artefactchooser-body')) {
var width = getElementDimensions(getFirstParentByTagAndClassName($('artefactchooser-body'), 'td', null)).w;
updateBlockConfigWidth(getFirstParentByTagAndClassName(self.form, 'div', 'blockinstance'), width);
}
return false;
}
......@@ -917,11 +911,6 @@ function FileBrowser(idprefix, folderid, config, globalconfig) {
}
self.init();
}
// Recalculate the width of config block
if ($('artefactchooser-body')) {
var width = getElementDimensions(getFirstParentByTagAndClassName($('artefactchooser-body'), 'table', 'maharatable')).w;
updateBlockConfigWidth(getFirstParentByTagAndClassName(self.form, 'div', 'blockinstance'), width);
}
}
}
......
......@@ -213,9 +213,6 @@ function updateTextContent(a) {
removeElementClass('instconf_tagsreadonly_header', 'hidden');
removeElementClass('instconf_tagsreadonly_container', 'hidden');
}
if (table = getFirstParentByTagAndClassName($('instconf_text_container'), 'table', 'maharatable')) {
updateBlockConfigWidth(getFirstParentByTagAndClassName(table, 'div', 'blockinstance'), getElementDimensions(table).w);
}
}
connect('chooseartefactlink', 'onclick', function(e) {
e.stop();
......
......@@ -490,8 +490,6 @@ function contextualHelpPosition(ref, contextualHelpContainer) {
if (containerwidth >= screenwidth) {
// Very small screen, resize the help box to fit
var margin = containerwidth - $j(contextualHelpContainer).width();
$j(contextualHelpContainer).css('width', screenwidth - margin);
position.left = oldposition.left - oldoffset.left;
}
else {
......
......@@ -392,7 +392,6 @@
});
addblockdialog.find('h2.title').text(get_string('addblock', element.text()));
computeColumnInputs(addblockdialog);
setDialogPosition(addblockdialog);
$('body').append($('<div>').attr('id', 'overlay'));
......@@ -710,8 +709,6 @@
});
addblockdialog.find('h2.title').text(get_string('moveblock'));
setDialogPosition(addblockdialog);
$('body').append($('<div>').attr('id', 'overlay'));
addblockdialog.find('.deletebutton').focus();
......@@ -921,7 +918,6 @@
*/
function setupPositionBlockDialog() {
$('body').append($('#addblock'));
$('#addblock').css('width', 500);
$('#addblock .cancel, #addblock .deletebutton').on('mousedown keydown', function(e) {
if (isHit(e)) {
......@@ -1206,13 +1202,12 @@
newblock.find('.blockinstance-header').html(title);
newblock.find('.blockinstance-content').html(content);
$('body').append(newblock);
$('body').addClass('dialog_visible');
var blockinstanceId = temp.find('.blockinstance').attr('id');
blockinstanceId = blockinstanceId.substr(0, blockinstanceId.length - '_configure'.length);
blockinstanceId = blockinstanceId.substr(blockinstanceId.lastIndexOf('_') + 1);
setDialogPosition(newblock);
var deletebutton = newblock.find('input.deletebutton');
deletebutton.unbind().attr('name', 'action_removeblockinstance_id_' + blockinstanceId);
......@@ -1257,49 +1252,10 @@
$('div.configure').each( function() {
$(this).addClass('hidden');
});
$('body').removeClass('dialog_visible');
}, 1);
}
/*
* Moves the given dialog so that it's centered on the screen
*/
function setDialogPosition(block) {
var style = {
'position': 'absolute',
'z-index': 1
};
var d = {
'w': block.width(),
'h': block.height()
}
var vpdim = {
'w': $(window).width(),
'h': $(window).height()
}
var h = Math.max(d.h, 200);
var w = Math.max(d.w, 625);
if (config.blockeditormaxwidth && block.find('textarea.wysiwyg').length) {
w = vpdim.w - 80;
style.height = h + 'px';
}
var tborder = parseFloat(block.css('border-top-width'));
var tpadding = parseFloat(block.css('padding-top'));
var newtop = getViewportPosition().y + Math.max((vpdim.h - h) / 2 - tborder - tpadding, 5);
style.top = newtop + 'px';
var lborder = parseFloat(block.css('border-left-width'));
var lpadding = parseFloat(block.css('padding-left'));
style.left = ((vpdim.w - w) / 2 - lborder - lpadding) + 'px';
style.width = w + 'px';
for (var prop in style) {
block.css(prop, style[prop]);
}
}
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling===b? a : a.nextSibling;
......@@ -1411,18 +1367,3 @@ function blockConfigError(form, data) {
return;
}
}
function updateBlockConfigWidth(configblock, width) {
var vpdim = getViewportDimensions();
var w = Math.max(width, 625);
var style = {
'position': 'absolute',
'z-index': 1
};
var lborder = parseFloat(getStyle(configblock, 'border-left-width'));
var lpadding = parseFloat(getStyle(configblock, 'padding-left'));
style.left = ((vpdim.w - w) / 2 - lborder - lpadding) + 'px';
style.width = w + 'px';
setStyle(configblock, style);
}
......@@ -283,7 +283,7 @@ function Pieform(data) {//{{{
self.iframe = createDOM('iframe', {
'name': iframeName,
'id' : iframeName,
'style': 'position: absolute; visibility: hidden;'
'style': 'position: absolute; visibility: hidden; height: 0px; width: 0px;'
});
insertSiblingNodesAfter(self.data.name, self.iframe);
}
......
......@@ -94,10 +94,6 @@ ul.colnav li a:active {
.columns5 {
width: 48% !important;
}
.blockinstance.configure {
width: 80% !important;
left: 5% !important;
}
}
/* for 600px or less */
......@@ -132,3 +128,20 @@ ul.colnav li a:active {
padding: 0 0.9% 3px 0.9%;
}
}
/* Class applied by Javascript */
.blockinstance.configure.vertcentre {
left: 50%;
margin-left: auto;
margin-right: auto;
max-width: 90%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: -moz-max-content;
width: -webkit-max-content;
}
body.dialog_visible {
overflow: hidden;
}
......@@ -273,7 +273,7 @@ img.close:focus {
.contextualHelp {
padding: 10px;
margin: 0;
width: 500px;
max-width: 500px;
max-height: 400px;
overflow: auto;
background-color: #F9F9F9;
......@@ -2530,6 +2530,15 @@ a:active .home-info-box p {
.filelist td.filedate {
padding: 8px 5px;
}
/* Get the filename to wrap nicely. Important for dialogs */
td.filename {
word-wrap: break-word;
white-space: normal;
word-break: break-all;
width: auto;
}
/* edit row background */
tr.editrow,
tr.editrow td,
......@@ -4848,3 +4857,20 @@ ul.artefactchooser-tabs li a:active, ul.artefactchooser-tabs li a:focus, ul.arte
background: none repeat scroll 0 0 #d4d4d4;
outline: medium none;
}
/* Class applied by Javascript */
.blockinstance.configure.vertcentre {
left: 50%;
margin-left: auto;
margin-right: auto;
max-width: 90%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: -moz-max-content;
width: -webkit-max-content;
}
body.dialog_visible {
overflow: hidden;
}
......@@ -81,7 +81,7 @@
{if $block.javascript}<script type="application/javascript">{$block.javascript|safe}</script>{/if}
{/if}
</div>
<div id="addblock" class="blockinstance cb configure hidden" role="dialog" aria-labelledby="addblock-heading" tabindex="-1">
<div id="addblock" class="blockinstance cb configure vertcentre hidden" role="dialog" aria-labelledby="addblock-heading" tabindex="-1">
<div class="blockinstance-controls">
<input type="image" src="{theme_url filename=images/btn_close.png}" class="deletebutton" name="action_removeblockinstance_id_{$id}" alt="{str tag=Close}">
</div>
......@@ -92,7 +92,7 @@
{$addform|safe}
</div>
</div>
<div id="configureblock" class="blockinstance cb configure hidden" role="dialog">
<div id="configureblock" class="blockinstance cb configure vertcentre hidden" role="dialog">
<div class="blockinstance-controls">
<input type="image" src="{theme_url filename=images/btn_close.png}" class="deletebutton" name="close_configuration" alt="{str tag=closeconfiguration section=view}">
</div>
......
......@@ -603,9 +603,6 @@ div.blockinstance-header .retractor {
margin-bottom: 3px;
}
/* block content */
.blockinstance-content {
overflow-x: hidden;
}
.blockinstance-content .shortcut {
padding: 5px;
background: #EEEEEE;
......@@ -748,12 +745,12 @@ ul.artefactchooser-subtabs li.current a:active {
/******************** Configure blockinstance ********************/
.blockinstance.configure {
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 10px;
padding: 1%;
z-index: 12 !important;
max-width: 85%;
font-size: 0.75em;
position: fixed;
overflow-y: auto;
max-height: 90%;
}
#micro .configure {
font-size: 0.75em;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment