Commit graph

126 commits

Author SHA1 Message Date
Andrew Kostka da2df5a118 Use a fullscreen help dialog for templates on mobile
Bug: T294839
Change-Id: I1effb6ea70bcf5e9ce4e84e65431765d0d2f8125
2021-11-10 15:33:25 +01:00
Andrew Kostka 72641151e4 Implement floating help dialog for templates
Bug: T294839
Change-Id: Id224b61bd0cd57f5e970ab62db2d82dab1db9252
2021-11-09 15:28:23 +01:00
WMDE-Fisch dab5b5daae Add ARIA descriptions to sidebar widgets
When changing the source in the described-by attributes the screen
reader will read the text of the new source when the status changes.

Just changing the text within the elements holding the descriptions
does not work.

Bug: T291284
Change-Id: I31cc3061cf6c1f699babe41e99e0711f0eb03646
2021-10-29 12:07:53 +02:00
Thiemo Kreuz 893a3d5cf0 Fix sidebar bottom position when pressing Ctrl+Shift+E
This patch fixes two issues:
* The bottom corner of the new sidebar was never correct because of
  a `padding: 2px` that was introduced later, but never compensated
  for.
* The moment the toolbar is shown it's not a single-template dialog
  any more. This implies minor style changes.

Bug: T290262
Bug: T292727
Change-Id: I08da73880c469085994ee4beb3fcdd973f80ae11
2021-10-07 18:46:47 +00:00
Thiemo Kreuz 63d9969861 Rename outline "container" widget
I can't really tell what insight we get from the word "container".
Every widget is a "container" in some sense, isn't it?

This widget is just _the_ outline, I would argue.

Other suggestions?

Change-Id: I1fb27ee58c1a3dd790022504e978198dadf7ea02
2021-09-24 12:32:29 +02:00
jenkins-bot ebe31b5a5e Merge "Better colors when clicking/pressing elements in new sidebar" 2021-09-13 10:43:29 +00:00
Thiemo Kreuz e6f240c263 Better colors when clicking/pressing elements in new sidebar
This just copies the colors from the old sidebar.
* When hovering with the mouse (without click/press) the background
  is gray, and the text black. Relevant for readability via WCAG
  AAA.
* On click/press the background is blue (slightly darker than a
  selection), and the text is dark blue as well.

As noted in
https://docs.google.com/document/d/1V0rXMPr6upNjHF9AkROx4R8IF1LDZUzrG4K6oWT08sU

Change-Id: I443045b55826ef390688b32616dfdcfdc6555eb3
2021-09-13 11:07:22 +02:00
Thiemo Kreuz 9b5438cba2 Hide content pane on narrow screens when sidebar is expanded
Before, the content pane (the right half of the dialog) was moved
to the right, outside of the visible viewport. But it was still
active and could i.e. be navigated to via the tab key. Only truly
hiding it solves this issue.

Bug: T274554
Change-Id: I8925a9cca0099528aca8e98452816b5f9dd23a76
2021-09-10 17:34:05 +02:00
Andrew Kostka 075ca72fe8 Add input validation to the add parameter page
Bug: T285869
Change-Id: Iebb982e95aa19bd61fcda915981d505cc243c4b2
2021-09-09 11:42:53 +02:00
jenkins-bot 7848b1a071 Merge "Fix inconsistent keyboard :focus styles in template outline" 2021-09-02 13:04:17 +00:00
jenkins-bot f7265428e8 Merge "Try to use margin/padding instead of flex for template dialog" 2021-09-01 08:53:01 +00:00
Thiemo Kreuz a4dac831d9 Try to use margin/padding instead of flex for template dialog
Proof of concept: while flex is – well – flexible, it feels like
this should be possible with some good old block containers and
margins. It's pixel-perfect in my test.

Bug: T288465
Change-Id: I1458900fff197e08ce318398524a3cf2b6b9ee2a
2021-09-01 10:35:52 +02:00
Thiemo Kreuz c32a6d794a Fix inconsistent keyboard :focus styles in template outline
This fixes a few style issues:
* The buttons that represent top-level elements have a proper
  2px focus rectangle again. Back to the OOUI default.
* The list of parameters does have a 1px focus rectangle all
  around. Intentionally thin because there is a 2nd level of
  keyboard navigation (via cursor keys) in this element.
