Commit graph

45 commits

Author SHA1 Message Date
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
Sam Wilson 23e4ebd244 Use flexbox for toolbar group items
Most toolbar items don't need this because they're inline-block
buttons and spans etc., but items of type 'element' can be block
elements (for example, the Realtime Preview button) and switching
them to flex items means they don't have to do anything special
to ensure their own layout.

This will make it easier to switch VisualEditor to use the
standard system of adding to the toolbar (in
Ic307f9dc7ad976862c8d8c6551ed29e6071f655f ).

Bug: T308423
Change-Id: Iff6d80628ebb5ec5685136fa02c2345eb5b49d42
2024-01-31 06:43:59 +03:00
Jon Harald Søby 499c71114a Stop using autoMsg and use mw.messages directly instead
WikiEditor has a clever functionality where you can enter a message
key directly by using [key]Msg syntax in the object definition. While
that may have been a clever approach, it led to tons of messages
in this extension having to be marked as RawHtmlMessages because
they could potentially be parsed as HTML. Thus I am replacing all
of these instances with using mw.message explicitly instead, with
the necessary method attached.

The autoMsg (and its cloned autoSafeMsg) functions have had FIXME
comments attached since 2018 saying that these methods are
unnecessarily complex and should be replaced with using mw.messages
directly.

This solves a lot of problems for translators in Translatewiki, and
hopefully makes the code more straightforward and easier to understand
for those reading it down the line.

I would like to remove the autoMsg and autoSafeMsg functions
altogether, but their functionality is still in use in a few
extensions (and potentially on-wiki code), so we would have to
clean up that first.

Bug: T154891
Bug: T294760
Change-Id: I2835341867df85552579ea6927cd39a6f889fa6b
2023-07-06 10:39:24 +02:00
Umherirrender 6b9eeb34d8 stylelint: Enable selector-pseudo-element-colon-notation
Via stylelint --fix

Change-Id: I5a9835a0faf610d8401b4bb80bae08999d7b9a0e
2023-03-30 01:14:34 +02: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
Wandji69 e97ae24dcd Styles: Replaces deprecated mixins prefixes with unprefixed CSS property
Bug: T308351
Change-Id: I42abaff93661bdab234faacb5830bedc6ec725be
2023-01-29 10:33:01 +01: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 94569125a7 Add new 'secondary' toolbar section
Add a new top-level section to the right side of the toolbar,
containing a single (empty) 'default' group.

Bug: T296447
Change-Id: If88789f20420f02c729122392e16509bbc5ae7d0
2021-12-01 11:19:41 +08:00
Ed Sanders b3dbb96cf3 Update stylelint-config-wikimedia
Change-Id: Ib7c44812e8adc159ff2c1d634712e05cc8511078
2021-06-15 15:14:04 +01:00
bkudiess-msft 358c587ffb Makes special characters booklet accessible
Bug: T253410
Change-Id: Ic42c3cb437d128ca12d15908bb93e83902d997cb
2020-06-29 19:12:56 +00:00
Ed Sanders 90c0b245fc Move 32px dropdown height to -wikimedia.less
Bug: T251682
Change-Id: I86afcb66b8d5d8fdff4f95944c863b10a1949518
2020-05-03 21:17:03 +01:00
Fomafix b3335607e6 Simplify the CSS definition and extend the clickable area by 4px
Change-Id: I7fd42f647eccc24561474e6e977768bc0d1bfd07
2020-04-05 11:27:50 +02:00
Ed Sanders ec78f1a2b6 Replace arrow variants with CSS transformations
* Allows us to briefly animate the transition between
  expanded and collapsed
* Remove the left/right-arrows, and just use a single
  down-arrow with rotations.
* Remove the up-arrow used by the dropdown, we don't
  use that elsewhere in WMUI.
* Remove PNG fallback as `transform` works only with IE 9+
  and we're not supporting WikiEditor on Grade C browsers.

Change-Id: I29ab0c35b890689bdea8de5f6bbeef0948483fa5
2020-03-26 16:20:36 -07:00
Fomafix 6ced54bdf6 Increase clickable area of tabs buttons
This makes the clickable area of the tabs buttons like the other
buttons.

