Commit graph

81 commits

Author SHA1 Message Date
jenkins-bot b7a78685ef Merge "RealtimePreview: Add drop shadow to floating button" 2024-03-13 23:55:07 +00:00
jenkins-bot f31fc338ed Merge "RealtimePreview: Use LESS nesting in ResizingDragBar" 2024-03-13 23:46:00 +00:00
jenkins-bot ccd8760ac0 Merge "Fix overlap between preview button and edit switcher" 2024-03-13 23:45:58 +00:00
jenkins-bot daf81ae37a Merge "ResizingDragBar: force CodeMirror to have 100% height" 2024-03-13 23:35:36 +00:00
Ed Sanders aab2a44fd9 RealtimePreview: Add drop shadow to floating button
In general, floating elements use a subtle dropdown
e.g. "Return to reply" button in DiscussionTools.

Change-Id: If3363557e3f85bbb3000b75e98d5130be1017e2f
2024-03-12 11:19:01 -07:00
Ed Sanders 864f39b359 RealtimePreview: Use LESS nesting in ResizingDragBar
Change-Id: I47b9840291907d764036c7917e3b2bad908ba7af
2024-03-12 11:19:01 -07:00
Ed Sanders 7837e3952c Fix overlap between preview button and edit switcher
These buttons can appear in any order depending on when
the code loads. Remove the default OOUI button negative
margin.

Replace group padding with margin now there is no negative
margin on the buttons.

Change-Id: Id2ebf7aa0b27da1d03d56f59e8a9a96f7656106d
2024-03-12 11:18:50 -07:00
Ed Sanders 008e2c5a94 Tweak monobook padding for realtimepreview-button
Change-Id: I6756a65d9b654ed2a23b168c88b7c80ded9f952f
2024-03-11 17:55:16 -07:00
MusikAnimal 178a731b6e ResizingDragBar: force CodeMirror to have 100% height
The ResizingDragBar makes the editor resizable, so we need to set the
CodeMirror height to 100%. Previous attempts to fix this at
Ib49d1d9e71 and I4deeda192b suffered from race conditions based on
which modules loaded first. We can avoid this by simply putting the CSS
rule here in WikiEditor.

Bug: T357794
Follow-Up: I4deeda192bdc233101ba61739a636f8fd143c1de
Change-Id: Ia5e9767e0814eac29d58bc0d9c1023344a29dd84
2024-03-07 16:38:45 -05:00
Sam Wilson f1bcbe75c3 Realtime Preview: also trigger on form.reset()
If the form is reset, make sure that the preview is re-run.
There isn't actually any reset button in the normal edit
form, but Edit Recovery uses reset() to remove any
recovered data, and if RTP is open when that's done the preview
needs to be updated.

Bug: T351821
Depends-On: I1ec757d5ddd9f0db66496c6aaef70747d93a5c83
Change-Id: I30481edae4c071e8586ac1dc7d587bd550965967
2023-12-08 16:00:04 +00:00
Ed Sanders e02c689cdd Fix remaining uses of 'parent'->'super'
Bug: T120821
Change-Id: Ie3b14562b045cee98ffb241e604b5b234cafd699
2023-11-02 17:11:24 +00:00
thiemowmde ac8c355e20 Fix unrelated elements flickering during realtime preview
Steps to reproduce:
* Start making changes to a page in the classic editor.
* Use the normal "Show preview" or "Show diff" button at the bottom
  of the editor. The page reloads and now shows a preview/diff at
  the top, above the editor.
* Now start using the realtime preview feature on the right side of
  the editor.

You will notice that the preview/diff above the editor starts to
flicker, but is never updated. (There is no need to update it. The
realtime preview that is updated is the one in the right pane.)

The original code was added via T293347. I believe the flicker
exists since then. It's effectively a misconfiguration. I hope the
comments make this clear.

This is also a direct follow up to T307046 where the diff view was
fixed (it just disappeared before), but flickers since then.

Bug: T293347
Bug: T307046
Change-Id: I481610389cec902268a8fd09f6b0452131752d54
2023-09-13 11:17:12 +00:00
samtar 9c56922e25
RealtimePreview: Set tabindex on realtimepreview-preview
Set tabindex="1" on `ext-WikiEditor-realtimepreview-preview`

