Skip to content

Commit

Permalink
UI: Make quicklist more compact (#734)
Browse files Browse the repository at this point in the history
* Reduce font size on quick list

* Missing files

* Fix
  • Loading branch information
timotheeguerin authored Oct 6, 2017
1 parent 9891d4e commit 6675930
Show file tree
Hide file tree
Showing 18 changed files with 161 additions and 158 deletions.
2 changes: 1 addition & 1 deletion app/components/account/browse/account-fav-list.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<bl-loading [status]="status">
<bl-quick-list>
<bl-quick-list-item *ngFor="let account of displayedAccounts | async" [link]="['/accounts', account.id]" [key]="account.id">
<h4 bl-quick-list-item-title>{{account.name}}</h4>
<div bl-quick-list-item-title>{{account.name}}</div>
<p bl-quick-list-item-field>{{account.location}}</p>
<div bl-quick-list-item-preview>
<div class="flex-center">
Expand Down
2 changes: 1 addition & 1 deletion app/components/account/browse/account-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<bl-quick-list-item-status [status]="accountStatus(account.id)">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{account.name}}</h4>
<div bl-quick-list-item-title>{{account.name}}</div>
<p bl-quick-list-item-field>{{account.location}}</p>
<div bl-quick-list-item-preview>
<div class="flex-center">
Expand Down
2 changes: 1 addition & 1 deletion app/components/application/browse/application-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<bl-quick-list-item-status [status]="appStatus(application)">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{application.id}}</h4>
<div bl-quick-list-item-title>{{application.id}}</div>
<p bl-quick-list-item-field>{{application.packages?.size}} packages</p>
<div bl-quick-list-item-preview>
<bl-application-preview [application]="application"></bl-application-preview>
Expand Down
2 changes: 2 additions & 0 deletions app/components/base/quick-list/quick-list-item.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { ContextMenuService } from "app/components/base/context-menu";
import { AbstractListItemBase } from "../abstract-list";
import { QuickListComponent } from "./quick-list.component";

import "./quick-list-item.scss";

