hooking up open/close logic for modal and menus

This commit is contained in:
Max Ogden 2011-07-02 14:21:21 -07:00
parent 11a036a2b0
commit 770210a45b
4 changed files with 31 additions and 6 deletions

View File

@ -19,6 +19,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
<ul class="menu"> <ul class="menu">
<li><a class="transform" href="JavaScript:void(0);">Transform...</a></li> <li><a class="transform" href="JavaScript:void(0);">Transform...</a></li>
</ul> </ul>
@ -39,7 +40,7 @@
<div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
<div class="dialog-container ui-draggable" style="display: none; z-index: 102; top: 101px; "> <div class="dialog-container ui-draggable" style="display: none; z-index: 102; top: 101px; ">
<div class="dialog-frame" style="width: 700px; visibility: visible; "> <div class="dialog-frame" style="width: 700px; visibility: visible; ">
<div class="dialog-border"> <div id="dialog-content" class="dialog-border">
</div> </div>
</div> </div>
@ -200,9 +201,9 @@
</table> </table>
</div> </div>
</div> </div>
<div class="dialog-footer" bind="dialogFooter"> <div class="dialog-footer">
<button class="button" bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button> <button class="okButton button">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
<button class="button" bind="cancelButton">Cancel</button> <button class="cancelButton button">Cancel</button>
</div> </div>
</script> </script>

View File

@ -21,6 +21,18 @@ app.routes = {
e.preventDefault(); e.preventDefault();
})) }))
$( '.transform' ).live('click', ( function( e ) {
$('.dialog-overlay').show();
$('.dialog-container').show();
util.render('bulkEdit', 'dialog-content');
$('.cancelButton').click(function(e) {
$('.dialog-overlay').hide();
$('.dialog-container').hide();
})
$('.menu').hide();
$('.menu-overlay').hide();
e.preventDefault();
}))
}, },
page: function(id) { page: function(id) {
removalist.getPageSize(); removalist.getPageSize();
@ -34,6 +46,10 @@ app.after = {
dataTable: function() { dataTable: function() {
$('.column-header-menu').click(function(e) { $('.column-header-menu').click(function(e) {
var offset = $(e.target).offset(); var offset = $(e.target).offset();
$('.menu-overlay').show().click(function(e) {
$(e.target).hide();
$('.menu').hide();
});
$('.menu').show().css({top: offset.top + 20, left: offset.left}); $('.menu').show().css({top: offset.top + 20, left: offset.left});
}) })
} }

View File

@ -43,6 +43,15 @@
.loading { background-image: url(../images/loader.gif); background-repeat: no-repeat; padding-left: 15px; background-position: 0px 3px;} .loading { background-image: url(../images/loader.gif); background-repeat: no-repeat; padding-left: 15px; background-position: 0px 3px;}
a.button:hover span.icon.loading { background-image: url(../images/loader-blue.gif); } a.button:hover span.icon.loading { background-image: url(../images/loader-blue.gif); }
#couchLogo {float: left; margin-right: 5px; margin-top: 3px} #couchLogo {float: left; margin-right: 5px; margin-top: 3px}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
ul.menu { ul.menu {
display: none; display: none;
outline-style: none; outline-style: none;

View File

@ -20,8 +20,7 @@ After you install it, visit this link to open Removalist:
Copy these utilities to the new db: Copy these utilities to the new db:
curl -X POST http://user:pass@YOURCOUCH/_replicate -d '{"source":"http://max.couchone.com/apps","target":"YOURDB", "doc_ids":["_design/removalist"]}' -H "Content-type: application/json"
curl -X POST http://user:pass@YOURCOUCH/\_replicate -d '{"source":"http://max.couchone.com/apps","target":"YOURDB", "doc\_ids":["_design/removalist"]}' -H "Content-type: application/json"
### In-depth install ### In-depth install