2023-11-29 20:29:25 +03:00
|
|
|
/** @file Configuration for Tailwind. */
|
2024-10-21 18:31:29 +03:00
|
|
|
import { fileURLToPath } from 'node:url'
|
2024-05-10 15:28:49 +03:00
|
|
|
import animate from 'tailwindcss-animate'
|
2024-03-23 21:44:56 +03:00
|
|
|
import reactAriaComponents from 'tailwindcss-react-aria-components'
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
import plugin from 'tailwindcss/plugin.js'
|
2023-11-29 20:29:25 +03:00
|
|
|
|
2024-10-21 18:31:29 +03:00
|
|
|
const HERE_PATH = fileURLToPath(new URL('.', import.meta.url))
|
|
|
|
|
|
2023-11-29 20:29:25 +03:00
|
|
|
export default /** @satisfies {import('tailwindcss').Config} */ ({
|
2024-10-21 18:31:29 +03:00
|
|
|
content: [`${HERE_PATH}/src/**/*.tsx`, `${HERE_PATH}/src/**/*.ts`],
|
2023-11-29 20:29:25 +03:00
|
|
|
theme: {
|
|
|
|
|
extend: {
|
2024-05-09 15:04:35 +03:00
|
|
|
cursor: {
|
|
|
|
|
unset: 'unset',
|
|
|
|
|
},
|
2023-11-29 20:29:25 +03:00
|
|
|
colors: {
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
// While these COULD ideally be defined as CSS variables, then their opacity cannot be
|
|
|
|
|
// modified.
|
2023-11-29 20:29:25 +03:00
|
|
|
/** The default color of all text. */
|
|
|
|
|
// This should be named "regular".
|
2024-09-06 16:17:57 +03:00
|
|
|
primary: 'rgb(var(--color-primary-rgb) / var(--color-primary-opacity))',
|
|
|
|
|
invert: 'rgb(var(--color-invert-rgb) / var(--color-invert-opacity))',
|
2024-11-01 16:03:21 +03:00
|
|
|
background: 'rgb(var(--color-background-rgb) / var(--color-background-opacity))',
|
|
|
|
|
dashboard:
|
|
|
|
|
'rgb(var(--color-dashboard-background-rgb) / var(--color-dashboard-background-opacity))',
|
2024-09-06 16:17:57 +03:00
|
|
|
accent: 'rgb(var(--color-accent-rgb) / 100%)',
|
|
|
|
|
danger: 'rgb(var(--color-danger-rgb) / 100%)',
|
2024-06-13 19:57:50 +03:00
|
|
|
'accent-dark': '#3e9152',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'hover-bg': 'rgb(0 0 0 / 10%)',
|
2024-06-12 13:20:07 +03:00
|
|
|
frame: 'rgb(255 255 255 / 40%)',
|
|
|
|
|
'selected-frame': 'rgb(255 255 255 / 70%)',
|
2023-11-29 20:29:25 +03:00
|
|
|
'ide-bg': '#ebeef1',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
selected: 'rgb(255 255 255 / 40%)',
|
2024-06-26 17:14:09 +03:00
|
|
|
'not-selected': 'rgb(0 0 0 / 30%)',
|
2023-11-29 20:29:25 +03:00
|
|
|
// Should be `#3e515f14`, but `bg-opacity` does not work with RGBA.
|
|
|
|
|
label: '#f0f1f3',
|
|
|
|
|
help: '#3f68ce',
|
|
|
|
|
invite: '#0e81d4',
|
|
|
|
|
share: '#64b526',
|
|
|
|
|
inversed: '#ffffff',
|
|
|
|
|
green: '#3e8b29',
|
2024-06-12 13:20:07 +03:00
|
|
|
delete: 'rgb(243 24 10 / 87%)',
|
2023-11-29 20:29:25 +03:00
|
|
|
v3: '#252423',
|
|
|
|
|
youtube: '#c62421',
|
|
|
|
|
discord: '#404796',
|
2024-06-12 13:20:07 +03:00
|
|
|
'selection-brush': 'lch(70% 0 0 / 50%)',
|
|
|
|
|
dim: 'rgb(0 0 0 / 25%)',
|
|
|
|
|
'dim-darker': 'rgb(0 0 0 / 40%)',
|
|
|
|
|
'tag-text': 'rgb(255 255 255 / 90%)',
|
|
|
|
|
'tag-text-2': 'rgb(0 0 0 / 60%)',
|
|
|
|
|
'permission-owner': 'rgb(236 2 2 / 70%)',
|
|
|
|
|
'permission-admin': 'rgb(252 60 0 / 70%)',
|
|
|
|
|
'permission-edit': 'rgb(255 138 0 / 90%)',
|
|
|
|
|
'permission-read': 'rgb(152 174 18 / 80%)',
|
|
|
|
|
'permission-docs': 'rgb(91 8 226 / 64%)',
|
|
|
|
|
'permission-exec': 'rgb(236 2 2 / 70%)',
|
|
|
|
|
'permission-view': 'rgb(0 0 0 / 10%)',
|
2023-11-29 20:29:25 +03:00
|
|
|
'label-running-project': '#257fd2',
|
|
|
|
|
'label-low-resources': '#ff6b18',
|
2024-06-12 13:20:07 +03:00
|
|
|
'call-to-action': 'rgb(250 108 8)',
|
|
|
|
|
'black-a5': 'rgb(0 0 0 / 5%)',
|
|
|
|
|
'black-a10': 'rgb(0 0 0 / 10%)',
|
|
|
|
|
'black-a16': 'rgb(0 0 0 / 16%)',
|
|
|
|
|
'black-a30': 'rgb(0 0 0 / 30%)',
|
|
|
|
|
'black-a50': 'rgb(0 0 0 / 50%)',
|
2023-11-29 20:29:25 +03:00
|
|
|
'gray-350': '#b7bcc5',
|
|
|
|
|
},
|
2024-06-19 18:24:11 +03:00
|
|
|
fontFamily: {
|
|
|
|
|
naming: ['"Enso Naming"', '"Enso"', '"M PLUS 1"'],
|
|
|
|
|
},
|
2023-11-29 20:29:25 +03:00
|
|
|
fontSize: {
|
2024-09-06 17:29:26 +03:00
|
|
|
'2xs': '10.5px',
|
2024-08-29 08:54:21 +03:00
|
|
|
xs: '11.5px',
|
|
|
|
|
sm: '13px',
|
|
|
|
|
xl: '19px',
|
|
|
|
|
'3xl': '32px',
|
|
|
|
|
'4xl': '38px',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'auth-heading': 'var(--auth-heading-font-size)',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
borderRadius: {
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
inherit: 'inherit',
|
2024-01-25 18:10:51 +03:00
|
|
|
'2.5xl': '1.25rem',
|
2023-11-29 20:29:25 +03:00
|
|
|
'4xl': '2rem',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
default: 'var(--default-corner-radius)',
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
'button-focus-ring': 'var(--button-focus-ring-corner-radius)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
auth: 'var(--auth-corner-radius)',
|
|
|
|
|
input: 'var(--input-corner-radius)',
|
|
|
|
|
'permission-type-selector': 'var(--permission-type-selector-corner-radius)',
|
|
|
|
|
'menu-entry': 'var(--menu-entry-corner-radius)',
|
|
|
|
|
'selection-brush': 'var(--selection-brush-corner-radius)',
|
|
|
|
|
'chat-input': 'var(--chat-input-corner-radius)',
|
2024-03-19 09:17:28 +03:00
|
|
|
'small-rectangle-button': 'var(--small-rectangle-button-corner-radius)',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
spacing: {
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
DEFAULT: '0',
|
|
|
|
|
'project-icon': 'var(--project-icon-size)',
|
|
|
|
|
'profile-picture-large': 'var(--profile-picture-large-size)',
|
|
|
|
|
'radio-button': 'var(--radio-button-size)',
|
|
|
|
|
'radio-button-dot': 'var(--radio-button-dot-size)',
|
|
|
|
|
'extended-editor-menu': 'var(--extended-editor-menu-size)',
|
|
|
|
|
'plus-icon': 'var(--plus-icon-size)',
|
|
|
|
|
'chat-profile-picture': 'var(--chat-profile-picture-size)',
|
|
|
|
|
'selection-brush-border': 'var(--selection-brush-border-width)',
|
|
|
|
|
'row-h': 'var(--row-height)',
|
2024-03-19 09:17:28 +03:00
|
|
|
'text-h': 'var(--text-height)',
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
'asset-panel-w': 'var(--asset-panel-width)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'indent-1': 'var(--indent-1-size)',
|
|
|
|
|
'indent-2': 'var(--indent-2-size)',
|
|
|
|
|
'indent-3': 'var(--indent-3-size)',
|
|
|
|
|
'indent-4': 'var(--indent-4-size)',
|
|
|
|
|
'indent-5': 'var(--indent-5-size)',
|
|
|
|
|
'indent-6': 'var(--indent-6-size)',
|
|
|
|
|
'indent-7': 'var(--indent-7-size)',
|
|
|
|
|
'indent-8': 'var(--indent-8-size)',
|
|
|
|
|
'indent-9': 'var(--indent-9-size)',
|
|
|
|
|
'indent-10': 'var(--indent-10-size)',
|
2024-02-13 15:17:45 +03:00
|
|
|
},
|
2024-02-12 17:07:58 +03:00
|
|
|
width: {
|
|
|
|
|
container: '100cqw',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'profile-picture-caption': 'var(--profile-picture-caption-width)',
|
|
|
|
|
'settings-main-section': 'var(--settings-main-section-width)',
|
|
|
|
|
'user-account-settings-label': 'var(--user-account-settings-label-width)',
|
|
|
|
|
'change-password-settings-label': 'var(--change-password-settings-label-width)',
|
|
|
|
|
'organization-settings-label': 'var(--organization-settings-label-width)',
|
|
|
|
|
'backend-switcher-option': 'var(--backend-switcher-option-width)',
|
|
|
|
|
'side-panel': 'var(--side-panel-width)',
|
|
|
|
|
'context-menu': 'var(--context-menu-width)',
|
|
|
|
|
'context-menu-macos': 'var(--context-menu-macos-width)',
|
|
|
|
|
'json-schema-text-input': 'var(--json-schema-text-input-width)',
|
|
|
|
|
'json-schema-object-key': 'var(--json-schema-object-key-width)',
|
|
|
|
|
'json-schema-dropdown-title': 'var(--json-schema-dropdown-title-width)',
|
|
|
|
|
'asset-search-bar': 'var(--asset-search-bar-width)',
|
|
|
|
|
'asset-search-bar-wide': 'var(--asset-search-bar-wide-width)',
|
|
|
|
|
chat: 'var(--chat-width)',
|
|
|
|
|
'chat-indicator': 'var(--chat-indicator-width)',
|
|
|
|
|
'modal-label': 'var(--modal-label-width)',
|
|
|
|
|
'settings-sidebar': 'var(--settings-sidebar-width)',
|
|
|
|
|
'asset-panel': 'var(--asset-panel-width)',
|
|
|
|
|
'permission-type-selector': 'var(--permission-type-selector-width)',
|
|
|
|
|
'drive-sidebar': 'var(--drive-sidebar-width)',
|
|
|
|
|
'permission-type': 'var(--permission-type-width)',
|
|
|
|
|
'auth-icon-container': 'var(--auth-icon-container-width)',
|
|
|
|
|
'side-panel-label': 'var(--side-panel-label-width)',
|
2024-03-19 09:17:28 +03:00
|
|
|
'date-picker': 'var(--date-picker-width)',
|
|
|
|
|
'date-cell': 'var(--date-cell-width)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
|
|
|
|
|
'manage-labels-modal': 'var(--manage-labels-modal-width)',
|
|
|
|
|
'confirm-delete-modal': 'var(--confirm-delete-modal-width)',
|
|
|
|
|
'confirm-delete-user-modal': 'var(--confirm-delete-user-modal-width)',
|
|
|
|
|
'duplicate-assets-modal': 'var(--duplicate-assets-modal-width)',
|
|
|
|
|
'capture-keyboard-shortcut-modal': 'var(--capture-keyboard-shortcut-modal-width)',
|
|
|
|
|
'new-label-modal': 'var(--new-label-modal-width)',
|
|
|
|
|
'invite-users-modal': 'var(--invite-users-modal-width)',
|
|
|
|
|
'manage-permissions-modal': 'var(--manage-permissions-modal-width)',
|
|
|
|
|
'upsert-data-link-modal': 'var(--upsert-data-link-modal-width)',
|
2024-05-06 10:42:39 +03:00
|
|
|
'upsert-data-link-modal-max': 'var(--upsert-data-link-modal-max-width)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'upsert-secret-modal': 'var(--upsert-secret-modal-width)',
|
|
|
|
|
|
|
|
|
|
'members-name-column': 'var(--members-name-column-width)',
|
|
|
|
|
'members-email-column': 'var(--members-email-column-width)',
|
|
|
|
|
'keyboard-shortcuts-icon-column': 'var(--keyboard-shortcuts-icon-column-width)',
|
|
|
|
|
'keyboard-shortcuts-name-column': 'var(--keyboard-shortcuts-name-column-width)',
|
2024-06-27 10:24:07 +03:00
|
|
|
'keyboard-shortcuts-description-column':
|
|
|
|
|
'var(--keyboard-shortcuts-description-column-width)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'drive-name-column': 'var(--drive-name-column-width)',
|
|
|
|
|
'drive-modified-column': 'var(--drive-modified-column-width)',
|
|
|
|
|
'drive-shared-with-column': 'var(--drive-shared-with-column-width)',
|
|
|
|
|
'drive-labels-column': 'var(--drive-labels-column-width)',
|
|
|
|
|
'drive-accessed-by-projects-column': 'var(--drive-accessed-by-projects-column-width)',
|
|
|
|
|
'drive-accessed-data-column': 'var(--drive-accessed-data-column-width)',
|
|
|
|
|
'drive-docs-column': 'var(--drive-docs-column-width)',
|
2024-02-12 17:07:58 +03:00
|
|
|
},
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
minWidth: ({ theme }) => ({ .../** @type {{}}*/ (theme('width')) }),
|
|
|
|
|
maxWidth: ({ theme }) => ({ .../** @type {{}}*/ (theme('width')) }),
|
|
|
|
|
height: {
|
|
|
|
|
row: 'var(--row-height)',
|
2024-06-19 18:24:11 +03:00
|
|
|
'table-row': 'var(--table-row-height)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
text: 'var(--text-height)',
|
|
|
|
|
heading: 'var(--heading-height)',
|
|
|
|
|
'news-item': 'var(--news-item-height)',
|
|
|
|
|
sample: 'var(--sample-height)',
|
|
|
|
|
'sample-image': 'var(--sample-image-height)',
|
|
|
|
|
'sample-info': 'var(--sample-info-height)',
|
|
|
|
|
'side-panel-heading': 'var(--side-panel-heading-height)',
|
|
|
|
|
'chat-thread-list': 'var(--chat-thread-list-height)',
|
|
|
|
|
'payment-form': 'var(--payment-form-height)',
|
|
|
|
|
'paragraph-input': 'var(--paragraph-input-height)',
|
|
|
|
|
'dropdown-items': 'var(--dropdown-items-height)',
|
|
|
|
|
'manage-permissions-modal-permissions-list':
|
|
|
|
|
'var(--manage-permissions-modal-permissions-list-height)',
|
|
|
|
|
'manage-labels-list': 'var(--manage-labels-list-height)',
|
|
|
|
|
'search-suggestions-list': 'var(--search-suggestions-list-height)',
|
2024-01-11 00:17:14 +03:00
|
|
|
},
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
minHeight: ({ theme }) => ({ .../** @type {{}}*/ (theme('height')) }),
|
|
|
|
|
maxHeight: ({ theme }) => ({ .../** @type {{}}*/ (theme('height')) }),
|
2023-11-29 20:29:25 +03:00
|
|
|
opacity: {
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
full: '100%',
|
|
|
|
|
unimportant: 'var(--unimportant-opacity)',
|
|
|
|
|
},
|
|
|
|
|
gap: {
|
|
|
|
|
modal: 'var(--modal-gap)',
|
|
|
|
|
subheading: 'var(--subheading-gap)',
|
|
|
|
|
icons: 'var(--icons-gap)',
|
|
|
|
|
colors: 'var(--colors-gap)',
|
|
|
|
|
'samples-icon-with-text': 'var(--samples-icon-with-text-gap)',
|
|
|
|
|
'icon-with-text': 'var(--icon-with-text-gap)',
|
|
|
|
|
'input-with-button': 'var(--input-with-button-gap)',
|
|
|
|
|
'user-bar': 'var(--user-bar-gap)',
|
|
|
|
|
'top-bar': 'var(--top-bar-gap)',
|
|
|
|
|
'top-bar-right': 'var(--top-bar-right-gap)',
|
|
|
|
|
auth: 'var(--auth-gap)',
|
|
|
|
|
'auth-link': 'var(--auth-link-gap)',
|
|
|
|
|
'drive-sidebar': 'var(--drive-sidebar-gap)',
|
|
|
|
|
home: 'var(--home-gap)',
|
|
|
|
|
drive: 'var(--drive-gap)',
|
|
|
|
|
'status-page': 'var(--status-page-gap)',
|
|
|
|
|
'menu-entry': 'var(--menu-entry-gap)',
|
|
|
|
|
'news-items': 'var(--news-items-gap)',
|
|
|
|
|
sample: 'var(--sample-gap)',
|
|
|
|
|
samples: 'var(--samples-gap)',
|
|
|
|
|
settings: 'var(--settings-gap)',
|
|
|
|
|
'settings-header': 'var(--settings-header-gap)',
|
|
|
|
|
'settings-section': 'var(--settings-section-gap)',
|
|
|
|
|
'settings-subsection': 'var(--settings-subsection-gap)',
|
|
|
|
|
'settings-section-header': 'var(--settings-section-header-gap)',
|
|
|
|
|
'settings-entry': 'var(--settings-entry-gap)',
|
|
|
|
|
'settings-sidebar': 'var(--settings-sidebar-gap)',
|
|
|
|
|
'new-empty-project': 'var(--new-empty-project-gap)',
|
|
|
|
|
modifiers: 'var(--modifiers-gap)',
|
|
|
|
|
'modifiers-macos': 'var(--modifiers-macos-gap)',
|
|
|
|
|
'side-panel': 'var(--side-panel-gap)',
|
|
|
|
|
'side-panel-section': 'var(--side-panel-section-gap)',
|
|
|
|
|
'asset-search-bar': 'var(--asset-search-bar-gap)',
|
|
|
|
|
'drive-bar': 'var(--drive-bar-gap)',
|
|
|
|
|
'column-items': 'var(--column-items-gap)',
|
|
|
|
|
labels: 'var(--labels-gap)',
|
|
|
|
|
'label-icons': 'var(--label-icons-gap)',
|
|
|
|
|
'user-menu': 'var(--user-menu-gap)',
|
|
|
|
|
'user-permission': 'var(--user-permission-gap)',
|
|
|
|
|
'name-column-icon': 'var(--name-column-icon-gap)',
|
|
|
|
|
'permission-type-button': 'var(--permission-type-button-gap)',
|
|
|
|
|
'modal-tabs': 'var(--modal-tabs-gap)',
|
|
|
|
|
'dropdown-arrow': 'var(--dropdown-arrow-gap)',
|
|
|
|
|
'context-menus': 'var(--context-menus-gap)',
|
|
|
|
|
'asset-panel': 'var(--asset-panel-gap)',
|
|
|
|
|
'search-suggestions': 'var(--search-suggestions-gap)',
|
|
|
|
|
'keyboard-shortcuts-button': 'var(--keyboard-shortcuts-button-gap)',
|
|
|
|
|
'chat-buttons': 'var(--chat-buttons-gap)',
|
|
|
|
|
},
|
|
|
|
|
padding: {
|
2024-06-19 18:24:11 +03:00
|
|
|
'top-bar': 'var(--top-bar-padding)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
modal: 'var(--modal-padding)',
|
|
|
|
|
'modal-wide': 'var(--modal-wide-padding)',
|
|
|
|
|
auth: 'var(--auth-padding)',
|
|
|
|
|
'page-x': 'var(--page-padding-x)',
|
|
|
|
|
'heading-x': 'var(--heading-padding-x)',
|
|
|
|
|
'heading-y': 'var(--heading-padding-y)',
|
|
|
|
|
'auth-input-y': 'var(--auth-input-padding-y)',
|
|
|
|
|
'auth-input-r': 'var(--auth-input-padding-right)',
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
'auth-link-x': 'var(--auth-link-padding-x)',
|
|
|
|
|
'auth-link-y': 'var(--auth-link-padding-y)',
|
|
|
|
|
'text-link-x': 'var(--text-link-padding-x)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'drive-sidebar-y': 'var(--drive-sidebar-padding-y)',
|
|
|
|
|
'radio-button-dot': 'var(--radio-button-dot-padding)',
|
|
|
|
|
'chat-y': 'chat-padding-y',
|
|
|
|
|
'cell-x': 'var(--cell-padding-x)',
|
|
|
|
|
'button-x': 'var(--button-padding-x)',
|
|
|
|
|
'icons-x': 'var(--icons-padding-x)',
|
|
|
|
|
'drive-bar-y': 'var(--drive-bar-padding-y)',
|
|
|
|
|
'selector-x': 'var(--selector-padding-x)',
|
|
|
|
|
'selector-y': 'var(--selector-padding-y)',
|
|
|
|
|
'menu-entry': 'var(--menu-entry-padding)',
|
|
|
|
|
'context-menu-entry-x': 'var(--context-menu-entry-padding-x)',
|
|
|
|
|
'profile-picture-caption-y': 'var(--profile-picture-caption-padding-y)',
|
|
|
|
|
'delete-user-account-button-x': 'var(--delete-user-account-button-padding-x)',
|
|
|
|
|
'context-menu': 'var(--context-menu-padding)',
|
|
|
|
|
'input-x': 'var(--input-padding-x)',
|
|
|
|
|
'multiline-input': 'var(--multiline-input-padding)',
|
|
|
|
|
'json-schema-object-input': 'var(--json-schema-object-input-padding)',
|
|
|
|
|
'name-column-x': 'var(--name-column-padding-x)',
|
|
|
|
|
'name-column-y': 'var(--name-column-padding-y)',
|
|
|
|
|
'home-page-b': 'var(--home-page-padding-b)',
|
|
|
|
|
version: 'var(--version-padding)',
|
|
|
|
|
'label-x': 'var(--label-padding-x)',
|
|
|
|
|
'sidebar-section-heading-x': 'var(--sidebar-section-heading-padding-x)',
|
|
|
|
|
'sidebar-section-heading-y': 'var(--sidebar-section-heading-padding-y)',
|
|
|
|
|
'permission-type-selector': 'var(--permission-type-selector-padding)',
|
|
|
|
|
'permission-type-button': 'var(--permission-type-button-padding)',
|
|
|
|
|
'permission-type-y': 'var(--permission-type-padding-y)',
|
|
|
|
|
'modal-tab-bar-x': 'var(--modal-tab-bar-padding-x)',
|
|
|
|
|
'manage-permissions-modal-input': 'var(--manage-permissions-modal-input-padding)',
|
|
|
|
|
'modal-invite-button-text-y': 'var(--modal-invite-button-text-padding-y)',
|
|
|
|
|
'home-section-x': 'var(--home-section-padding-x)',
|
|
|
|
|
'sample-description-x': 'var(--sample-description-padding-x)',
|
|
|
|
|
'sample-description-t': 'var(--sample-description-padding-top)',
|
|
|
|
|
'sample-description-b': 'var(--sample-description-padding-bottom)',
|
|
|
|
|
'news-item-description': 'var(--news-item-description-padding)',
|
|
|
|
|
'news-item-subtitle-y': 'var(--news-item-subtitle-padding-y)',
|
|
|
|
|
'font-awesome-icon-x': 'var(--font-awesome-icon-padding-x)',
|
|
|
|
|
'search-suggestions': 'var(--search-suggestions-padding)',
|
|
|
|
|
'search-suggestion-y': 'var(--search-suggestion-padding-y)',
|
|
|
|
|
'side-panel-heading-y': 'var(--side-panel-heading-padding-y)',
|
2024-03-19 09:17:28 +03:00
|
|
|
'icon-column-r': 'var(--icon-column-padding-right)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'asset-panel-l': 'var(--asset-panel-padding-left)',
|
|
|
|
|
'auth-icon-container-w': 'var(--auth-icon-container-width)',
|
|
|
|
|
'side-panel-description-y': 'var(--side-panel-description-padding-y)',
|
2024-03-19 09:17:28 +03:00
|
|
|
'date-input': 'var(--date-input-padding)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'chat-thread-button': 'var(--chat-thread-button-padding)',
|
|
|
|
|
'chat-form': 'var(--chat-form-padding)',
|
|
|
|
|
'chat-input': 'var(--chat-input-padding)',
|
|
|
|
|
'chat-button-x': 'var(--chat-button-padding-x)',
|
|
|
|
|
'chat-button-y': 'var(--chat-button-padding-y)',
|
|
|
|
|
'chat-reaction-bar-y': 'var(--chat-reaction-bar-padding-y)',
|
|
|
|
|
'chat-reaction': 'var(--chat-reaction-padding)',
|
2024-03-25 11:13:24 +03:00
|
|
|
'missing-functionality-text-x': 'var(--missing-functionality-text-padding-x)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
},
|
|
|
|
|
margin: {
|
|
|
|
|
'name-column-icon': 'var(--name-column-icon-margin)',
|
|
|
|
|
'button-px': 'var(--button-padding-x)',
|
|
|
|
|
'tick-cross-button': 'var(--tick-cross-button-margin)',
|
|
|
|
|
'search-suggestion': 'var(--search-suggestion-margin)',
|
|
|
|
|
'multiline-input-p': 'var(--multiline-input-padding)',
|
|
|
|
|
'close-icon': 'var(--close-icon-margin)',
|
2024-03-19 09:17:28 +03:00
|
|
|
'date-input-gap': 'var(--date-input-gap)',
|
|
|
|
|
'date-input-calendar-gap': 'var(--date-input-calendar-gap)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'chat-header-x': 'var(--chat-header-margin-x)',
|
|
|
|
|
'chat-header-t': 'var(--chat-header-margin-top)',
|
|
|
|
|
'chat-form-x': 'var(--chat-form-margin-x)',
|
|
|
|
|
'chat-form-y': 'var(--chat-form-margin-y)',
|
|
|
|
|
'chat-message-x': 'var(--chat-message-margin-x)',
|
|
|
|
|
'chat-message-y': 'var(--chat-message-margin-y)',
|
|
|
|
|
'chat-profile-picture-y': 'var(--chat-profile-picture-margin-y)',
|
|
|
|
|
'chat-message-info-x': 'var(--chat-message-info-margin-x)',
|
|
|
|
|
'chat-reaction-bar-py': 'var(--chat-reaction-bar-padding-y)',
|
|
|
|
|
'chat-reaction-bar': 'var(--chat-reaction-bar-margin)',
|
|
|
|
|
'chat-reaction': 'var(--chat-reaction-margin)',
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
'separator-y': 'var(--separator-margin-y)',
|
|
|
|
|
'sidebar-section-heading-b': 'var(--sidebar-section-heading-margin-b)',
|
|
|
|
|
'context-menu-entry-px': 'var(--context-menu-entry-padding-x)',
|
|
|
|
|
'text-link-px': 'var(--text-link-padding-x)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
},
|
|
|
|
|
lineHeight: {
|
|
|
|
|
snug: 'var(--snug-line-height)',
|
|
|
|
|
cozy: 'var(--cozy-line-height)',
|
|
|
|
|
'chat-thread-title': 'var(--chat-thread-title-line-height)',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
zIndex: {
|
|
|
|
|
1: '1',
|
Dashboard improvements (from 24 September 2024 + 30 September 2024) (#11219)
- Close https://github.com/enso-org/cloud-v2/issues/1508
- :warning: Labels modal - add selection indicator where user can (de)select multiple labels
- Checkboxes currently still cause the dialog to (incorrectly) close
- Edit datalink -> select enso secret -> options are too narrow for enso path. Strip enso://Users(Teams), if possible make the options list longer on the left side
- Added (or rather, re-enabled via CSS) horizontal scroll instead
- Make Versions, Sessions, Settings as tabs similar to documentation panel in graph editor
- Edit description in context menu should open asset panel with description input active
- Edit secret should be moved to asset panel (same like datalink)
- Dim background when "edit description", "edit secret", or "edit datalink" are clicked/triggered via shortcut to highlight input
- Hide unused (= no backend support) columns and icons: accessed by projects and accessed data
- *Partial* frontend fixes for https://github.com/enso-org/cloud-v2/issues/1529
- (1) Fix settings title being horizontally centered and split on multiple lines
- (2) :x: backend issue
- (3) :x: out of scope
- (4) :x: backend issue
- (5) :x: out of scope
- (6) :x: out of scope
- (7) :x: backend issue
- (8) :x: already fixed in #11126
- (9) :x: out of scope (potentially requires a way to trigger a tooltip on a disabled button)
- (10) :x: out of scope
- (11) :x: out of scope
- (12) :x: out of scope
- (13) URL encode `enso://` URLs in "copy as path"
- (14) Double click on datalink make asset open and close (not sure if this has already been fixed)
- (15) Clicking anywhere on Asset Panel no longer deselects assets (not sure if this has already been fixed)
- (16) :x: addressed in #11268
- (17) Make list of labels in Asset Panel (right sidebar) horizontal instead of (incorrectly) vertical
- (18) Only show "Billing" settings tab for organization admins
- Use "workspace" instead of "network" icon for project tabs
- Other fixes:
- Fix Asset Panel (right sidebar) not being able to be toggled off if it is temporarily open (when triggered from editing description, or editing secret, or editing datalink)
- Make "cancel" and "reset" buttons default to outline variant, instead of ghost variant
- Fix style of dropdown
- Change Datalink editor dialog so that object keys are above inputs, not beside them. This gives inputs much more horizontal space for children of deeply nested objects.
Issues left to fix:
- Checkboxes currently still cause the dialog to (incorrectly) close
- "Edit description" actions etc. do not properly focus inputs
Issues left to do (out of scope):
- Show username of user currently using a project (possibly as tooltip?) if the project is currently disabled.
- Dropdown and autocomplete entries should be in their own dialog, so that they can escape the parent dialog if they are too long
# Important Notes
None
2024-10-09 12:10:49 +03:00
|
|
|
spotlight: '2',
|
|
|
|
|
tooltip: '3',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
backdropBlur: {
|
|
|
|
|
xs: '2px',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
default: 'var(--default-backdrop-blur)',
|
|
|
|
|
},
|
|
|
|
|
borderWidth: {
|
2024-06-12 13:20:07 +03:00
|
|
|
0.5: '0.5px',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'selection-brush': 'var(--selection-brush-border-width)',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
boxShadow: {
|
|
|
|
|
soft: `0 0.5px 2.2px 0px #00000008, 0 1.2px 5.3px 0px #0000000b, \
|
|
|
|
|
0 2.3px 10px 0 #0000000e, 0 4px 18px 0 #00000011, 0 7.5px 33.4px 0 #00000014, \
|
|
|
|
|
0 18px 80px 0 #0000001c`,
|
2024-06-28 15:54:57 +03:00
|
|
|
softer: `0 0.5px 2.2px 0px rgb(0 0 0 / 0.84%), 0 1.2px 5.65px 0px rgb(0 0 0 / 1.21%), \
|
|
|
|
|
0 2.25px 10.64px 0 rgb(0 0 0 / 1.5%), 0 4px 19px 0 rgb(0 0 0 / 1.79%), 0 7.5px 35.5px 0 rgb(0 0 0 / 2.16%), \
|
|
|
|
|
0 18px 85px 0 rgb(0 0 0 / 3%)`,
|
2024-05-09 15:04:35 +03:00
|
|
|
'inset-t-lg': `inset 0 1px 1.4px -1.4px #00000002, \
|
|
|
|
|
inset 0 2.4px 3.4px -3.4px #00000003, inset 0 4.5px 6.4px -6.4px #00000004, \
|
|
|
|
|
inset 0 8px 11.4px -11.4px #00000005, inset 0 15px 21.3px -21.3px #00000006, \
|
|
|
|
|
inset 0 36px 51px -51px #00000014`,
|
|
|
|
|
'inset-b-lg': `inset 0 -1px 1.4px -1.4px #00000002, \
|
|
|
|
|
inset 0 -2.4px 3.4px -3.4px #00000003, inset 0 -4.5px 6.4px -6.4px #00000004, \
|
|
|
|
|
inset 0 -8px 11.4px -11.4px #00000005, inset 0 -15px 21.3px -21.3px #00000006, \
|
|
|
|
|
inset 0 -36px 51px -51px #00000014`,
|
|
|
|
|
'inset-v-lg': `inset 0 1px 1.4px -1.4px #00000002, \
|
|
|
|
|
inset 0 2.4px 3.4px -3.4px #00000003, inset 0 4.5px 6.4px -6.4px #00000004, \
|
|
|
|
|
inset 0 8px 11.4px -11.4px #00000005, inset 0 15px 21.3px -21.3px #00000006, \
|
|
|
|
|
inset 0 36px 51px -51px #00000014, inset 0 -1px 1.4px -1.4px #00000002, \
|
|
|
|
|
inset 0 -2.4px 3.4px -3.4px #00000003, inset 0 -4.5px 6.4px -6.4px #00000004, \
|
|
|
|
|
inset 0 -8px 11.4px -11.4px #00000005, inset 0 -15px 21.3px -21.3px #00000006, \
|
|
|
|
|
inset 0 -36px 51px -51px #00000014`,
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
animation: {
|
2024-09-13 16:00:31 +03:00
|
|
|
'caret-blink': 'caret-blink 1.5s ease-out infinite',
|
2023-11-29 20:29:25 +03:00
|
|
|
'spin-ease': 'spin cubic-bezier(0.67, 0.33, 0.33, 0.67) 1.5s infinite',
|
2024-05-22 21:26:02 +03:00
|
|
|
'appear-delayed': 'appear-delayed 0.5s ease-in-out',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
transitionProperty: {
|
|
|
|
|
width: 'width',
|
2023-11-30 15:40:01 +03:00
|
|
|
'min-width': 'min-width',
|
2023-11-29 20:29:25 +03:00
|
|
|
'stroke-dasharray': 'stroke-dasharray',
|
|
|
|
|
'grid-template-rows': 'grid-template-rows',
|
2024-02-26 19:49:49 +03:00
|
|
|
'border-margin': 'border, margin',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
transitionDuration: {
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
DEFAULT: '100ms',
|
|
|
|
|
auth: 'var(--auth-transition-duration)',
|
|
|
|
|
'side-panel': 'var(--side-panel-transition-duration)',
|
|
|
|
|
arrow: 'var(--arrow-transition-duration)',
|
|
|
|
|
'user-menu': 'var(--user-menu-transition-duration)',
|
|
|
|
|
'spinner-fast': 'var(--spinner-fast-transition-duration)',
|
|
|
|
|
'spinner-medium': 'var(--spinner-medium-transition-duration)',
|
|
|
|
|
'spinner-slow': 'var(--spinner-slow-transition-duration)',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
|
|
|
|
gridTemplateRows: {
|
|
|
|
|
'0fr': '0fr',
|
|
|
|
|
'1fr': '1fr',
|
|
|
|
|
},
|
|
|
|
|
gridTemplateColumns: {
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'0fr': '0fr',
|
|
|
|
|
'1fr': '1fr',
|
|
|
|
|
'fill-news-items': 'repeat(auto-fill, minmax(var(--news-items-column-width), 1fr))',
|
|
|
|
|
'fill-samples': 'repeat(auto-fill, minmax(var(--samples-column-width), 1fr))',
|
|
|
|
|
},
|
|
|
|
|
dashArray: {
|
|
|
|
|
5: '5-12',
|
|
|
|
|
75: '75-12',
|
|
|
|
|
100: '100-12',
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
2024-05-22 21:26:02 +03:00
|
|
|
keyframes: {
|
|
|
|
|
'appear-delayed': {
|
|
|
|
|
'0%': { opacity: '0' },
|
|
|
|
|
'99%': { opacity: '0' },
|
|
|
|
|
'100%': { opacity: '1' },
|
|
|
|
|
},
|
2024-09-13 16:00:31 +03:00
|
|
|
'caret-blink': {
|
|
|
|
|
'0%,70%,100%': { opacity: '1' },
|
|
|
|
|
'20%,50%': { opacity: '0' },
|
|
|
|
|
},
|
2024-05-22 21:26:02 +03:00
|
|
|
},
|
2023-11-29 20:29:25 +03:00
|
|
|
},
|
2024-01-23 00:26:15 +03:00
|
|
|
},
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
plugins: [
|
2024-03-23 21:44:56 +03:00
|
|
|
reactAriaComponents,
|
2024-05-10 15:28:49 +03:00
|
|
|
animate,
|
2024-05-09 15:04:35 +03:00
|
|
|
plugin(({ addVariant, addUtilities, matchUtilities, addComponents, theme }) => {
|
|
|
|
|
addVariant('group-hover-2', ['.group:where([data-hovered]) &', '.group:where(:hover) &'])
|
|
|
|
|
|
2024-09-13 16:00:31 +03:00
|
|
|
addUtilities({
|
|
|
|
|
'.scrollbar-gutter-stable': {
|
|
|
|
|
scrollbarGutter: 'stable',
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
addUtilities(
|
|
|
|
|
{
|
|
|
|
|
'.container-size': {
|
|
|
|
|
containerType: 'size',
|
|
|
|
|
},
|
|
|
|
|
'.pointer-events-none-recursive': {
|
|
|
|
|
pointerEvents: 'none',
|
|
|
|
|
'*': { pointerEvents: 'none' },
|
|
|
|
|
},
|
2024-06-19 18:24:11 +03:00
|
|
|
'.clip-path-0': {
|
|
|
|
|
clipPath: 'inset(0)',
|
|
|
|
|
},
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'.clip-path-top': {
|
|
|
|
|
clipPath: 'polygon(0 0, 100% 0, 100% calc(50% - 1px), 0 calc(50% - 1px))',
|
|
|
|
|
},
|
|
|
|
|
'.clip-path-bottom': {
|
|
|
|
|
clipPath: `polygon(0 calc(50% + 1px), 100% calc(50% + 1px), 100% 100%, 0 100%)`,
|
|
|
|
|
},
|
|
|
|
|
'.clip-path-bottom-shadow': {
|
|
|
|
|
clipPath: `polygon(0 0, 100% 0, 100% calc(100% + 100vh), 0 calc(100% + 100vh))`,
|
|
|
|
|
},
|
2024-06-28 15:54:57 +03:00
|
|
|
'.clip-path-left-shadow': {
|
|
|
|
|
clipPath: `polygon(-100vw 0, 100% 0, 100% 100%, -100vw 100%)`,
|
|
|
|
|
},
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'.scroll-hidden': {
|
|
|
|
|
MsOverflowStyle: 'none' /* Internet Explorer 10+ */,
|
|
|
|
|
scrollbarWidth: 'none' /* Firefox */,
|
|
|
|
|
'&::-webkit-scrollbar': {
|
|
|
|
|
display: 'none' /* Safari and Chrome */,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
// === States ===
|
|
|
|
|
|
Fix various issues on the Dashboard (#10256)
- Fix React DevTools not working in Firefox
- Fix selection of asset names when editing them, not working at all in Firefox
- Convert tick/cross buttons when editing assets, and the "plus" and "reload" buttons on the "shared with" column, "labels" column, and keyboard shortcuts table, to match more with the rest of the design
- Update clip path when the container resizes, so that the icons for hidden columns never overlap the actual table header
- Fix #10184
- Fix renames being committed even when cancelling
- Fix duplicate name detection - previously, all asset types only checked folders with the same name, not assets with the same name
- I'm not 100% sure this is the correct behavior still
- Stop using `kbd` (`aria.Keyboard`) to display keyboard shortcuts, since they should not be displayed in a monospace font.
- Fix "plus" and "reload" buttons going past the right side of their parent table cell
- Limit length of `PermissionDisplay` - if the username of a user with permission is too long, it uses a tooltip instead
- Update the username dynamically for all permissions owned by self, when changing username in the settings.
- This avoids having to fully invalidate the directory tree every time the username changes, given that nothing changes about the assets' metadata themselves.
- Cache children in the Drive tree
- This avoids loading spinners when closing a folder and immediately reopening it.
- Note that children are still re-fetched on reopen to ensure freshness
# Important Notes
- This MAY be split into multiple smaller PRs. However, I think it's better to QA as a single PR, to avoid duplicating work checking behavior that may be changed by a sibling PR (assuming the PR was split into multiple).
2024-06-20 21:30:24 +03:00
|
|
|
'.focus-ring, .focus-ring:focus, .focus-ring-outset, .focus-ring-outset:focus': {
|
|
|
|
|
'@apply outline outline-2 -outline-offset-2 outline-primary transition-all': '',
|
|
|
|
|
},
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
'.focus-ring.checkbox, .focus-ring-outset, .focus-ring-outset:focus': {
|
|
|
|
|
'@apply outline-offset-0': '',
|
|
|
|
|
},
|
|
|
|
|
'.drop-target-after': {
|
|
|
|
|
'@apply relative after:pointer-events-none after:absolute after:inset after:rounded-inherit [&[data-drop-target=true]]:after:bg-primary/10':
|
|
|
|
|
'',
|
|
|
|
|
},
|
|
|
|
|
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
// === Classes affecting opacity ===
|
|
|
|
|
|
|
|
|
|
'.selectable': {
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
'@apply disabled:opacity-30 [&.disabled]:opacity-30 disabled:cursor-not-allowed [&.disabled]:cursor-not-allowed opacity-50 hover:opacity-75 transition-all':
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'',
|
|
|
|
|
},
|
|
|
|
|
'.active': {
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
'@apply opacity-100 disabled:opacity-100 [&.disabled]:opacity-100 hover:opacity-100 disabled:cursor-default [&.disabled]:cursor-default':
|
|
|
|
|
'',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
},
|
|
|
|
|
'.placeholder': {
|
|
|
|
|
'@apply opacity-75': '',
|
|
|
|
|
},
|
|
|
|
|
'.read-only': {
|
|
|
|
|
'@apply opacity-75 cursor-not-allowed': '',
|
|
|
|
|
},
|
|
|
|
|
|
2024-09-09 13:27:04 +03:00
|
|
|
'.scroll-offset-edge-s': {
|
|
|
|
|
'--scrollbar-offset-edge': '2px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-m': {
|
|
|
|
|
'--scrollbar-offset-edge': '4px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-l': {
|
|
|
|
|
'--scrollbar-offset-edge': '6px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '8px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-2xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '16px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-3xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '24px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-4xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '28px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-5xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '32px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-6xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '36px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-7xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '40px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-8xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '44px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-9xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '48px',
|
|
|
|
|
},
|
|
|
|
|
'.scroll-offset-edge-10xl': {
|
|
|
|
|
'--scrollbar-offset-edge': '52px',
|
|
|
|
|
},
|
|
|
|
|
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
// === Visbility classes ===
|
|
|
|
|
|
|
|
|
|
'.visibility-visible': {},
|
|
|
|
|
'.visibility-hidden': {
|
|
|
|
|
'@apply hidden': '',
|
|
|
|
|
},
|
|
|
|
|
'.visibility-faded': {
|
|
|
|
|
'@apply opacity-50 pointer-events-none-recursive': '',
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Rounded rows ===
|
|
|
|
|
|
|
|
|
|
'.rounded-rows': {
|
|
|
|
|
[`:where(
|
2024-05-09 15:04:35 +03:00
|
|
|
& > tbody > tr:nth-child(odd of .rounded-rows-child) > td:not(.rounded-rows-skip-level),
|
|
|
|
|
& > tbody > tr:nth-child(odd of .rounded-rows-child) > td.rounded-rows-skip-level > *
|
|
|
|
|
)`]: {
|
|
|
|
|
backgroundColor: `rgb(0 0 0 / 3%)`,
|
|
|
|
|
},
|
|
|
|
|
[`:where(
|
|
|
|
|
& > tbody > tr.rounded-rows-child.selected > td:not(.rounded-rows-skip-level),
|
|
|
|
|
& > tbody > tr.rounded-rows-child.selected > td.rounded-rows-skip-level > *
|
|
|
|
|
)`]: {
|
2024-07-01 23:01:18 +03:00
|
|
|
backgroundColor: 'rgb(255 255 255 / 90%)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
},
|
|
|
|
|
[`:where(
|
2024-05-09 15:04:35 +03:00
|
|
|
& > tbody > tr.rounded-rows-child[data-drop-target] > td:not(.rounded-rows-skip-level),
|
|
|
|
|
& > tbody > tr.rounded-rows-child[data-drop-target] > td.rounded-rows-skip-level > *
|
|
|
|
|
)`]: {
|
|
|
|
|
backgroundColor: 'rgb(0 0 0 / 8%)',
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Custom column spans ===
|
|
|
|
|
|
|
|
|
|
'.col-span-2-news-item.col-span-2-news-item': {
|
|
|
|
|
'@media screen and (max-width: 40.5625rem)': {
|
|
|
|
|
gridColumn: 'span 1 / span 1',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
respectPrefix: true,
|
|
|
|
|
respectImportant: true,
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
/** One revolution, in radians. */
|
|
|
|
|
const revolution = Math.PI * 2
|
|
|
|
|
matchUtilities(
|
|
|
|
|
{
|
|
|
|
|
// Values must be pre-computed, because FF does not support `calc()` in `stroke-dasharray`.
|
|
|
|
|
// calc(12 * 0.05 * 6.2832) calc(12 * 6.2832)
|
|
|
|
|
dasharray: (value) => {
|
|
|
|
|
const [percentage = 0, radius = 0] = value.split('-').map((part) => Number(part) || 0)
|
|
|
|
|
return {
|
|
|
|
|
strokeDasharray: `${radius * (percentage / 100) * revolution} ${
|
|
|
|
|
percentage === 1 ? 0 : radius * revolution
|
|
|
|
|
}`,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
respectPrefix: true,
|
|
|
|
|
respectImportant: true,
|
|
|
|
|
values: theme('dashArray', {}),
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
|
Keyboard navigation between components (#9499)
- Close https://github.com/enso-org/cloud-v2/issues/982
- Add keyboard navigation via arrows between different components
- This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements.
Other changes:
- Switch much of the codebase to use `react-aria-components`
- This *should* (but does not necessarily) give us improved accessibility for free.
- Refactor various common styles into styled components
- `FocusArea` to perform automatic registration with `Navigator2D`
- `Button` and `UnstyledButton` to let buttons participate in keyboard navigation
- `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page
- `SettingsPage` in the settings pages
- `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section
- Add debugging utilities
- Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''`
- This adds rings around elements (all with different colors):
- That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`.
- That are `:focus`ed, and that are `:focus-visible`
- That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`.
- Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''`
- This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive.
# Important Notes
- :warning: Modals and the authentication flow are not yet fully tested.
- Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar.
- There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult.
- Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing
- It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard
- Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to)
- The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation.
- This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table
- Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above.
- Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do.
2024-04-05 10:21:02 +03:00
|
|
|
matchUtilities(
|
|
|
|
|
{
|
|
|
|
|
'translate-z': (value) => ({
|
|
|
|
|
'--tw-translate-z': value,
|
|
|
|
|
transform: ` translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))`,
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
{ values: theme('translate', {}), supportsNegativeValues: true },
|
|
|
|
|
)
|
|
|
|
|
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
addComponents(
|
|
|
|
|
{
|
|
|
|
|
'.button': {
|
|
|
|
|
'@apply inline-block rounded-full px-4 py-1 selectable': '',
|
|
|
|
|
},
|
|
|
|
|
'.icon-with-text': {
|
|
|
|
|
'@apply flex items-center justify-center gap-icon-with-text': '',
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Text-related classes ===
|
|
|
|
|
|
|
|
|
|
'.text': {
|
|
|
|
|
'@apply leading-cozy h-text py-px': '',
|
|
|
|
|
},
|
2024-03-19 09:17:28 +03:00
|
|
|
'.text-tight': {
|
|
|
|
|
'@apply leading-snug h-5 py-px': '',
|
|
|
|
|
},
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
'.text-header': {
|
|
|
|
|
'@apply leading-snug h-text py-0.5': '',
|
|
|
|
|
},
|
|
|
|
|
'.text-subheading': {
|
|
|
|
|
'@apply text-xl leading-snug py-0.5': '',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
respectPrefix: true,
|
|
|
|
|
respectImportant: true,
|
|
|
|
|
},
|
|
|
|
|
)
|
2024-08-29 08:54:21 +03:00
|
|
|
|
|
|
|
|
addVariant('not-focus', '&:where([data-rac]):not([data-focused])')
|
|
|
|
|
addVariant('not-selected', '&:where([data-rac]):not([data-selected])')
|
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input
Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.
# Important Notes
None
2024-03-13 13:32:05 +03:00
|
|
|
}),
|
|
|
|
|
],
|
2023-11-29 20:29:25 +03:00
|
|
|
})
|
