enso-org/enso
1
1
Fork 0
mirror of https://github.com/enso-org/enso.git synced 2024-12-21 17:41:32 +03:00
Code Issues Projects Releases Wiki Activity
c82e075b2a
enso/app/dashboard/tailwind.config.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

657 lines
28 KiB
JavaScript
Raw Normal View History

Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
/** @file Configuration for Tailwind. */
Implement Subscribe flow (#9776)
2024-05-10 15:28:49 +03:00
import animate from 'tailwindcss-animate'
Diff editor (#9458) Closes enso-org/cloud#940
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'
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
// The names come from a third-party API and cannot be changed.
/* eslint-disable no-restricted-syntax, @typescript-eslint/naming-convention, @typescript-eslint/no-magic-numbers */
export default /** @satisfies {import('tailwindcss').Config} */ ({
content: ['./src/**/*.tsx', './src/**/*.ts'],
theme: {
extend: {
"User groups" settings page (#9081) - Close https://github.com/enso-org/cloud-v2/issues/907 - Add a settings page for listing groups - Add users list with drag-n-drop into user groups - Show users below user groups - Add delete button for users and user groups Other changes: - Add delete button for users on "Members" settings page. Note that it currently does not work as corresponding backend functionality is missing. # Important Notes None
2024-05-09 15:04:35 +03:00
cursor: {
unset: 'unset',
},
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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.
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
/** The default color of all text. */
// This should be named "regular".
Mark cloud as beta (#10992)
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))',
accent: 'rgb(var(--color-accent-rgb) / 100%)',
danger: 'rgb(var(--color-danger-rgb) / 100%)',
Dashboard hotfixes (#10271) - Fix the appearance of the `tertiary` button variant - Fix spinner for projects that are opening being misaligned by 1px - Fix appearance of "Login with Google" and "Login with GitHub" icons in the Login page - Fix #10279 - Switch to Local tab when on desktop app and user does not have an active plan # Important Notes None
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%)',
Update dashboard to design v122 (Part 1) (#9896) - Close #9886 - Update style of buttons in Drive Bar - Move "Home" page into a "Start" dialog - Remove icons that are no longer needed - Remove Backend Switcher in top bar - they have now been converted to categories - Incidental changes - Refactor Backend provider so that both Remote and Local backends are available. - This was done because both Cloud and Local backends are now easily accessible by switching tabs - the Local backend no longer has its own views with the hidden category switcher # Important Notes None
2024-06-12 13:20:07 +03:00
frame: 'rgb(255 255 255 / 40%)',
'selected-frame': 'rgb(255 255 255 / 70%)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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%)',
Show Language Server Logs (#9745) - Frontend side of https://github.com/enso-org/cloud-v2/issues/1046 - Add endpoint to list project sessions - Add button to project sessions to view logs associated with a specific project session # Important Notes None
2024-06-26 17:14:09 +03:00
'not-selected': 'rgb(0 0 0 / 30%)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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',
Update dashboard to design v122 (Part 1) (#9896) - Close #9886 - Update style of buttons in Drive Bar - Move "Home" page into a "Start" dialog - Remove icons that are no longer needed - Remove Backend Switcher in top bar - they have now been converted to categories - Incidental changes - Refactor Backend provider so that both Remote and Local backends are available. - This was done because both Cloud and Local backends are now easily accessible by switching tabs - the Local backend no longer has its own views with the hidden category switcher # Important Notes None
2024-06-12 13:20:07 +03:00
delete: 'rgb(243 24 10 / 87%)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
v3: '#252423',
youtube: '#c62421',
discord: '#404796',
Update dashboard to design v122 (Part 1) (#9896) - Close #9886 - Update style of buttons in Drive Bar - Move "Home" page into a "Start" dialog - Remove icons that are no longer needed - Remove Backend Switcher in top bar - they have now been converted to categories - Incidental changes - Refactor Backend provider so that both Remote and Local backends are available. - This was done because both Cloud and Local backends are now easily accessible by switching tabs - the Local backend no longer has its own views with the hidden category switcher # Important Notes None
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%)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
'label-running-project': '#257fd2',
'label-low-resources': '#ff6b18',
Update dashboard to design v122 (Part 1) (#9896) - Close #9886 - Update style of buttons in Drive Bar - Move "Home" page into a "Start" dialog - Remove icons that are no longer needed - Remove Backend Switcher in top bar - they have now been converted to categories - Incidental changes - Refactor Backend provider so that both Remote and Local backends are available. - This was done because both Cloud and Local backends are now easily accessible by switching tabs - the Local backend no longer has its own views with the hidden category switcher # Important Notes None
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%)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
'gray-350': '#b7bcc5',
},
Move to the Tab layout for Dashboard (#9918) :warning: This PR depends on #9896 and MUST NOT be merged before that one. - Close #9898 - Move right menu to Drive View - Use new icon for toggling the menu - Move Search Bar into Drive View - both of these changes come with free simplifications to the code. - Refactor entire Top Bar to show pages as tabs - Fix https://github.com/enso-org/cloud-v2/issues/1301 - Remove grey background from arrow icon visible when hovering over directory rows # Important Notes - Fonts containing slight variants have been added to make it match more closely with the Figma design. HOWEVER: - They have been added in `app/gui2` instead of the Dashboard codebase, because that is where the existing Enso font is located. - While it's definitely possible to put them in the Dashboard codebase, I think it's preferable to avoid that, otherwise we will have two separate mechanisms for loading/packaging fonts. - However, this problem SHOULD go away if (if not when) the entrypoints for the desktop app (in `app/gui2`) and cloud.enso.org (in `app/ide-desktop/lib/dashboard`) are merged.
2024-06-19 18:24:11 +03:00
fontFamily: {
naming: ['"Enso Naming"', '"Enso"', '"M PLUS 1"'],
},
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
fontSize: {
Settings improvements (#10924) - Address https://github.com/enso-org/cloud-v2/issues/1457 - Show x instead of a circle for close tab icon on Windows and Linux - Free / Solo no longer shows Organization, Members, User Groups, and Activity Log - Invite button should only be there for the admin in Team or above (should already be present) - Should list the required symbols in the password change. - Changing headshot appeared briefly and then disappeared. - Fix https://github.com/enso-org/cloud-v2/issues/1455 - The `Alert` component no longer focuses itself on every keystroke. - Fix #10988 - Same issue as above. Other related changes: - Fix word wrapping in tooltips when a word is wider than the entire tooltip - Add word wrapping to "members" table in members tab - Limit length of "email" column of members table in "user groups" tab - Hide empty sections - Add text to empty "user groups" table in "user groups" tab - ~~Close "set organization name" modal when organization name is set~~ - Already fixed by another PR # Important Notes None
2024-09-06 17:29:26 +03:00
'2xs': '10.5px',
Dashboard UX improvements (#10868) - Fix dropdown focus issues - Keyboard navigation to/from dropdowns and between options - Mouse focus to/from dropdowns (there is no mouse navigation between options) - Use new inputs in "new secret" modal - Simplify form types - Switch activity log date filters to use `DatePicker` which is a wrapper around a `react-aria-components` input - Update `react-aria-components` - Prevent Navigator2D from handling event if it has already been `defaultPrevented` - Switch from `*` imports to `{}` imports for various files - Switch assets table row headings to use new components # Important Notes None
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)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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',
Add settings page; add endpoints for deleting user and uploading profile picture (#8720) - Depends on unmerged backend features: - https://github.com/enso-org/cloud-v2/issues/832 - https://github.com/enso-org/cloud-v2/issues/833 - Close https://github.com/enso-org/cloud-v2/issues/829 - Add scaffold for settings page - Add endpoint for deleting user - Add endpoint for uploading profile picture - Modify API types to add profile picture to user info - Add shortcuts: - <kbd>Cmd</kbd>+<kbd>,</kbd> to open settings page (shortcut taken from VS Code) - <kbd>Esc</kbd> to close settings page - :information_source: Note that, while the settings page is considered as a page by the logic, it is not saved for the next session, as the settings page should be a transitional page (it should only ever be open to do one specific task, and then immediately closed again) - Partly implement https://github.com/enso-org/cloud-v2/issues/840 - Add "members" tab with member list - Add "Invite Users" button to be able to invite multiple users - Misc. QoL improvements - Deselect selections when clicking away from the selection # Important Notes None
2024-01-25 18:10:51 +03:00
'2.5xl': '1.25rem',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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)',
"Activity log" settings page (#9311) - Close https://github.com/enso-org/cloud-v2/issues/942 - Add "Activity log" settings page - Show info common between all events - Specific event info NOT added yet as the appropriate info is currently lacking - Add support for multi-select in dropdowns (required for the "Activity log" settings page) - Animate opening of dropdowns # Important Notes None
2024-03-19 09:17:28 +03:00
'small-rectangle-button': 'var(--small-rectangle-button-corner-radius)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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)',
"Activity log" settings page (#9311) - Close https://github.com/enso-org/cloud-v2/issues/942 - Add "Activity log" settings page - Show info common between all events - Specific event info NOT added yet as the appropriate info is currently lacking - Add support for multi-select in dropdowns (required for the "Activity log" settings page) - Animate opening of dropdowns # Important Notes None
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)',
Add "Invite" button on top right (#8987) - Implement https://github.com/enso-org/cloud-v2/issues/884 - Add an "Invite" button that is present when the "Share" button is not present # Important Notes None
2024-02-13 15:17:45 +03:00
},
Fix dashboard issues (#9015) - Fix https://github.com/enso-org/cloud-v2/issues/892 - Fix listing recent projects (currently errors :warning:) - Fix "update" action in the "duplicate files found when uploading" modal doing nothing, when overwriting a file newly created in the current session - Remove dropzone (very oudated) in favor of dropping directly onto directory rows - Fix various issues with dragging - Fix all spinners not animating on Firefox - Fix column selector disappearing all the way to the right on Firefox - Change auto-generated name of duplicate files from `foo (2)` to `foo 2` # Important Notes None
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)',
"Activity log" settings page (#9311) - Close https://github.com/enso-org/cloud-v2/issues/942 - Add "Activity log" settings page - Show info common between all events - Specific event info NOT added yet as the appropriate info is currently lacking - Add support for multi-select in dropdowns (required for the "Activity log" settings page) - Animate opening of dropdowns # Important Notes None
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)',
Minor fixes to UX for Data Link input (#9857) - Make object keys fixed width again - Fix bug causing autocomplete to re-appear the first time after selecting an option - Allow modal to grow wider to better show long inputs (e.g. long secret paths) # Important Notes None
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)',
Search bar for settings (#9887) - Close https://github.com/enso-org/cloud-v2/issues/1198 - Add search bar for settings - Note that, *unlike* the asset search bar, it has neither suggestions nor tags (name:, description:) - I don't think those add any value here (and definitely would complicate the implementation by a lot) - Convert settings objects to JS so that they can be filtered by search UX changes required for this PR: - Switched `MembersSettingsSection` to use `react-query` to avoid loading the members list every time a user types into the search bar Incidental changes added to make this PR simpler: - Refactor search bar to be provided by a React Context so that state no longer needs to be hoisted all the way up into `Dashboard` and back down to `TopBar` # Important Notes - While I think highlighting the tab of the currently visible section would be a nice UX upgrade, I think it might be a bit complex for at least this initial PR. - It's definitely possible, but almost certainly requires Intersection Observers, plus a new constant to map each Settings Section ID back to its parent Settings Tab ID
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)',
Fix dashboard issues (#9015) - Fix https://github.com/enso-org/cloud-v2/issues/892 - Fix listing recent projects (currently errors :warning:) - Fix "update" action in the "duplicate files found when uploading" modal doing nothing, when overwriting a file newly created in the current session - Remove dropzone (very oudated) in favor of dropping directly onto directory rows - Fix various issues with dragging - Fix all spinners not animating on Firefox - Fix column selector disappearing all the way to the right on Firefox - Change auto-generated name of duplicate files from `foo (2)` to `foo 2` # Important Notes None
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)',
Move to the Tab layout for Dashboard (#9918) :warning: This PR depends on #9896 and MUST NOT be merged before that one. - Close #9898 - Move right menu to Drive View - Use new icon for toggling the menu - Move Search Bar into Drive View - both of these changes come with free simplifications to the code. - Refactor entire Top Bar to show pages as tabs - Fix https://github.com/enso-org/cloud-v2/issues/1301 - Remove grey background from arrow icon visible when hovering over directory rows # Important Notes - Fonts containing slight variants have been added to make it match more closely with the Figma design. HOWEVER: - They have been added in `app/gui2` instead of the Dashboard codebase, because that is where the existing Enso font is located. - While it's definitely possible to put them in the Dashboard codebase, I think it's preferable to avoid that, otherwise we will have two separate mechanisms for loading/packaging fonts. - However, this problem SHOULD go away if (if not when) the entrypoints for the desktop app (in `app/gui2`) and cloud.enso.org (in `app/ide-desktop/lib/dashboard`) are merged.
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)',
Fix secrets, add "update secret" endpoint, fix search bar RWD (#8713) - Fix https://github.com/enso-org/cloud-v2/issues/828 - Fix appearance of search bar on small screens - Close https://github.com/enso-org/cloud-v2/issues/830 - Rename "Data Connector" back to "Secret" for now - Fix "create secret" endpoint - Add "update secret" endpoint - Repurpose "create secret" modal to also be usable for updating secrets - Add new context menu option for editing secrets - Add new shortcut (<kbd>Ctrl</kbd>+<kbd>E</kbd>) for editing secrets - Add double-click trigger for editing secrets - Fix https://github.com/enso-org/cloud-v2/issues/831 - Add the redirect, that was previously missing (only present in the very old dashboard) - Fix https://github.com/enso-org/cloud-v2/issues/835 - Fix search query not updating when clicking label in sidebar - Fix search query breaking when clicking a suggested label, after tabbing into a selection - Fix https://github.com/enso-org/cloud-v2/issues/839 - Make search query refresh when pressing <kbd>Enter</kbd> - Fix some buggy behavior when applying autocomplete # Important Notes None
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')) }),
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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)',
'json-schema': 'var(--json-schema-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: {
Move to the Tab layout for Dashboard (#9918) :warning: This PR depends on #9896 and MUST NOT be merged before that one. - Close #9898 - Move right menu to Drive View - Use new icon for toggling the menu - Move Search Bar into Drive View - both of these changes come with free simplifications to the code. - Refactor entire Top Bar to show pages as tabs - Fix https://github.com/enso-org/cloud-v2/issues/1301 - Remove grey background from arrow icon visible when hovering over directory rows # Important Notes - Fonts containing slight variants have been added to make it match more closely with the Figma design. HOWEVER: - They have been added in `app/gui2` instead of the Dashboard codebase, because that is where the existing Enso font is located. - While it's definitely possible to put them in the Dashboard codebase, I think it's preferable to avoid that, otherwise we will have two separate mechanisms for loading/packaging fonts. - However, this problem SHOULD go away if (if not when) the entrypoints for the desktop app (in `app/gui2`) and cloud.enso.org (in `app/ide-desktop/lib/dashboard`) are merged.
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)',
"Activity log" settings page (#9311) - Close https://github.com/enso-org/cloud-v2/issues/942 - Add "Activity log" settings page - Show info common between all events - Specific event info NOT added yet as the appropriate info is currently lacking - Add support for multi-select in dropdowns (required for the "Activity log" settings page) - Animate opening of dropdowns # Important Notes None
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)',
"Activity log" settings page (#9311) - Close https://github.com/enso-org/cloud-v2/issues/942 - Add "Activity log" settings page - Show info common between all events - Specific event info NOT added yet as the appropriate info is currently lacking - Add support for multi-select in dropdowns (required for the "Activity log" settings page) - Animate opening of dropdowns # Important Notes None
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)',
Move all user-facing text to a central location (#8831) - Closes https://github.com/enso-org/cloud-v2/issues/861 - Adds a `getText` function and React Context to abstract away all text that is shown to users The main immediate benefit is making all text much more discoverable - both being able to know of every piece of text used across the entire application, and making it a lot easier to refactor certain strings when needed rather than having to hunt for strings to replace (and potentially miss one). The longer term benefit is that this will make it easy to add localization, by simply adding another JSON file with the same keys as the existing one, and adding a little bit of logic. # Important Notes None
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)',
"Activity log" settings page (#9311) - Close https://github.com/enso-org/cloud-v2/issues/942 - Add "Activity log" settings page - Show info common between all events - Specific event info NOT added yet as the appropriate info is currently lacking - Add support for multi-select in dropdowns (required for the "Activity log" settings page) - Animate opening of dropdowns # Important Notes None
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)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
},
zIndex: {
1: '1',
Settings improvements (#10924) - Address https://github.com/enso-org/cloud-v2/issues/1457 - Show x instead of a circle for close tab icon on Windows and Linux - Free / Solo no longer shows Organization, Members, User Groups, and Activity Log - Invite button should only be there for the admin in Team or above (should already be present) - Should list the required symbols in the password change. - Changing headshot appeared briefly and then disappeared. - Fix https://github.com/enso-org/cloud-v2/issues/1455 - The `Alert` component no longer focuses itself on every keystroke. - Fix #10988 - Same issue as above. Other related changes: - Fix word wrapping in tooltips when a word is wider than the entire tooltip - Add word wrapping to "members" table in members tab - Limit length of "email" column of members table in "user groups" tab - Hide empty sections - Add text to empty "user groups" table in "user groups" tab - ~~Close "set organization name" modal when organization name is set~~ - Already fixed by another PR # Important Notes None
2024-09-06 17:29:26 +03:00
tooltip: '2',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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: {
Update dashboard to design v122 (Part 1) (#9896) - Close #9886 - Update style of buttons in Drive Bar - Move "Home" page into a "Start" dialog - Remove icons that are no longer needed - Remove Backend Switcher in top bar - they have now been converted to categories - Incidental changes - Refactor Backend provider so that both Remote and Local backends are available. - This was done because both Cloud and Local backends are now easily accessible by switching tabs - the Local backend no longer has its own views with the hidden category switcher # Important Notes None
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)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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`,
Fix background color (#10397) - Fix #10393 - Use correct background color - Make background of Asset Panel white to match Figma design # Important Notes None
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%)`,
"User groups" settings page (#9081) - Close https://github.com/enso-org/cloud-v2/issues/907 - Add a settings page for listing groups - Add users list with drag-n-drop into user groups - Show users below user groups - Add delete button for users and user groups Other changes: - Add delete button for users on "Members" settings page. Note that it currently does not work as corresponding backend functionality is missing. # Important Notes None
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`,
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
},
animation: {
MFA (#10875) * Draft checkbox component * Fixes in Setup Page * Invite Users * Add usergroup setup after subscription * Fix comments * Refetch Interval + Feature Toggles * Fix lint * Address issues * Fix Dialog * Assign users to the user group * Use transitions to navigate between steps * Small fixes * Improve styling for scrollbars * Fix typescript * OTP input * Fix setup logic * Show Setup dialog only for admins * Add otp * OTP input * 2FA settings section * Small improvements * Fixes * Small fixes * Remove w-full * TOTP at login * Fixes in 2FA * Fixes in types * Fix totp * Merge fixes * Merge fixes x2 * Merge fixes x2 * Fix types * Fix types * Fix cancel button * Fix reset button * Fix types * Fix prettier * Fix prettier * Fix lint * Fix lint * Fix control * Address prettier * Fix MFA mock * Fix sign in message * Fix tests * Address CR * Fix types
2024-09-13 16:00:31 +03:00
'caret-blink': 'caret-blink 1.5s ease-out infinite',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
'spin-ease': 'spin cubic-bezier(0.67, 0.33, 0.33, 0.67) 1.5s infinite',
Improve Invitation flow (#9928) #### Tl;dr Closes: enso-org/cloud-v2#1186 This PR significantly improves the invitation UX and add ability to view/resend/copy/delete invitations <details><summary>Demo Presentation</summary> <p> https://github.com/enso-org/enso/assets/61194245/62124243-50ce-47e1-bcac-789463b5e755 </p> </details> --- #### Context: #### This Change: What the change does in the larger context? Specific details to highlight for review: 1. Redesign the Invitation dialog 2. Add the ability to edit emails after typing ` ` 3. Adds ability to use different separators: `<space>`, `<semicolon>`, `<colon>` or `<newline>` 4. Shows Invitation on the `members` page in settings. 5. Adds ability to remove, resend, copy or delete invitations 6. Improve the UI of dialogs, buttons #### Test Plan: Go over how you plan to test it. Your test plan should be more thorough the riskier the change is. For major changes, I like to describe how I E2E tested it and will monitor the rollout. ---
2024-05-22 21:26:02 +03:00
'appear-delayed': 'appear-delayed 0.5s ease-in-out',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
},
transitionProperty: {
width: 'width',
Project Description/Settings sidebar (#7612) - Closes https://github.com/enso-org/cloud-v2/issues/629 - Project Description/Settings sidebar # Important Notes :warning: This is blocked by backend support for asset descriptions. When the sidebar is opening, there is one jumpy animation: - The search bar switches from being centered in the screen, to having an equal gap between itself and its siblings
2023-11-30 15:40:01 +03:00
'min-width': 'min-width',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
'stroke-dasharray': 'stroke-dasharray',
'grid-template-rows': 'grid-template-rows',
Improve mouse and keyboard UX (#9100) - Close https://github.com/enso-org/cloud-v2/issues/914 - Add selection brush for selecting multiple assets using mouse - Port selection brush over from GUI2 - Support <kbd>Ctrl</kbd>-select to select multiple ranges - Add various actions when *exactly one* asset is selected: - <kbd>Enter</kbd> for various assets to trigger their double-click actions - Projects are opened - Directories are toggled open/closed - Secrets show the "upsert secret modal" - <kbd>ArrowLeft</kbd> now collapses the selected folder - <kbd>ArrowRight</kbd> now expands the selected folder - <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> change the selected asset to the previous/next asset - The newly selected asset (technically: any asset that is the only selected asset, whether this is a result of a drag, mouse click, or keypress) is automatically smoothly scrolled to. - Improvements to the search bar - <kbd>Escape</kbd> cancels tabbing through suggestions (and discards the selected suggestion) - <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> behave like <kbd>Shift</kbd>+<kbd>Tab</kbd> and <kbd>Tab</kbd> to move to the previous/next suggestion respectively - <kbd>Shift</kbd>+<kbd>ArrowUp</kbd> and <kbd>Shift</kbd>+<kbd>ArrowDown</kbd> to select multiple assets using the keyboard - <kbd>Ctrl</kbd>+<kbd>Space</kbd> to toggle assets using the keyboard - <kbd>Escape</kbd> to deselect all assets - Add CSS-only focus ring to highlight most recently selected item, but only when navigating via keyboard - Enter and double-click to temporarily open the sidebar to edit a Data Link Optional features that have not yet been implemented: - Move the "update secret" modal to the sidebar as well # Important Notes None
2024-02-26 19:49:49 +03:00
'border-margin': 'border, margin',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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)',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
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',
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
},
Improve Invitation flow (#9928) #### Tl;dr Closes: enso-org/cloud-v2#1186 This PR significantly improves the invitation UX and add ability to view/resend/copy/delete invitations <details><summary>Demo Presentation</summary> <p> https://github.com/enso-org/enso/assets/61194245/62124243-50ce-47e1-bcac-789463b5e755 </p> </details> --- #### Context: #### This Change: What the change does in the larger context? Specific details to highlight for review: 1. Redesign the Invitation dialog 2. Add the ability to edit emails after typing ` ` 3. Adds ability to use different separators: `<space>`, `<semicolon>`, `<colon>` or `<newline>` 4. Shows Invitation on the `members` page in settings. 5. Adds ability to remove, resend, copy or delete invitations 6. Improve the UI of dialogs, buttons #### Test Plan: Go over how you plan to test it. Your test plan should be more thorough the riskier the change is. For major changes, I like to describe how I E2E tested it and will monitor the rollout. ---
2024-05-22 21:26:02 +03:00
keyframes: {
'appear-delayed': {
'0%': { opacity: '0' },
'99%': { opacity: '0' },
'100%': { opacity: '1' },
},
MFA (#10875) * Draft checkbox component * Fixes in Setup Page * Invite Users * Add usergroup setup after subscription * Fix comments * Refetch Interval + Feature Toggles * Fix lint * Address issues * Fix Dialog * Assign users to the user group * Use transitions to navigate between steps * Small fixes * Improve styling for scrollbars * Fix typescript * OTP input * Fix setup logic * Show Setup dialog only for admins * Add otp * OTP input * 2FA settings section * Small improvements * Fixes * Small fixes * Remove w-full * TOTP at login * Fixes in 2FA * Fixes in types * Fix totp * Merge fixes * Merge fixes x2 * Merge fixes x2 * Fix types * Fix types * Fix cancel button * Fix reset button * Fix types * Fix prettier * Fix prettier * Fix lint * Fix lint * Fix control * Address prettier * Fix MFA mock * Fix sign in message * Fix tests * Address CR * Fix types
2024-09-13 16:00:31 +03:00
'caret-blink': {
'0%,70%,100%': { opacity: '1' },
'20%,50%': { opacity: '0' },
},
Improve Invitation flow (#9928) #### Tl;dr Closes: enso-org/cloud-v2#1186 This PR significantly improves the invitation UX and add ability to view/resend/copy/delete invitations <details><summary>Demo Presentation</summary> <p> https://github.com/enso-org/enso/assets/61194245/62124243-50ce-47e1-bcac-789463b5e755 </p> </details> --- #### Context: #### This Change: What the change does in the larger context? Specific details to highlight for review: 1. Redesign the Invitation dialog 2. Add the ability to edit emails after typing ` ` 3. Adds ability to use different separators: `<space>`, `<semicolon>`, `<colon>` or `<newline>` 4. Shows Invitation on the `members` page in settings. 5. Adds ability to remove, resend, copy or delete invitations 6. Improve the UI of dialogs, buttons #### Test Plan: Go over how you plan to test it. Your test plan should be more thorough the riskier the change is. For major changes, I like to describe how I E2E tested it and will monitor the rollout. ---
2024-05-22 21:26:02 +03:00
},
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
},
Change dashboard to use 2 spaces for indentation (#8798) This makes it consistent with the indentation style of GUI2. # Important Notes - This commit *will* need to be added to [`.git-blame-ignore-revs`](https://github.com/enso-org/enso/blob/develop/.git-blame-ignore-revs) *after* it is merged. - This shouldn't need any particular QA (although QA doesn't hurt), as the only thing that was done is a `npx prettier -w .`, meaning that there should be zero logic changes.
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: [
Diff editor (#9458) Closes enso-org/cloud#940
2024-03-23 21:44:56 +03:00
reactAriaComponents,
Implement Subscribe flow (#9776)
2024-05-10 15:28:49 +03:00
animate,
"User groups" settings page (#9081) - Close https://github.com/enso-org/cloud-v2/issues/907 - Add a settings page for listing groups - Add users list with drag-n-drop into user groups - Show users below user groups - Add delete button for users and user groups Other changes: - Add delete button for users on "Members" settings page. Note that it currently does not work as corresponding backend functionality is missing. # Important Notes None
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) &'])
MFA (#10875) * Draft checkbox component * Fixes in Setup Page * Invite Users * Add usergroup setup after subscription * Fix comments * Refetch Interval + Feature Toggles * Fix lint * Address issues * Fix Dialog * Assign users to the user group * Use transitions to navigate between steps * Small fixes * Improve styling for scrollbars * Fix typescript * OTP input * Fix setup logic * Show Setup dialog only for admins * Add otp * OTP input * 2FA settings section * Small improvements * Fixes * Small fixes * Remove w-full * TOTP at login * Fixes in 2FA * Fixes in types * Fix totp * Merge fixes * Merge fixes x2 * Merge fixes x2 * Fix types * Fix types * Fix cancel button * Fix reset button * Fix types * Fix prettier * Fix prettier * Fix lint * Fix lint * Fix control * Address prettier * Fix MFA mock * Fix sign in message * Fix tests * Address CR * Fix types
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' },
},
Move to the Tab layout for Dashboard (#9918) :warning: This PR depends on #9896 and MUST NOT be merged before that one. - Close #9898 - Move right menu to Drive View - Use new icon for toggling the menu - Move Search Bar into Drive View - both of these changes come with free simplifications to the code. - Refactor entire Top Bar to show pages as tabs - Fix https://github.com/enso-org/cloud-v2/issues/1301 - Remove grey background from arrow icon visible when hovering over directory rows # Important Notes - Fonts containing slight variants have been added to make it match more closely with the Figma design. HOWEVER: - They have been added in `app/gui2` instead of the Dashboard codebase, because that is where the existing Enso font is located. - While it's definitely possible to put them in the Dashboard codebase, I think it's preferable to avoid that, otherwise we will have two separate mechanisms for loading/packaging fonts. - However, this problem SHOULD go away if (if not when) the entrypoints for the desktop app (in `app/gui2`) and cloud.enso.org (in `app/ide-desktop/lib/dashboard`) are merged.
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))`,
},
Fix background color (#10397) - Fix #10393 - Use correct background color - Make background of Asset Panel white to match Figma design # Important Notes None
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': '',
},
Expand Templates (#10994) - Update all the templates to the newest versions. - Fix any defects in the templates. - Update the rust and scala code to package and download the templates. - Update the front end to have images for every template (with some Gemini assists). https://github.com/user-attachments/assets/59a1f845-f409-45bb-9c77-fe3a2d1262b1
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(
"User groups" settings page (#9081) - Close https://github.com/enso-org/cloud-v2/issues/907 - Add a settings page for listing groups - Add users list with drag-n-drop into user groups - Show users below user groups - Add delete button for users and user groups Other changes: - Add delete button for users on "Members" settings page. Note that it currently does not work as corresponding backend functionality is missing. # Important Notes None
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 > *
)`]: {
Adjust Colours. (#10417) - Change the lightness of the component colours to match Figma. - Remove the background image from tailwind.css. - Alter the code editor background to be white. - Make the selection colour much brighter in the dashboard. ![image](https://github.com/enso-org/enso/assets/4699705/4ae8f03a-bdeb-48cf-86eb-aa058a2a1b01) ![image](https://github.com/enso-org/enso/assets/4699705/eb5d4cf8-d275-4c0d-b876-4a29ce7768bf) ![image](https://github.com/enso-org/enso/assets/4699705/0df64403-75e5-4e44-a818-58cedbbcd3c9) # Important Notes Removed the `is-hidden-file` package from the project manager shim. It seems to be unreliable in Win11 and as just for local testing made just do dot file logic.
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(
"User groups" settings page (#9081) - Close https://github.com/enso-org/cloud-v2/issues/907 - Add a settings page for listing groups - Add users list with drag-n-drop into user groups - Show users below user groups - Add delete button for users and user groups Other changes: - Add delete button for users on "Members" settings page. Note that it currently does not work as corresponding backend functionality is missing. # Important Notes None
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': '',
},
"Activity log" settings page (#9311) - Close https://github.com/enso-org/cloud-v2/issues/942 - Add "Activity log" settings page - Show info common between all events - Specific event info NOT added yet as the appropriate info is currently lacking - Add support for multi-select in dropdowns (required for the "Activity log" settings page) - Animate opening of dropdowns # Important Notes None
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,
},
)
Dashboard UX improvements (#10868) - Fix dropdown focus issues - Keyboard navigation to/from dropdowns and between options - Mouse focus to/from dropdowns (there is no mouse navigation between options) - Use new inputs in "new secret" modal - Simplify form types - Switch activity log date filters to use `DatePicker` which is a wrapper around a `react-aria-components` input - Update `react-aria-components` - Prevent Navigator2D from handling event if it has already been `defaultPrevented` - Switch from `*` imports to `{}` imports for various files - Switch assets table row headings to use new components # Important Notes None
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
}),
],
Improve label interactions (#8417) - Fixes https://github.com/enso-org/cloud-v2/issues/781 - Implement parser for search query - Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser - Change "remove label from asset" to right click - Also add a tooltip to notify user that right click removes the label - Change click action on label on asset, to toggle the label from the search - Stop sending the list of labels for filtering on the server side Unrelated changes: - Switch dashboard dev server to use Vite. All other servers should be unaffected. - `ide watch` works - `ide build` works - `gui watch` works - `dashboard build` works # Important Notes There are quite a lot of new interactions with the search bar which should probably all be tested.
2023-11-29 20:29:25 +03:00
})
Reference in New Issue Copy Permalink