Merge pull request #287 from mjashanks/master

Bugfixes

packages/builder/src/builderStore/store/backend.js

@@ -30,7 +30,10 @@ export const getBackendUiStore = () => {
         const views = await viewsResponse.json()
         store.update(state => {
           state.selectedDatabase = db
-          state.selectedModel = models && models.length > 0 && models[0]
+          if (models && models.length > 0) {
+            state.selectedModel = models[0]
+            state.selectedView = `${models[0]._id}`
+          }
           state.breadcrumbs = [db.name]
           state.models = models
           state.views = views
@@ -73,6 +76,7 @@ export const getBackendUiStore = () => {
           state.models.push(model)
           state.models = state.models
           state.selectedModel = model
+          state.selectedView = `${model._id}`
           return state
         }),
     },

packages/builder/src/builderStore/store/index.js

@@ -23,6 +23,7 @@ import {
   savePage as _savePage,
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
+  regenerateCssForCurrentScreen,
 } from "../storeUtils"
 
 export const getStore = () => {
@@ -173,11 +174,10 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
 const setCurrentScreen = store => screenName => {
   store.update(s => {
     const screen = getExactComponent(s.screens, screenName)
-    screen._css = generate_screen_css([screen.props])
     s.currentPreviewItem = screen
     s.currentFrontEndType = "screen"
     s.currentView = "detail"
-
+    regenerateCssForCurrentScreen(s)
     const safeProps = makePropsSafe(
       s.components[screen.props._component],
       screen.props
@@ -295,9 +295,7 @@ const setCurrentPage = store => pageName => {
     state.currentComponentInfo = safeProps
     currentPage.props = safeProps
     state.currentPreviewItem = state.pages[pageName]
-    state.currentPreviewItem._css = generate_screen_css([
+    regenerateCssForCurrentScreen(state)
-      state.currentPreviewItem.props,
-    ])
 
     for (let screen of state.screens) {
       screen._css = generate_screen_css([screen.props])
@@ -374,9 +372,7 @@ const addTemplatedComponent = store => props => {
     state.currentComponentInfo._children = state.currentComponentInfo._children.concat(
       props
     )
-    state.currentPreviewItem._css = generate_screen_css([
+    regenerateCssForCurrentScreen(state)
-      state.currentPreviewItem.props,
-    ])
 
     setCurrentPageFunctions(state)
     _saveCurrentPreviewItem(state)
@@ -410,9 +406,7 @@ const setComponentStyle = store => (type, name, value) => {
     }
     state.currentComponentInfo._styles[type][name] = value
 
-    state.currentPreviewItem._css = generate_screen_css([
+    regenerateCssForCurrentScreen(state)
-      state.currentPreviewItem.props,
-    ])
 
     // save without messing with the store
     _saveCurrentPreviewItem(state)

packages/builder/src/builderStore/storeUtils.js

@@ -1,5 +1,6 @@
 import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
 import api from "./api"
+import { generate_screen_css } from "./generate_css"
 
 export const selectComponent = (state, component) => {
   const componentDef = component._component.startsWith("##")
@@ -57,3 +58,10 @@ export const walkProps = (props, action, cancelToken = null) => {
     }
   }
 }
+
+export const regenerateCssForCurrentScreen = state => {
+  state.currentPreviewItem._css = generate_screen_css([
+    state.currentPreviewItem.props,
+  ])
+  return state
+}

packages/builder/src/components/common/Switcher.svelte

@@ -72,6 +72,7 @@
   
   .panel {
     min-height: 0;
+    height: 100%;
     overflow-y: auto;
   }
 </style>

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -10,6 +10,7 @@
     getParent,
     walkProps,
     saveCurrentPreviewItem,
+    regenerateCssForCurrentScreen,
   } from "builderStore/storeUtils"
   import { uuid } from "builderStore/uuid"
 
@@ -29,8 +30,7 @@
   $: noChildrenAllowed =
     !component ||
     getComponentDefinition($store, component._component).children === false
-  $: noPaste =
+  $: noPaste = !$store.componentToPaste
-    !$store.componentToPaste || $store.componentToPaste._id === component._id
 
   const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
 
@@ -86,6 +86,7 @@
       parent._children = [...parent._children, copiedComponent]
       saveCurrentPreviewItem(s)
       s.currentComponentInfo = copiedComponent
+      regenerateCssForCurrentScreen(s)
       return s
     })
   }
@@ -141,10 +142,10 @@
       const targetIndex = parent._children.indexOf(component)
       const index = mode === "above" ? targetIndex : targetIndex + 1
       parent._children.splice(index, 0, cloneDeep(componentToPaste))
-
+      regenerateCssForCurrentScreen(s)
       saveCurrentPreviewItem(s)
       selectComponent(s, componentToPaste)
-
+      
       return s
     })
   }

packages/builder/src/pages/[application]/_reset.svelte

@@ -82,6 +82,7 @@
 <style>
   .root {
     min-height: 100%;
+    height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;