Move Media field to layouts and use Bootstrap modal and popover by dgrammatiko · Pull Request #5871 · joomla/joomla-cms

dgrammatiko · 2015-01-22T22:06:29Z

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:

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...

Fedik · 2015-01-23T09:35:17Z

layouts/joomla/form/field/media-js.php

please add variable descriptions,

/** * Layout variables * @var string $previewWidth Some description * @var string $previewHeight */

same for other layouts

dgrammatiko · 2015-01-23T10:56:07Z

@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)

Fedik · 2015-01-23T11:37:10Z

@DGT41 please keep format:

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

as it can be recognized by some IDE

Michael

dgrammatiko · 2015-02-03T13:40:04Z

@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.

mbabker · 2015-02-03T13:55:53Z

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.

dgrammatiko · 2015-02-03T14:35:06Z

administrator/components/com_media/controller.php

@mbabker This works for me, with or without template override, frontend or backend. But I end up refactoring a little bit this part of the controller. Is that ok?

Do we really need to move the getView calls? In theory only the two views are usable from the front-end, but should something be refactored to make the media manager more usable in that context, we're just going to end up moving things around again. I'd also really suggest not making this coupled to the existence of a single file; what I suggested with injecting the path into the getView call should suffice for all cases without extra conditionals.

$view->set('_basePath', $this->basePath); will do the trick but fronted overrides are not working, and the point here is to have a template override coupled with a layout so designers can do their thing!

My main point is that you don't need to move the view instantiation into the switch conditional or add this if conditional if you inject the base path when the view is created in the original spot as I suggested. JViewLegacy will always prefer the active template override then fall back to the base path if no other paths are specified. Forcing the base path to JPATH_COMPONENT_ADMINISTRATOR via the parameter injection ensures that com_media's admin layouts are ALWAYS the last path lookup with the active template (regardless of site or admin request) taking a higher precedence in the path lookup.

@mbabker You were absolutely right! Thanks!

coolcat-creations · 2015-03-14T13:07:51Z

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.}

coolcat-creations · 2015-03-14T13:08:23Z

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

dgrammatiko · 2015-03-14T13:12:58Z

@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

adhocgraFX · 2015-03-14T14:51:25Z

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.}

dgrammatiko · 2015-03-14T15:01:11Z

@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?

adhocgraFX · 2015-03-15T20:57:10Z

@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.}

dgrammatiko · 2015-03-15T21:07:29Z

@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..

dgrammatiko · 2015-03-15T21:09:06Z

@adhocgraFX And also which view triggered this error?

adhocgraFX · 2015-03-15T21:33:28Z

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 to
and now it works >
i'm not a pro-programmer, but i think, this was the issue, better ask @mbabker too

dgrammatiko · 2015-03-15T21:42:53Z

@adhocgraFX I must admit I was looking at the wrong file 🙈 Thanks for finding this, should be fixed now

N6REJ · 2015-03-16T05:56:03Z

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 to
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

mbabker · 2015-03-16T12:15:55Z

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

dgrammatiko · 2015-03-16T12:52:52Z

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

n9iels · 2015-03-25T20:54:24Z

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.
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 😄

dgrammatiko · 2015-03-25T22:31:29Z

@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

Harmageddon · 2015-04-18T19:04:33Z

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.

zero-24 · 2015-11-03T16:47:38Z

I have tested this item ✅ successfully on 3934118

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

zero-24 · 2015-11-03T16:56:00Z

I have tested this item ✅ successfully on ab0da6d

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

dgrammatiko · 2015-11-03T16:57:34Z

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

joomla-cms-bot · 2015-11-04T15:15:25Z

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.}

@Fedik

