mirror of
https://github.com/flarum/framework.git
synced 2024-12-02 06:53:47 +08:00
f9779284e4
* 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!
126 lines
2.3 KiB
Plaintext
126 lines
2.3 KiB
Plaintext
.UserListPage {
|
|
// Pad bottom of page to make nav area look less squashed
|
|
padding-bottom: 24px;
|
|
|
|
&-grid {
|
|
width: 100%;
|
|
position: relative;
|
|
border-radius: @border-radius;
|
|
|
|
// Use CSS custom properties to define the number of columns in the grid
|
|
grid-template-columns: repeat(var(--columns), max-content);
|
|
|
|
// Ensure mobile scrollbar isn't on top of content
|
|
padding-bottom: 4px;
|
|
|
|
// Table refreshing overlay
|
|
&--loadingPage {
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(128, 128, 128, 0.2);
|
|
}
|
|
|
|
.LoadingIndicator-container {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
&--loaded,
|
|
&--loadingPage {
|
|
display: grid;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
&-header {
|
|
font-weight: bold;
|
|
border-bottom: 1px solid @muted-more-color;
|
|
padding: 8px 16px;
|
|
background: @control-bg;
|
|
}
|
|
|
|
&--rowItem {
|
|
padding: 4px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&[data-column-name="editUser"] {
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
&--shadedRow {
|
|
background: darken(@body-bg, 3%);
|
|
|
|
& when (@config-dark-mode = true) {
|
|
background: lighten(@body-bg, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-gridPagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
// Handles styling of default UserList columns
|
|
.UserList {
|
|
&-joinDate {
|
|
cursor: help;
|
|
text-decoration: underline;
|
|
text-decoration-style: dotted;
|
|
}
|
|
|
|
&-editModalBtn {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
border-radius: 0;
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&-email {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
|
|
&[data-email-shown="false"] {
|
|
.UserList-emailAddress {
|
|
user-select: none;
|
|
filter: blur(4px);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&Address {
|
|
flex-grow: 1;
|
|
margin-right: 4px;
|
|
transition: filter 0.2s ease-out;
|
|
}
|
|
|
|
&IconBtn {
|
|
margin-left: 12px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|