Commit Graph

40 Commits

Author SHA1 Message Date
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
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
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
0fe7723a7f Remove unneeded vendor prefixes 2021-04-05 20:27:47 +00:00
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
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
3aa118ab94 Fix search box out of screen (#2650)
Programatically set search results max height
2021-03-07 16:31:23 -05:00
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
17f15e36eb Correct non-existent cursor value (disallowed -> not-allowed) (#2585) 2021-02-01 08:58:41 -05:00
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
649851d356 Remove header bottom border (#2489) 2020-12-08 19:15:14 -05:00
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
67741c7a6f Make checkbox switch component background stand out in modals (#2443) 2020-11-09 20:54:21 -05:00
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
22bf03d872 Fix less build error. (#2252) 2020-08-15 20:21:06 -04:00
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
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
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
3f5554816e Fix mobile notification bubble on colored header (#2109) 2020-04-10 12:50:36 +02:00
a4910f3d94 Update Modal.less 2020-03-30 21:18:48 +02:00
f003f6e04a fix modals 2020-03-30 21:18:48 +02:00
5643ee649b Style validation errors 2020-01-24 15:41:26 +01:00
9c0d921f49 Fix Modal width on <768px screens not occupying the whole page 2019-11-06 17:48:00 -05:00
5eb69e1f59 Updated names to match components in fontawsome (#1791)
fa-* named components are not present, hence updated to matching names.
2019-06-11 20:17:59 +02:00
9115b9e28f Include LESS mixins and variables in all frontend compilers 2018-11-22 12:09:50 +10:30
41544c8529 Fix positioning of hamburger menu unread indicator 2018-11-22 07:24:01 +10:30
bf3934d16f Improve appearance of text editor buttons
- Change preview icon to Font Awesome Regular instead of Solid
- Give the preview button a tooltip
- Change submit button icon to paper plane (shown on mobile)
- Tweak mobile header button touch target
- Scroll overflowing text editor controls horizontally
2018-11-12 17:19:37 +10:30
eafc637475 Prevent long words/content from stretching the discussion list width 2018-10-21 14:47:41 +10:30
c23af9550e Broader system font stack (#1600) 2018-10-17 23:55:41 +02:00
8fd3e8908c Align search icon on search bar (#1599) 2018-10-16 20:40:39 +02:00
0fb9aa3940 Align icons & text in SideNav and Dropdown (#1544) 2018-09-22 21:35:45 +09:30
07298e165d Use default system font instead of Open Sans 2018-09-21 11:20:17 +09:30
6a6b9ac6b1 Use flexbox for sideNav. fixes #1408 2018-07-20 12:34:43 +09:30
cbe328cdc5 Revert Chrome image rendering tweak
The Chrome bug appears to have been fixed:
https://bugs.chromium.org/p/chromium/issues/detail?id=562162

This CSS rule makes images look very ugly in Safari, so removing it.

ref #1259
2018-07-20 12:03:49 +09:30
7b802a76ba Dissociate .sideNav--horizontal from @expand-side-nav 2018-07-20 11:38:42 +09:30
3f683dd6ee Webpack (#1367)
* Replace gulp with webpack and npm scripts for JS compilation
* Set up Travis CI to commit compiled JS
* Restructure `js` directory; only one instance of npm, forum/admin are "submodules"
* Refactor JS initializers into Application subclasses
* Maintain partial compatibility API (importing from absolute paths) for extensions
* Remove minification responsibility from PHP asset compiler
* Restructure `less` directory
2018-06-20 13:20:31 +09:30
b61017efdc Clean up LESS files 2015-04-25 22:31:30 +09:30
cf8e4b9913 Make badge icons not blurry by making sure they can centre accurately 2015-04-03 16:59:50 +10:30
d64ca6bce3 Extract .side-nav into a common file 2015-03-30 12:45:48 +10:30
40a6d77e74 Big front-end asset/filestructure refactor
- Extract shared Ember components into a “flarum-common” ember-cli
addon. This can be used by both the forum + admin Ember apps, keeping
things DRY
- Move LESS styles into their own top-level directory and do a similar
thing (extract common styles)
- Add LESS/JS compilation and versioning to PHP (AssetManager)
- Set up admin entry point

(Theoretical) upgrade instructions:
- Delete everything in [app_root]/public
- Set up tooling in forum/admin Ember apps (npm install/update, bower
install/update) and then build them (ember build)
- php artisan vendor:publish
- Upgrade flarum/flarum repo (slight change in a config file)
- If you need to trigger a LESS/JS recompile, delete the .css/.js files
in [app_root]/public/flarum. I set up LiveReload to do this for me when
I change files in less/ or ember/

Todo:
- Start writing admin app!
- Remove bootstrap/font-awesome from repo and instead depend on their
composer packages? Maybe? (Bower is not an option here)
2015-03-29 22:13:26 +10:30