Permalink
Browse files

Merge branch 'share-component'

  • Loading branch information...
eelco committed Jul 29, 2016
2 parents d86e1ec + 4597edc commit a44cf995ec4a839f4856567caf2027f7d742d20b
Showing with 45 additions and 7 deletions.
  1. +0 −1 extras/Studio.framer/app.coffee
  2. +37 −5 framer/Components/ShareComponent.coffee
  3. +8 −1 framer/Extras/ShareInfo.coffee
@@ -11,4 +11,3 @@ Framer.Info =
Framer for iOS features live preview, offline use and intuitive sharing features that are protected by secure links. Paired with Framer for Mac, you now have access to a full mobile prototyping toolkit.
"""
- date: "Jun 14 2016"
@@ -1,3 +1,21 @@
+# Insert Roboto font
+css = """
+ @font-face {
+ font-family: "Roboto";
+ font-style: normal;
+ font-weight: 400;
+ src: local("Roboto"), local("Roboto-Regular"), url("//fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf") format("truetype");
+ }
+ @font-face {
+ font-family: "Roboto";
+ font-style: normal;
+ font-weight: 500;
+ src: local("Roboto Medium"), local("Roboto-Medium"), url("//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf") format("truetype");
+ }
+"""
+
+Utils.insertCSS(css)
+
# Share layer with default behaviour
class ShareLayer extends Layer
constructor: (options) ->
@@ -8,7 +26,7 @@ class ShareLayer extends Layer
width: options.parent.width if options and options.parent
ignoreEvents: false
style:
- fontFamily: "-apple-system, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif"
+ fontFamily: "Roboto, Helvetica Neue, Helvetica, Arial, sans-serif"
textAlign: "left"
fontSize: "14px"
color: "#111"
@@ -81,6 +99,7 @@ class ShareComponent
# Wait until the device screen x position is available
Utils.delay .1, =>
@_calculateAvailableSpace()
+ @_openIfEnoughSpace()
@_startListening()
@@ -108,13 +127,15 @@ class ShareComponent
point: 10
borderRadius: 4
backgroundColor: "#FFF"
+ visible: false
style:
boxShadow: "0 0 0 1px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08)"
# Render buttons to open / close sheet
_renderToggleButtons: ->
@open = new Layer
- size: 30
+ height: 30
+ width: 144
point: @sheet.point
borderRadius: 4
backgroundColor: "#FFF"
@@ -130,7 +151,18 @@ class ShareComponent
style:
backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAABGdBTUEAALGPC/xhBQAAANRJREFUSA2t1dENgjAQBuA7wqsuoEs5hi5Bu4RsoQs4jiygvtceCgRoubZ3f0JI2t5HAy3FtnMGABp/qQRJ0UR7UBMdQS10BmqgK1CKBkEJGgVL0U2wBGXBXBQPN+eoiAsi2OcJDTeu4gYM/f6xzfHeb9OhKXhPBqk6Bc0CU9BskEOLwC20GIyhIjCEisElWlODRv5LCuru8bF+gfFnSrtP2qYVXHcGEK3GLMn4vUNFdPooSugE0nwV0DmogK5BIRoGhSiVx3N5Gzi/kv7qcWTZQ2hivjMmakz6/b3iAAAAAElFTkSuQmCC')"
y: Align.center(1)
- x: Align.center
+ x: 10
+
+ openLabel = new ShareLayer
+ parent: @open
+ width: @open - 40
+ height: 14
+ x: 30
+ y: Align.center()
+ html: "Made with Framer"
+ style:
+ fontWeight: "500"
+ fontSize: "13px"
@_showPointer(@open)
@@ -300,7 +332,7 @@ class ShareComponent
descriptionStyle =
fontSize: "14px"
- fontFamily: "-apple-system, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif"
+ fontFamily: "Roboto, Helvetica Neue, Helvetica, Arial, sans-serif"
lineHeight: "1.5"
wordWrap: "break-word"
@@ -386,7 +418,7 @@ class ShareComponent
@buttonTwitter = new Button
url: """
- https://twitter.com/home?status=Check%20out%20my%20design%20made%20in%20%40framerjs%20%E2%80%94%20#{window.location.href}
+ https://twitter.com/home?status=Check%20out%20this%20prototype%20made%20in%20%40framerjs%20%E2%80%94%20#{window.location.href}
"""
parent: @buttons
borderWidth: 1
@@ -1,3 +1,4 @@
+{_} = require "../Underscore"
{BaseClass} = require "../BaseClass"
{Context} = require "../Context"
{ShareComponent} = require "../Components/ShareComponent"
@@ -9,10 +10,16 @@ class ShareInfo extends BaseClass
@context = new Framer.Context({name: "Sharing"})
@context.index = 20000
- Utils.delay 0, =>
+ run = =>
@context.run ->
share = new ShareComponent(Framer.Info)
+ # When enabled before specifying Framer.Info
+ if _.isEmpty(Framer.Info)
+ Utils.delay 0, run
+ else
+ run()
+
destroy: ->
@context.destroy()

0 comments on commit a44cf99

Please sign in to comment.