Change-Id: I7987aed0627def6b177ef54aa8a787917e9b40f0
2020-03-03 06:48:25 +01:00
Fomafix 3303e4b25d Add z-index: 1 to menu options
This avoids overlapping of wrapped icons with the heading pull down
menu.

Bug: T246550
Change-Id: Ia05773f2e41c2a50a6341546922dce2f8e196ab7
2020-02-29 22:45:17 +01:00
Ed Sanders ef38bdfe2f Align toolbar styling with Apex
Also separate out Apex-specific styling into a separate file.

The current toolbar is already supposed to be aligned with Apex
so the visual changes here are minimal.

Bug: T223155
Change-Id: I7a0a21809018e0094d50992054523d20be3c5473
2020-02-04 17:16:37 -08:00
Fomafix d2e683f230 Add arrow-up as indicator for the pinned menu
Change-Id: I9a8afd8ec8f17c867f81889524a64b96b1d10568
2019-06-18 18:09:25 +02:00
Ed Sanders c13f6b77ce Update stylelint-config-wikimedia to 0.5.0
Change-Id: I46d65752974a71cc07c9ce622b6cd8c7389f354d
2018-12-04 17:33:05 -05:00
Derk-Jan Hartman 45d34eaa1b Animations: Get rid of jquery animations
Similar to makecollapsible.. Played around with CSS transitions, but
due to the non-predictable and variant sizing of the section elements
isn't really worth the trouble in my opinion.

Also was an accessibility issue on the select (header) dropdown.

Bug: T210671
Bug: T175379
Change-Id: I6fa476645bae7f0e1b01c563c4395e2af003c2c5
2018-12-03 12:27:40 -08:00
Ed Sanders 65ce4f6e73 Make button padding clickable
Currently the hover state include the padding, but
only the icon part is clickable.

Change-Id: Ifde032313452dff2ab74197477b0eb3dd6b5dfe1
2018-11-18 15:01:09 +00:00
Derk-Jan Hartman 261c76d746 Toolbar: Add tiny hover effect to ooui icon buttons
Change-Id: If3f8eddb2ece0af34c5f42b264b53c7bf0ccb352
2018-11-14 19:52:32 +00:00
Derk-Jan Hartman fd92d4b821 Toolbar: Allow groups to be multiline/wrap
Bug: T25943
Change-Id: I2db720449dfe9619de1f8e37fc99282191d932b1
2018-11-13 15:40:35 +01:00
Ed Sanders 72e48c26e0 Convert remaining tools to OOUI
Replaces the insert and advanced-insert groups, which
are currently multi-colour icons.

Drops the button-sprite + offset mode, according to
mwgrep there are no other users of this.

Bug: T191031
Bug: T143508
Change-Id: I7032f98908a591ea5c9d3dbbb7616e2c10bbfc80
2018-04-11 15:50:23 +01:00
Bartosz Dziewoński 5dd46f9943 Fix margin on OOUI icon buttons in Apex theme (MonoBook)
Bug: T191031
Change-Id: Ia11bf09e0dea8e929cfd0ab85cd46252f6a52325
2018-04-10 18:58:29 +02:00
jenkins-bot c21d53cabb Merge "Replace toolbar background image with CSS linear gradient" 2018-04-03 19:33:33 +00:00
Ed Sanders 5ec5da115e Replace toolbar background image with CSS linear gradient
Change-Id: I1d72be9119e85fd9957ba0fb86f22a9a5cc2edca
2018-03-30 15:59:36 +01:00
MusikAnimal 96518636b3 Hide right border of only the last group in the toolbar
Bug: T190378
Change-Id: I14295eb71afad9c6c444199d1b84b7b714525475
2018-03-29 17:02:35 -04:00
Ed Sanders e7fea7563c Toolbar: Increase opacity on active tools
Change-Id: Ib83fa83794b9ecdb091aa14a5c4002640fc2f2fc
2018-03-22 15:33:52 +00:00
jenkins-bot 8f6a39059e Merge "Provide a 'tool-active' styling for toggle buttons" 2018-03-21 23:15:58 +00:00
jenkins-bot 76dcd4216a Merge "Allow toolbar items to use OOUI icons as buttons" 2018-03-21 22:50:43 +00:00
Ed Sanders a2e2b69241 Provide a 'tool-active' styling for toggle buttons
Based on styling used by CodeMirror extension.

