Create Drobpox similar UI - Framer.js

dropUI.coffee

iphone = new Layer(
  width: 320
  height: 568
  backgroundColor: "#fff"
)
iphone.center()
iphone.scroll = true
header = new Layer(
  width: iphone.width
  height: 60
  backgroundColor: "#f8f8f8"
  x: iphone.x
  y: iphone.y
)

#shadowY: 2, 
#shadowBlur: 6,
#shadowColor: "rgba(0,0,0,0.2)"
header.style =
  "padding-top": "25px"
  "text-align": "center"
  "font-size": "21px"
  color: "#000"
  "border-bottom": "1px solid rgba(0,0,0,0.05)"
  "font-weight": "400"
  position: "fixed"
  top: "0px"

header.html = "Dropbox"

#header.html += "<span id='no' style='font-size: 13px; position: relative; top: -33px; left: -175px;'>Carrier</span>"
searchCont = new Layer(
  superLayer: iphone
  width: iphone.width
  y: 60
  height: 50
  backgroundColor: "#fff"
)
searchCont.style =
  "border-bottom": "1px solid rgba(0,0,0,0.1)"
  "padding-left": "10px"
  "padding-top": "8px"

input = new Layer(
  superLayer: searchCont
  width: searchCont.width - 20
  height: searchCont.height - 16
  borderRadius: "5px"
  backgroundColor: "#eaebed"
)
input.style =
  "font-size": "15px"
  color: "rgba(0,0,0,0.2)"
  "font-weight": "400"
  "text-align": "center"
  "padding-top": "3px"

input.html = "Search my Dropbox"

# Array \\
array = new Array()
array[0] = "bridge.jpg"
array[1] = "Huckleberry Finn.pdf"
array[2] = "puppy.gif"
array[3] = "tickets.md"
array[4] = "Aquarello.js"
array[5] = "Movies"
array[6] = "Torrent Files"
array[7] = "Trading"
array[8] = "image.png"
array[9] = "Camera Uploads"
sub = new Array()
sub[0] = "1.5MB - created 01/01/2013"
sub[1] = "3.4MB - created 15/05/2013"
sub[2] = "128KB - modified 6 months ago"
sub[3] = "128KB - modified 6 months ago"
sub[4] = "128KB - modified 6 months ago"
sub[5] = "128KB - modified 6 months ago"
sub[6] = "128KB - modified 6 months ago"
sub[7] = "128KB - modified 6 months ago"
sub[8] = "128KB - modified 6 months ago"
sub[9] = "128KB - modified 6 months ago"

# Ciclo per creare un cellLayer per ogni elemento dell'array \\
cellLayer = undefined
imageLayer = undefined
height = undefined
rowIndex = undefined
rows = undefined
_ref = undefined
rows = array.length
height = 55
rowIndex = 0
_ref = rows - 1

while (if 0 <= _ref then rowIndex <= _ref else rowIndex >= _ref)
  cellLayer = new Layer(
    superLayer: iphone
    width: iphone.width
    height: height
    y: searchCont.y + 50 + rowIndex * height
  )
  cellLayer.style =
    "border-bottom": "1px solid rgba(0,0,0,0.1)"
    color: "#000"
    "padding-left": "10px"
    "padding-top": "5px"
    "font-size": "20px"
    "font-weight": "200"
    backgroundColor: "#fff"

  cellLayer.html = array[rowIndex]
  cellLayer.html += "<p style='font-size: 15px; color: rgba(0,0,0,0.2); margin-top: -5px; font-weight: 400'>" + sub[rowIndex] + "</p>"
  (if 0 <= _ref then rowIndex++ else rowIndex--)

dropUI.js

// Welcome to Framer

var iphone = new Layer({
	width: 320,
	height: 568,
	backgroundColor: "#fff"
})
iphone.center()
iphone.scroll = true

var header = new Layer({
	width: iphone.width,
	height: 60,
	backgroundColor: "#f8f8f8",
	x: iphone.x,
	y: iphone.y
	//shadowY: 2, 
	//shadowBlur: 6,
	//shadowColor: "rgba(0,0,0,0.2)"
})
header.style = {
	"padding-top": "25px",
	"text-align": "center",
	"font-size": "21px",
	"color": "#000",
	"border-bottom": "1px solid rgba(0,0,0,0.05)",
	"font-weight": "400",
	"position": "fixed",
	"top": "0px"
}
header.html = "Dropbox"
//header.html += "<span id='no' style='font-size: 13px; position: relative; top: -33px; left: -175px;'>Carrier</span>"

var searchCont = new Layer({
	superLayer: iphone,
	width: iphone.width,
	y: 60,
	height: 50,
	backgroundColor: "#fff"
})
searchCont.style = {
	"border-bottom": "1px solid rgba(0,0,0,0.1)",
	"padding-left": "10px",
	"padding-top": "8px"
}

var input = new Layer({
	superLayer: searchCont,
	width: searchCont.width - 20,
	height: searchCont.height - 16,
	borderRadius: "5px",
	backgroundColor: "#eaebed"
})
input.style = {
	"font-size": "15px",
	"color": "rgba(0,0,0,0.2)",
	"font-weight": "400",
	"text-align": "center",
	"padding-top": "3px",
}
input.html = "Search my Dropbox"



// Array \\

var array = new Array()
array[0] = 'bridge.jpg'
array[1] = 'Huckleberry Finn.pdf'
array[2] = 'puppy.gif'
array[3] = 'tickets.md'
array[4] = 'Aquarello.js'
array[5] = 'Movies'
array[6] = 'Torrent Files'
array[7] = 'Trading'
array[8] = 'image.png'
array[9] = 'Camera Uploads'

var sub = new Array()
sub[0] = '1.5MB - created 01/01/2013'
sub[1] = '3.4MB - created 15/05/2013'
sub[2] = '128KB - modified 6 months ago'
sub[3] = '128KB - modified 6 months ago'
sub[4] = '128KB - modified 6 months ago'
sub[5] = '128KB - modified 6 months ago'
sub[6] = '128KB - modified 6 months ago'
sub[7] = '128KB - modified 6 months ago'
sub[8] = '128KB - modified 6 months ago'
sub[9] = '128KB - modified 6 months ago'


// Ciclo per creare un cellLayer per ogni elemento dell'array \\

var cellLayer, imageLayer, height, rowIndex, rows, _ref;
rows = array.length;
height = 55;

for (rowIndex = 0, _ref = rows - 1; 0 <= _ref ? rowIndex <= _ref : rowIndex >= _ref; 0 <= _ref ? rowIndex++ : rowIndex--) {

  cellLayer = new Layer({
  	superLayer: iphone,
    width: iphone.width,
    height: height,
    y: searchCont.y + 50 + rowIndex * height
  })
  cellLayer.style = {
  	"border-bottom": "1px solid rgba(0,0,0,0.1)",
	"color": "#000",
	"padding-left": "10px",
	"padding-top": "5px",
	"font-size": "20px",
	"font-weight": "200",
	"backgroundColor": "#fff"
  }
  cellLayer.html = array[rowIndex]
  cellLayer.html += "<p style='font-size: 15px; color: rgba(0,0,0,0.2); margin-top: -5px; font-weight: 400'>" + sub[rowIndex] + "</p>" 

}