* All these focus rectangles look the same in Firefox. Before,
  it was a thin dotted line on the parameter list.
* Parameters with long names don't wrap on a 2nd line any more.
  I believe this was working before but got lost in I92e8fd2.

Bug: T285323
Change-Id: I0229b6395a64a9903335bf96349af70fb20ad047
2021-08-31 12:30:24 +02:00
Thiemo Kreuz b84251080a Rename …OutlineItem CSS class to match widget class name
Bug: T285323
Change-Id: Ib307a23adb4712f253610b5029483ea8c049b7ce
2021-08-31 12:16:10 +02:00
Thiemo Kreuz fcd555ba68 Correct focus handling when adding undocumented parameters
When I press the button to expand the input field for
undocumented parameters, it needs to be focused. Otherwise I
have to click it manually all the time.

We probably forgot to list this as an acceptance criteria when
working on Ic5dcd36.

This also replaced a bit of JavaScript with CSS. I do this
mainly because I found the mixture before (one piece was
hidden via JavaScript, another via CSS) a bit confusing.

Bug: T272487
Change-Id: I0cbee63c65a37f2f1860bde007c1e5c8408ba006
2021-08-30 17:03:30 +02:00
Thiemo Kreuz 544bd5688c Allow selecting top-level parts in the new sidebar
This is mostly, if not exclusively visual, at the moment. The
actual state is still managed by the old sidebar.

I made the element OptionWidgets for convenience. This gives us
all the functionality we need (primarily setSelected and
isSelected), without to much clutter. However, I didn't made
the container a SelectWidget. This comes with to much stuff we
don't need at this level, e.g. cursor key navigation.

Bug: T285323
Bug: T289043
Change-Id: I20dbd2ba23ceaa9125947b25e037c0bb3c91a471
2021-08-27 18:22:37 +02:00
jenkins-bot 34992ba3ac Merge "Basic cursor key support in new template dialog sidebar" 2021-08-26 13:46:40 +00:00
Thiemo Kreuz 0bd9e587b3 Basic cursor key support in new template dialog sidebar
Bug: T285323
Depends-On: I47effe05427cfabfcf534920edee79521eaa033f
Change-Id: I319896a20a71b18655ebb93663d47e656a1a67a6
2021-08-26 12:48:49 +00:00
jenkins-bot 6c33cc4a35 Merge "Add message on multipart content" 2021-08-26 07:34:15 +00:00
WMDE-Fisch 67988452ab Add message on multipart content
Bug: T276574
Change-Id: Iff5c2fd4071dd03ca62c395cce4041dacb1c7ea6
2021-08-25 10:47:16 +02:00
Svantje Lilienthal 5c9fbca085 Added new input page for undocumented parameters
Bug: T272487
Change-Id: Ic5dcd36c9f647f9b52b98e5a520a1df1960a5b48
2021-08-24 10:18:43 +02:00
jenkins-bot b05b165981 Merge "Make template parameter checkbox widget an OptionWidget" 2021-08-18 09:31:52 +00:00
jenkins-bot 029a982625 Merge "Remove unwanted scrollbar in responsive template dialog" 2021-08-18 09:22:36 +00:00
Thiemo Kreuz 220c98ab44 Make template parameter checkbox widget an OptionWidget
The plan is to change the outer …TemplateWidget (which contains
a list of template parameter checkboxes) into a SelectWidget.
But this requires the elements in the list to be a subclass of
OptionWidget.

Note this change does not have any effect, as of this patch. But
this makes the following patches smaller and easier to follow.

Additionally:
* The OptionWidget class is already a LabelElement. No need to
  initialize this twice. This happens via the parent constructor
  now.
* Remove CSS that is not needed any more after Idc5e048. This is
  not a FieldLayout any more.
* Update some related code documentation.

Bug: T285323
Change-Id: I92e8fd2bbece9e6c55083cdfe6ed7ad16a64d688
2021-08-18 11:11:41 +02:00
jenkins-bot 52e24c650a Merge "Remove sidebar margin on single transclusion" 2021-08-17 13:29:16 +00:00
WMDE-Fisch 03af517d19 Adjust icon spacing in new sidebar menu
The icons have a padding of 6px around the icon image itself. To
get to the required 16px/8px space the margin was adjusted
accordingly. Note that there's also a 2px padding around the menu.

