Add initial version of the application's UI.
This commit is contained in:
Arpad Csanyi
104
app.css
Normal file
104
app.css
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
/* * * * * * * * * * *
|
||||||
|
* Split js theming. *
|
||||||
|
* * * * * * * * * * */
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
/* padding: 8px; */
|
||||||
|
margin: 0;
|
||||||
|
/*background-color: #F6F6F6;*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.split {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
border: 1px solid #C0C0C0;
|
||||||
|
box-shadow: inset 0 1px 2px #e4e4e4;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.gutter {
|
||||||
|
background-color: #eee;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
}
|
||||||
|
.gutter.gutter-horizontal {
|
||||||
|
cursor: col-resize;
|
||||||
|
background-image: url('./images/grips/vertical.png');
|
||||||
|
}
|
||||||
|
.gutter.gutter-vertical {
|
||||||
|
cursor: row-resize;
|
||||||
|
background-image: url('./images/grips/horizontal.png');
|
||||||
|
}
|
||||||
|
.split.split-horizontal, .gutter.gutter-horizontal {
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-menu ul {
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-menu ul li {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pane-title {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keymap__name.active,
|
||||||
|
.keymap__abbrev.active {
|
||||||
|
box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
margin: 0 -.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keymap__name,
|
||||||
|
.keymap__abbrev {
|
||||||
|
border-bottom: 2px dotted #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keymap__abbrev,
|
||||||
|
.keymap__abbrev.active {
|
||||||
|
padding: 0 .5rem;
|
||||||
|
margin: 0 .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keymap__is-default.fa-star {
|
||||||
|
color: #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keymap__is-default.fa-star-o {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keymap__is-default:hover {
|
||||||
|
color: #ffd700;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unk--wrapper {
|
||||||
|
/*margin-top: 10rem;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.uhk {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-carousel .item img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:not(.btn-primary) {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
78
app.html
Normal file
78
app.html
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Ultimate Hacking Keyboard Configurator</title>
|
||||||
|
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="bower_components/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="bower_components/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="bower_components/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="app.css" rel="stylesheet" type="text/css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="sidebar-menu" class="split split-horizontal" style=""></div>
|
||||||
|
<div id="main-content" class="split split-horizontal container" style="">
|
||||||
|
<div class="keymap keymap--qwerty">
|
||||||
|
<div class="row">
|
||||||
|
<h1 class="col-xs-12 pane-title">
|
||||||
|
<i class="fa fa-keyboard-o"></i>
|
||||||
|
<span class="keymap__name">QWERTY</span> keymap (<span class="keymap__abbrev">QTY</span>)
|
||||||
|
<i class="fa fa-star-o fa-star keymap__is-default"></i>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
</div>
|
||||||
|
<div class="row unk--wrapper">
|
||||||
|
<div class="col-xs-12 text-center">
|
||||||
|
<div class="" role="" style="margin-bottom: 2rem;">
|
||||||
|
<button type="button" class="btn btn-primary btn-lg">Base</button>
|
||||||
|
<button type="button" class="btn btn-default btn-lg">Mod</button>
|
||||||
|
<button type="button" class="btn btn-default btn-lg">Fn</button>
|
||||||
|
<button type="button" class="btn btn-default btn-lg">Mouse</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<div id="owl-example" class="owl-carousel owl-theme">
|
||||||
|
<div class="item col-xs-12">
|
||||||
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item col-xs-12">
|
||||||
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item col-xs-12">
|
||||||
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item col-xs-12">
|
||||||
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>
|
||||||
|
<script type="text/javascript" src="./bower_components/Split.js/split.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/owl.carousel/dist/owl.carousel.js"></script>
|
||||||
|
<script type="text/javascript" src="./app.js"></script>
|
||||||
|
|
||||||
|
<script type="text/x-handlebars-template" id="sidebar-menu--source">
|
||||||
|
<ul>
|
||||||
|
{{#each menu}}
|
||||||
|
<li><i class='fa fa-{{icon}}'></i> {{name}}
|
||||||
|
{{#if children}}
|
||||||
|
<ul>
|
||||||
|
{{#each children}}
|
||||||
|
<li><i class="fa fa-{{icon}}"></i> {{name}}</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
{{/if}}
|
||||||
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
121
app.js
Normal file
121
app.js
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
$(function() {
|
||||||
|
Split(["#sidebar-menu", "#main-content"], {
|
||||||
|
gutterSize: 8,
|
||||||
|
sizes: [5, 95],
|
||||||
|
minSize: 250
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handlebars template for Sidebar menu.
|
||||||
|
var sidebarMenuSource = $('#sidebar-menu--source').html();
|
||||||
|
var sidebarMenuTemplate = Handlebars.compile(sidebarMenuSource);
|
||||||
|
$('#sidebar-menu').html(sidebarMenuTemplate(menuObject));
|
||||||
|
|
||||||
|
// ========================
|
||||||
|
// Keymap related settings.
|
||||||
|
// ========================
|
||||||
|
$('.keymap__name, .keymap__abbrev').on('mouseover', function() {
|
||||||
|
$(this).addClass('active');
|
||||||
|
}).on('mouseout', function() {
|
||||||
|
$(this).removeClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.keymap__is-default').on('click', function() {
|
||||||
|
$(this).toggleClass('fa-star-o');
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#owl-example").owlCarousel({
|
||||||
|
items: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var menuObject = {
|
||||||
|
menu: [
|
||||||
|
{
|
||||||
|
icon: 'keyboard-o',
|
||||||
|
name: 'Keyboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
icon: 'plus-circle',
|
||||||
|
name: 'Add new keymap'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Factory keymap'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'QWERTY'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Dvorak'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Colemak'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'VIM'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Mortal Kombat X'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'play',
|
||||||
|
name: 'Macros',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
icon: 'plus-circle',
|
||||||
|
name: 'Add new macro'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Macro1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Macro2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Macro3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '',
|
||||||
|
name: 'Macro4'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'icon': 'puzzle-piece',
|
||||||
|
'name': 'Add-on modules',
|
||||||
|
'children': [
|
||||||
|
{
|
||||||
|
'icon': '',
|
||||||
|
'name': 'Key cluster'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'icon': '',
|
||||||
|
'name': 'Trackball'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'icon': '',
|
||||||
|
'name': 'Toucpad'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'icon': '',
|
||||||
|
'name': 'Trackpoing'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'icon': 'gear',
|
||||||
|
'name': 'Settings'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user