Skip to content

Panel refactor#143

Merged
spacedmonkey merged 19 commits intomasterfrom
feature/51-panel-refactor
Jan 29, 2020
Merged

Panel refactor#143
spacedmonkey merged 19 commits intomasterfrom
feature/51-panel-refactor

Conversation

@barklund
Copy link
Copy Markdown
Contributor

@barklund barklund commented Jan 28, 2020

Summary

This PR includes some general changes to design and architecture for panels necessary for future work.

  • Componentize panels and panel elements
  • Add context and collapse/expand to panel title
  • Add resizable to panels
  • Create general layer panel always visible at bottom
  • Dummy content for new layer and color preset panel
  • Move all generic panel elements to generic components.
  • Move panels to components as well
  • Add relevant testing

This PR will not address:

  • Changing the contents of any panels besides what's needed for the refactor
  • Organizing any panels correctly
  • Styling any panel elements correctly
  • Actual layer and color preset panel contents.

Partially fixes #51.

This is a duplicate of ampproject/amp-wp#4138, ported to this repo.

@barklund barklund self-assigned this Jan 28, 2020
@barklund barklund requested review from dvoytenko, miina, spacedmonkey and swissspidy and removed request for miina and spacedmonkey January 28, 2020 19:13
@barklund barklund marked this pull request as ready for review January 29, 2020 01:06
@barklund barklund mentioned this pull request Jan 29, 2020
9 tasks
@miina
Copy link
Copy Markdown
Contributor

miina commented Jan 29, 2020

@barklund There are a few minor console errors related to the PR that would be great to resolve before merging, too (e.g. missing key & some prop-types).

@spacedmonkey
Copy link
Copy Markdown
Contributor

This ticket now covers - #6

element.addEventListener( 'keydown', handleKeyPress );

