@symbo.ls/preview 0.0.70 → 0.0.71

package/package.json

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

package/src/components/Page.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { PageTemplate, Flex } from '@symbo.ls/components'
+import { PageTemplate, Overlay, Flex } from '@symbo.ls/components'
 
 import MASK1 from '../assets/mask1.png'
 import MASK2 from '../assets/mask2.png' // eslint-disable-line
@@ -34,7 +34,9 @@ export const DisabledPage = {
     overflow: 'hidden'
   },
 
-  Overlay: {
+  disablingOverlay: {
+    extend: [Overlay, Flex],
+
     props: {
       overflow: 'hidden',
       background: 'shadow-overlay',
@@ -43,26 +45,23 @@ export const DisabledPage = {
     },
 
     Overlay: {
-      props: {
-        background: 'gradient-colorful',
-        inset: '0 0 0 0',
-        opacity: '.9',
-        style: {
-          // filter: 'blur(110px)',
-          WebkitMaskImage: 'url(' + MASK1 + ')',
-          WebkitMaskSize: '100% 100%'
-        }
+      background: 'gradient-colorful',
+      inset: '0 0 0 0',
+      opacity: '.9',
+      style: {
+        WebkitMaskImage: 'url(' + MASK1 + ')',
+        WebkitMaskSize: '100% 100%'
       }
     },
 
-    H4: {
-      position: 'absolute',
-      margin: '0',
+    H3: {
+      margin: 'auto auto 0',
+      padding: 'C1',
       color: 'black',
-      left: 'C',
-      bottom: 'B',
-      text: 'Custom library will come up soon…',
-      animation: 'fadeInUpLong',
+      width: '100%',
+      maxWidth: 'J-default',
+      text: 'Custom library will come up',
+      animation: 'fadeInUpShort',
       animationDuration: 'G',
       animationDelay: 'G'
     }

package/src/pages/Init/CreateDocumentTheme.js

@@ -66,13 +66,14 @@ const modes = {
 
     ThemeButtons: {
       position: 'absolute',
-      left: 'X2',
-      right: 'X2',
-      bottom: 'X2',
+      left: 'W',
+      right: 'W',
+      bottom: 'W',
       opacity: '0',
       transition: 'B default-bezier',
       transitionProperty: 'transform, opacity',
-      transform: 'translate3d(0, 100%, 0)'
+      transform: 'translate3d(0, 100%, 0)',
+      columnGap: 'W'
     },
 
     Span: {

package/src/pages/Init/index.js

@@ -13,7 +13,7 @@ export const Init = {
   props: {
     boxSize: '100% 100%',
     gap: 'A',
-    padding: '7.5% E1 D1 12.5%'
+    padding: '8.5% E1 E1 12.5%'
   },
 
   define: { routes: param => param },

package/src/state.js

@@ -7,8 +7,9 @@ import FIT from '../user_data/4it' // eslint-disable-line no-unused-vars
 
 export const state = {
   globalTheme: 'dark',
-  // SYSTEM: {}
+  appKey: '4it.symbo.ls',
   SYSTEM: FIT
+  // SYSTEM: {}
   // SYSTEM
   // SYSTEM: BYLD
 }

package/src/sync.js

@@ -3,7 +3,7 @@
 // import { init } from '@symbo.ls/init'
 import { connect, send } from '@symbo.ls/socket/client'
 
-const receive = (element, state) => {
+const onChange = (element, state) => {
   return (event, data) => {
     state.update({ SYSTEM: data })
   }
@@ -12,13 +12,12 @@ const receive = (element, state) => {
 export const Sync = {
   on: {
     init: (el, s) => {
-      connect('ws://localhost:1001', receive(el, s))
+      if (s.appKey) connect(s.appKey, onChange(el, s))
     },
     stateUpdated: (el, s, changes) => {
-      if (changes.SYSTEM) {
-        // init(changes.SYSTEM)
-        console.log(changes)
+      if (s.appKey && changes.SYSTEM) {
         send(changes.SYSTEM, s.SYSTEM)
+        // init(changes.SYSTEM)
       }
     }
   }