5 Commits

Author SHA1 Message Date
Luís Carvalho
c86618ecd3
feat(dep-graph): add dark mode (#8712)
* feat(dep-graph): add dark mode

Squashed commits:

feat(dep-graph): Updating tailwind config file.

As of version 3.0 higher tailwind jit mode is default. Instead of purge is now content and as dark mode will be added as class.

feat(dep-graph): Enabling toggable dark mode.

As darkmode (tailwind.congig.json) is set as class, we need to add the script to the head tag on index.html.
see: https://tailwindcss.com/docs/dark-mode

feat(dep-graph): Adding theme Initializer and creating support functions

All functions related to theme changing and initialization are located on the theme-resolver.tsx
The themeInit function will run when page is loaded and apply add class to the <html> tag as dark or light accordignly. Theme resolver applies the changes and keeps localstorage and <html class> in sync.

feat(dep-graph): Adding theme panel

The pannel allows users to switch themes. Currently it only changes the html class and localstorage.

feat(dep-graph): Creating tailwind dark colors pallete

The current colors remain as light. The dark colors are an attempt to contrast the light ones.

feat(dep-graph): Adding additional styles to sidebar

feat(dep-graph): Define styling presets for darkmode to allow consistent and concise classNames.

feat(dep-graph): Apply dark styling classes to sidebar

feat(dep-graph): Added dark mode styles to the debugger

feat(dep-graph): Added Color to tailwind config and adjusting imports.

feat(dep-graph): Created theme tracker

feat(dep-graph): Added dark classes to graph container

feat(dep-graph): Adjusted some edge styles for better UX. Added dynamic selection of colors according to the current theme.

feat(dep-graph):  Added transition when switching themes.

feat(dep-graph): Readded auto roation for implicit label and dynamic background.

feat(dep-graph): Assigned generic types to selectDynbamically, and added new color to the pallete.

feat(dep-graph): Added dynamic styles for theming.

feat(dep-graph): Added mock for matchMedia. Tests will fail otherwise.

feat(dep-graph): Added styles to tippy.

feat(dep-graph): Moved theme related functions to theme-resolver file

feat(dep-graph): Implement dark mode on tooltips.

feat(dep-graph): re-evaluate graph colors on theme change

cleanup(dep-graph): Removed duplicate style

chore(dep-graph): Testing theme preferences

Adding test cases for theme initialization, and the ability to change.

cleanup(dep-graph): removing repeated style classes

Fixed issue with webpack plugin (#8231)

feat(npm): resolved issue with live reload failing

Fixed the issue with live reload when adding scripts in project.json

Closes #8230

chore(repo): update nx to 13.10.0-beta.1 (#9407)

feat(dep-graph): re-evaluate graph colors on theme change

fix(dep-graph): use theme background color in image download

* fix(dep-graph): change dark mode styles

* cleanup(dep-graph): cleanup e2e tests and naming

Co-authored-by: Philip Fulcher <philip@nrwl.io>
2022-03-30 21:52:27 -06:00
Philip Fulcher
31d51c36fd
feat(dep-graph): add experimental collapse edges option (#9004) 2022-02-16 14:12:13 -07:00
Isaac Mann
07ebdb36a3
feat(core): add nx graph as alias of nx dep-graph (#8539)
* feat(core): add nx graph as alias of nx dep-graph

* docs(core): add note about old dep-graph syntax

* cleanup(core): formatting

* feat(core): formatting

* feat(core): formatting

Co-authored-by: Isaac Mann <isaacplmann+git@gmail.com>
2022-01-21 11:15:23 -05:00
Philip Fulcher
717a560a54
chore(dep-graph): migrate dep-graph app to React (#8152) 2021-12-16 23:30:04 +00:00
Philip Fulcher
5f9279a3ff
feat(dep-graph): use xstate for state management (#7634) 2021-11-08 21:00:45 -07:00