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

Merge branch 'master' of github.com:UltimateHackingKeyboard/agent-mockup

Browse Source
This commit is contained in:
László Monda
2016-03-26 02:53:42 +01:00
parent 9d77d7212b 32b219a483
commit 252b0969d6
11 changed files with 203 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/app.css
View File

@@ -45,24 +45,13 @@ ul {
.sidebar__level-2--item.active {
background-color: #555;
color: #fff; }
.sidebar__level-2--item.active .fa-star,
.sidebar__level-2--item.active .fa-star-o {
display: none; }
.sidebar__level-2--item.active .fa-star {
color: #fff; }
.sidebar__level-2--item.active:hover {
background-color: #555; }
.sidebar__level-2--item.active:hover .fa-star,
.sidebar__level-2--item.active:hover .fa-star-o {
display: block;
color: #fff; }
.sidebar__level-2--item:hover .fa-star-o {
color: #000; }
.sidebar__level-2--item:hover .fa-star-o:hover {
color: #000; }
.sidebar__level-2--item .fa.pull-right {
position: relative;
top: 2px; }
.sidebar__level-2--item .fa-star-o {
color: #f5f5f5; }
.sidebar__level-2--item .fa-star {
color: #666; }
@@ -117,24 +106,6 @@ ul {
max-width: 100%;
width: 98%; }
.grip {
position: relative; }
.grip:before {
content: '';
display: none;
width: 5px;
height: 20px;
background-image: url(../images/grips/vertical_dark.png);
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 7px;
margin-top: -10px; }
.grip.btn-primary:before {
background-image: url(../images/grips/vertical.png); }
.grip:hover:before {
display: block; }
.key-editor__popup {
border: none;
width: 0px;
@@ -144,11 +115,5 @@ ul {
left: 50%;
margin-left: -310px; }
svg.uhk.faded #left-case,
svg.uhk.faded #right-case {
fill: #555; }
svg.uhk.faded rect {
fill: #666; }
svg.uhk.faded rect.active {
fill: #000; }
svg.uhk rect.active {
fill: #337ab7; }

96
style.css → css/style.css
View File

@@ -1,32 +1,23 @@
h1 {
margin-bottom: 3rem;
}
.popover {
padding: 0;
}
padding: 0; }
.popover.bottom > .arrow {
border-bottom-color: #000; }
.popover.bottom > .arrow:after {
border-bottom-color: #f7f7f7; }
.popover-content {
padding: 10px 24px;
}
padding: 10px 24px; }
.popover-title.menu-tabs {
padding: .5rem .5rem 0;
display: block;
}
display: block; }
.popover-title.menu-button-group {
display: none;
}
display: none; }
.popover-title.menu-tabs .nav-tabs {
position: relative;
top: 1px;
}
.popover.bottom > .arrow:after {
border-bottom-color: #f7f7f7;
}
top: 1px; }
.popover-actions {
padding: 8px 14px;
@@ -35,17 +26,14 @@ h1 {
background-color: #f7f7f7;
border-top: 1px solid #ebebeb;
border-radius: 0 0 5px 5px;
text-align: right;
}
text-align: right; }
.select2-container {
z-index: 100000;
}
z-index: 100000; }
.scancode--explanation {
color: lightgray;
float: right;
}
float: right; }
.layout-abbreviation {
font-weight: bold;
@@ -53,21 +41,18 @@ h1 {
background: #333;
padding: 4px 8px;
font-family: monospace;
margin-right: .5em;
}
margin-right: .5em; }
.layout-preview img {
max-width: 100%;
margin-top: 10px;
}
margin-top: 10px; }
.key-editor--none__description p {
padding: 2rem 0;
margin: 0;
text-align: center;
font-style: italic;
color: #999;
}
color: #999; }
.key-editor--none__description .icon {
font-size: 5rem;
@@ -77,45 +62,34 @@ h1 {
left: 50%;
margin-left: -2.5rem;
top: 50%;
margin-top: -2.5rem;
}
margin-top: -2.5rem; }
.select2-item {
position: relative;
font-size: 1.5rem;
}
.select2-item.keymap-name--wrapper {
padding-left: 50px;
}
.select2-item .layout-segment-code {
height: 2rem;
position: absolute;
left: 0;
top: 50%;
margin-top: -1rem;
}
font-size: 1.5rem; }
.select2-item.keymap-name--wrapper {
padding-left: 50px; }
.select2-item .layout-segment-code {
height: 2rem;
position: absolute;
left: 0;
top: 50%;
margin-top: -1rem; }
.preview-wrapper img {
max-width: 100%;
}
max-width: 100%; }
.global-key-setup.disabled {
opacity: 0;
}
opacity: 0; }
.global-key-setup.disabled .setting-label {
color: #999; }
.global-key-setup.disabled .setting-label,
.setting-label.disabled {
color: #999;
}
color: #999; }
.global-key-setup--wrapper {
position: relative;
}
.global-key-setup--wrapper .disabled-state--text {
position: absolute;
top: 50%;
margin-top: -4rem;
}
position: relative; }
.global-key-setup--wrapper .disabled-state--text {
position: absolute;
top: 50%;
margin-top: -4rem; }

6
images/base-layer--blank.svg
View File

@@ -333,12 +333,6 @@
height="41.667309"
width="131.10236"
id="f1" />
<path
style="overflow:visible;opacity:0.37109375;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:3.5309999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:4.20029926;stroke-opacity:0.94117647"
d="m 496.16925,65.73301 -0.0154,87.47881 c -0.0282,2.83915 -2.3278,5.18818 -5.02766,5.24724 l -25.13,0 c -2.77655,0.0616 -5.07351,2.13273 -5.28022,5.00708 l 0,57.19878 c 0.0294,2.57204 2.14148,5.06074 5.11323,5.16514 l 7.4127,0 c 2.39778,0.0855 4.80676,2.26923 4.98173,4.73249 l 0.093,57.44617 c 0.076,2.80531 2.30514,5.04275 5.20558,5.13134 l 23.33781,0 c 2.53054,0.0347 4.93683,1.89336 5.22467,4.86728 l -0.0508,57.90266 c -0.42983,2.73003 -2.60342,4.37083 -4.77711,4.517 l -10.79541,0 c -2.40379,0.0627 -4.90328,2.14723 -4.96231,5.3178 l 0.0514,103.81727"
id="path4233"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccc" />
<path
style="fill:#e6e6e6;stroke:none"
d="m 995.46352,89.48813 c 2.791,0 5.32908,2.56086 5.32908,5.3769 l 0,329.45542 c 0,2.81604 -2.53808,5.3769 -5.32908,5.3769 l -370.67909,-0.001 c -1.77166,0 -3.54347,1.7733 -3.54347,3.545 0,12.89522 0,23.31503 0,34.58266 0,1.7716 1.77181,3.5432 3.54347,3.5432 l 390.67297,1.5e-4 c 0.928,0 1.8562,-0.14759 2.7394,-0.43636 0.8833,-0.28878 1.7213,-0.71869 2.4728,-1.26915 0.7516,-0.55047 1.4165,-1.2213 1.962,-1.97961 0.5456,-0.75831 0.9717,-1.60381 1.2579,-2.49497 0.2862,-0.89115 0.4325,-1.82765 0.4325,-2.76401 l 0,-389.43464 c 0,-0.83901 -0.1174,-1.67813 -0.3481,-2.4845 -0.2307,-0.80638 -0.5746,-1.57983 -1.0184,-2.28986 -0.4439,-0.71002 -0.9876,-1.35643 -1.6097,-1.91378 -0.6222,-0.55735 -1.3226,-1.0255 -2.0737,-1.38629 -0.751,-0.36078 -1.5525,-0.61412 -2.373,-0.75058 C 886.37479,42.45571 745.9631,19.10372 631.95768,0.14339 c -0.91165,-0.15162 -1.8469,-0.15828 -2.76061,-0.0195 -0.91372,0.13871 -1.8056,0.42276 -2.63265,0.83829 -0.82706,0.41551 -1.58903,0.96236 -2.24949,1.61394 -0.66047,0.65158 -1.21924,1.40768 -1.64996,2.2319 -0.43072,0.82422 -0.73327,1.71631 -0.8936,2.63375 -3.12168,17.84567 -6.23258,35.69325 -9.35634,53.53854 -0.058,0.33171 -0.16187,0.65478 -0.30744,0.95668 -0.14556,0.30189 -0.33275,0.58256 -0.5541,0.83133 -0.22136,0.24877 -0.47683,0.4656 -0.7565,0.64244 -0.27967,0.17685 -0.5835,0.31372 -0.89995,0.40551 -0.31645,0.0919 -0.64548,0.1386 -0.97471,0.1386 l -109.19782,-2e-5 c -0.93043,-1e-5 -1.77697,0.85413 -1.77697,1.79631 10e-6,7.4108 -1e-5,15.64271 0,21.94355 0,0.93909 0.84654,1.79353 1.77697,1.79353 l 495.73901,0"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 17 KiB

6
images/base-layer--dvorak.svg
View File

@@ -958,12 +958,6 @@
dy="30.4"
x="424.23291">Space</tspan>
</text>
<path
sodipodi:nodetypes="cccccccccccccccccc"
inkscape:connector-curvature="0"
id="path4233"
d="m 496.16925,646.72908 -0.0154,87.47881 c -0.0282,2.83915 -2.3278,5.18818 -5.02766,5.24724 l -25.13,0 c -2.77655,0.0616 -5.07351,2.13273 -5.28022,5.00708 l 0,57.19878 c 0.0294,2.57204 2.14148,5.06074 5.11323,5.16514 l 7.4127,0 c 2.39778,0.0855 4.80676,2.26923 4.98173,4.73249 l 0.093,57.44617 c 0.076,2.80531 2.30514,5.04275 5.20558,5.13134 l 23.33781,0 c 2.53054,0.0347 4.93683,1.89336 5.22467,4.86728 l -0.0508,57.90266 c -0.42983,2.73003 -2.60342,4.37083 -4.77711,4.517 l -10.79541,0 c -2.40379,0.0627 -4.90328,2.14723 -4.96231,5.3178 l 0.0514,103.81723"
style="overflow:visible;opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:3.5309999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:4.20029926;stroke-opacity:0.94117647" />
<path
inkscape:connector-curvature="0"
id="right-case"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 36 KiB

6
images/base-layer.svg
View File

@@ -799,12 +799,6 @@
Space
</tspan>
</text>
<path
style="overflow:visible;opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:3.5309999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;stroke-dasharray:none;stroke-dashoffset:4.20029926;stroke-opacity:0.94117647"
d="m 274.59917,-455.03752 -0.0154,87.47881 c -0.0282,2.83915 -2.3278,5.18818 -5.02766,5.24724 l -25.13,0 c -2.77655,0.0616 -5.07351,2.13273 -5.28022,5.00708 l 0,57.19878 c 0.0294,2.57204 2.14148,5.06074 5.11323,5.16514 l 7.4127,0 c 2.39778,0.0855 4.80676,2.26923 4.98173,4.73249 l 0.093,57.44617 c 0.076,2.80531 2.30514,5.04275 5.20558,5.13134 l 23.33781,0 c 2.53054,0.0347 4.93683,1.89336 5.22467,4.86728 l -0.0508,57.90266 c -0.42983,2.73003 -2.60342,4.37083 -4.77711,4.517 l -10.79541,0 c -2.40379,0.0627 -4.90328,2.14723 -4.96231,5.3178 l 0.0514,103.817271"
id="path4233"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccc" />
</g>
<g
transform="translate(44.404903 1101.7674)"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
images/grips/vertical.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 91 B

BIN
images/grips/vertical_dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 164 B

11
index.html
View File

@@ -45,9 +45,9 @@
<div class="col-xs-12 text-center">
<div class="" role="" style="margin-bottom: 2rem;">
<button type="button" data-layer="base" class="uhk__layer-switcher btn btn-primary btn-lg current">Base</button>
<button type="button" data-layer="mod" class="uhk__layer-switcher btn btn-default btn-lg grip">Mod</button>
<button type="button" data-layer="fn" class="uhk__layer-switcher btn btn-default btn-lg grip">Fn</button>
<button type="button" data-layer="mouse" class="uhk__layer-switcher btn btn-default btn-lg grip">Mouse</button>
<button type="button" data-layer="mod" class="uhk__layer-switcher btn btn-default btn-lg">Mod</button>
<button type="button" data-layer="fn" class="uhk__layer-switcher btn btn-default btn-lg">Fn</button>
<button type="button" data-layer="mouse" class="uhk__layer-switcher btn btn-default btn-lg">Mouse</button>
</div>
</div>
<div class="col-xs-12">
@@ -121,7 +121,7 @@
</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="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>
@@ -174,8 +174,6 @@
{{#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>
@@ -199,4 +197,3 @@
</script>
</body>
</html>

32
popup__iframe.html
View File

@@ -4,7 +4,7 @@
<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="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<title>Ultimate Hacking Keyboard - Agent mockups</title>
</head>
@@ -87,21 +87,6 @@
<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">
@@ -124,6 +109,21 @@
<i class="fa fa-square"></i> Stop capturing
</button>
</div>
<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>
<!-- bof optional -->
<!-- Keyboard layout preview to be shown in capturing mode. -->
<!--

70
sass/app.scss
View File

@@ -69,29 +69,12 @@ ul {
background-color: #555;
color: #fff;
.fa-star,
.fa-star-o {
display: none;
.fa-star {
color: #fff;
}
&:hover {
background-color: #555;
.fa-star,
.fa-star-o {
display: block;
color: #fff;
}
}
}
&:hover {
.fa-star-o {
color: #000;
&:hover {
color: #000;
}
}
}
@@ -101,10 +84,6 @@ ul {
top: 2px;
}
.fa-star-o {
color: #f5f5f5;
}
.fa-star {
color: #666;
}
@@ -191,35 +170,6 @@ ul {
}
}
.grip {
position: relative;
&:before {
content: '';
display: none;
width: 5px;
height: 20px;
background-image: url(../images/grips/vertical_dark.png);
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 7px;
margin-top: -10px;
}
&.btn-primary {
&:before {
background-image: url(../images/grips/vertical.png);
}
}
&:hover {
&:before {
display: block;
}
}
}
.key-editor__popup {
border: none;
width: 0px;
@@ -233,18 +183,10 @@ ul {
}
svg.uhk {
&.faded {
#left-case,
#right-case {
fill: #555;
}
rect {
fill: #666;
&.active {
fill: #000;
}
rect {
&.active {
//TODO: use a color variable instead of the declaration below.
fill: #337ab7;
}
}
}

138
sass/style.scss Normal file
View File

@@ -0,0 +1,138 @@
.popover {
padding: 0;
&.bottom {
> .arrow {
border-bottom-color: #000;
&:after {
border-bottom-color: #f7f7f7;
}
}
}
}
.popover-content {
padding: 10px 24px;
}
.popover-title {
&.menu-tabs {
padding: .5rem .5rem 0;
display: block;
}
&.menu-button-group {
display: none;
}
&.menu-tabs {
.nav-tabs {
position: relative;
top: 1px;
}
}
}
.popover-actions {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-top: 1px solid #ebebeb;
border-radius: 0 0 5px 5px;
text-align: right;
}
.select2-container {
z-index: 100000;
}
.scancode--explanation {
color: lightgray;
float: right;
}
.layout-abbreviation {
font-weight: bold;
color: #FFF;
background: #333;
padding: 4px 8px;
font-family: monospace;
margin-right: .5em;
}
.layout-preview img {
max-width: 100%;
margin-top: 10px;
}
.key-editor--none__description {
p {
padding: 2rem 0;
margin: 0;
text-align: center;
font-style: italic;
color: #999;
}
.icon {
font-size: 5rem;
color: #feefef;
position: absolute;
z-index: 0;
left: 50%;
margin-left: -2.5rem;
top: 50%;
margin-top: -2.5rem;
}
}
.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;
}
}
.preview-wrapper {
img {
max-width: 100%;
}
}
.global-key-setup {
&.disabled {
opacity: 0;
.setting-label {
color: #999;
}
}
}
.setting-label {
&.disabled {
color: #999;
}
}
.global-key-setup--wrapper {
position: relative;
.disabled-state--text {
position: absolute;
top: 50%;
margin-top: -4rem;
}
}