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