Bug: T317108
Change-Id: I06847674ebccf05e8cb45492056222e13cd00ef8
2023-07-12 13:36:31 +01:00
Volker E 58e69d97b9 styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Also
- replacing several static values with new Codex design token featuring
  skin variables.
- reinstate static values only on resizeable drag bar. This is not a
  standardized component yet and will be revisited with further Codex
  component definitions in future.
Bump required MediaWiki core version to v1.41.0.

Bug: T319381
Bug: T332541
Change-Id: I323561894ddf23aa89f51439fc9df2b7642eaca5
2023-03-27 11:26:24 -07:00
Umherirrender cb002bfb9d build: Remove unneeded inline stylelint-disable-next-line
modules/ext.wikiEditor.toolbar.styles.less
 21:2  ✖  Needless disable for "plugin/no-unsupported-browser-features"
--report-needless-disables

modules/jquery.wikiEditor.toolbar.less
 243:4  ✖  Needless disable for "plugin/no-unsupported-browser-features"
--report-needless-disables

modules/realtimepreview/RealtimePreview.less
 14:2  ✖  Needless disable for "plugin/no-unsupported-browser-features"
--report-needless-disables

Follow-Up: I2b9cdca89e4e14e22a6a467efe00d51643962c08
Change-Id: Ied9f6b951380c38dfef3ca4674f5568a338ca01e
2023-03-25 22:21:44 +01:00
Umherirrender 330df284d8 build: Remove unneeded inline stylelint-disable-next-line
modules/realtimepreview/RealtimePreview.less
 57:3  ✖  Needless disable for "plugin/no-unsupported-browser-features"
--report-needless-disables

modules/realtimepreview/TwoPaneLayout.less
  4:2  ✖  Needless disable for "plugin/no-unsupported-browser-features"
--report-needless-disables
 11:3  ✖  Needless disable for "plugin/no-unsupported-browser-features"
--report-needless-disables

Change-Id: I2b9cdca89e4e14e22a6a467efe00d51643962c08
2023-03-21 23:02:20 +01:00
Sam Wilson 56b4ba8476 Realtime Preview: remove Beta Feature and onboarding popup
Delete almost all code realting to the onboarding popup (blue
pulsating dot) and Beta Feature. Leave only one line to delete
any existing localStorage item that was used to remember the
dismissal of the onboarding popup.

Bug: T327515
Change-Id: I8d05e143858a2269dd6f3302dcc6cee6b0855ffd
2023-03-17 15:22:32 +08:00
jenkins-bot 6575890975 Merge "[Realtime Preview] Only clone part of the #wikiPreview element" 2022-10-05 10:55:22 +00:00
hmonroy ff38ef2400 [Realtime Preview] Disable when screen is narrow on load
When realtime preview first loads set `enabled` to false when screen is too narrow.

Bug: T313210
Change-Id: I555c5c2115ad09ef51ec9d7f1143a445b23144ca
2022-09-15 17:04:40 -07:00
Sam Wilson e979df2036 [Realtime Preview] Only clone part of the #wikiPreview element
The #wikiPreview element can contain other child elements such
as the already-removed one of .previewnote but also (on category
pages) category lists, which we don't want.

This changes to only clone the specific content element. We could
just create this in JS, but don't at this point have access to
the lang direction.