Bug: T272482
Change-Id: I3df9f355dfd5c4e6366432555b96bf788e784280
2021-08-17 14:26:06 +02:00
WMDE-Fisch 53186fc231 Remove sidebar margin on single transclusion
Bug: T272482
Change-Id: I5696dbd469161b1ab1ede2bb3f49e6dd24b98521
2021-08-17 13:54:36 +02:00
jenkins-bot 0e6c56160e Merge "Show sidebar controls only when multi-part content is present" 2021-08-16 10:54:41 +00:00
Andrew Kostka a2135d524d Show sidebar controls only when multi-part content is present
Bug: T272482
Change-Id: I092438bc9c7d5569f758786ca6952beffdf37507
2021-08-11 15:00:59 +02:00
Thiemo Kreuz 993c64f9a2 Minimize template dialog CSS a bit
Bug: T272481
Change-Id: I156c8f2ea4a70d2e86a7bc4282738c51bebc3f2a
2021-08-11 08:09:40 +02:00
Thiemo Kreuz 7d464fbf1f Remove unwanted scrollbar in responsive template dialog
I get a scrollbar at the bottom of the sidebar. The reason is
that the container's width is 100% + 1px. The extra pixel is
from the border, which is not needed in this mode.

Bug: T274554
Change-Id: I4f749be6b9a7f89f9a7a195dc66c5c18253b1327
2021-08-09 18:28:56 +02:00
jenkins-bot 004d37dc1d Merge "Hide old sidebar when the new one is enabled" 2021-08-06 13:10:04 +00:00
Andrew Kostka 21e9f5f0c4 Make the sidebar in the transclusion dialog responsive
Bug: T274554
Change-Id: I51e988e6fb0e50c9d542400471152807626539ea
2021-08-05 17:23:22 +02:00
Thiemo Kreuz 0351537ba2 Hide old sidebar when the new one is enabled
This is – for now – intentionally done in a way that can be
undone. This will still be helpful for debugging for a while.
But we need to get rid of the duplication to be able to make
this new functionality visible on the beta cluster.

Actual removal will hapen the moment we actually remove the
old toolbar. There are already tickets for this.

Bug: T286765
Change-Id: I842c3c39a55a273af20643fa8a602d2e57fb6b8c
2021-08-05 09:14:40 +02:00
Andrew Kostka d44bc19d20 Adjust the styling for the template parameter search
Bug: T272481
Change-Id: Ie1c6b95cf32640401cb2a17bcda656a40a22e9b4
2021-07-16 18:03:48 +02:00
jenkins-bot 6e86365b81 Merge "Add parameter search to sidebar of VE TemplateDialog" 2021-07-16 10:06:15 +00:00
Svantje Lilienthal 066c663864 Add parameter search to sidebar of VE TemplateDialog
Bug: T272481
Change-Id: If044e5d134f1b24f939c4786949e6ca34fb79e1e
2021-07-16 09:48:29 +00:00
Andrew Kostka 9ffdd51f04 Show ellipsis when sidebar parameter names are too long
Bug: T285044
Change-Id: I6bf53ec4d6d45888ed7e9ba1d67848e41224de63
2021-07-15 17:35:42 +02:00
Thiemo Kreuz eb1f1e28a3 Make new template editor sidebar items actual ButtonElements
Actually reusing this OOUI mixin gives us a lot of well
developed functionality we need anyway. Most notably proper
event management, e.g. click events.

The number of CSS properties we need to override is managable,
I would argue. Let's see:
* Our buttons are not inline-elements, but should use the full
  width.
* No focus-border left and right for the same reason.
* We want much more inner padding.
* We want a stronger hover effect.
* We need to fine-tune the position of the icon. This is
  because of the inner padding.
* Need to get rid of a negative margin that's only relevant
  for inline-buttons.

I currently feel like the benefits are worth living with
slightly more brittle code. Note that we can undo this change
any time because all this is well encapsulated in this new
class.

