elements
+// --------------------------------------------------------
+
+// Inline and block code styles
+code,
+pre {
+ padding: 0 3px 2px;
+ #font > #family > .monospace;
+ font-size: @baseFontSize - 1;
+ color: @grayDark;
+ .border-radius(3px);
+}
+code {
+ padding: 3px 4px;
+ color: #d14;
+ background-color: #f7f7f9;
+ border: 1px solid #e1e1e8;
+}
+pre {
+ display: block;
+ padding: (@baseLineHeight - 1) / 2;
+ margin: 0 0 @baseLineHeight / 2;
+ font-size: 12px;
+ line-height: @baseLineHeight;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc; // fallback for IE7-8
+ border: 1px solid rgba(0,0,0,.15);
+ .border-radius(4px);
+ white-space: pre;
+ white-space: pre-wrap;
+ word-break: break-all;
+
+ // Make prettyprint styles more spaced out for readability
+ &.prettyprint {
+ margin-bottom: @baseLineHeight;
+ }
+
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ padding: 0;
+ background-color: transparent;
+ }
+}
diff --git a/static/june_2007_style/bootstrap/component-animations.less b/static/june_2007_style/bootstrap/component-animations.less
new file mode 100644
index 00000000000..4f2a4fd1185
--- /dev/null
+++ b/static/june_2007_style/bootstrap/component-animations.less
@@ -0,0 +1,18 @@
+// COMPONENT ANIMATIONS
+// --------------------
+
+.fade {
+ .transition(opacity .15s linear);
+ opacity: 0;
+ &.in {
+ opacity: 1;
+ }
+}
+
+.collapse {
+ .transition(height .35s ease);
+ position:relative;
+ overflow:hidden;
+ height: 0;
+ &.in { height: auto; }
+}
diff --git a/static/june_2007_style/bootstrap/dropdowns.less b/static/june_2007_style/bootstrap/dropdowns.less
new file mode 100644
index 00000000000..1689ead03bf
--- /dev/null
+++ b/static/june_2007_style/bootstrap/dropdowns.less
@@ -0,0 +1,131 @@
+// DROPDOWN MENUS
+// --------------
+
+// Use the .menu class on any " );
@@ -73,11 +73,11 @@ function make_popupmenu(button_element, initial_options) {
.appendTo( "body" );
var x = e.pageX - wrapper.width() / 2 ;
- x = Math.min( x, $(document).scrollLeft() + $(window).width() - $(wrapper).width() - 20 );
- x = Math.max( x, $(document).scrollLeft() + 20 );
+ x = Math.min( x, $(document).scrollLeft() + $(window).width() - $(wrapper).width() - 5 );
+ x = Math.max( x, $(document).scrollLeft() + 5 );
wrapper.css( {
- top: e.pageY - 15,
+ top: e.pageY,
left: x
} );
}, 10);
diff --git a/static/scripts/galaxy.panels.js b/static/scripts/galaxy.panels.js
index bc33a9c618d..6b34cca655d 100644
--- a/static/scripts/galaxy.panels.js
+++ b/static/scripts/galaxy.panels.js
@@ -1,4 +1,8 @@
-function ensure_dd_helper() {
+!function( exports, $ ){
+
+"use strict"
+
+var ensure_dd_helper = function () {
// Insert div that covers everything when dragging the borders
if ( $( "#DD-helper" ).length == 0 ) {
$( "" ).css( {
@@ -8,170 +12,129 @@ function ensure_dd_helper() {
}
}
-var MIN_PANEL_WIDTH = 100,
- MAX_PANEL_WIDTH = 1000;
+// Panels
-function make_left_panel( panel_el, center_el, border_el ) {
- var hidden = false;
- var saved_size = null;
- // Functions for managing panel
- var resize = function( x ) {
- var oldx = x;
- if ( x < 0 ) x = 0;
- $( panel_el ).css( "width", x );
- $( border_el ).css( "left", oldx );
- $( center_el ).css( "left", x+7 );
- // ie7-recalc.js
- if ( document.recalc ) { document.recalc(); }
- };
- var toggle = function() {
- if ( hidden ) {
- $( border_el ).removeClass( "hover" );
- $( border_el).animate( {left: saved_size }, "fast" );
- $( panel_el ).css( "left", - saved_size ).show().animate( { "left": 0 }, "fast", function () {
- resize( saved_size );
- $( border_el ).removeClass( "hidden" );
- });
- hidden = false;
+var MIN_PANEL_WIDTH = 150,
+ MAX_PANEL_WIDTH = 800;
+
+var Panel = function( options ) {
+ this.panel = options.panel;
+ this.center = options.center;
+ this.drag = options.drag;
+ this.toggle = options.toggle;
+ this.left = !options.right;
+ this.hidden = false;
+ this.hidden_by_tool = false;
+ this.saved_size = null;
+ this.init();
+}
+$.extend( Panel.prototype, {
+ resize: function( x ) {
+ $(this.panel).css( "width", x );
+ if ( this.left ) {
+ $(center).css( "left", x );
} else {
- saved_size = $( border_el ).position().left;
- // Move center
- $( center_el ).css( "left", $(border_el).innerWidth() );
- if ( document.recalc ) { document.recalc(); }
- $( border_el).removeClass( "hover" );
- $( panel_el ).animate( { left: - saved_size }, "fast" );
- $( border_el ).animate( { left: -1 }, "fast", function() {
- $( this ).addClass( "hidden" );
- });
- hidden = true;
+ $(center).css( "right", x );
}
- };
- // Connect to elements
- //$( border_el ).hover(
- // function() { $( this ).addClass( "hover" ) },
- // function() { $( this ).removeClass( "hover" ) }
- $( border_el ).bind( "dragstart", function() {
- $( '#DD-helper' ).show();
- }).bind( "dragend", function() {
- $( '#DD-helper' ).hide();
- }).bind( "drag", function( e, d ) {
- x = d.offsetX;
- // Limit range
- x = Math.min( MAX_PANEL_WIDTH, Math.max( MIN_PANEL_WIDTH, x ) );
- // Resize
- if ( hidden ) {
- $( panel_el ).css( "left", 0 );
- $( border_el ).removeClass( "hidden" );
- hidden = false;
- }
- resize( x );
- }).bind( "dragclickonly", function() {
- toggle();
- }).find( "div" ).show();
- var force_panel = function( op ) {
- if ( ( hidden && op == 'show' ) || ( ! hidden && op == 'hide' ) ) {
- toggle();
- }
- }
- return { force_panel: force_panel };
-};
-
-function make_right_panel( panel_el, center_el, border_el ) {
- var hidden = false,
- hidden_by_tool = false,
- saved_size = null;
-
- var resize = function( x ) {
- $( panel_el ).css( "width", x );
- $( center_el ).css( "right", x+9 );
- $( border_el ).css( "right", x ).css( "left", "" );
// ie7-recalc.js
if ( document.recalc ) { document.recalc(); }
- };
- var toggle = function() {
- if ( hidden ) {
- $( border_el).removeClass( "hover" );
- $( border_el ).animate( { right: saved_size }, "fast" );
- $( panel_el ).css( "right", - saved_size ).show().animate( { "right": 0 }, "fast", function () {
- resize( saved_size );
- $( border_el ).removeClass( "hidden" );
- });
- hidden = false;
- }
- else
- {
- saved_size = $(document).width() - $( border_el ).position().left - $(border_el).outerWidth();
+ },
+ do_toggle: function() {
+ var self = this;
+ if ( this.hidden ) {
+ $(this.toggle).removeClass( "hidden" );
+ if ( this.left ) {
+ $(this.panel).css( "left", - this.saved_size ).show().animate( { "left": 0 }, "fast", function () {
+ self.resize( self.saved_size );
+ });
+ } else {
+ $(this.panel).css( "right", - this.saved_size ).show().animate( { "right": 0 }, "fast", function () {
+ self.resize( self.saved_size );
+ });
+ }
+ self.hidden = false;
+ } else {
+ self.saved_size = $(this.panel).width();
// Move center
- $( center_el ).css( "right", $(border_el).innerWidth() + 1 );
+
+ // $( center_el ).css( "right", $(border_el).innerWidth() + 1 );
+
if ( document.recalc ) { document.recalc(); }
// Hide border
- $( border_el ).removeClass( "hover" );
- $( panel_el ).animate( { right: - saved_size }, "fast" );
- $( border_el ).animate( { right: -1 }, "fast", function() {
- $( this ).addClass( "hidden" );
- });
- hidden = true;
+ if ( this.left ) {
+ $(this.panel).animate( { left: - this.saved_size }, "fast" );
+ } else {
+ $(this.panel).animate( { right: - this.saved_size }, "fast" );
+ }
+ // self.resize(0);
+ if ( this.left ) {
+ $(center).css( "left", 0 );
+ } else {
+ $(center).css( "right", 0 );
+ }
+
+ self.hidden = true;
+ $(self.toggle).addClass( "hidden" );
}
- hidden_by_tool = false;
- };
- var handle_minwidth_hint = function( x ) {
- var space = $( center_el ).width() - ( hidden ? saved_size : 0 );
+ this.hidden_by_tool = false;
+ },
+ handle_minwidth_hint: function( x ) {
+ var space = $(this.center).width() - ( this.hidden ? this.saved_size : 0 );
if ( space < x )
{
- if ( ! hidden ) {
- toggle();
- hidden_by_tool = true;
+ if ( ! this.hidden ) {
+ this.do_toggle();
+ this.hidden_by_tool = true;
}
} else {
- if ( hidden_by_tool ) {
- toggle();
- hidden_by_tool = false;
+ if ( this.hidden_by_tool ) {
+ this.do_toggle();
+ this.hidden_by_tool = false;
}
}
- };
- $( border_el ).hover(
- function() { $( this ).addClass( "hover" ); },
- function() { $( this ).removeClass( "hover" ); }
- ).bind( "dragstart", function() {
- $( '#DD-helper' ).show();
- }).bind( "dragend", function() {
- $( '#DD-helper' ).hide();
- }).bind( "drag", function( e, d ) {
- x = d.offsetX;
- w = $(window).width();
- // Limit range
- x = Math.min( w - MIN_PANEL_WIDTH, x );
- x = Math.max( w - MAX_PANEL_WIDTH, x );
- // Resize
- if ( hidden ) {
- $( panel_el ).css( "right", 0 );
- $( border_el ).removeClass( "hidden" );
- hidden = false;
- }
- resize( w - x - $(this).outerWidth() );
- }).bind( "dragclickonly", function() {
- toggle();
- }).find( "div" ).show();
- var force_panel = function( op ) {
- if ( ( hidden && op == 'show' ) || ( ! hidden && op == 'hide' ) ) {
- toggle();
+ },
+ force_panel: function( op ) {
+ if ( ( this.hidden && op == 'show' ) || ( ! this.hidden && op == 'hide' ) ) {
+ this.do_toggle();
}
+ },
+ init: function() {
+ var self = this;
+ // Resizing using drag element
+ $(this.drag).on( "dragstart", function( e, d ) {
+ $( '#DD-helper' ).show();
+ d.width = $(self.panel).width();
+ }).on( "dragend", function() {
+ $( '#DD-helper' ).hide();
+ }).on( "drag", function( e, d ) {
+ var x;
+ if ( self.left ) {
+ x = d.width + d.deltaX;
+ } else {
+ x = d.width - d.deltaX;
+ }
+ // Limit range
+ x = Math.min( MAX_PANEL_WIDTH, Math.max( MIN_PANEL_WIDTH, x ) );
+ self.resize( x );
+ });
+ // Hide/show using toggle element
+ $(self.toggle).on( "click", function() { self.do_toggle(); } );
}
- return { handle_minwidth_hint: handle_minwidth_hint, force_panel: force_panel };
-};
+});
+
// Modal dialog boxes
function hide_modal() {
- $(".dialog-box-container" ).hide( 0, function() {
+ $("#overlay .modal" ).hide( 0, function() {
$("#overlay").hide();
- $("#overlay").removeClass( "modal" );
+ $("#overlay-background").removeClass( "in" );
$( ".dialog-box" ).find( ".body" ).children().remove();
} );
};
function show_modal() {
- $("#overlay").addClass( "modal" );
+ $("#overlay-background").addClass( "in" );
_show_modal.apply( this, arguments );
}
@@ -181,41 +144,40 @@ function show_message() {
function _show_modal( title, body, buttons, extra_buttons, init_fn ) {
if ( title ) {
- $( ".dialog-box" ).find( ".title" ).html( title );
- $( ".dialog-box" ).find( ".unified-panel-header" ).show();
+ $( "#dialog-box .modal-header .title" ).html( title );
+ $( "#dialog-box .modal-header" ).show();
} else {
- $( ".dialog-box" ).find( ".unified-panel-header" ).hide();
+ $( "#dialog-box .modal-header" ).hide();
}
- var b = $( ".dialog-box" ).find( ".buttons" ).html( "" );
+ var b = $( "#dialog-box" ).find( ".buttons" ).html( "" );
if ( buttons ) {
$.each( buttons, function( name, value ) {
b.append( $( '' ).text( name ).click( value ) );
b.append( " " );
});
- b.show();
- } else {
- b.hide();
}
- var b = $( ".dialog-box" ).find( ".extra_buttons" ).html( "" );
+ var b = $( "#dialog-box" ).find( ".extra_buttons" ).html( "" );
if ( extra_buttons ) {
$.each( extra_buttons, function( name, value ) {
b.append( $( '' ).text( name ).click( value ) );
b.append( " " );
});
- b.show();
+ }
+ if ( buttons || extra_buttons ) {
+ $( "#dialog-box .modal-footer" ).show();
} else {
- b.hide();
+ $( "#dialog-box .modal-footer" ).hide();
}
if ( body == "progress" ) {
- body = $("![]()
").attr("src", image_path + "/yui/rel_interstitial_loading.gif");
+ body = $("
@@ -217,8 +215,10 @@
## Background displays first
## Layer iframes over backgrounds
- ");
}
var body_elt = $( ".dialog-box" ).find( ".body" );
// Clear min-width to allow for modal to take size of new body.
body_elt.css("min-width", "0px");
- $( ".dialog-box" ).find( ".body" ).html( body );
- if ( ! $(".dialog-box-container").is( ":visible" ) ) {
+ $( "#dialog-box" ).find( ".modal-body" ).html( body );
+ if ( ! $("#dialog-box").is( ":visible" ) ) {
$("#overlay").show();
- $(".dialog-box-container").show();
+ $("#dialog-box").show();
}
// Fix min-width so that modal cannot shrink considerably if
// new content is loaded.
@@ -237,22 +199,6 @@ function show_in_overlay( options ) {
$("#close_button").bind( "click", function() { hide_modal(); } );
}
-// Tab management
-
-$(function() {
- $(".tab").each( function() {
- var submenu = $(this).children( ".submenu" );
- if ( submenu.length > 0 ) {
- if ( $.browser.msie ) {
- // Vile IE iframe hack -- even IE7 needs this
- submenu.prepend( "" );
- }
- $(this).hover( function() { submenu.show(); }, function() { submenu.hide(); } );
- submenu.click( function() { submenu.hide(); } );
- }
- });
-});
-
function user_changed( user_email, is_admin ) {
if ( user_email ) {
$(".loggedin-only").show();
@@ -267,3 +213,34 @@ function user_changed( user_email, is_admin ) {
$(".admin-only").hide();
}
}
+
+// Masthead dropdown menus
+$(function() {
+ var $dropdowns = $("#masthead ul.nav > li.dropdown > .dropdown-menu");
+ $("body").on( "click.nav_popups", function( e ) {
+ $dropdowns.hide();
+ $("#DD-helper").hide();
+ // If the target is in the menu, treat normally
+ if ( $(e.target).closest( "#masthead ul.nav > li.dropdown > .dropdown-menu" ).length ) {
+ return;
+ }
+ // Otherwise, was the click in a tab
+ var $clicked = $(e.target).closest( "#masthead ul.nav > li.dropdown" );
+ if ( $clicked.length ) {
+ $("#DD-helper").show();
+ $clicked.children( ".dropdown-menu" ).show();
+ e.preventDefault();
+ }
+ });
+});
+
+// Exports
+exports.ensure_dd_helper = ensure_dd_helper;
+exports.Panel = Panel;
+exports.hide_modal = hide_modal;
+exports.show_modal = show_modal;
+exports.show_message = show_message;
+exports.show_in_overlay = show_in_overlay;
+exports.user_changed = user_changed;
+
+}( window, window.jQuery );
diff --git a/templates/base_panels.mako b/templates/base_panels.mako
index ccd2021c52b..2588f381c85 100644
--- a/templates/base_panels.mako
+++ b/templates/base_panels.mako
@@ -28,10 +28,10 @@
}
#center {
%if not self.has_left_panel:
- left: 0;
+ left: 0 !important;
%endif
%if not self.has_right_panel:
- right: 0;
+ right: 0 !important;
%endif
}
%if self.message_box_visible:
@@ -64,14 +64,14 @@
ensure_dd_helper();
%if self.has_left_panel:
- var lp = make_left_panel( $("#left"), $("#center"), $("#left-border" ) );
+ var lp = new Panel( { panel: $("#left"), center: $("#center"), drag: $("#left > .unified-panel-footer > .drag" ), toggle: $("#left > .unified-panel-footer > .collapse" ) } );
force_left_panel = lp.force_panel;
%endif
%if self.has_right_panel:
- var rp = make_right_panel( $("#right"), $("#center"), $("#right-border" ) );
- handle_minwidth_hint = rp.handle_minwidth_hint;
- force_right_panel = rp.force_panel;
+ var rp = new Panel( { panel: $("#right"), center: $("#center"), drag: $("#right > .unified-panel-footer > .drag" ), toggle: $("#right > .unified-panel-footer > .collapse" ), right: true } );
+ window.handle_minwidth_hint = function( x ) { console.log( "hint", x ); rp.handle_minwidth_hint( x ) };
+ force_right_panel = function( x ) { rp.force_panel( x ) };
%endif
@@ -172,28 +172,26 @@
%endif
>
##
-
+
## Need a table here for centering in IE6
-
+
- ${self.masthead()}
+
diff --git a/templates/root/history.mako b/templates/root/history.mako
index 3d5fbbc87e8..fac8e63eb5c 100644
--- a/templates/root/history.mako
+++ b/templates/root/history.mako
@@ -1,7 +1,7 @@
<%namespace file="/message.mako" import="render_msg" />
<% _=n_ %>
-
+
@@ -467,6 +467,7 @@ div.form-row {
+
%endif
-
-
+
%if show_deleted:
@@ -568,6 +568,7 @@ div.form-row {
%else:
## Render requested datasets, ordered from newest to oldest
+
%for data in reversed( datasets ):
%if data.visible or show_hidden:
@@ -575,6 +576,7 @@ div.form-row {
%endif
%endfor
+ })