enso/app/ide-desktop/lib/dashboard/.prettierrc.cjs
somebody1234 2ec7817068
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 10:32:05 +00:00

60 lines
1.5 KiB
JavaScript

/** @file Prettier configuration. */
// @ts-check
/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
module.exports = {
overrides: [
{
files: ['*.[j|t]s', '*.[j|t]sx', '*.m[j|t]s', '*.c[j|t]s'],
options: {
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
printWidth: 100,
tabWidth: 2,
semi: false,
singleQuote: true,
trailingComma: 'es5',
arrowParens: 'avoid',
plugins: ['@ianvs/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
// This plugin's options
importOrder: [
'^react$',
'',
'<THIRD_PARTY_MODULES>',
'',
'^enso-',
'',
'^#[/]App',
'^#[/]appUtils',
'',
'^#[/]configurations[/]',
'',
'^#[/]data[/]',
'',
'^#[/]hooks[/]',
'',
'^#[/]providers[/]',
'',
'^#[/]events[/]',
'',
'^#[/]pages[/]',
'',
'^#[/]layouts[/]',
'',
'^#[/]components[/]',
'',
'^#[/]modals[/]',
'',
'^#[/]services[/]',
'',
'^#[/]utilities[/]',
'',
'^#[/]authentication[/]',
'',
'^[.]',
],
importOrderParserPlugins: ['typescript', 'jsx', 'importAssertions'],
importOrderTypeScriptVersion: '5.0.0',
},
},
],
}