Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-11-04 09:47:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

Zippy UI enhancement

Browse Source
This commit is contained in:
Roman Hotsiy 2016-06-29 18:02:29 +03:00
parent 0b0f28cd4a
commit 44e52febc6
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
lib/shared/components/Zippy/zippy.html
View File

@ -1,11 +1,13 @@
<div class="zippy zippy-{{type}}" [ngClass]="{'zippy-empty': empty}"> <div class="zippy zippy-{{type}}" [ngClass]="{'zippy-empty': empty, 'zippy-hidden': !visible}">
<div class="zippy-title" (click)="toggle()"> <div *ngIf='!headless' class="zippy-title" (click)="toggle()">
<span class="zippy-indicator">{{ visible ? '&#9662;' : '&#9656;' }}</span> <span class="zippy-indicator">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
</svg>
</span>
{{title}} {{title}}
</div> </div>
<div class="zippy-content" @openClose="visible ? 'expanded' : 'collapsed'"> <div class="zippy-content">
<div class="zippy-content-wrap"> <ng-content></ng-content>
<ng-content></ng-content>
</div>
</div> </div>
</div> </div>

47
lib/shared/components/Zippy/zippy.scss
View File

@ -38,19 +38,42 @@ $zippy-redirect-bg-color: rgba($zippy-redirect-color, .08);
background-color: $zippy-info-bg-color; background-color: $zippy-info-bg-color;
} }
} }
.zippy-indicator svg {
height: 1.2em;
vertical-align: middle;
transition: all 0.3s ease;
transform: rotateZ(-180deg);
}
.zippy-hidden > .zippy-title svg {
transform: rotateZ(0);
}
.zippy-title polygon {
.zippy-success > & {
fill: $zippy-success-color;
}
.zippy-error > & {
fill: $zippy-error-color;
}
.zippy-redirect > & {
fill: $zippy-redirect-color;
}
.zippy-info > & {
fill: $zippy-info-color;
}
}
span.zippy-indicator { span.zippy-indicator {
width: 1em;
font-size: 1.2em; font-size: 1.2em;
margin-right: 0.2em; text-align: center;
position: relative; display: inline-block;
top: 0;
} }
.zippy-content { .zippy-content {
overflow: hidden;
}
.zippy-content-wrap {
padding: 15px 0; padding: 15px 0;
} }
@ -60,7 +83,13 @@ span.zippy-indicator {
} }
.zippy-indicator { .zippy-indicator {
display: none; svg {
display: none;
}
&:before {
content: "—";
font-weight: bold;
}
} }
.zippy-content { .zippy-content {
@ -68,7 +97,7 @@ span.zippy-indicator {
} }
} }
.zippy-hidden { .zippy-hidden > .zippy-content {
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
height: 0; height: 0;

17
lib/shared/components/Zippy/zippy.ts
View File

@ -1,31 +1,20 @@
'use strict'; 'use strict';
import { Component, EventEmitter, Output, Input, import { Component, EventEmitter, Output, Input } from '@angular/core';
trigger, state, animate, transition, style } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common'; import { CORE_DIRECTIVES } from '@angular/common';
@Component({ @Component({
selector: 'zippy', selector: 'zippy',
templateUrl: './zippy.html', templateUrl: './zippy.html',
styleUrls: ['./zippy.css'], styleUrls: ['./zippy.css'],
directives: [CORE_DIRECTIVES], directives: [CORE_DIRECTIVES]
animations: [
trigger('openClose', [
state('collapsed, void',
style({ height: '0px' })),
state('expanded',
style({ height: '*' })),
transition('collapsed <=> expanded', [
animate(200)
])
])
],
}) })
export class Zippy { export class Zippy {
@Input() type = 'general'; @Input() type = 'general';
@Input() visible = false; @Input() visible = false;
@Input() empty = false; @Input() empty = false;
@Input() title; @Input() title;
@Input() headless: boolean = false;
@Output() open = new EventEmitter(); @Output() open = new EventEmitter();
@Output() close = new EventEmitter(); @Output() close = new EventEmitter();
toggle() { toggle() {