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

Move style to angular (#72)

Browse Source 
* Move global styles to angular app
* Create dummy notification component
* Create dummy html for macro
* Fix click on sidemenu, so that link is the whole line
This commit is contained in:
Nejc Zdovc
2016-08-15 12:59:27 +02:00
committed by József Farkas
parent 094060d8db
commit d5b5f3293a
19 changed files with 566 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintrc.json
View File

@@ -26,7 +26,7 @@
"unit-case": "lower",
"unit-no-unknown": true,
"unit-whitelist": ["px", "%", "deg", "ms", "em", "rem"],
"unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv"],
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",

14
index.html
View File

@@ -6,16 +6,9 @@
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<link href="css/macro.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="github-fork-ribbon">
<a class="" href="https://github.com/UltimateHackingKeyboard/agent" title="Fork me on GitHub">Fork me on GitHub</a>
</div>
<!-- Google Tag Manager -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB" height="0" width="0" style="display:none;visibility:hidden"></iframe>
@@ -29,13 +22,6 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</script>
<!-- End Google Tag Manager -->
<!-- TODO move to component -->
<div class="notification" style="display: none">
<span class="notificatin__text">Keymap removed</span>
<a href="#" class="notification__action notification__action--undo">Undo</a>
<span class="notification__dismiss">&times;</span>
</div>
<main-app></main-app>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- TODO remove in near future -->

3
src/app.module.ts
View File