Bug: T274544
Change-Id: I33f275a958964d49e803e56bf74a6fa961093da1
2021-07-14 13:31:40 +02:00
Thiemo Kreuz 170ca9d58a Reuse generic button widget for elements in the new sidebar
This introduces another generic "button-like" class that can
be reused in multiple places in the new sidebar. The main
change in this patch is the "add more information" button
which is now an instance of this new class as well.

This patch also simplifies over-complicated setup code in
related widgets.

Bug: T274544
Change-Id: I0cfe7675d02fdd5c5dc8d9198bb3f4aec9abf397
2021-07-13 17:23:27 +00:00
Thiemo Kreuz 28049425ec Various design tweaks to the new template dialog sidebar
Still far from being finished, but much closer to the mocks
already.

Bug: T274544
Change-Id: I1feee06e43a4b9c10a2d9443b6d816595bead64d
2021-07-13 13:00:37 +00:00
Thiemo Kreuz 226e2657ef More robust debug container for new template editor sitebar
Before, the new sidebar was hacked in a place where it confused
the BookletLayout logic. This became visible when using the
up/down buttons to move elements in the sidebar.

This new container wraps the new and the old sidebar. It also
uses a temporary color to make it easier to see where one ends
and the other starts.

Bug: T274544
Change-Id: I4e5b40b1d1556886fc85cff9e926a02e4888f032
2021-07-13 09:11:57 +02:00
Thiemo Kreuz 5edf7dac18 Full add/delete support for all 3 types in template sidebar
From now on you can remove and add all 3 types of content from
the new sidebar.

Bug: T274544
Change-Id: If1e04ff503d72cbe9ea07c8036c9e3a0547cc0d0
2021-07-12 10:15:14 +00:00
Thiemo Kreuz a1384f34f3 Add template outline widgets for all content types
The two new widgets are pretty trivial now, thanks to the base
class.

Note there is still no code to delete the widgets. That's also
why you will always see a placeholder widget at the top. This
will be fixed with the next patches.

This patch also renames most of the "…TemplateOutline…" classes
to "…TransclusionOutline…" The reason is that these widgets are
not for a single template, but part of the container widget for
a more complex transclusion (i.e. a sequence of multiple
templates and wikitext snippets).

Bug: T274544
Change-Id: If4219b0b8ad4d1969ab1ec5ec4db0728811bab35
2021-07-12 09:19:06 +02:00
Thiemo Kreuz 2854be165e Move template outline item header into the base class
The icon and the name of the template are now created by the
base class. This is meant to be reused for other elements
that are not templates.

Bug: T274544
Change-Id: I76bbc0e8c0420e9c6357d093d5f5e1651a0c2719
2021-07-12 09:17:30 +02:00
Thiemo Kreuz 1849924eff Rename CSS classes in new template dialog sidebar code
This matches the existing naming scheme better. I also plan to
re-use this class for other types that are not templates.
That's why the name is the more generic "transclusion" now.

This patch also removes a `padding: 2px` that's not that
helpful. We will need paddings later, but need to choose them
much more carfully.

Bug: T274544
Change-Id: I6f0f630da2230b023b3fb065e5ad86d8211bb7b3
2021-07-09 15:29:29 +02:00
Adam Wight cc95ed8ef3 Label for each template in sidebar
Bug: T274545
Change-Id: I1731373a63f96eda0e43fe042746eaed40bfe6fb
2021-06-24 12:50:05 +02:00
Adam Wight 988cda65dd Template dialog checkbox list
Introduces new widgets forming the backbone of the experimental
template dialog sidebar.

FIXME: `text-overflow: ellipsis` is not working yet, the container
styles need adjustment.

Bug: T274543
Change-Id: Ie81b84be288553343017c4aaf8691c4e266995f5
2021-06-17 08:47:47 +00:00
Thiemo Kreuz 190237ee28 Rename sidebar state to distinguish from multiple transclusion
This dramatically simplifies the "mode" flag in
MWTransclusionDialog. The main reason to touch this code is:
The flag appears like it will be "single" when the dialog
contains a single template, and "multiple" when there are
multiple templates. But this is not true.

What the flag really does is show/hide the sidebar. The sidebar
is needed to be able to create multi-part templates. But a
dialog that already contains multiple templates can be set to
"single" mode (i.e. the user can collapse the sidebar), and
vice versa.

This patch focuses on private details inside of this class, but
keeps the terminology of a "mode" in some places. E.g. the
messages are not renamed to not cause unnecessary trouble for
translators.

Change-Id: Ib029fd48b393d2ab7d7cff6c842789e22989e944
2021-06-09 09:44:08 +02:00
Thiemo Kreuz 621bca1df4 Show redirects as part of description in template search
These are the most minimal (and therefor most stable,
hopefully) hacks I could come up with so far.

Bug: T274903
Change-Id: I28ba414dd34aad756e29400eb656f0942291a923
2021-05-27 12:40:51 +02:00
Adam Wight 9cac71676e Invert template search result highlighting
Bug: T275048
Change-Id: I50fc7407b4357e2cea9d5421d0de46a81d39c69d
2021-05-17 14:12:02 +02:00
Adam Wight f89301bedf Optional verbose template search
Renames "Add a template" to "Template Search" in most cases and
provides inline help for the workflow.

Bug: T277028
Change-Id: I3fee87cb89b5044e785596e71ef3f1a18f2694ce
2021-05-10 12:45:12 +00:00
Adam Wight abdbb7d7ff Internally rename container for adding an undocumented paramter
The internal name "more" conflicts with new collapsible buttons.

TODO: looks like TemplatePage has an analogous field?

Change-Id: I10b24758316a6cc3fbd236c77daffa014fcdafc6
2021-05-04 16:23:53 +02:00
Adam Wight ded8c40915 Optional feature makes the transclusion dialog bigger
When $wgVisualEditorTransclusionDialogInlineDescriptions is set to
true, the template dialog will use a larger format.

Bug: T273971
Change-Id: Iad3c3f4d65125c83e35414ce15f793f6a1b192ef
2021-05-03 16:53:27 +02:00
James D. Forrester 2c77e88d2c doc: Bump copyright year for 2020
Change-Id: I30539877543dc2a57bd1428a00d10ac46d8fc294
2020-01-08 09:13:24 -08:00
James D. Forrester 3c293ea00c doc: Bump copyright year for 2019
Change-Id: I8991b97c980d4149f53eb5601036220ef3c0c440
2019-01-01 13:24:23 +00:00
Volker E 3949712ec0 TransclusionDialog: Fix removeButton position
Change-Id: I886c64f51fe54483d24c6cfa925b698db7bf4e7e
2018-12-11 16:05:33 -08:00
David Lynch c4c5582121 MWTransclusionDialog: remove extra padding from framesets
Bug: T191234
Change-Id: I6cfec45607f2dd428347879c134dbe286397f8b6
2018-04-05 11:30:05 -05:00
James D. Forrester 0a7a845a42 doc: Bump copyright year
Change-Id: I0b299c840ede1a1b8552cecfc70c5760ab036181
2018-01-03 17:45:07 +00:00
James D. Forrester f51a6d5020 stylelint: Drop no-unsupported-browser-features references
The rule hasn't been applied for a while, as it was deprecated upstream.

Change-Id: I7877d0e3bdcd05a609d61add2dc62d7598e348cb
2017-04-10 08:36:37 -07:00
Ed Sanders 2bc3bd75dd MWTransclusionDialog: Move box-shadows to Apex-only
Use solid borders for MW theme.

Change-Id: I4a5418d006adf0c7d47dc58624868cf6bb4b7de6
2017-03-30 17:03:35 +01:00
Volker E 4e4d1da7a3 Transclusion dialog: Add VE specific rules from OOjs UI
Adding VE specific rules from OOjs UI in preparation of removing them
from the library.

Change-Id: I798717b60badb521d28f8f7a7036a99e5a26d61a
2017-02-28 12:24:22 -08:00
James D. Forrester 122f49b2dd build: Bump file copyright notices for 2017
Change-Id: I3c20809e71cc0da58123e1b5f29c4f3aac945496
2017-01-03 08:58:33 -08:00
James D. Forrester 8c7ed92288 Update VE core submodule to master (eeaf1e2)
New changes:
c54a48a build: Fix watch list (csslint -> stylelint)
58ba3d9 Add stylelint rules for @-rules
3f8c75a Stylelint: Add rule for unsupported browser features
3b96ff3 Fix minimum Opera version (15 -> 12)
9a1110b Stylelint: No ID selectors
9800bb8 build: Remove remaining references to csslint
b6ab14a stylelint: Re-enable features by names
6cc1f3c Move stylelint to npm
1d15fa0 build: Bump stylelint version to v0.2.0
ccc1724 stylelint: Use the preset rather than extending

