From c7c5cc530dd9453f6118a1f0b047bea6f3474f16 Mon Sep 17 00:00:00 2001 From: Mike Murray Date: Mon, 9 Jan 2017 11:35:02 -0800 Subject: [PATCH 01/25] Moving toolbars Moved Admin toolbar (vertical one) to the left Moved DashboardHeader template region to top Moved ProductDetailsSimple toolbar into own component ( ProductToolbar ) Moved ProductToolbar to DashboardHeader template region in registry --- .../client/templates/layout/admin/admin.html | 65 ++++++++-------- .../client/components/index.js | 1 + .../client/components/productDetail.js | 47 +---------- .../client/components/productToolbar.js | 76 ++++++++++++++++++ .../client/containers/index.js | 1 + .../containers/productToolbarContainer.js | 77 +++++++++++++++++++ .../client/templates/productDetailSimple.html | 9 +++ .../client/templates/productDetailSimple.js | 12 ++- .../product-detail-simple/register.js | 2 +- 9 files changed, 211 insertions(+), 79 deletions(-) create mode 100644 imports/plugins/included/product-detail-simple/client/components/productToolbar.js create mode 100644 imports/plugins/included/product-detail-simple/client/containers/productToolbarContainer.js diff --git a/imports/plugins/core/layout/client/templates/layout/admin/admin.html b/imports/plugins/core/layout/client/templates/layout/admin/admin.html index 03aa57162f2..ffc9023eb1c 100644 --- a/imports/plugins/core/layout/client/templates/layout/admin/admin.html +++ b/imports/plugins/core/layout/client/templates/layout/admin/admin.html @@ -1,6 +1,40 @@ diff --git a/imports/plugins/included/product-detail-simple/client/components/index.js b/imports/plugins/included/product-detail-simple/client/components/index.js index 356f40e8682..305759327ed 100644 --- a/imports/plugins/included/product-detail-simple/client/components/index.js +++ b/imports/plugins/included/product-detail-simple/client/components/index.js @@ -1,4 +1,5 @@ export { default as ProductDetail } from "./productDetail"; +export { default as ProductToolbar } from "./productToolbar"; export { default as VariantList } from "./variantList"; export { default as ChildVariant } from "./childVariant"; export { default as AddToCartButton } from "./addToCartButton"; diff --git a/imports/plugins/included/product-detail-simple/client/components/productDetail.js b/imports/plugins/included/product-detail-simple/client/components/productDetail.js index a103dff25eb..bc678b7b889 100644 --- a/imports/plugins/included/product-detail-simple/client/components/productDetail.js +++ b/imports/plugins/included/product-detail-simple/client/components/productDetail.js @@ -9,7 +9,6 @@ import { } from "/imports/plugins/core/ui/client/components/"; import { AlertContainer } from "/imports/plugins/core/ui/client/containers"; import { PublishContainer } from "/imports/plugins/core/revisions"; -import SimpleLayout from "../../lib/layout/simple"; import { ReactionLayout } from "/imports/plugins/core/layout/lib"; class ProductDetail extends Component { @@ -25,54 +24,9 @@ class ProductDetail extends Component { return this.props.editable; } - handleVisibilityChange = (event, isProductVisible) => { - if (this.props.onProductFieldChange) { - this.props.onProductFieldChange(this.product._id, "isVisible", isProductVisible); - } - } - - handlePublishActions = (event, action) => { - if (action === "archive" && this.props.onDeleteProduct) { - this.props.onDeleteProduct(this.product._id); - } - } - - renderToolbar() { - if (this.props.hasAdminPermission) { - return ( - - - - - - } - onChange={this.props.onViewContextChange} - value={this.props.viewAs} - > - - - - - - - - - ); - } - - return null; - } - render() { return (
- {this.renderToolbar()}
@@ -92,6 +46,7 @@ ProductDetail.propTypes = { cartQuantity: PropTypes.number, editable: PropTypes.bool, hasAdminPermission: PropTypes.bool, + layout: PropTypes.string, layoutName: PropTypes.string, mediaGalleryComponent: PropTypes.node, onAddToCart: PropTypes.func, diff --git a/imports/plugins/included/product-detail-simple/client/components/productToolbar.js b/imports/plugins/included/product-detail-simple/client/components/productToolbar.js new file mode 100644 index 00000000000..9cfeaa6c181 --- /dev/null +++ b/imports/plugins/included/product-detail-simple/client/components/productToolbar.js @@ -0,0 +1,76 @@ +import React, { Component, PropTypes } from "react"; +import { + Button, + DropDownMenu, + MenuItem, + Translation, + Toolbar, + ToolbarGroup +} from "/imports/plugins/core/ui/client/components/"; +import { PublishContainer } from "/imports/plugins/core/revisions"; + +class ProductToolbar extends Component { + static propTypes = { + editable: PropTypes.bool, + hasAdminPermission: PropTypes.bool, + onDeleteProduct: PropTypes.func, + onProductFieldChange: PropTypes.func, + onViewContextChange: PropTypes.func, + product: PropTypes.object, + viewAs: PropTypes.string + } + + get product() { + return this.props.product || {}; + } + + get editable() { + return this.props.editable; + } + + handleVisibilityChange = (event, isProductVisible) => { + if (this.props.onProductFieldChange) { + this.props.onProductFieldChange(this.product._id, "isVisible", isProductVisible); + } + } + + handlePublishActions = (event, action) => { + if (action === "archive" && this.props.onDeleteProduct) { + this.props.onDeleteProduct(this.product._id); + } + } + + render() { + if (this.props.hasAdminPermission) { + return ( + + + + + + } + onChange={this.props.onViewContextChange} + value={this.props.viewAs} + > + + + + + + + + + ); + } + + return null; + } +} + +export default ProductToolbar; diff --git a/imports/plugins/included/product-detail-simple/client/containers/index.js b/imports/plugins/included/product-detail-simple/client/containers/index.js index 850ec7cb65f..d8663048de9 100644 --- a/imports/plugins/included/product-detail-simple/client/containers/index.js +++ b/imports/plugins/included/product-detail-simple/client/containers/index.js @@ -1,3 +1,4 @@ export { default as ProductDetailContainer } from "./productDetailContainer"; export { default as SocialContainer } from "./socialContainer"; export { default as VariantListContainer } from "./variantListContainer"; +export { default as ProductToolbarContainer } from "./productToolbarContainer"; diff --git a/imports/plugins/included/product-detail-simple/client/containers/productToolbarContainer.js b/imports/plugins/included/product-detail-simple/client/containers/productToolbarContainer.js new file mode 100644 index 00000000000..80f7a74520f --- /dev/null +++ b/imports/plugins/included/product-detail-simple/client/containers/productToolbarContainer.js @@ -0,0 +1,77 @@ +import React, { Component, PropTypes } from "react"; +import { composeWithTracker } from "/lib/api/compose"; +import { Meteor } from "meteor/meteor"; +import { ReactionProduct } from "/lib/api"; +import { Reaction, i18next, Logger } from "/client/api"; +import { Tags, Media } from "/lib/collections"; +import { Loading } from "/imports/plugins/core/ui/client/components"; +import { ProductDetail } from "../components"; +import { SocialContainer, VariantListContainer } from "./"; +import { MediaGalleryContainer } from "/imports/plugins/core/ui/client/containers"; +import { DragDropProvider, TranslationProvider } from "/imports/plugins/core/ui/client/providers"; +import { StyleRoot } from "radium"; + + +const handleProductFieldChange = (productId, fieldName, value) => { + Meteor.call("products/updateProductField", productId, fieldName, value); +}; + +const handleViewContextChange = (event, value) => { + Reaction.Router.setQueryParams({ as: value }); +}; + +const handleDeleteProduct = (product) => { + ReactionProduct.maybeDeleteProduct(product); +}; + +function composer(props, onData) { + const productId = Reaction.Router.getParam("handle"); + const variantId = Reaction.Router.getParam("variantId"); + const revisionType = Reaction.Router.getQueryParam("revision"); + const viewProductAs = Reaction.Router.getQueryParam("as"); + + let productSub; + + if (productId) { + productSub = Meteor.subscribe("Product", productId); + } + + if (productSub && productSub.ready()) { + // Get the product + const product = ReactionProduct.setProduct(productId, variantId); + + let editable; + + if (viewProductAs === "customer") { + editable = false; + } else { + editable = Reaction.hasPermission(["createProduct"]); + } + + // Get the product tags + if (product) { + onData(null, { + product: product, + editable, + viewAs: viewProductAs, + hasAdminPermission: Reaction.hasPermission(["createProduct"]), + onDeleteProduct: handleDeleteProduct, + onProductFieldChange: handleProductFieldChange, + onViewContextChange: handleViewContextChange + }); + } + } +} + +// Decorate component and export +export default function productToolbarContainer(Comp) { + function CompositeComponent(props) { + return ( + + + + ); + } + + return composeWithTracker(composer, Loading)(CompositeComponent); +} diff --git a/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.html b/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.html index 041fe1ea0a0..4a57f23124b 100644 --- a/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.html +++ b/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.html @@ -9,3 +9,12 @@ {{> productDetail }} {{/if}} + + diff --git a/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.js b/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.js index d2b55b438ab..3e833b07913 100644 --- a/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.js +++ b/imports/plugins/included/product-detail-simple/client/templates/productDetailSimple.js @@ -1,5 +1,6 @@ -import { ProductDetailContainer } from "../containers"; import { isRevisionControlEnabled } from "/imports/plugins/core/revisions/lib/api"; +import { ProductDetailContainer, ProductToolbarContainer } from "../containers"; +import { ProductToolbar } from "../components"; Template.productDetailSimple.helpers({ isEnabled() { @@ -9,3 +10,12 @@ Template.productDetailSimple.helpers({ return ProductDetailContainer; } }); + +Template.productDetailSimpleToolbar.helpers({ + isEnabled() { + return isRevisionControlEnabled(); + }, + ToolbarComponent() { + return ProductToolbarContainer(ProductToolbar); + } +}); diff --git a/imports/plugins/included/product-detail-simple/register.js b/imports/plugins/included/product-detail-simple/register.js index da3bd3aaaae..58d4ada7d55 100644 --- a/imports/plugins/included/product-detail-simple/register.js +++ b/imports/plugins/included/product-detail-simple/register.js @@ -28,7 +28,7 @@ Reaction.registerPackage({ layoutHeader: "layoutHeader", layoutFooter: "", notFound: "productNotFound", - dashboardHeader: "", + dashboardHeader: "productDetailSimpleToolbar", dashboardControls: "productDetailDashboardControls", dashboardHeaderControls: "", adminControlsFooter: "adminControlsFooter" From 78acd660361d1c945d383c7f113085e0bf14085d Mon Sep 17 00:00:00 2001 From: Mike Murray Date: Tue, 10 Jan 2017 11:35:08 -0800 Subject: [PATCH 02/25] Adding react switch control Updating button component to allow for better toggling Update product toolbar and publish bar --- .../client/components/publishControls.js | 130 ++++++++++++++---- .../ui/client/components/button/button.jsx | 11 +- .../core/ui/client/components/index.js | 1 + .../core/ui/client/components/switch/index.js | 1 + .../ui/client/components/switch/switch.js | 83 +++++++++++ .../default-theme/client/styles/forms.less | 69 +++++++++- .../client/components/productToolbar.js | 56 ++++---- 7 files changed, 301 insertions(+), 50 deletions(-) create mode 100644 imports/plugins/core/ui/client/components/switch/index.js create mode 100644 imports/plugins/core/ui/client/components/switch/switch.js diff --git a/imports/plugins/core/revisions/client/components/publishControls.js b/imports/plugins/core/revisions/client/components/publishControls.js index cc3142e5967..6a0b19c505c 100644 --- a/imports/plugins/core/revisions/client/components/publishControls.js +++ b/imports/plugins/core/revisions/client/components/publishControls.js @@ -7,7 +7,12 @@ import { Menu, MenuItem, Popover, - Translation + Translation, + + Toolbar, + ToolbarGroup, + Switch + } from "/imports/plugins/core/ui/client/components"; import SimpleDiff from "./simpleDiff"; import { Translatable } from "/imports/plugins/core/ui/client/providers"; @@ -207,41 +212,116 @@ class PublishControls extends Component { renderViewControls() { if (this.props.showViewAsControls) { return ( - - - - +