diff --git a/packages/composer-playground/e2e/component/editor.ts b/packages/composer-playground/e2e/component/editor.ts index 1eb3dde869..30801ccbbd 100644 --- a/packages/composer-playground/e2e/component/editor.ts +++ b/packages/composer-playground/e2e/component/editor.ts @@ -35,7 +35,7 @@ export class Editor { return OperationsHelper.retriveMatchingElementsByCSS('.side-bar-nav', '.flex-container') .map((elm) => { browser.executeScript(scrollMe, elm); browser.wait(ExpectedConditions.visibilityOf(elm), 5000); - return elm.getText(); }); + return OperationsHelper.retriveTextFromElement(elm); }); } // Retrieve Editor Side Navigation File Action buttons (Add/Deploy) @@ -61,7 +61,7 @@ export class Editor { } // Retrieve current 'active' file from navigator - static retrieveNavigatorActiveFile() { + static retrieveNavigatorActiveFiles() { return OperationsHelper.retriveMatchingElementsByCSS('.files', '.active') .map((elm) => { browser.executeScript(scrollMe, elm); browser.wait(ExpectedConditions.visibilityOf(elm), 5000); diff --git a/packages/composer-playground/e2e/specs/editor-define.spec.ts b/packages/composer-playground/e2e/specs/editor-define.spec.ts index 557ba0dd54..626c56d8c9 100644 --- a/packages/composer-playground/e2e/specs/editor-define.spec.ts +++ b/packages/composer-playground/e2e/specs/editor-define.spec.ts @@ -294,7 +294,7 @@ describe('Editor Define', (() => { }); // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Script File\nlib/script.js'); @@ -330,7 +330,7 @@ describe('Editor Define', (() => { expect(buttonlist[1]).to.deep.equal({text: 'Deploy', enabled: true}); }); // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Script File\nlib/importScript.js'); @@ -349,7 +349,7 @@ describe('Editor Define', (() => { }) .then((startFiles) => { // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Model File\nmodels/org.acme.model.cto'); @@ -397,7 +397,7 @@ describe('Editor Define', (() => { }) .then((startFiles) => { // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Model File\nmodels/importModel.cto'); @@ -444,7 +444,7 @@ describe('Editor Define', (() => { }) .then((startFiles) => { // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Access Control\npermissions.acl'); @@ -502,7 +502,7 @@ describe('Editor Define', (() => { }) .then((startFiles) => { // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Access Control\npermissions.acl'); @@ -551,7 +551,7 @@ describe('Editor Define', (() => { .then((startFiles) => { // Check for new contents (we only have one readme file) // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('About\nREADME.md'); @@ -602,7 +602,7 @@ describe('Editor Define', (() => { }) .then((startFiles) => { // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Query File\nqueries.qry'); @@ -648,7 +648,7 @@ describe('Editor Define', (() => { }) .then((startFiles) => { // -active file - Editor.retrieveNavigatorActiveFile() + Editor.retrieveNavigatorActiveFiles() .then((list: any) => { expect(list).to.be.an('array').lengthOf(1); expect(list).to.include('Query File\nqueries.qry'); diff --git a/packages/composer-playground/e2e/utils/operations-helper.ts b/packages/composer-playground/e2e/utils/operations-helper.ts index 1a7b07e90f..41e9586ace 100644 --- a/packages/composer-playground/e2e/utils/operations-helper.ts +++ b/packages/composer-playground/e2e/utils/operations-helper.ts @@ -19,7 +19,7 @@ export class OperationsHelper { }); } - // Retrieve text + // Retrieve text from an element static retriveTextFromElement(elm: ElementFinder) { browser.wait(ExpectedConditions.presenceOf(elm), 10000); browser.wait(ExpectedConditions.visibilityOf(elm), 10000); @@ -28,14 +28,23 @@ export class OperationsHelper { }); } - // Retrieve text + // Retrieve an array of matching elements static retriveMatchingElementsByCSS(type: string, subset: string) { - let elm = element(by.css(type)); - browser.wait(ExpectedConditions.presenceOf(elm), 10000); - browser.wait(ExpectedConditions.visibilityOf(elm), 10000); + browser.wait(this.elementsPresent(element(by.css(type)).all(by.css(subset))), 5000); return element(by.css(type)).all(by.css(subset)); } + // Custom ExpectedCondition to be used to ensure that ArrayFinder count is non-zero + static elementsPresent(elementArrayFinder) { + let hasCount = (() => { + return elementArrayFinder.count() + .then((count) => { + return count > 0; + }); + }); + return ExpectedConditions.and(ExpectedConditions.presenceOf(elementArrayFinder), hasCount); + }; + // Navigate to Editor base page and move past welcome splash static navigatePastWelcome() { browser.get(browser.baseUrl); diff --git a/packages/composer-playground/src/app/connection-profile/connection-profile.component.html b/packages/composer-playground/src/app/connection-profile/connection-profile.component.html index 85b0bedd9f..8efbe84fd7 100644 --- a/packages/composer-playground/src/app/connection-profile/connection-profile.component.html +++ b/packages/composer-playground/src/app/connection-profile/connection-profile.component.html @@ -25,7 +25,8 @@
-
+
+
@@ -54,5 +55,6 @@

