Skip to content
This repository was archived by the owner on Mar 8, 2020. It is now read-only.

Enable styled dropdown for Id panel #1592

Merged
merged 2 commits into from
Jul 18, 2017
Merged

Enable styled dropdown for Id panel #1592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96815de
header panel changes
nklincoln Jul 7, 2017
bc2b3a3
edit panels and prevent ability to create a new BN through playground
nklincoln Jul 13, 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
4 changes: 2 additions & 2 deletions packages/composer-playground/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@
</a>
</li>
</ul>
<div class="drop-select" *ngIf="usingLocally">
<div class="drop-select" *ngIf="usingLocally" [routerLinkActive]="['active']" [ngClass]="{'dropListActive' : dropListActive}">
<div class="drop-select-item flex-container flex">
<div ngbDropdown class="d-inline-block">
<div ngbDropdown class="d-inline-block" (openChange)="onToggle($event)">
<button type="button" class="action" id="dropdownMenu1" ngbDropdownToggle>
<span title="{{ identityService.currentIdentity | async }}">{{ identityService.currentIdentity | async }}</span>
</button>
Expand Down
18 changes: 18 additions & 0 deletions packages/composer-playground/src/app/app.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1006,4 +1006,22 @@ describe('AppComponent', () => {
}));
});

describe('onToggle', () => {

it('should set toggle down on true event', () => {
component['dropListActive'] = false;

component['onToggle'](true);

component['dropListActive'].should.be.true;
});

it('should set toggle up on false event', () => {
component['dropListActive'] = true;

component['onToggle'](false);

component['dropListActive'].should.be.false;
});
});
});
9 changes: 9 additions & 0 deletions packages/composer-playground/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export class AppComponent implements OnInit, OnDestroy {
private usingLocally = false;
private showHeaderLinks = false;
private showWelcome = true;
private dropListActive = false;

private composerRuntimeVersion = '<none>';
private participantFQI = '<none>';
Expand Down Expand Up @@ -210,6 +211,14 @@ export class AppComponent implements OnInit, OnDestroy {
}
}

onToggle(open) {
if (open) {
this.dropListActive = true;
} else {
this.dropListActive = false;
}
}

private openWelcomeModal() {
return this.checkVersion().then((success) => {
if (success) {
Expand Down
75 changes: 74 additions & 1 deletion packages/composer-playground/src/assets/styles/elements/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
display: flex;
align-items: center;
position: relative;
min-width: 0;
flex: 1;
p {
min-width: 0;
Expand All @@ -30,6 +31,30 @@

.navlogo:hover .tooltiptext {
visibility: visible;
opacity: 0.8;
}

.navlogo .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
padding: 12px 12px;
border-radius: 6px;
position: absolute;
left: 5rem;
top : 3rem;
}

.navlogo .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%;
left: 10%;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent black transparent;
}

.drop-select{
Expand All @@ -38,6 +63,15 @@
max-width: 18rem;
color:$third-highlight;
background-color: $second-highlight;
border-bottom: 6px solid $first-highlight;

&.dropListActive {
border-bottom: 6px solid $white;
}

&.active, &:active, &:hover {
border-bottom: 6px solid $white;
}

.action{
color:$third-highlight;
Expand Down Expand Up @@ -67,6 +101,8 @@
#footer {
color:$white-2;
background-color: $second-highlight;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

&:hover {
background-color: $sixth-highlight;
Expand All @@ -76,17 +112,54 @@

.dropdown {
display: flex;
// color:$third-highlight;
background-color: $first-highlight;
max-width: 18rem;
min-height: 63px;
background-color: $first-highlight;
max-width: 18rem;
min-height: 63px;
padding-top: 6px;
}

.dropdown-menu {
border-left: transparent;
border-right: transparent;
border-bottom: transparent;
max-width: 18rem;
border-top: transparent;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
overflow-x: visible;
overflow-y: visible;

top : 4.5rem;
max-width: 18rem;

&:before{
content:"";
position: absolute;
right: 3rem;
top: -0.5rem;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-color: transparent transparent $third-highlight transparent;
z-index:9999;
}

&:after{
content:"";
position: absolute;
right: 3rem;
top: -0.5rem;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-color: transparent transparent $third-highlight transparent;
z-index:9999;
}
}

.dropdown-toggle::after{
Expand Down