Add new tab button #55
Conversation
There was a problem hiding this comment.
Hey there @power-f-GOD. Thanks so much for submitting this PR. Support for a new tab button is definitely something this project is sorely lacking. I haven’t had a chance to review your PR fully. But there are a few (mostly stylistic) things I that jumped out at me right away that I’d want to take care of before diving deeper. Thanks
.gitignore
Outdated
| @@ -1,3 +1,4 @@ | |||
| .DS_Store | |||
| bower_components/ | |||
| node_modules/ | |||
| .jshintrc | |||
css/chrome-tabs.styl
Outdated
| .new-tab-button-wrapper | ||
| display: inline-flex | ||
| align-items: center | ||
| justify-content: center | ||
| margin-left: 0 | ||
|
|
||
| .new-tab-button | ||
| height: 30px | ||
| width: 30px | ||
| line-height: 0 | ||
| border-radius: 50% | ||
| font-weight: 100 | ||
| font-size: 16px | ||
| padding: 0 | ||
| border: none | ||
| background: none | ||
| color: #555 | ||
| box-shadow: none | ||
| transition: background 0.35s | ||
| cursor default | ||
|
|
||
| &:hover | ||
| background: rgba(150, 150, 150, 0.25) |
index.html
Outdated
| <!-- <script src="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.js"></script> --> | ||
| <script src="js/draggabilly.min.js"></script> |
There was a problem hiding this comment.
While it may make sense to bring in Draggabilly directly as you have done here, if we decided to do so I’d want to separate that out from this PR so it’s only concern is the new tab button (and I’d also want to remove the commented line).
|
Hi, Adam. Thanks for your response. I have made the changes you requested. Kindly review. Thanks. |
…t change in chrome-tabs.js
…hrome-tabs.js; Remove subtle column in .styl file.
|
Hey @power-f-GOD. Thanks again for working on this. Another issue I’m seeing is that |
|
Hi, Adams. I've made the change you requested. Kindly review. Thanks. |
|
Hiyi. |
|
Any update about this feature? It's really a necessary function, people including me are waiting for this for months. |
|
Oh. This PR is still open (three years later). 🥲 |
| const TAB_CONTENT_OVERLAP_DISTANCE = 1 | ||
|
|
||
| const TAB_OVERLAP_DISTANCE = (TAB_CONTENT_MARGIN * 2) + TAB_CONTENT_OVERLAP_DISTANCE | ||
| const TAB_OVERLAP_DISTANCE = | ||
| TAB_CONTENT_MARGIN * 2 + TAB_CONTENT_OVERLAP_DISTANCE |
There was a problem hiding this comment.
Why the change in formatting here?
| @@ -7,17 +7,19 @@ | |||
| window.ChromeTabs = factory(window, window.Draggabilly) | |||
| } | |||
| })(window, (window, Draggabilly) => { | |||
| const TAB_CONTENT_MARGIN = 9 | |||
| const TAB_CONTENT_MARGIN = 10 | |||
There was a problem hiding this comment.
Why the change from 9 to 10 here?
|
|
||
| const TAB_CONTENT_MIN_WIDTH = 24 | ||
| const TAB_CONTENT_MAX_WIDTH = 240 | ||
|
|
||
| const TAB_SIZE_SMALL = 84 | ||
| const TAB_SIZE_SMALLER = 60 | ||
| const TAB_SIZE_MINI = 48 | ||
| const NEW_TAB_BUTTON_AREA = 90 |
There was a problem hiding this comment.
NEW_TAB_BUTTON_AREA → NEW_TAB_BUTTON_WIDTH ?
| @@ -50,6 +52,12 @@ | |||
| </div> | |||
| ` | |||
|
|
|||
| const newTabButtonTemplate = ` | |||
| <div class="new-tab-button-wrapper"> | |||
| <button class="new-tab-button">✚</button> | |||
There was a problem hiding this comment.
Need an <svg/> icon here to render this consistently across devices.
Hi, Adam. Kindly review and accept my pull request if you will. Thanks.