Change-Id: I22fa8098592338a5e912aba9ad21131b21d9c0ea
2016-05-18 07:06:53 +01:00
Ed Sanders 8d749518ec stylelint: Comment uses of 'unsupported' browser CSS features
Change-Id: Ia88575d3fe71c22551cc601f03d8f4dea6d7fe16
2016-05-17 12:28:07 +00:00
Ed Sanders 99d3320573 build: Replace csslint with stylelint
For now just use the rules file in lib/ve, but eventually
this will be a preset.

Change-Id: I7fd79d3e1dce37aef066d416cd969e5fff1e962f
Depends-On: I17e0d23ddfedf64985495ab35d113ea08c03b1df
2016-05-16 22:30:49 +01:00
James D. Forrester ada58df361 build: Bump file copyright notices for 2016
Change-Id: I3c618c196e504a80ca297a4132a17f1977a24fb7
2016-01-03 14:57:25 -08:00
Ed Sanders 1eb0ef2011 Consistently use spaces inside brackets in CSS
Change-Id: Ie63a50cb16cb89dac7060857220485d7d23f2fe3
2015-10-04 18:33:43 +01:00
Ed Sanders 52cb066dc7 Use new MediaWiki core TitleInputWidget
All link input/title input functionality has been moved to core, so
we can replace the link widget, redirect widget and template search
widget with it.

Depends on Ib463e60cad96 in MediaWiki core.

Change-Id: I452f3b86ead403307072cf904f0553c9771f4300
2015-06-24 17:06:00 -07:00
James D. Forrester ccbf32534f MWTransclusionDialog: Add a little margin to the addTemplateFieldset
Change-Id: I2549a9ca3df788cf92761b638a14760f8c413f46
2015-02-04 11:45:06 -08:00
Alex Monk f3dd60dbe3 Hide extra space at the top of the single transclusion dialogs
Bug: T78045
Change-Id: I36974f69128a3e2c303076e3bd740f270e178c6b
2015-02-02 16:49:49 -08:00
Moriel Schottlender a25ad02f60 Use ActionFieldLayout in the template placeholder page
Instead of manually attaching a button to the input widget, use the
newly available ActionFieldLayout.

Change-Id: I3a39f476e6115f97f11ea49fac5bfcd93bd8f841
2015-01-31 01:59:26 +00:00
James D. Forrester 2f8b3e0d96 build: Bump copyright notices to 2015
Change-Id: Ie92dab7411116d3410195c3fb0a3513c664c0c30
2015-01-12 20:34:19 -08:00
Roan Kattouw d0f273d6db Sprinke some child selectors around in MWTransclusionDialog.css
Indiscriminately styling all .oo-ui-widget elements with a
descendant selector is very evil, use a child selector instead.
The use of a descendant selector broke inline dropdowns.

Change-Id: I25c5007ef1ffab9e59c46c3b11270b8f77610327
2014-10-27 17:38:20 -07:00
James D. Forrester f2e22babaa Update VE core submodule to master (1f82a47)
New changes:
5d063a2 Don't use three different coordinate systems in getSelectionRect()
feeb1ae Only focus the paste target if focusedNode has changed
2c1bb97 Update OOjs UI to v0.1.0-pre (4cef83f702)

Local changes:
* Update references to renamed classes
* Update calling patterns element mixins

Change-Id: I330c0e308807597dec31dad8dbf713eb29fdc290
2014-09-03 17:20:09 -07:00
Roan Kattouw 654d641c5f Update VE core submodule to master (33ca43b)
Reorganize stylesheets in VE-MW to match JS directory structures,
and update VisualEditor.php for similar reorganization in VE core.

New changes:
c6ed962 Reorganize stylesheets

Change-Id: I4f1070643744fb2ee6726cb03e012e31a9a05c64
2014-04-18 13:28:31 -07:00
Renamed from modules/ve-mw/ui/styles/ve.ui.MWTransclusionDialog.css (Browse further)