Commit Graph

410 Commits

Author SHA1 Message Date
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
Sami Mazouz
649851d356
Remove header bottom border (#2489) 2020-12-08 19:15:14 -05:00
Charlie
07a43f52b4
AdminUX Overhaul Small Patches (#2468) 2020-12-07 15:14:22 -05:00
Charlie
c3989cc952
AdminUX Overhaul (#2409)
- Extensions now have their own pages
- The API for extensions to register permissions and settings has been overhauled via the `flarum/admin/utils/ExtensionData` util
- An extension grid has been added as a widget to the Dashboard page
2020-11-24 12:44:40 -05:00
Wadim Kalmykov
571a835be0
Fix mobile PostStream top scroll adjustment & remove App:before (#2385)
- remove App:before so we can use #app-navigation to access the mobile header
- fix mobile postStream scroll top margin adjustment
2020-11-14 17:21:38 -05:00
Nina Pypchenko
67741c7a6f
Make checkbox switch component background stand out in modals (#2443) 2020-11-09 20:54:21 -05:00
Alexander Skvortsov
543b136f7c
Refactor PostStream animations (#2364)
- If the fadeIn animation is specified on the PostStream class itself, any time we add/remove another animation, it will redo fadeIn. To avoid this, we move fadeIn into it's own css class, which is applied, and then immediately removed after the animation is completed to ensure it only runs once.
- The "fix" for flashItem was actually broken, as it resulted in 'flash' never being removed, so we never went back to .PostStream's fadeIn. We adjust flashItem to ensure that '.flash' is removed. We also remove 'fadeIn' in case it hasn't yet been removed in oncreate.
2020-10-15 17:34:35 -04:00
Alexander Skvortsov
1d2f0ca407
Header UI fixes (#2371)
* Revert "Fix header contents moving when opening modal (#2131)"
* Fix header contents moving when modal opened/closed.

Conditionally apply the navbar-fixed-top class only when needed, so that we can take advantage of it without always having the navbar in position:fixed, as was done in the previous solution. That resulted in a clash with custom headers.

* Show header on refresh of scrolled page

Due to some magic in Mithril 0.1's context:retain flag, some DOM elements were cached across page reloads. Since that has been eliminated, if we refresh the page and we are scrolled down, the "affix" class which makes the header fixed (and as a result, visible) isn't applied until the first scroll. We fix this by running ScrollListener.update() immediately to set initial navbar state.
2020-10-09 19:05:53 -04:00
Sami Mazouz
a0c36a015b
Use @control-bg for Slidable content (#2381) 2020-10-09 14:37:47 -04:00
Sami Mazouz
6d826e5b30
Right align discussion controls dropdown on slidable item (#2330) 2020-09-30 16:53:50 -04:00
Alexander Skvortsov
82af307280
Restore fadeIn to 400ms (#2312)
This is the jQuery fadeIn default, which we were relying on before this animation was changed to pure CSS.
2020-09-25 21:15:24 +02:00
Alexander Skvortsov
79f9012694
Fix Post-actions being on top of Post Controls Dropdown
- This was accidentially introduced when an explicit z-index was added to reply-actions to prevent Post-footer from covering it
- Here, we revert that zindex, while making Post-footer inline-block to stop it from covering everything. We also set height=0 to stop implicitly added height
2020-09-18 15:33:01 +02:00
Franz Liedke
c39b6a6d2f
Extract a few changes from the Mithril 2 upgrade (#2262)
* Fix closing the composer with ESC key

Regression from #2161.

* Remove obsolete method

Regression from #2162.

* Mark method as protected

* Fade in posts in post stream using CSS

This also avoids a double-fade from the JavaScript code, which was
probably introduced in #2160.

* Fix fadeIn for post stream items

Co-authored-by: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
2020-08-16 16:32:59 -04:00
一枚小猿
22bf03d872
Fix less build error. (#2252) 2020-08-15 20:21:06 -04:00
Alexander Skvortsov
5e465f6051
Extract Composer state (#2161)
Like previous "state PRs", this moves app-wide logic relating to
our "composer" widget to its own "state" class, which can be
referenced and called from all parts of the app. This lets us
avoid storing component instances, which we cannot do any longer
once we update to Mithril v2.

This was not as trivial as some of the other state changes, as we
tried to separate DOM effects (e.g. animations) from actual state
changes (e.g. minimizing or opening the composer).

New features:

- A new `app.screen()` method returns the current responsive screen
  mode. This lets us check what breakpoint we're on in JS land  
  without hardcoding / duplicating the actual breakpoints from CSS.
- A new `SuperTextarea` util exposes useful methods for directly
  interacting with and manipulating the text contents of e.g. our
  post editor.
- A new `ConfirmDocumentUnload` wrapper component encapsulates the
  logic for asking the user for confirmation when trying to close
  the browser window or navigating to another page. This is used in
  the composer to prevent accidentally losing unsaved post content.

There is still potential for future cleanups, but we finally want   
to unblock the Mithril update, so these will have to wait:

- Composer height change logic is very DOM-based, so should maybe
  not sit in the state.
- I would love to experiment with using composition rather than
  inheritance for the `ComposerBody` subclasses.
2020-07-25 00:17:25 +02:00
Alexander Skvortsov
0b5a9a2fe6
Make scrubber handle have transparent background (#2222) 2020-07-01 17:07:13 -04:00
w-4
4b6864534b
Fix header contents moving when opening modal (#2131)
* add navbar-fixed-top css class

* App-header position:fixed
2020-05-23 14:41:54 -04:00
Sami Mazouz
d6acf28fcb
Add z-index rule as part of fixing replies dropdown menu width (#2178) 2020-05-22 18:50:39 -04:00
Alexander Skvortsov
acf4e9c80d
Removed excess Widget class in favor of DashboardWidget (#2164) 2020-05-19 20:52:07 -04:00
julakali
f89f114fad
Don't use body as tooltip container, allow notification area overflow (#2166)
* Don't use body as tooltip container, allow notification area overflow

Badge tooltips are using container: 'body', so they can overflow the
notification area. When the user navigates back while a badge tooltip is
showing, the tooltip remains visible.
This commit removes the body container attribute and instead allows the
notificationDropDown to overflow, so badge tooltips aren't cut off.
Instead, this adds overflow: hidden to NotificationList.
Fixes #2118.

* Remove newline
2020-05-15 20:10:40 -04:00
Alexander Skvortsov
ffa56595c3
Improved UI of Switch with loading indicator (#2039)
* Moved loading indicator outside of checkboxes to improve ui
* Made loading indicator more visible, fade label when switch is loading
2020-04-10 22:51:58 +02:00
Hasan Özbey
3f5554816e
Fix mobile notification bubble on colored header (#2109) 2020-04-10 12:50:36 +02:00
Franz Liedke
922e294668
Permissions page: Tweak icon styling
- Give them a fixed width (independent of font library)
- Center the icons in their column
- De-emphasize the icons by applying a muted color

Fixes #2016, closes #2018.
2020-04-10 12:01:04 +02:00
Hasan Özbey
b286e39429 fix extensions page layout 2020-04-03 11:44:02 +02:00
Hasan Özbey
a4910f3d94 Update Modal.less 2020-03-30 21:18:48 +02:00
Hasan Özbey
f003f6e04a fix modals 2020-03-30 21:18:48 +02:00
Franz Liedke
833ea4e06e
Connect labels with their form fields 2020-01-24 15:41:26 +01:00
Franz Liedke
5643ee649b
Style validation errors 2020-01-24 15:41:26 +01:00
Franz Liedke
97b2db84c6
Mail drivers: Separate definition from validation 2020-01-24 15:41:26 +01:00