Connection Profiles are not available in Web Playground

+
diff --git a/packages/composer-playground/src/app/editor/editor.component.html b/packages/composer-playground/src/app/editor/editor.component.html index a22e52bd4c..6d2566936a 100644 --- a/packages/composer-playground/src/app/editor/editor.component.html +++ b/packages/composer-playground/src/app/editor/editor.component.html @@ -1,138 +1,155 @@
-
- Files - -
    -
  • -
    -
    -

    Package Details

    -

    Model File

    -

    Script File

    -

    Access Control

    -

    About

    -

    Query File

    -
    {{file.displayID}}
    -
    -
    - -
    -
    -
    • -
- -
- -
-
- -
-
-
-
- +
+ Files + +
    +
  • +
    +
    +

    Package Details

    +

    Model File

    +

    Script File

    +

    Access Control

    +

    About

    +

    Query File

    +
    {{file.displayID}}
    +
    +
    + +
    +
    +
    • +
+ +
+ +
+
+ +
-
- +
+
+ +
+
+ +
-
-
-
-

Editing package.json

-
-
-
-

{{ fileType(currentFile) }} File

-

{{ deployedPackageName }}

-
-
{{currentFile.displayID}}
-
{{deployedPackageVersion}}
- -
- -
-
- -
+
+
+
+

Editing package.json

+
+
+
+

{{ + fileType(currentFile) }} File

+

{{ deployedPackageName }}

