Initial commit of the Macro editor's mockup.
This commit is contained in:
Arpad Csanyi
93
macro.css
Normal file
93
macro.css
Normal 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: 0px 0px 20px 0px 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: whtie;
|
||||
margin-left: -.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;
|
||||
}
|
||||
94
macro.html
Normal file
94
macro.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!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="macro.css" rel="stylesheet" type="text/css" />
|
||||
<meta charset="utf-8">
|
||||
<title>Ultimate Hacking Keyboard - Agent mockups</title>
|
||||
</head>
|
||||
<body style="padding: 50px;">
|
||||
|
||||
<h1>Ultimate Hacking Keyboard — Agent mockups</h1>
|
||||
<ul class="nav nav-pills">
|
||||
<li role="presentation"><a href="index.html">Key action editor</a></li>
|
||||
<li role="presentation" class="active"><a href="macro.html">Macro editor</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="main-wrapper" style="margin: 50px;">
|
||||
<div class="container-fluid">
|
||||
<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="macro.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
70
macro.js
Normal file
70
macro.js
Normal file
@@ -0,0 +1,70 @@
|
||||
$(function() {
|
||||
var macroSettingsHtml = $('.macro-settings');
|
||||
var toggleSpeed = 'fast';
|
||||
var notActiveOpacity = '0.75';
|
||||
|
||||
var newMacroHtml = $('.new-macro-settings');
|
||||
|
||||
// List with handle
|
||||
Sortable.create(listWithHandle, {
|
||||
handle: '.move-handle',
|
||||
filter: '.no-reorder',
|
||||
draggable: '.list-group-item',
|
||||
animation: 150
|
||||
});
|
||||
|
||||
|
||||
$('.action--edit').on('click', function(e) {
|
||||
var $this = $(this);
|
||||
var action = $this.parent('.list-group-item');
|
||||
$('.action--item.active').removeClass('callout');
|
||||
macroSettingsHtml.removeClass('callout');
|
||||
if (macroSettingsHtml.is(':visible') && !action.hasClass('active')) {
|
||||
macroSettingsHtml.slideToggle(toggleSpeed, function() {
|
||||
$('.action--item:not(.active)').css('opacity', '1');
|
||||
$('.action--item.active').removeClass('active');
|
||||
action.toggleClass('active');
|
||||
$('.action--item:not(.active)').css('opacity', notActiveOpacity);
|
||||
|
||||
$(this).detach().insertAfter(action).slideToggle(toggleSpeed, function () {
|
||||
action.addClass('callout');
|
||||
macroSettingsHtml.addClass('callout');
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
if (!macroSettingsHtml.is(':visible')) {
|
||||
action.addClass('active');
|
||||
}
|
||||
macroSettingsHtml.detach().insertAfter(action).slideToggle(toggleSpeed, function() {
|
||||
if (macroSettingsHtml.is(':visible')) {
|
||||
$('.action--item:not(.active)').css('opacity', notActiveOpacity);
|
||||
action.addClass('callout');
|
||||
macroSettingsHtml.addClass('callout');
|
||||
}
|
||||
else {
|
||||
$('.action--item:not(.active)').css('opacity', '1');
|
||||
action.removeClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.flex-button', '.macro-settings').on('click', function() {
|
||||
$('.action--item.active .action--edit').click();
|
||||
});
|
||||
|
||||
$('.flex-button', '.new-macro-settings').on('click', function() {
|
||||
newMacroHtml.slideToggle(toggleSpeed, function() {
|
||||
newMacroHtml.hide().detach();
|
||||
});
|
||||
});
|
||||
|
||||
$('.add-new__action-item').on('click', function() {
|
||||
newMacroHtml.insertAfter($(this));
|
||||
newMacroHtml.slideToggle(toggleSpeed);
|
||||
});
|
||||
|
||||
// Detach and remove this item only after all event listhere has been registered on it.
|
||||
newMacroHtml.hide().detach();
|
||||
});
|
||||
Reference in New Issue
Block a user