Commit graph

31 commits

Author SHA1 Message Date
Jdrewniak 13f0e379b8 Dark-mode feedback link UX improvements
- Makes the dark-mode feedback link (the "report a dark mode issue" )
link in the Appearance menu, only appear when dark-mode is activated.
- Keeps the Appearance dropdown menu open after the dark-mode feedback
link has been clicked.

Bug: T367871
Change-Id: I75d040650f613a7af5db553689d734e56f910431
2024-07-25 11:30:00 -04:00
Jdrewniak a8d047b319 Increase specificity in dark-mode feedback link styles
Prevents dark-mode feedback link from turning blue
when clicked, caused by styles in the
`.mixin-vector-dropdown-menu-item()` mixin

Additionally, decreases the size of the heart icon
beside the dark-mode feedback link.

Bug: T367871
Change-Id: I348dbafcc3d3d3519da77dc6799818fdd743bba2
2024-07-16 11:27:49 -04:00
Jdrewniak 9b93a64fdf Follow-up to f115016 - Add beta tag & feedback link to Appearance menu
Addresses edge-cases for feedback link for dark-mode.
- Feedback link should not be visible if dark-mode gadget is enabled.
- Feedback link should not be visible if page is excluded from dark mode.

Additionally, turns feedback link green after click
and prevents further clicks on link (without removing link,
since removing the link changes the margins on the text)
and adds heart icon beside success message.

Bug: T367871
Change-Id: Idff14ffa7e8f497ec38250cf10252e998c234057
2024-07-03 18:40:39 -04:00
Jdrewniak f1150164e1 Add beta tag & feedback link to Appearance menu
Adds the word "(beta)" beside the Color options in
the Appearance menu, as well as a link for user
feedback related to dark-mode issues.

Re-orders the "Color" options to come last in the
Appearance menu.

Bug: T367871
Depends-On: Iac6316cf7010b5ea92672e9ad6f09e8ee57e066b
Change-Id: I46f7554b4bcdcfae0e4ef2e849d52774242e3497
2024-07-02 22:29:07 +00:00
Jon Robson 0f594e0af7 Make all frontend stored preferences global
Additional change:
* Delete some unused messages

Bug: T341278
Depends-On: I254d7d883771dbd394ba97799d731012f7aaaefc
Change-Id: Ic40da2af8ea46bd42cbebbdbceda2431bd8600ae
2024-06-18 16:37:53 +00:00
Ed Sanders 7e7486c4a5 build: Update eslint-config-wikimedia to 0.28.0 and autofix
Change-Id: I350941a711d2304fc968b3ba1f1e0afa5878578e
2024-06-06 16:22:05 +01:00
bwang 716aad56af Add width exclusion notice
Bug: T366216
Change-Id: If50e9adcec6f2fa139e793b3a8108f3b4dd689ca
2024-06-05 19:15:11 +00:00
Jon Robson 55e6dfd81c Fixes: exclusion logic for anonymous users
Bug: T364159
Change-Id: I7c7e9cff7b99f8e37f3f1ffb93464fd3f31c799b
2024-05-06 12:20:40 -04:00
Jon Robson ca0d404e50 Enable night theme in Vector
- New night theme added via Codex `.cdx-mode-dark();` mixin.
- CSS custom properties separated from skin.less.
- Font-size rem conversion removed since Codex now uses rems.
- bundlesize increased by 1kb ( followup from
Icfcb5c7418061a5727580f0685054356ba4edb72 ).
- Icons that use background-images are inverted for night-theme.
- Linter error fixed for long-lines in clientPreferences.js

Co-Author: <Bernard Wang> bwang@wikimedia.org
Bug: T354889
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
2024-05-02 13:22:59 -05:00
bwang 0109218ab9 Rename client preference menu to appearance menu
Bug: T362808
Change-Id: Id6800d38eebf433cf0c9e3f179dd83df2eefd1fb
2024-04-29 15:38:20 +00:00
libraryupgrader d22fd0d7ab build: Updating npm dependencies
* eslint-config-wikimedia: 0.26.0 → 0.27.0
* @wikimedia/codex: 1.3.5 → 1.4.0
* @wikimedia/codex-icons: 1.3.5 → 1.4.0

Change-Id: I3dbc33dde89f03b188918e29f89434aafc3690a9
2024-04-21 21:57:17 +00:00
Jan Drewniak a3801497b9 Add exclusion notice for night mode feature
If night-mode is disabled on a certain page via the
exclude list in skin.json, then the following class:
".skin-theme-clientpref-excluded" will be added to the HTML element.

In this scenario, the related client-preferences
menu options are visible, but disabled, and a notice
is rendered below the options informing users of this state.

Bug: T361158
Change-Id: I46d335d079a2d27c7a4122e23ac7e479c286b886
2024-04-16 22:38:35 -04:00
Jon Robson 2b4b256d4e Callback should only be run after completion of API save request
Bug: T357212
Change-Id: Icee40b8f9b642e516583998f98cf0072a9e37dee
2024-02-12 08:52:46 -08:00
Jon Robson 29f73c960b Client preferences accept a callback
In the mobile site we want to show a notification when settings
are changed. In some cases we want to reload the page.

