#136 Css and styling

Author: rodriguez-facundo

webapp/components/layout/LayoutManager.js

@@ -9,6 +9,10 @@ import WidgetFactory from './WidgetFactory';
 import TabsetIconFactory from './TabsetIconFactory'
 import defaultLayoutConfiguration from './layoutConf.json';
 import simulateLayoutConfiguration from './simulateLayoutConf.json';
+import Icon from '@material-ui/core/Icon';
+
+import { withStyles } from '@material-ui/core/styles'
+
 
 /**
  * Transforms a widget configutation into a flexlayout node descriptor
@@ -29,7 +33,20 @@ function widget2Node (configuration) {
   };
 }
 
-export default class LayoutManager extends Component {
+const styles = ({ spacing }) => ({
+  container: {
+    position: 'relative',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+  spacer: { width: spacing(1) },
+  flexlayout: { position: 'relative', flexGrow: 1 }
+})
+
+
+class LayoutManager extends Component {
 
   constructor (props) {
     super(props);
@@ -256,31 +273,31 @@ export default class LayoutManager extends Component {
     model.doAction(FlexLayout.Actions.moveNode(node.getId(), 'bottomPanel', FlexLayout.DockLocation.CENTER, 0));
   }
 
-  onRenderTabSet (panel, renderValues) {
-    const model = this.getModel()
-    if (panel.getType() === "tabset") {
-      if (panel.getId() != 'leftPanel' && panel.getChildren().length > 0){
-        renderValues.buttons.push(<div key={panel.getId()} className="fa fa-window-minimize customIconFlexLayout" onClick={() => {
-          model.doAction(FlexLayout.Actions.moveNode(panel.getSelectedNode().getId(), "border_bottom", FlexLayout.DockLocation.CENTER, 0));
-        }} />);
-      }
-    }
+  onRenderTab (node,renderValues) {
+    renderValues.leading = <Icon className={node.getConfig().icon}/>
   }
   render () {
-    
+    const { classes } = this.props
     return (
-      <div style={{ position: 'relative', flexGrow: 1 }}>
-        <FlexLayout.Layout
-          ref="layout"
-          model={this.getModel()}
-          factory={this.factory.bind(this)}
-          iconFactory={this.iconFactory.bind(this)}
-          onAction={action => this.onAction(action)}
-          clickOnBordersAction={node => this.clickOnBordersAction(node)}
-          onRenderTabSet={(node, renderValues) => this.onRenderTabSet(node, renderValues)}
-        />
-     
+      <div className={classes.container}>
+        <div className={classes.spacer}/>
+        <div className={classes.flexlayout}>
+          <FlexLayout.Layout
+            ref="layout"
+            model={this.getModel()}
+            factory={this.factory.bind(this)}
+            iconFactory={this.iconFactory.bind(this)}
+            onAction={action => this.onAction(action)}
+            clickOnBordersAction={node => this.clickOnBordersAction(node)}
+            onRenderTab={(node,renderValues) => this.onRenderTab(node,renderValues)}
+          />
+        </div>
+        
+        <div className={classes.spacer}/>
       </div>
     )
   }
-}
+}
+
+
+export default withStyles(styles)(LayoutManager)

webapp/components/settings/Drawer.js

@@ -24,18 +24,10 @@ import {
 const drawerOpenWidth = 200;
 const drawerCloseWidth = 54;
 
-const createTransition = (entering, transitions) => (
-  transitions.create('width', {
-    easing: transitions.easing.sharp,
-    duration: entering ? transitions.duration.enteringScreen : transitions.duration.leavingScreen,
-  })
-)
-
 const drawerCss = (entering, transitions, palette) => ({ 
   overflow: 'hidden',
   width: props => props.width,
   flexShrink: 0,
-  backgroundColor: props => props.dark ? palette.grey[900] : palette.grey[800],
   borderRight: 'none',
   transition: transitions.create('width', {
     easing: transitions.easing.sharp,
@@ -47,7 +39,7 @@ const useStyles = makeStyles(({ transitions, palette }) => ({
   openDrawer: drawerCss(true, transitions, palette),
 
   closeDrawer: drawerCss(false, transitions, palette),
-    
+
   colapse: {
     color: 'white',
     position: 'absolute',
@@ -64,7 +56,7 @@ const useStyles = makeStyles(({ transitions, palette }) => ({
 export default ({ widgets, newWidget, editMode }) => {
   const [expand, setExpand] = useState({ dark: !editMode })
 
-  const classes = useStyles({ dark: !editMode, width: expand ? drawerOpenWidth : drawerCloseWidth });
+  const classes = useStyles({ width: expand ? drawerOpenWidth : drawerCloseWidth });
 
   function createWidget (widgetId) {
     if (!widgets[widgetId]) {
@@ -116,7 +108,11 @@ export default ({ widgets, newWidget, editMode }) => {
 
           <IconButton
             className={classes.colapse}
-            onClick={() => setExpand(!expand)}
+            onClick={() => {
+              setExpand(!expand)
+              setTimeout(() => window.dispatchEvent(new Event('resize')), 400)
+              // pepe()
+            }}
           >
             {expand ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
           </IconButton>
@@ -129,3 +125,20 @@ export default ({ widgets, newWidget, editMode }) => {
   )
 
 }
+
+const pepe = () => {
+  window.expansionTransit = {
+    timer: setInterval(() => {
+      window.dispatchEvent(new Event('resize'))
+      console.log(window.expansionTransit.count)
+      if (window.expansionTransit.count > 0) {
+        window.expansionTransit.count -= 1
+      } else {
+        clearInterval(window.expansionTransit.timer)
+        console.log('clear')
+      }
+      
+    }, 150), 
+    count: 1
+  }
+}

webapp/css/flexlayout.less

@@ -34,6 +34,8 @@
 @bring-front: 1000;
 
 .flexlayout__layout {
+    border-left: none!important;
+    border-right: none!important;
     background-color: @color-dark;//color-light
     top: 0px;
     margin-top: @gutter / 2;
@@ -96,7 +98,7 @@
         border-top-left-radius: @panelradius;
         color: @color-white;
         display: flex;
-        align-items: center;
+        align-items: flex-end;
         margin-right: @tab-spacing;
         .flexlayout__tab_button_content {
             color: @secondary_color;
@@ -109,7 +111,7 @@
         border-top-right-radius: @panelradius;
         border-top-left-radius: @panelradius;
         display: flex;
-        align-items: center;
+        align-items: flex-end;
     }
 
     .flexlayout__border_bottom {
@@ -150,6 +152,11 @@
         margin-left: @spacing;
     }
 
+    .flexlayout__tab_button_trailing {
+        display: flex;
+        align-items: center;
+    }
+    
     // Thin white tab icons
     .flexlayout__border_button_trailing,
     .flexlayout__tab_button_trailing,