feat: interactive

.angular-cli.json

@@ -75,7 +75,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "component": {}
   }
 }

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",

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",

src/app/ControlPage/control/control.component.html

 <app-controlnav></app-controlnav>
 <app-ssh></app-ssh>
-<app-rdp></app-rdp>
+<!--<app-rdp></app-rdp>-->

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;
+}

src/app/app.component.html

 <app-element-nav *ngIf="DataStore.NavShow"></app-element-nav>
 <nav *ngIf="DataStore.NavShow"></nav>
 <router-outlet></router-outlet>
+<app-element-interactive></app-element-interactive>

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,

src/app/elements/interactive/interactive.component.html

+
+<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>

src/app/elements/interactive/interactive.component.scss

+@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);
+    }
+  }
+}

src/app/elements/interactive/interactive.component.spec.ts

+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();
+  });
+});

src/app/elements/interactive/interactive.component.ts

+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() {
+  }
+
+}

src/styles.css

@@ -15,6 +15,7 @@ body {
   height: 100%;
   width: 100%;
   background-color: rgb(243, 243, 244);
+  overflow-y: hidden;
 }
 
 app-root {