#905 Dashboard edit mode (wip) - styles fixes

metasfresh · Jun 23, 2017 · 002d3aa · 002d3aa
1 parent 6be7d66
commit 002d3aa
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 15 deletions.
diff --git a/src/assets/css/draggable.css b/src/assets/css/draggable.css
@@ -1,7 +1,8 @@
 
 .draggable-widget {
+    flex:1;
     border: 1px solid $brand-light-color;
-    width: calc(33.333% - 1rem);
+    min-width: calc(33.333% - 1rem);
     margin: .5rem;
     background-color: white;
     display: inline-block;
@@ -16,19 +17,25 @@
     }
 }
 
+.draggable-widget-title {
+    overflow: hidden;
+    padding-right: 2rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.draggable-widget-edited {
+    cursor: move;
+}
+
 .draggable-widget-header {
     padding: 6px 10px;
     background: $brand-super-light-color;
     border-bottom: 1px solid $brand-light-color;
     font-size: 0.875rem;
     color: $brand-font-color;
     position: relative;
-    cursor: move;
     height: 34px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-right: 2rem;
 }
 
 .draggable-widget-body {

diff --git a/src/assets/css/indicator.css b/src/assets/css/indicator.css
@@ -6,6 +6,9 @@
 
 .kpis-wrapper {
     margin: -.5rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .kpis-wrapper .dnd-placeholder {
@@ -20,7 +23,7 @@
 }
 
 .indicators-wrapper > * {
-    flex:1;
+    flex: 1;
 }
 
 .indicator {

diff --git a/src/components/charts/Indicator.js b/src/components/charts/Indicator.js
@@ -7,15 +7,17 @@ class Indicator extends Component {
     }
 
     render() {
-        const {value, caption, loader, fullWidth, editmode} = this.props;
+        const {
+            value, caption, loader, fullWidth, editmode, framework
+        } = this.props;
 
         if(loader) return <div className="indicator"><Loader /></div>;
 
         return (
             <div
                 className={
-                    'indicator js-indicator' +
-                    (editmode ? 'indicator-draggable ' : '')
+                    'indicator js-indicator ' +
+                    (editmode || framework ? 'indicator-draggable ' : '')
                 }
                 style={fullWidth ? {width: '100%'} : {}}
             >

diff --git a/src/components/dashboard/ChartWidget.js b/src/components/dashboard/ChartWidget.js
@@ -61,13 +61,20 @@ export class ChartWidget extends Component {
                 ((idMaximized !== false) && !isMaximize ? ' hidden-xs-up' : '')
             }>
                 <div
-                    className="draggable-widget-header"
+                    className={
+                        "draggable-widget-header " +
+                        (editmode ? 'draggable-widget-edited ' : '')
+                    }
                     onDoubleClick={isMaximize ?
                         () => {this.minimizeWidget(); showWidgets() } :
                         () => {this.maximizeWidget(); hideWidgets(index)}}
                 >
-                    {text}
-                    {!editmode && <i
+                    <p
+                        className="draggable-widget-title"
+                    >
+                        {text}
+                    </p>
+                    {!editmode && !framework && <i
                         className="draggable-widget-icon meta-icon-down-1 input-icon-sm"
                         onClick={() => this.toggleMenu()}
                     />}

diff --git a/src/components/dashboard/DndWidget.js b/src/components/dashboard/DndWidget.js
@@ -30,7 +30,7 @@ const cardTarget = {
         monitor.getItem().index = hoverIndex;
     },
     drop(props, monitor) {
-        if(monitor.getItem().isNew){
+        if(monitor.getItem().isNew && props.addCard){
             props.addCard(props.entity, monitor.getItem().id);
         }
     }
@@ -71,7 +71,7 @@ export class DndWidget extends Component {
                     (placeholder ? 'dnd-placeholder ' : '')
                 }
             >
-                {!placeholder && <i
+                {!placeholder && removeCard && <i
                     className="meta-icon-trash draggable-icon-remove pointer"
                     onClick={() => removeCard(entity, index, id)}
                 />}

diff --git a/src/components/dashboard/Sidenav.js b/src/components/dashboard/Sidenav.js
@@ -57,6 +57,7 @@ class Sidenav extends Component {
                         fullWidth={1}
                         value={item.chartType}
                         caption={item.caption}
+                        framework={true}
                     />}
             </DndWidget>
         )