Commit Graph

438 Commits

Author SHA1 Message Date
David Wheatley
3db258390d
style fixes 2022-01-04 13:20:37 +00:00
David Wheatley
8b3ddd856e
styling fixes 2022-01-01 17:21:27 +01:00
David Wheatley
58441b1d1f
refactor: Modals rewrite to use native HTML Dialog element 2022-01-01 16:38:52 +01:00
David Sevilla Martin
94c4f266e3
feat: remove color validation in appearance admin page & add color indicator (#3140)
* Remove color validation in basics admin page & add color indicator

* Create ColorInput common component

* Revert 'formGroupAttrs' addition

* Rename component CSS classes

* Fix input type in ColorInput from AdminPage#buildSettingComponent

* Rename component to ColorPreviewInput, remove aliases in admin & export in compat

* Remove leftovers from rebase on master

* feat: add global type definition for a vnode element tag

* fix(a11y): add aria roles to color input

* chore: use new type

* chore: format

Co-authored-by: David Wheatley <hi@davwheat.dev>
2021-11-23 21:38:46 +00:00
David Wheatley
bb817d9a90
fix(a11y): show post action items when focus is within the post (#3173)
* fix: show post action items when focus is within the post

* fix: add missing `&`
2021-11-21 20:25:00 +00:00
David Wheatley
eaf1b86785
fix(a11y): add focus traps to modals and nav drawer (#3018)
* Add focus trap util

* Add focus trap to Modals

Fixes #2663

* Split tab press into `onTab` handler

* Remove deprecated code

* Use requestAnimationFrame instead of setTimeout

* Reduce code duplication

* Implement focus trap in nav drawer

Fixes #2665

* Hide drawer when window is resized to be bigger

Fixes issue where focus trap would remain on the drawer when it is
just the app header, if the drawer was opened then the window was
made larger.

* Simplify conditional function calls

* Fix modal focus trap

* Remove debug code

* Simplify resize handler conditional statements

* Add info about reasoning of resize handler

* Prefer native JS methods over jQuery

* Update conditional function call to handle `undefined`

* Expose screen sizes as CSS custom properties

* Use `window.matchMedia` rather than resize handler

* Fix spelling error

Co-authored-by: David Sevilla Martin <me@datitisev.me>

* Remove breaking change

Co-authored-by: David Sevilla Martin <me@datitisev.me>
2021-11-21 19:44:31 +00:00
Sami Mazouz
809df29d29
feat: Declare & Use CSS Custom Properties (#3146) 2021-11-04 22:34:18 +01:00
Sami Mazouz
acf16fdf2e
chore: Minor Readme CSS code tidy up (#3138) 2021-10-29 19:31:15 +01:00
David Wheatley
a1b5ef5154
fix: issue with CSS styles when in-between whole pixel values for viewport width (#3139)
* fix: issue with CSS styles when in-between whole pixel values for viewport width

Fixes #2915

* chore: add explanatory comment

* fix: add missing slash
2021-10-29 18:57:53 +01:00
Ian Morland
28ead83b04
Add README documentation to ExtensionPage (#3094)
Co-authored-by: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
2021-10-27 21:56:56 -04:00
David Wheatley
e0b6190733
[A11Y] Improve accessibility for discussion reply count on post stream (#3090)
* Add class to remove all UA styles from a button

* Improve classList utilisation

* Simplify JSX

* Use classlist instead of concatenation

* Fix reply count focusable when not acting as a button

* Add SR only class

* Add new reply count translations

* Use cleaner translations

* Remove unused import

* Add missing new line

* Delete Accessibility.less

* Use existing `.visually-hidden` class

* Format

* Fix locale formatting
2021-10-27 22:59:17 +02:00
Alexander Skvortsov
6200ffef9b
Hide webkit search button (#3128) 2021-10-27 09:28:40 -04:00
Alexander Skvortsov
60f0ef0bd5
Handle post rendering errors to avoid bricking (#3061)
Whether it's due to corrupted content, missing tags, caching issues, or other assorted reasons, post content can't be rendered. Currently, this results in an exception that crashes the entire forum and is hard to debug. Instead, we should log the error and show an indicator message that rendering has failed.

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
Co-authored-by: David Wheatley <hi@davwheat.dev>
2021-10-14 14:30:18 -04:00
David Wheatley
5dd48e1b86
[A11Y] Accessibility improvements for the Search component (#3017)
* Remove deprecated code

* Accessibility improvements for Search component
2021-09-20 16:06:15 +01:00
David Wheatley
c10a30bae9
[A11Y] Adds missing focus rings back to control elements (#3016)
* Remove the stuff that removes critical accessibility features

* Remove no outline from basic blade layout

* Remove focus outline from FormControls
2021-09-13 23:47:13 +01:00
Sami Mazouz
1aa61f1f01
fix: Unable to use permission grid dropdowns due to z-index mistake (#3065)
The one I had suggested here: https://github.com/flarum/core/pull/2887#pullrequestreview-690047538
2021-09-05 18:29:18 +01:00
Sami Mazouz
e8153ccc79
feat: NoJs Admin View (#3059)
Adds a nojs blade template to be able to enable/disable extensions when one of them misbehaves.
2021-08-31 09:08:27 +01:00
Sami Mazouz
af89b23f67
CSS Code Housekeeping (#3026)
* refactor: Avatar classes refactor
* refactor: Badge classes refactor
* chore: Remove commented dead code
* chore: Remove SignUpModal dead CSS code
Flarum seem to have had some kind of user display in the sign up modal 
on successful sign up, which no longer exists.

https://github.com/flarum/core/blob/v0.1.0-beta/js/forum/src/components/SignUpModal.js#L111
* chore: Deprecate unneeded vendor mixins
* chore: Normalize property values format
Co-authored-by: David Wheatley <hi@davwheat.dev>
* chore: Remove @-webkit-keyframes
* chore: Combine animation properties
* chore: Avoid `all` for transition
* chore: translate3d is no longer necessary for hardware acceleration
* fix: Lost cursor pointer to normalize update
* chore: Use CSS variables for more things
* chore: Remove unecessary overspecification
Co-authored-by: David Wheatley <hi@davwheat.dev>
2021-08-21 19:34:07 +01:00
David Wheatley
83529e23de
[A11Y] Make checkboxes focusable (#3014)
* Add extra feature to a11y focusring mixin

* Add visually hidden CSS class and mixin

* Visually hide checkboxes (keep in focus/a11y tree)

* Place checkbox focus ring around display element

* Improve mobile checkbox/switch accessibility
2021-08-16 11:56:10 +02:00
Sami Mazouz
ef20e29b20
[1.x] Custom Colorising with CSS Custom Properties (#3001)
* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr

Co-authored-by: David Wheatley <hi@davwheat.dev>
2021-08-16 10:17:48 +01:00
Sami Mazouz
cbf4b9c0b4
Fix NotificationGrid Design (#3028)
Updating normalizer messed with it
https://github.com/flarum/core/pull/3015/files
2021-08-15 19:08:05 +01:00
Ornanovitch
634dfc69f3
Permission Grid: stick the headers to handle a lot of tags (#2887)
* sticky thead th & tbody th, adapt PermissionPage and PermissionGrid layout

* adjust height size

* cleanup

* cleanup with some SychO9's recommendation

* remove the `thead th` `first-child` "protection"
2021-08-15 00:21:08 +01:00
David Wheatley
d8c112088d Update Normalize.css 2021-08-12 17:46:08 +02:00
Pierre Schmitz
f1ba5e7b70
Limit height of code blocks (#3012)
* Limit height of code blocks

Users often post lengthy code or configuration listings which makes following the actual discussion difficult. Therefore we limit a code block by half a screen while still being able to scroll through the code listing itself.

* Define a minimal code block height for small screens

* Add max-height compatibility for browsers that don't support `max()`

See https://caniuse.com/css-math-functions

* Less has a built-in `max` function, so we need to escape this value

Co-authored-by: David Wheatley <hi@davwheat.dev>
2021-08-11 20:28:02 +01:00
David Wheatley
da20d75e3c
Hide post footer when empty (#2926)
* Add `Post-footer--empty` class if the post footer contains no items

* Hide post footer when it has class `Post-footer--empty`

* Swap to `:empty` pseudoselector

* Prefer ternary operator

* Fix typo
2021-07-13 13:42:19 +01:00
David Wheatley
408bb38cc0
Update code block styling to match HLJS 11's new styles (#2909) 2021-07-09 10:04:12 +01:00
David Wheatley
d1e38558c5
Fix image avatar alignment in notifications (#2906) 2021-06-11 12:13:57 +01:00
Alexander Skvortsov
9eb74fdc8a Fix CustomFooterModal Appearance
The textarea in the CustomFooterModal was much larger than in the other appearance page modals, and did not use a monospaced font. Turns out the other 2 were explicitly specified in the less. This commit adds a class that can be applied to all these modals for simpler maintenance.

Fixes https://github.com/flarum/core/issues/2865
2021-05-14 21:36:06 -04:00
David Wheatley
3ca035f9aa
Revamp notifications stylesheet (grid and flex) (#2822) 2021-05-02 17:13:04 +01:00
David Wheatley
8a431dc3cc
[A11Y] Add focus ring mixin to restore ring to elements which no longer have it (#2814)
* Add focus ring mixin

These mixins allow us to restore default browser focus rings on elements which no longer have them.

* Add info about custom outline styles; use `#private` namespace and fix mixin name

I just learned that Less has namespaces! https://lesscss.org/features/#mixins-feature-namespaces
2021-04-29 22:10:17 +01:00
Sami Mazouz
40b47de9e1
Remove ExtensionPage CSS over-specification (#2792) 2021-04-29 16:31:37 +01:00
Sami Mazouz
2b7e7f3ff4
Fix class naming (#2811) 2021-04-26 17:14:22 +01:00
David Wheatley
f9779284e4
Add users list to admin dashboard (#2626)
* Commit initial WIP code

* Fix squashed grid on mobile

* Add pagination support; rename to userList

* Improve grid sizing

* Improve grid row shading

* Move EditUserModal to common

* Add link to profile page in grid

* Use Less styling vars

* Move EditUserModal translations to lib

* Add edit user button to grid

* Fix incorrect profile link priority

* Update profile link translation key

* Add priorities to other columns

* Add group badges to grid

* Add username to profile link tooltip

* Organise imports

* Use variable for header border bottom color

* Fix broken export

* Add total user count to API payload's metadata

* Add new metadata to ApiPayload type

* Implement correct page number

* Remove debug code

* Use function to get the total pages

This allows us to use the raw count elsewhere in the component (pssst... check the next commit!)

* Center profile link in column

* Add profile link header

* Show total users above table

* Use ItemList's itemName property for column data attributes

* Add user email column, hidden by default

This column is hidden by default using a placeholder email and blur filter. These are then removed when the visibility toggle is pressed.

This prevents any over-the-shoulder accidental data leakage, as emails are classed as PII under GDPR.

* Fix incorrect tooltip translation keys

* Add extra padding between email and visibility toggle button

* Prevent selection of blurred email

* Fix incorrect icon state for email toggle

* Update API response type to include metadata (for now)

* Increase number of users per page to 50

* Update compat files with new locations

* Format

* Add @deprecated notices for forum compat export

* Use AdminPayload for user count instead of supplying as REST API metadata

* Make nav look less squashed using bottom margin

* Suppress TS warning

* StyleCI fixes

* Fix TS error

* Update based on review comments

* Rename user list -> users

* Rename internal instances of user_list to users

* Fix formatting

* Use CSS custom properties for the table column count

* Use .Button--icon instead of custom style

* Make fake email more realistic length

* Add a11y attributes

* Use padding bottom instead of margin bottom for page spacing

* Make compatible with new CSS LoadingIndicator

I won't let it break here! :P

* Integrate profile link into username column

* Don't force columns to be 300px

This made the grid look very bloated and intimidating -- lets instead increase the padding between items and make it only the width it needs to be.

* Center edit user button in column

* Increase spacing between email and visibility toggle button

* Rename `statistics` to `modelStatistics` in Admin payload

This prevents any possible conflicts with core and `flarum/statistics`. We might want to consider migrating the stats extension to extend this object in the future.

* Update comments, fix TS error

* Various translation key changes

* Change gmail.com -> example.com

* Stretch 'edit user' button to entire cell size

* Update translations

* Is the YAML formatted right this time? 🙈

* Remove email placeholder

Fixes an issue where the table would jump if an email was unhidden that was longer than the placeholder.

* Re-order lib translations

* Clicking blurred email now unblurs

* Correct header class

* Improve edit user button centring

* Improve vertical row item centering

* Fix incorrect column length in aria attribute

* Use .Button--text!
2021-04-22 23:35:42 +01:00
David Wheatley
33bd99d376
Fix uses of loading spinner (#2797)
* Update Loading Indicator

- Fix mistake in LoadingIndicator Less
- Middle align the loading indicator when inline
- Fix Loading Indicator not correctly accepting container class names
- Add inline and block attributes

* Fix loading indicator in composer

* Fix loading indicator on notification list

* Fix loading indicator on discussion page

* Fix loading indicator on button

* Update more uses of loading indicator

* Fix loading indicator in Search box

* Fix AvatarEditor loading spinner

* Set default spinner props

* Replace "tiny" with "small" in Less

* Improve spinner vertical centring in buttons

* Reduce size specificity

* Use single attribute for block/inline

* Use new display attribute

* Use classes for different sizes

* Use `display=block` by default
2021-04-21 12:26:09 +01:00
David Wheatley
f76524a5de
Replace spin.js with a CSS-only loading spinner (#2764)
* Create CSS only loading indicator

* Core mods to fix Loading Indicator usage

* Remove extra whitespace

* Attrs interface extends ComponentAttrs and is exported

* Add doc block about custom styling
2021-04-09 00:42:32 +01:00
David Wheatley
19465fb522
Fix missing vendor prefix on post scrubber; move styles to Less 2021-04-05 23:19:52 +01:00
David Wheatley
0fe7723a7f Remove unneeded vendor prefixes 2021-04-05 20:27:47 +00:00
Alexander Skvortsov
5e8155e1cc
Remove unnecessary and imperceptible fade (#2685)
This concern was raised in https://discuss.flarum.org/d/26422-idearequest-make-header-background-color-match-exact-value-from-config.
2021-04-04 01:49:31 +01:00
David Wheatley
0cc12aed95
[A11Y] Fix nav drawer being focusable when off-screen on small viewports (#2666)
* Fix nav drawer being focusable when off-screen on small viewports

Fixes #2565

* Implement review suggestions

* Format
2021-03-18 22:38:32 +01:00
Sami Mazouz
91d5d9c176
Use absolute positioning for the Composer on Safari (#2660) 2021-03-07 16:31:46 -05:00
Alexander Skvortsov
3aa118ab94
Fix search box out of screen (#2650)
Programatically set search results max height
2021-03-07 16:31:23 -05:00
Sami Mazouz
725863a6e2
Move TextEditor styles to common (#2661)
Now that TextEditor js component is shared, it only makes sense to also 
have its styles shared
2021-03-05 08:14:19 -05:00
Alexander Skvortsov
7d79912d36
Editor Driver Abstraction (#2594)
This will allow drop-in replacements of the editor with a more advanced WYSIWYG solution such as ProseMirror
2021-02-26 16:17:05 -05:00
Sami Mazouz
67306a9d34
Fix keyboard on small mobile screens hiding composer (#2631) 2021-02-26 16:07:29 -05:00
Charlie
71ccdc00e6
AdminUX Patch and Admin Page (#2593)
* AdminPage

* More fixes

* Settings Modal Drop

* Translation and docblock

* settingS

* Convert Fieldset to JSX

* info -> headerInfo, className

* Overflow fixes

* MailPage

* Admin Less

* Basics Page

* Changes

* Cleanup

* Permission Page

* Add padding
2021-02-18 15:45:43 -08:00
Billy Wilcosky
73a8efaec2
Update DiscussionListItem.less to fix double tap on mobile (#2607)
Adds a rule to the discussion list less file which targets touch devices whose primary way of interacting does not include a mouse / ability to hover. For those devices the toggle button is hidden which fixes the double tap issue.
2021-02-17 08:51:09 -05:00
David Wheatley
17f15e36eb
Correct non-existent cursor value (disallowed -> not-allowed) (#2585) 2021-02-01 08:58:41 -05:00
David Sevilla Martín
930fcf9250
Make disabled extension dot a red border instead of red background (#2562) 2021-01-27 08:04:19 -05:00
Sami Mazouz
9b27b0d9d7
Fix composer header hidden by mobile browser (#2279) 2021-01-07 10:25:12 -05:00
Alexander Skvortsov
94381dca62
Fix IOS scroll menu bug (#2527)
Fixes https://github.com/flarum/core/issues/1959

These transform lines are known to cause issues on iOS, and were added to hack around chrome issues that have since been fixed upstream.
2021-01-05 19:40:11 -05:00