text-shadow to the list.
* Enhanced Support For Individual Word Styling - If you attempted to style one word differently within a text block by applying, for example, a different color or font weight, this would cause the styled word to break out of the text block. From a technical perspective, this occurred because we were setting <span> elements to display: inline-block;. This was done so we could accurately measure their height, width, and position. Now for these elements, we won't show a height, width, or position because it conveys no information. We instead select the parent container which is typically a <p> tag.
* Disable Artboard Concept - The redline tool attempts to mimic the concept of an artboard used in many other tools. This is represented as a floating, semi-opaque, centered board. Some users have very large documents or do not prefer this concept.
+
+#### Version 3.1.1
+
+* Migrated from Gulp to npm for all build and development tasks
+* Updated dependencies
+* Added the CSS attributes of letter-spacing and text-transform
+* Added postcss for legacy browser support
diff --git a/gulp.config.js b/config.js
similarity index 73%
rename from gulp.config.js
rename to config.js
index 74059ca..83b2343 100644
--- a/gulp.config.js
+++ b/config.js
@@ -28,9 +28,6 @@ module.exports = () => ({
production: 'production'
},
bundleName: 'plugin',
- configFiles: {
- sassConfig: './.sasslintrc'
- },
directories: {
distDirectory: './dist',
legacyWebDirectory: './web',
@@ -43,18 +40,5 @@ module.exports = () => ({
injectedEnvironment: 'INJECTED_ENVIRONMENT'
},
legacyBundleName: 'axure-redline-plugin',
- packageJSON: './package.json',
- tasks: {
- bumpVersion: 'bump-version',
- bundle: 'bundle',
- cleanDist: 'clean',
- generatePlugin: 'generate-plugin',
- legacySupport: 'legacy-support',
- lintCSS: 'lint-css',
- lintJS: 'lint-js',
- serveInject: 'serve-inject',
- serveSandbox: 'serve-sandbox',
- watch: 'watch'
- },
webpackConfig: '../webpack.config.js'
});
diff --git a/dist/plugin.js b/dist/plugin.js
index 0afdfd4..cb050dc 100644
--- a/dist/plugin.js
+++ b/dist/plugin.js
@@ -1,6 +1,6 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=25)}([function(e,t,n){"use strict";e.exports=n(26)},function(e,t,n){e.exports=n(36)()},function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t,n){var r=n(34),o=n(3);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(t)}e.exports=n},function(e,t,n){var r=n(35);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t){function n(e,t){for(var n=0;n{attributeFamily}
@@ -568,7 +562,7 @@ class ElementPropertiesSidebarModule extends React.PureComponent { return elementAttributes; } - renderPseudoClassTabs() { + renderPseudoClassTabs = () => { const { activeTab, defaultCSSAttributes @@ -827,11 +821,23 @@ class ElementPropertiesSidebarModule extends React.PureComponent { } } +ElementPropertiesSidebarModule.displayName = 'ElementPropertiesSidebarModule'; + ElementPropertiesSidebarModule.propTypes = { gridLayout: PropTypes.string.isRequired, gridOverlaySet: PropTypes.func.isRequired, isToolEnabled: PropTypes.bool.isRequired, - selectedElement: PropTypes.shape({}) + selectedElement: PropTypes.shape({ + target: PropTypes.shape({ + getAttribute: PropTypes.func, + id: PropTypes.string, + innerText: PropTypes.string, + parentElement: PropTypes.shape({ + id: PropTypes.string + }), + value: PropTypes.string + }) + }) }; ElementPropertiesSidebarModule.defaultProps = { diff --git a/src/modules/ElementPropertiesSidebarModule/styles.scss b/src/modules/ElementPropertiesSidebarModule/styles.scss index f69ebad..c17d0de 100644 --- a/src/modules/ElementPropertiesSidebarModule/styles.scss +++ b/src/modules/ElementPropertiesSidebarModule/styles.scss @@ -1,6 +1,6 @@ @import '../../styles/constants'; -// Module Constants +/* Module Constants */ $side-pull-width: 20px; $sidebar-padding: 20px; $sidebar-width: 270px; @@ -9,18 +9,18 @@ $grid-overlay-height: 100px; .ElementPropertiesSidebarModule { position: fixed; - z-index: $z-index-sidebar; top: $header-height; right: -#{$sidebar-width - 5px}; + z-index: $z-index-sidebar; box-sizing: border-box; width: $sidebar-width; height: calc(100% - #{$header-height}); - transition: right 0.1s ease-in-out; - - opacity: $ui-opacity; background-color: $primary-color-background; + opacity: $ui-opacity; + + transition: right 0.1s ease-in-out; &--visible { right: 0; @@ -36,27 +36,25 @@ $grid-overlay-height: 100px; left: -#{$side-pull-width}; display: flex; - align-items: center; flex-direction: column; + align-items: center; justify-content: space-between; - box-sizing: border-box; width: $side-pull-width; height: #{2 * $side-pull-width}; padding: 13px 0 13px 7px; - cursor: pointer; - + background-color: inherit; border-radius: $side-pull-width 0 0 $side-pull-width; outline: none; - background-color: inherit; + cursor: pointer; & > span { width: 100%; height: 2px; - border-radius: 1px; background-color: $primary-color-white; + border-radius: 1px; } } @@ -67,20 +65,18 @@ $grid-overlay-height: 100px; &--parent-component-name { box-sizing: border-box; width: 100%; - // Weird margin to nicely align pseudo tabs with pull tab. - margin-bottom: 41px; + margin-bottom: 41px; /* Weird margin to nicely align pseudo tabs with pull tab. */ padding: 0 $sidebar-padding; .InputComponent { - margin-top: 0 !important; // sass-lint:disable-line no-important + margin-top: 0 !important; } } &--header { display: flex; - align-items: flex-end; flex-direction: row; - + align-items: flex-end; box-sizing: border-box; width: 100%; height: $pseudo-tab-height; @@ -88,46 +84,44 @@ $grid-overlay-height: 100px; } &--tab { - font-family: $font-stack; - font-size: 12px; - z-index: 1; display: flex; - align-items: center; flex-basis: 0; flex-grow: 1; + align-items: center; justify-content: center; - box-sizing: border-box; max-width: 50%; height: 100%; margin: 0 1px; padding: 0 5px; - cursor: pointer; - color: $primary-color-gray; - border-radius: 3px 3px 0 0; + font-size: 12px; + font-family: $font-stack; + background-color: $primary-color-white; + border-radius: 3px 3px 0 0; + cursor: pointer; span { - overflow: hidden; - width: 100%; + overflow: hidden; - text-align: center; white-space: nowrap; + text-align: center; text-overflow: ellipsis; } } &--tab-active { color: $primary-color-white; - border-width: 1px 1px 0; - border-style: solid; - border-color: $primary-color-white; + background-color: $primary-color-background; + border-color: $primary-color-white; + border-style: solid; + border-width: 1px 1px 0; } &--tab-inactive { @@ -137,25 +131,22 @@ $grid-overlay-height: 100px; } &--body { - overflow-y: auto; - box-sizing: border-box; width: 100%; height: calc(100% - #{$pseudo-tab-height}); margin-top: -1px; padding: 0 $sidebar-padding 20px; + overflow-y: auto; border-top: solid 1px $primary-color-white; p { - font-size: 12px; - font-weight: bold; - margin-top: 20px; - text-transform: uppercase; - color: $primary-color-white; + font-weight: bold; + font-size: 12px; + text-transform: uppercase; } } } @@ -167,7 +158,6 @@ $grid-overlay-height: 100px; &__grid-overlay { display: none; - box-sizing: border-box; width: 100%; height: #{$grid-overlay-height}; @@ -184,7 +174,9 @@ $grid-overlay-height: 100px; } } - .ElementPropertiesSidebarModule__pseudo-tabs--parent-component-name ~ .ElementPropertiesSidebarModule__pseudo-tabs--body { - height: calc(100% - 105px); + .ElementPropertiesSidebarModule__pseudo-tabs--parent-component-name { + & ~ .ElementPropertiesSidebarModule__pseudo-tabs--body { + height: calc(100% - 105px); + } } } diff --git a/src/modules/EnableToolModule/styles.scss b/src/modules/EnableToolModule/styles.scss index e0d2017..cfbfcd5 100644 --- a/src/modules/EnableToolModule/styles.scss +++ b/src/modules/EnableToolModule/styles.scss @@ -1,38 +1,36 @@ @import '../../styles/constants'; -// Module Constants $switch-transition: all 0.15s ease-in-out; -$color-disabled: #ddd; .EnableToolModule { display: flex; align-items: center; justify-content: space-between; - width: 160px; height: 100%; span { - font-family: $font-stack; - font-size: 16px; - color: $primary-color-white; + font-size: 16px; + font-family: $font-stack; } input { position: absolute; - visibility: hidden; - margin-left: -9999px; - &:checked + label { - background-color: $primary-color-teal; - - &::after { - margin-left: 32px; + visibility: hidden; + &:checked { + & + label { background-color: $primary-color-teal; + + &::after { + margin-left: 32px; + + background-color: $primary-color-teal; + } } } } @@ -41,18 +39,18 @@ $color-disabled: #ddd; position: relative; display: block; - width: 60px; height: 28px; padding: 2px; + background-color: $color-gray; + border-radius: 28px; + outline: none; cursor: pointer; - user-select: none; + transition: $switch-transition; - border-radius: 28px; - outline: none; - background-color: $color-disabled; + user-select: none; &::before { position: absolute; @@ -63,11 +61,12 @@ $color-disabled: #ddd; display: block; - content: ''; + background-color: $primary-color-white; + border-radius: 28px; + transition: $switch-transition; - border-radius: 28px; - background-color: $primary-color-white; + content: ''; } &::after { @@ -77,14 +76,14 @@ $color-disabled: #ddd; left: 4px; display: block; - width: 24px; - content: ''; + background-color: $color-gray; + border-radius: 50%; + transition: $switch-transition; - border-radius: 50%; - background-color: $color-disabled; + content: ''; } } } diff --git a/src/modules/GridOverlayModule/styles.scss b/src/modules/GridOverlayModule/styles.scss index 8f0cb2a..1bc9e30 100644 --- a/src/modules/GridOverlayModule/styles.scss +++ b/src/modules/GridOverlayModule/styles.scss @@ -2,9 +2,9 @@ .GridOverlayModule { position: absolute; - z-index: 1; top: 0; left: 0; + z-index: 1; display: flex; align-items: center; diff --git a/src/modules/HeaderModule/index.js b/src/modules/HeaderModule/index.js index a074d7e..e29d302 100644 --- a/src/modules/HeaderModule/index.js +++ b/src/modules/HeaderModule/index.js @@ -13,8 +13,6 @@ import { import './styles.scss'; class HeaderModule extends React.PureComponent { - static displayName = 'HeaderModule'; - constructor(props) { super(props); @@ -81,6 +79,8 @@ class HeaderModule extends React.PureComponent { } } +HeaderModule.displayName = 'HeaderModule'; + HeaderModule.propTypes = { isArtboardWrapperShown: PropTypes.bool.isRequired, isToolEnabled: PropTypes.bool.isRequired, diff --git a/src/modules/HeaderModule/styles.scss b/src/modules/HeaderModule/styles.scss index 9207cb8..237c7a8 100644 --- a/src/modules/HeaderModule/styles.scss +++ b/src/modules/HeaderModule/styles.scss @@ -1,12 +1,11 @@ @import '../../styles/constants'; .HeaderModule { - font-family: $font-stack; position: fixed; - z-index: $z-index-header; top: 0; left: 0; + z-index: $z-index-header; display: flex; align-items: center; @@ -17,12 +16,15 @@ height: $header-height; padding: 0 30px; - opacity: $ui-opacity; + font-family: $font-stack; + background-color: $primary-color-background; + opacity: $ui-opacity; + &__logo { - font-size: 18px; color: $primary-color-white; + font-size: 18px; } } diff --git a/src/modules/HoveredElementModule/index.js b/src/modules/HoveredElementModule/index.js index 8394b78..6a63138 100644 --- a/src/modules/HoveredElementModule/index.js +++ b/src/modules/HoveredElementModule/index.js @@ -25,7 +25,7 @@ class HoveredElementModule extends React.PureComponent { } = this.props; return ( -Based on your great feedback, feature requests, and identified bugs, we've made some great updates to the tool.
+Yes, we're still here! It has been a while but we've spent time reviewing feature requests for the native inspect tool and have implemented any missing features here. Thanks for your continued usage and support!
bored, a red color swatch was applied.position: fixed;.border-color, without a border style being defined. There is no reason to display this attribute without a border-style defined.text-shadow to the list.<span> elements to display: inline-block;. This was done so we could accurately measure their height, width, and position. Now for these elements, we won't show a height, width, or position because it conveys no information. We instead select the parent container which is typically a <p> tag.text-transform and letter-spacing attributes