diff --git a/macro.css b/macro.css new file mode 100644 index 00000000..cff664f8 --- /dev/null +++ b/macro.css @@ -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; +} diff --git a/macro.html b/macro.html new file mode 100644 index 00000000..ab06be5b --- /dev/null +++ b/macro.html @@ -0,0 +1,94 @@ + + + + + + + + + Ultimate Hacking Keyboard - Agent mockups + + + +

Ultimate Hacking Keyboard — Agent mockups

+ + +
+
+
+
+
+ + Move pointer by 100px leftwards + + +
+ +
+ + Press letter A + + +
+
+ + Press Alt+Tab + + +
+
+ + Delay of 235ms + + +
+
+ + Press button 1 + + +
+
+ + Scroll by 150px downdward + + +
+
+ Add new action item +
+
+
+

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.

+
+
+ + +
+
+
+
+
+
+
+ + + + + + + + + diff --git a/macro.js b/macro.js new file mode 100644 index 00000000..60736f72 --- /dev/null +++ b/macro.js @@ -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(); +});