@@ -11,9 +11,10 @@ import { MainAppComponent } from './main-app.component';
import { KeymapComponent } from './components/keymap/keymap.component';
import { MacroComponent } from './components/macro/macro.component';
import { LegacyLoaderComponent } from './components/legacy/legacy-loader.component';
import { NotificationComponent } from './components/notification/notification.component';
@NgModule({
declarations: [MainAppComponent, KeymapComponent, MacroComponent, LegacyLoaderComponent],
declarations: [MainAppComponent, KeymapComponent, MacroComponent, LegacyLoaderComponent, NotificationComponent],
imports: [BrowserModule],
providers: [
DataProviderService,

77
src/components/keymap/keymap.component.scss
View File

@@ -4,10 +4,6 @@
display: block;
}
.uhk--wrapper {
height: calc(100% - 95px);
}
button {
margin: 2px;
}
@@ -24,10 +20,79 @@ svg-keyboard-popover {
.keyboard-slider {
height: calc(100% - 45px);
position: relative;
overflow: hidden;
width: 100%;
}
.uhk__layer-switcher--wrapper {
margin-bottom: 2rem;
.keymap {
&__is-default {
&.fa-star {
color: #333;
}
&.fa-star-o {
color: #333;
}
&:hover {
color: #555;
cursor: pointer;
}
}
&__remove {
font-size: 0.75em;
top: 0.3em;
&:hover {
cursor: pointer;
color: #900;
}
}
}
.pane-title {
margin-bottom: 1em;
&__name,
&__abbrev {
&[contenteditable=true] {
border: none;
border-bottom: 2px dotted #999;
padding: 0 0.5rem;
margin: 0 0.25rem;
&.active {
box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
border-color: transparent;
}
}
}
}
.uhk {
&--wrapper {
height: calc(100% - 95px);
}
&__layer-switcher {
&--wrapper {
position: relative;
margin-bottom: 2rem;
&:before {
content: attr(data-title);
display: inline-block;
position: absolute;
bottom: -0.3em;
right: 100%;
font-size: 2.4rem;
padding-right: 0.25em;
margin: 0;
}
}
}
}
@keyframes animate-center-left {

78
src/components/macro/macro.component.html
View File

@@ -1 +1,77 @@
Macro
<div class="macro--edit main-content__inner">
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="fa fa-play"></i>
<span class="macro__name pane-title__name" contenteditable="true">Macro1</span> <i class="fa"></i>
</h1>
</div>
<div class="row">
<div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item macro-settings" style="display: none;">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press letter A
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-square"></i> Press Alt+Tab
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-clock-o"></i> Delay of 235ms
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Press button 1
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item">
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
<i class="fa fa-mouse-pointer"></i> Scroll by 150px downward
<i class="glyphicon glyphicon-pencil action--edit"></i>
<i class="glyphicon glyphicon-trash action--trash"></i>
</div>
<div class="list-group-item action--item add-new__action-item no-reorder">
<a href="#" class="add-new__action-item--link"><i class="fa fa-plus"></i> Add new action item</a>
</div>
<div class="list-group-item new-macro-settings">
<div class="helper"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<div class="row">
<div class="col-sm-12 flex-button-wrapper">
<button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
<button class="btn btn-default btn-sm pull-right flex-button settings-cancel" style="margin-right: .5em;">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>

93
src/components/macro/macro.component.scss
View File

@@ -0,0 +1,93 @@
.main-wrapper {
width: 500px;
}
h1 {
margin-bottom: 3rem;
}
.action--item {
padding-left: 8px;
}
.action--item.active,
.action--item.active:hover {
background-color: white;
font-weight: bold;
color: black;
border-color: black;
z-index: 10;
}
.macro-settings {
border: 1px solid black;
border-top-color: #999;
z-index: 100;
}
.macro-settings .helper {
position: absolute;
display: block;
height: 13px;
background: #fff;
width: 100%;
left: 0;
top: -14px;
}
.action--item.active.callout,
.macro-settings.callout {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
}
.list-group-item .move-handle:hover {
cursor: move;
}
.action--edit {
float: right;
}
.action--edit:hover {
color: #337ab7;
cursor: pointer;
}
.action--trash {
float: right;
margin-right: 1rem;
}
.action--trash:hover {
color: #d9534f;
cursor: pointer;
}
.action--edit__form {
background-color: #fff;
margin-left: -0.5rem;
margin-right: -15px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #ddd;
}
.flex-button-wrapper {
display: flex;
flex-direction: row-reverse;
}
.flex-button {
align-self: flex-end;
}
.add-new__action-item:hover {
cursor: pointer;
}
.add-new__action-item--link,
.add-new__action-item--link:active,
.add-new__action-item--link:hover {
text-decoration: none;
color: #337ab7;
}

3
src/components/notification/notification.component.html Normal file
View File

@@ -0,0 +1,3 @@
<span class="text">Keymap removed</span>
<a href="#" class="action action--undo">Undo</a>
<span class="dismiss">&times;</span>

38
src/components/notification/notification.component.scss Normal file
View File

@@ -0,0 +1,38 @@
:host {
padding: 1rem 1.5rem;
box-shadow: 0 0 0 1px #000;
border-radius: 0.5rem;
position: absolute;
top: 2rem;
right: 2rem;
z-index: 10000;
background-color: #333;
color: #eee;
display: none;
}
.action {
margin-left: 1rem;
margin-right: 1rem;
color: #5bc0de;
text-transform: uppercase;
font-weight: bold;
&:focus,
&:active,
&:hover {
text-decoration: none;
color: #5bc0de;
}
}
.dismiss {
position: relative;
bottom: 1px;
color: #ccc;
&:hover {
cursor: pointer;
color: #fff;
}
}

12
src/components/notification/notification.component.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'notification',
template: require('./notification.component.html'),
styles: [require('./notification.component.scss')]
})
export class NotificationComponent {
constructor() {
}
}

20
src/components/popover/popover.component.scss
View File

@@ -28,6 +28,7 @@
.menu-tabs--item {
display: flex;
align-items: center;
cursor: pointer;
i {
margin-right: 0.25em;
@@ -41,10 +42,19 @@
padding: 10px 24px;
}
mouse-tab {
&.popover-content {
padding: 10px;
display: flex;
align-items: center;
.select2-item {
position: relative;
font-size: 1.5rem;
&.keymap-name--wrapper {
padding-left: 50px;
}
.layout-segment-code {
height: 2rem;
position: absolute;
left: 0;
top: 50%;
margin-top: -1rem;
}
}

6
src/components/popover/tab/keypress/keypress-tab.component.html
View File

@@ -26,4 +26,10 @@
<select2 #longPressSelect [data]="longPressGroups" [value]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
[width]="140"></select2>
<icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
</div>
<div class="disabled-state--text">
<i class="fa fa-info-circle"></i>
When a key is configured as layer switcher key, you can't assign other functions to it.
To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
</div>

34
src/components/popover/tab/keypress/keypress-tab.component.scss
View File

@@ -1,6 +1,7 @@
:host {
display: flex;
flex-direction: column;
position: relative;
.scancode-options {
margin-bottom: 10px;
@@ -41,4 +42,37 @@
margin-left: 0.6em;
}
}
.setting-label {
&.disabled {
color: #999;
}
}
.disabled-state--text {
display: none;
position: absolute;
top: 50%;
margin-top: -4rem;
color: #31708f;
padding-right: 40px;
.fa {
font-size: 2.6rem;
float: left;
padding: 1rem 1.5rem 2rem;
}
}
&.disabled {
.scancode-options,
.modifier-options,
.long-press-container {
visibility: hidden;
}
.disabled-state--text {
display: block;
}
}
}

41
src/components/popover/tab/mouse/mouse-tab.component.scss
View File

@@ -1,27 +1,44 @@
:host {
display: flex;
&.popover-content {
padding: 10px;
display: flex;
align-items: center;
}
.mouse-action {
ul {
.nav {
border-right: 1px solid #ccc;
li {
a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&.selected {
font-style: italic;
}
}
&.active {
a:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: -4rem;
border-color: transparent transparent transparent #337ab7;
border-style: solid;
border-width: 2rem;
a {
&.selected {
font-style: normal;
}
&:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: -4rem;
border-color: transparent transparent transparent #337ab7;
border-style: solid;
border-width: 2rem;
}
}
}
}

4
src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss
View File

@@ -1,8 +1,8 @@
button {
display: inline-block;
margin: 0 0 0 .25rem;
margin: 0 0 0 0.25rem;
}
.fa-circle {
color:#c00;
color: #c00;
}

11
src/components/sidemenu/side-menu.component.html
View File

@@ -11,7 +11,7 @@
<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 class="fa fa-star pull-right"></i>
<i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"></i>
</div>
</li>
</ul>
@@ -28,7 +28,6 @@
<li *ngFor="let macro of macros" class="sidebar__level-2--item">
<div class="sidebar__level-2">
<a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
<i class="fa fa-star pull-right"></i>
</div>
</li>
</ul>
@@ -41,22 +40,22 @@
<ul #addonElement>
<li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
<div class="sidebar__level-2">
Key cluster
<a href="#">Key cluster</a>
</div>
</li>
<li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
<div class="sidebar__level-2">
Trackball
<a href="#">Trackball</a>
</div>
</li>
<li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
<div class="sidebar__level-2">
Toucpad
<a href="#">Touchpad</a>
</div>
</li>
<li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
<div class="sidebar__level-2">
Trackpoint
<a href="#">Trackpoint</a>
</div>
</li>
</ul>

123
src/components/sidemenu/side-menu.component.scss
View File

@@ -13,11 +13,130 @@ a {
ul ul {
max-height: 200px;
transition: max-height 0.5s ease-in;
transition: max-height 500ms ease-in;
overflow: hidden;
}
ul ul.slide-up {
max-height: 0;
transition: max-height 0.5s ease-out;
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;
}
}
}

4
src/main-app.component.html
View File

@@ -1,4 +1,8 @@
<notification></notification>
<side-menu></side-menu>
<div id="main-content" class="split split-horizontal container-fluid main-content">
<router-outlet></router-outlet>
</div>
<div class="github-fork-ribbon">
<a class="" href="https://github.com/UltimateHackingKeyboard/agent" title="Fork me on GitHub">Fork me on GitHub</a>
</div>

51
src/main-app.component.scss
View File

@@ -1,10 +1,59 @@
:host {
main-app {
display: block;
height: 100vh;
width: 100%;
overflow: hidden;
position: relative;
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 26px;
}
}
.main-content {
height: 100%;
margin-left: 250px;
}
.select2 {
&-container {
z-index: 100000;
}
&-results {
text-align: center;
}
}
/* GitHub ribbon */
.github-fork-ribbon {
background-color: #a00;
overflow: hidden;
white-space: nowrap;
position: fixed;
right: -50px;
bottom: 40px;
z-index: 999999;
/* stylelint-disable indentation */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
/* stylelint-enable indentation */
a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
text-shadow: 0 0 5px #444;
}
}

5
src/main-app.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import {Component, ViewEncapsulation} from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { SideMenuComponent } from './components/sidemenu/side-menu.component';
@@ -8,7 +8,8 @@ import { SideMenuComponent } from './components/sidemenu/side-menu.component';
selector: 'main-app',
template: require('./main-app.component.html'),
styles: [require('./main-app.component.scss')],
directives: [SideMenuComponent, ROUTER_DIRECTIVES]
directives: [SideMenuComponent, ROUTER_DIRECTIVES],
encapsulation: ViewEncapsulation.None
})
export class MainAppComponent {
constructor() {