Mirrors/tabby
2
0
Fork 0
mirror of https://github.com/Eugeny/tabby synced 2024-11-15 09:27:24 +00:00
Code Issues Projects Releases Packages Wiki Activity

new tab color and activity indicators

Browse source
This commit is contained in:
Eugene Pankov 2021-04-05 12:47:16 +02:00
parent 0ff81abb0c
commit e99908761d
No known key found for this signature in database
GPG key ID: 5896FCBBDD1CF4F4
6 changed files with 38 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
terminus-core/src/components/appRoot.component.pug
View file

@ -25,7 +25,6 @@ title-bar(
[index]='idx',
[tab]='tab',
[active]='tab == app.activeTab',
[hasActivity]='tab.activity$|async',
@animateTab,
[@.disabled]='hasVerticalTabs()',
(click)='app.selectTab(tab)',

8
terminus-core/src/components/tabHeader.component.pug
View file

@ -1,8 +1,8 @@
.colorbar([style.background-color]='tab.color', *ngIf='tab.color != null')
.progressbar([style.width]='progress + "%"', *ngIf='progress != null')
.index(*ngIf='!config.store.terminal.hideTabIndex',
#handle,
[style.background-color]='tab.color',
) {{index + 1}}
.activity-indicator(*ngIf='tab.activity$|async')
.index(*ngIf='!config.store.terminal.hideTabIndex', #handle) {{index + 1}}
.name(
[title]='tab.customTitle || tab.title',
[class.no-hover]='config.store.terminal.hideCloseButton'

28
terminus-core/src/components/tabHeader.component.scss
View file

@ -4,6 +4,8 @@ $tabs-height: 38px;
position: relative;
cursor: pointer;
> * { cursor: pointer; }
flex: 1000 1 200px;
width: 200px;
padding: 0 10px;
@ -101,8 +103,30 @@ $tabs-height: 38px;
position: absolute;
left: 0;
top: 0;
height: 5px;
z-index: -1;
height: 3px;
z-index: 1;
transition: 0.25s width;
}
.colorbar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
z-index: 1;
}
&.active .activity-indicator {
display: none;
}
.activity-indicator {
position: absolute;
left: 10px;
right: 10px;
bottom: 4px;
height: 2px;
z-index: -1;
}
}

1
terminus-core/src/components/tabHeader.component.ts
View file

@ -26,7 +26,6 @@ export interface SortableComponentProxy {
export class TabHeaderComponent {
@Input() index: number
@Input() @HostBinding('class.active') active: boolean
@Input() @HostBinding('class.has-activity') hasActivity: boolean
@Input() tab: BaseTabComponent
@Input() progress: number|null
@ViewChild('handle') handle?: ElementRef

12
terminus-core/src/theme.paper.scss
View file

@ -169,6 +169,10 @@ app-root {
background: $blue;
}
.activity-indicator {
background:rgba(0, 0, 0, 0.2);
}
&.active {
color: $black;
background: $content-bg;
@ -190,10 +194,6 @@ app-root {
&.active {
border-bottom-color: transparent;
}
&.has-activity:not(.active) {
background: linear-gradient(to bottom, rgba(208, 0, 0, 0) 95%, #36beff 96%);
}
}
}
@ -208,10 +208,6 @@ app-root {
&.active {
margin-top: -1px;
}
&.has-activity:not(.active) {
background: linear-gradient(to top, rgba(208, 0, 0, 0) 95%, #36beff 96%);
}
}
}
}

12
terminus-core/src/theme.scss
View file

@ -76,6 +76,10 @@ app-root {
background: $green;
}
.activity-indicator {
background:rgba(255, 255, 255, 0.2);
}
&.active {
color: white;
background: $content-bg;
@ -97,10 +101,6 @@ app-root {
&.active {
border-bottom-color: transparent;
}
&.has-activity:not(.active) {
background: linear-gradient(to bottom, rgba(208, 0, 0, 0) 95%, #1aa99c 100%);
}
}
}
@ -115,10 +115,6 @@ app-root {
&.active {
margin-top: -1px;
}
&.has-activity:not(.active) {
background: linear-gradient(to top, rgba(208, 0, 0, 0) 95%, #1aa99c 100%);
}
}
}
}