commit 20f33603153abf96a5165e24e81c63afe226ff35 Author: dgt41 <d.grammatiko@gmail.com> Date: Wed Oct 28 04:31:17 2015 +0200 footer + close commit b435efa7f4916e5082d7162b3368861c671c98b6 Author: dgt41 <d.grammatiko@gmail.com> Date: Wed Oct 28 04:03:14 2015 +0200 introduce listener for hide event commit 25aafb2739904b8decd066f8e7b77464401339a7 Author: dgt41 <d.grammatiko@gmail.com> Date: Thu Oct 22 17:22:17 2015 +0300 scripts commit ef79e3a73af8e6f772890e4c8c1bae679550053c Author: dgt41 <d.grammatiko@gmail.com> Date: Thu Oct 22 17:00:32 2015 +0300 Compatibility with repeatable BIG Kudos to @Fedik commit fd0a6f5eab152766a963bb7a6e27cdae12fe734a Author: dgt41 <d.grammatiko@gmail.com> Date: Mon Oct 12 05:28:10 2015 +0300 element driven approach commit 7b695b2feb244512d022d997ab208ff9e0f59c83 Author: dgt41 <d.grammatiko@gmail.com> Date: Sun Oct 4 04:42:31 2015 +0300 More changes - Drop the overrides in Isis and Protostar (don't ask) - Bring the tabs from #3839 thanks @Buddhima commit 1d67fbd1e5f3201394359400f516c60c09350775 Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Oct 3 23:14:28 2015 +0300 scripts update commit 30214204249a7cc157ce83cc4404770738d91cfd Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Oct 3 23:09:02 2015 +0300 oops commit 82c0a024ad8eaeedcc96740156da68a1f6f16e97 Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Oct 3 22:32:33 2015 +0300 changes for repeatable field commit dd7e31790fc871c2fe24f726669bf1c3347fe32a Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Oct 3 21:26:36 2015 +0300 Remove more hardcoded staff commit 9bee6919e1150621401a1c828688c74e3440e55d Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Oct 3 18:40:52 2015 +0300 wrong flags commit 4cc2a26cfbf62998f2f98c7a78e28fd02a778c86 Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Oct 3 18:20:47 2015 +0300 Remove the inline script for field initialization commit 9aab0e4ad9f2d010b09065037b5dcfa5242a96bc Author: dgt41 <d.grammatiko@gmail.com> Date: Mon Jun 15 06:41:28 2015 +0300 Better B/C, xtd-btns changes commit 47b4d29f08d0966409ab00fdcebcff50a8fe789f Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Jun 6 15:30:59 2015 +0300 set proper height, restore scrolling for ios commit 027f83611e23c8b4a3bd1a61b57cb8cb28c3b20a Author: dgt41 <d.grammatiko@gmail.com> Date: Sat Jun 6 00:02:09 2015 +0300 hidden link for editor_xtd image plugin commit 22bb0c14ae3e90c756b3b2079175a69e67daa3ca Author: dgt41 <d.grammatiko@gmail.com> Date: Wed Jun 3 14:32:04 2015 +0300 proper usage of JHtml commit a1f6b119ce3cdbb444f7a25a5b6ef402cb538b94 Author: dgt41 <d.grammatiko@gmail.com> Date: Tue May 5 12:33:39 2015 +0300 needless commit 9fcc4d52fafcfc26cb0895886b5e33c56bc6b26e Author: dgt41 <d.grammatiko@gmail.com> Date: Fri May 1 23:11:08 2015 +0300 javascript to file commit e1edf9010cb22b202b04a4add87df7be14e29e02 Author: dgt41 <d.grammatiko@gmail.com> Date: Mon Apr 27 20:03:54 2015 +0300 oops commit 2d2a6b97f737650a3dfb158974186dbffdca8ca2 Author: dgt41 <d.grammatiko@gmail.com> Date: Mon Apr 27 18:28:52 2015 +0300 clear button commit 0283dfd84781c75ed16acc7fe6f4daa57c8e5d90 Author: dgt41 <d.grammatiko@gmail.com> Date: Mon Apr 27 17:57:19 2015 +0300 footer commit af2dd3feab9767ff1813895ad2f3d5f359b26d50 Author: dgt41 <d.grammatiko@gmail.com> Date: Mon Apr 27 14:54:10 2015 +0300 minor js + class changes commit d1f36cd3021d959a18e34364ff4550bfbce99664 Author: dgt41 <d.grammatiko@gmail.com> Date: Sun Mar 15 23:59:06 2015 +0200 needless commit f6ff19773e15769545e2b61cdbb11d9e1d6d6478 Author: dgt41 <d.grammatiko@gmail.com> Date: Sun Mar 15 23:41:43 2015 +0200 tag correction commit 0295b41123b09c301734be558d1719ece4d7fdeb Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Feb 27 04:07:34 2015 +0200 Support editor image button plugin commit 004c91b472e5d2fd7f0db9d6fb59e9e91e770bfe Author: dgt41 <d.grammatiko@gmail.com> Date: Thu Feb 12 15:33:15 2015 +0200 Use the mootools version as default for B/C commit 6871f1483d30b1cf0758697f06ea0367016e2791 Author: dgt41 <d.grammatiko@gmail.com> Date: Tue Feb 3 16:38:28 2015 +0200 CS commit f256aee48f956b0b29957dd490cf29a4b25252be Author: dgt41 <d.grammatiko@gmail.com> Date: Tue Feb 3 16:25:20 2015 +0200 remove front end views commit 9c7a6d6df1f88523f4d9b6836cc26c6e42b7dc56 Author: dgt41 <d.grammatiko@gmail.com> Date: Tue Feb 3 02:47:56 2015 +0200 Tooltip follows selection commit 2e0d0278922a3bfd33d897646b197d2a1de859b2 Author: dgt41 <d.grammatiko@gmail.com> Date: Thu Jan 29 02:28:43 2015 +0200 let media use overrides + better close script commit ff7934243baa3b546dd9f988c386a53132e6edb9 Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Jan 23 13:47:51 2015 +0200 var format commit 1ef8d3fc4de6a7a427bba9ee84498eff337a778c Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Jan 23 13:34:29 2015 +0200 Var descriptions commit 9fc2312126243de4c9f291cdc51b726c6a091e68 Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Jan 23 03:11:50 2015 +0200 JS commit 881e78e3fcad6e016340254973c0bf3d04730fb7 Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Jan 23 02:07:21 2015 +0200 CS commit abbe9a4a95f47b7d642e1eb7a88147ee27ddb969 Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Jan 23 01:21:24 2015 +0200 some checks commit b45ed910ab3137bb069acabd84df905f215d5e61 Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Jan 23 00:48:32 2015 +0200 CS commit f95f31a7ce58589e31d1d9f743806b361355fca5 Author: dgt41 <d.grammatiko@gmail.com> Date: Thu Jan 22 23:53:13 2015 +0200 popover commit 6762aebfdc4b80dceea2a2877c2aa5c9986f0b5a Author: dgt41 <d.grammatiko@gmail.com> Date: Fri Jan 9 23:49:27 2015 +0200 for review

- when modal is shown: background is not scrollable - Add overflow: auto; for modal body - better layout of thumbs for small screens, was 1 column now is 2

Fixes the always visible scroll bars

joomla-cms-bot · 2015-11-05T14:10:28Z

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.}

