Commit graph

14 commits

Author SHA1 Message Date
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 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
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
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
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
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 3ab9a863a2 Realtime preview: improve toolbar button style
* Add hover and active styles to match normal toolbar state styling.
* Move border from right to left on `.section-secondary .group`.
* Add a skinStyle for MonoBook so it doesn't get the button style,
  because it provides its own.

Bug: T303991
Change-Id: I6f08906156a9768729d779b6c50c9e804f51fb98
2022-04-26 15:08:28 +08:00
Sam Wilson 4c760f8634 Realtime Preview: display manual-reload bar when previews are slow
After three slow preview requests, switch to showing a bar at the
top of the preview area that contains a manual 'reload' button.

The manual bar will be hidden when an error message is show, but
re-shown again after the error is dismissed. Closing and
re-opening the preview pane doesn't reset the manual mode.

Bug: T304568
Change-Id: Ia72bd1ceab68fdaed5de53137bd8ac5961db4714
2022-04-20 13:01:14 +08:00
Sam Wilson 94d4912103 Realtime Preview: add hover button for reloading
Add a 'reload' button to the right-side preview pane (that shows
on hover, and stays in the same place when the preview is
scrolled), and also an accesskey to trigger the preview. If the
preview is not open when the accesskey is pressed, it'll be
opened.

Bug: T303532
Change-Id: Ifa77ad7cf6d2ed6a8b955f9a324986d1c6f9a993
2022-04-14 08:08:58 +08:00
Sam Wilson f5f39d41d4 Realtime Preview: Move loading bar to be a proper element
Change from a pseudoelement ::before the left pane, to its own
element. This is so that when we introduce the top manual-reload
bar the blue bouncing loading bar can be shifted down below it.

Also moves the CSS out of TwoPaneLayout.less and into
RealtimePreview.less where it more properly belongs.

Bug: T304568
Change-Id: I540f68d528d92b7db8594d729985e5dad3d90ac1
2022-04-13 19:08:23 +00:00
Sam Wilson 6175e2c519 Add nicer realtime preview error messages
Add a new ErrorLayout to display error messages along with an
image.

Bug: T303383
Change-Id: I1ec27a212b5ab67d3e805c0d7756432850de89ea
2022-03-24 14:56:19 +08:00
Sam Wilson 411be83bc3 Add toggle button and two-pane layout for realtime preview
* Toolbar button to toggle a two-pane layout on and off.
* Resizable bar for the width of the two panes.
* Resizable bar for the edit box height, even when realtime preview is off.
* Only enabled when $wgWikiEditorRealtimePreview = true.
* Fires JS hooks when enabled, resized, and disabled.

Bug: T293347
Change-Id: Id09d44519249c0b7f5c33d48d524b7c92a5a9106
2022-03-13 07:28:01 +08:00