? Success

User tests: Successful: Unsuccessful:

avatar dgt41
dgt41
22 Jan 2015

Move Media field to layouts and use Bootstrap modal + popover

This is for version 3.5

Moves media field to layouts
Uses bootstrap for the modal
Uses popover for the image preview

Preview:
screen shot 2015-01-22 at 11 58 43
screen shot 2015-01-22 at 11 59 07

B/C

None, if we use multiple layouts (e.g. at joomla root one that uses mootools, and on isis and protostar one that uses bootstrap)

Testing

Try to re edit a banner on backend and select an image...

avatar dgt41 dgt41 - open - 22 Jan 2015
avatar jissues-bot jissues-bot - change - 22 Jan 2015
Labels Added: ?
avatar jissues-bot jissues-bot - change - 22 Jan 2015
Labels Added: ?
avatar dgt41
dgt41 - comment - 23 Jan 2015

@Fedik yes you are right, the variable descriptions are missing.
Also creating a media-js.php file is questionable (it doesn’t follow any known pattern)
@okonomiyaki3000 is doing something similar at #5863
So I guess it would be nice if a pattern could be established for layout assets (js, css)

avatar zero-24 zero-24 - change - 23 Jan 2015
Category Layout Libraries
avatar zero-24 zero-24 - change - 23 Jan 2015
Easy No Yes
avatar Fedik
Fedik - comment - 23 Jan 2015

@dgt41 please keep format:

/**
 * @var string $variable1
 * @var string $variable2 
 */

as it can be recognized by some IDE

avatar zero-24 zero-24 - change - 23 Jan 2015
Milestone Added:
avatar dgt41 dgt41 - reference | - 28 Jan 15
avatar dgt41
dgt41 - comment - 3 Feb 2015

@mbabker Michael you have any solution to this com_media/views mess? What I did, and I don’t like it at all, was to duplicate the views from admin area. I guess there should be a way to use the admin files but also have the ability to override in the from end template.

avatar mbabker
mbabker - comment - 3 Feb 2015

The issue ultimately lies in JViewLegacy::_addPath() and how it adds lookup paths. Essentially, every additional path that's added to the lookup array gets bumped to the front of the line. The first way I can think to make this work is that when $this->getView() is called in MediaController::display(), we'll have to inject the base_path option into the config array so that the base lookup path is always JPATH_COMPONENT_ADMINISTRATOR (since the site component has no views). Doing that, the default behavior of setting the template paths should work as it'll first prefer administrator/components/com_media/views/<whatever> then fall back to the active template regardless of site or admin.

avatar phproberto phproberto - change - 3 Feb 2015
Milestone Added:
avatar designbengel designbengel - test_item - 14 Mar 2015 - Tested unsuccessfully
avatar designbengel
designbengel - comment - 14 Mar 2015

Modals are cut off and not responsive. See screenshots for details.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.
avatar designbengel
designbengel - comment - 14 Mar 2015

screen shot 2015-03-14 at 08 08 16screen shot 2015-03-14 at 08 08 19


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.
avatar dgt41
dgt41 - comment - 14 Mar 2015

@designbengel I am not getting this and frankly this cannot happen as the modal width is set as a percentage of the window with (80%). mot probably your emulator is messing up there

avatar adhocgraFX adhocgraFX - test_item - 14 Mar 2015 - Tested unsuccessfully
avatar adhocgraFX
adhocgraFX - comment - 14 Mar 2015

Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\test\administrator\templates\isis\html\layouts\joomla\form\field\media.php on line 138


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.
avatar dgt41
dgt41 - comment - 14 Mar 2015

@adhocgraFX
Please try reapplying the patch as line 138 is just pure html </div>
Also can you provide some more infos how to replicate this?

avatar adhocgraFX
adhocgraFX - comment - 15 Mar 2015

@dgt41 got same error on another pc/ xamp installation / same php settings: display errors = On, error reporting = E ALL | E STRICT, safe mode = Off, magic quotes gpc = Off


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.
avatar dgt41
dgt41 - comment - 15 Mar 2015

@adhocgraFX what’s in line 138 of C:\xampp\htdocs\test\administrator\templates\isis\html\layouts\joomla\form\field\media.php
?
Suppose that this is where the error is thrown..

avatar dgt41
dgt41 - comment - 15 Mar 2015

@adhocgraFX And also which view triggered this error?