phproberto · 2015-11-05T15:12:48Z

I see the scroll bar overlapped here too.

dgrammatiko · 2015-11-05T15:30:45Z

@phproberto can you try emptying browsers cache?

joomla-cms-bot · 2015-11-05T15:49:53Z

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.}

joomla-cms-bot · 2015-11-05T16:28:24Z

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.}

phproberto · 2015-11-05T16:44:34Z

I have tested this item ✅ successfully on f5df125

Everything works now. Thanks!

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

coolcat-creations · 2015-11-05T18:20:42Z

I have tested this item ✅ successfully on f5df125

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

zero-24 · 2015-11-05T21:20:48Z

RTC Thanks :)

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

Move Media field to layouts and use Bootstrap modal and popover

infograf768 · 2015-11-10T11:52:23Z

This has created a regression
See: #8367

jissues-bot added the PR-staging label Jan 22, 2015

dgrammatiko mentioned this pull request Jan 22, 2015

Media form field uses mootools modal #5861

Closed

Fedik reviewed Jan 23, 2015
View reviewed changes

dgrammatiko referenced this pull request Jan 28, 2015

# [#28376] Remove unnecessary files from com_media frontend. Thanks

fe5e454

Michael

dgrammatiko reviewed Feb 3, 2015
View reviewed changes

peterlose mentioned this pull request Feb 3, 2015

Change how tooltips look #5957

Closed

phproberto added this to the Joomla! 3.5.0 milestone Feb 3, 2015

dgrammatiko mentioned this pull request Feb 27, 2015

Move editor plugin buttons modals to Bootstrap #5652

