github-migration/coffeescript-widget
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

woohoo, resizable

Browse Source
This commit is contained in:
John Bintz 2011-07-20 17:36:20 -04:00
parent abeedf7158
commit fed1752b2c
5 changed files with 121 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
.DS_Store
.sass-cache/
CoffeeScript.wdgt/

84
sass/style.scss
View File

@ -2,25 +2,37 @@
@import 'compass/utilities';
$padding: 10px;
$width: 1000px - ($padding * 2);
$height: 460px - ($padding * 2);
$textarea-width: ($width - $padding) / 2;
$textarea-height: $height - image_height('logo.png') - $padding;
body {
form {
background-color: #181A3A;
@include border-radius($padding);
padding: $padding;
position: relative;
width: 100%;
height: 100%;
opacity: 0.85;
width: $width;
height: $height;
@include clearfix;
#resize {
position: absolute;
bottom: $padding + 22px;
right: 16px;
-apple-dashboard-region: dashboard-region(control rectangle);
}
form {
position: absolute;
background: url('banding.png') repeat #181A3A;
@include border-radius($padding);
top: $padding;
left: $padding;
bottom: $padding;
right: $padding;
header {
margin-bottom: $padding;
position: relative;
position: absolute;
top: $padding;
left: $padding;
right: $padding;
@include background(
linear-gradient(#eee, #f8f8f8)
@ -43,9 +55,10 @@ body {
#error {
position: absolute;
right: 0;
width: $width - image_width('logo.png') - $padding;
height: image_height('logo.png') - ($padding * 2);
margin-left: $padding;
top: 0;
bottom: 0;
left: image_width('logo.png') + $padding;
@include border-right-radius($padding / 2);
padding: $padding 0;
@ -72,20 +85,33 @@ body {
}
}
textarea {
@include float-left;
border: none;
background: transparent;
font: {
family: Monaco, Consolas, "Lucida Console", monospace;
size: 10px;
}
color: #DEF;
width: $textarea-width;
height: $textarea-height;
div {
position: absolute;
bottom: $padding;
right: $padding;
left: $padding;
top: ($padding * 2) + image_height('logo.png');
&#javascript {
margin-left: $padding
textarea {
position: absolute;
border: none;
background: transparent;
font: {
family: Monaco, Consolas, "Lucida Console", monospace;
size: 10px;
}
color: #DEF;
height: 100%;
width: 49%;
&#coffee-script {
left: 0;
}
&#javascript {
right: 0;
}
}
}
}

BIN
src/banding.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 B

27
src/index.html
View File

@ -19,20 +19,41 @@ jQuery(->
recompile()
$('a').click(-> widget.openURL($(this).attr('href')))
growboxInset = null
mouseUp = ->
$(document).unbind('mousemove mouseup')
false
mouseMove = (event) ->
x = event.pageX + growboxInset.x
y = event.pageY + growboxInset.y
window.resizeTo(x, y)
false
$('#resize').mousedown (event) ->
$(document).mousemove(mouseMove).mouseup(mouseUp)
growboxInset = {x:(window.innerWidth - event.pageX), y:(window.innerHeight - event.pageY)}
false
)
</script>
</head>
<body>
<form>
<header>
<a href="http://jashkenas.github.com/coffee-script/" target="_new" id="logo">CoffeeScript</a>
<a href="http://jashkenas.github.com/coffee-script/" target="_new" id="logo">CoffeeScript</a>
<div id="error"></div>
</header>
<textarea name="coffee-script" id="coffee-script">class HelloWorld
<div>
<textarea name="coffee-script" id="coffee-script">class HelloWorld
constructor: ->
console.log("Hello world!")</textarea>
<textarea name="javascript" id="javascript"></textarea>
<textarea name="javascript" id="javascript"></textarea>
</div>
</form>
<img id='resize' src='/System/Library/WidgetResources/resize.png' />
</body>
</html>

58
src/style.css
View File

@ -1,20 +1,35 @@
body {
position: relative;
width: 100%;
height: 100%;
opacity: 0.85;
}
body #resize {
position: absolute;
bottom: 32px;
right: 16px;
-apple-dashboard-region: dashboard-region(control rectangle);
}
body form {
background-color: #181A3A;
position: absolute;
background: url("banding.png") repeat #181a3a;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
padding: 10px;
width: 980px;
height: 440px;
overflow: hidden;
*zoom: 1;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
body form header {
margin-bottom: 10px;
position: relative;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #f8f8f8));
background: -webkit-linear-gradient(#eeeeee, #f8f8f8);
background: -moz-linear-gradient(#eeeeee, #f8f8f8);
@ -44,9 +59,9 @@ body form header a {
body form header #error {
position: absolute;
right: 0;
width: 745px;
height: 30px;
margin-left: 10px;
top: 0;
bottom: 0;
left: 235px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-o-border-top-right-radius: 5px;
@ -76,17 +91,26 @@ body form header #error span {
color: #D00;
padding-right: 10px;
}
body textarea {
display: inline;
float: left;
body div {
position: absolute;
bottom: 10px;
right: 10px;
left: 10px;
top: 70px;
}
body div textarea {
position: absolute;
border: none;
background: transparent;
font-family: Monaco, Consolas, "Lucida Console", monospace;
font-size: 10px;
color: #DEF;
width: 485px;
height: 380px;
height: 100%;
width: 49%;
}
body textarea#javascript {
margin-left: 10px;
body div textarea#coffee-script {
left: 0;
}
body div textarea#javascript {
right: 0;
}