-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1628 Move Toolbar & Admin View is Dashboard (#1723)
* 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 * Adding react switch control Updating button component to allow for better toggling Update product toolbar and publish bar * Improve layout and styles for switch component * Clean up styles related to publish bar * Toolbar reorg (#1713) * Move dashboard to admin controls drawer * admin links in account dropdown to open action view * Added navigation stack to action view Added back button to settings panel * Added package list component for dashboard package list Added List and ListItem components * Code cleanup Added basic styles for lists * Adding react ActionView component * Added blaze react package Fixing imports for actionView * Added admin context provider AdminContextProvider provides context props to all components wrapped as Admin() components. * CSS-IN-JS styles for admin view header with animations * Added add product button Added icon button with Reaction logo to open actionView * Package list re-org * Filter entries with a template * Added detail view to action view * cleanup * Fix for missing grid settings view in action view * Split generic toolbar and publish bar functionality * Fix action view close on orders view Remove legacy functionality in orders template that interferes with the action view close. * Cleanup * Cleanup Remove filter controls from orders list * Open shipping details in action detail view * Moved add product functionality to generic admin toolbar Moving add product callback function from the publish controls into the admin toolbar. * Only show vertical divider if there is a dashboardHeaderTemplate Cleanup of propTypes * Allow for no loading templates Fixes issue where the publish controls would display a large loading spinner causing the toolbar to resize briefly. * Clear action view on close to prevent odd behavior. Will revisit. Other various cleanup of source * Fixed broken preview toggle Fix eslint issues * Fix archive product. Should pass full product object, not _id
- Loading branch information
1 parent
06a2fbe
commit 886ab2f
Showing
57 changed files
with
1,743 additions
and
254 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -95,3 +95,4 @@ johanbrook:publication-collector | |
|
|
||
|
|
||
| # Custom Packages | ||
| gadicc:blaze-react-component | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -70,6 +70,7 @@ [email protected] | |
| [email protected] | ||
| [email protected] | ||
| [email protected] | ||
| gadicc:[email protected] | ||
| [email protected] | ||
| [email protected] | ||
| [email protected] | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
232 changes: 232 additions & 0 deletions
232
imports/plugins/core/dashboard/client/components/actionView.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,232 @@ | ||
| import React, { Component, PropTypes } from "react"; | ||
| import classnames from "classnames"; | ||
| import Blaze from "meteor/gadicc:blaze-react-component"; | ||
| import { | ||
| IconButton, | ||
| Translation | ||
| } from "/imports/plugins/core/ui/client/components"; | ||
| import { Admin } from "/imports/plugins/core/ui/client/providers"; | ||
| import Radium from "radium"; | ||
| import Velocity from "velocity-animate"; | ||
| import "velocity-animate/velocity.ui"; | ||
| import { VelocityTransitionGroup } from "velocity-react"; | ||
|
|
||
| const getStyles = (props) => { | ||
| let viewSize = 400; | ||
| // if (props.actionView && props.actionView.priority === 1 && props.actionView.provides === "dashboard") { | ||
| if (props.actionView && props.actionView.provides === "dashboard") { | ||
| viewSize = "90vw"; | ||
| } | ||
|
|
||
| if (props.actionViewIsOpen === false) { | ||
| viewSize = 0; | ||
| } | ||
|
|
||
| return { | ||
| base: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| height: "100vh", | ||
| position: "relative", | ||
| width: viewSize | ||
| }, | ||
| header: { | ||
| display: "flex", | ||
| alignItems: "center", | ||
| position: "relative", | ||
| height: "56px", | ||
| padding: "0 20px", | ||
| margin: 0 | ||
| }, | ||
| heading: { | ||
| display: "flex", | ||
| alignItems: "center", | ||
| flex: "1 1 auto", | ||
| position: "relative", | ||
| margin: 0, | ||
| height: "100%" | ||
| }, | ||
| body: { | ||
| display: "flex", | ||
| webkitOverflowScrolling: "touch" | ||
| }, | ||
| masterView: { | ||
| flex: "1 1 auto", | ||
| height: "100%", | ||
| overflow: "auto", | ||
| webkitOverflowScrolling: "touch" | ||
| }, | ||
| detailView: { | ||
| width: "400px", | ||
| height: "100%", | ||
| overflow: "auto", | ||
| webkitOverflowScrolling: "touch" | ||
| }, | ||
| title: { | ||
| margin: 0, | ||
| transition: "200ms all" | ||
| }, | ||
| titleWithBackButton: { | ||
| paddingLeft: 40 | ||
| }, | ||
| backButton: { | ||
| height: "100%", | ||
| position: "absolute", | ||
| top: 0, | ||
| zIndex: 1 | ||
| }, | ||
| backButtonContainers: { | ||
| display: "flex", | ||
| alignItems: "center", | ||
| height: "100%" | ||
| } | ||
| }; | ||
| }; | ||
|
|
||
| class ActionView extends Component { | ||
| static propTypes = { | ||
| actionView: PropTypes.object, | ||
| actionViewIsOpen: PropTypes.bool, | ||
| buttons: PropTypes.array, | ||
| isActionViewAtRootView: PropTypes.bool | ||
| } | ||
|
|
||
| renderControlComponent() { | ||
| if (this.props.actionView && typeof this.props.actionView.template === "string") { | ||
| return ( | ||
| <div style={this.styles.masterView} className="master"> | ||
| <Blaze | ||
| {...this.props.actionView.data} | ||
| template={this.props.actionView.template} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| renderDetailComponent() { | ||
| if (this.props.detailView && typeof this.props.detailView.template === "string") { | ||
| return ( | ||
| <div style={this.styles.detailView} className="detail"> | ||
| <Blaze | ||
| {...this.props.detailView.data} | ||
| template={this.props.detailView.template} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| renderFooter() { | ||
| // if (this.props.footerTemplate) { | ||
| // return ( | ||
| // <Blaze template={this.props.footerTemplate} /> | ||
| // ); | ||
| // } | ||
| } | ||
|
|
||
| renderBackButton() { | ||
| if (this.props.isActionViewAtRootView === false) { | ||
| return ( | ||
| <div style={this.styles.backButton}> | ||
| <div style={this.styles.backButtonContainers}> | ||
| <IconButton | ||
| icon="fa fa-arrow-left" | ||
| onClick={this.props.handleActionViewBack} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| get styles() { | ||
| return getStyles(this.props); | ||
| } | ||
|
|
||
| get backButtonEnterAnimation() { | ||
| return { | ||
| animation: { | ||
| display: "flex", | ||
| position: "absolute", | ||
| left: 20, | ||
| opaticy: 1 | ||
| }, | ||
| duration: 200 | ||
| }; | ||
| } | ||
|
|
||
| get backButtonLeaveAnimaton() { | ||
| return { | ||
| animation: { | ||
| display: "flex", | ||
| position: "absolute", | ||
| left: -30, | ||
| opaticy: 0 | ||
| }, | ||
| duration: 200 | ||
|
|
||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| const { actionView } = this.props; | ||
| const baseClassName = classnames({ | ||
| "admin-controls": true, | ||
| "show-settings": this.props.actionViewIsOpen | ||
| }); | ||
|
|
||
|
|
||
| return ( | ||
| <div style={this.styles.base} className={baseClassName}> | ||
| <div style={this.styles.header} className="admin-controls-heading--"> | ||
| <VelocityTransitionGroup | ||
| enter={this.backButtonEnterAnimation} | ||
| leave={this.backButtonLeaveAnimaton} | ||
| > | ||
| {this.renderBackButton()} | ||
| </VelocityTransitionGroup> | ||
|
|
||
| <div style={this.styles.heading} className="nav-settings-heading--"> | ||
| <h3 | ||
| className="nav-settings-title--" | ||
| style={[ | ||
| this.styles.title, | ||
| !this.props.isActionViewAtRootView ? this.styles.titleWithBackButton : {} | ||
| ]} | ||
| > | ||
| <Translation | ||
| defaultValue={actionView.label || "Dashboard"} | ||
| i18nKey={actionView.i18nKeyLabel || "dashboard.coreTitle"} | ||
| /> | ||
| </h3> | ||
| </div> | ||
|
|
||
| <div className="nav-settings-controls--"> | ||
| <IconButton | ||
| icon="fa fa-times" | ||
| onClick={this.props.handleActionViewClose} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div style={this.styles.body} className="admin-controls-content action-view-body"> | ||
|
|
||
| {this.renderControlComponent()} | ||
| {this.renderDetailComponent()} | ||
| </div> | ||
| <div className="admin-controls-footer"> | ||
| <div className="admin-controls-container"> | ||
| {this.renderFooter()} | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Admin()(Radium(ActionView)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { default as ActionView } from "./actionView"; | ||
| export { default as PackageList } from "./packageList"; | ||
| export { default as Toolbar } from "./toolbar"; |
Oops, something went wrong.