Bug: T350170
Change-Id: I71bd97de8e041d641aded02b8fdf84359f6d830b
2024-01-30 12:31:43 -08:00
bwang c893934ee7 Fix linter warnings
Change-Id: I24c3ecb7858142dc1b90cf1e34456691660157f1
2024-01-29 17:06:53 +00:00
Jon Robson 8c49b1eb49 Client preferences supports toggle switches
Bug: T350418
Change-Id: I359924874e7232eaee73b7dc3678b9e8e26794ac
2024-01-19 12:56:27 -08:00
Jon Robson 7d5caf3f66 Generalize skins.vector.clientPreferences library for use in MobileFrontend
Bug: T354224
Change-Id: I6949c4f49ec34b8e47036da4222a5f3ff491af32
2024-01-17 14:51:29 -08:00
James D. Forrester 1c93d0514b build: Upgrade eslint-config-wikimedia from 0.25.1 to 0.26.0
Bug: T345100
Change-Id: I51fdef33d517ce4f2f50930bc46dddb2f497677c
2024-01-11 14:19:57 -05:00
Jon Robson 65908e0c7d Put font size control before limited width control
Bug: T351867
Change-Id: Ieab31c875ab87d3ffc103805e3012089ab118a28
2023-12-01 09:19:51 -08:00
Jon Robson 15250424b3 Fixes: Duplicate events for radio buttons
Bug: T352075
Change-Id: I9cec0b23618162ba74ccd9cd2e27e9171cdc8d6e
2023-11-28 10:09:06 -08:00
Jon Robson 1c2dff5690 i18n: Update copy
* Switch from "has been" to "has"
* Reorder limited width options
* Change headings
* Change options
* Change copy of beta feature

Bug: T351998
Bug: T351867
Change-Id: I65494a3cc75b661339e48df1bea0e09a365c0657
2023-11-27 11:21:55 -08:00
Jan Drewniak edfdf05f12 Implement new font-sizes for custom front-size preference
Adds different font-sizes and line-heights for the custom
font-size UI. The custom font-size preference options are now:

1. Compact - 14px font-size & 22px line-height
2. Standard - 16px font-size & 24px line-height
3. Open - 20px font-size & 26px line-height

This removes the "xl" font-size option
(`vector-feature-custom-font-size-3`) and it's related i18n messages,
and changes the remaining message to match the new options.

The default font-size, when the custom font-size feature is disabled,
is "compact".

Bug: T351693
Change-Id: I5975a78ce7327f314fd55de55c222ac08d801fbd
2023-11-24 15:23:56 +00:00
bwang d2b413a721 Make client prefs fully pinnable
Bug: T351141
Change-Id: Ic4a166fb3234b27dbf3d37891abfdf15781c8867
2023-11-22 14:39:28 -06:00
Jon Robson 845a0ab71d Make the limited width and font size controls work for logged in users
For time being manage classes inside Vector. Document with FIXME and a
test.

Bug: T351447
Change-Id: Icc084a59a0141ec2b7c772cf92e8cc58c11f15b1
2023-11-21 02:16:52 +00:00
Moh'd Khier Abualruz 412c1f2d83 Create a sidebar for user preferences
* Adds mustache for sidebar
* Adds file to render sidebar

Bug: T350417
Change-Id: I691c8a0487e158e96027109c223569224f03a102
2023-11-14 14:33:01 -08:00
Jon Robson 44d9f74c8f Client preferences: Support different render locations, use Codex
* Refactor client preferences to support different render locations
such as the sidebar or user menu.
* Make use of Codex markup.

Bug: T350195
Bug: T350417
Change-Id: I13eeb9cafc888faba4a5bf0390c1b6db1e3f0259
2023-11-09 19:04:03 +00:00
Jon Robson 004b4c96f3 Add multiple font size to frontend
Use integer value going forward as it will be easier
to manage.

Bug: T346954
Change-Id: I041a0cb21e872700ceeeddd3a39922e456aa7bb8
2023-10-17 12:43:02 +00:00
Jon Robson fd046f3258 Use skin variables instead of local variables where possible
None of these files need access to the skin local variables. Use
skin variables instead

Change-Id: Iaf1591fdfc5487e6f05f020893864eb2097af708
2023-10-05 15:34:50 -07:00
Jon Robson 0f354e3950 Fixes saving of limited width
Bug: T345363
Change-Id: I3fee7e2b3a063d86a8d91ffa832cca4b72b48610
2023-09-21 19:13:38 +00:00
Jon Robson 2edf135018 Disable client preferences by default
Also make code safe to run when the preferences are
disabled.

Bug: T345363
Change-Id: I00554f3d7b0338170c537ae21d937da35303e8e6
2023-09-19 19:52:21 +00:00
Jon Robson 65c48d4eb2 Feature: Client preferences interface
Notes:
* This is functional but intentionally not designed until the design
has been finalized.
* A feature flag is added that swaps out the limited width toggle with
a settings cog
* The preferences module is kept in a separate ResourceLoader module
(skins.vector.clientPreferences) to make it more portable for
when we eventually want to add it to Minerva as well.
* Intentionally have not focused on non-jS version given we will
likely revise this again in a future version/upstream to core.

Bug: T345363
Change-Id: I0c793b73e0676e32f031c6168c292f63908c72e3
2023-09-15 10:03:28 -07:00