New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show linkages between widget controls and widgets in preview #5

Merged
merged 17 commits into from Sep 23, 2013

Conversation

Projects
None yet
2 participants
@westonruter
Contributor

westonruter commented Sep 22, 2013

When beginning to edit a widget or when hitting Update, the preview window should scroll the widget into view, or make sure it is in view. Likewise, when hovering over a widget control, the widget in the preview window should highlight with a red outline, and likewise when clicking on a widget in the preview, the corresponding widget control should expand in the customizer panel.

This issue resolves a major usability problem illustrated by the user test video via @shaunandrews. Clicking a widget in the preview will now will open up the widget form control in the customizer panel.

  1. Hovering over widget for collapsed customizer section
  2. Hovering over widget highlights control
  3. Tooltip appears when hovering over widget in preview; click and section and form expand, with first element focused
  4. Hovering over control highlights widget in preview
@rfvcorreia

This comment has been minimized.

Show comment
Hide comment
@rfvcorreia

rfvcorreia Sep 16, 2013

Contributor

I'm working on solving this issue.

Contributor

rfvcorreia commented Sep 16, 2013

I'm working on solving this issue.

rfvcorreia added some commits Sep 16, 2013

Add box to widget control, when a widget preview is click.
Adds effects to editing widgets, border effect on control hover, and scrolls to widget on input click.

rfvcorreia and others added some commits Sep 17, 2013

Merge remote-tracking branch 'upstream/master'
Conflicts:
	widget-customizer.css
	widget-customizer.js
Merge branch 'master' of https://github.com/rfvcorreia/wp-widget-cust…
…omizer

Conflicts:
	widget-customizer-preview.js
	widget-customizer.js
Use registered sidebars to inform widget selectors
Eliminate overloaded and abused wp_localized_script so we can export non-string data (registered sidebar objects)
Export widget_id to JS to cleanly find element
Use new getControlInstanceForWidget API to find control instance for given widget rendered in sidebar
@westonruter

This comment has been minimized.

Show comment
Hide comment
@westonruter

westonruter Sep 22, 2013

Contributor

@rfvcorreia added a bunch of commits, worked out an API (getControlInstanceForWidget) to help a widget in the preview obtain its corresponding widget form control in the customizer panel.

Contributor

westonruter commented Sep 22, 2013

@rfvcorreia added a bunch of commits, worked out an API (getControlInstanceForWidget) to help a widget in the preview obtain its corresponding widget form control in the customizer panel.

westonruter added a commit that referenced this pull request Sep 23, 2013

Merge pull request #5 from x-team/issue-5-highlight-widgets
Highlight and scroll widget into view in preview window

@westonruter westonruter merged commit d4a0d93 into develop Sep 23, 2013

@westonruter

This comment has been minimized.

Show comment
Hide comment
@westonruter

westonruter Sep 23, 2013

Contributor

Note that this issue resolves a major usability problem illustrated by the user test video via @shaunandrews. Clicking a widget in the preview will now will open up the widget form control in the customizer panel.

Contributor

westonruter commented Sep 23, 2013

Note that this issue resolves a major usability problem illustrated by the user test video via @shaunandrews. Clicking a widget in the preview will now will open up the widget form control in the customizer panel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment