Skip to content

Commit

Permalink
fix(demo): don’t expand code
Browse files Browse the repository at this point in the history 
feat(demo): use nz-modal to show code
  • Loading branch information
@Guoyuanqiang
Guoyuanqiang committed Oct 1, 2018
1 parent 312fce6 commit 6d65ebb
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 72 deletions.
75 changes: 42 additions & 33 deletions site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,44 @@
<section class="code-box code-box-target" [ngClass]="{'expand':nzExpanded}" [attr.id]="nzId">
<section class="code-box-meta markdown">
<div class="code-box-title">
<a (click)="navigateToFragment()">{{ nzTitle }}
<a class="edit-button" [attr.href]="nzHref" target="_blank" style="">
<i class="anticon anticon-edit"></i>
</a>
</a>
</div>
<ng-content select="[intro]"></ng-content>
<nz-tooltip [nzTitle]="nzExpanded?'Hide Code':'Show Code'">
<span class="code-expand-icon" nz-tooltip (click)="nzExpanded=!nzExpanded">
<img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" [class.code-expand-icon-show]="nzExpanded"
[class.code-expand-icon-hide]="!nzExpanded">
<img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" [class.code-expand-icon-show]="!nzExpanded"
[class.code-expand-icon-hide]="nzExpanded">
</span>
</nz-tooltip>
</section>
<section class="highlight-wrapper" [ngClass]="{'highlight-wrapper-expand':nzExpanded}">
<div class="highlight">
<div class="code-box-actions">
<nz-tooltip [nzTitle]="'Edit On StackBlitz'">
<i nz-tooltip class="anticon anticon-form code-box-code-copy" (click)="openOnStackBlitz()"></i>
</nz-tooltip>
<nz-tooltip [nzTitle]="'Copy Code'">
<i nz-tooltip class="anticon anticon-copy code-box-code-copy" [class.anticon-copy]="!_copied" [class.anticon-check]="_copied"
[class.ant-tooltip-open]="_copied" (click)="copyCode(nzRawCode)"></i>
</nz-tooltip>
</div>
<ng-content select="[code]"></ng-content>
<section class="code-box" [ngClass]="{'expand':nzExpanded, 'code-box-target':nzSelected}" [attr.id]="nzId">
<section class="code-box-meta markdown">
<div class="code-box-title">
<a (click)="navigateToFragment()">{{ nzTitle }}
<a class="edit-button" [attr.href]="nzHref" target="_blank" style="">
<i class="anticon anticon-edit"></i>
</a>
</a>
</div>
<ng-content select="[intro]"></ng-content>
<nz-tooltip [nzTitle]="nzExpanded?'Hide Code':'Show Code'">
<span class="code-expand-icon" nz-tooltip (click)="nzExpanded=!nzExpanded">
<nz-modal
[(nzVisible)]="nzExpanded"
[nzWidth]="nzWidth"
[nzTitle]="nzTitle"
[nzCancelText]="null"
[nzOkText]="'返回'"
(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
>
<nz-highlight [nzCode]="_code" [nzLanguage]="'typescript'"></nz-highlight>
</div>
</section>
</nz-modal>
</span>
</nz-tooltip>
</section>
<section class="highlight-wrapper" [ngClass]="{'highlight-wrapper-expand':true}">
<div class="highlight">
<div class="code-box-actions">
<nz-tooltip [nzTitle]="'Edit On StackBlitz'">
<i nz-tooltip class="anticon anticon-form code-box-code-copy" (click)="openOnStackBlitz()"></i>
</nz-tooltip>
<nz-tooltip [nzTitle]="'Copy Code'">
<i nz-tooltip class="anticon anticon-copy code-box-code-copy" [class.anticon-copy]="!_copied" [class.anticon-check]="_copied" [class.ant-tooltip-open]="_copied" (click)="copyCode(nzRawCode)"></i>
</nz-tooltip>
<nz-tooltip [nzTitle]="'Copy Generate Command'" *ngIf="nzGenerateCommand">
<i nz-tooltip class="anticon anticon-code-o code-box-code-copy" [class.anticon-code-o]="!_commandCopied" [class.anticon-check]="_commandCopied" [class.ant-tooltip-open]="_commandCopied" (click)="copyGenerateCommand(nzGenerateCommand)"></i>
</nz-tooltip>
</div>
<ng-content select="[code]"></ng-content>
<nz-highlight [nzCode]="_code" [nzLanguage]="'typescript'"></nz-highlight>
</div>
</section>
</section>
48 changes: 10 additions & 38 deletions site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,7 @@ import sdk from '@stackblitz/sdk';
@Component({
selector : 'nz-code-box',
encapsulation: ViewEncapsulation.None,
template : `
<section class="code-box" [ngClass]="{'expand':nzExpanded, 'code-box-target':nzSelected}" [attr.id]="nzId">
<section class="code-box-meta markdown">
<div class="code-box-title">
<a (click)="navigateToFragment()">{{ nzTitle }}
<a class="edit-button" [attr.href]="nzHref" target="_blank" style="">
<i class="anticon anticon-edit"></i>
</a>
</a>
</div>
<ng-content select="[intro]"></ng-content>
<nz-tooltip [nzTitle]="nzExpanded?'Hide Code':'Show Code'">
<span class="code-expand-icon" nz-tooltip (click)="nzExpanded=!nzExpanded">
<img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg" [class.code-expand-icon-show]="nzExpanded" [class.code-expand-icon-hide]="!nzExpanded">
<img alt="expand code" src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg" [class.code-expand-icon-show]="!nzExpanded" [class.code-expand-icon-hide]="nzExpanded">
</span>
</nz-tooltip>
</section>
<section class="highlight-wrapper" [ngClass]="{'highlight-wrapper-expand':nzExpanded}">
<div class="highlight">
<div class="code-box-actions">
<nz-tooltip [nzTitle]="'Edit On StackBlitz'">
<i nz-tooltip class="anticon anticon-form code-box-code-copy" (click)="openOnStackBlitz()"></i>
</nz-tooltip>
<nz-tooltip [nzTitle]="'Copy Code'">
<i nz-tooltip class="anticon anticon-copy code-box-code-copy" [class.anticon-copy]="!_copied" [class.anticon-check]="_copied" [class.ant-tooltip-open]="_copied" (click)="copyCode(nzRawCode)"></i>
</nz-tooltip>
<nz-tooltip [nzTitle]="'Copy Generate Command'" *ngIf="nzGenerateCommand">
<i nz-tooltip class="anticon anticon-code-o code-box-code-copy" [class.anticon-code-o]="!_commandCopied" [class.anticon-check]="_commandCopied" [class.ant-tooltip-open]="_commandCopied" (click)="copyGenerateCommand(nzGenerateCommand)"></i>
</nz-tooltip>
</div>
<ng-content select="[code]"></ng-content>
<nz-highlight [nzCode]="_code" [nzLanguage]="'typescript'"></nz-highlight>
</div>
</section>
</section>
`,
templateUrl: './nz-codebox.component.html',
styleUrls : [
'./nz-codebox.less'
]
Expand All @@ -57,6 +20,7 @@ export class NzCodeBoxComponent implements OnInit {
showIframe: boolean;
simulateIFrame: boolean;
iframe: SafeUrl;
nzWidth = window.innerWidth * 0.8;
@Input() nzTitle: string;
@Input() nzExpanded = false;
@Input() nzSelected = false;
Expand Down Expand Up @@ -97,6 +61,14 @@ export class NzCodeBoxComponent implements OnInit {
});
}

handleCancel(): void {
this.nzExpanded = false;
}

handleOk(): void {
this.nzExpanded = false;
}

copyGenerateCommand(command) {
this.copy(command).then(() => {
this._commandCopied = true;
Expand Down
11 changes: 10 additions & 1 deletion site_scripts/_site/src/style/demo.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
transition: background-color .4s;
width: 100%;
font-size: @font-size-base;
border-bottom: 1px dashed #ebedf0;
}

blockquote {
Expand Down Expand Up @@ -135,6 +136,13 @@
height: 16px;
line-height: 16px;
text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #ededed;
padding: 8px;
border-radius: 16px;
background-color: rgba(256, 256, 256, 0.6);
z-index: 1000;
}

.code-expand-icon-show,
Expand Down Expand Up @@ -168,9 +176,10 @@
}

.highlight-wrapper {
display: none;
display: block;
overflow: auto;
border-radius: 0 0 @border-radius-sm @border-radius-sm;
max-height: 150px;

&-expand {
display: block;
Expand Down

0 comments on commit 6d65ebb

Please sign in to comment.