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 .DS_Store
.sass-cache/ .sass-cache/
CoffeeScript.wdgt/

84
sass/style.scss
View File

@ -2,25 +2,37 @@
@import 'compass/utilities'; @import 'compass/utilities';
$padding: 10px; $padding: 10px;
$width: 1000px - ($padding * 2);
$height: 460px - ($padding * 2);
$textarea-width: ($width - $padding) / 2;
$textarea-height: $height - image_height('logo.png') - $padding;
body { body {
form { position: relative;
background-color: #181A3A; width: 100%;
@include border-radius($padding); height: 100%;
padding: $padding; opacity: 0.85;
width: $width; #resize {
height: $height; position: absolute;
@include clearfix; 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 { header {
margin-bottom: $padding; margin-bottom: $padding;
position: relative; position: absolute;
top: $padding;
left: $padding;
right: $padding;
@include background( @include background(
linear-gradient(#eee, #f8f8f8) linear-gradient(#eee, #f8f8f8)
@ -43,9 +55,10 @@ body {
#error { #error {
position: absolute; position: absolute;
right: 0; right: 0;
width: $width - image_width('logo.png') - $padding; top: 0;
height: image_height('logo.png') - ($padding * 2); bottom: 0;
margin-left: $padding; left: image_width('logo.png') + $padding;
@include border-right-radius($padding / 2); @include border-right-radius($padding / 2);
padding: $padding 0; padding: $padding 0;
@ -72,20 +85,33 @@ body {
} }
} }
textarea { div {
@include float-left; position: absolute;
border: none; bottom: $padding;
background: transparent; right: $padding;
font: { left: $padding;
family: Monaco, Consolas, "Lucida Console", monospace; top: ($padding * 2) + image_height('logo.png');
size: 10px;
}
color: #DEF;
width: $textarea-width;
height: $textarea-height;
&#javascript { textarea {
margin-left: $padding 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() recompile()
$('a').click(-> widget.openURL($(this).attr('href'))) $('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> </script>
</head> </head>
<body> <body>
<form> <form>
<header> <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> <div id="error"></div>
</header> </header>
<textarea name="coffee-script" id="coffee-script">class HelloWorld <div>
<textarea name="coffee-script" id="coffee-script">class HelloWorld
constructor: -> constructor: ->
console.log("Hello world!")</textarea> console.log("Hello world!")</textarea>
<textarea name="javascript" id="javascript"></textarea> <textarea name="javascript" id="javascript"></textarea>
</div>
</form> </form>
<img id='resize' src='/System/Library/WidgetResources/resize.png' />
</body> </body>
</html> </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 { body form {
background-color: #181A3A; position: absolute;
background: url("banding.png") repeat #181a3a;
-moz-border-radius: 10px; -moz-border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-o-border-radius: 10px; -o-border-radius: 10px;
-ms-border-radius: 10px; -ms-border-radius: 10px;
-khtml-border-radius: 10px; -khtml-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
padding: 10px; top: 10px;
width: 980px; left: 10px;
height: 440px; bottom: 10px;
overflow: hidden; right: 10px;
*zoom: 1;
} }
body form header { body form header {
margin-bottom: 10px; 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-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #f8f8f8));
background: -webkit-linear-gradient(#eeeeee, #f8f8f8); background: -webkit-linear-gradient(#eeeeee, #f8f8f8);
background: -moz-linear-gradient(#eeeeee, #f8f8f8); background: -moz-linear-gradient(#eeeeee, #f8f8f8);
@ -44,9 +59,9 @@ body form header a {
body form header #error { body form header #error {
position: absolute; position: absolute;
right: 0; right: 0;
width: 745px; top: 0;
height: 30px; bottom: 0;
margin-left: 10px; left: 235px;
-moz-border-radius-topright: 5px; -moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
-o-border-top-right-radius: 5px; -o-border-top-right-radius: 5px;
@ -76,17 +91,26 @@ body form header #error span {
color: #D00; color: #D00;
padding-right: 10px; padding-right: 10px;
} }
body textarea { body div {
display: inline; position: absolute;
float: left; bottom: 10px;
right: 10px;
left: 10px;
top: 70px;
}
body div textarea {
position: absolute;
border: none; border: none;
background: transparent; background: transparent;
font-family: Monaco, Consolas, "Lucida Console", monospace; font-family: Monaco, Consolas, "Lucida Console", monospace;
font-size: 10px; font-size: 10px;
color: #DEF; color: #DEF;
width: 485px; height: 100%;
height: 380px; width: 49%;
} }
body textarea#javascript { body div textarea#coffee-script {
margin-left: 10px; left: 0;
}
body div textarea#javascript {
right: 0;
} }