Skip to content

Commit

Permalink
Make order details panel visible. (#2719)
Browse files Browse the repository at this point in the history 
* make order details panel visible, especially on lower resolutions.

* improve the responsiveness of the orders table on large screens and others

* make order details panel visible, especially on lower resolutions.

* improve the responsiveness of the orders table on large screens and others

* resolve UI bug created by merge conflicts

* make table responsive on large screens

* remove a todo note

* remove some redundant code.
(Also add a TODO about a needed discussion of code design.)

* add a proposed fix for a bug

* Remove branching for "index"

* hide action view detail when appropriate
  • Loading branch information
@foladipo @mikemurray
foladipo authored and mikemurray committed Sep 12, 2017
1 parent 57553e8 commit 0c46580
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 91 deletions.
8 changes: 1 addition & 7 deletions client/modules/core/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -624,16 +624,10 @@ export default {

setActionViewDetail(viewData, options = {}) {
const { open } = options;
const currentRouteName = this.Router.getRouteName();

Session.set("admin/showActionView", true);
Session.set("admin/showActionViewDetail", typeof open === "boolean" ? open : true);

if (currentRouteName !== "index") {
Session.set("admin/actionView", [viewData]);
} else if (viewData) {
Session.set("admin/detailView", [viewData]);
}
Session.set("admin/detailView", [viewData]);
},

pushActionViewDetail(viewData) {
Expand Down
4 changes: 2 additions & 2 deletions imports/plugins/core/dashboard/client/components/actionView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ const getStyles = (props) => {
masterViewPanel: {
display: "flex",
flexDirection: "column",
flex: "1 1 auto"
// height: "100%"
flex: "1 1 auto",
width: "50%"
},
masterView: {
flex: "1 1 auto",
Expand Down
1 change: 1 addition & 0 deletions imports/plugins/core/dashboard/client/containers/packageListContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ function handleShowPackage(event, app) {
* @return {undefined} No return value
*/
function handleShowDashboard() {
Reaction.hideActionViewDetail();
Reaction.showActionView({
i18nKeyTitle: "dashboard.coreTitle",
title: "Dashboard",
Expand Down
34 changes: 18 additions & 16 deletions imports/plugins/core/orders/client/components/orderDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,29 +59,31 @@ class OrderDashboard extends Component {

render() {
return (
<div>
<div className="orders-table-container">
<OrderActions
handleMenuClick={this.props.handleMenuClick}
clearFilter={this.props.clearFilter}
filter={this.props.filter}
className={this.props.className}
/>
{this.state.orders.length ?
<div className="container-fluid-sm">
<div className="order-toggle-buttons">
<button
className={`order-toggle-btn ${this.state.detailClassName}`}
onClick={this.handleDetailToggle}
>
<i className="fa fa-th-list" />
</button>
<div className="container-fluid-sm order-details-list-container">
<div className="order-toggle-buttons-container">
<div className="order-toggle-buttons">
<button
className={`order-toggle-btn ${this.state.detailClassName}`}
onClick={this.handleDetailToggle}
>
<i className="fa fa-th-list" />
</button>

<button
className={`order-toggle-btn ${this.state.listClassName}`}
onClick={this.handleListToggle}
>
<i className="fa fa-list" />
</button>
<button
className={`order-toggle-btn ${this.state.listClassName}`}
onClick={this.handleListToggle}
>
<i className="fa fa-list" />
</button>
</div>
</div>

<div>
Expand All @@ -104,7 +106,7 @@ class OrderDashboard extends Component {
/>
</div>
</div> :
<div className="container-fluid-sm">
<div className="container-fluid-sm order-details-list-container">
<div className="empty-view-message">
<Icon icon="fa fa-sun-o" />
<Translation defaultValue={"No orders found"} i18nKey={"order.ordersNotFound"} />
Expand Down
14 changes: 7 additions & 7 deletions imports/plugins/core/orders/client/components/orderTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,20 @@ import ProductImage from "./productImage";
const classNames = {
colClassNames: {
"Name": "order-table-column-name",
"Email": "order-table-column-email hidden-xs hidden-sm",
"Email": "order-table-column-email",
"Date": "order-table-column-date hidden-xs hidden-sm",
"ID": "order-table-column-id hidden-xs",
"Total": "order-table-column-total hidden-xs",
"ID": "order-table-column-id hidden-xs hidden-sm",
"Total": "order-table-column-total",
"Shipping": "order-table-column-shipping hidden-xs hidden-sm",
"Status": "order-table-column-status",
"": "order-table-column-control"
},
headerClassNames: {
"Name": "order-table-header-name",
"Email": "order-table-header-email hidden-xs hidden-sm",
"Email": "order-table-header-email",
"Date": "order-table-header-date hidden-xs hidden-sm",
"ID": "order-table-header-id hidden-xs",
"Total": "order-table-header-total hidden-xs",
"ID": "order-table-header-id hidden-xs hidden-sm",
"Total": "order-table-header-total",
"Shipping": "order-table-header-shipping hidden-xs hidden-sm",
"Status": "order-table-header-status",
"": "order-table-header-control"
Expand Down Expand Up @@ -315,7 +315,7 @@ class OrderTable extends Component {
}

return (
<div>
<div className="order-details-table">
{this.props.isOpen &&
<OrderBulkActionsBar
shipping={this.props.shipping}
Expand Down
17 changes: 8 additions & 9 deletions imports/plugins/core/orders/client/containers/orderDashboardContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,15 +232,14 @@ class OrderDashboardContainer extends Component {
Reaction.setUserPreferences(PACKAGE_NAME, ORDER_LIST_FILTERS_PREFERENCE_NAME, "processing");
}

const id = Reaction.Router.getQueryParam("_id");

if (id === undefined) {
Reaction.setUserPreferences(PACKAGE_NAME, ORDER_LIST_SELECTED_ORDER_PREFERENCE_NAME, order._id);
} else {
Reaction.Router.go("dashboard/orders", {}, {
_id: order._id
});
}
/* TODO:
a) What other routes have a query parameter of _id=XXXXXXX ?
b) What exactly are we using the order dashboard for? If it's search,
well, clicking a search result doesn't CURRENTLY do anything. What's
more, there's some debate as to whether that SHOULD link to anywhere.
And if it should, why not the existing, modal orders panel?
*/
Reaction.setUserPreferences(PACKAGE_NAME, ORDER_LIST_SELECTED_ORDER_PREFERENCE_NAME, order._id);
}

/**
Expand Down
142 changes: 94 additions & 48 deletions imports/plugins/included/default-theme/client/styles/dashboard/orders.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,12 +445,14 @@
margin-bottom: 20px;

.controls {
width: 66px;
width: 10%;
max-width: 66px;
}

.content {
padding: 0px;
width: 90%;
overflow-x: hidden;
}

.shipment-info {
Expand Down Expand Up @@ -624,119 +626,127 @@
// Order Table Styles
.rui.order.table {
border-top: none;
width: auto;

@media only screen and (max-width: 740px) {
max-width: 100%;
> div {
margin: 0 auto;
}
}

@media screen and (max-width: 745px) and (min-width: 710px) {
div[data-radium] {
display: none;
}
}

// Table Headers
.order-table-header-name {
border-right: none;
text-align: left;
padding-top: 8px;

flex: 250 0 auto;
width: 250px;
max-width: 250px;
min-width: 20%;
max-width: 100%;
}
.order-table-header-email {
border-right: none;
text-align: left;
text-align: center;
padding-top: 19px;

min-width: 15%;
max-width: 100%;
}
.order-table-header-date {
border-right: none;
text-align: center;
padding-top: 19px;

flex: 120 0 auto;
width: 120px;
max-width: 120px;
min-width: 10%;
max-width: 100%;
}
.order-table-header-id {
border-right: none;
text-align: center;
padding-top: 19px;

flex: 90 0 auto;
width: 90px;
max-width: 90px;
min-width: 5%;
max-width: 50%;
}
.order-table-header-total {
border-right: none;
text-align: center;
padding-top: 19px;

flex: 100 0 auto;
width: 100px;
max-width: 100px;
min-width: 15%;
max-width: 50%;
}
.order-table-header-shipping {
border-right: none;
text-align: center;
padding-top: 19px;

flex: 100 0 auto;
width: 100px;
max-width: 100px;
min-width: 15%;
max-width: 100%;
}
.order-table-header-status {
border-right: none;
text-align: center;
padding-top: 19px;

flex: 150 0 auto;
width: 150px;
max-width: 150px;
min-width: 15%;
max-width: 100%;
}

.order-table-header-control {
flex: 50 0 auto;
width: 50px;
max-width: 50px;
min-width: 5%;
max-width: 50%;
}

// Table Columns
.order-table-column-name {
border-right: 1px solid @black10;

flex: 250 0 auto;
width: 250px;
max-width: 250px;
min-width: 20%;
max-width: 100%;
}
.order-table-column-email {
text-align: center;
min-width: 15%;
max-width: 100%;
}

.order-table-column-date {
text-align: center;

flex: 120 0 auto;
width: 120px;
max-width: 120px;
min-width: 10%;
max-width: 100%;
}
.order-table-column-id {
text-align: center;

flex: 90 0 auto;
width: 90px;
max-width: 90px;
min-width: 5%;
max-width: 50%;
}
.order-table-column-total {
text-align: center;

flex: 100 0 auto;
width: 100px;
max-width: 100px;
min-width: 15%;
max-width: 50%;
}
.order-table-column-shipping {
text-align: right;
text-align: center;
margin-top: 2px;

flex: 100 0 auto;
width: 100px;
max-width: 100px;
min-width: 15%;
max-width: 100%;
}
.order-table-column-status {
text-align: right;
text-align: center;
margin-top: 2px;

flex: 150 0 auto;
width: 150px;
max-width: 150px;
min-width: 15%;
max-width: 100%;
}

.order-table-column-control {
Expand All @@ -745,9 +755,8 @@
// height: 100%;
padding: 0;
height: 49px;
flex: 50 0 auto;
width: 50px;
max-width: 50px;
min-width: 5%;
max-width: 50%;
button {
flex: 1 1 auto;
border-radius: 0;
Expand Down Expand Up @@ -1095,4 +1104,41 @@
.order-filter-button:focus {
outline: none;
}
}
}

@media only screen and (max-width: 768px) {
.hidden-sm {
display: none;
}
}

@media only screen and (max-width: 350px) {
.hidden-xs {
display: none;
}

.rui.order.table {
max-width: 100%;
}
}

@media only screen and (max-width: 895px) and (min-width: 1264px) {
.rui.admin.action-view-pane.action-view > div[data-radium] {
width: 50%;
}
}

.orders-table-container {
display: flex;
flex-direction: column;
}

.order-details-list-container {
display: flex;
flex-direction: column
}

.order-details-table {
width: 100%;
margin: 0 auto;
}
Loading

1 comment on commit 0c46580

@efalayi
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@joykare yeah. To an extent. It didn't do the total fix though. I'll add some more styles and update this PR.

Please sign in to comment.