Change-Id: I74b7399c6dba3409b26656ae89fa3a569c69fef3
2018-03-21 18:31:36 +00:00
Ed Sanders 6b9aa52894 Allow toolbar items to use OOUI icons as buttons
Change-Id: I04e8b6c395e9569e5593378a556e239edc254186
2018-03-21 18:31:21 +00:00
Amire80 2592dc0e4c Use display:inline-block for special character buttons
This allows them to use the natural text direction which will
be right-to-left for right-to-left alphabets.

Also fix bottom padding to match top padding.

Bug: T56310
Change-Id: I7b2ebf9d1682fe827517fc959618531c904c94ca
2018-02-28 13:56:07 +00:00
Amir Sarabadani f3aad21d96 More alignment with WikimediaUI color style
Bug: T174119
Change-Id: I4ae87be955ef60e5cad45133c9b0118e1cf246be
2017-10-31 21:48:22 +01:00
jenkins-bot 1c67de24a2 Merge "build: Update linters and fix errors" 2017-10-31 19:17:42 +00:00
Ed Sanders 66a29b9c0a build: Update linters and fix errors
Change-Id: I3d316cfa7432d0600f0114608342155c1d1f6c1d
2017-10-31 18:40:57 +00:00
Amir Sarabadani 2726762994 Align colors with WikimediaUI color palette
Bug: T179411
Change-Id: I39f47c15547c0bc3197dc1c186cee748f48b1b67
2017-10-31 17:12:52 +01:00
Volker E 10c92ebd15 Align close colors to conform to WCAG level AA
`#666` is closest simple one that also works on
backgrounds like `#fafafa`.

Change-Id: Iffca2872504e2a173155e4ddc5e4ab652464eb8f
2017-10-10 20:06:12 -07:00
Ed Sanders 7eed707a48 Replace jshint/jscs with eslint/stylelint
Change-Id: Ife5e782bd5513e0496e384655b9b203de5c841a5
2016-11-21 21:02:38 +00:00
Fomafix ce96b0c72e Remove loading spinner
Since e8d37102 the loading spinner is not visible, because all actions
relating to it are in the same render step of the browser.

The loading occurs fast enough now, that we also don't want to show an
intermediate spinner.

Change-Id: Id2a3584deed2ecde807d8f354341dd6868b10009
2016-02-21 20:57:44 +00:00
Fomafix 19789d762b Use background-image instead of <img> for toolbar icons
Change-Id: I8af0e2c8585e8d9f6f72133953792eb88a176bcf
2015-12-22 13:36:36 +00:00
Fomafix 7c932c06da Fix spaces
Change-Id: Icce6ba3de9e472472b8b9e98e78e4aece82e806d
2015-07-20 07:12:45 +00:00
paladox e62f582d54 Add svg to LESS file
Requires patch https://gerrit.wikimedia.org/r/#/c/181786/

Bug: T37342
Change-Id: I994208cdf35fb11f0b0a724272124ac5410e2076
2015-06-23 20:43:19 +00:00
Fomafix 465d411536 Rework color definitions in LESS
* Use #rgb instead of #rrggbb where possible.
* Use lower case letters.

Change-Id: I390bf23d44bc2d78eb1d2185fd89b94297d1f05f
2015-04-14 21:39:04 +00:00
paladox 3f692d9e15 Convert .css to .less
* This patch convert .css to .less
* Semantic changes are avoided, but there are minor
  tweaks such as capitalization and ordering.

Change-Id: Iebff0f8e3d87bb792093a10d87f33540aca301d5
2015-03-09 21:24:23 -04:00