From 527735a221a3e86857e1a63040734aadfa2dd1b5 Mon Sep 17 00:00:00 2001
From: liuzheng712 <liuzheng712@gmail.com>
Date: Fri, 29 Dec 2017 08:52:42 +0800
Subject: [PATCH] feat: interactive
---
.angular-cli.json | 2 +-
package-lock.json | 10 ++
package.json | 2 +
.../control/control.component.html | 2 +-
src/app/app.component.css | 7 +
src/app/app.component.html | 1 +
src/app/app.module.ts | 6 +-
.../interactive/interactive.component.html | 15 ++
.../interactive/interactive.component.scss | 138 ++++++++++++++++++
.../interactive/interactive.component.spec.ts | 25 ++++
.../interactive/interactive.component.ts | 15 ++
src/styles.css | 1 +
12 files changed, 220 insertions(+), 4 deletions(-)
create mode 100644 src/app/elements/interactive/interactive.component.html
create mode 100644 src/app/elements/interactive/interactive.component.scss
create mode 100644 src/app/elements/interactive/interactive.component.spec.ts
create mode 100644 src/app/elements/interactive/interactive.component.ts
diff --git a/.angular-cli.json b/.angular-cli.json
index e40ce29..7d00ced 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -75,7 +75,7 @@
}
},
"defaults": {
- "styleExt": "css",
+ "styleExt": "scss",
"component": {}
}
}
diff --git a/package-lock.json b/package-lock.json
index b2f1031..2fdb413 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1662,6 +1662,11 @@
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
"dev": true
},
+ "compass-mixins": {
+ "version": "0.12.10",
+ "resolved": "https://registry.npmjs.org/compass-mixins/-/compass-mixins-0.12.10.tgz",
+ "integrity": "sha1-zZ8V+CnE6WDMQ7sibwSbKL65nUE="
+ },
"component-bind": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
@@ -12619,6 +12624,11 @@
}
}
},
+ "sass-math": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/sass-math/-/sass-math-1.0.0.tgz",
+ "integrity": "sha1-swsquBY52q5m9cNnvC2Fq0EecWk="
+ },
"saucelabs": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz",
diff --git a/package.json b/package.json
index 0fc8a1c..2812e31 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"body-parser": "^1.18.2",
"bootstrap": "^4.0.0-alpha.6",
"clipboard": "^1.7.1",
+ "compass-mixins": "^0.12.10",
"core-js": "^2.4.1",
"directory-encoder": "^0.9.2",
"filetree-css": "^1.0.0",
@@ -45,6 +46,7 @@
"peity": "^3.2.1",
"roboto-fontface": "^0.8.0",
"rxjs": "^5.4.2",
+ "sass-math": "^1.0.0",
"socket.io": "^2.0.3",
"socket.io-client": "^2.0.4",
"ssh-keygen": "^0.4.1",
diff --git a/src/app/ControlPage/control/control.component.html b/src/app/ControlPage/control/control.component.html
index c8dfedf..5c7096b 100644
--- a/src/app/ControlPage/control/control.component.html
+++ b/src/app/ControlPage/control/control.component.html
@@ -1,3 +1,3 @@
<app-controlnav></app-controlnav>
<app-ssh></app-ssh>
-<app-rdp></app-rdp>
+<!--<app-rdp></app-rdp>-->
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 94d0659..aa2a3ea 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -20,3 +20,10 @@ nav {
height: 30px;
width: 100%;
}
+
+app-element-interactive {
+ position: absolute;
+ display: inline-block;
+ bottom: 120px;
+ left: 100px;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fae927b..1549caa 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,4 @@
<app-element-nav *ngIf="DataStore.NavShow"></app-element-nav>
<nav *ngIf="DataStore.NavShow"></nav>
<router-outlet></router-outlet>
+<app-element-interactive></app-element-interactive>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c9be16e..f90458c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,13 +18,14 @@ import {HttpModule} from '@angular/http';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
+// Elements
import {ElementFooterComponent} from './elements/footer/footer.component';
import {ElementTermComponent} from './elements/term/term.component';
-
-
+import {ElementInteractiveComponent} from './elements/interactive/interactive.component';
import {ElementNavComponent} from './elements/nav/nav.component';
import {LoginComponent} from './BasicPage/login/login.component';
import {ElementPopupComponent} from './elements/popup/popup.component';
+// pages
import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
import {CleftbarComponent} from './ControlPage/cleftbar/cleftbar.component';
@@ -59,6 +60,7 @@ import {WindowsComponent} from './monitor-page/windows/windows.component';
ElementFooterComponent,
ElementPopupComponent,
ElementTermComponent,
+ ElementInteractiveComponent,
LoginComponent,
RdpComponent,
SshComponent,
diff --git a/src/app/elements/interactive/interactive.component.html b/src/app/elements/interactive/interactive.component.html
new file mode 100644
index 0000000..ce115f9
--- /dev/null
+++ b/src/app/elements/interactive/interactive.component.html
@@ -0,0 +1,15 @@
+
+<div class="menu">
+ <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
+ <label class="menu-open-button" for="menu-open">
+ <span class="hamburger hamburger-1"></span>
+ <span class="hamburger hamburger-2"></span>
+ <span class="hamburger hamburger-3"></span>
+ </label>
+
+ <a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
+ <a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
+ <a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
+ <a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
+
+</div>
diff --git a/src/app/elements/interactive/interactive.component.scss b/src/app/elements/interactive/interactive.component.scss
new file mode 100644
index 0000000..257ff68
--- /dev/null
+++ b/src/app/elements/interactive/interactive.component.scss
@@ -0,0 +1,138 @@
+@import "~sass-math/math";
+//vars
+$fg: #ff4081;
+$bg: #3f51b5;
+$pi: pi();
+
+//config
+$menu-items: 5;
+$open-distance: 115px;
+$opening-angle: $pi - .2;
+
+%goo {
+ filter: url('#shadowed-goo');
+ // debug
+ //background:rgba(255,0,0,0.2);
+}
+
+%ball {
+ background: $fg;
+ border-radius: 100%;
+ width: 80px;
+ height: 80px;
+ margin-left: -40px;
+ position: absolute;
+ top: 20px;
+ color: white;
+ text-align: center;
+ line-height: 80px;
+ transform: translate3d(0, 0, 0);
+ transition: transform ease-out 200ms;
+}
+
+.menu-open {
+ display: none;
+}
+
+.menu-item {
+ @extend %ball;
+}
+
+.hamburger {
+ $width: 25px;
+ $height: 3px;
+ width: $width;
+ height: $height;
+ background: white;
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -$width/2;
+ margin-top: -$height/2;
+ transition: transform 200ms;
+}
+
+$hamburger-spacing: 8px;
+.hamburger-1 {
+ transform: translate3d(0, -$hamburger-spacing, 0);
+}
+
+.hamburger-2 {
+ transform: translate3d(0, 0, 0);
+}
+
+.hamburger-3 {
+ transform: translate3d(0, $hamburger-spacing, 0);
+}
+
+.menu-open:checked + .menu-open-button {
+ .hamburger-1 {
+ transform: translate3d(0, 0, 0) rotate(45deg);
+ }
+ .hamburger-2 {
+ transform: translate3d(0, 0, 0) scale(0.1, 1);
+ }
+ .hamburger-3 {
+ transform: translate3d(0, 0, 0) rotate(-45deg);
+ }
+}
+
+.menu {
+ @extend %goo;
+ $width: 380px;
+ $height: 250px;
+ position: absolute;
+ left: 50%;
+ margin-left: -$width/2;
+ padding-top: 20px;
+ padding-left: $width/2;
+ width: $width;
+ height: $height;
+ box-sizing: border-box;
+ font-size: 20px;
+ text-align: left;
+}
+
+.menu-item {
+ &:hover {
+ background: white;
+ color: $fg;
+ }
+ @for $i from 1 through $menu-items {
+ &:nth-child(#{$i+2}) {
+ transition-duration: 10ms+(60ms*($i));
+ }
+ }
+}
+
+.menu-open-button {
+ @extend %ball;
+ z-index: 2;
+ transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+ transition-duration: 400ms;
+ transform: scale(1.1, 1.1) translate3d(0, 0, 0);
+ cursor: pointer;
+}
+
+.menu-open-button:hover {
+ transform: scale(1.2, 1.2) translate3d(0, 0, 0);
+}
+
+.menu-open:checked + .menu-open-button {
+ transition-timing-function: linear;
+ transition-duration: 200ms;
+ transform: scale(0.8, 0.8) translate3d(0, 0, 0);
+}
+
+.menu-open:checked ~ .menu-item {
+ transition-timing-function: cubic-bezier(0.935, 0.000, 0.340, 1.330);
+ @for $i from 1 through $menu-items {
+ $angle: (($pi - $opening-angle)/2)+(($opening-angle/($menu-items - 1))*($i - 1)+($pi*0.43));
+
+ &:nth-child(#{$i+2}) {
+ transition-duration: 80ms+(80ms*$i);
+ transform: translate3d(sin($angle)*$open-distance, cos($angle)*$open-distance, 0);
+ }
+ }
+}
diff --git a/src/app/elements/interactive/interactive.component.spec.ts b/src/app/elements/interactive/interactive.component.spec.ts
new file mode 100644
index 0000000..dd9630f
--- /dev/null
+++ b/src/app/elements/interactive/interactive.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ElementInteractiveComponent } from './interactive.component';
+
+describe('ElementInteractiveComponent', () => {
+ let component: ElementInteractiveComponent;
+ let fixture: ComponentFixture<ElementInteractiveComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ElementInteractiveComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ElementInteractiveComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/elements/interactive/interactive.component.ts b/src/app/elements/interactive/interactive.component.ts
new file mode 100644
index 0000000..5824fa7
--- /dev/null
+++ b/src/app/elements/interactive/interactive.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-element-interactive',
+ templateUrl: './interactive.component.html',
+ styleUrls: ['./interactive.component.scss']
+})
+export class ElementInteractiveComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/styles.css b/src/styles.css
index 47574f3..1b14333 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -15,6 +15,7 @@ body {
height: 100%;
width: 100%;
background-color: rgb(243, 243, 244);
+ overflow-y: hidden;
}
app-root {
--
2.18.0