From 28ef5751fefe0d4b9f453587103a9520ffc1a535 Mon Sep 17 00:00:00 2001 From: Roman Pavlov Date: Mon, 29 Jan 2018 18:21:13 +0300 Subject: [PATCH 1/3] make elements pane scrollable. resolves #18 --- resources/debugger/components/elements/quick-look.jsx | 11 ----------- resources/debugger/components/list-element.jsx | 1 + 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/resources/debugger/components/elements/quick-look.jsx b/resources/debugger/components/elements/quick-look.jsx index 1a0ba5b..075eeb3 100644 --- a/resources/debugger/components/elements/quick-look.jsx +++ b/resources/debugger/components/elements/quick-look.jsx @@ -51,16 +51,6 @@ const Wrapper = styled.div` } ` -const Overlay = styled.div` - position: fixed; - width: 100vw; - height: calc(100vh - 30px); - cursor: auto; - top: 30px; - left: 0; - z-index: 8; -` - class QuickLook extends Component { componentDidMount() { if (!this.props.element.meta) { @@ -77,7 +67,6 @@ class QuickLook extends Component { render() { return (
- e.preventDefault()}> {!this.props.element.meta ? ( Loading... diff --git a/resources/debugger/components/list-element.jsx b/resources/debugger/components/list-element.jsx index c9a6ac1..bb815eb 100644 --- a/resources/debugger/components/list-element.jsx +++ b/resources/debugger/components/list-element.jsx @@ -25,6 +25,7 @@ export const ButtonFilter = styled(Filter)` export const Wrapper = styled.div` flex: 1; overflow: hidden; + height: 100vh; ` export const ListInner = styled.ul` From 68660397180a4b97b1b46913ed76bb3b8a7c72c7 Mon Sep 17 00:00:00 2001 From: Roman Pavlov Date: Mon, 29 Jan 2018 18:21:50 +0300 Subject: [PATCH 2/3] configure webpack to transpile 'cocoascript-class' package to es5. allows running sketch-dev-tools on an older mac. this might gonna be reverted --- webpack.skpm.config.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/webpack.skpm.config.js b/webpack.skpm.config.js index 55bb52f..9ad8e7d 100644 --- a/webpack.skpm.config.js +++ b/webpack.skpm.config.js @@ -1,5 +1,6 @@ /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */ const webpack = require('webpack') +const path = require('path') module.exports = config => { config.resolve.extensions = ['.sketch.js', '.js', '.jsx'] @@ -29,6 +30,17 @@ module.exports = config => { }, ], }) + config.module.rules.push({ + test: /\.jsx?$/, + include: [path.resolve(__dirname, 'node_modules/cocoascript-class')], + use: { + loader: 'babel-loader', + options: { + babelrc: false, + presets: ['babel-preset-airbnb'], + }, + }, + }) config.plugins.push( new webpack.DefinePlugin({ From d54419cb2fae3a3f19a6690476dbcfa84921b2dd Mon Sep 17 00:00:00 2001 From: Roman Pavlov Date: Wed, 31 Jan 2018 12:33:51 +0300 Subject: [PATCH 3/3] - added `selectedElement` to `elements` state. - show `QuickLook` when `selectedElement` equals to current element id --- .../components/elements/element-tree-item.jsx | 22 +++++++++++++------ resources/debugger/redux/ducks/elements.js | 14 ++++++++++++ 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/resources/debugger/components/elements/element-tree-item.jsx b/resources/debugger/components/elements/element-tree-item.jsx index 9a87c73..2eac8b2 100644 --- a/resources/debugger/components/elements/element-tree-item.jsx +++ b/resources/debugger/components/elements/element-tree-item.jsx @@ -1,10 +1,16 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import { connect } from 'react-redux' import styled from 'react-emotion' import { css } from 'emotion' import QuickLook from './quick-look' +import { selectElement } from '../../redux/ducks/elements' import { ButtonToggle } from '../value/log-element' +const mapStateToProps = state => ({ + selectedElement: state.elements.selectedElement, +}) + const Element = styled.ul` padding: 0 0 0 2rem; list-style: none; @@ -56,12 +62,11 @@ const OffsetButtonToggle = styled(ButtonToggle)` top: 0.3rem; ` -export default class ElementTreeItem extends Component { +class ElementTreeItem extends Component { constructor() { super() this.state = { expanded: false, - quickLook: false, } } @@ -82,13 +87,11 @@ export default class ElementTreeItem extends Component { if (e.isDefaultPrevented() || this.props.element.id === '?') { return } - this.setState({ - quickLook: !this.state.quickLook, - }) + this.props.dispatch(selectElement(this.props.element.id)) }} hasInfo={this.props.element.id !== '?'} > - <{this.renderElementName()}{expanded ? '>' : ' />'} {this.state.quickLook && } + <{this.renderElementName()}{expanded ? '>' : ' />'} {this.props.selectedElement === this.props.element.id && } ) } @@ -109,7 +112,7 @@ export default class ElementTreeItem extends Component { {this.renderQuickLook(true)} {element.children.map((e, i) => ( - + ))} </{this.renderElementName(true)}> @@ -139,4 +142,9 @@ ElementTreeItem.propTypes = { class: PropTypes.string, name: PropTypes.string, }).isRequired, + selectedElement: PropTypes.string, + dispatch: PropTypes.func.isRequired, } + +const ElementTreeItemWrapper = connect(mapStateToProps)(ElementTreeItem) +export default ElementTreeItemWrapper \ No newline at end of file diff --git a/resources/debugger/redux/ducks/elements.js b/resources/debugger/redux/ducks/elements.js index b0a1db5..2828afc 100644 --- a/resources/debugger/redux/ducks/elements.js +++ b/resources/debugger/redux/ducks/elements.js @@ -7,10 +7,12 @@ import { const FETCH_TREE = 'elements/FETCH_TREE' const FETCH_PAGE_METADATA = 'elements/FETCH_PAGE_METADATA' const FETCH_LAYER_METADATA = 'elements/FETCH_LAYER_METADATA' +const SELECT_ELEMENT = 'elements/SELECT_ELEMENT' const initialState = { loading: true, tree: [], + selectedElement: '', } const handlers = {} @@ -127,6 +129,18 @@ handlers[SET_LAYER_METADATA] = (state, { payload }) => ({ })), }) +export const selectElement = id => ({ + type: SELECT_ELEMENT, + payload: { + id, + }, +}) + +handlers[SELECT_ELEMENT] = (state, { payload }) => ({ + ...state, + selectedElement: payload.id, +}) + export default function(state = initialState, action) { if (handlers[action.type]) { return handlers[action.type](state, action)