Eugeny/tabby
1
1
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2024-09-11 13:13:59 +03:00
Code Issues Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
Eugene Pankov 2017-01-13 16:36:25 +03:00
parent 2acc4f77d4
commit 15f9a0cb1a
2 changed files with 86 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
app/src/components/app.less
View File

@ -15,7 +15,7 @@
@titlebar-height: 35px;
@tabs-height: 40px;
@tab-border-radius: 3px;
@tab-border-radius: 4px;
.button-states() {
transition: 0.125s all;
@ -61,7 +61,7 @@
.tabs {
flex: none;
height: @tabs-height;
background: #141c23;
background: @body-bg;
display: flex;
flex-direction: row;
@ -81,6 +81,7 @@
text-transform: uppercase;
font-weight: bold;
color: #888;
background: #141c23;
i {
margin-right: 10px;
@ -94,78 +95,94 @@
flex-basis: 0;
flex-grow: 1000;
background: @body-bg;
display: flex;
flex-direction: row;
overflow: hidden;
min-width: 0;
&.pre-selected, &:nth-last-child(2) {
border-top-right-radius: @tab-border-radius;
}
&.post-selected {
border-top-left-radius: @tab-border-radius;
}
div.index {
flex: none;
padding: 0 0 0 15px;
font-weight: bold;
color: #444;
}
div.name {
flex: auto;
margin: 0 15px 0 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
border-bottom: 2px solid transparent;
transition: 0.25s all;
background: @body-bg;
.button-states();
.content-wrapper {
display: flex;
flex-direction: row;
flex: auto;
min-width: 0;
background: #141c23;
div.index {
flex: none;
padding: 0 0 0 15px;
font-weight: bold;
color: #444;
}
div.name {
flex: auto;
margin: 0 1px 0 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
button {
flex: none;
border: none;
background: transparent;
opacity: 0;
transition: 0.25s all;
@button-size: @tabs-height * 0.6;
width: @button-size;
height: @button-size;
border-radius: @button-size / 2;
line-height: @button-size * 0.8;
margin-top: (@tabs-height - @button-size) * 0.4;
margin-right: 10px;
display: block;
text-align: center;
font-size: 20px;
&:hover {
background: rgba(255, 255, 255, .05);
}
&:active {
background: rgba(0, 0, 0, .1);
}
}
&:hover button {
opacity: 1;
}
}
//border-bottom: 2px solid transparent;
transition: 0.25s all;
&.pre-selected, &:nth-last-child(2) {
.content-wrapper {
border-bottom-right-radius: @tab-border-radius;
}
}
&.post-selected {
.content-wrapper {
border-bottom-left-radius: @tab-border-radius;
}
}
&.active {
background: #141c23;
border-bottom: 2px solid #69bbea;
}
button {
flex: none;
border: none;
background: transparent;
opacity: 0;
transition: 0.25s all;
@button-size: @tabs-height * 0.6;
width: @button-size;
height: @button-size;
border-radius: @button-size / 2;
line-height: @button-size * 0.8;
margin-top: (@tabs-height - @button-size) * 0.4;
margin-right: 10px;
display: block;
text-align: center;
font-size: 20px;
&:hover {
background: rgba(255, 255, 255, .05);
.content-wrapper {
//border-bottom: 2px solid #69bbea;
background: @body-bg;
border-top-left-radius: @tab-border-radius;
border-top-right-radius: @tab-border-radius;
}
&:active {
background: rgba(0, 0, 0, .1);
}
}
&:hover button {
opacity: 1;
}
}
}

9
app/src/components/app.pug
View File

@ -16,9 +16,10 @@
[class.post-selected]='tabs[idx - 1] == activeTab',
@animateTab,
)
div.index {{idx + 1}}
div.name {{tab.name || 'Terminal'}}
button((click)='closeTab(tab)') ×
.content-wrapper
div.index {{idx + 1}}
div.name {{tab.name || 'Terminal'}}
button((click)='closeTab(tab)') ×
.btn-new-tab((click)='newTab()')
i.fa.fa-plus
span Tab
@ -30,7 +31,7 @@
terminal([session]='tab.session', '[(title)]'='tab.name')
hotkey-hint
toaster-container([toasterconfig]="toasterconfig")
template(ngbModalContainer)