Compact image modal layout #22475

ciar4n · 2018-10-03T09:32:56Z

Pull Request for Issue # .

Summary of Changes

Compacts the media field modal layout and increases modal size. Removes the double scroll bar on larger screens. Currently, there are 3 options to close. This PR removes the close button in the footer (admin).

Testing Instructions

Apply PR and open administration media modal (media field -> select).

Before

After

Documentation Changes Required

Quy · 2018-10-03T13:27:26Z

administrator/components/com_media/views/images/tmpl/default.php

+				<div class="span4 control-group">
+					<div class="pull-right">
+						<button class="btn btn-success button-save-selected" type="button" <?php if (!empty($onClick)) :
+						// This is for Mootools compatibility ?>onclick="<?php echo $onClick; ?>"<?php endif; ?> data-dismiss="modal"><?php echo JText::_('COM_MEDIA_INSERT'); ?></button>


Indent to match below?

Quy · 2018-10-03T13:48:01Z

Hopefully, you can come up with a fix for this related issue #17551.

ciar4n · 2018-10-05T13:21:48Z

Hopefully, you can come up with a fix for this related issue #17551.

I will have a look. Better suited for a separate PR as it will likely touch all tiny mce modals.

Quy · 2018-10-05T13:34:42Z

Toolbar is no longer pinned with this PR.

ciar4n · 2018-10-05T13:56:37Z

Not sure if I understand. Would you have a screenshot?

Quy · 2018-10-05T14:03:05Z

With this PR, go to Content > Articles, scroll down and the toolbar goes off screen and no longer is pinned.

ciar4n · 2018-10-05T14:06:04Z

Strangely I am unable to replicate this issue. Toolbar is sticking in both Firefox and Chrome.

Quy · 2018-10-05T14:15:49Z

Using your branch, it is not an issue. However, with beta4 and patchtester, then it is reproducible.

mbabker · 2018-10-05T14:42:33Z

An issue because of patchtester doesn't mean the patch has issues. It could very well be there is another change after beta 4 that patchtester isn't applying which is causing what you're seeing.

It is literally impossible to make patchtester behave the same as if you're running git apply PR.diff because the CMS environment does not have the git environment data necessary to generate the appropriate diffs.

Quy · 2018-10-05T15:31:23Z

I have tested this item ✅ successfully on ed85e70

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

brianteeman · 2018-10-31T00:08:25Z

It's better but I still have a small scroll (unlike your screenshot)

Tested on Chrome 70 Windows

…mage-modal

ciar4n · 2019-01-17T13:25:33Z

@brianteeman Should be ok now.

Quy · 2019-01-18T00:19:54Z

I have tested this item ✅ successfully on c2d7df2

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

brianteeman · 2019-01-26T17:18:18Z

Tested again with
Firefox 64.0.2 (64-bit) Windows
Version 71.0.3578.98 (Official Build) (64-bit) Windows

I still have the same results as in #22475 (comment)

…mage-modal

ghost · 2019-04-24T12:07:28Z

I have tested this item ✅ successfully on 2f7270c

System information

3.9, latest nightly build
Template: Protostar
macOS High Sierra, 10.13.6
Firefox 66 (64-bit)

CloudAccess.net

PHP 7.1.27
MySQLi 5.7.24-cll-lve

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

viocassel · 2019-05-18T18:57:13Z

I have tested this item ✅ successfully on 2f7270c

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

ghost · 2019-05-19T04:55:30Z

Status "Ready To Commit".

roland-d · 2019-05-19T05:27:47Z

I don't think this can be RTC as @brianteeman is still seeing an issue

ghost · 2019-05-19T05:33:10Z

@roland-d thanks, had only looked at number of tests.

Status back on "Pending".

Quy · 2019-06-12T04:44:57Z

@brianteeman Can you please test again?

Tested fine on Windows 10:
Firefox 67.0.2
Chrome 75.0.3770.80

Quy · 2019-06-14T18:56:11Z

@roland-d We have 3 successful tests. I can't reproduce the issue Brian is having. Can we please merge it anyway? It is better than before and deal with the issue Brian has in a later PR if more people report it.

roland-d · 2019-06-14T18:59:19Z

@HLeithner As release leader, I will let you decide.

