Skip to content

Feature/fix command bar headers and link transitions #53

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

Merged
merged 4 commits into from
Sep 29, 2017
Merged

Feature/fix command bar headers and link transitions #53

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
046bad0
remove link transitions
brianmtreese Sep 29, 2017
c96047f
prevent list item headers from inheriting font family
brianmtreese Sep 29, 2017
f7a3cc9
set command bar to show hide with css to maintain scroll position
brianmtreese Sep 29, 2017
37e9433
change the initial none message to be centered without affecting sand…
brianmtreese Sep 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
align-items: center;
color: rgba(255, 255, 255, .5);
display: flex;
font-family: Consolas, monospace;
font-size: 12px;
font-weight: normal;
justify-content: space-between;
Expand Down Expand Up @@ -153,7 +154,6 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
display: flex;
padding: 4px 3px;
width: 100%;
transition: background 0.2s ease-out;
}

.command-bar__scenario-link:hover,
Expand Down Expand Up @@ -245,7 +245,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
}

/* Content */
.content {
.content__none {
align-items: center;
border: 0;
display: flex;
Expand All @@ -255,19 +255,20 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
width: 100%;
}

.content__none {
.content__none-message {
font-family: Consolas, monospace;
max-width: 50%;
text-align: center;
}

.content__none em {
.content__none-message em {
color: #666;
}

`],
template: `
<div class="shield" *ngIf="commandBarActive" (click)="toggleCommandBar()"></div>
<div class="command-bar" *ngIf="commandBarActive" [class.command-bar--open]="commandBarActive">
<div class="command-bar" [class.command-bar--open]="commandBarActive">
<input
class="command-bar__filter"
type="text"
Expand Down Expand Up @@ -978,15 +979,17 @@ import { fuzzySearch } from './shared/fuzzy-search.function';
</div>
<section class="content">
<div class="content__none" *ngIf="!selectedSandboxAndScenarioKeys.sandboxKey">
<p *ngIf="totalSandboxes > 0">
The playground has {{totalSandboxes}} sandboxed component{{totalSandboxes > 1 ? 's' : ''}}.
</p>
<p *ngIf="totalSandboxes === 0">
The playground does not have any sandboxed components.
</p>
<p>
Search sandboxed components: <strong>ctrl + o</strong> <em>or</em> <strong>F1</strong>
</p>
<div class="content__none-message">
<p *ngIf="totalSandboxes > 0">
The playground has {{totalSandboxes}} sandboxed component{{totalSandboxes > 1 ? 's' : ''}}.
</p>
<p *ngIf="totalSandboxes === 0">
The playground does not have any sandboxed components.
</p>
<p>
Search sandboxed components: <strong>ctrl + o</strong> <em>or</em> <strong>F1</strong>
</p>
</div>
</div>
<ng-container *ngIf="selectedSandboxAndScenarioKeys.sandboxKey">
<ap-scenario [selectedSandboxAndScenarioKeys]="selectedSandboxAndScenarioKeys"></ap-scenario>
Expand Down