GuanM/tabby
1
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-06-08 13:30:02 +00:00
Code Issues Packages 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; @titlebar-height: 35px;
@tabs-height: 40px; @tabs-height: 40px;
@tab-border-radius: 3px; @tab-border-radius: 4px;
.button-states() { .button-states() {
transition: 0.125s all; transition: 0.125s all;
@ -61,7 +61,7 @@
.tabs { .tabs {
flex: none; flex: none;
height: @tabs-height; height: @tabs-height;
background: #141c23; background: @body-bg;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -81,6 +81,7 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
color: #888; color: #888;
background: #141c23;
i { i {
margin-right: 10px; margin-right: 10px;
@ -94,78 +95,94 @@
flex-basis: 0; flex-basis: 0;
flex-grow: 1000; flex-grow: 1000;
background: @body-bg;
display: flex; display: flex;
flex-direction: row;
overflow: hidden; overflow: hidden;
min-width: 0; min-width: 0;
background: @body-bg;
&.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;
.button-states(); .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 { &.active {
background: #141c23; background: #141c23;
border-bottom: 2px solid #69bbea;
}
button { .content-wrapper {
flex: none; //border-bottom: 2px solid #69bbea;
background: @body-bg;
border: none; border-top-left-radius: @tab-border-radius;
background: transparent; border-top-right-radius: @tab-border-radius;
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;
} }
} }
} }

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

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