* Make 'upload one now' link on document chooser work after results refresh
Fixes #8528
Put the initTabs call inside ajaxifyLinks so that it's reapplied when the results container (including the 'no results message') is replaced.
* Make 'create one now' link on task chooser work after results refresh
Fixes #8500. As a consequence of the CSS changes in c6fdb6bbb3, scroll position is no longer reflected in the document element's scrollTop property, but on the `<main>` element instead. As a result, comment positions were not being adjusted for scroll position. To account for this (and any future CSS changes), we walk all ancestor elements to calculate the true scroll position.
This was causing relative urls to be rewritten to use the publicPath.
This meant that the icon font would be referenced at the wrong location
if sites had changed STATIC_URL
fixes #8517
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
- Animations – The close animation for sub-menus doesn't seem to play when the menu is expanded - Made it so sub menu's stay open when the menu is expanded and collapsed
- Animations – The account menu seems to have a different tween animation to the rest of the menu. Causing it to do a weird thing when you collapse the menu while the account menu is open
- Animations – The avatar suddenly jumps to the right when you collapse the menu
- Animations – The Bird seems to have two hover states (try slowly moving your mouse cursor from top to bottom and you'll see it's wing appears before the hover animation is triggered). Not sure if this is intended behaviour.
- Accessibility – Focus order is incorrect on the mobile version (it should be possible to move to the sidebar after having toggled it)
- Try and fit more letters in to the sidebar menu items by reduce the padding / margin on the right side of the arrow, and reduce the gap between the icon and the text a tiny bit
- Make it so when you have a menu open (e.g. Bakery misc) and you click the slim sidebar icon, the menu stays open as the menu gets slim.
- Add a label to the sidebar’s `<aside>`
* Hide more actions dropdown button on listing pages when performing actions in bulk
* Add toggleMoreActionsDropdownBtn function
* Fix lint issues
* Use if/else statement instead of ternary operator to avoid lint warning
- Visual design – Collapsed sidebar is wider than intended
- Visual design – Change “Edit your account” to “Account” tooltip
- Visual design – Slim side bar on bird hover, make the bird a little big bigger (don’t make it shrink as much)
- Visual design – Change the tooltip to the darker indigo (discussed with ben and this is no longer necessary)
- Visual design – Expand the space between the menu items (add 3px padding) - then adjust the flyout menu items spacing too
- Visual design – Get the labels and icons to align vertically (space between icon and label)
- Visual design – Make the width 60px
- Visual design – Make the arrows slightly smaller and closer to the icons on slim view
- Visual design – Move the bird higher up and slightly smaller, as per the designs
- Animations – I wonder if the new |-> icon should flip horizontally rather than roll? (or maybe not animate at all?) The rolling animation feels a little strange as I think the pipe is meant to represent the always vertical menu
- Animations – The Bird seems to have two hover states (try slowly moving your mouse cursor from top to bottom and you'll see it's wing appears before the hover animation is triggered). Not sure if this is intended behaviour.
- UX – Unexpected behavior with the search – clicking the "Search" icon submits a search, while all other icons in the sidebar are safe to click (This will expand the menu in slim mode and only have pointer events to submit in expanded mode which should be acceptable as its the submit button for the field?)
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
-Add a down arrow to right of Switch Locales
- Change the wording “Set Privacy” to “Change Privacy”
- Make the close icon on the info panel the same size as the close icon on the slim sidebar
- Make title field text font weight 800
* Move page history button to after the side panel toggles
This was requested by Ben to make the "Info" button come first
* Close the side panel when comments are selected
resolves #8043
ui-monospace, Menlo, Monaco, ... "Courier New", monospace
Operating Systems and their fonts:
ui-monospace -> MacOS (Menlo, Monaco fallback)
Cascadia ->Windows (since Vista)
Roboto -> Android (since 4.0)
Fira -> Firefox OS
Droid -> Android (<4.0)
Oxygen -> KDE
Ubuntu -> Ubuntu
In addition, ui-monospace is supported for Safari/MacOS (only way to access SF Mono in Mac);
Cascadia is a new Microsoft font-face, and Segue is the fallback.
* Return comment count to header toggle with placeholder styling
* Fix comment count styling, adjust sidebar sizing and comment toggle space
* Remove comment spacing fix for now
Add client-side logic to confirm a duplicate upload
Add template shown when a duplicate image is found via modal upload
Style duplicate upload template shown in modal
Add test for duplicate image upload in modal chooser
Avoid loading all duplicates in memory and use f-string
Make template fragments translatable and use image templatetag to render images
Use class selector instead of direct element one
Set primary button to 'Use existing and delete new' on duplicate upload
Add utility function to find an image's potential duplicates
Add logic to detect duplicates on multiple images upload view
Add template shown when a user is prompted to confirm a duplicate upload
Add client-side logic to confirm a duplicate upload
Add/update styles
Add tests for duplicate image uploads
Index Image file_hash field
Ensure that a user can choose an image from duplicates returned by find_image_duplicates
Use CSS classes instead of HTML elements to hide edit form on duplicate upload
Add ImagesPermissionPolicy helper to retrieve the permission policy dynamically
This allows test cases that override the base image model to pick up the corresponding permission policy, should they need it.
Remove usage of sibling selector
Use wagtail image templatetag to generate image
Renamed ImagesPermissionPolicy to ImagesPermissionPolicyGetter
Fail loudly when setting permission policy and a wromg image model is provided
Add decorator to disconnect a signal's receiver during a test execution and use it in get_image_model tests
Improve warning message on duplicate upload in multiple upload view
Show matching form when confirming a duplicate upload
As per discussion on https://github.com/wagtail/wagtail/discussions/7732, the changes in the upcoming release (sidebar redesign, removal of hallo.js, module reorganisation) warrant a version bump to 3.0 if we're following semantic versioning.
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
- Removing the peeking attribute so the sidebar only opens when intentionally set to expanded mode by using expand or search or account functionalities
- Adding tooltips on link item hovers
- Expanding of slim sidebar when search is clicked and when account options are clicked
* Consistently set `aria-haspopup="menu"` for all sidebar menu items that have sub-menus (LB (Ben Johnston))
* Make sure `aria-expanded` is always explicitly set as a string in sidebar (LB (Ben Johnston))
* Use a button element instead of a link for page explorer menu item, for the correct semantics and behavior (LB (Ben Johnston))
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
- `-apple-system, BlinkMacSystemFont` - These are used to target modern iOS Safari, macOS Safari, macOS Firefox and macOS Chrome's system fonts.
- ` 'Segoe UI', system-ui,` - These fonts target windows machines on Windows 7+ [reference](https://markdotto.com/2018/02/07/github-system-fonts/#the-stack). Having system-ui placed after Segoe UI allowed Segoe UI to take precedence when used on Windows machines set to Chinese ( Simplified ) language. There are some known language issues around `system-ui` being used: [This github article](https://infinnie.github.io/blog/2017/systemui.html). However, the purpose of `system-ui` [(reference here)](https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui) is to allow web content to integrate with the look and feel of the native OS. Which makes this font-family a good choice for other devices _if_ the problem is solved by putting Segoe UI first.
- `Roboto,` - This is our fallback font for androids devices. Having Segoe set before this allows windows to use its system default font even if you have installed Roboto for development reasons.
- `Helvetica Neue,` - This is a fallback for older macOS
- `Arial` - Using this to catch any of the very old Windows versions (shoutout windows 95)
- `sans-serif` - Our last resort to get a font without serifs
- ` 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';` - All the emoji's for the OS's mentioned above. 😁
- Remove gulp code and docs
- Add base CSS & SCSS processing in Webpack
- Make sure Sass files use paths that can be resolved by Webpack
- Use faster source map generation
- Clean up build scripts
- Make sure Storybook can process Sass
- Switch away from web fonts (more work needed)
- Tweak stylesheets for compatibility with latest stylelint configuration
- Move stylelint config to JS for ease of copying rules with main config
- Enforce scss/no-global-function-names by refactoring code with sass-migrator
- Run Sass code through sass-migrator
- Change stylelint configuration and code to enforce font-family-no-missing-generic-family-keyword
- Manually switch to math.div where migrator used * 0.5
Fixes #7654. Without this fix, the server-side logic ends up only considering column IDs up to the final number of columns in the table, so (for example) if you start with three columns, delete two and add one, it will only consider IDs up to 2 even though the last inserted column has been assigned an ID of 4.
* [feat] Documents, images and users bulk actions now work with custom models as well
* [fix] Bulk move disables invalid parent pages in the page chooser modal
* [refactor] Make the code DRY
Co-authored-by: Shohan <shohanduttaroy99@gmail.com>
* [feat] Add feature to customize behavior of select all objects in listing
* [feat] Select all in listing now works with search terms
* [refactor] Make the code DRY
* [fix] Fix transform transition of action bar
* [refactor] Increase spacing in action bar, consistent with the designs
* [fix] Make button width fixed, with proper notes to accessibility
* [refactor] Decrease padding and border radius, remove borders from buttons, align action bar with titles
* [refactor] Remove border from more button and decrease font weight of button label
Changed following
- action bar now uses translate for animation instead of changing layout
- action bar is now hidden from both text readers and keyboard navigation when it is out of view
- css now doesn't use elements for styling
- 'Show all in listing' is now a button instead of an <a>
- Changed aria labels to more suitable and meaningful ones
Fixed following
- Fixed the transition time of the action bar
- Fixed the sudden jerk due to text change in the action bar
- select all text in the action bar now appears only if there are more objects to display
Fixed following
- The text color on the bulk action buttons used to turn white on hover. Now, the text color changes acoordingly
- Changes to footer css changed caused changes in some unwanted places. Fixed that by namespacing the css changes
Added following
- Add 'More' dropdown if there are more than 4 bulk actions
- Add bulk actions to 'Pages search' page
Changed following
- Move actions bar from headers to footer
Added following
- Add prepare action method that runs before transaction starts
- Add a default form with a default field
Changed following
- Move permissions check in bulk move from before hook to a method that runs before the transaction starts
- Select all pages now doesn't fetch all ids, but passes id as all and the parent page id
- Change no access permissions
Fixed following
- Fix tests for changes in html
Added following
- Separate routes for getting filter count with or without parent page id
- Use already existing parse_query_string function for parsing filter string
Changed following
- apply_filters now uses django's Q object, for more flexibility of filters
Fixed following
- bulk_action_choices hook now passes existing tests
Added following
- Add support for filters
- Add bulk delete, publish and unpublish actions (views and templates)
- Add search textbox to get filtered results
- Add view to get count of pages corresponding to a set of given filters
changed following:
change only first __prefix__ when multiple __prefix__ are present in
same name when orderable and blocks are nested
Co-authored-by: anirudhvs <54744932+anirudhvs@users.noreply.github.com>
Co-authored-by: CaptainIRS <36656347+CaptainIRS@users.noreply.github.com>
- fixes #7587
- fixes #5770
- Simplify rendering of .c-sf-button and its elements
- replaces the rendering of `.c-sf-button` as a flexbox by a simple
- block element - as it is enough here - and moves text related rules to the <button> element.
- Use SVG icon in StreamField's action buttons
- fix search header field border in Windows High Contrast mode
- fix tab-nav active in Windows High Contrast mode
- add border for c-sf-button. This fix view in WHC mode.
- add justify-content - center for better view on mobile devices.
Currently, the label shown for a StructBlock's collapsed representation takes its content from the first sub-block of the StructBlock, which isn't always what you want. Add a new `label_format` meta option to StructBlock to allow customising this - e.g. `label_format = "Profile for {first_name} {surname}"`
Tabbing (navigation using Tab or Shift + Tab keys) will now close
the menu and move to the next focusable element on the page instead
of focusing the next menu item.
The previous behaviour was a deviation from the ARIA menu practices:
https://w3c.github.io/aria-practices/#menu
Further changes / cleanup:
* Consume keyboard events like arrow down to prevent the browser
from interpreting them.
* Refactor repeated setTimeout and `.focus()` calls into single
`focusElement(el)` function. Let's keep it DRY!
Fixes #7290
* Add bars.svg icon
* Add Open/Close button for mobile mode
* Completely hide sidebar in mobile mode
* mobile state tweaks
* Rename 'open' to 'visibleOnMobile'
* Don't initialise 'collapsed' state based on screen size (old code)
* Remove main.sidebar--open (not used)
Co-authored-by: Storm Heg <storm@stormbase.digital>
- Due to how high-contrast mode works, there was no visual separation between the sidebar and the main content, adding a transparent border resolves this without having any visual impact in non-high contrast mode
- fixes #7456
* Fix left padding not changing fast enough
* Make all icons stay in a fixed Y position
So they don't move when you hover
* Make the Wagtail a bit bigger in collapsed mode
* Fix position of search icon when expanding/contracting menu
* Animation refinements
* Fix gap between icon and text changing for legacy icons during collapse
* Only peek the menu if the mouse hovers over a menu
This fixes an issue where peeking wouldn't happen if you collapsed the
menu and then hovered over a menu item without the mouse leaving the
sidebar. It now always peeks when the user hovers the menu item.
But we still want to avoid it peeking when the user clicks the collapse
button, so I've moved the mouse enter/leave handlers to a sub-element
that doesn't include this button.
* Peek the sidebar on focus
Allows the sidebar to open when it receives keyboard focus, and stops it
annoyingly closing while you are typing a search query.
* Remove the start peeking timeout
* Make more panels type collapsible
* Remove duplicate js in homepage template
* Move collapsible code into its own js file
* Change $li to $target in collapsible.js, as in #6342 Closes #7364, #6342, #6187, #2123
Co-authored by: Fabien Le Frapper <contact@fabienlefrapper.me>
Co-authored-by: Robbie Mackay <rm@robbiemackay.com>
Co-authored-by: Scott Cranfill <scott.cranfill@jpl.nasa.gov>
Fixes #7353
The error counter was only counting elements with class error-message, but non-block errors on ListBlock / StreamBlock use a different styling,help-critical.
The rationale for these was to keep the control flow in one direction, so that the child blocks don't know about the wider sequence they belong to. But that's already undermined by the fact that they have to keep track of their own index number, and it just makes things needlessly unwieldy, particularly when we go on to make action buttons pluggable (and emphatically want to avoid having a mass of abstraction between the button and the action it performs).
Fixes @cnk's test case from #7248. blockErrors within a ListBlockValidationError is an array (with nulls for the items with no errors), but setError was treating it as a dict keyed by block index, which meant it was erroneously passing nulls to the child setError method. FieldBlock handles this gracefully, but other blocks such as StructBlock don't.
This means we're not artificially forcing four different entity types into the same code path, and makes it possible to define new entity types outside of this module.
Also relax the eslint no-unused-vars to allow unused function parameters - having multiple classes following the same interface is a legitimate use of this.
* Added separate SidebarPanel component
* Copied explorer implementation
It's going to need a lot of changes
* Initialise the page explorer
* Move page explorer up a bit
* Hook into page explorer navigation
* Make navigate handler replace default button click behaviour
* Update page explorer to use SidebarPanel
* Add swipe in/out transition for page explorer
This allows us to test it without having to jump through hoops to make the rest of page-editor.js module-friendly, and moving the test module out of client/src/entrypoints means we don't duplicate it into wagtail/admin/static (where the test runner tries to run it again with broken imports)
This means we don't need a bogus "eslint-disable-next-line import/no-unresolved" directive when importing built CSS, which ends up breaking lint locally. Fixes #7177
The tab code looks for the presence of a URL hash and calls showTab on a link with that href, without checking that the link A) actually exists and B) is a tab as identified by the data-tab attribute. As a result, non-tab-related uses of URL hashes (such as simply visiting /admin/#foo) throw a JS error.
Fixes #7146 - the root StreamField element is now matched by ID _and_ having a data-block attribute. (Duplicate IDs are invalid HTML and the 'proper' fix would be to add a global prefix to form fields, particularly since this problem isn't necessarily specific to StreamFields - but that would be a bigger breaking change.)
- Run `npx -p @storybook/cli sb init --type react --builder webpack5`
- Moved .storybook and stories folders into client
- Run `npm i --save-dev html-webpack-plugin@latest` to workaround https://github.com/storybookjs/storybook/issues/13332
- Add storybook-static to .gitignore
Fixes #7086. As per https://github.com/wagtail/wagtail/issues/7086#issuecomment-826945031, ensure that .as_data() is consistently called when telepath-packing ErrorList objects (so that we preserve any embedded ValidationError objects instead of casting them to strings), and introduce an explicit ValidationError class on the client side to make mismatches more obvious (and for future extensibility in case we need to attach more fancy logic to ValidationError).
Also add tests for setError, and fix rendering of StreamBlock non-field errors (selector to clear old errors was incorrect, and jest apparently doesn't support innerText).
* Add a bit of bottom padding to "Are you sure?" buttons
* Change delete buttons from red to blue
* Right-align delete and cancel buttons
* Insert clearfix after delete/cancel buttons
* Make "Are you sure?" on comment reply deletion correct size
* Update wording of warning after editing comment
* Tighten up height of comment warnings
Fixes #7083. Override default FieldBlock / BoundWidget behaviour so that:
* BooleanBlock.get_form_state bypasses CheckboxInput.format_value (which Django uses to determine the 'value' HTML attribute rather than the checked state)
* BoundCheckboxInput.get_state / set_state / get_value work with the 'checked' attribute rather than 'value'
* Add warning to bottom of draft comments
* Add a warning to bottom of edited comments
* Add a warning at the bottom of comments with unsaved replies
* Set role="status" on the comment notice
