diff --git a/CHANGELOG.md b/CHANGELOG.md index 506054cd..8f79e7c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,160 @@ + +# 2.0.4 (2017-09-29) + +### Fixes +* **embedding:** Fix issues with embed mode + ([dff2962](https://github.com/SoCreate/angular-playground/commit/dff2962)) + + +# 2.0.3 (2017-09-29) + +### Fixes +* **style:** Change the initial none message to be centered without affecting sandboxed component displays + ([37e9433](https://github.com/SoCreate/angular-playground/commit/37e9433)) +* **style:** Set command bar to show hide with css to maintain scroll position + ([f7a3cc9](https://github.com/SoCreate/angular-playground/commit/f7a3cc9)) +* **style:** Prevent list item headers from inheriting font family + ([c96047f](https://github.com/SoCreate/angular-playground/commit/c96047f)) +* **style:** Remove link transitions + ([046bad0](https://github.com/SoCreate/angular-playground/commit/046bad0)) + + +# 2.0.2 (2017-09-28) + +### Fixes +* **package peer dependencies:** Fix issue with peer dependencies for 5.0.0-beta.0 and higher + ([cd16815](https://github.com/SoCreate/angular-playground/commit/cd16815)) + + +# 2.0.1 (2017-09-28) + +### Fixes +* **package peer dependencies:** Fix issue with peer dependencies not set to the right versions + ([3c7d374](https://github.com/SoCreate/angular-playground/commit/3c7d374)) + + +# 2.0.0 (2017-09-28) + +### Requirements +* Requires Angular 4.2 or higher +* Requires Typescript version 2.4 or higher +* If using Angular CLI version 1.2 or higher is required +* Requires changing compilerOptions -> module property in "tsconfig.json" or "tsconfig.app.json" to use "esnext" + +### Features +* **command bar:** New improved look to the command bar for navigating between + scenarios and components that have been sandboxed +* **perfomance:** Change the tool to now build an index of sandboxes and only + load a sandbox and its dependencies lazily when switching to that scenario + with the command bar +* **labels:** Added a new way to differentiate sandboxes by giving them a specific + label that is shown in the command bar for categorizing and can be used in search + +### Fixes +* **command bar:** Fix edge browser keydown events + ([8c54c41](https://github.com/SoCreate/angular-playground/commit/8c54c41)) +* **examples:** Fix examples showing how to embed sandboxes + ([8ac215c](https://github.com/SoCreate/angular-playground/commit/8ac215c)) +* **performance:** Change code to lazy load sandbox bundle when scenario is selected + ([4bc33ff](https://github.com/SoCreate/angular-playground/commit/4bc33ff)) +* **performance:** Update build to create functions that lazy load sandboxes + ([503c67b](https://github.com/SoCreate/angular-playground/commit/503c67b)) +* **command bar:** Change code to work with menu items index that was built from all + sandboxes to seperate the loading of components from listing what is available to + be loaded so that a sandboxes/related components are not loaded in one large bundle + but instead each sandbox is independently bundled + ([503c67b](https://github.com/SoCreate/angular-playground/commit/503c67b)) +* **performance:** Add new factory methods to get menu items/Remove combining of sandbox + ([eb40a11](https://github.com/SoCreate/angular-playground/commit/eb40a11)) +* **performance:** Update build to create functions that lazy load sandboxes + ([b4d241b](https://github.com/SoCreate/angular-playground/commit/b4d241b)) +* **command bar:** Update api to only deal with sandbox type information + ([2a188de](https://github.com/SoCreate/angular-playground/commit/2a188de)) +* **typescript:** Update tsconfig to support using import function for lazy loading + ([7e1ca6f](https://github.com/SoCreate/angular-playground/commit/7e1ca6f)) +* **package upgrades:** Update webpack example to newer version of angular + ([3fc808a](https://github.com/SoCreate/angular-playground/commit/3fc808a)) +* **style:** Change menu style + ([49256d8](https://github.com/SoCreate/angular-playground/commit/49256d8)) +* **package upgrades:** Upgrade sample and dev cli projects to latest package versions + ([f3e970f](https://github.com/SoCreate/angular-playground/commit/f3e970f)) + + ### Breaking Changes +* **component scenario combining removed:** Each sandbox will now uniquely show up as + its own section in the command bar even if it is sandboxing the same component +* **embed url:** Embed url has now changed to uniquely reference the sandbox file + based on the path within the application + + Before: + ```html + View in Playground + + ``` + + After: + ```html + View in Playground + + ``` + +* **api:** Rename prependText property to label + ([05b6bba](https://github.com/SoCreate/angular-playground/commit/05b6bba)) + + Before: + ```typescript + import {sandboxOf} from 'angular-playground'; + import {PersonBioComponent} from './person-bio.component'; + export default sandboxOf(PersonBioComponent, {prependText:'feature1.'}) + .add('a special case', {template:`

Special Bio

`}); + ``` + + After: + ```typescript + import {sandboxOf} from 'angular-playground'; + import {PersonBioComponent} from './person-bio.component'; + export default sandboxOf(PersonBioComponent, {label:'feature1'}) + .add('a special case', {template:`

Special Bio

`}); + ``` + +* **typescript configuration:** In order to lazy load sandboxes for components the + new version requires that the compilerOptions -> module option in the tsconfig file + be set to "esnext" + + Before: + ```json + { + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "baseUrl": "./", + "module": "es2015", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] + } + ``` + + After: + ```json + { + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "baseUrl": "./", + "module": "esnext", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] + } + ``` + + # 1.7.1 (2017-08-21) 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/package-lock.json b/package-lock.json index c5d19d75..c0189908 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "angular-playground", - "version": "1.7.1", + "version": "2.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 91d53072..e1c07b91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-playground", - "version": "1.7.1", + "version": "2.0.4", "description": "A drop in app module for working on Angular components in isolation (aka Scenario Driven Development).", "main": "dist/index.js", "typings": "dist/index.d.ts", @@ -35,14 +35,14 @@ }, "homepage": "http://www.angularplayground.it", "peerDependencies": { - "@angular/common": ">=2.4.1 || >=4.0.0-rc.1", - "@angular/compiler": ">=2.4.1 || >=4.0.0-rc.1", - "@angular/core": ">=2.4.1 || >=4.0.0-rc.1", - "@angular/forms": ">=2.4.1 || >=4.0.0-rc.1", - "@angular/platform-browser": ">=2.4.1 || >=4.0.0-rc.1", - "@angular/platform-browser-dynamic": ">=2.4.1 || >=4.0.0-rc.1", - "rxjs": ">=5.0.1", - "zone.js": ">=0.7.2" + "@angular/common": ">=4.2.0 || >=5.0.0-beta.0", + "@angular/compiler": ">=4.2.0 || >=5.0.0-beta.0", + "@angular/core": ">=4.2.0 || >=5.0.0-beta.0", + "@angular/forms": ">=4.2.0 || >=5.0.0-beta.0", + "@angular/platform-browser": ">=4.2.0 || >=5.0.0-beta.0", + "@angular/platform-browser-dynamic": ">=4.2.0 || >=5.0.0-beta.0", + "rxjs": ">=5.4.2", + "zone.js": ">=0.8.14" }, "dependencies": { "node-watch": "^0.4.1" diff --git a/src/app/app.component.ts b/src/app/app.component.ts index bce20aaf..73a9be21 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -39,13 +39,13 @@ 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; padding-top: 10px; position: absolute; - transform: translate(-50%, -110%); + transform: translate(-50%, -120%); transition: transform ease 100ms; width: 376px; z-index: 9999999999999; @@ -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; } @@ -116,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; @@ -123,21 +125,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,7 +152,7 @@ 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%; } @@ -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,8 +202,50 @@ 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 { + .content__none { align-items: center; border: 0; display: flex; @@ -204,39 +255,40 @@ import { fuzzySearch } from './shared/fuzzy-search.function'; width: 100%; } - .content__none { - font-family: Menlo, Monaco, monospace; + .content__none-message { + font-family: Consolas, monospace; max-width: 50%; + text-align: center; } - .content__none em { + .content__none-message em { color: #666; } `], template: `
-
+
-
+

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

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

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

-

- The app does not have any sandboxed components. -

-

- Pick sandboxed components: ctrl + o or F1 -

+
+

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

+

+ The playground does not have any sandboxed components. +

+

+ Search sandboxed components: ctrl + o or F1 +

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