Skip to content
This repository has been archived by the owner on Jan 31, 2018. It is now read-only.

T431 #161

Closed
wants to merge 5 commits into from
Closed

T431 #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e5f4332
[t461] - Editors in the timeline
secretrobotron Mar 19, 2012
d62abd9
[t461] - Rebased and finished prototype
secretrobotron Mar 20, 2012
041d63f
Style for dialogs; tested delete track and track data
benrito Mar 20, 2012
fd49616
Re-styled dialogs, created publish dialog, added toolbar slice to tes…
benrito Mar 22, 2012
8117ebd
CSS fix
benrito Mar 22, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
185 changes: 185 additions & 0 deletions dialogs/butter.dialogs.css
View file
Open in desktop
@@ -0,0 +1,185 @@
html, body {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
font-family: 'Verdana';
color: #fff;
font-size: 12px;
}
@font-face {
font-family: 'BebasRegular';
src: url('../src/ui/fonts/BEBAS___-webfont.eot');
src: url('../src/ui/fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
url('../src/ui/fonts/BEBAS___-webfont.woff') format('woff'),
url('../src/ui/fonts/BEBAS___-webfont.ttf') format('truetype'),
url('../src/ui/fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* MetaWebPro font family licensed from fontshop.com. WOFF-FTW! */
@font-face {
font-family: 'MetaBold';
src: url('http://www.mozilla.org/img/fonts/MetaWebPro-Bold.eot');
src: local('☺'), url('http://www.mozilla.org/img/fonts/MetaWebPro-Bold.woff') format('woff');
font-weight: bold;
}
h1 {
font-family: 'MetaBold';
color: #fff;
font-size: 21px;
margin-top: 15px;
margin-bottom: 10px;
}
p {
font-family: 'Verdana';
color: #fff;
font-size: 12px;
}
button, a.button {
font-family: 'BebasRegular';
font-size: 22px;
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
text-decoration: none;
border-radius: 5px;
border: none;
cursor: pointer;
color: white;
}
button:hover, a.button:hover {
}
#close {
width: 300px;
background-image: -moz-linear-gradient(center bottom,#667 0,#D3D3D3 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#D3D3D3));
}
#close:hover {
background-image: -moz-linear-gradient(center bottom,#667 0,#DFDFDF 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#666));
}
#published-url:hover {
background-color: #FCFCFC;
}
#published-url {
background-color: white;
overflow: hidden;
font-family: Verdana;
font-size: 14px;
color: #000;
width: 300px;
padding: 10px 10px 10px 10px;
margin-bottom: 10px;
margin: 0px auto;
}
#published-url a {
color: steelblue;
font-family: Courier;
font-size: 14px;
text-decoration: none;
}
.share_instruction {
padding: 10px 10px 10px 10px;
}
#publish {
width: 300px;
background: #D1BE70;
background: -moz-linear-gradient(top, #26B5D8 0%, #2B86D4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26B5D8), color-stop(100%,#2B86D4));
background: -webkit-linear-gradient(top, #26B5D8 0%,#2B86D4 100%);
background: -o-linear-gradient(top, #26B5D8 0%,#2B86D4 100%);
background: -ms-linear-gradient(top, #26B5D8 0%,#2B86D4 100%);
background: linear-gradient(top, #2B86D4);
margin-bottom: 10px;
}
#publish:hover {
background: #D1BE70;
background: -moz-linear-gradient(top, #26B5D8 0%, #29B4D6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D1BE70), color-stop(100%,#29B4D6));
background: -webkit-linear-gradient(top, #26B5D8 0%,#29B4D6 100%);
background: -o-linear-gradient(top, #26B5D8 0%,#29B4D6 100%);
background: -ms-linear-gradient(top, #26B5D8 0%,#29B4D6 100%);
background: linear-gradient(top, #26B5D8 0%,#29B4D6 100%);
}
#unpublish {
width: 300px;
background-image: -moz-linear-gradient(center bottom,#667 0,#D3D3D3 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#D3D3D3));
margin-bottom: 10px;
}
#unpublish:hover {
background-image: -moz-linear-gradient(center bottom,#667 0,#DFDFDF 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#666));
}
#get-html {
width: 145px;
background-image: -moz-linear-gradient(center bottom,#667 0,#D3D3D3 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#D3D3D3));
margin-right: 5px;
}
#get-html:hover {
background-image: -moz-linear-gradient(center bottom,#667 0,#DFDFDF 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#666));
}
#get-json {
width: 145px;
background-image: -moz-linear-gradient(center bottom,#667 0,#D3D3D3 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#D3D3D3));
}
#get-json:hover {
background-image: -moz-linear-gradient(center bottom,#667 0,#DFDFDF 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#666));
}
#no {
background-image: -moz-linear-gradient(center bottom,#667 0,#D3D3D3 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#D3D3D3));
}
#no:hover {
background-image: -moz-linear-gradient(center bottom,#667 0,#DFDFDF 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#667),color-stop(1,#666));
}
#yes {
background: #D1BE70;
background: -moz-linear-gradient(top, #D1BE70 0%, #A08546 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D1BE70), color-stop(100%,#A08546));
background: -webkit-linear-gradient(top, #D1BE70 0%,#A08546 100%);
background: -o-linear-gradient(top, #D1BE70 0%,#A08546 100%);
background: -ms-linear-gradient(top, #D1BE70 0%,#A08546 100%);
background: linear-gradient(top, #D1BE70);
box-shadow: none;
}
#yes:hover {
background: #D1BE70;
background: -moz-linear-gradient(top, #D1BE70 0%, #AD9B4C 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D1BE70), color-stop(100%,#AD9B4C));
background: -webkit-linear-gradient(top, #D1BE70 0%,#AD9B4C 100%);
background: -o-linear-gradient(top, #D1BE70 0%,#AD9B4C 100%);
background: -ms-linear-gradient(top, #D1BE70 0%,#AD9B4C 100%);
background: linear-gradient(top, #D1BE70 0%,#AD9B4C 100%);
}
#buttons {
margin: 0px auto;
}
#track-data {
width: 300px;
height: 100px;
}
#container {
}
.center {
position: absolute;
margin: 0px auto;
text-align: center;
}
img.close-x {
cursor: pointer;
position: absolute;
width: 30px;
height: 30px;
right: 5px;
top: 5px;



56 changes: 3 additions & 53 deletions dialogs/delete-track.html
View file
Open in desktop
Expand Up @@ -4,6 +4,7 @@

<html>
<head>
<link rel="stylesheet" href="butter.dialogs.css" />
<script type="text/javascript" src="../src/dialog/dialog-comm.js"></script>
<script type="text/javascript">
(function(){
Expand Down Expand Up @@ -42,65 +43,14 @@
}, false );
}());
</script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

#container {
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;

display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;

display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
}

h1 {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}

button {
font-size: 120%;
}

#buttons {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<h1>Are you sure you want to delete <span id="track-name"></span>?</h1>
<div id="buttons">
<button disabled id="yes">Yes</button>
<button disabled id="no">No</button>
</div>
</div>
</div>
</body>
</html>
51 changes: 51 additions & 0 deletions dialogs/load-project.html
View file
Open in desktop
@@ -0,0 +1,51 @@
<!-- This Source Code Form is subject to the terms of the MIT license
If a copy of the MIT license was not distributed with this file, you can
obtain one at http://www.mozillapopcorn.org/butter-license.txt -->

<html>
<head>
<link rel="stylesheet" href="butter.dialogs.css" />
<script type="text/javascript" src="../src/dialog/dialog-comm.js"></script>
<script type="text/javascript">
(function(){

var _comm = new Comm();

document.addEventListener( "DOMContentLoaded", function( e ){
var closeButton = document.getElementById( "close" ),
trackName = document.getElementById( "track-name" ),
trackData = document.getElementById( "track-data" );

function closePressed( e ){
_comm.send( "close" );
} //cancelPressed

document.addEventListener( "keypress", function( e ) {
if( e.currentTarget.nodeName !== "TEXTAREA" && [ 13, 27 ].indexOf( e.keyCode ) > -1 ){
closePressed( e );
} //if
}, false);

closeButton.addEventListener( "click", closePressed, false );

_comm.listen( "trackdata", function( e ){
trackName.innerHTML = e.data.name;
trackData.value = JSON.stringify( e.data );
closeButton.removeAttribute( "disabled" );
});
}, false );
}());
</script>
</head>
<body>
<div id="container">
<div class="center">
<h1>Data for <span id="track-name"></span></h1>
<textarea readonly id="track-data">Please wait...</textarea>
<div id="buttons">
<button disabled id="close">Close</button>
</div>
</div>
</div>
</body>
</html>
31 changes: 31 additions & 0 deletions dialogs/publish-project.html
View file
Open in desktop
@@ -0,0 +1,31 @@
<!-- This Source Code Form is subject to the terms of the MIT license
If a copy of the MIT license was not distributed with this file, you can
obtain one at http://www.mozillapopcorn.org/butter-license.txt -->

<html>
<head>
<link rel="stylesheet" href="butter.dialogs.css" />
<script type="text/javascript" src="../src/dialog/dialog-comm.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<img class="close-x" src="../src/ui/assets/close-button.png">
<div id="container">
<div class="center">
<h1>Share <span id="project-name"></span></h1>
<div id="published-url"><a href="#">http://</a></div>
<div id="buttons">
<div class="share_instruction">Click "publish" to generate a link to your project.</div>
<!-- change state of instruction
<div class="share_instruction">Here's a link to your published project. Share away!</div> --!>

<button disabled id="publish">Publish</button>
<!-- change state of Publish button to let user revoke publish status
<button disabled id="unpublish">Un-Publish</button> --!>
<button disabled id="get-html">Get HTML</button>
<button disabled id="get-json">Get JSON</button>
</div>
</div>
</div>
</body>
</html>