banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Elastic: Use Bootstrap's custom file input

Browse Source 
... with localization and some js logic to display selected file(s) in the input.
pull/6643/head
Aleksander Machniak 6 years ago
parent ede90c1f8c
commit cc20de329d
5 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File

3
program/include/rcmail.php
Unescape Escape View File

@ -2127,8 +2127,7 @@ class rcmail extends rcube
$content = $attrib['prefix'] . $input->show(); $content = $attrib['prefix'] . $input->show();
if ($attrib['mode'] != 'smart') { if ($attrib['mode'] != 'smart') {
$content = html::div(null, $content); $content = html::div(null, $content . $hint);
$content .= $hint;
} }
if (rcube_utils::get_boolean($attrib['buttons'])) { if (rcube_utils::get_boolean($attrib['buttons'])) {

5
program/localization/en_US/labels.inc
Unescape Escape View File

@ -445,6 +445,9 @@ $labels['rename'] = 'Rename';
$labels['addphoto'] = 'Add'; $labels['addphoto'] = 'Add';
$labels['replacephoto'] = 'Replace'; $labels['replacephoto'] = 'Replace';
$labels['uploadphoto'] = 'Upload photo'; $labels['uploadphoto'] = 'Upload photo';
$labels['choosefile'] = 'Choose file...';
$labels['choosefiles'] = 'Choose files...';
$labels['browse'] = 'Browse';
$labels['newcontact'] = 'Create new contact'; $labels['newcontact'] = 'Create new contact';
$labels['deletecontact'] = 'Delete selected contacts'; $labels['deletecontact'] = 'Delete selected contacts';
@ -747,5 +750,3 @@ $labels['helplistkeyboardnavmessages'] = "Arrows right/left: expand/collapse mes
Enter: Open the selected/focused message. Enter: Open the selected/focused message.
Delete: Move selected messages to Trash."; Delete: Move selected messages to Trash.";
$labels['helplistkeyboardnavcontacts'] = "Enter: Open the selected/focused contact."; $labels['helplistkeyboardnavcontacts'] = "Enter: Open the selected/focused contact.";
?>

22
skins/elastic/styles/widgets/forms.less
Unescape Escape View File

@ -1199,7 +1199,7 @@ html.ms .propform {
} }
/*** Bootstrap style overrides ***/ /*** Bootstrap style overrides and improvements ***/
.form-control { .form-control {
color: @color-font; color: @color-font;
@ -1329,3 +1329,23 @@ html.ms .propform {
} }
} }
} }
.custom-file {
display: block;
.custom-file-label {
white-space: nowrap;
.overflow-ellipsis;
padding-right: 100px;
line-height: 1.5 !important;
}
& + .hint {
margin-top: .25rem;
}
}
.custom-file-input:focus ~ .custom-file-label {
border-color: @color-input-border-focus;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
}

3
skins/elastic/templates/includes/layout.html
Unescape Escape View File

@ -7,6 +7,9 @@
<roundcube:add_label name="next" /> <roundcube:add_label name="next" />
<roundcube:add_label name="select" /> <roundcube:add_label name="select" />
<roundcube:add_label name="close" /> <roundcube:add_label name="close" />
<roundcube:add_label name="browse" />
<roundcube:add_label name="choosefile" />
<roundcube:add_label name="choosefiles" />
<roundcube:object name="doctype" value="html5" /> <roundcube:object name="doctype" value="html5" />
<roundcube:if condition="!env:framed || env:extwin" /> <roundcube:if condition="!env:framed || env:extwin" />
<html> <html>

25
skins/elastic/ui.js
Unescape Escape View File

@ -796,7 +796,7 @@ function rcube_elastic_ui()
} }
// Forms // Forms
var supported_controls = 'input:not(.button,.no-bs,[type=button],[type=file],[type=radio],[type=checkbox]),textarea'; var supported_controls = 'input:not(.button,.no-bs,[type=button],[type=radio],[type=checkbox]),textarea';
$(supported_controls, $('.propform', context)).addClass('form-control'); $(supported_controls, $('.propform', context)).addClass('form-control');
$('[type=checkbox]', $('.propform', context)).addClass('form-check-input'); $('[type=checkbox]', $('.propform', context)).addClass('form-check-input');
@ -956,6 +956,27 @@ function rcube_elastic_ui()
$('a.nav-link:first', nav).click(); $('a.nav-link:first', nav).click();
}); });
$('input[type=file]:not(.custom-file-input)', context).each(function() {
var label_text = rcmail.gettext('choosefile' + (this.multiple ? 's' : '')),
label = $('<label>').attr({'class': 'custom-file-label',
'data-browse': rcmail.gettext('browse')}).text(label_text);
$(this).addClass('custom-file-input').wrap('<div class="custom-file">');
$(this).on('change', function() {
var text = label_text;
if (this.files.length) {
text = this.files[0].name;
if (this.files.length > 1) {
text += ', ...';
}
}
// Note: We don't use label variable to allow cloning of the input
$(this).next().text(text);
})
.parent().append(label);
});
// Make tables pretier // Make tables pretier
$('table:not(.table,.propform,.listing,.ui-datepicker-calendar)', context) $('table:not(.table,.propform,.listing,.ui-datepicker-calendar)', context)
.filter(function() { .filter(function() {
@ -2612,7 +2633,7 @@ function rcube_elastic_ui()
} }
var content = $('#uploadform'), var content = $('#uploadform'),
dialog = content.clone(); dialog = content.clone(true);
var save_func = function(e) { var save_func = function(e) {
return rcmail.command('import-messages', $(dialog.find('form')[0])); return rcmail.command('import-messages', $(dialog.find('form')[0]));

Write Preview
Loading…
Cancel
Save