@symbo.ls/preview 0.0.87 → 0.0.89

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/components/Aside.js

@@ -6,7 +6,7 @@ import { Flex, SquareButton } from 'smbls'
 const setTooltipPosition = (el, s, options = {}) => {
   const key = parseInt(el.key)
   const rowHeight = `(var(--spacing-C) + var(--spacing-B1) + ${key}%)`
-  const translateY = `calc(${rowHeight} * ${key} + var(--spacing-X))`
+  const translateY = `calc(${rowHeight} * ${key} + var(--spacing-Y2))`
   const transform = `translate3d(0%, ${translateY}, 1px)`
   const Tooltip = el.lookup('Tooltip')
   if (Tooltip.setProps) {
@@ -31,16 +31,24 @@ export const NavbarButton = {
   }),
 
   on: {
-    initUpdate: (el, s) => {
+    update: (el, s) => {
       const active = window.location.pathname.includes(s.href)
       if (active) setTooltipPosition(el, s)
     },
-    mouseover: (ev, el, s) => setTooltipPosition(el, s, { visible: true }),
+    mouseover: (ev, el, s) => {
+      if (!s.hover) {
+        s.hover = true
+        setTooltipPosition(el, s, { visible: true })
+      }
+    },
     mouseleave: (ev, el, s) => {
-      el.lookup('Tooltip').setProps({
-        opacity: '0',
-        visibility: 'hidden'
-      })
+      if (s.hover) {
+        s.hover = false
+        el.lookup('Tooltip').setProps({
+          opacity: '0',
+          visibility: 'hidden'
+        })
+      }
     }
   }
 }
@@ -87,6 +95,7 @@ export const DesignSystemNavbar = {
       lineHeight: 1,
       title: { fontSize: 'Z' }
     },
+    title: null,
     p: null
   }
 }

package/src/components/SpacingButton/actionButtons.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+import { SpacingButton } from '..'
+import { SPACING_BUTTONS } from './props'
+
+export const setTableButtons = ({ state }) =>
+  Object.keys(SPACING_BUTTONS).filter(v => {
+    const rowState = state.sequence[state.selectedKey]
+    const { maxValue } = SPACING_BUTTONS[v]
+    return maxValue ? maxValue > (rowState && rowState.val) : true
+  })
+
+export const setRowButtons = ({ state }) =>
+  Object.keys(SPACING_BUTTONS).filter(v => {
+    const { maxValue } = SPACING_BUTTONS[v]
+    return maxValue ? maxValue > state.val : true
+  })
+
+export default {
+  extend: Flex,
+
+  props: {
+    position: 'absolute',
+    left: 'G3',
+    gap: 'X',
+    top: 'Y',
+    height: 'B2',
+    zIndex: 99,
+    boxSizing: 'content-box',
+    padding: '- - E',
+    transition: 'C ease-out',
+    transitionProperty: 'transform, opacity',
+    opacity: '0',
+
+    ':hover': { opacity: '1' }
+  },
+
+  childExtend: SpacingButton,
+  $setStateCollection: setTableButtons
+}

package/src/components/{SpacingPropButton → SpacingButton}/dropdown.js

@@ -11,9 +11,9 @@ import {
   diffPropPosition,
   diffPropValue,
   getStateTree,
-  keysOf,
-  SPACING_BUTTONS
+  keysOf
 } from '.'
