TinyMCE "full screen" button doesn't work in block config

[Dirk Meyer]

Mahara 1504

It appears that the fullscreen is not fullscreen in 1504. I tried on a couple instances, including master.dev.mahara.org and various browsers. Adding screenshot also

To replicate:

1. Create a page
2. Go to the "Edit Content" tab
3. Put a text block onto the page
4. Click the "Toggle toolbars" button on TinyMCE to expose the fullscreen button (it's on the right end of the second row of buttons)
5. Click the "Fullscreen" button

Expected result:
TinyMCE goes to full screen (fills the whole browser window)

Actual result:
TinyMCE only fills the block config iframe. This actually makes it *smaller* than before.

[Dirk Meyer (dirkca68)]

attachment to previous post

[Aaron Wells (u-aaronw)]

This problem is only present in Mahara 15.04 & 15.10dev, and it's only on block configs, not TinyMCE's in other situations (like a page description).

Using git bisect I've traced it to this commit:

commit 141ee71b4a56c14023a7b3f2b7932934895bce0c
Author: Nigel Cunningham <email address hidden>
Date: Mon Dec 29 09:30:10 2014 +1100

    Bug1051844: Fix block configure dialog width.

    The configure dialog for blocks is currently set to a fixed width via
    Javascript, but there is no handler for browser resizing and it results in the
    dialogue being very wide for the sake of just one line when a license agreement
    is enabled.

    Fix this issue by making all dimensions percentages, and using a combination of
    max-width: 90% and width: max-content. In addition, make the dialog fixed
    position with its own scrollbars as needed (the body's scrollbar is disabled
    when the dialog is shown).

    Contextual help's width code and CSS is also adjusted so that it wraps within
    dialog boxes rather than pushing the width out.

    Change-Id: If2a40739f1510cedcf9a6133ccfb8f0a18257356

So it appears that it's a side effect of the code that we added to keep the block config from getting too wide when there was a wide piece of text in it. Perhaps what we need to do is hook into the TinyMCE fullscreen button and make it toggle the max-width and max-content on the dialog?

[Aaron Wells (u-aaronw)]

After a little experimentation, it looks like the problem is in the ".blockinstance.configure.vertcentre" CSS class. If you remove this line from that class, then the fullscreen button works again, in FF and Chromium.

   transform: translate( 50%, 50%);

I haven't tested it in IE yet, but there's an "-ms-transform" line in that same class, which probably does the same thing in IE.

However, just removing this style isn't the fix, because if you take this away, then when TinyMCE is not in full screen, the block config is off-center. The way that CSS block works, it uses "top" and "left" to position the top-left corner of the block in the middle of the screen, then it uses "transform" to shift the block itself to the middle.

So, we either need to find some other CSS that will achieve the same thing without interfering with the TinyMCE fullscreen button, or we need to patch the TinyMCE fullscreen button to disable this particular style.

[Dirk Meyer (dirkca68)]

Hi Aaron,

removing

transform: translate(-50%, -50%);

and

-ms-transform: translate(-50%, -50%);

didn't seem to make a difference to me. I added

height:1200px;
width:1200px;

 and it works pretty good in that the editor is bigger. In IE the top row of buttons is chopped off a little bit.

[Dirk Meyer (dirkca68)]

oh, when doing this, the editor width and height is bigger in the non-fullscreen also

[Aaron Wells (u-aaronw)]

Hi Dirk,

Which web browser (and version of the web browser) are you using?

Cheers,
Aaron

[Dirk Meyer (dirkca68)]

Hey Aaron,

FF: 38.0.1
Chrome: 42.0.2311.152 m
IE: 11.0.9600.17801

FF: very small window
Chrome: window is small but text area is bigger
IE: Full screen but freezes editor tabs and must escape by clicking back

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/4798

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/4798
Committed: https://git.nzoss.org.nz/mahara/mahara/commit/537eb4092bcd5cbc412fec6eaad04332e32b2020
Submitter: Aaron Wells (<email address hidden>)
Branch: master

commit 537eb4092bcd5cbc412fec6eaad04332e32b2020
Author: Son Nguyen <email address hidden>
Date: Wed May 27 10:53:55 2015 +1200

Remove classes .vertcentre .configure .blockinstane of
div#configureblock when enter fullscreen mode. Bug 1455265

As the class has transformations, it affect the fullscreen function
to get the correct position, width, and height values.

Change-Id: I3dbd590da8b1c992a296704a7c67b9f6394efad3

[Mahara Bot (dev-mahara)]

Patch for "15.04_STABLE" branch: https://reviews.mahara.org/4807

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/4807
Committed: https://git.nzoss.org.nz/mahara/mahara/commit/ccc91f2972b9b12dee13c122d6fcada3363ebb85
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.04_STABLE

commit ccc91f2972b9b12dee13c122d6fcada3363ebb85
Author: Son Nguyen <email address hidden>
Date: Wed May 27 10:53:55 2015 +1200

Remove classes .vertcentre .configure .blockinstane of
div#configureblock when enter fullscreen mode. Bug 1455265

As the class has transformations, it affect the fullscreen function
to get the correct position, width, and height values.

Change-Id: I3dbd590da8b1c992a296704a7c67b9f6394efad3
(cherry picked from commit 537eb4092bcd5cbc412fec6eaad04332e32b2020)