@Component({
selector: "bl-quick-list-item",
templateUrl: "quick-list-item.html",
Expand Down
127 changes: 127 additions & 0 deletions app/components/base/quick-list/quick-list-item.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
@import "app/styles/variables";

bl-quick-list-item {
cursor: pointer;
outline: none;

.quick-list-item {
display: flex;
width: 100%;
height: 48px;
white-space: nowrap;

&.selected {
background-color: map-get($primary, 100);

p {
color: $mineShaftGray;
}
}

&.focused {
background-color: map-get($primary, 200);
}

&:hover:not(.selected) {
background-color: $altoGray;
}

.quick-list-details {
flex: 1 1 auto;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;
min-width: 0;

[bl-quick-list-item-title] {
color: $headings-color;
}

[bl-quick-list-item-title], [bl-quick-list-item-field] {
display: flex;
overflow: hidden;
text-overflow: ellipsis;

> bl-tags {
margin-left: 5px;
}
}
}

[bl-quick-list-item-preview] {
padding: 5px;

i {
padding-left: 4px;
}

.fa-hourglass-half {
color: map-get($primary, 400);
}
}

bl-quick-list-item-status {
position: relative;
color: map-get($primary, 500);
flex: 0 0 8px;
display: flex;
align-items: stretch;
> .status-badge {
width: 100%;

&.warning {
background-color: map-get($danger, 500);
}

&.lightaccent {
background: map-get($primary, 100);

}

&.accent {
background: map-get($primary, 300);
}

&.important {
background: repeating-linear-gradient(
45deg,
transparent,
transparent 5px,
$concreteGray 5px,
$concreteGray 10px
), map-get($primary, 500);
}
}
}

.select-item-container {
width: 17px;
padding: 7px 0 0 3px;
}

.quick-list-details {
flex: 1 1 auto;
overflow: hidden;
padding: 3px;
text-overflow: ellipsis;
min-width: 0;

[bl-quick-list-item-title], [bl-quick-list-item-field] {
overflow: hidden;
text-overflow: ellipsis;
}
}

[bl-quick-list-item-preview] {
padding: 3px 10px 0 0;
}

.quick-list-other {
.select-item-checkbox {
position: absolute;
right: 0;

}
}
}
}
2 changes: 2 additions & 0 deletions app/components/base/quick-list/quick-list.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { AbstractListBase } from "../abstract-list";
import { FocusSectionComponent } from "../focus-section";
import { QuickListItemComponent } from "./quick-list-item.component";

import "./quick-list.scss";

@Component({
selector: "bl-quick-list",
template: `
Expand Down
6 changes: 6 additions & 0 deletions app/components/base/quick-list/quick-list.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import "app/styles/variables";

bl-quick-list {
display: block;
width: 100%;
}
6 changes: 3 additions & 3 deletions app/components/data/browse/file-group-list.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<bl-quick-list *ngIf="quickList">
<bl-quick-list-item *ngFor="let container of data.items | async" [link]="['/data/', container.id]"
<bl-quick-list-item *ngFor="let container of data.items | async" [link]="['/data/', container.id]"
[key]="container.id" [contextmenu]="contextmenu(container)">
<bl-quick-list-item-status [status]="containerStatus(container)">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{container.name}}</h4>
<div bl-quick-list-item-title>{{container.name}}</div>
<div bl-quick-list-item-field>{{container.lease?.state}}</div>
<div bl-quick-list-item-preview>
<bl-file-group-preview></bl-file-group-preview>
Expand All @@ -19,7 +19,7 @@ <h4 bl-quick-list-item-title>{{container.name}}</h4>
<bl-column>Lease status</bl-column>
<bl-column>Last modified</bl-column>
</bl-thead>
<bl-row *ngFor="let container of data.items | async" [link]="['/data/', container.id]" [key]="container.id"
<bl-row *ngFor="let container of data.items | async" [link]="['/data/', container.id]" [key]="container.id"
[contextmenu]="contextmenu(container)">
<bl-cell>{{container.name}}</bl-cell>
<bl-cell>{{container.lease?.state}}</bl-cell>
Expand Down
2 changes: 1 addition & 1 deletion app/components/file/browse/display/file-list-display.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<bl-quick-list-item-status [status]="" [tooltip]="">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{file.name}}</h4>
<div bl-quick-list-item-title>{{file.name}}</div>
<p bl-quick-list-item-field>{{prettyFileSize(file.properties.contentLength)}}</p>
</bl-quick-list-item>
</bl-quick-list>
Expand Down
2 changes: 1 addition & 1 deletion app/components/job/browse/job-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<bl-quick-list-item-status [status]="jobStatus(job)" [tooltip]="jobStatusText(job)">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{job.id}}</h4>
<div bl-quick-list-item-title>{{job.id}}</div>
<div bl-quick-list-item-field>
{{job.state}}
<bl-tags [tags]="job.tags" [maxTags]="3"></bl-tags>
Expand Down
2 changes: 1 addition & 1 deletion app/components/node/browse/display/node-list-display.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<bl-quick-list-item-status [status]="" [tooltip]="">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{node.id}}</h4>
<div bl-quick-list-item-title>{{node.id}}</div>
<p bl-quick-list-item-field>{{node.state}}</p>
</bl-quick-list-item>
</bl-quick-list>
Expand Down
2 changes: 1 addition & 1 deletion app/components/pool/browse/pool-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<bl-quick-list-item *ngFor="let pool of pools, trackBy: trackById" [link]="['/pools/', pool.id]" [key]="pool.id" [contextmenu]="contextmenu(pool)">
<bl-quick-list-item-status [status]="poolStatus(pool.original)" [tooltip]="poolStatusText(pool.original)">
</bl-quick-list-item-status>
<h4 bl-quick-list-item-title>{{pool.id}}</h4>
<div bl-quick-list-item-title>{{pool.id}}</div>
<div bl-quick-list-item-field>
{{pool.state}}
<bl-tags [tags]="pool.original.tags" [maxTags]="3"></bl-tags>
Expand Down
2 changes: 1 addition & 1 deletion app/components/task/browse/display/task-list-display.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<bl-quick-list-item-status [status]="taskStatus(task)" [tooltip]="taskStatusText(task)">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{task.id}} {{task.displayName}}</h4>
<div bl-quick-list-item-title>{{task.id}} {{task.displayName}}</div>
<p bl-quick-list-item-field>{{task.state}}</p>
<div bl-quick-list-item-preview>
<bl-task-preview [task]="task"></bl-task-preview>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<bl-quick-list-item-status [status]="taskStatus(task)" [tooltip]="taskStatusText(task)">
</bl-quick-list-item-status>

<h4 bl-quick-list-item-title>{{task.id}}</h4>
<div bl-quick-list-item-title>{{task.id}}</div>
<p bl-quick-list-item-field>{{task.state}}</p>
<div bl-quick-list-item-preview>
<bl-task-preview [task]="task"></bl-task-preview>
Expand Down
127 changes: 0 additions & 127 deletions app/styles/base/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,133 +34,6 @@
}
}

bl-quick-list {
display: block;
width: 100%;

bl-quick-list-item {
cursor: pointer;
outline: none;
}

.quick-list-item {
display: flex;
width: 100%;
height: 56px;
white-space: nowrap;

&.selected {
background-color: map-get($primary, 100);

p {
color: $mineShaftGray;
}
}

&.focused {
background-color: map-get($primary, 200);
}

&:hover:not(.selected) {
background-color: $altoGray;
}

.quick-list-details {
flex: 1 1 auto;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;
min-width: 0;

[bl-quick-list-item-title], [bl-quick-list-item-field] {
display: flex;
overflow: hidden;
text-overflow: ellipsis;

> bl-tags {
margin-left: 5px;
}
}
}

[bl-quick-list-item-preview] {
padding: 5px;

i {
padding-left: 4px;
}

.fa-hourglass-half {
color: map-get($primary, 400);
}
}

bl-quick-list-item-status {
position: relative;
color: map-get($primary, 500);
flex: 0 0 8px;
display: flex;
align-items: stretch;
> .status-badge {
width: 100%;

&.warning {
background-color: map-get($danger, 500);
}

&.lightaccent {
background: map-get($primary, 100);

}

&.accent {
background: map-get($primary, 300);
}

&.important {
background: repeating-linear-gradient(
45deg,
transparent,
transparent 5px,
$concreteGray 5px,
$concreteGray 10px
), map-get($primary, 500);
}
}
}

.select-item-container {
width: 17px;
padding: 7px 0 0 3px;
}

.quick-list-details {
flex: 1 1 auto;
overflow: hidden;
padding: 3px;
text-overflow: ellipsis;
min-width: 0;

[bl-quick-list-item-title], [bl-quick-list-item-field] {
overflow: hidden;
text-overflow: ellipsis;
}
}

[bl-quick-list-item-preview] {
padding: 3px 10px 0 0;
}

.quick-list-other {
.select-item-checkbox {
position: absolute;
right: 0;

}
}
}
}


bl-no-item {
> .no-item-message {
Expand Down
Loading

0 comments on commit 6675930

Please sign in to comment.