Drag-n-drop layout #37
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rrupt Moving to a typescript enum for LayoutPreset changed how it was encoded (went from object mapping to typescript encoding the enum using integer keys). This threw an error when loading the saved layout. Just set a default one in case the getter returns null and it should handle any future layout changes.
Not required in React 17 See: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html Supposed to be in an upstream version of CRA but not merged yet it seems
|
Turns out half of the original undo history reducer was simply due to faulty logic and patching over it with poor fixes (although it did work). Refactoring the logic obviated the need for most of them. The end result is so much cleaner and very simple (for the entire PR). Thank you so much for your patience despite the fatuity. I really really appreciate it. |
|
Alright! This is really close. I noticed two things:
This should probably go in a separate PR, but I was thinking about changing some copy to make it more direct and actionable. Here are some possible substitutions:
|
|
Ok I took out the hardware for a final spin.
I think this is the last batch of requests. |
|
Sigh. I forgot to mention that the node version in |
NoahBres
force-pushed
the
drag-n-drop-layout
branch
from
146ff85 to
b346860
Compare
I didn't even notice that gradle managed the compilation. That's really neat.
Do you mean how the main content scrolls on overflow separately from the heading?
What are your thoughts on putting the play/pause button there? (Ignore the offset. That's because I used unicode characters instead of looking for an icon as a quick mockup)
Happy holidays! |
Yes, exactly.
I like it best on the right with the close button, but I don't really mind it beside the "Graph" text. Happy holidays as well! |
Courtesy of Ryan
j5155
pushed a commit
to jdhs-ftc/ftc-dashboard-record
that referenced
this pull request
Jul 22, 2024
* Replace Skystone field image with Ultimate Goal field image * Add improved Ultimate Goal Field * Bump react-scripts to 4.0.1 * Bump react to 17.0.1 * Bump redux to 4.0.5 * Add eslintcache to gitignore * Add typescript * Convert LayoutPreset to typescript * Install react-grid-layout * Implement basics of a draggable grid layout * Convert LayoutPreset to tsx * Add default layout in the event that local storage saved layout is corrupt Moving to a typescript enum for LayoutPreset changed how it was encoded (went from object mapping to typescript encoding the enum using integer keys). This threw an error when loading the saved layout. Just set a default one in case the getter returns null and it should handle any future layout changes. * Replace ternary with optional chaining and nullish coalescing * Remove file extensions from default eslint * Implement layout based grab handles for draggable widgets * Add uuid lib * Replace AutoFitCanvas window listener with ResizeObserver * Add grid view map with uuids * Add padding to views * Replace Object.assign with spread operator * Fix misplaced optional chaining operator * Remove duplicated react * Change to string enum * Turn off react-in-jsx-scope rule Not required in React 17 See: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html Supposed to be in an upstream version of CRA but not merged yet it seems * Turn off default eslint file extensions rule * Give LayoutPreset enums string values * Increase padding on grab handles * Add types for ResizeObserver * Fix missing dependency from git merge * Add dynamic (on mount) layout presets for different viewport heights * Apply border-box to every element * Increase default height in medium grid layout * Add containerHeight override to AutoFitCanvas * Fix bug where component re-renders on every state change * Add styled-components dependency * Move ConfigurableLayout into sub-folder and add Fab component * Add new FAB icons * Add red line to dashboard header * Move ConfigurableLayout back & rename RadialFab * Change icon fills to white * Implement base FAB functionality * Change header colors to tailwind color palette * Implement locking button * Fix locked grid state bugs Grid state in the react-grid-layout wouldn't match the ConfigurableLayout grid state. Now they're synced. * Add delete button functionality * Change configurable grid delete button style * Remove smaller breakpoints. Add delete mode color * Move configurable view enum to its own file * Install tailwind. Convert to tailwind - Remove Heading and Header classes - Unnecessary abstraction * Add camera view to ConfigurableLayout enum * Refactor RadialFabChild to take children svg components instead of icon prop * Add important to fab outline: none * Replace manual style paddings in views with tailwind classes * Implement base view picker functionality * Implement persistent local storage configurable layouts * Add custom layout empty message * Fix add item packing bug * Convert cursor header from layout based to prop based * Implement smart view insertion * Add OpModeView to configurable layout * Add dot grid background to ConfigurableLayout * Style opmode view * Increase opmode view spacing * Add tailwind forms * Style config form inputs * Fix layout select styling * Adjust other grid sizes to account for increased padding * Improve grid contrast * Change tailwind default font to robot and update robot font weights * Implement BaseView styles shared by other views * Add for label to MultipleCheckbox * Add labels to GraphView * Fix locked grid item bug * Create a useMouseIdleListener hook * Lock layout changes and hide fab on idle * Add types to GridItems * Fix config view scrolling bug and mismatched bg bug * Add no variables selected indicator to GraphView * Decrease GraphView bottom indicator * Add dependency to useEffect * Stylistic code changes * Extract repeated BaseView headings * Extract OpModeView action buttons * Revert incorrect prop in Dashboard.jsx * Change font-bold to font-medium * Consistent body colors * Improve no content to graph label * Add stylewind css linter dependency Default vscode linter did not like the tailwind apply function * Run index.css through stylelint * Add rounded outline hover state to other icon buttons * More formal copy * Center graph text * Turn off declaration empty line in stylelint * Remove stylelint as it was annoying * Add new icons * Add dynamic classes to RadialFab * Change FAB behavior * Create useDelayedTooltip hook * Add tooltips to the FAB buttons * Implement colored shadows in tailwind * Change the view picker to a smaller design * Reverse FAB state * Turn off text selection when unlocked and rename showShadow to isUnlocked * Change ConfigurableLayout name to Custom in dropdown * Implement grid undo/redo system * Fix camera via crashing on resize * Remove debug variable * Add pause indicator to graph * Make number inputs way more forgiving * Red invalid indicator * Revert "Make number inputs way more forgiving" This reverts commit 711dfd3. * Change grid to normal grid and tweak delete mode indicator * Replace arrEquals with lodash isEqual * Remove shouldAppend flag and use cleaner add algo * Add triple equals prettier and eslint rules * Triple equals lint. Navigator platform check. Rid of hoisting. * Alias currentHead as gridItems * Convert undo/redo to hook * Add custom icons to the view picker * ViewPicker field icon adjustment * Remove custom colors in RadialFabChild * Optimize for keyboard navigation * Implement improved insertion algo * Remove default case to enforce exhaustive check * Reset history on init dispatch * Reset actionHistory on init * Simplify undo history * Move utility function to the top * Move around variables and functions in a more logical mannger * Lock grid on window load * Fix graph text being off * Actionable copy * Bump node version in FtcDashboard/build.gradle * Change 'variables' to 'telemetry' * Fix opmode select arrow on text * Make text indicators in graph and opmode view bigger * Center opmode/graph view indicator text * Separate heading scroll from body scroll * Add flex-center class. Remove unused css styles * Turn off delete mode when locking layout * Add graph pause button. Move pause logic to GraphView * Add a tiny padding because focus ring was being cut off * Increase grid columns to 12 and add min grid width * Background dot grid resizes to align with the actual grid * Code and visual styling tweaks Courtesy of Ryan
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Drag-n-drop layout feature
ConfigurableLayoutRadialFabbutton andRadialFabChildViewPickerAutoFitCanvasresizing behavior to useResizeObservercreate.svg,delete_x.svg,delete.svg,lock_open.svg,lock.svg, (and more now)MultipleCheckboxinputs so you can also click on the labelGraphView(I still don't know why git pulls commits from Sep. 15 on every PR, this branch's commits should start on Dec. 13 3db3cad)