Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Refactor bookmarksToolbar.js with Aphrodite #7923

Merged
merged 1 commit into from
Apr 3, 2017
Merged

Refactor bookmarksToolbar.js with Aphrodite #7923

merged 1 commit into from
Apr 3, 2017

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Mar 27, 2017

Test Plan

  1. Automated test should be passing (CXX=g++-4.8 NODE_ENV=test TEST_DIR=bookmark-components)
  2. Bookmark several pages if you have not
  3. Test that creating a bookmark on the bookmarks toolbar works
  4. Test that creating a bookmark folder on the bookmarks toolbar works
  5. Test that moving a bookmark into a folder by drag and drop on the bookmarks folder works
  6. Test that clicking a bookmark in the toolbar loads the bookmark.
  7. Test that clicking a bookmark in a bookmark toolbar folder loads the bookmark.
  8. Change the window size
  9. Make sure the overflow indicator is displayed on the right of the bookmarks toolbar

Description

Closes #7920

bookmarksToolbarTest.js is updated thanks to the help of @NejcZdovc: https://github.com/luixxiul/browser-laptop/commit/abbd11c3715192617e981493943483a3de28e95f#commitcomment-21504404

  • Submitted a ticket for my issue if one did not already exist.
  • Used Github auto-closing keywords in the commit message.
  • Added/updated tests for this change (for new code or code which already has tests).
  • Ran git rebase -i to squash commits (if needed).

? <span className={css(
styles.bookmarkToolbarButton__bookmarkFavicon,
styles.bookmarkToolbarButton__bookmarkFolder
) + ' fa fa-folder-o'}
Copy link
Contributor

Choose a reason for hiding this comment

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

Use cx here

@@ -221,7 +241,7 @@ class BookmarkToolbarButton extends ImmutableComponent {
</span>
{
this.isFolder
? <span className='bookmarkFolderChevron fa fa-chevron-down' />
? <span className={css(styles.bookmarkToolbarButton__bookmarkFolderChevron) + ' fa fa-chevron-down'} data-test-id='bookmarkFolderChevron' />
Copy link
Contributor

Choose a reason for hiding this comment

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

Use cx here

styles.bookmarksToolbar,
this.props.shouldAllowWindowDrag && styles.bookmarksToolbar__allowDragging,
styles.bookmarksToolbar__showOnlyFavicon
) + ' showFavicon showOnlyFavicon'}
Copy link
Contributor

Choose a reason for hiding this comment

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

Use cx here

className={css(
styles.bookmarksToolbar__bookmarkButton,
styles.bookmarksToolbar__overflowIndicator
) + ' bookmarkButton'} />
Copy link
Contributor

Choose a reason for hiding this comment

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

Use cx here

WebkitUserSelect: 'none',

':hover': {
background: 'white',
Copy link
Contributor

Choose a reason for hiding this comment

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

please use HEX code for the color

@luixxiul
Copy link
Contributor Author

@NejcZdovc I updated.

) + ' ' + cx({
fa: true,
'fa-folder-o': true
})}
Copy link
Contributor

@NejcZdovc NejcZdovc Mar 28, 2017

Choose a reason for hiding this comment

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

I was thinking more something like this:

<span className={cx({
  fa: true,
  'fa-folder-o': true,
  [css(styles.bookmarkToolbarButton__bookmarkFavicon)]: true,
  [css(styles.bookmarkToolbarButton__bookmarkFolder)]: true
})}

This way you don't need + ' ' + and it's more readable in my opinion

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I like that. I will update later.

Closes #7920

bookmarksToolbarTest.js is updated thanks to the help of @NejcZdovc: https://github.com/luixxiul/browser-laptop/commit/abbd11c3715192617e981493943483a3de28e95f#commitcomment-21504404

Also: #7923 (comment)

Auditor:

Test Plan:
1. Automated test should be passing (CXX=g++-4.8 NODE_ENV=test TEST_DIR=bookmark-components)
2. Bookmark several pages if you have not
3. Test that creating a bookmark on the bookmarks toolbar works
4. Test that creating a bookmark folder on the bookmarks toolbar works
5. Test that moving a bookmark into a folder by drag and drop on the bookmarks folder works
6. Test that clicking a bookmark in the toolbar loads the bookmark.
7. Test that clicking a bookmark in a bookmark toolbar folder loads the bookmark.
8. Change the window size
9. Make sure the overflow indicator is displayed on the right of the bookmarks toolbar
Copy link
Member

@bsclifton bsclifton left a comment

Choose a reason for hiding this comment

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

Manually tested- looks good. Automated tests had varying results. Locally, the only one perma-failing was the PDF test. On travis-ci, it's passing just fine though.

@bsclifton bsclifton merged commit 9bc4c7e into brave:master Apr 3, 2017
@luixxiul luixxiul deleted the bookmarksToolbar-aphrodite branch April 4, 2017 04:15
@luixxiul luixxiul removed the request for review from cezaraugusto April 24, 2017 02:45
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants