- add pointer-events: none; to disabled buttons (useful when using with links)
- added warnings about using disabled as a class instead of disabled as an attribute on elements
* Added note in 4.1.md for .button-secondary not being compatible with .no/.serious
* Added comment for button-secondary class not being compatible with serious/no classes
* Fixed message button-secondary hover states
* Relates to #8790
- added hover overrides for disable button so that hover makes no visual change
- make the delete button background white instead of transparent
- adopt new designs for no/serious
* follow up to #9104
* relates to #8790
* fix up styleguide example buttons for yes/no variants, add more disabled variants
* add type="button" to styleguide example buttons
* revert box-sizing change and use line-height with calc for borders instead
* revise border overrides to set border-color only
* fix modal button override
- original backgrounds removed in client/scss/vendor/jquery-ui-1.10.3.verdant.css 4eb35dbc0a via #8419
- also ensure the dropdown items show correctly in high contrast mode
- fixes #9128
- ensure it works for colour contrast, windows high contrast mode and non-colour only visible change
- only show the change if page is locked by the current owner
- added assert check for the locked-indicator-owner in test
- adopt new icons for privacy indicator also
- ensure the icons show correctly for high contrast mode
- relates to #9104
- Removed: .button-neutral, .button-strokeonhover and .hover-no.
- Replaced hardcoded font size, font weight values with theme variables.
- Removed overridden duplicate styles for .yes, .no and .bicolor.
- Merged a few styles under one class.
- Removed non-link button which was using span tag from styleguide, remove other unhelpful examples
- formatting fix for the header on small devices
- ensure the padding left is not set so that the outside is fully clickable
- fixed close button colours
- fix alignment and heights of smaller breakpoint modal header
- fixes #9053
- fixes #9014
- as of 3.0 - report filters would overflow the viewport in Wagtail
- fix layout issue with form submission lists introduced with filtering changes
- remove invalid css grid-column-start (unused)
- adopt theme variables for all main spacing instead of hard-coded em/rem/px values
- fixes #8929
- add id=main to all login flow form templates for non-JS skip link usage
- remove inline script to focus on username field in login form
- adopt a consistent DOM layout for all log in & password reset flow forms
- ensure h1 is at the top of the DOM in all forms
- add wagtail logo to sign in form and document the ability to override it
- fixes #2309
* added a forced-color media query to allow distinct visibiity of disabled buttons
* Also set disabled button border color to GrayText in forced-colors mode
The `button` element was not correctly picking up the same border color as the text, for some reason. This commit fixes that.
* Update colours and icons for summary panels
* add h1 id for aria referencing
* rework layout to use flex box & not floats
* move summary styles to own component scss file
* now functions correctly in RTL mode
- Ensure help blocks show more appropriately in Windows High Contrast Mode with less reliance on communication via colour alone
- fixes #8817
- added dashed-dotted borders styles and removed forced-colors-adjust:none properties to/from help boxes
- using padding meant the icon would visually spin 'wobbly'
- button content is no longer centre aligned so button longrunning active state should not be either
- fixes #8615
The general-purpose listing include put it in the `thead` to handle the explorer page design (where the parent page appears above the header row) - it isn't really meaningful for the chooser view to do that.
Fixes #8190
Django 4 changed the rendering of radio button / checkbox lists to nested divs rather than ul/li - see 5942ab5eb1. This change simply applies the existing li styles to second-level divs.
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>
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.
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
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
* [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 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
- 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.
- 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
* 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
