@helpscout/artboard - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

dist/Artboard/Artboard.actions.d.ts

@@ -38,2 +38,8 @@ /**
 /**
+ * INTERFACE
+ */
+export declare const toggleInterface: () => {
+    type: string;
+};
+/**
  * GUIDES
@@ -40,0 +46,0 @@ */

dist/Artboard/Artboard.actions.js

@@ -85,2 +85,8 @@ "use strict";
 /**
+ * INTERFACE
+ */
+exports.toggleInterface = function () {
+    return { type: Artboard_ActionTypes_1.default.TOGGLE_INTERFACE };
+};
+/**
  * GUIDES
@@ -87,0 +93,0 @@ */

dist/Artboard/Artboard.actions.ts

@@ -105,2 +105,10 @@ import ActionTypes from './Artboard.ActionTypes'
 /**
+ * INTERFACE
+ */
+
+export const toggleInterface = () => {
+  return {type: ActionTypes.TOGGLE_INTERFACE}
+}
+
+/**
  * GUIDES
@@ -107,0 +115,0 @@ */

dist/Artboard/Artboard.ActionTypes.d.ts

@@ -9,2 +9,3 @@ declare const ActionTypes: {
     TOGGLE_DARK_MODE: string;
+    TOGGLE_INTERFACE: string;
     NULL: string;
@@ -11,0 +12,0 @@ ZOOM: string;

dist/Artboard/Artboard.ActionTypes.js

@@ -12,2 +12,3 @@ "use strict";
     TOGGLE_DARK_MODE: 'TOGGLE_DARK_MODE',
+    TOGGLE_INTERFACE: 'TOGGLE_INTERFACE',
     NULL: 'NULL',
@@ -14,0 +15,0 @@ // Zoom

dist/Artboard/Artboard.ActionTypes.ts

@@ -10,2 +10,3 @@ const ActionTypes = {
   TOGGLE_DARK_MODE: 'TOGGLE_DARK_MODE',
+  TOGGLE_INTERFACE: 'TOGGLE_INTERFACE',
   NULL: 'NULL',
@@ -12,0 +13,0 @@

dist/Artboard/Artboard.Container.d.ts

@@ -15,2 +15,3 @@ import * as React from 'react';
         showBoxInspector: boolean;
+        showInterface: boolean;
         snapshots: never[];
@@ -17,0 +18,0 @@ withCenterGuides: boolean;

dist/Artboard/Artboard.css.d.ts

@@ -13,2 +13,3 @@ export declare const config: {
 export declare const GenericToolBarUI: any;
+export declare const InterfaceWrapperUI: any;
 export declare const ZoomWrapperUI: any;
@@ -15,0 +16,0 @@ export declare const KeyboardHintsWrapperUI: any;

dist/Artboard/Artboard.css.js

@@ -87,9 +87,10 @@ "use strict";
 });
-exports.ZoomWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  bottom: 40px;\n"], ["\n  bottom: 40px;\n"])));
-exports.KeyboardHintsWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  z-index: 2147483637;\n  bottom: 10px;\n"], ["\n  z-index: 2147483637;\n  bottom: 10px;\n"])));
-exports.ToolbarWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  top: 20px;\n"], ["\n  top: 20px;\n"])));
-exports.ToolbarCornerUI = fancy_1.default(Base_1.default)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n"])));
-exports.ToolbarLeftUI = fancy_1.default(exports.ToolbarCornerUI)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  left: 10px;\n"], ["\n  left: 10px;\n"])));
-exports.ToolbarRightUI = fancy_1.default(exports.ToolbarCornerUI)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  right: 10px;\n"], ["\n  right: 10px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+exports.InterfaceWrapperUI = fancy_1.default('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: static;\n  width: 100%;\n"], ["\n  position: static;\n  width: 100%;\n"])));
+exports.ZoomWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: 40px;\n"], ["\n  bottom: 40px;\n"])));
+exports.KeyboardHintsWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  z-index: 2147483637;\n  bottom: 10px;\n"], ["\n  z-index: 2147483637;\n  bottom: 10px;\n"])));
+exports.ToolbarWrapperUI = fancy_1.default(exports.GenericToolBarUI)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  top: 20px;\n"], ["\n  top: 20px;\n"])));
+exports.ToolbarCornerUI = fancy_1.default(Base_1.default)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n"])));
+exports.ToolbarLeftUI = fancy_1.default(exports.ToolbarCornerUI)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  left: 10px;\n"], ["\n  left: 10px;\n"])));
+exports.ToolbarRightUI = fancy_1.default(exports.ToolbarCornerUI)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  right: 10px;\n"], ["\n  right: 10px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
 //# sourceMappingURL=Artboard.css.js.map

dist/Artboard/Artboard.css.ts

@@ -148,2 +148,7 @@ import styled from '@helpscout/fancy'
 
+export const InterfaceWrapperUI = styled('div')`
+  position: static;
+  width: 100%;
+`
+
 export const ZoomWrapperUI = styled(GenericToolBarUI)`
@@ -150,0 +155,0 @@ bottom: 40px;

dist/Artboard/Artboard.d.ts

@@ -15,2 +15,3 @@ import * as React from 'react';
         showBoxInspector: boolean;
+        showInterface: boolean;
         snapshots: never[];
@@ -38,2 +39,3 @@ withCenterGuides: boolean;
     toggleDarkMode: () => void;
+    toggleInterface: () => void;
     prepareZoomIn: () => void;
@@ -40,0 +42,0 @@ prepareZoomOut: () => void;

dist/Artboard/Artboard.js

@@ -95,2 +95,7 @@ "use strict";
                     break;
+                case utils_1.Keys.PERIOD:
+                    if (event.metaKey || event.ctrlKey) {
+                        _this.toggleInterface();
+                    }
+                    break;
                 default:
@@ -162,2 +167,5 @@ break;
         };
+        _this.toggleInterface = function () {
+            _this.props.toggleInterface();
+        };
         _this.prepareZoomIn = function () {
@@ -248,6 +256,8 @@ if (_this.props.isKeyDown && _this.props.isZooming === 'in')
             return true;
+        if (nextProps.showInterface !== this.props.showInterface)
+            return true;
         return false;
     };
     Artboard.prototype.render = function () {
-        var _a = this.props, darkMode = _a.darkMode, children = _a.children;
+        var _a = this.props, darkMode = _a.darkMode, children = _a.children, showInterface = _a.showInterface;
         return (React.createElement(fancy_1.ThemeProvider, { theme: { darkMode: darkMode } },
@@ -257,6 +267,5 @@ React.createElement(Artboard_Wrapper_1.default, null,
                 React.createElement(Artboard_Eyedropper_1.default, null),
-                React.createElement(Toolbar_1.default, null),
+                showInterface && React.createElement(Toolbar_1.default, null),
                 React.createElement(Artboard_Canvas_1.default, null, children),
-                React.createElement(Artboard_css_1.ZoomWrapperUI, null,
-                    React.createElement(Artboard_Zoom_1.default, null)),
+                React.createElement(Artboard_css_1.ZoomWrapperUI, null, showInterface && React.createElement(Artboard_Zoom_1.default, null)),
                 React.createElement(Artboard_css_1.KeyboardHintsWrapperUI, null,
@@ -270,3 +279,3 @@ React.createElement(Artboard_KeyboardHints_1.default, null)))));
 var mapStateToProps = function (state, ownProps) {
-    var darkMode = state.darkMode, isCrosshairActive = state.isCrosshairActive, isKeyDown = state.isKeyDown, isMoving = state.isMoving, isZooming = state.isZooming, zoomLevel = state.zoomLevel;
+    var darkMode = state.darkMode, isCrosshairActive = state.isCrosshairActive, isKeyDown = state.isKeyDown, isMoving = state.isMoving, isZooming = state.isZooming, showInterface = state.showInterface, zoomLevel = state.zoomLevel;
     var artboardName = ownProps.id || ownProps.name || '';
@@ -281,2 +290,3 @@ return {
         isZooming: isZooming,
+        showInterface: showInterface,
         zoomLevel: zoomLevel,
@@ -304,2 +314,3 @@ };
     toggleDarkMode: actions.toggleDarkMode,
+    toggleInterface: actions.toggleInterface,
     toggleGuides: actions.toggleGuides,
@@ -306,0 +317,0 @@ toggleSizeInspector: actions.toggleSizeInspector,

dist/Artboard/Artboard.KeyboardHints.js

@@ -57,3 +57,6 @@ "use strict";
                     React.createElement("strong", null, "\u232B"),
-                    ": Clear Crosshairs"))));
+                    ": Clear Crosshairs"),
+                React.createElement("div", null,
+                    React.createElement("strong", null, "\u2318+."),
+                    ": Toggle Interface"))));
     };
@@ -60,0 +63,0 @@ return KeyboardHints;

dist/Artboard/Artboard.reducers.d.ts

@@ -27,2 +27,3 @@ export declare const initialState: {
     showBoxInspector: boolean;
+    showInterface: boolean;
     showSizeInspector: boolean;
@@ -62,2 +63,3 @@ showSnapshots: boolean;
     showBoxInspector: boolean;
+    showInterface: boolean;
     showSizeInspector: boolean;
@@ -64,0 +66,0 @@ showSnapshots: boolean;

dist/Artboard/Artboard.reducers.js

@@ -41,2 +41,3 @@ "use strict";
     showBoxInspector: false,
+    showInterface: true,
     showSizeInspector: false,
@@ -80,2 +81,4 @@ showSnapshots: true,
             return __assign({}, state, { darkMode: !state.darkMode });
+        case Artboard_ActionTypes_1.default.TOGGLE_INTERFACE:
+            return __assign({}, state, { showInterface: !state.showInterface });
         /**
@@ -82,0 +85,0 @@ * ZOOM ACTIONS

dist/Artboard/Artboard.reducers.ts

@@ -29,2 +29,3 @@ import ActionTypes from './Artboard.ActionTypes'
   showBoxInspector: false,
+  showInterface: true,
   showSizeInspector: false,
@@ -97,2 +98,8 @@ showSnapshots: true,
 
+    case ActionTypes.TOGGLE_INTERFACE:
+      return {
+        ...state,
+        showInterface: !state.showInterface,
+      }
+
     /**
@@ -99,0 +106,0 @@ * ZOOM ACTIONS

dist/Artboard/Artboard.types.d.ts

@@ -21,2 +21,3 @@ import { Snapshots } from '../Crosshair/Crosshair';
     posY: number;
+    showInterface: boolean;
     snapshots: Snapshots;
@@ -42,2 +43,3 @@ withResponsiveHeight: boolean;
     showBoxInspector: boolean;
+    showInterface: boolean;
     showSizeInspector: boolean;
@@ -44,0 +46,0 @@ showSnapshots: boolean;

dist/Artboard/Artboard.types.ts

@@ -22,2 +22,3 @@ import {Snapshots} from '../Crosshair/Crosshair'
   posY: number
+  showInterface: boolean
   snapshots: Snapshots
@@ -44,2 +45,3 @@ withResponsiveHeight: boolean
   showBoxInspector: boolean
+  showInterface: boolean
   showSizeInspector: boolean
@@ -46,0 +48,0 @@ showSnapshots: boolean

dist/Artboard/Artboard.utils.d.ts

@@ -14,2 +14,3 @@ import { State, Action } from './Artboard.types';
     showBoxInspector: boolean;
+    showInterface: boolean;
     snapshots: never[];
@@ -16,0 +17,0 @@ withCenterGuides: boolean;

dist/Artboard/Artboard.utils.js

@@ -27,2 +27,3 @@ "use strict";
     showBoxInspector: false,
+    showInterface: true,
     snapshots: [],
@@ -29,0 +30,0 @@ withCenterGuides: true,

dist/Artboard/Artboard.utils.ts

@@ -16,2 +16,3 @@ import {State, Action} from './Artboard.types'
   showBoxInspector: false,
+  showInterface: true,
   snapshots: [],
@@ -18,0 +19,0 @@ withCenterGuides: true,

dist/utils/index.d.ts

@@ -15,2 +15,3 @@ declare type CSSPropValue = number | string;
     BACKSPACE: number;
+    PERIOD: number;
 };
@@ -17,0 +18,0 @@ export declare function noop(): undefined;

dist/utils/index.js

@@ -26,2 +26,3 @@ "use strict";
     BACKSPACE: 8,
+    PERIOD: 190,
 };
@@ -28,0 +29,0 @@ function noop() {

dist/utils/index.ts

@@ -17,2 +17,3 @@ type CSSPropValue = number | string
   BACKSPACE: 8,
+  PERIOD: 190,
 }
@@ -19,0 +20,0 @@

package.json

 {
   "name": "@helpscout/artboard",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A tool kit for React UI development and design",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

423404

increased by0.88%

Lines of code

8779

increased by0.9%

No dependency changes