avatar adhocgraFX
adhocgraFX - comment - 15 Mar 2015

e.g. in http://localhost/joomla-cms/administrator/index.php?option=com_banners&view=banner&layout=edit&id=2
but in more tested views like com contact and so on
media php, line 138: the closing div
i changed now in line 125 and 128 <? endif; ?> to <?php endif; ?>
and now it works >
i'm not a pro-programmer, but i think, this was the issue, better ask @mbabker too

avatar dgt41
dgt41 - comment - 15 Mar 2015

@adhocgraFX I must admit I was looking at the wrong file

avatar N6REJ
N6REJ - comment - 16 Mar 2015

I thought we weren't supposed to use "short codes" in J!?
Bear
On 3/15/2015 16:33, adhocgraFX wrote:

e.g. in
http://localhost/joomla-cms/administrator/index.php?option=com_banners&view=banner&layout=edit&id=2

but in more tested views like com contact and so on
media php, line 138:
i changed now in line 125 and 128 <? endif; ?> to <?php endif; ?>
and now it works >
i'm not a pro-programmer, but i think, this was the issue, better ask
@mbabker https://github.com/mbabker too


Reply to this email directly or view it on GitHub
#5871 (comment).

No virus found in this message.
Checked by AVG - www.avg.com http://www.avg.com
Version: 2015.0.5751 / Virus Database: 4306/9306 - Release Date: 03/15/15

avatar mbabker
mbabker - comment - 16 Mar 2015

We don't use them in Joomla core and IIRC in PHP 5.3 short PHP codes are something that can be turned off.

avatar dgt41
dgt41 - comment - 16 Mar 2015

@N6REJ @mbabker Actually I never intended to use short codes, that was a typo

avatar adhocgraFX adhocgraFX - test_item - 16 Mar 2015 - Tested successfully
avatar n9iels
n9iels - comment - 25 Mar 2015

Good move! I have test this PR using the select image field in Global configuration and noticed a few things:

  • On the latest version of Google Chrome, I see two scrollbars inside the modal. image-modal
  • On iPhone 5 the select image field and the model himself are fall outside the viewport.
  • Very small detail: the preview button only has rounded corners when hover.
  • When scrolling inside the modal, and you reach the end, the rest of the page is scrolling farther. Not sure if this is specifiek for your PR, or a bug in all Bootstrap modals.

Maybe you can add the #6462 (when that PR is merged)? That will brings the buttons on a more logical place in my opinion.
Edit: oops, just see your the person that makes that PR :smile:

avatar dgt41
dgt41 - comment - 25 Mar 2015

@n9iels thanks for testing
most of the bugs you mention here are caused because of a change in modals height in 3.4.1 which obviously has to be taken into consideration here! (the height of the iframe is way to big that’s the reason for the blank space and the double scrollbars)
The idea for the buttons at the bottom is a nice one and I have to implemented here and also to other modals (we need some consistency)
preview button: thats a minor css thing
On iPhone 5 the select image field and the model: again css thing

BUT this awaits the new layouts renderer, which is still not coded, so actually, even if it seems ready, it has to wait for 3.5

avatar Harmageddon
Harmageddon - comment - 18 Apr 2015

I just tested this to see if it fixes #6799. In Isis, the image preview works fine. The path tooltips however only seem to work when I select a new image after applying the patch. For images which were set before applying the patch, I don't get tooltips. Tested in the "images and links" section of the article form.
As you already remarked, @dgt41, the behavior of this patch is not consistent in Isis and Hathor. Not sure if it is related to this problem, but I don't see a good reason for creating overrides for Isis, our default admin template.

avatar dgt41
dgt41 - comment - 27 Apr 2015

@Harmageddon The tooltip should be fine for stored values as well now!
About the different layout in Hathor this was intended so people can test both layouts (mootools and bootstrap). I guess when the layout renderer is ready and all the tests are good here copying the overrides to hathor shouldn’t be a problem.
@n9iels I made some changes:
buttons should be fine now,
iPhone should have no problems.

And the bootstrap modal footer:
screen shot 2015-04-27 at 5 57 00

avatar n9iels
n9iels - comment - 27 Apr 2015

@test Stil found some view-poort bug for iPhone:
media modal iphone

On desktop, the "Choose directory" is cut of, and still have 2 scroll bars:
media modal

On your screenshot, this issn't the matter. Maybe a different display size? I'm using a 23 insh monitor