+import { SPACING_BUTTONS } from './props'
 
 const ButtonInDropdown = {
   extend: [ChoosableButton],

package/src/components/{SpacingPropButton → SpacingButton}/index.js

@@ -1,53 +1,10 @@
 'use strict'
 
-import { WiderButton, DropdownParent } from '@symbo.ls/components'
+import { WiderButton, DropdownParent, Icon } from '@symbo.ls/components'
 
+import { SPACING_BUTTONS } from './props'
 import dropdown from './dropdown'
 
-export const SPACING_BUTTONS = {
-  margin: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  height: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  width: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  borderWidth: {
-    maxValue: 1280,
-    blockStartWidth: {},
-    inlineEndWidth: {},
-    blockEndWidth: {},
-    inlineStartWidth: {}
-  },
-  padding: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  gap: {
-    maxValue: 3000,
-    Horizontal: {},
-    Vertical: {}
-  },
-  borderRadius: {
-    maxValue: 1280,
-    endStart: {},
-    startEnd: {},
-    endEnd: {},
-    startStart: {}
-  }
-}
-
 export const ChoosableButton = {
   props: ({ key }) => ({
     padding: 'Z',
@@ -73,7 +30,7 @@ export const ChoosableButton = {
   })
 }
 
-const DotForPropButton = {
+export const DotForPropButton = {
   props: (el) => {
     const { table, row, property: direction } = getStateTree(el)
     const property = direction.parent
@@ -94,10 +51,10 @@ const DotForPropButton = {
       isRadius,
 
       '!isRadius': {
-        ':nth-child(1)': { left: '50%', top: 'W' },
-        ':nth-child(2)': { right: 'W', top: '50%' },
-        ':nth-child(3)': { left: '50%', bottom: 'W' },
-        ':nth-child(4)': { left: 'W', top: '50%' }
+        ':nth-child(1)': { left: '45%', top: 'W' },
+        ':nth-child(2)': { right: 'W', top: '45%' },
+        ':nth-child(3)': { left: '45%', bottom: 'W' },
+        ':nth-child(4)': { left: 'W', top: '45%' }
       },
 
       '.isRadius': {
@@ -110,7 +67,25 @@ const DotForPropButton = {
   }
 }
 
-export const SpacingPropButton = {
+export const DotForRowButton = {
+  extend: DotForPropButton,
+  props: ({ state }) => {
+    const direction = state
+    const property = direction.parent
+    const row = property.parent
+    const table = row.parent
+
+    const propKey = diffPropValue(property.value, direction.value)
+    const active = table.props[propKey] === row.key
+
+    return {
+      hide: !active,
+      background: 'blue .65'
+    }
+  }
+}
+
+export const SpacingButton = {
   extend: [ChoosableButton, DropdownParent, WiderButton],
 
   props: (element) => {
@@ -119,7 +94,6 @@ export const SpacingPropButton = {
     const active = table.props[propValue] === (row && row.key)
     return {
       active,
-      lazyLoad: true,
       icon: { name: property.value },
 
       '.active': {
@@ -175,6 +149,72 @@ export const SpacingPropButton = {
   dropdown
 }
 
+const DotsInButton = SpacingButton.dots
+
+export const SpacingRowButton = {
+  props: ({ state }) => {
+    const property = state
+    const row = property.parent
+    const table = row.parent
+
+    const propKey = property.value
+
+    const active = Object.keys(table.props).filter(prop => {
+      const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+      const keyMathes = table.props[prop] === row.key
+      return hasProp && keyMathes
+    }).length
+
+    return {
+      active: !!active,
+      position: 'relative',
+      round: 'Z',
+      display: 'flex',
+
+      icon: {
+        name: propKey,
+        opacity: '0',
+        color: 'gray5',
+        margin: 'auto'
+      },
+
+      '.active': {
+        boxShadow: '0, 0, 0, 3px, gray1, inset'
+      }
+    }
+  },
+
+  icon: {
+    extend: Icon,
+    props: ({ state }) => {
+      const property = state
+      const row = property.parent
+      const table = row.parent
+
+      const propKey = property.value
+      const middleActive = table.props[propKey] === row.key
+
+      const active = Object.keys(table.props).filter(prop => {
+        const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+        const keyMathes = table.props[prop] === row.key
+        return hasProp && keyMathes
+      }).length
+
+      return {
+        active,
+        middleActive,
+        '.active': { opacity: '1' },
+        '.middleActive': { color: 'blue' }
+      }
+    }
+  },
+
+  dots: {
+    childExtend: DotForRowButton,
+    $setStateCollection: DotsInButton.$setStateCollection
+  }
+}
+
 export const getStateTree = element => {
   const table = element.lookup('Page').state
   const row = table.sequence[table.selectedKey]

package/src/components/SpacingButton/props.js

@@ -0,0 +1,45 @@
+'use strict'
+
+export const SPACING_BUTTONS = {
+  margin: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  height: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  width: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  borderWidth: {
+    maxValue: 1280,
+    blockStartWidth: {},
+    inlineEndWidth: {},
+    blockEndWidth: {},
+    inlineStartWidth: {}
+  },
+  padding: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  gap: {
+    maxValue: 3000,
+    Horizontal: {},
+    Vertical: {}
+  },
+  borderRadius: {
+    maxValue: 1280,
+    endStart: {},
+    startEnd: {},
+    endEnd: {},
+    startStart: {}
+  }
+}

package/src/components/SpacingTable.js

@@ -7,7 +7,8 @@ import {
   sortSequence
 } from '@symbo.ls/components'
 
-import buttons from '../pages/Spaces/buttons'
+import { SpacingRowButton } from '.'
+import actionButtons, { setRowButtons } from './SpacingButton/actionButtons'
 
 const Cell = {
   tag: 'div',
@@ -85,10 +86,13 @@ const Row = {
       }
     },
     buttons: {
-      display: 'flex',
+      columns: 'repeat(7, var(--spacing-B2))',
+      rows: 'var(--spacing-B2)',
+      position: 'relative',
       gap: '.2em',
       opacity: '1',
-      boxSizing: 'content-box'
+      boxSizing: 'content-box',
+      margin: '0 0 0 -1.9em'
     }
   }),
 
@@ -98,7 +102,11 @@ const Row = {
   em: {},
   decimal: {},
   px: {},
-  buttons: {},
+  buttons: {
+    extend: Grid,
+    childExtend: SpacingRowButton,
+    $setStateCollection: setRowButtons
+  },
   graph: { line: {} },
 
   overlay: {
@@ -198,5 +206,5 @@ export const SpacingTable = {
     $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
   },
 
-  actionButtons: buttons
+  actionButtons
 }

package/src/components/index.js

@@ -20,6 +20,6 @@ export * from './IconsGroup'
 export * from './FontText'
 export * from './DesignComponent'
 export * from './ColumnParagrphs'
-export * from './SpacingPropButton'
+export * from './SpacingButton'
 export * from './UploadImage'
 export * from './SpacingTable'

package/src/pages/MediaQuery/lists.js

@@ -55,7 +55,6 @@ const BreakpointItem = {
   select: {
     extend: Select,
     props: ({ state }) => ({
-      background: 'transparent',
       color: 'white'
     }),
 

package/src/pages/Spaces/buttons.js

@@ -1,35 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-import { SpacingPropButton, SPACING_BUTTONS } from '../../components'
-
-export default {
-  extend: Flex,
-
-  props: {
-    position: 'absolute',
-    left: 'G3',
-    gap: 'X',
-    top: 'Y',
-    lazyLoad: true,
-    height: 'B2',
-    zIndex: 99,
-    boxSizing: 'content-box',
-    padding: '- - C2',
-    transition: 'C ease-out',
-    transitionProperty: 'transform, opacity',
-    opacity: '0',
-
-    ':hover': { opacity: '1' }
-  },
-
-  childExtend: SpacingPropButton,
-
-  $setStateCollection: ({ props, state }) =>
-    Object.keys(SPACING_BUTTONS).filter(v => {
-      const rowState = state.sequence[state.selectedKey]
-      const { maxValue } = SPACING_BUTTONS[v]
-      return maxValue ? maxValue > rowState && rowState.val : true
-    }
-    )
-}