uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor: use index files and short import paths.

Browse Source
This commit is contained in:
József Farkas
2016-08-24 21:25:20 +02:00
parent 137f29b1a8
commit 20f015c254
62 changed files with 78 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/side-menu/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './side-menu.component';

86
src/components/side-menu/side-menu.component.html Normal file
View File

@@ -0,0 +1,86 @@
<ul class="menu--top">
<li class="sidebar__level-1--item">
<div class="sidebar__level-1">
<i class="fa fa-keyboard-o"></i> Keymaps
<a href="#" class="btn btn-default pull-right btn-sm">
<i class="fa fa-plus"></i>
</a>
<i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, keymapElement)"></i>
</div>
<ul #keymapElement>
<li *ngFor="let keymap of keymaps" class="sidebar__level-2--item">
<div class="sidebar__level-2">
<a [routerLink]="['/keymap', keymap.id]">{{keymap.name}}</a>
<i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"></i>
</div>
</li>
</ul>
</li>
<li class="sidebar__level-1--item">
<div class="sidebar__level-1">
<i class="fa fa-play"></i> Macros
<a href="#" class="btn btn-default pull-right btn-sm">
<i class="fa fa-plus"></i>
</a>
<i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, macroElement)"></i>
</div>
<ul #macroElement>
<li *ngFor="let macro of macros" class="sidebar__level-2--item">
<div class="sidebar__level-2">
<a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
</div>
</li>
</ul>
</li>
<li class="sidebar__level-1--item">
<div class="sidebar__level-1">
<i class="fa fa-puzzle-piece"></i> Add-on modules
<i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, addonElement)"></i>
</div>
<ul #addonElement>
<li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
<div class="sidebar__level-2">
<a href="#">Key cluster</a>
</div>
</li>
<li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
<div class="sidebar__level-2">
<a href="#">Trackball</a>
</div>
</li>
<li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
<div class="sidebar__level-2">
<a href="#">Touchpad</a>
</div>
</li>
<li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
<div class="sidebar__level-2">
<a href="#">Trackpoint</a>
</div>
</li>
</ul>
</li>
<li class="sidebar__level-1--item">
<div class="sidebar__level-1">
<i class="fa fa-exclamation-triangle "></i> Legacy
<i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, legacyElement)"></i>
</div>
<ul #legacyElement>
<li class="sidebar__level-2--item" data-name="Keymap legacy" data-abbrev="QTY">
<div class="sidebar__level-2">
<a [routerLink]="['/legacy', 'keymap']">Keymap HTML</a>
</div>
</li>
<li class="sidebar__level-2--item " data-name="Macro legacy" data-abbrev="DVR">
<div class="sidebar__level-2">
<a [routerLink]="['/legacy', 'macro']">Macro</a>
</div>
</li>
</ul>
</li>
</ul>
<ul class="menu--bottom">
<li class="sidebar__level-1--item">
<div class="sidebar__level-1"><i class="fa fa-gear"></i> Settings</div>
</li>
</ul>

142
src/components/side-menu/side-menu.component.scss Normal file
View File

@@ -0,0 +1,142 @@
:host {
background-color: #f5f5f5;
border-right: 1px solid #ccc;
position: fixed;
overflow-y: auto;
width: 250px;
height: 100%;
}
a {
color: #333;
}
ul ul {
max-height: 200px;
transition: max-height 500ms ease-in;
overflow: hidden;
}
ul ul.slide-up {
max-height: 0;
transition: max-height 500ms ease-out;
}
// General list styles for the sidebar-menu.
ul {
padding: 0;
margin: 0;
li {
list-style: none;
padding: 0;
}
}
.sidebar {
&__level-1 {
padding: 0.5rem 1rem;
font-size: 2rem;
line-height: 3rem;
&:hover {
.fa-chevron-up,
.fa-chevron-down {
display: inline-block;
}
}
&--item {
margin-top: 0;
&:nth-child(1) {
margin: 0;
}
}
.sidebar__name {
width: 100%;
display: block;
}
.fa-chevron-up,
.fa-chevron-down {
margin-right: 1rem;
font-size: 1.5rem;
position: relative;
top: 0.5rem;
display: none;
}
}
&__level-2 {
&--item {
padding: 0 20px 0 0;
position: relative;
&.active {
background-color: #555;
color: #fff;
.fa-star {
color: #fff;
}
&:hover {
background-color: #555;
}
}
// General "right side" icon theming.
.fa.pull-right {
position: relative;
top: 2px;
}
.fa-star {
color: #666;
}
a {
display: block;
width: 100%;
padding: 0 15px 0 30px;
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
// General hover over menu items.
&__level-1,
&__level-2--item {
&:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05);
}
}
&__fav {
position: absolute;
right: 19px;
top: 3px;
}
}
.menu--bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
.sidebar {
&__level-1 {
background-color: transparent;
padding: 1rem;
}
}
}

35
src/components/side-menu/side-menu.component.ts Normal file
View File

@@ -0,0 +1,35 @@
import { Component, OnInit } from '@angular/core';
import { Keymap } from '../../../config-serializer/config-items/Keymap';
import { UhkConfigurationService } from '../../services/uhk-configuration.service';
import { Macro } from '../../../config-serializer/config-items/Macro';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'side-menu',
template: require('./side-menu.component.html'),
styles: [require('./side-menu.component.scss')],
providers: [UhkConfigurationService],
directives: [ROUTER_DIRECTIVES]
})
export class SideMenuComponent implements OnInit {
private keymaps: Keymap[];
private macros: Macro[];
constructor(private uhkConfigurationService: UhkConfigurationService) { }
ngOnInit() {
this.keymaps = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements;
this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements;
}
/* tslint:disable:no-unused-variable: This function is used in the template */
private toggleHide(event: Event, view: Element) {
/* tslint:enable:no-unused-variable */
let header: DOMTokenList = (<Element> event.target).classList;
view.classList.toggle('slide-up');
header.toggle('fa-chevron-up');
header.toggle('fa-chevron-down');
}
}