avatar dgt41
dgt41 - comment - 27 Apr 2015

@n9iels the message "Geen bestand…" which is running out of screen is a browser specific (check the code) thus it might seem broken in emulator but in iOS should render fine.
This a real rendering with IOS 8.3 and iPhone 6
img_0065

But I wouldn’t care too much for the inner part of the modal, as with the new media manager this will change ????

avatar n9iels
n9iels - comment - 27 Apr 2015

didn't knew that, thanks for the information.
I hope the new media manger will come soon :)

avatar dgt41
dgt41 - comment - 28 Apr 2015

@mbabker this doesn’t look good: PHP Fatal error: require(): Cannot redeclare class php_codecoverage_report_xml_tests in /home/travis/.phpenv/versions/5.3.29/bin/phpunit on line 208

avatar dgt41 dgt41 - change - 1 May 2015
Milestone Removed:
avatar dgt41 dgt41 - change - 2 May 2015
Milestone Removed:
avatar dgt41 dgt41 - change - 2 May 2015
Milestone Removed:
avatar dgt41 dgt41 - change - 5 May 2015
Milestone Removed:
avatar dgt41
dgt41 - comment - 6 Jun 2015

The last iteration restores the scrolling on iOS devices and sets a more proper height for the iframe
img_0135

avatar anibalsanchez
anibalsanchez - comment - 14 Jun 2015

#Test OK

One step closer to drop mootools. Congratulations!


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar anibalsanchez anibalsanchez - test_item - 14 Jun 2015 - Tested successfully
avatar zero-24 zero-24 - alter_testresult - 17 Jun 2015 - designbengel: Not tested
avatar zero-24 zero-24 - change - 17 Jun 2015
Status Pending Ready to Commit
avatar zero-24 zero-24 - change - 17 Jun 2015
Labels Added: ?
avatar Kubik-Rubik
Kubik-Rubik - comment - 10 Jul 2015

Restarted Travis process.

avatar frogydiak
frogydiak - comment - 16 Aug 2015

Sorry to mix in with different perspective but have anyone noticed that it is nothing but an uploader? It should not be called Media Manager at all. IMO, the popup should have Create Folder, Delete Folder, Move files, Copy files functionalities within the popup.

avatar dgt41
dgt41 - comment - 16 Aug 2015

@frogydiak There is a PR for a new Media manager #3839 you can take this idea there

avatar dgt41 dgt41 - change - 3 Oct 2015
Status Ready to Commit Pending
avatar joomla-cms-bot joomla-cms-bot - change - 3 Oct 2015
Labels Removed: ?
avatar dgt41
dgt41 - comment - 12 Oct 2015

@Fedik To relief some of the pain with the reputable I end up using exactly the same function as the old mootools code, and make some other changes so the values are injected automagically from the calling element. So in theory you only have to replace the id’s on the span for the preview, on the input field and on the remove button (as well as the actual modal id). And then override the modal toggler. Should be a bit easier. I hope so!

avatar Fedik
Fedik - comment - 12 Oct 2015

@dgt41 thank you for the work!
hope I will find some time this week to check it more

avatar Fedik
Fedik - comment - 17 Oct 2015

it close to what I thought but still hardly linked to ID,
please check alternative dgt41#22 :wink:

avatar dgt41
dgt41 - comment - 22 Oct 2015

What has changed since the last RTC:

  • Dropped the inline script by utilizing data attributes for passing the variables from PHP to JS
  • Introduced mediafield.js and mediafield-mootools.js as well as their minified versions
  • Introduce minified version for the rest of the media scripts
  • Changes in the HTML structure followed by changes in the javascript to ensure that the field will be compatible with the repeatable fields
  • Bring the tabs from #3839 thanks @Buddhima
  • Drop the media/images/default.php override in Isis and Protostar (don't ask)
  • Include the recommendations from @phproberto to utilize a function getLayoutData()

Please test again, to get this ready for 3.5

avatar joomla-cms-bot
joomla-cms-bot - comment - 28 Oct 2015

This PR has received new commits.

CC: @adhocgraFX, @anibalsanchez, @designbengel


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar zero-24 zero-24 - test_item - 28 Oct 2015 - Tested successfully
avatar zero-24
zero-24 - comment - 28 Oct 2015

I have tested this item :white_check_mark: successfully on 5838d66

Works good. I like the improvment e.g. the new "Tab" for uploading. Thanks.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar designbengel
designbengel - comment - 1 Nov 2015

There are two scrollbars in the modal that might cause issues on touch devises?
bildschirmfoto 2015-11-01 um 17 57 53

avatar dgt41
dgt41 - comment - 2 Nov 2015

@designbengel no problem for the mobiles (or smaller screen devices)

img_0236

I made some minor touches so another test is needed...

avatar joomla-cms-bot
joomla-cms-bot - comment - 2 Nov 2015

This PR has received new commits.

CC: @adhocgraFX, @anibalsanchez, @designbengel, @zero-24


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar zero-24
zero-24 - comment - 3 Nov 2015

@dgt41 this is how it looks on chrome now:
media_field_chrome

avatar dgt41
dgt41 - comment - 3 Nov 2015

@zero-24 now all browsers are looking good ;)
joomla-git - administration - articles edit 2015-11-03 18-17-10