Closed

dgrammatiko mentioned this pull request Mar 27, 2015

Introduce modal footer with close button for bootstrap modals #6595

Closed

dgrammatiko mentioned this pull request Apr 18, 2015

Tooltip for image field in article shows wrong path #6799

Closed

dgrammatiko added 5 commits November 5, 2015 16:10

minor touches:

0d58c2b

- when modal is shown: background is not scrollable - Add overflow: auto; for modal body - better layout of thumbs for small screens, was 1 column now is 2

getInput exception

4094523

Overflow should be hidden not auto

e6257f9

Fixes the always visible scroll bars

JFactory...

b1b6f18

Fix the mootools version eg hathor

a04afa0

css fixes

f5df125

This was referenced Nov 5, 2015

Move form field user to layouts and use Bootstrap modal #5655

Merged

Versions using layouts and bootstrap #5654

Merged

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Nov 5, 2015

wilsonge added a commit that referenced this pull request Nov 6, 2015

Merge pull request #5871 from dgt41/_field_media

2e4dc23

Move Media field to layouts and use Bootstrap modal and popover

wilsonge merged commit 2e4dc23 into joomla:staging Nov 6, 2015

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Nov 6, 2015

dgrammatiko deleted the _field_media branch November 6, 2015 01:42

infograf768 mentioned this pull request Nov 10, 2015

[3.5-beta1] Select hides behind batch modal footer #8367

Closed

dgrammatiko mentioned this pull request Jan 15, 2016

K2 Dev Build - Close button not working on add new item modal box from K2 User getk2/k2#263

Closed

dgrammatiko mentioned this pull request Jun 3, 2016

Sub Form Field (small problems) #10718

Closed

Uh oh!

Conversation

dgrammatiko commented Jan 22, 2015

Move Media field to layouts and use Bootstrap modal + popover

This is for version 3.5

B/C

Uh oh!

Fedik Jan 23, 2015

Choose a reason for hiding this comment

Uh oh!

dgrammatiko commented Jan 23, 2015

Uh oh!

Fedik commented Jan 23, 2015

Uh oh!

dgrammatiko commented Feb 3, 2015

Uh oh!

mbabker commented Feb 3, 2015

Uh oh!

dgrammatiko Feb 3, 2015

Choose a reason for hiding this comment

Uh oh!

mbabker Feb 3, 2015

Choose a reason for hiding this comment

Uh oh!

dgrammatiko Feb 3, 2015

Choose a reason for hiding this comment

Uh oh!

mbabker Feb 3, 2015

Choose a reason for hiding this comment

Uh oh!

dgrammatiko Feb 12, 2015

Choose a reason for hiding this comment

Uh oh!

coolcat-creations commented Mar 14, 2015

Uh oh!

coolcat-creations commented Mar 14, 2015

Uh oh!

dgrammatiko commented Mar 14, 2015

Uh oh!

adhocgraFX commented Mar 14, 2015

Uh oh!

dgrammatiko commented Mar 14, 2015

Uh oh!

adhocgraFX commented Mar 15, 2015

Uh oh!

dgrammatiko commented Mar 15, 2015

Uh oh!

dgrammatiko commented Mar 15, 2015

Uh oh!

adhocgraFX commented Mar 15, 2015

Uh oh!

dgrammatiko commented Mar 15, 2015

Uh oh!

N6REJ commented Mar 16, 2015

Uh oh!

mbabker commented Mar 16, 2015

Uh oh!

dgrammatiko commented Mar 16, 2015

Uh oh!

n9iels commented Mar 25, 2015

Uh oh!

dgrammatiko commented Mar 25, 2015

Uh oh!

Harmageddon commented Apr 18, 2015

Uh oh!

zero-24 commented Nov 3, 2015

Uh oh!

zero-24 commented Nov 3, 2015

Uh oh!

dgrammatiko commented Nov 3, 2015

Uh oh!

joomla-cms-bot commented Nov 4, 2015

Uh oh!

joomla-cms-bot commented Nov 5, 2015

Uh oh!

phproberto commented Nov 5, 2015

Uh oh!

dgrammatiko commented Nov 5, 2015

Uh oh!

joomla-cms-bot commented Nov 5, 2015