Make the app UI the default page on the mockup gh pages.
This commit is contained in:
Arpad Csanyi
@@ -7,9 +7,9 @@ They serve a double purpose:
|
|||||||
2. test some basic interaction patterns by clicking around the main UI elements.
|
2. test some basic interaction patterns by clicking around the main UI elements.
|
||||||
|
|
||||||
## See it!
|
## See it!
|
||||||
* [Key action editor](http://ultimatehackingkeyboard.github.io/agent-mockup/index.html)
|
* [Key action editor](http://ultimatehackingkeyboard.github.io/agent-mockup/popup.html)
|
||||||
* [Macro editor](http://ultimatehackingkeyboard.github.io/agent-mockup/macro.html)
|
* [Macro editor](http://ultimatehackingkeyboard.github.io/agent-mockup/macro.html)
|
||||||
* [Application UI](http://ultimatehackingkeyboard.github.io/agent-mockup/app.html)
|
* [Application UI](http://ultimatehackingkeyboard.github.io/agent-mockup/index.html)
|
||||||
|
|
||||||
## Try it!
|
## Try it!
|
||||||
If you want to see it on your screen follow this guide:
|
If you want to see it on your screen follow this guide:
|
||||||
|
|||||||
196
app.html
196
app.html
@@ -1,196 +0,0 @@
|
|||||||
<!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="css/app.css" rel="stylesheet" type="text/css" />
|
|
||||||
<link href="css/macro.css" rel="stylesheet" type="text/css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- Google Tag Manager -->
|
|
||||||
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
|
|
||||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
||||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
||||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
||||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
||||||
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
||||||
})(window,document,'script','dataLayer','GTM-PQLCXB');</script>
|
|
||||||
<!-- End Google Tag Manager -->
|
|
||||||
|
|
||||||
<div id="sidebar-menu" class="split split-horizontal" style=""></div>
|
|
||||||
<div id="main-content" class="split split-horizontal container-fluid" style="">
|
|
||||||
|
|
||||||
<div class="keymap--edit keymap--qwerty main-content__inner" style="display: none;">
|
|
||||||
<div class="row">
|
|
||||||
<h1 class="col-xs-12 pane-title">
|
|
||||||
<i class="fa fa-keyboard-o"></i>
|
|
||||||
<span class="keymap__name pane-title__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev pane-title__abbrev" contenteditable="true">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 uhk__layer-wrapper uhk__layer-wrapper--base">
|
|
||||||
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--mod">
|
|
||||||
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--fn">
|
|
||||||
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--mouse">
|
|
||||||
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 leftwards
|
|
||||||
<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 downdward
|
|
||||||
<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>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
|
|
||||||
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<script type="text/javascript" src="bower_components/Sortable/Sortable.js"></script>
|
|
||||||
<script type="text/javascript" src="bower_components/handlebars/handlebars.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/javascript" src="./macro.js"></script>
|
|
||||||
|
|
||||||
<script type="text/x-handlebars-template" id="sidebar-menu--source">
|
|
||||||
{{#if menu}}
|
|
||||||
<ul class="menu--top">
|
|
||||||
{{#each menu as |menuValue menuKey|}}
|
|
||||||
<li class="sidebar__level-1--item">
|
|
||||||
<div class="sidebar__level-1">
|
|
||||||
<i class='fa fa-{{icon}}'></i> {{name}} <!--<span class="small-text">collapse</span>-->
|
|
||||||
{{#if expandable}}
|
|
||||||
<a href="#" class="btn btn-default pull-right btn-sm">
|
|
||||||
<i class="fa fa-plus"></i>
|
|
||||||
</a>
|
|
||||||
{{/if}}
|
|
||||||
<i class="fa fa-chevron-up pull-right" style=""></i>
|
|
||||||
</div>
|
|
||||||
{{#if children}}
|
|
||||||
<ul>
|
|
||||||
{{#each children}}
|
|
||||||
<li class="sidebar__level-2--item {{classes}}" data-name="{{name}}" data-content="{{menuValue.dataContent}}" data-abbrev="{{abbrev}}">
|
|
||||||
<div class="sidebar__level-2">
|
|
||||||
{{name}}
|
|
||||||
{{#if menuValue.hasDefaults}}
|
|
||||||
{{#if isDefault}}
|
|
||||||
<i class="fa fa-star pull-right"></i>
|
|
||||||
{{else}}
|
|
||||||
<i class="fa fa-star-o pull-right"></i>
|
|
||||||
{{/if}}
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
{{/if}}
|
|
||||||
</li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
{{/if}}
|
|
||||||
{{#if menuBottom}}
|
|
||||||
<ul class="menu--bottom">
|
|
||||||
{{#each menuBottom}}
|
|
||||||
<li class="sidebar__level-1--item">
|
|
||||||
<div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
|
|
||||||
</li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
{{/if}}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
459
index.html
459
index.html
@@ -1,299 +1,196 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
<meta charset="UTF-8">
|
||||||
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
<title>Ultimate Hacking Keyboard Configurator</title>
|
||||||
<link href="bower_components/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
|
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||||
<link href="style.css" rel="stylesheet" type="text/css" />
|
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||||
<meta charset="utf-8">
|
<link href="bower_components/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
|
||||||
<title>Ultimate Hacking Keyboard - Agent mockups</title>
|
<link href="bower_components/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css" />
|
||||||
</head>
|
<link href="bower_components/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css" />
|
||||||
<body style="padding:50px">
|
<link href="css/app.css" rel="stylesheet" type="text/css" />
|
||||||
|
<link href="css/macro.css" rel="stylesheet" type="text/css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
<!-- Google Tag Manager -->
|
<!-- Google Tag Manager -->
|
||||||
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
|
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
|
||||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||||
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||||
})(window,document,'script','dataLayer','GTM-PQLCXB');</script>
|
})(window,document,'script','dataLayer','GTM-PQLCXB');</script>
|
||||||
<!-- End Google Tag Manager -->
|
<!-- End Google Tag Manager -->
|
||||||
|
|
||||||
<h1>Ultimate Hacking Keyboard – Agent mockups</h1>
|
<div id="sidebar-menu" class="split split-horizontal" style=""></div>
|
||||||
<ul class="nav nav-pills">
|
<div id="main-content" class="split split-horizontal container-fluid" style="">
|
||||||
<li role="presentation" class="active"><a href="index.html">Key action editor</a></li>
|
|
||||||
<li role="presentation"><a href="macro.html">Macro editor</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!--
|
<div class="keymap--edit keymap--qwerty main-content__inner" style="display: none;">
|
||||||
Basic structure of the popover to be used with the Handlebars templates.
|
<div class="row">
|
||||||
-->
|
<h1 class="col-xs-12 pane-title">
|
||||||
<div class="popover bottom" style="display: inline-block; min-width: 540px; margin: 50px; position: relative;">
|
<i class="fa fa-keyboard-o"></i>
|
||||||
<div class="arrow"></div>
|
<span class="keymap__name pane-title__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev pane-title__abbrev" contenteditable="true">QTY</span>)
|
||||||
<div class="container-fluid">
|
<i class="fa fa-star-o fa-star keymap__is-default"></i>
|
||||||
<div class="row">
|
</h1>
|
||||||
<div id="key-editor-top__target"></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div id="key-editor-content__target"></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div id="key-editor-bottom__target"></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/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<script type="text/javascript" src="bower_components/select2/dist/js/select2.min.js"></script>
|
|
||||||
<script type="text/javascript" src="script.js"></script>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Handlebars templates for the common parts of the popover.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- Popover titlebar (where the tabs resides). -->
|
|
||||||
<script id="key-editor-top__source" type="text/x-handlebars-template">
|
|
||||||
<div class="popover-title menu-button-group">
|
|
||||||
Action:
|
|
||||||
<div class="btn-group popover-menu" role="group" aria-label="...">
|
|
||||||
{{#each buttons}}
|
|
||||||
<button class="btn btn-sm btn-{{type}}" data-content="{{content}}" type="button"><i class="fa {{icon}}"></i> {{title}}</button>
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="popover-title menu-tabs">
|
|
||||||
<ul class="nav nav-tabs popover-menu">
|
|
||||||
{{#each buttons}}
|
|
||||||
<li role="presentation"><a href="#" class="menu-tabs--item" data-content="{{content}}"><i class="fa {{icon}}"></i> {{title}}</a></li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Popover footer. -->
|
|
||||||
<script id="key-editor-bottom__source" type="text/x-handlebars-template">
|
|
||||||
<div class="popover-actions">
|
|
||||||
<button class="btn btn-sm btn-default" type="button">Cancel</button>
|
|
||||||
<button class="btn btn-sm btn-primary" type="button">Remap key</button>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Handlebars templates for the contents of the popover tabs.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- Keypress action. -->
|
|
||||||
<script id="key-editor-content__source--keypress" type="text/x-handlebars-template">
|
|
||||||
<div class="popover-content" style="margin-bottom:2px">
|
|
||||||
<!-- Layer selection. -->
|
|
||||||
<div style="margin-bottom: 10px;">
|
|
||||||
<b class="setting-label">Layer action:</b>
|
|
||||||
<div class="btn-group btn-group-sm layer-action--buttons">
|
|
||||||
{{#each layers}}
|
|
||||||
<button type="button" class="btn btn-default {{primary}} {{class}}">{{name}}</button>
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
|
</div>
|
||||||
<hr>
|
<div class="row unk--wrapper">
|
||||||
|
<div class="col-xs-12 text-center">
|
||||||
<div class="global-key-setup--wrapper">
|
<div class="" role="" style="margin-bottom: 2rem;">
|
||||||
<div class="global-key-setup">
|
<button type="button" class="btn btn-primary btn-lg">Base</button>
|
||||||
<!-- Primary action setup: scancode+modifiers. -->
|
<button type="button" class="btn btn-default btn-lg">Mod</button>
|
||||||
<div class="scancode-options">
|
<button type="button" class="btn btn-default btn-lg">Fn</button>
|
||||||
<b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
|
<button type="button" class="btn btn-default btn-lg">Mouse</button>
|
||||||
<div class="btn-toolbar modifiers" style="display:inline-block">
|
</div>
|
||||||
<div class="btn-group btn-group-sm modifiers__left">
|
</div>
|
||||||
{{#each modifiers.left}}
|
<div class="col-xs-12">
|
||||||
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
|
<div id="owl-example" class="owl-carousel owl-theme">
|
||||||
{{/each}}
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--base">
|
||||||
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group btn-group-sm modifiers__right">
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--mod">
|
||||||
{{#each modifiers.right}}
|
<img src="./images/base-layer--blank.svg" class="uhk uhk--base-layer" alt="">
|
||||||
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
|
</div>
|
||||||
{{/each}}
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--fn">
|
||||||
|
<img src="./images/base-layer--dvorak.svg" class="uhk uhk--base-layer" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--mouse">
|
||||||
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
|
</div>
|
||||||
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
|
</div>
|
||||||
<select class="scancode" style="width: 200px">
|
|
||||||
{{#each scancode}}
|
<div class="macro--edit main-content__inner">
|
||||||
<optgroup label="{{groupName}}">
|
<div class="row">
|
||||||
{{#each groupValues}}
|
<h1 class="col-xs-12 pane-title">
|
||||||
<option value="{{value}}" data-explanation="{{dataExplanation}}">{{label}}</option>
|
<i class="fa fa-play"></i>
|
||||||
{{/each}}
|
<span class="macro__name pane-title__name" contenteditable="true">Macro1</span> <i class="fa"></i>
|
||||||
</optgroup>
|
</h1>
|
||||||
{{/each}}
|
</div>
|
||||||
</select>
|
<div class="row">
|
||||||
<!-- bof optional -->
|
<div id="listWithHandle" class="list-group col-xs-10 col-xs-offset-1">
|
||||||
<!-- Icon for switching the keyboard layout preview when capturing. -->
|
<div class="list-group-item action--item">
|
||||||
<!-- <i class="fa fa-eye pull-right" style="margin: 0 0 0 2rem; position: relative; top: 0.65rem;" data-toggle="tooltip" data-placement="bottom" title="Show preview keyboard."></i> -->
|
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
|
||||||
<!-- eof optional -->
|
<i class="fa fa-mouse-pointer"></i> Move pointer by 100px leftwards
|
||||||
<button style="display: block; margin: 0 0 0 2rem;" type="button" class="btn btn-sm btn-default pull-right btn--capture-keystroke btn--capture-keystroke__start">
|
<i class="glyphicon glyphicon-pencil action--edit"></i>
|
||||||
<i class="fa fa-circle" style="color:#c00"></i> Capture keystroke
|
<i class="glyphicon glyphicon-trash action--trash"></i>
|
||||||
</button>
|
</div>
|
||||||
<button style="display: none; margin: 0 0 0 2rem;" type="button" class="btn btn-sm btn-info pull-right btn--capture-keystroke btn--capture-keystroke__stop">
|
<div class="list-group-item macro-settings" style="display: none;">
|
||||||
<i class="fa fa-square"></i> Stop capturing
|
<div class="helper"></div>
|
||||||
</button>
|
<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>
|
<div class="row">
|
||||||
<!-- bof optional -->
|
<div class="col-sm-12 flex-button-wrapper">
|
||||||
<!-- Keyboard layout preview to be shown in capturing mode. -->
|
<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 class="preview-wrapper">
|
</div>
|
||||||
<img src="images/base-layer.svg" />
|
|
||||||
</div>
|
</div>
|
||||||
-->
|
</div>
|
||||||
<!-- eof optional -->
|
<div class="list-group-item action--item">
|
||||||
|
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
|
||||||
<!-- Secondary action setup: long press action. -->
|
<i class="fa fa-square"></i> Press letter A
|
||||||
<div style="margin-top: 3rem;">
|
<i class="glyphicon glyphicon-pencil action--edit"></i>
|
||||||
<b class="setting-label" style="position:relative;">Long press action:</b>
|
<i class="glyphicon glyphicon-trash action--trash"></i>
|
||||||
<select class="secondary-role" style="width:135px">
|
</div>
|
||||||
{{#each secondaryRole}}
|
<div class="list-group-item action--item">
|
||||||
<option value="{{name}}">{{name}}</option>
|
<span class="glyphicon glyphicon-option-vertical move-handle" aria-hidden="true"></span>
|
||||||
{{/each}}
|
<i class="fa fa-square"></i> Press Alt+Tab
|
||||||
</select>
|
<i class="glyphicon glyphicon-pencil action--edit"></i>
|
||||||
<i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right" title="When you press and hold the key."></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 downdward
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Informational text to display when a layer action is selected. -->
|
|
||||||
<div class="disabled-state--text" style="display: none; color: #900; padding-right: 40px;">
|
|
||||||
<i class="fa fa-exclamation" style="font-size: 2.6rem; float: left; padding: 1.5rem;"></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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Mouse action. -->
|
|
||||||
<script id="key-editor-content__source--mouse" type="text/x-handlebars-template">
|
|
||||||
<div class="popover-content" style="margin-bottom:2px">
|
|
||||||
<div class="row" style="padding-bottom: 1rem; box-shadow: 0 1px 0 0 lightgray;">
|
|
||||||
<div class="col-xs-6" style="box-shadow: 1px 0 0 0 lightgray;">
|
|
||||||
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Move</b>
|
|
||||||
<div class="buttons-row row">
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-up"></i></button>
|
|
||||||
</div>
|
|
||||||
<div class="buttons-row row">
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-3"><i class="fa fa-arrow-left"></i></button>
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-right"></i></button><br>
|
|
||||||
</div>
|
|
||||||
<div class="buttons-row row">
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-down"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6">
|
|
||||||
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Scroll</b>
|
|
||||||
<div class="buttons-row row">
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-up"></i></button>
|
|
||||||
</div>
|
|
||||||
<div class="buttons-row row">
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-3"><i class="fa fa-arrow-left"></i></button>
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-right"></i></button><br>
|
|
||||||
</div>
|
|
||||||
<div class="buttons-row row">
|
|
||||||
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-down"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row" style="margin-top: 1rem;">
|
|
||||||
<div class="col-xs-6" style="box-shadow: 1px 0 0 0 lightgray;">
|
|
||||||
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Click</b>
|
|
||||||
<div class="btn-group col-xs-12" role="group">
|
|
||||||
<button type="button" class="btn btn-default col-xs-4">Left</button>
|
|
||||||
<button type="button" class="btn btn-default col-xs-4">Middle</button>
|
|
||||||
<button type="button" class="btn btn-default col-xs-4">Right</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6">
|
|
||||||
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Speed</b>
|
|
||||||
<div class="btn-group col-xs-12" role="group">
|
|
||||||
<button type="button" class="btn btn-default col-xs-6"><i class="fa fa-angle-double-down"></i> decelerate</button>
|
|
||||||
<button type="button" class="btn btn-default col-xs-6">accelerate <i class="fa fa-angle-double-up"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Macro action. -->
|
<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
<script id="key-editor-content__source--macro" type="text/x-handlebars-template">
|
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<div class="popover-content" style="margin-bottom:2px">
|
<script type="text/javascript" src="bower_components/Sortable/Sortable.js"></script>
|
||||||
<div style="margin-bottom:0px; margin-top:2px">
|
<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>
|
||||||
<b style="">Macro:</b>
|
<script type="text/javascript" src="bower_components/owl.carousel/dist/owl.carousel.js"></script>
|
||||||
<select class="macro-selector" style="width:402px">
|
<script type="text/javascript" src="./app.js"></script>
|
||||||
{{#each macros}}
|
<script type="text/javascript" src="./macro.js"></script>
|
||||||
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
|
|
||||||
{{/each}}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="macro-preview" style="opacity: .35;">
|
|
||||||
<div class="list-group" style="margin-top: 20px;">
|
|
||||||
<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 a key
|
|
||||||
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
|
||||||
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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> Wait some time
|
|
||||||
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
|
||||||
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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> Move mouse
|
|
||||||
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
|
||||||
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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 and hold a key
|
|
||||||
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
|
||||||
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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> Click with mouse
|
|
||||||
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
|
||||||
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Change keymap action. -->
|
<script type="text/x-handlebars-template" id="sidebar-menu--source">
|
||||||
<script id="key-editor-content__source--changeKeymap" type="text/x-handlebars-template">
|
{{#if menu}}
|
||||||
<div class="popover-content" style="margin-bottom:2px">
|
<ul class="menu--top">
|
||||||
<div style="margin-bottom:0px; margin-top:2px">
|
{{#each menu as |menuValue menuKey|}}
|
||||||
<b style="">Keymap:</b>
|
<li class="sidebar__level-1--item">
|
||||||
<select class="layout-switcher" style="width:402px">
|
<div class="sidebar__level-1">
|
||||||
{{#each layouts}}
|
<i class='fa fa-{{icon}}'></i> {{name}} <!--<span class="small-text">collapse</span>-->
|
||||||
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
|
{{#if expandable}}
|
||||||
{{/each}}
|
<a href="#" class="btn btn-default pull-right btn-sm">
|
||||||
</select>
|
<i class="fa fa-plus"></i>
|
||||||
</div>
|
</a>
|
||||||
<div class="layout-preview">
|
{{/if}}
|
||||||
<img src="images/base-layer--blank.svg" />
|
<i class="fa fa-chevron-up pull-right" style=""></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{{#if children}}
|
||||||
</script>
|
<ul>
|
||||||
|
{{#each children}}
|
||||||
<!-- None action. -->
|
<li class="sidebar__level-2--item {{classes}}" data-name="{{name}}" data-content="{{menuValue.dataContent}}" data-abbrev="{{abbrev}}">
|
||||||
<script id="key-editor-content__source--none" type="text/x-handlebars-template">
|
<div class="sidebar__level-2">
|
||||||
<div class="key-editor--none__description col-sm-12">
|
{{name}}
|
||||||
<i class="icon fa fa-ban"></i>
|
{{#if menuValue.hasDefaults}}
|
||||||
<p class="col-sm-12">This key will be unassigned and will have no functionality at all.</p>
|
{{#if isDefault}}
|
||||||
</div>
|
<i class="fa fa-star pull-right"></i>
|
||||||
</script>
|
{{else}}
|
||||||
</body>
|
<i class="fa fa-star-o pull-right"></i>
|
||||||
|
{{/if}}
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
{{/if}}
|
||||||
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
{{/if}}
|
||||||
|
{{#if menuBottom}}
|
||||||
|
<ul class="menu--bottom">
|
||||||
|
{{#each menuBottom}}
|
||||||
|
<li class="sidebar__level-1--item">
|
||||||
|
<div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
|
||||||
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
{{/if}}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
299
popup.html
Normal file
299
popup.html
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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="style.css" rel="stylesheet" type="text/css" />
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Ultimate Hacking Keyboard - Agent mockups</title>
|
||||||
|
</head>
|
||||||
|
<body style="padding:50px">
|
||||||
|
|
||||||
|
<!-- Google Tag Manager -->
|
||||||
|
<!-- <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
|
||||||
|
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||||
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||||
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||||
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||||
|
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||||
|
})(window,document,'script','dataLayer','GTM-PQLCXB');</script> -->
|
||||||
|
<!-- End Google Tag Manager -->
|
||||||
|
|
||||||
|
<h1>Ultimate Hacking Keyboard – Agent mockups</h1>
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
<li role="presentation" class="active"><a href="index.html">Key action editor</a></li>
|
||||||
|
<li role="presentation"><a href="macro.html">Macro editor</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Basic structure of the popover to be used with the Handlebars templates.
|
||||||
|
-->
|
||||||
|
<div class="popover bottom" style="display: inline-block; min-width: 541px; margin: 50px; position: relative;">
|
||||||
|
<div class="arrow"></div>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div id="key-editor-top__target"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div id="key-editor-content__target"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div id="key-editor-bottom__target"></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/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/select2/dist/js/select2.min.js"></script>
|
||||||
|
<script type="text/javascript" src="script.js"></script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Handlebars templates for the common parts of the popover.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Popover titlebar (where the tabs resides). -->
|
||||||
|
<script id="key-editor-top__source" type="text/x-handlebars-template">
|
||||||
|
<div class="popover-title menu-button-group">
|
||||||
|
Action:
|
||||||
|
<div class="btn-group popover-menu" role="group" aria-label="...">
|
||||||
|
{{#each buttons}}
|
||||||
|
<button class="btn btn-sm btn-{{type}}" data-content="{{content}}" type="button"><i class="fa {{icon}}"></i> {{title}}</button>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="popover-title menu-tabs">
|
||||||
|
<ul class="nav nav-tabs popover-menu">
|
||||||
|
{{#each buttons}}
|
||||||
|
<li role="presentation"><a href="#" class="menu-tabs--item" data-content="{{content}}"><i class="fa {{icon}}"></i> {{title}}</a></li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Popover footer. -->
|
||||||
|
<script id="key-editor-bottom__source" type="text/x-handlebars-template">
|
||||||
|
<div class="popover-actions">
|
||||||
|
<button class="btn btn-sm btn-default" type="button">Cancel</button>
|
||||||
|
<button class="btn btn-sm btn-primary" type="button">Remap key</button>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Handlebars templates for the contents of the popover tabs.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Keypress action. -->
|
||||||
|
<script id="key-editor-content__source--keypress" type="text/x-handlebars-template">
|
||||||
|
<div class="popover-content" style="margin-bottom:2px">
|
||||||
|
<!-- Layer selection. -->
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<b class="setting-label">Layer action:</b>
|
||||||
|
<div class="btn-group btn-group-sm layer-action--buttons">
|
||||||
|
{{#each layers}}
|
||||||
|
<button type="button" class="btn btn-default {{primary}} {{class}}">{{name}}</button>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="global-key-setup--wrapper">
|
||||||
|
<div class="global-key-setup">
|
||||||
|
<!-- Primary action setup: scancode+modifiers. -->
|
||||||
|
<div class="scancode-options">
|
||||||
|
<b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
|
||||||
|
<div class="btn-toolbar modifiers" style="display:inline-block">
|
||||||
|
<div class="btn-group btn-group-sm modifiers__left">
|
||||||
|
{{#each modifiers.left}}
|
||||||
|
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
<div class="btn-group btn-group-sm modifiers__right">
|
||||||
|
{{#each modifiers.right}}
|
||||||
|
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
|
||||||
|
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
|
||||||
|
<select class="scancode" style="width: 200px">
|
||||||
|
{{#each scancode}}
|
||||||
|
<optgroup label="{{groupName}}">
|
||||||
|
{{#each groupValues}}
|
||||||
|
<option value="{{value}}" data-explanation="{{dataExplanation}}">{{label}}</option>
|
||||||
|
{{/each}}
|
||||||
|
</optgroup>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
<!-- bof optional -->
|
||||||
|
<!-- Icon for switching the keyboard layout preview when capturing. -->
|
||||||
|
<!-- <i class="fa fa-eye pull-right" style="margin: 0 0 0 2rem; position: relative; top: 0.65rem;" data-toggle="tooltip" data-placement="bottom" title="Show preview keyboard."></i> -->
|
||||||
|
<!-- eof optional -->
|
||||||
|
<button style="display: block; margin: 0 0 0 2rem;" type="button" class="btn btn-sm btn-default pull-right btn--capture-keystroke btn--capture-keystroke__start">
|
||||||
|
<i class="fa fa-circle" style="color:#c00"></i> Capture keystroke
|
||||||
|
</button>
|
||||||
|
<button style="display: none; margin: 0 0 0 2rem;" type="button" class="btn btn-sm btn-info pull-right btn--capture-keystroke btn--capture-keystroke__stop">
|
||||||
|
<i class="fa fa-square"></i> Stop capturing
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- bof optional -->
|
||||||
|
<!-- Keyboard layout preview to be shown in capturing mode. -->
|
||||||
|
<!--
|
||||||
|
<div class="preview-wrapper">
|
||||||
|
<img src="images/base-layer.svg" />
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<!-- eof optional -->
|
||||||
|
|
||||||
|
<!-- Secondary action setup: long press action. -->
|
||||||
|
<div style="margin-top: 3rem;">
|
||||||
|
<b class="setting-label" style="position:relative;">Long press action:</b>
|
||||||
|
<select class="secondary-role" style="width:135px">
|
||||||
|
{{#each secondaryRole}}
|
||||||
|
<option value="{{name}}">{{name}}</option>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
<i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right" title="When you press and hold the key."></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Informational text to display when a layer action is selected. -->
|
||||||
|
<div class="disabled-state--text" style="display: none; color: #31708f; padding-right: 40px;">
|
||||||
|
<i class="fa fa-info-circle" style="font-size: 2.6rem; float: left; padding: 1rem 1.5rem 2rem;"></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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Mouse action. -->
|
||||||
|
<script id="key-editor-content__source--mouse" type="text/x-handlebars-template">
|
||||||
|
<div class="popover-content" style="margin-bottom:2px">
|
||||||
|
<div class="row" style="padding-bottom: 1rem;">
|
||||||
|
<div class="col-xs-6 mouse-action__card" style="">
|
||||||
|
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Move</b>
|
||||||
|
<div class="buttons-row row">
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-up"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="buttons-row row">
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-3"><i class="fa fa-arrow-left"></i></button>
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-right"></i></button><br>
|
||||||
|
</div>
|
||||||
|
<div class="buttons-row row">
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-down"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 mouse-action__card">
|
||||||
|
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Scroll</b>
|
||||||
|
<div class="buttons-row row">
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-up"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="buttons-row row">
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-3"><i class="fa fa-arrow-left"></i></button>
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-right"></i></button><br>
|
||||||
|
</div>
|
||||||
|
<div class="buttons-row row">
|
||||||
|
<button type="button" class="btn btn-default col-xs-2 col-xs-push-5"><i class="fa fa-arrow-down"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="margin-top: 1rem;">
|
||||||
|
<div class="col-xs-6 mouse-action__card" style="">
|
||||||
|
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Click</b>
|
||||||
|
<div class="btn-group col-xs-12" role="group">
|
||||||
|
<button type="button" class="btn btn-default col-xs-4">Left</button>
|
||||||
|
<button type="button" class="btn btn-default col-xs-4">Middle</button>
|
||||||
|
<button type="button" class="btn btn-default col-xs-4">Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 mouse-action__card">
|
||||||
|
<b class="col-xs-12 text-center" style="margin-bottom: .5rem;">Speed</b>
|
||||||
|
<div class="btn-group col-xs-12" role="group">
|
||||||
|
<button type="button" class="btn btn-default col-xs-6"><i class="fa fa-angle-double-down"></i> decelerate</button>
|
||||||
|
<button type="button" class="btn btn-default col-xs-6">accelerate <i class="fa fa-angle-double-up"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Macro action. -->
|
||||||
|
<script id="key-editor-content__source--macro" type="text/x-handlebars-template">
|
||||||
|
<div class="popover-content" style="margin-bottom:2px">
|
||||||
|
<div style="margin-bottom:0px; margin-top:2px">
|
||||||
|
<b style="">Macro:</b>
|
||||||
|
<select class="macro-selector" style="width:402px">
|
||||||
|
{{#each macros}}
|
||||||
|
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="macro-preview" style="opacity: .35;">
|
||||||
|
<div class="list-group" style="margin-top: 20px;">
|
||||||
|
<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 a key
|
||||||
|
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
||||||
|
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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> Wait some time
|
||||||
|
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
||||||
|
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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> Move mouse
|
||||||
|
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
||||||
|
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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 and hold a key
|
||||||
|
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
||||||
|
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></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> Click with mouse
|
||||||
|
<i class="glyphicon glyphicon-pencil action--edit pull-right"></i>
|
||||||
|
<i class="glyphicon glyphicon-trash action--trash pull-right" style="margin-right: 1rem;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Change keymap action. -->
|
||||||
|
<script id="key-editor-content__source--changeKeymap" type="text/x-handlebars-template">
|
||||||
|
<div class="popover-content" style="margin-bottom:2px">
|
||||||
|
<div style="margin-bottom:0px; margin-top:2px">
|
||||||
|
<b style="">Keymap:</b>
|
||||||
|
<select class="layout-switcher" style="width:402px">
|
||||||
|
{{#each layouts}}
|
||||||
|
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layout-preview">
|
||||||
|
<img src="images/base-layer--blank.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- None action. -->
|
||||||
|
<script id="key-editor-content__source--none" type="text/x-handlebars-template">
|
||||||
|
<div class="key-editor--none__description col-sm-12">
|
||||||
|
<i class="icon fa fa-ban"></i>
|
||||||
|
<p class="col-sm-12">This key will be unassigned and will have no functionality at all.</p>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user