#905 Dashboard edit mode (wip) - placeholders

metasfresh · Jun 22, 2017 · 9c1ce1b · 9c1ce1b
1 parent b4f2625
commit 9c1ce1b
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 13 deletions.
diff --git a/src/assets/css/draggable.css b/src/assets/css/draggable.css
@@ -96,8 +96,9 @@
 
 .draggable-icon-remove {
     position: absolute;
-    top: 3px;
-    right: 3px;
+    top: 8px;
+    right: 8px;
+    z-index:999;
 }
 
 .dnd-widget {
@@ -108,3 +109,10 @@
     width: 100%;
     background-color: $brand-primary-light-color;
 }
+
+.dnd-placeholder-filling {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/src/assets/css/indicator.css b/src/assets/css/indicator.css
@@ -1,7 +1,16 @@
 .indicators-wrapper {
     border-radius: 3px;
     overflow: hidden;
+    margin: 1rem 0;
+}
+
+.kpis-wrapper {
+    margin: -.5rem;
+}
+
+.kpis-wrapper .dnd-placeholder {
     margin: .5rem;
+    width: calc(100% - 1rem);
 }
 
 .indicators-wrapper {

diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
@@ -896,10 +896,6 @@ td.pulse-off input {
     width: 75%;
 }
 
-.dashboard-edit-bar {
-    margin: 0 .5rem;
-}
-
 .dashboard-cards-wrapper {
     width: 100%;
     height: 100%;

diff --git a/src/components/dashboard/ChartWidget.js b/src/components/dashboard/ChartWidget.js
@@ -48,7 +48,7 @@ export class ChartWidget extends Component {
         const {
             text,
             hideWidgets, showWidgets, index, idMaximized, id, chartType,
-            caption, fields, groupBy, pollInterval
+            caption, fields, groupBy, pollInterval, editmode
         } = this.props;
 
         const {
@@ -67,11 +67,11 @@ export class ChartWidget extends Component {
                         () => {this.maximizeWidget(); hideWidgets(index)}}
                 >
                     {text}
-                    <i
+                    {!editmode && <i
                         className="draggable-widget-icon meta-icon-down-1 input-icon-sm"
                         onClick={() => this.toggleMenu()}
-                    />
-                    {toggleWidgetMenu &&
+                    />}
+                    {toggleWidgetMenu && !editmode &&
                         <div className="draggable-widget-menu">
 
                             { isMaximize ?

diff --git a/src/components/dashboard/DndWidget.js b/src/components/dashboard/DndWidget.js
@@ -68,7 +68,7 @@ export class DndWidget extends Component {
                 }
             >
                 {!placeholder && <i
-                    className="meta-icon-trash draggable-icon-remove"
+                    className="meta-icon-trash draggable-icon-remove pointer"
                     onClick={() => removeCard(entity, id)}
                 />}
                 {children}

diff --git a/src/components/dashboard/DraggableWrapper.js b/src/components/dashboard/DraggableWrapper.js
@@ -8,7 +8,8 @@ import HTML5Backend from 'react-dnd-html5-backend';
 import logo from '../../assets/images/metasfresh_logo_green_thumb.png';
 import RawChart from '../charts/RawChart';
 import DndWidget from './DndWidget';
-import Sidenav from '../dashboard/Sidenav';
+import Sidenav from './Sidenav';
+import Placeholder from './Placeholder';
 import Indicator from '../charts/Indicator';
 
 import {
@@ -94,7 +95,10 @@ export class DraggableWrapper extends Component {
                     placeholder={true}
                     entity={'indicators'}
                 >
-                    <Indicator />
+                    <Placeholder
+                        entity={'indicators'}
+                        description={'Drop Target Indicator widget here.'}
+                    />
                 </DndWidget>
             </div>
         );
@@ -135,6 +139,20 @@ export class DraggableWrapper extends Component {
     renderKpis = () => {
         const {cards, idMaximized, editmode} = this.state;
 
+        if(!cards.length && editmode) return (
+            <div className="kpis-wrapper">
+                <DndWidget
+                    placeholder={true}
+                    entity={'cards'}
+                >
+                    <Placeholder
+                        entity={'cards'}
+                        description={'Drop KPI widget here.'}
+                    />
+                </DndWidget>
+            </div>
+        );
+
         return (
             <div className="kpis-wrapper">
                 {cards.length > 0 ? cards.map((item, id) => {
@@ -163,6 +181,7 @@ export class DraggableWrapper extends Component {
                                 showWidgets={this.showWidgets}
                                 idMaximized={idMaximized}
                                 text={item.caption}
+                                {...{editmode}}
                             />
                         </DndWidget>
                     );

diff --git a/src/components/dashboard/Placeholder.js b/src/components/dashboard/Placeholder.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+class Placeholder extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {description, entity} = this.props;
+        const height = entity === 'cards' ? '300px' : '100px';
+
+        return (
+            <div
+                style={{height}}
+                className="dnd-placeholder-filling"
+            >
+                {description}
+            </div>
+        );
+    }
+}
+
+export default Placeholder;