@helpscout/artboard
Version:
A tool kit for React UI development and design
69 lines • 4.39 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var fancy_1 = require("@helpscout/fancy");
var Base_1 = require("../UI/Base");
var KeyboardHints = /** @class */ (function (_super) {
__extends(KeyboardHints, _super);
function KeyboardHints() {
return _super !== null && _super.apply(this, arguments) || this;
}
KeyboardHints.prototype.render = function () {
return (React.createElement(KeyboardHintsUI, null,
React.createElement(KeyboardHintsActionsUI, null,
React.createElement("div", null,
React.createElement("strong", null, "\u2325+D"),
": Dark Mode"),
React.createElement("div", null,
React.createElement("strong", null, "Z"),
": Zoom In"),
React.createElement("div", null,
React.createElement("strong", null, "\u2325+Z"),
": Zoom Out"),
React.createElement("div", null,
React.createElement("strong", null, "Space"),
": Drag"),
React.createElement("div", null,
React.createElement("strong", null, "G"),
": Guides"),
React.createElement("div", null,
React.createElement("strong", null, "B"),
": Box Inspector"),
React.createElement("div", null,
React.createElement("strong", null, "S"),
": Size Inspector"),
React.createElement("div", null,
React.createElement("strong", null, "X"),
": Crosshair"),
React.createElement("div", null,
React.createElement("strong", null, "\u232B"),
": Clear Crosshairs"),
React.createElement("div", null,
React.createElement("strong", null, "\u2318+."),
": Toggle Interface"))));
};
return KeyboardHints;
}(React.PureComponent));
exports.KeyboardHints = KeyboardHints;
var KeyboardHintsUI = fancy_1.default(Base_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n line-height: 1;\n justify-content: center;\n flex-direction: column;\n opacity: 0.3;\n position: absolute;\n left: 10px;\n bottom: 0;\n pointer-events: auto;\n transform: translateZ(0);\n"], ["\n align-items: center;\n display: flex;\n line-height: 1;\n justify-content: center;\n flex-direction: column;\n opacity: 0.3;\n position: absolute;\n left: 10px;\n bottom: 0;\n pointer-events: auto;\n transform: translateZ(0);\n"])));
var KeyboardHintsActionsUI = fancy_1.default(Base_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n font-size: 10px;\n justify-content: center;\n margin-bottom: 5px;\n opacity: 0.5;\n transition: opacity 200ms linear;\n\n &:hover {\n opacity: 1;\n }\n\n * {\n margin: 3px 5px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n font-size: 10px;\n justify-content: center;\n margin-bottom: 5px;\n opacity: 0.5;\n transition: opacity 200ms linear;\n\n &:hover {\n opacity: 1;\n }\n\n * {\n margin: 3px 5px;\n }\n"])));
exports.default = KeyboardHints;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Artboard.KeyboardHints.js.map