diff --git a/examples/example-app-angular-cli/src/app/feature1/person-bio.component.other.sandbox.ts b/examples/example-app-angular-cli/src/app/feature1/person-bio.component.other.sandbox.ts index 915b6395..22363329 100644 --- a/examples/example-app-angular-cli/src/app/feature1/person-bio.component.other.sandbox.ts +++ b/examples/example-app-angular-cli/src/app/feature1/person-bio.component.other.sandbox.ts @@ -1,4 +1,4 @@ import {sandboxOf} from 'angular-playground'; import {PersonBioComponent} from './person-bio.component'; -export default sandboxOf(PersonBioComponent, {label:'feature1.'}) +export default sandboxOf(PersonBioComponent, {label:'feature1'}) .add('a special case', {template:`

Special Bio

`}); diff --git a/examples/example-app-angular-cli/src/app/feature1/person-bio.component.sandbox.ts b/examples/example-app-angular-cli/src/app/feature1/person-bio.component.sandbox.ts index ec092d52..f7f96395 100644 --- a/examples/example-app-angular-cli/src/app/feature1/person-bio.component.sandbox.ts +++ b/examples/example-app-angular-cli/src/app/feature1/person-bio.component.sandbox.ts @@ -1,4 +1,4 @@ import {sandboxOf} from 'angular-playground'; import {PersonBioComponent} from './person-bio.component'; -export default sandboxOf(PersonBioComponent, {label:'feature1.'}) +export default sandboxOf(PersonBioComponent, {label:'feature1'}) .add('default', {template:``}); diff --git a/examples/example-app-angular-cli/src/app/feature1/person-details.component.sandbox.ts b/examples/example-app-angular-cli/src/app/feature1/person-details.component.sandbox.ts index f0c4a9e5..4651ae0a 100644 --- a/examples/example-app-angular-cli/src/app/feature1/person-details.component.sandbox.ts +++ b/examples/example-app-angular-cli/src/app/feature1/person-details.component.sandbox.ts @@ -3,7 +3,7 @@ import { PersonDetailsComponent } from './person-details.component'; import { PersonBioComponent } from './person-bio.component'; export default sandboxOf(PersonDetailsComponent, { - label:'feature1.', + label:'feature1', declarations: [PersonBioComponent] }) .add('person with name and twitter', { diff --git a/examples/example-app-angular-cli/src/app/shared/person-bio.component.sandbox.ts b/examples/example-app-angular-cli/src/app/shared/person-bio.component.sandbox.ts index 6a38e26d..3e3d7235 100644 --- a/examples/example-app-angular-cli/src/app/shared/person-bio.component.sandbox.ts +++ b/examples/example-app-angular-cli/src/app/shared/person-bio.component.sandbox.ts @@ -1,7 +1,7 @@ import { PersonBioComponent } from './person-bio.component'; import { sandboxOf } from 'angular-playground'; -export default sandboxOf(PersonBioComponent, {label:'shared.'}) +export default sandboxOf(PersonBioComponent, {label:'shared'}) .add('no message', { template:`` }) diff --git a/examples/example-app-angular-cli/src/index.html b/examples/example-app-angular-cli/src/index.html index 20b40d56..86721fb6 100644 --- a/examples/example-app-angular-cli/src/index.html +++ b/examples/example-app-angular-cli/src/index.html @@ -9,6 +9,54 @@ - Loading... + + +

+ + Loading... +

+ diff --git a/examples/example-app-embed-mode/src/index.html b/examples/example-app-embed-mode/src/index.html index d2bac6a6..4783d592 100644 --- a/examples/example-app-embed-mode/src/index.html +++ b/examples/example-app-embed-mode/src/index.html @@ -7,6 +7,54 @@ - Loading... + + +

+ + Loading... +

+ diff --git a/examples/example-app-webpack/src/index.html b/examples/example-app-webpack/src/index.html index abbd26cb..4b6ce884 100644 --- a/examples/example-app-webpack/src/index.html +++ b/examples/example-app-webpack/src/index.html @@ -7,6 +7,54 @@ - Loading... + + +

+ + Loading... +

+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 81adc47f..f94ea8ac 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -39,7 +39,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; color: white; display: flex; flex-direction: column; - font-family: Menlo, Monaco, monospace; + font-family: Consolas, monospace; left: 50%; margin-top: -6px; max-height: 100vh; @@ -56,11 +56,12 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; content: ""; display: block; position: absolute; - top: 54px; + top: 61px; width: 100%; } .command-bar--open { + min-height: 60px; transform: translate(-50%, 0); } @@ -68,10 +69,10 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; background-color: #3c3c3c; border: 1px solid #174a6c; color: white; - font-family: Menlo, Monaco, monospace; - font-size: 14pt; + font-family: Consolas, monospace; + font-size: 16px; margin: 6px 0 0 5px; - padding: 4px; + padding: 8px; width: 365px; z-index: 1; } @@ -123,21 +124,20 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; padding: 5px 0 0; } - .command-bar__title-text { + .command-bar__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .command-bar__prepend-text { + .command-bar__label { background: rgba(255, 255, 255, .1); border-radius: 2px; display: block; - font-size: 9px; + font-size: 10px; margin-left: 10px; - order: 1; - padding: 4px 4px 3px; + padding: 4px 5px 3px; } /* Scenarios */ @@ -151,8 +151,9 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; color: rgba(255, 255, 255, .5); cursor: pointer; display: flex; - padding: 2px 3px; + padding: 4px 3px; width: 100%; + transition: background 0.2s ease-out; } .command-bar__scenario-link:hover, @@ -167,7 +168,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; display: inline-block; fill: white; height: 20px; - margin: 4px 6px 0 0; + margin: 2px 6px 0 0; opacity: .2; width: 20px; } @@ -178,7 +179,15 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; opacity: .5; } + .command-bar__scenario-label { + line-height: 1; + max-width: calc(100% - 26px); + min-width: calc(100% - 26px); + padding-bottom: 2px; + } + .command-bar__scenario-link--selected { + background: rgba(255, 255, 255, .1); color: white; } @@ -193,6 +202,48 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; fill: white; } + /* Brand */ + .command-bar__brand { + border-top: solid 1px black; + display: block; + position: relative; + padding: 9px 0 3px; + text-align: center; + } + + .command-bar__brand::before { + border-bottom: solid 1px rgba(255, 255, 255, .1); + content: ""; + display: block; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + + .command-bar__logo { + height: 30px; + width: 140px; + } + + .command-bar__logo__box { + fill: rgba(255, 255, 255, .1); + transition: fill 0.2s ease-out; + } + + .command-bar__logo__letter { + fill: rgba(255, 255, 255, .5); + transition: fill 0.2s ease-out; + } + + .command-bar__brand:hover .command-bar__logo__box { + fill: rgba(255, 255, 255, .2); + } + + .command-bar__brand:hover .command-bar__logo__letter { + fill: rgba(255, 255, 255, .75); + } + /* Content */ .content { align-items: center; @@ -205,7 +256,7 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; } .content__none { - font-family: Menlo, Monaco, monospace; + font-family: Consolas, monospace; max-width: 50%; } @@ -221,22 +272,22 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; class="command-bar__filter" type="text" name="filter" - placeholder="filter" + placeholder="search..." [formControl]="filter" #filterElement [apFocus]="commandBarActive" (keyup.Esc)="commandBarActive = false" (keydown.ArrowUp)="goToLastScenario($event)" (keydown.ArrowDown)="goToFirstScenario($event)"> -
+

- - {{sandboxMenuItem.label}} - - + {{sandboxMenuItem.name}} + + {{sandboxMenuItem.label}} +

- {{scenarioMenuItem.description}} + + {{scenarioMenuItem.description}} + +
+ + +

- The app has {{totalSandboxes}} sandboxed component{{totalSandboxes > 1 ? 's' : ''}} loaded. + The playground has {{totalSandboxes}} sandboxed component{{totalSandboxes > 1 ? 's' : ''}}.

- The app does not have any sandboxed components. + The playground does not have any sandboxed components.

- Pick sandboxed components: ctrl + o or F1 + Search sandboxed components: ctrl + o or F1

@@ -333,7 +1054,7 @@ export class AppComponent { this.selectScenario(null, null); } }); - } + } } goToFirstScenario(event: any) {