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

Jump to bottom

Fix for file tab display issues in Chrome #60

Merged
merged 4 commits into from Jun 20, 2019
Merged

Fix for file tab display issues in Chrome #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca67479
File names are now wrapped within a span to manage overflow. Close b…
Jun 19, 2019
149ce53
Added width attribute gz-editor class to prevent tabs-file-list from …
Jun 19, 2019
a70e1f9
Fixed issue where tabs would create styling issues for editor body
Jun 20, 2019
595528e
ngx-perfect-scrollbar for file tabs now pertains a seperate configura…
Jun 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions webClient/src/app/editor/code-editor/file-tabs/file-tabs.component.html
View file
Open in desktop
Expand Up @@ -8,11 +8,11 @@

Copyright Contributors to the Zowe Project.
-->
<perfect-scrollbar [config]="scrollConfig" [disabled]="false">
<perfect-scrollbar [config]="fileTabsScrollConfig" [disabled]="false">
<div class="tabs-container">
<ul class="tabs-file-list">
<li mClick class="tabs-file" [fileContext]="item" [ngClass]="{'active':item.active}" *ngFor="let item of data" (click)="clickHandler($event, item)">
{{item.name}}
<span class="filename">{{item.name}}</span>
<mat-icon class="close-file" (click)="remove.next(item)">clear</mat-icon>
<mat-icon *ngIf="item.changed" class="changed-file">fiber_manual_record</mat-icon>
</li>
Expand Down
20 changes: 16 additions & 4 deletions webClient/src/app/editor/code-editor/file-tabs/file-tabs.component.scss
View file
Open in desktop
Expand Up @@ -11,30 +11,42 @@
:host {
display: block;
margin-top: -32px;
height: 32px;
max-height: 32px;
.tabs-container {
height: 32px;
width: 100%;
max-height: 32px;
background-color: #303030;
.tabs-file-list {
list-style-type: none;
display: flex;
justify-content: start;
justify-content: flex-start;
margin-bottom: 0;
height: 100%;
.tabs-file {
display: inline-block;
flex-shrink: 0;
flex-basis: 150px;
line-height: 22px;
max-height: 32px;
padding: 5px 10px;
color: #e0e0e0;
border-right: 1px solid #212121;
white-space: nowrap;
text-align: left;
cursor: pointer;
.filename{
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
float: left;
}
&.active {
border-bottom: 3px solid #3f51b5;
}
.changed-file {
text-align: center;
line-height: 24px;
line-height: 32px;
font-size: 12px;
float: right;
width: 12px;
Expand All @@ -43,7 +55,7 @@
}
.close-file {
text-align: right;
line-height: 24px;
line-height: 22px;
font-size: 16px;
float: right;
}
Expand Down
7 changes: 7 additions & 0 deletions webClient/src/app/editor/code-editor/file-tabs/file-tabs.component.ts
View file
Open in desktop
Expand Up @@ -31,6 +31,13 @@ export class FileTabsComponent implements OnInit {
wheelPropagation: true,
};

private fileTabsScrollConfig = {
wheelPropagation: true,
suppressScrollY: true,
suppressScrollX: false,
useBothWheelAxes: true
};

constructor(@Inject(Angular2InjectionTokens.VIEWPORT_EVENTS) private viewportEvents: Angular2PluginViewportEvents) { }

ngOnInit() {
Expand Down
4 changes: 2 additions & 2 deletions webClient/src/app/editor/frame/frame.component.scss
View file
Open in desktop
Expand Up @@ -162,10 +162,10 @@
}
}
.gz-editor {
// width: 100%;
height: 100%;
position: relative;
flex: 1 0 auto;
flex: 1 1 auto;
overflow: hidden;
}
}
}
Expand Down