Refactory com_banners tracks export modal + new toolbar button layout

[cyrezdev]

Pull Request for Issue #10911 & PR #10927 (improve it).

Summary of Changes

Download Tracks Modal:

• Fix and improve HTML rendering (use renderField)
• No tooltip for File Name, as description is a bit long (and not always easy to use tooltip when long description).
• New form field type note for File Name description in a alert-info style.
• Tooltip placement bottom for Compressed label (prevent tooltip cropped at top when in iframe)
• Buttons in the BS modal footer
• Using new viewport dimensions
• HATHOR : modal was broken! This PR fixes it in Hathor Template, and add overrides to adapt rendering.

New Generic Toolbar Button Layout:

• appendButton using a new toolbar button layout:

$selector = $displayData['selector'];
$class    = isset($displayData['class']) ? $displayData['class'] : 'btn btn-small';
$icon     = isset($displayData['icon']) ? $displayData['icon'] : 'out-3';
$text     = isset($displayData['text']) ? $displayData['text'] : '';
?>
<button class="<?php echo $class; ?>" data-toggle="modal" data-target="#<?php echo $selector; ?>">
    <span class="icon-<?php echo $icon; ?>"></span>
    <?php echo $text; ?>
</button>

Testing Instructions

To be tested on staging or 3.6.0-beta

• Test on Isis template (api) and Hathor template (overrides)
• Go to Components > Banners > Tracks
• Click on Export toolbar button
• Check tooltip placement
• Test Cancel and Export buttons now in modal footer

Isis admin template
Before:

After:

Hathor admin template
Before:

After:

[RonakParmar]

@JoomliC Thanks for fixing tooptip issue.
One suggestion: I have applied this latest PR and found that we have scroll-bar in our iframe modal.
Checked that .jviewport-height50 { height: 50vh;} applied, Is it possible to set height:60vh or Is it dynamically applied to iframe?
It will remove the scroll-bar and will look nice.

[brianteeman]

I have tested this item ✅ successfully on 215efce

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[cyrezdev]

One suggestion: I have applied this latest PR and found that we have scroll-bar in our iframe modal.
Checked that .jviewport-height50 { height: 50vh;} applied, Is it possible to set height:60vh or Is it dynamically applied to iframe?

Thanks @RonakParmar for feedback!
About new modal parameters for modal introduced in 3.6.0, this is set in the view here: https://github.com/joomla/joomla-cms/pull/10934/files#diff-4b21245c193bec415dbe082fd9486de3R96
(viewport dimensions introduced with this PR : #10388)

But, if an issue with scrolling, should be related to this one (dynamically add of scrolling): #9817

So, could you attached a screenshot of issue, as well as some information: screnn size, browser and its version, OS ?
It could help to see where your issue comes from (as scrolling should appear only when modal body content is too high for the rendered modal).

Thanks!

[RonakParmar]

Here is my system information as much as possible:
PHP Built On : Linux 126-UBUNTU 3.5.0-54-generic #81precise1-Ubuntu SMP Tue Jul 15 04:02:22 UTC 2014 x86_64
Database Version : 5.5.49-0ubuntu0.12.04.1
PHP Version : 5.4.45-3+donate.sury.orgprecise+3
Web Server : Apache/2.2.22 (Ubuntu)

Joomla! Version : Joomla! 3.6.0-beta2 Beta [ Noether ] 16-June-2016 13:54 GMT
Joomla! Platform Version : Joomla Platform 13.1.0 Stable [ Curiosity ] 24-Apr-2013 00:00 GMT
User Agent : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[RonakParmar]

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[cyrezdev]

@RonakParmar you screen shot shows no issue in scrolling (i mean it works as expected, and that's good!).
But your screen view is a bit "panoramic".
Is it a resized window or a standard view of your device? (as 50/100 viewport height for standard screen size seems ok...)

@brianteeman does 50vh height was ok for you in Isis test of this PR ? (or a 60vh height could be better: https://github.com/joomla/joomla-cms/pull/10934/files#diff-4b21245c193bec415dbe082fd9486de3R96 ?)

[brianteeman]

After applying the PR it looks fine to me

[RonakParmar]

It's a standard view of my device, I do not change my screen size.
Screen resolution: 19"
1366 x 768 (16:9)

[joomla-cms-bot]

This PR has received new commits.

CC: @brianteeman

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[cyrezdev]

Thanks @brianteeman ! I have just updated a little the PR by not using viewport height which may not change a bit for you, and then works too for @RonakParmar's screen size ;-)

@RonakParmar Thanks for screen size!
Tested and confirm that's not good with this screen size.
In the same time, as the content is not high, i have removed the viewport height, to use only the ifram height, set now to 370px which seems to be the good value for this content.

Could you test back this PR with this minor adjustment, thanks!

[brianteeman]

I have tested this item ✅ successfully on 5340062

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[RonakParmar]

I have tested this item ✅ successfully on 5340062

No scroll-bar now. @JoomliC Thank you to fix this.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[kalpeshtailored]

I have tested this item ✅ successfully on 5340062

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[cyrezdev]

Thanks everybody for testing 👍

[brianteeman]

rtc

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10934.}

[zero-24]

@joomla-cms-bot please let me know if you have holiday too than we can take that tasks 🌴