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.

Sign up for GitHub

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 new tab button #55

Open
wants to merge 12 commits into
base: gh-pages
Choose a base branch
from
Open

Add new tab button #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
59ee8ab
Add New Tab Button
VictorAlagwu Oct 6, 2019
f3647b4
Add New Tab Button
VictorAlagwu Oct 7, 2019
2391d97
Add new tab button.
power-f-GOD Oct 7, 2019
1b8e31e
Make new tab button flow with tabs.
power-f-GOD Oct 7, 2019
aa33b30
Fix tab content overflow by preventing adding excess tabs.
power-f-GOD Oct 8, 2019
61e7dd6
Fix tabs content overflow--prevent adding excess tabs.
power-f-GOD Oct 8, 2019
cba0f08
Remove excess (opened) tabs restriction; fix overflow bug.
power-f-GOD Oct 8, 2019
2e0e66f
Remove excess (opened) tabs restriction; fix overflow bug.
power-f-GOD Oct 8, 2019
33eba30
Add shadow to new tab button on tab content overflow.
power-f-GOD Oct 8, 2019
7590ce3
Delete draggabilly.js; Remove subtle column in .styl file; make sligh…
power-f-GOD Oct 12, 2019
476d233
Delete draggabilly.js; Delete semi-colons and make slight change in c…
power-f-GOD Oct 12, 2019
7a517d2
Revert code linting.
power-f-GOD Oct 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions css/chrome-tabs-dark-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
.chrome-tabs.chrome-tabs-dark-theme {
background: #202124;
}
.chrome-tabs.chrome-tabs-dark-theme .new-tab-button-wrapper.overflow-shadow {
box-shadow: -5px 1px 5px rgba(22,23,26,0.5), 20px 0 0 #202124;
padding-left: 4px;
}
.chrome-tabs.chrome-tabs-dark-theme .new-tab-button-wrapper .new-tab-button {
color: rgba(200,200,200,0.5);
}
.chrome-tabs.chrome-tabs-dark-theme .new-tab-button-wrapper .new-tab-button:hover {
background: rgba(154,160,166,0.25);
}
.chrome-tabs.chrome-tabs-dark-theme .chrome-tab .chrome-tab-dividers::before,
.chrome-tabs.chrome-tabs-dark-theme .chrome-tab .chrome-tab-dividers::after {
background: #4a4d51;
Expand Down
11 changes: 11 additions & 0 deletions css/chrome-tabs-dark-theme.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,17 @@ activeTabBackgroundColor = #323639
.chrome-tabs.chrome-tabs-dark-theme
background #202124

.new-tab-button-wrapper
&.overflow-shadow
box-shadow -5px 1px 5px rgba(22, 23, 26,0.5), 20px 0 0 rgb(32, 33, 36)
padding-left 4px

.new-tab-button
color rgba(200, 200, 200, .5)

&:hover
background rgba(154, 160, 166, .25)

.chrome-tab

.chrome-tab-dividers
Expand Down
40 changes: 39 additions & 1 deletion css/chrome-tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,53 @@
background: #dee1e6;
border-radius: 5px 5px 0 0;
overflow: hidden;
display: flex;
}
.chrome-tabs * {
box-sizing: inherit;
font: inherit;
}
.chrome-tabs .new-tab-button-wrapper {
display: inline-flex;
align-items: center;
background: inherit;
pointer-events: auto;
height: 100%;
width: 80px;
position: relative;
z-index: 5;
border-radius: 17px;
pointer-events: auto;
transition: padding 0.35s;
}
.chrome-tabs .new-tab-button-wrapper.overflow-shadow {
box-shadow: -5px 1px 5px #ccc, 20px 0 0 #dee1e6;
padding-left: 4px;
}
.chrome-tabs .new-tab-button-wrapper .new-tab-button {
height: 28px;
width: 28px;
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;
}
.chrome-tabs .new-tab-button-wrapper .new-tab-button:hover {
background: rgba(150,150,150,0.25);
}
.chrome-tabs .chrome-tabs-content {
position: relative;
width: 100%;
width: auto;
height: 100%;
transition: width 0.1s;
margin-right: 5px;
}
.chrome-tabs .chrome-tab {
position: absolute;
Expand Down
40 changes: 39 additions & 1 deletion css/chrome-tabs.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,53 @@ activeTabBackgroundColor = #fff
background #dee1e6
border-radius 5px 5px 0 0
overflow hidden
display flex

*
box-sizing inherit
font inherit

.new-tab-button-wrapper
display inline-flex
align-items center
background inherit
pointer-events auto
height 100%
width 80px
position relative
z-index 5
border-radius 17px
pointer-events auto
transition padding .35s

&.overflow-shadow
box-shadow -5px 1px 5px #ccc, 20px 0 0 #dee1e6
padding-left 4px

.new-tab-button
height 28px
width 28px
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 .35s
cursor default

&:hover
background rgba(150, 150, 150, .25)

.chrome-tabs-content
position relative
width 100%
width auto
height 100%
transition width .05s
margin-right 5px

.chrome-tab
position absolute
Expand Down
31 changes: 28 additions & 3 deletions js/chrome-tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,19 @@
window.ChromeTabs = factory(window, window.Draggabilly)
}
})(window, (window, Draggabilly) => {
const TAB_CONTENT_MARGIN = 9
const TAB_CONTENT_MARGIN = 10
Copy link
Owner

Choose a reason for hiding this comment

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

Why the change from 9 to 10 here?

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
Copy link
Owner

Choose a reason for hiding this comment

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

Why the change in formatting 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
Copy link
Owner

Choose a reason for hiding this comment

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

NEW_TAB_BUTTON_AREA → NEW_TAB_BUTTON_WIDTH ?


const noop = _ => {}

Expand Down Expand Up @@ -50,6 +52,12 @@
</div>
`

const newTabButtonTemplate = `
<div class="new-tab-button-wrapper">
<button class="new-tab-button">✚</button>
Copy link
Owner

Choose a reason for hiding this comment

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

Need an <svg/> icon here to render this consistently across devices.

</div>
`

const defaultTapProperties = {
title: 'New tab',
favicon: false
Expand All @@ -73,6 +81,7 @@
this.setupStyleEl()
this.setupEvents()
this.layoutTabs()
this.setupNewTabButton()
this.setupDraggabilly()
}

Expand All @@ -99,6 +108,11 @@
if ([this.el, this.tabContentEl].includes(event.target)) this.addTab()
})

this.el.addEventListener("click", ({ target }) => {
if (target.classList.contains("new-tab-button"))
this.addTab()
})

this.tabEls.forEach((tabEl) => this.setTabCloseEventListener(tabEl))
}

Expand All @@ -112,7 +126,7 @@

get tabContentWidths() {
const numberOfTabs = this.tabEls.length
const tabsContentWidth = this.tabContentEl.clientWidth
const tabsContentWidth = this.el.clientWidth - NEW_TAB_BUTTON_AREA
const tabsCumulativeOverlappedWidth = (numberOfTabs - 1) * TAB_CONTENT_OVERLAP_DISTANCE
const targetWidth = (tabsContentWidth - (2 * TAB_CONTENT_MARGIN) + tabsCumulativeOverlappedWidth) / numberOfTabs
const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth))
Expand Down Expand Up @@ -158,6 +172,7 @@

layoutTabs() {
const tabContentWidths = this.tabContentWidths
let tabsLen = this.tabEls.length

this.tabEls.forEach((tabEl, i) => {
const contentWidth = tabContentWidths[i]
Expand All @@ -182,6 +197,11 @@
`
})
this.styleEl.innerHTML = styleHTML

if (this.el.offsetWidth - this.tabContentEl.offsetWidth > NEW_TAB_BUTTON_AREA + (TAB_CONTENT_MARGIN / 2) || tabsLen < 5) {
this.tabContentEl.style.width = `${ (this.tabEls[0] ? this.tabEls[0].offsetWidth * tabsLen : 0) - (tabsLen > 0 ? ((tabsLen * TAB_CONTENT_MARGIN * 2) - TAB_CONTENT_MIN_WIDTH + TAB_CONTENT_MARGIN) : 0) }px`
this.tabContentEl.nextElementSibling.classList.remove('overflow-shadow')
} else this.tabContentEl.nextElementSibling.classList.add('overflow-shadow')
}

createNewTabEl() {
Expand Down Expand Up @@ -355,6 +375,11 @@
this.emit('tabReorder', { tabEl, originIndex, destinationIndex })
this.layoutTabs()
}

setupNewTabButton() {
this.tabContentEl.insertAdjacentHTML('afterend', newTabButtonTemplate)
this.layoutTabs()
}
}

return ChromeTabs
Expand Down
43 changes: 43 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.