HLeithner · 2019-06-15T09:01:11Z

It works for me fine in ff and vivaldi. I have have no idea why brian has this problem but I think its better to merge it then having the current state.

thx

ciar4n · 2019-06-17T07:31:59Z

Thanks all for the tests

ciar4n added 4 commits October 2, 2018 08:36

Media field style and layout

bf4b374

Small screen considerations

785df96

Tweaks

39b6f9f

Revert js change

e336bfb

joomla-cms-bot added the PR-staging label Oct 3, 2018

Quy reviewed Oct 3, 2018

View reviewed changes

indent

ed85e70

ciar4n added 2 commits January 17, 2019 13:19

Merge branch 'staging' of https://github.com/joomla/joomla-cms into i…

35896f0

…mage-modal

Fix scroll in chrome

c2d7df2

Merge branch 'staging' of https://github.com/joomla/joomla-cms into i…

2f7270c

…mage-modal

ghost added the J3 Issue label Apr 5, 2019

ghost changed the title ~~[isis] Compact image modal layout~~ Compact image modal layout Apr 19, 2019

ghost removed the J3 Issue label Apr 19, 2019

ghost added the J3 Issue label May 19, 2019

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label May 19, 2019

ghost removed the J3 Issue label May 19, 2019

ghost added J3 Issue and removed RTC This Pull Request is Ready To Commit labels May 19, 2019

ghost removed the J3 Issue label May 19, 2019

Merge branch 'staging' into image-modal

0bce379

HLeithner merged commit 6c6824f into joomla:staging Jun 15, 2019

HLeithner added this to the Joomla 3.9.9 milestone Jun 15, 2019

ciar4n deleted the image-modal branch June 17, 2019 07:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compact image modal layout #22475

Compact image modal layout #22475

ciar4n commented Oct 3, 2018

Quy Oct 3, 2018

Quy commented Oct 3, 2018

ciar4n commented Oct 5, 2018

Quy commented Oct 5, 2018

ciar4n commented Oct 5, 2018

Quy commented Oct 5, 2018 •

edited

ciar4n commented Oct 5, 2018

Quy commented Oct 5, 2018

mbabker commented Oct 5, 2018

Quy commented Oct 5, 2018

brianteeman commented Oct 31, 2018

ciar4n commented Jan 17, 2019

Quy commented Jan 18, 2019

brianteeman commented Jan 26, 2019

ghost commented Apr 24, 2019 •

edited by ghost

viocassel commented May 18, 2019

ghost commented May 19, 2019

roland-d commented May 19, 2019

ghost commented May 19, 2019

Quy commented Jun 12, 2019

Quy commented Jun 14, 2019

roland-d commented Jun 14, 2019

HLeithner commented Jun 15, 2019

ciar4n commented Jun 17, 2019 •

edited

Compact image modal layout #22475

Compact image modal layout #22475

Conversation

ciar4n commented Oct 3, 2018

Summary of Changes

Testing Instructions

Before

After

Documentation Changes Required

Quy Oct 3, 2018

Choose a reason for hiding this comment

Quy commented Oct 3, 2018

ciar4n commented Oct 5, 2018

Quy commented Oct 5, 2018

ciar4n commented Oct 5, 2018

Quy commented Oct 5, 2018 • edited

ciar4n commented Oct 5, 2018

Quy commented Oct 5, 2018

mbabker commented Oct 5, 2018

Quy commented Oct 5, 2018

brianteeman commented Oct 31, 2018

ciar4n commented Jan 17, 2019

Quy commented Jan 18, 2019

brianteeman commented Jan 26, 2019

ghost commented Apr 24, 2019 • edited by ghost

System information

CloudAccess.net

viocassel commented May 18, 2019

ghost commented May 19, 2019

roland-d commented May 19, 2019

ghost commented May 19, 2019

Quy commented Jun 12, 2019

Quy commented Jun 14, 2019

roland-d commented Jun 14, 2019

HLeithner commented Jun 15, 2019

ciar4n commented Jun 17, 2019 • edited

Quy commented Oct 5, 2018 •

edited

ghost commented Apr 24, 2019 •

edited by ghost

ciar4n commented Jun 17, 2019 •

edited