Skip to content

Make block holder and toolbar look nicer#286

Merged
pinarol merged 14 commits intomasterfrom
feature/better-block-icons
Nov 30, 2018
Merged

Make block holder and toolbar look nicer#286
pinarol merged 14 commits intomasterfrom
feature/better-block-icons

Conversation

@koke
Copy link
Copy Markdown
Member

@koke koke commented Nov 28, 2018

Note: This needs WordPress/gutenberg#12403 to be merged first

Some changes to make the block holder look better:

  • Uses dashicons instead of Emoji
  • Update layout so buttons have the expected size (44x44)
  • Remove unused settings button
  • Push the delete button to the right
  • Disable up/down when you can't move a block (it's the first or last)
  • Added borders to the block holder when focused
  • A bit of a refactor and better folder structure for InlineToolbar

@iamthomasbishop I know your mockups use Gridicons, but we still don't have those available, and dashicons are already quite an improvement over emoji 😉. Also, I used $light-gray-500 for the block borders, but I'm not sure if it's the right one, I think your mockups looked more blue than this

inline-toolbar

koke added 3 commits November 28, 2018 13:14
This replaces the icons with dashicons, tweaks the layout to be closer to the
designs, and removes the unused settings button.
@koke koke added this to the Alpha milestone Nov 28, 2018
@koke koke requested a review from marecar3 November 28, 2018 13:17
@marecar3
Copy link
Copy Markdown
Contributor

Adding @iamthomasbishop.

@koke
Copy link
Copy Markdown
Member Author

koke commented Nov 28, 2018

After talking to Thomas, I still have to:

  • Add the palette we're using in the apps to the project
  • Switch the color of the inactive arrows and borders to grey-lighten-30
  • Switch the color of the active buttons to #7b9ab1

This imports a color palette taken from calypso instead of the Gutenberg one
@koke
Copy link
Copy Markdown
Member Author

koke commented Nov 28, 2018

This needs WordPress/gutenberg#12403 to be merged first

@koke
Copy link
Copy Markdown
Member Author

koke commented Nov 28, 2018

Ready for another look:

screen shot 2018-11-28 at 23 25 58

Copy link
Copy Markdown
Contributor

@marecar3 marecar3 left a comment

Choose a reason for hiding this comment

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

Approved :)


import styles from './style.scss';

export default class InlineToolbarButton extends React.Component<PropsType> {
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.

Hey @koke, did you maybe consider using ToolbarButton e.g.<ToolbarButton label={ __( 'Undo' ) } icon="undo" isDisabled={ ! hasUndo } onClick={ undo } /> ?
As it's the same as what you have created here?

@pinarol pinarol merged commit 31d9aa8 into master Nov 30, 2018
@pinarol pinarol deleted the feature/better-block-icons branch November 30, 2018 13:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants