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 4 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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.DS_Store
bower_components/
node_modules/
.jshintrc
Copy link
Owner

Choose a reason for hiding this comment

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

Please remove this line.

6 changes: 6 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,12 @@
.chrome-tabs.chrome-tabs-dark-theme {
background: #202124;
}
.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
9 changes: 8 additions & 1 deletion css/chrome-tabs-dark-theme.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,15 @@ activeTabBackgroundColor = #323639
.chrome-tabs.chrome-tabs-dark-theme
background #202124

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

&:hover
background: rgba(154, 160, 166, 0.25)
power-f-GOD marked this conversation as resolved.
Show resolved Hide resolved

.chrome-tab

.chrome-tab-dividers

&::before, &::after
Expand Down
26 changes: 26 additions & 0 deletions css/chrome-tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,41 @@
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;
justify-content: center;
margin-left: 0;
}
.chrome-tabs .new-tab-button-wrapper .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;
}
.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%;
height: 100%;
transition: width 0.1s;
}
.chrome-tabs .chrome-tab {
position: absolute;
Expand Down
26 changes: 26 additions & 0 deletions css/chrome-tabs.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,41 @@ 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
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)
Copy link
Owner

Choose a reason for hiding this comment

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

Remove the colons.


.chrome-tabs-content
position relative
width 100%
height 100%
transition: width 0.1s

.chrome-tab
position absolute
Expand Down
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,8 @@
</div>
</div>

<script src="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.js"></script>
<!-- <script src="https://unpkg.com/draggabilly@2.2.0/dist/draggabilly.pkgd.min.js"></script> -->
<script src="js/draggabilly.min.js"></script>
Copy link
Owner

Choose a reason for hiding this comment

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

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).

<script src="js/chrome-tabs.js"></script>
<script>
var el = document.querySelector('.chrome-tabs')
Expand Down
Loading