Skip to content
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

Add/tiny single react ui as a squashed commit based on PR #275 and #285 #294

Merged
merged 19 commits into from
Mar 29, 2017

Conversation

intronic
Copy link
Contributor

@intronic intronic commented Mar 18, 2017

We decided to move the code from #275 and #285 directly to the new master. Original description below.


Hi all, we have a prototype going for #229.

What is in the demo:

What works
Block Menu

  • clicking in a block will highlight the outer border of the block, and bring up a block-change menu icon at the top right.
  • clicking in different blocks brings up the menu for that block
  • hover over different blocks highlights that block with a vertical bar, but doesnt change the focus
  • hover over the block-change icon and the block-align menu will show
  • click the block-change icon and a drop-down of different block types will be shown
  • the block-menu icon changes depending on the type of block (currently only P/H/Blockquote - not IMG, etc)

Inline style Menu

  • the inline menu shows up only when a range is selected and it appears above the selected text (similar to medium)
  • the inline menu button states show the state of the highlighted text (eg, bold)
  • using the keyboard to toggle the highlight text bold or italic will also toggle the button states

Key difference in the code

  • UI actions, UI state transitions, and UI rendering, and styling are all decoupled so changing the UI is simpler
  • Most of the issues in Prototypes: Requirements #190 will be addressed once all the editor actions are linked up, as contenteditable is controlled by a single instance of TinyMCE

What is not completed yet

  • linking the button click handlers to the tiny commands (eg, none of the buttons are functional)
  • positioning the block highlight after scrolling the page
  • the original spec called for the inline menu to be black with white text to distinguish it from the block-menu, but it currently is still white background and black text
  • lots of other stuff

Cheers,

Mike, Maurizio & Anna

@intronic intronic added Design [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible labels Mar 18, 2017
@mimo84 mimo84 mentioned this pull request Mar 18, 2017
@jasmussen
Copy link
Contributor

I added the built files, and going to merge this in!

@jasmussen jasmussen merged commit ee44f22 into master Mar 29, 2017
@jasmussen jasmussen deleted the add/tiny-single-react-ui branch March 29, 2017 08:37
@androb androb added this to Done in Ephox Team Apr 19, 2017
@anna-harrison anna-harrison moved this from Done to Logged in JIRA in Ephox Team Aug 28, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
No open projects
Ephox Team
Logged in JIRA
Development

Successfully merging this pull request may close these issues.

None yet

3 participants