+
+
{{currentFile.displayID}} +
+
{{deployedPackageVersion}} +
-
- -
- -
- -
-
- -
- - - - -
- +
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+ + + + +
+ -
-
-
-
-
- -
models/
-
lib/
-
- - + +
+
+
+
+
+ +
models/
+
lib/
+
+ + +
+
.cto
+
.js
+
+
+ {{fileNameError}} +
+
-
.cto
-
.js
-
- {{fileNameError}} + +
+
-
-
- -
- +
diff --git a/packages/composer-playground/src/app/editor/editor.component.scss b/packages/composer-playground/src/app/editor/editor.component.scss index 83a3b44988..8e06ea4527 100644 --- a/packages/composer-playground/src/app/editor/editor.component.scss +++ b/packages/composer-playground/src/app/editor/editor.component.scss @@ -16,8 +16,9 @@ app-editor { & > * { padding: $space-medium $space-large; } - margin-top: $space-large; - + display: flex; + flex-direction: column; + overflow-y: auto; span { color: $secondary-text; } @@ -26,6 +27,7 @@ app-editor { padding: 0; max-height: 60vh; overflow-y: auto; + min-height: 90px; .error { color: $first-warning; } diff --git a/packages/composer-playground/src/app/editor/editor.component.ts b/packages/composer-playground/src/app/editor/editor.component.ts index 2930046c68..79e8391c00 100644 --- a/packages/composer-playground/src/app/editor/editor.component.ts +++ b/packages/composer-playground/src/app/editor/editor.component.ts @@ -104,11 +104,12 @@ export class EditorComponent implements OnInit, OnDestroy { } updatePackageInfo() { - this.deployedPackageName = this.clientService.getMetaData().getName(); // Set Name - this.deployedPackageVersion = this.clientService.getMetaData().getVersion(); // Set Version - this.deployedPackageDescription = this.clientService.getMetaData().getDescription(); // Set Description - this.inputPackageName = this.clientService.getMetaData().getName(); - this.inputPackageVersion = this.clientService.getMetaData().getVersion(); + let metaData = this.clientService.getMetaData(); + this.deployedPackageName = metaData.getName(); // Set Name + this.deployedPackageVersion = metaData.getVersion(); // Set Version + this.deployedPackageDescription = metaData.getDescription(); // Set Description + this.inputPackageName = metaData.getName(); + this.inputPackageVersion = metaData.getVersion(); } setInitialFile() { diff --git a/packages/composer-playground/src/app/footer/footer.component.scss b/packages/composer-playground/src/app/footer/footer.component.scss index 117519e48a..40d8f98429 100644 --- a/packages/composer-playground/src/app/footer/footer.component.scss +++ b/packages/composer-playground/src/app/footer/footer.component.scss @@ -2,9 +2,13 @@ @import '../../assets/styles/base/_variables.scss'; app-footer { - position: relative; - display: flex; + position: absolute; + display: block; width: 100%; + bottom: 0px; + left: 0px; + right: 0px; + padding: 0px $space-large; .footer-main{ position: relative; diff --git a/packages/composer-playground/src/app/identity/identity.component.html b/packages/composer-playground/src/app/identity/identity.component.html index a515572c51..9d1d2abf0a 100644 --- a/packages/composer-playground/src/app/identity/identity.component.html +++ b/packages/composer-playground/src/app/identity/identity.component.html @@ -1,65 +1,68 @@
-
-
-

My Wallet

+
+
+
+

My Wallet

- + - -
- -
-
-
ID Name
-
Status
-
-
-
-
- {{id}} +
-
- In Use -
-
- In my wallet + +
+
+
ID Name
+
Status
-
- - +
+
+
+ {{id}} +
+
+ In Use +
+
+ In my wallet +
+
+ + +
-
-
-
-

All IDs for {{ deployedPackageName }}

-
- -
-
-
ID Name
-
Issued to
-
Status
-
-
-
-
-
- {{ id.name }} -
-
- {{ id.participant.$identifier }} +
+
+

All IDs for {{ deployedPackageName }}

-
- {{ id.state }} + +
+
+
ID Name
+
Issued to
+
Status
+
-
-
- +
+
+
+ {{ id.name }} +
+
+ {{ id.participant.$identifier }} +
+
+ {{ id.state }} +
+
+
+ +
diff --git a/packages/composer-playground/src/app/test/registry/registry.component.html b/packages/composer-playground/src/app/test/registry/registry.component.html index 95ca748b49..04bc4d2965 100644 --- a/packages/composer-playground/src/app/test/registry/registry.component.html +++ b/packages/composer-playground/src/app/test/registry/registry.component.html @@ -10,56 +10,61 @@

{{_registry.name}}

-
-
ID
-
Data
-
-
-
-
{{resource.getIdentifier()}}
- 
{{serialize(resource)}}
+
+
ID
+
Data
+
+
+
+
{{resource.getIdentifier()}}
+ 
{{serialize(resource)}}
- -
+ +
- + +
+
- -
- - - - - - - + + + + + + + - - - - - - - + + + + + + +
IDTimeParticipant IDTransaction Type
IDTimeParticipant IDTransaction Type
{{ resource.getIdentifier() }}{{ resource.transactionTimestamp | date:'HH:mm:ss' }}{{ resource.participantInvoking ? resource.participantInvoking.$identifier : '<system>' }}{{ resource.transactionType || 'TBC' }}view data
{{ resource.getIdentifier() }}{{ resource.transactionTimestamp | date:'HH:mm:ss' }}{{ resource.participantInvoking ? + resource.participantInvoking.$identifier : '<system>' }} + {{ resource.transactionType || 'TBC' }}view data
diff --git a/packages/composer-playground/src/app/test/registry/registry.component.scss b/packages/composer-playground/src/app/test/registry/registry.component.scss index 8ff18949f6..c0e5b0d437 100644 --- a/packages/composer-playground/src/app/test/registry/registry.component.scss +++ b/packages/composer-playground/src/app/test/registry/registry.component.scss @@ -2,199 +2,199 @@ @import '../../../assets/styles/base/variables'; registry { - height: 100%; - display: block; - position: relative; - $highlighted: #e4e4e4; - - .resource-header { - min-height: 50px; - display: flex; - color: $secondary-text; - } - - .resource-header-left { - flex: 1; - align-self: center; - } - - button.registry { - background-color: $white; - border-color: $white; - box-shadow: 0 2px 5px -1px $fifth-highlight; - - &:hover { - background-color: $highlighted; - border-color: $highlighted; - } + height: 90%; + display: block; + position: relative; + $highlighted: #e4e4e4; - &[disabled], &[disabled]:hover { - background-color: $highlighted; - border-color: $highlighted; + .resource-header { + min-height: 50px; + display: flex; + color: $secondary-text; } - } - .resource-list { - margin: $space-large 0; - - .id { - width: 25%; - padding-bottom: 0.5rem; + .resource-header-left { + flex: 1; + align-self: center; } - .data { - width: 75%; - padding-bottom: 0.5rem; - } + button.registry { + background-color: $white; + border-color: $white; + box-shadow: 0 2px 5px -1px $fifth-highlight; - .title { - display: flex; - padding: 0 $space-medium; + &:hover { + background-color: $highlighted; + border-color: $highlighted; + } - &.resource-empty { - border-bottom: 1px solid $fifth-highlight; - } + &[disabled], &[disabled]:hover { + background-color: $highlighted; + border-color: $highlighted; + } } - .resource-container { - background-color: $white; - margin: $space-smedium 0; - padding: $space-medium; - position: relative; - box-shadow: 0 2px 5px -1px $fifth-highlight; - border-radius: 4px; + .resource-list { + margin: $space-large 0; - .resource-content { - display: flex; - - .resource-icon { - align-self: flex-end; + .id { + width: 25%; + padding-bottom: 0.5rem; } - &.expanded { - pre { - overflow: hidden; + .data { + width: 75%; + padding-bottom: 0.5rem; + } - @include transition(all); - } + .title { + display: flex; + padding: 0 $space-medium; - padding-bottom: $space-large; + &.resource-empty { + border-bottom: 1px solid $fifth-highlight; + } } - pre { - margin: 0; - margin-top: $space-small; - overflow: hidden; + .resource-container { + background-color: $white; + margin: $space-smedium 0; + padding: $space-medium; + position: relative; + box-shadow: 0 2px 5px -1px $fifth-highlight; + border-radius: 4px; + + .resource-content { + display: flex; + + .resource-icon { + align-self: flex-end; + } + + &.expanded { + pre { + overflow: hidden; + + @include transition(all); + } + + padding-bottom: $space-large; + } + + pre { + margin: 0; + margin-top: $space-small; + overflow: hidden; + + @include transition(all); + + &.gradient, &.tiny-gradient { + position: relative; + } + &.gradient:after, &.tiny-gradient:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + } + + &.gradient:after { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0); + background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); + background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); + background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); + background: linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); + } + + //needed so you don't see the background change when gradient isn't needed + &.tiny-gradient:after { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0); + background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); + background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); + background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); + background: linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); + } + } + } - @include transition(all); + button.expand { + position: absolute; + left: 40%; + bottom: 10px; + } + } - &.gradient, &.tiny-gradient { + &.transaction-list { + height: calc(100% - 50px); position: relative; - } - &.gradient:after, &.tiny-gradient:after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - } - - &.gradient:after { - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0); - background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); - background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); - background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); - background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); - background: linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%); - } - - //needed so you don't see the background change when gradient isn't needed - &.tiny-gradient:after { - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0); - background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); - background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); - background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); - background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); - background: linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%); - } + margin-top: 0px; + margin-left: -$space-large; + margin-right: -$space-large; + table { + display: block; // required to allow seperated tbody scrolling + height: 100%; + border-spacing: 0px; + thead, tbody { + display: block; + } + thead.tbody-scrolled { + position: relative; + z-index: 2; + box-shadow: 0px 5px 10px -5px #9e9e9e; + } + thead { + tr { + display: table; + width: 100%; + } + } + tbody { + height: calc(100% - 76px); + width: 100%; + position: absolute; + overflow-y: auto; + tr { + width: 100%; + display: table; + table-layout: fixed; + box-shadow: none; + margin-bottom: 0px; + &:nth-child(even) { + background-color: $third-highlight; + } + } + } + th:first-child, + td:first-child { + padding-left: $space-large; + } + th, td { + padding: 27px $space-medium; + } + a { + &:visited { + color: #3f55af; + } + } + } } - } - button.expand { - position: absolute; - left: 40%; - bottom: 10px; - } - } + .no-resources { + width: 50%; + margin: 0 auto; + text-align: center; - &.transaction-list { - height: calc(100% - 50px); - position: relative; - margin-top: 0px; - margin-left: -$space-large; - margin-right: -$space-large; - table { - display: block; // required to allow seperated tbody scrolling - height: 100%; - border-spacing: 0px; - thead, tbody { - display: block; - } - thead.tbody-scrolled { - position: relative; - z-index: 2; - box-shadow: 0px 5px 15px -5px #9e9e9e; - } - thead { - tr { - display: table; - width: 100%; - } - } - tbody { - height: calc(100% - 76px); - width: 100%; - position: absolute; - overflow-y: auto; - tr { - width: 100%; - display: table; - table-layout: fixed; - box-shadow: none; - margin-bottom: 0px; - &:nth-child(even) { - background-color: $third-highlight; + svg { + width: 190px; + height: 220px; } - } } - th:first-child, - td:first-child { - padding-left: $space-large; - } - th, td { - padding: 27px $space-medium; - } - a { - &:visited { - color: #3f55af; - } - } - } - } - - .no-resources { - width: 50%; - margin: 0 auto; - text-align: center; - - svg { - width: 190px; - height: 220px; - } } - } } diff --git a/packages/composer-playground/src/app/test/test.component.html b/packages/composer-playground/src/app/test/test.component.html index bd3ec0bcf8..3920d06232 100644 --- a/packages/composer-playground/src/app/test/test.component.html +++ b/packages/composer-playground/src/app/test/test.component.html @@ -1,53 +1,55 @@
-
- Participants -
-
    -
  • -

    {{participantRegistry.displayName}}

    -
    • -
-
- - Assets -
-
    -
  • -

    {{assetRegistry.displayName}}

    -
    • -
-
- - Transactions -
-
    -
  • -

    All Transactions

    -
    • -
-
-
- -
-
- +
+ Participants +
+
    +
  • +

    {{participantRegistry.displayName}}

    +
    • +
+
+ + Assets +
+
    +
  • +

    {{assetRegistry.displayName}}

    +
    • +
+
+ + Transactions +
+
    +
  • +

    All Transactions

    +
    • +
+
+
+ +
+
+ +
-
-
-
- +
+
+ + +
diff --git a/packages/composer-playground/src/app/test/test.component.scss b/packages/composer-playground/src/app/test/test.component.scss index a0ba1a2993..cb743dac14 100644 --- a/packages/composer-playground/src/app/test/test.component.scss +++ b/packages/composer-playground/src/app/test/test.component.scss @@ -2,48 +2,51 @@ @import '../../assets/styles/base/_variables.scss'; app-test { - display: flex; - width: 100%; + display: flex; + width: 100%; - .side-bar { + .side-bar { - .registries { - & > * { - padding: $space-smedium $space-large; - } - margin-top: $space-large; + .registries { + & > * { + padding: $space-smedium $space-large; + } + margin-top: $space-large; - span { - color: $secondary-text; - display: inline-block; - } + span { + color: $secondary-text; + display: inline-block; + } - .side-bar-nav { - padding: 0; - } + .side-bar-nav { + padding: 0; + } - ul.registry { - cursor: pointer; - } + ul.registry { + cursor: pointer; + } - } + } + + .side-button { + flex: 1; + margin: 0 auto; + margin-left: $space-large; - .side-button { - flex : 1; - margin: 0 auto; - margin-left: $space-large; + .button-item { + padding-top: 5rem; + text-align: center; + } + } - .button-item { - padding-top: 5rem; - text-align: center; - } } - } + .main-view { + display: flex; + flex-direction: column; - .main-view { - overflow-y: auto; - display: flex; - flex-direction: column; - } + .main-view-content { + height: calc(100vh - 63px - 76px - 32px); + } + } } diff --git a/packages/composer-playground/src/assets/styles/components/_side-bar-nav.scss b/packages/composer-playground/src/assets/styles/components/_side-bar-nav.scss index 43e546e737..47f3095c10 100644 --- a/packages/composer-playground/src/assets/styles/components/_side-bar-nav.scss +++ b/packages/composer-playground/src/assets/styles/components/_side-bar-nav.scss @@ -1,45 +1,51 @@ .composer { - .side-bar { - max-width: 20rem; - min-width: 19rem; - display: flex; - flex-direction: column; - justify-content: space-between; - z-index: 100; - box-shadow: 0 1px 4px 0 rgba(0,0,0,0.10); + .side-bar { + max-width: 20rem; + min-width: 19rem; + display: flex; + flex-direction: column; + justify-content: space-between; + z-index: 100; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.10); + max-height: 100%; + overflow-y: auto; + .side-bar-nav { + li { + padding: $space-medium $space-large; + border-left: $space-small solid transparent; + border-bottom: 1px solid $fourth-highlight; + cursor: pointer; - .side-bar-nav { - li { - padding: $space-medium $space-large; - border-left: $space-small solid transparent; - border-bottom: 1px solid $fourth-highlight; - cursor: pointer; + &.active { + background-color: $third-highlight; + border-left: $space-small solid $first-highlight; + background-color: $third-highlight; + cursor: default; + } - &.active { - background-color: $third-highlight; - border-left: $space-small solid $first-highlight; - background-color: $third-highlight; - cursor: default; - } + &:hover { + border-left: $space-small solid $second-highlight; + } - &:hover { - border-left: $space-small solid $second-highlight; - } + div { + padding: $space-small 0 $space-small 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - div { - padding: $space-small 0 $space-small 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + } } - - } } - } - .main-view { - background-color: $fourth-highlight; - width: 100%; - padding: $space-large $space-large 0 $space-large; - } + .main-view { + background-color: $fourth-highlight; + width: 100%; + position: relative; + padding: 0 0 $space-xlarge 0; + .main-view-content { + padding: $space-large $space-large 0px $space-large; + overflow-y: auto; + } + } }