avatar zero-24
zero-24 - comment - 3 Nov 2015

Ok looks good now to me. Just on very minimal code comment ;) :+1:

avatar zero-24 zero-24 - test_item - 3 Nov 2015 - Tested successfully
avatar zero-24
zero-24 - comment - 3 Nov 2015

I have tested this item :white_check_mark: successfully on 3934118


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar zero-24 zero-24 - test_item - 3 Nov 2015 - Tested successfully
avatar zero-24
zero-24 - comment - 3 Nov 2015

I have tested this item :white_check_mark: successfully on ab0da6d


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar dgt41
dgt41 - comment - 3 Nov 2015

In case anyone tries to test this you need to apply also #8248

avatar joomla-cms-bot
joomla-cms-bot - comment - 4 Nov 2015

This PR has received new commits.

CC: @adhocgraFX, @anibalsanchez, @designbengel, @zero-24


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar joomla-cms-bot
joomla-cms-bot - comment - 5 Nov 2015

This PR has received new commits.

CC: @adhocgraFX, @anibalsanchez, @designbengel, @zero-24


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar phproberto
phproberto - comment - 5 Nov 2015

I see the scroll bar overlapped here too.

media-modal

avatar dgt41
dgt41 - comment - 5 Nov 2015

@phproberto can you try emptying browsers cache?

avatar joomla-cms-bot
joomla-cms-bot - comment - 5 Nov 2015

This PR has received new commits.

CC: @adhocgraFX, @anibalsanchez, @designbengel, @zero-24


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar joomla-cms-bot
joomla-cms-bot - comment - 5 Nov 2015

This PR has received new commits.

CC: @adhocgraFX, @anibalsanchez, @designbengel, @zero-24


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar phproberto phproberto - test_item - 5 Nov 2015 - Tested successfully
avatar phproberto
phproberto - comment - 5 Nov 2015

I have tested this item :white_check_mark: successfully on f5df125

Everything works now. Thanks!


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar designbengel designbengel - test_item - 5 Nov 2015 - Tested successfully
avatar designbengel
designbengel - comment - 5 Nov 2015

I have tested this item :white_check_mark: successfully on f5df125


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar zero-24 zero-24 - change - 5 Nov 2015
Status Pending Ready to Commit
avatar zero-24
zero-24 - comment - 5 Nov 2015

RTC Thanks :)


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5871.

avatar joomla-cms-bot joomla-cms-bot - change - 5 Nov 2015
Labels Added: ?
avatar wilsonge wilsonge - change - 6 Nov 2015
Status Ready to Commit Closed
Closed_Date 0000-00-00 00:00:00 2015-11-06 01:36:56
Closed_By wilsonge
avatar wilsonge wilsonge - close - 6 Nov 2015
avatar joomla-cms-bot joomla-cms-bot - close - 6 Nov 2015
avatar wilsonge wilsonge - reference | 2e4dc23 - 6 Nov 15
avatar wilsonge wilsonge - merge - 6 Nov 2015
avatar wilsonge wilsonge - close - 6 Nov 2015
avatar joomla-cms-bot joomla-cms-bot - change - 6 Nov 2015
Labels Removed: ?
avatar dgt41 dgt41 - head_ref_deleted - 6 Nov 2015
avatar infograf768
infograf768 - comment - 10 Nov 2015

This has created a regression
See: #8367

Add a Comment

Login with GitHub to post a comment