From cc20de329dd22639de042d11b43a186022189ee0 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Thu, 21 Feb 2019 19:47:17 +0100 Subject: [PATCH] Elastic: Use Bootstrap's custom file input ... with localization and some js logic to display selected file(s) in the input. --- program/include/rcmail.php | 3 +-- program/localization/en_US/labels.inc | 5 ++-- skins/elastic/styles/widgets/forms.less | 22 ++++++++++++++++- skins/elastic/templates/includes/layout.html | 3 +++ skins/elastic/ui.js | 25 ++++++++++++++++++-- 5 files changed, 51 insertions(+), 7 deletions(-) diff --git a/program/include/rcmail.php b/program/include/rcmail.php index f9d925eb2..3c4c5bd04 100644 --- a/program/include/rcmail.php +++ b/program/include/rcmail.php @@ -2127,8 +2127,7 @@ class rcmail extends rcube $content = $attrib['prefix'] . $input->show(); if ($attrib['mode'] != 'smart') { - $content = html::div(null, $content); - $content .= $hint; + $content = html::div(null, $content . $hint); } if (rcube_utils::get_boolean($attrib['buttons'])) { diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc index 71ac457e4..046103c4e 100644 --- a/program/localization/en_US/labels.inc +++ b/program/localization/en_US/labels.inc @@ -445,6 +445,9 @@ $labels['rename'] = 'Rename'; $labels['addphoto'] = 'Add'; $labels['replacephoto'] = 'Replace'; $labels['uploadphoto'] = 'Upload photo'; +$labels['choosefile'] = 'Choose file...'; +$labels['choosefiles'] = 'Choose files...'; +$labels['browse'] = 'Browse'; $labels['newcontact'] = 'Create new contact'; $labels['deletecontact'] = 'Delete selected contacts'; @@ -747,5 +750,3 @@ $labels['helplistkeyboardnavmessages'] = "Arrows right/left: expand/collapse mes Enter: Open the selected/focused message. Delete: Move selected messages to Trash."; $labels['helplistkeyboardnavcontacts'] = "Enter: Open the selected/focused contact."; - -?> diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index a3ebc1c2a..de31dbed2 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/skins/elastic/styles/widgets/forms.less @@ -1199,7 +1199,7 @@ html.ms .propform { } -/*** Bootstrap style overrides ***/ +/*** Bootstrap style overrides and improvements ***/ .form-control { 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; +} diff --git a/skins/elastic/templates/includes/layout.html b/skins/elastic/templates/includes/layout.html index a11a6b5b1..be7d14c21 100644 --- a/skins/elastic/templates/includes/layout.html +++ b/skins/elastic/templates/includes/layout.html @@ -7,6 +7,9 @@ + + + diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index f9be082bf..0f9f33fe6 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -796,7 +796,7 @@ function rcube_elastic_ui() } // 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'); $('[type=checkbox]', $('.propform', context)).addClass('form-check-input'); @@ -956,6 +956,27 @@ function rcube_elastic_ui() $('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 = $('