Bug: T315558
Change-Id: Ifcd02e9cf005e00c8dd69df162893fb673117231
2022-09-12 14:29:10 +08:00
samtar 15a64e2faa RealtimePreview.less: Add position: relative to preview class
Add `position: relative` to .ext-WikiEditor-realtimepreview-preview`
per this suggestion (T315049#8174670) by Matma Rex.

Bug: T315049
Change-Id: I70813f68ffd74fab4978127ecee9bd557d467ebb
2022-08-29 04:43:56 +00:00
samtar 4a49cefbca
RealtimePreview.js: Respect prefers-reduced-motion
Set inManualMode to the result of the current prefers-reduced-motion
setting.
Add another property (reducedMotion) for later UI/message work

Bug: T314787
Change-Id: Ifeb8b996430830499945e73eca2dcfe0355c8046
2022-08-12 22:49:14 +01:00
hmonroy 08c4dd35a4 Realtime Preview: add event tracking to load action
Trigger preview-realtime-loaded when the realtime preview pain loads.

Bug: T306176
Change-Id: If66c3db20a48ae8882412c068a0253f8cccfc1d3
2022-08-03 16:24:41 -07:00
Dayllan Maza a4b3e8b32b RealtimePreview: Let doRealtimePreview handle manualWidget visibility
After I010c80cf9f2b619a41fb1111f7750e8f9e804698 `doRealtimePreview`
will always handle manualWidget visibility

Folow-Up: I0e9698faebd3f4df41221d6ba0b0f5f82ae3ae5b
Bug: T307240
Change-Id: I7b009729287fbfffc96a77a7a5faf230321f1a7c
2022-07-29 16:24:15 -04:00
Dayllan Maza 267338d4e0 RealtimePreview: force update when reloading from error message
Bug: T313381
Change-Id: I010c80cf9f2b619a41fb1111f7750e8f9e804698
2022-07-29 12:16:07 -04:00
jenkins-bot 09a56edaff Merge "Add more conditions for re-showing the manual bar" 2022-07-29 15:52:29 +00:00
jenkins-bot b82686d364 Merge "Invert RealtimePreview.setEnabled parameter meaning" 2022-07-28 15:30:10 +00:00
Sam Wilson 6fb1395f44 Add more conditions for re-showing the manual bar
Because the manual-mode bar gets hidden when an error message
is displayed, it's necessary to re-show it after the preview
is reloaded from the error message. This was done in the
below patch, but that didn't account for all conditions.

Follow-Up: I26150c190a9d3816e35ba369536e6d0ac11e4b1a
Bug: T307240
Change-Id: I0e9698faebd3f4df41221d6ba0b0f5f82ae3ae5b
2022-07-28 11:47:02 +00:00
jenkins-bot 2f1e4604ee Merge "Realtime Preview: add event tracking to triggered events" 2022-07-27 07:19:40 +00:00
hmonroy 45474e1e26 Realtime Preview: add event tracking to triggered events
Add following logging events:
  * preview-realtime-error-stopped: triggered when realtime preview
auto-load is stopped.
  * preview-realtime-reload-error:  triggered when realtime preview pane
shows an error message and the reload button shown in this message is clicked.
  * preview-realtime-reload-hover:  triggered when the reload button
that shows on hover in the realtime preview pane is clicked.
  * preview-realtime-reload-manual: triggered when the reload button in
the realtime preview pane manual bar is clicked.

Bug: T306176
Change-Id: I0785b0a8e88125a9bb30ff5c64c8a7c50b556c63
2022-07-26 12:06:04 -07:00
MusikAnimal 770277689a Realtime Preview: scroll to cursor when opening/closing RTP
Bug: T311684
Follow-Up: I377fb3a122cda360e016716e3beb9c34983b8e10
Change-Id: Ic5c56f71589c944b15b83b49362fc250cb337c46
2022-07-25 21:17:12 -04:00
Sam Wilson 296ffc58f8 Realtime Preview: don't show error message and manual-mode bar at the same time
Hide the manual widget when showing an error.

Bug: T307240
Change-Id: I26150c190a9d3816e35ba369536e6d0ac11e4b1a
2022-07-22 13:15:46 +08:00
MusikAnimal 8ae9eff956 Realtime Preview: make ResizingDragBar's max width match the CSS
Bug: T313376
Change-Id: I8fadf2f9f997ff889a8582d5f24babd96fb8fcb9
2022-07-21 12:31:57 -04:00
MusikAnimal 9f3d4f0fd9 Realtime Preview: hide onboarding popup when screen is too narrow
Bug: T313377
Change-Id: Ied9385fbbbda9857042ae38eb97be072edbc5e09
2022-07-21 00:29:40 -04:00
Sam Wilson 9ff5caacbd Realtime Preview: better construction of OnboardingPopup
* Call the parent constructor.
* Add CSS class to the widget's existing $element, rather than
  creating a new one. Doesn't really change anything, just looks
  neater.

Change-Id: I67a72b5e2ef0912c7c7f7a44c87b31c08e1f7fcb
2022-07-21 11:20:57 +08:00
jenkins-bot b49fe580d0 Merge "Realtime Preview: fix display when toggling content in manual mode" 2022-07-20 06:19:46 +00:00
hmonroy 2b43b3cb0d Realtime Preview: fix display when toggling content in manual mode
Preserve content when links that toggle content are clicked in manual
mode.

Bug: T306877
Change-Id: I8b494e84feb4ecdb4b346f78f911f6ae9ba8dce3
2022-07-19 13:42:37 -07:00
MusikAnimal 96b3b46861 Realtime Preview: preserve caret position when opening/closing RTP
Bug: T311684
Change-Id: I377fb3a122cda360e016716e3beb9c34983b8e10
2022-07-19 15:00:25 -04:00
jenkins-bot fb8dfd0e31 Merge "Realtime Preview: only add window-resize handler if toolbar button is used" 2022-07-11 04:00:49 +00:00
MusikAnimal 7f329a7453 Realtime Preview: don't hide diff view on refresh
Bug: T307046
Change-Id: I77379a323b7532595685494de10b89be65e49954
2022-07-07 19:53:24 +00:00
Sam Wilson cff0089326 Realtime Preview: only add window-resize handler if toolbar button is used
Move the resize handler from the RealtimePreview constructor to the
getToolbarButton() method, to prevent it being used when the button
is not used (e.g. if the gadget is misconfigured).

Bug: T309330
Change-Id: I7abc335112648605404785528b37a81d946e900e
2022-07-07 13:21:23 +08:00
Sam Wilson b815fa6bd1 Realtime Preview: prevent lose of textarea selection when toggling
Save the current caret position in the textarea before enabling
or disabling Realtime Preview, and restore it afterwards.

Bug: T311496
Change-Id: Ib906e96e4e8b94b4e1fd82f6201005394c8a27c5
2022-06-28 20:15:54 +08:00
jenkins-bot 0ca47fea6f Merge "RealtimePreview: Don't update when wikitext is unmodified" 2022-06-27 14:42:39 +00:00
Ed Sanders bb21ea052c Use 100ms opacity transition for revealing "Reload" button on hover
We usually use a 100ms transition when revelaing/hiding elements.

Change-Id: I114febf126d1ea6c2a461356ce497cd4614de7c0
2022-06-27 14:03:11 +01:00
Ed Sanders 7f768f748a RealtimePreview: Don't update when wikitext is unmodified
Bug: T311406
Change-Id: I29afb5b7740ec26f3ba9c435729d9df0df46bf8b
2022-06-27 13:58:27 +01:00
Sam Wilson 623e6e7a46 Realtime Preview: remove the scroll linking between source and preview
It doesn't work well when there are infoboxes etc. and the actual
scroll behaviour is jerky and not very pleasing.

Bug: T294977
Change-Id: I8fbba61ddd902c16b3c63b41fc361afb5d1c1a1b
2022-06-17 11:09:04 +08:00
jenkins-bot 82e7d45aa5 Merge "Realtime preview: match scroll positions between textarea and preview" 2022-06-10 19:42:50 +00:00
Sam Wilson 9a5e7dd919 Realtime preview: allow loading as a gadget
* Prevent the realtimepreview module loading on anything
  other than wikitext pages (as is already done PHP-side
  but that is bypassed when loaded as a gadget).
* Give the #wpTextbox1 a class so we don't always style it.

Bug: T307039
Bug: T308176
Bug: T309330
Change-Id: I26111a61c8cf37520b3619faf09d76445973edd3
2022-06-09 17:27:24 +08:00
Sam Wilson e575822c73 Realtime preview: match scroll positions between textarea and preview
When either the textarea or the preview pane is scrolled, match the
other to the same vertical scroll percentage.

Bug: T294977
Change-Id: Ieda15868162caf06ef9099065ba55cfd8d8bfd0f
2022-06-09 12:57:54 +08:00
Sam Wilson 4fc6cb53b8 Realtime preview: keep original scroll position when enabling/disabling
Because the DOM and layout changes reset the scroll position of the
editing text area, it must be manually saved before enabling/disabling
and reset afterwards.

Bug: T294977
Change-Id: I7722213e682401d29b6b53d672a487da042be6a9
2022-06-01 10:41:54 +00:00