From 8ff20ac683413af4ea06e9d1b4afa69634d7daff Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sat, 9 Feb 2013 17:13:02 +0100 Subject: ellipsize infield labels when too long, specifically fix #871 for database labels on installation --- core/css/styles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'core') diff --git a/core/css/styles.css b/core/css/styles.css index 556ca6b82bb..6c9704b16c3 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -177,7 +177,11 @@ input[name="password-clone"] { padding-left:1.8em; width:11.7em !important; } #login .groupmiddle label, #login .groupbottom label { top:.65em; } p.infield { position:relative; } label.infield { cursor:text !important; top:1.05em; left:.85em; } -#login form label.infield { position:absolute; font-size:19px; color:#aaa; white-space:nowrap; padding-left:1.4em; } +#login form label.infield { /* labels are ellipsized when too long, keep them short */ + position:absolute; width:90%; padding-left:1.4em; + font-size:19px; color:#aaa; + white-space:nowrap; overflow:hidden; text-overflow:ellipsis; +} #login #databaseField .infield { padding-left:0; } #login form input[type="checkbox"]+label { position:relative; margin:0; font-size:1em; text-shadow:#fff 0 1px 0; } #login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; } -- cgit v1.2.3 From e68e5cc849b625dccc38b903fd19e418d62d1c22 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 11 Feb 2013 15:18:14 +0100 Subject: Split editable select code used for quota selection into a jquery plugin --- core/js/singleselect.js | 76 +++++ settings/css/settings.css | 1 - settings/js/users.js | 792 ++++++++++++++++++++----------------------- settings/templates/users.php | 62 ++-- settings/users.php | 1 + 5 files changed, 475 insertions(+), 457 deletions(-) create mode 100644 core/js/singleselect.js (limited to 'core') diff --git a/core/js/singleselect.js b/core/js/singleselect.js new file mode 100644 index 00000000000..1a018b74148 --- /dev/null +++ b/core/js/singleselect.js @@ -0,0 +1,76 @@ +(function ($) { + $.fn.singleSelect = function () { + return this.each(function (i, select) { + var input = $(''); + select = $(select); + input.css('position', 'absolute'); + input.css(select.offset()); + input.css({ + 'box-sizing': 'border-box', + '-moz-box-sizing': 'border-box', + 'margin': 0, + 'width': (select.width() - 5) + 'px', + 'height': (select.outerHeight() - 2) + 'px', + 'border': 'none', + 'box-shadow': 'none', + 'margin-top': '1px', + 'margin-left': '1px', + 'z-index': 1000 + }); + input.hide(); + $('body').append(input); + + select.on('change', function (event) { + var value = $(this).val(), + newAttr = $('option:selected', $(this)).attr('data-new'); + if (!(typeof newAttr !== 'undefined' && newAttr !== false)) { + input.hide(); + select.data('previous', value); + } else { + event.stopImmediatePropagation(); + input.show(); + select.css('background-color', 'white'); + input.focus(); + } + }); + + $(select).data('previous', $(select).val()); + + input.on('change', function () { + var value = $(this).val(); + if (value) { + select.children().attr('selected', null); + var existingOption = select.children().filter(function (i, option) { + return ($(option).val() == value); + }); + if (existingOption.length) { + existingOption.attr('selected', 'selected'); + } else { + var option = $('