return () => {
if ( element ) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we have to check if element exists here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had some issues at some point with "element being undefined", but it appears they're not relevant anymore. Fixed in 6283157.

// TODO Should be rewritten to use MouseTrap when added to .
const handleKeyPress = useCallback( ( evt ) => {
if ( [ KEY_UP, KEY_DOWN ].includes( evt.keyCode ) ) {
const direction = evt.keyCode === KEY_UP ? 1 : -1;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought keyCode is deprecated via this comment.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad, copy-paste from something else - also it felt weird. But didn't look more into it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 8c0d602.

@spacedmonkey spacedmonkey mentioned this pull request Jan 29, 2020
@googlebot
Copy link
Copy Markdown

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

@swissspidy
Copy link
Copy Markdown
Collaborator

@spacedmonkey Can you reply to the bot? 🙂 Thanks!

@spacedmonkey
Copy link
Copy Markdown
Contributor

@googlebot I consent.

@googlebot
Copy link
Copy Markdown

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

@spacedmonkey
Copy link
Copy Markdown
Contributor

Hope you don't mind, but also tidied up the document inspector - f66fbd5

@barklund barklund requested a review from spacedmonkey January 29, 2020 18:00
@barklund
Copy link
Copy Markdown
Contributor Author

@barklund There are a few minor console errors related to the PR that would be great to resolve before merging, too (e.g. missing key & some prop-types).

@spacedmonkey, I don't see any such console errors. Only an error about DisplayLayer, which is not related to this PR. Can you copy it in here - maybe explain how you got them? I might not have tested it thoroughly enough.

@spacedmonkey
Copy link
Copy Markdown
Contributor

@barklund I get these errors when openning the browser

react-dom.js?ver=16.9.0:539 Warning: Received `false` for a non-boolean attribute `overflow`.

If you want to write it to the DOM, pass a string instead: overflow="false" or overflow={value.toString()}.

If you used to conditionally omit it with overflow={condition && value}, pass overflow={condition ? value : undefined} instead.
    in div (created by displayLayer__DisplayPageArea)
    in displayLayer__DisplayPageArea (created by DisplayLayer)
    in div (created by layout__Layer)
    in layout__Layer (created by DisplayLayer)
    in DisplayLayer (created by CanvasLayout)
    in div (created by selectionCanvas__Container)
    in selectionCanvas__Container (created by ForwardRef)
    in ForwardRef (created by SelectionCanvas)
    in SelectionCanvas (created by CanvasLayout)
    in div (created by canvasLayout__Background)
    in canvasLayout__Background (created by CanvasLayout)
    in CanvasLayout (created by Canvas)
    in CanvasProvider (created by Canvas)
    in Canvas (created by Layout)
    in div (created by dropZoneProvider__DropZoneWrapper)
    in dropZoneProvider__DropZoneWrapper (created by DropZoneProvider)
    in DropZoneProvider (created by Layout)
    in div (created by layout__Area)
    in layout__Area (created by Layout)
    in div (created by layout__Editor)
    in layout__Editor (created by Layout)
    in Layout (created by App)
    in FontProvider (created by App)
    in StoryProvider (created by App)
    in HistoryProvider (created by App)
    in APIProvider (created by App)
    in ConfigProvider (created by App)
    in ThemeProvider (created by App)
    in SlotFillProvider (created by App)
    in App
warningWithoutStack @ react-dom.js?ver=16.9.0:539
warning @ react-dom.js?ver=16.9.0:2851
validateProperty$1 @ react-dom.js?ver=16.9.0:8614
warnUnknownProperties @ react-dom.js?ver=16.9.0:8646
validateProperties$2 @ react-dom.js?ver=16.9.0:8666
validatePropertiesInDevelopment @ react-dom.js?ver=16.9.0:8718
setInitialProperties @ react-dom.js?ver=16.9.0:8978
finalizeInitialChildren @ react-dom.js?ver=16.9.0:10080
completeWork @ react-dom.js?ver=16.9.0:19243
completeUnitOfWork @ react-dom.js?ver=16.9.0:22382
performUnitOfWork @ react-dom.js?ver=16.9.0:22356
workLoopSync @ react-dom.js?ver=16.9.0:22323
renderRoot @ react-dom.js?ver=16.9.0:22016
scheduleUpdateOnFiber @ react-dom.js?ver=16.9.0:21557
scheduleRootUpdate @ react-dom.js?ver=16.9.0:24457
updateContainerAtExpirationTime @ react-dom.js?ver=16.9.0:24485
updateContainer @ react-dom.js?ver=16.9.0:24574
(anonymous) @ react-dom.js?ver=16.9.0:25101
unbatchedUpdates @ react-dom.js?ver=16.9.0:21825
legacyRenderSubtreeIntoContainer @ react-dom.js?ver=16.9.0:25100
render @ react-dom.js?ver=16.9.0:25180
initialize @ index.js:46
(anonymous) @ index.js:56
react-dom.js?ver=16.9.0:539 Warning: Received `false` for a non-boolean attribute `pointerEvents`.

If you want to write it to the DOM, pass a string instead: pointerEvents="false" or pointerEvents={value.toString()}.

If you used to conditionally omit it with pointerEvents={condition && value}, pass pointerEvents={condition ? value : undefined} instead.
    in div (created by layout__Layer)
    in layout__Layer (created by DisplayLayer)
    in DisplayLayer (created by CanvasLayout)
    in div (created by selectionCanvas__Container)
    in selectionCanvas__Container (created by ForwardRef)
    in ForwardRef (created by SelectionCanvas)
    in SelectionCanvas (created by CanvasLayout)
    in div (created by canvasLayout__Background)
    in canvasLayout__Background (created by CanvasLayout)
    in CanvasLayout (created by Canvas)
    in CanvasProvider (created by Canvas)
    in Canvas (created by Layout)
    in div (created by dropZoneProvider__DropZoneWrapper)
    in dropZoneProvider__DropZoneWrapper (created by DropZoneProvider)
    in DropZoneProvider (created by Layout)
    in div (created by layout__Area)
    in layout__Area (created by Layout)
    in div (created by layout__Editor)
    in layout__Editor (created by Layout)
    in Layout (created by App)
    in FontProvider (created by App)
    in StoryProvider (created by App)
    in HistoryProvider (created by App)
    in APIProvider (created by App)
    in ConfigProvider (created by App)
    in ThemeProvider (created by App)
    in SlotFillProvider (created by App)
    in App

After opening the documents inspector.

backend.js:6 Warning: Failed prop type: The prop `isMultiple` is marked as required in `InputGroup`, but its value is `undefined`.
    in InputGroup (created by DocumentInspector)
    in DocumentInspector (created by Inspector)
    in div (created by inspectorContent__InspectorWrapper)
    in inspectorContent__InspectorWrapper (created by Inspector)
    in Inspector (created by InspectorLayout)
    in div (created by inspectorLayout__InspectorBackground)
    in inspectorLayout__InspectorBackground (created by InspectorLayout)
    in div (created by inspectorLayout__Layout)
    in inspectorLayout__Layout (created by InspectorLayout)
    in InspectorLayout (created by Inspector)
    in InspectorProvider (created by Inspector)
    in Inspector (created by Layout)
    in div (created by layout__Area)
    in layout__Area (created by Layout)
    in div (created by layout__Editor)
    in layout__Editor (created by Layout)
    in Layout (created by App)
    in FontProvider (created by App)
    in StoryProvider (created by App)
    in HistoryProvider (created by App)
    in APIProvider (created by App)
    in ConfigProvider (created by App)
    in ThemeProvider (created by App)
    in SlotFillProvider (created by App)
    in App
r @ backend.js:6
printWarning$1 @ react.js?ver=16.9.0:1750
checkPropTypes @ react.js?ver=16.9.0:1813
validatePropTypes @ react.js?ver=16.9.0:1989
createElementWithValidation @ react.js?ver=16.9.0:2162
DocumentInspector @ documentInspector.js:105
renderWithHooks @ react-dom.js?ver=16.9.0:15246
mountIndeterminateComponent @ react-dom.js?ver=16.9.0:17480
beginWork$1 @ react-dom.js?ver=16.9.0:18624
beginWork$$1 @ react-dom.js?ver=16.9.0:23331
performUnitOfWork @ react-dom.js?ver=16.9.0:22346
workLoopSync @ react-dom.js?ver=16.9.0:22323
renderRoot @ react-dom.js?ver=16.9.0:22016
runRootCallback @ react-dom.js?ver=16.9.0:21692
(anonymous) @ react-dom.js?ver=16.9.0:11491
unstable_runWithPriority @ react.js?ver=16.9.0:2820
runWithPriority$2 @ react-dom.js?ver=16.9.0:11443
flushSyncCallbackQueueImpl @ react-dom.js?ver=16.9.0:11487
flushSyncCallbackQueue @ react-dom.js?ver=16.9.0:11476
discreteUpdates$1 @ react-dom.js?ver=16.9.0:21815
discreteUpdates @ react-dom.js?ver=16.9.0:2357
dispatchDiscreteEvent @ react-dom.js?ver=16.9.0:6104
backend.js:6 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `SelectMenu`. See https://fb.me/react-warning-keys for more information.
    in option (created by SelectMenu)
    in SelectMenu (created by DocumentInspector)
    in form (created by content__Form)
    in content__Form (created by Content)
    in Content (created by SimplePanel)
    in section (created by panel__Wrapper)
    in panel__Wrapper (created by Panel)
    in Panel (created by SimplePanel)
    in SimplePanel (created by DocumentInspector)
    in DocumentInspector (created by Inspector)
    in div (created by inspectorContent__InspectorWrapper)
    in inspectorContent__InspectorWrapper (created by Inspector)
    in Inspector (created by InspectorLayout)
    in div (created by inspectorLayout__InspectorBackground)
    in inspectorLayout__InspectorBackground (created by InspectorLayout)
    in div (created by inspectorLayout__Layout)
    in inspectorLayout__Layout (created by InspectorLayout)
    in InspectorLayout (created by Inspector)
    in InspectorProvider (created by Inspector)
    in Inspector (created by Layout)
    in div (created by layout__Area)
    in layout__Area (created by Layout)
    in div (created by layout__Editor)
    in layout__Editor (created by Layout)
    in Layout (created by App)
    in FontProvider (created by App)
    in StoryProvider (created by App)
    in HistoryProvider (created by App)
    in APIProvider (created by App)
    in ConfigProvider (created by App)
    in ThemeProvider (created by App)
    in SlotFillProvider (created by App)
    in App
r @ backend.js:6
warningWithoutStack @ react.js?ver=16.9.0:260
warning @ react.js?ver=16.9.0:700
validateExplicitKey @ react.js?ver=16.9.0:1916
validateChildKeys @ react.js?ver=16.9.0:1938
createElementWithValidation @ react.js?ver=16.9.0:2155
SelectMenu @ select.js:44
renderWithHooks @ react-dom.js?ver=16.9.0:15246
updateFunctionComponent @ react-dom.js?ver=16.9.0:17063
beginWork$1 @ react-dom.js?ver=16.9.0:18636
beginWork$$1 @ react-dom.js?ver=16.9.0:23331
performUnitOfWork @ react-dom.js?ver=16.9.0:22346
workLoopSync @ react-dom.js?ver=16.9.0:22323
renderRoot @ react-dom.js?ver=16.9.0:22016
runRootCallback @ react-dom.js?ver=16.9.0:21692
(anonymous) @ react-dom.js?ver=16.9.0:11491
unstable_runWithPriority @ react.js?ver=16.9.0:2820
runWithPriority$2 @ react-dom.js?ver=16.9.0:11443
flushSyncCallbackQueueImpl @ react-dom.js?ver=16.9.0:11487
flushSyncCallbackQueue @ react-dom.js?ver=16.9.0:11476
scheduleUpdateOnFiber @ react-dom.js?ver=16.9.0:21569
dispatchAction @ react-dom.js?ver=16.9.0:15954
(anonymous) @ inspectorProvider.js:65
Promise.then (async)
(anonymous) @ inspectorProvider.js:55
(anonymous) @ documentInspector.js:69
commitHookEffectList @ react-dom.js?ver=16.9.0:20124
commitPassiveHookEffects @ react-dom.js?ver=16.9.0:20154
callCallback @ react-dom.js?ver=16.9.0:341
invokeGuardedCallbackDev @ react-dom.js?ver=16.9.0:391
invokeGuardedCallback @ react-dom.js?ver=16.9.0:448
flushPassiveEffectsImpl @ react-dom.js?ver=16.9.0:23006
unstable_runWithPriority @ react.js?ver=16.9.0:2820
runWithPriority$2 @ react-dom.js?ver=16.9.0:11443
flushPassiveEffects @ react-dom.js?ver=16.9.0:22979
(anonymous) @ react-dom.js?ver=16.9.0:22557
scheduler_flushTaskAtPriority_Normal @ react.js?ver=16.9.0:2613
flushTask @ react.js?ver=16.9.0:2659
flushWork @ react.js?ver=16.9.0:2784
performWorkUntilDeadline @ react.js?ver=16.9.0:2408

After inserting a text element

Warning: Failed prop type: The prop `value` is marked as required in `InputGroup`, but its value is `undefined`.
    in InputGroup (created by StylePanel)
    in StylePanel (created by DesignPanels)
    in DesignPanels (created by DesignInspector)
    in div (created by designInspector__TopPanels)
    in designInspector__TopPanels (created by DesignInspector)
    in div (created by designInspector__Wrapper)
    in designInspector__Wrapper (created by DesignInspector)
    in DesignInspector (created by Inspector)
    in div (created by inspectorContent__InspectorWrapper)
    in inspectorContent__InspectorWrapper (created by Inspector)
    in Inspector (created by InspectorLayout)
    in div (created by inspectorLayout__InspectorBackground)
    in inspectorLayout__InspectorBackground (created by InspectorLayout)
    in div (created by inspectorLayout__Layout)
    in inspectorLayout__Layout (created by InspectorLayout)
    in InspectorLayout (created by Inspector)
    in InspectorProvider (created by Inspector)
    in Inspector (created by Layout)
    in div (created by layout__Area)
    in layout__Area (created by Layout)
    in div (created by layout__Editor)
    in layout__Editor (created by Layout)
    in Layout (created by App)
    in FontProvider (created by App)
    in StoryProvider (created by App)
    in HistoryProvider (created by App)
    in APIProvider (created by App)
    in ConfigProvider (created by App)
    in ThemeProvider (created by App)
    in SlotFillProvider (created by App)
    in App

border: 0 solid ${ ( { theme } ) => theme.colors.fg.v2 };
border-top-width: ${ ( { isPrimary } ) => isPrimary ? 0 : '1px' };
color: ${ ( { theme } ) => theme.colors.bg.v2 };
padding: 10px 20px;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of putting the padding here, can we put it on the button here.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This actually follows the W3 guideline on accordions 1-to-1. I have no opinion one way or the other - just followed their lead.

Copy link
Copy Markdown
Contributor

@dvoytenko dvoytenko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LG from me.

@barklund
Copy link
Copy Markdown
Contributor Author

@barklund I get these errors when openning the browser

Those are also in master. @dvoytenko is fixing that in 43f91d5.

After opening the documents inspector.
After inserting a text element

Fixed all of these in 46c4a62.

Copy link
Copy Markdown
Contributor

@spacedmonkey spacedmonkey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@spacedmonkey spacedmonkey merged commit 961d60e into master Jan 29, 2020
@spacedmonkey spacedmonkey deleted the feature/51-panel-refactor branch January 29, 2020 22:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Layer re-ordering

6 participants