diff --git a/static/images/fugue/arrow-resize-090-bw.png b/static/images/fugue/arrow-resize-090-bw.png new file mode 100644 index 00000000000..1bb4022b030 Binary files /dev/null and b/static/images/fugue/arrow-resize-090-bw.png differ diff --git a/static/images/fugue/arrow-resize-090.png b/static/images/fugue/arrow-resize-090.png new file mode 100755 index 00000000000..dcfa5ab5364 Binary files /dev/null and b/static/images/fugue/arrow-resize-090.png differ diff --git a/static/images/fugue/layer-transparent-bw.png b/static/images/fugue/layer-transparent-bw.png new file mode 100644 index 00000000000..5adcf453fe9 Binary files /dev/null and b/static/images/fugue/layer-transparent-bw.png differ diff --git a/static/images/fugue/layer-transparent.png b/static/images/fugue/layer-transparent.png new file mode 100755 index 00000000000..40cbb90e35d Binary files /dev/null and b/static/images/fugue/layer-transparent.png differ diff --git a/static/june_2007_style/blue/trackster.css b/static/june_2007_style/blue/trackster.css index f175fb5cdbc..47b38c87f98 100644 --- a/static/june_2007_style/blue/trackster.css +++ b/static/june_2007_style/blue/trackster.css @@ -44,19 +44,19 @@ input{font:10px verdana;} .dynamic-tool,.filters{margin-left:0.25em;padding-bottom:0.5em;} .dynamic-tool{width:410px;} -.filters > .sliders,.display-controls{float:left;margin:1em;} -.sliders{width:410px;} -.display-controls{border-left:solid 2px #DDDDDD;padding-left:1em -} -.filter-row { - margin-top:0.4em;} -.slider-row{margin-left:1em;} -.elt-label{float:left;font-weight:bold;margin-right:1em;} -.slider{float:right;width:200px;position:relative;} +.filters{float:left;margin:1em;width:60%;position:relative;} +.display-controls{float:left;margin-left:1em;} +.slider-row{margin-left:1em;height:16px;} +.elt-label{float:left;width:20%;font-weight:bold;margin-right:1em;} +.slider{float:left;width:40%;position:relative;padding-top:2px;} .tool-name{font-size:110%;font-weight:bold;} .param-row{margin-top:0.2em;margin-left:1em;} .param-label{float:left;font-weight:bold;padding-top:0.2em;} .menu-button{margin:0px 4px 0px 4px;} +.layer-transparent{background:transparent url(../images/fugue/layer-transparent-bw.png) no-repeat;} +.layer-transparent.active{background:transparent url(../images/fugue/layer-transparent.png) no-repeat;} +.arrow-resize-090{background:transparent url(../images/fugue/arrow-resize-090-bw.png) no-repeat;} +.arrow-resize-090.active{background:transparent url(../images/fugue/arrow-resize-090.png) no-repeat;} .layers-stack{background:transparent url(../images/fugue/layers-stack-bw.png) no-repeat;} .layers-stack:hover{background:transparent url(../images/fugue/layers-stack.png) no-repeat;} .chevron-expand{background:transparent url(../images/fugue/chevron-expand-bw.png) no-repeat;} @@ -92,4 +92,4 @@ input{font:10px verdana;} .intro{padding:1em;} .intro > .action-button{background-color:#CCC;padding:1em;} .feature-popup{position:absolute;z-index:1000;padding:5px;font-size:10px;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);background-position:top center;} -.feature-popup-inner{padding:5px 8px 4px 8px;background-color:black;color:white;} +.feature-popup-inner{padding:5px 8px 4px 8px;background-color:black;color:white;} \ No newline at end of file diff --git a/static/june_2007_style/trackster.css.tmpl b/static/june_2007_style/trackster.css.tmpl index 672ca6ec490..6dff924d0b5 100644 --- a/static/june_2007_style/trackster.css.tmpl +++ b/static/june_2007_style/trackster.css.tmpl @@ -255,32 +255,31 @@ input { .dynamic-tool { width:410px; } -.filters > .sliders, .display-controls { +.filters { float: left; margin: 1em; -} -.sliders{ - width: 410px; + width: 60%; + position:relative; } .display-controls { - border-left: solid 2px #DDDDDD; - padding-left: 1em -} -.filter-row { - margin-top:0.4em; + float: left; + margin-left: 1em; } .slider-row { margin-left: 1em; + height: 16px; } .elt-label { float: left; + width: 20%; font-weight: bold; margin-right: 1em; } .slider { - float: right; - width: 200px; + float: left; + width: 40%; position: relative; + padding-top:2px; } .tool-name { font-size: 110%; @@ -298,6 +297,18 @@ input { .menu-button { margin: 0px 4px 0px 4px; } +.layer-transparent { + background: transparent url(../images/fugue/layer-transparent-bw.png) no-repeat; +} +.layer-transparent.active { + background: transparent url(../images/fugue/layer-transparent.png) no-repeat; +} +.arrow-resize-090 { + background: transparent url(../images/fugue/arrow-resize-090-bw.png) no-repeat; +} +.arrow-resize-090.active { + background: transparent url(../images/fugue/arrow-resize-090.png) no-repeat; +} .layers-stack { background: transparent url(../images/fugue/layers-stack-bw.png) no-repeat; } diff --git a/static/scripts/trackster.js b/static/scripts/trackster.js index 9aa9c0bdb6b..2cc088934bb 100644 --- a/static/scripts/trackster.js +++ b/static/scripts/trackster.js @@ -153,6 +153,15 @@ var get_random_color = function(colors) { return '#' + ( 0x1000000 + new_color ).toString(16).substr(1,6); }; +/** + * Creates an action icon. + */ +var create_action_icon = function(title, css_class, on_click_fn) { + return $("").attr("href", "javascript:void(0);").attr("title", title) + .addClass("icon-button").addClass(css_class).tipsy( {gravity: 's'} ) + .click(on_click_fn); +}; + // Encapsulate -- anything to be availabe outside this block is added to exports var trackster_module = function(require, exports) { @@ -2100,19 +2109,18 @@ var FiltersManager = function(track, filters_list) { }); // - // Create sliders div. + // Create sliders. // - var sliders_div = $("
").addClass("sliders").appendTo(this.parent_div); var manager = this; $.each(this.filters, function(index, filter) { - filter.container = $("
").addClass("filter-row slider-row").appendTo(sliders_div); + filter.container = $("
").addClass("filter-row slider-row").appendTo(manager.parent_div); // Set up filter label (name, values). var filter_label = $("
").addClass("elt-label").appendTo(filter.container) var name_span = $("").addClass("slider-name").text(filter.name + " ").appendTo(filter_label); var values_span = $(""); var values_span_container = $("").addClass("slider-value").appendTo(filter_label).append("[").append(values_span).append("]"); - + // Set up slider for filter. var slider_div = $("
").addClass("slider").appendTo(filter.container); filter.control_element = $("
").attr("id", filter.name + "-filter-control").appendTo(slider_div); @@ -2142,59 +2150,71 @@ var FiltersManager = function(track, filters_list) { // Enable users to edit slider values via text box. edit_slider_values(values_span_container, values_span, filter.control_element); + // Set up filter display controls. + var + display_controls_div = $("
").addClass("display-controls").appendTo(filter.container), + transparency_icon = create_action_icon("Use filter for data transparency", "layer-transparent", + function() { + if (manager.alpha_filter !== filter) { + // Setting this filter as the alpha filter. + manager.alpha_filter = filter; + // Update UI for new filter. + $(".layer-transparent").removeClass("active").hide(); + transparency_icon.addClass("active").show(); + } + else { + // Clearing filter as alpha filter. + manager.alpha_filter = null; + transparency_icon.removeClass("active"); + } + manager.track.request_draw(true, true); + } ) + .appendTo(display_controls_div).hide(), + height_icon = create_action_icon("Use filter for data height", "arrow-resize-090", + function() { + if (manager.height_filter !== filter) { + // Setting this filter as the height filter. + manager.height_filter = filter; + // Update UI for new filter. + $(".arrow-resize-090").removeClass("active").hide(); + height_icon.addClass("active").show(); + } + else { + // Clearing filter as alpha filter. + manager.height_filter = null; + height_icon.removeClass("active"); + } + manager.track.request_draw(true, true); + } ) + .appendTo(display_controls_div).hide(); + + filter.container.hover( function() { + transparency_icon.show(); + height_icon.show(); + }, + function() { + if (manager.alpha_filter !== filter) { + transparency_icon.hide(); + } + if (manager.height_filter !== filter) { + height_icon.hide(); + } + } ); + // Add to clear floating layout. $("
").appendTo(filter.container); }); // Add button to filter complete dataset. if (this.filters.length !== 0) { - var run_buttons_row = $("
").addClass("param-row").appendTo(sliders_div); + var run_buttons_row = $("
").addClass("param-row").appendTo(this.parent_div); var run_on_dataset_button = $("").attr("value", "Run on complete dataset").appendTo(run_buttons_row); var filter_manager = this; run_on_dataset_button.click( function() { filter_manager.run_on_dataset(); }); } - - // - // Create filtering display controls. - // - var - display_controls_div = $("
").addClass("display-controls").appendTo(this.parent_div), - formatting_div, - header_text, - select, - // TODO: find better way to specify and change control filters. - filter_controls_dict = { - "Transparency": function(new_filter) { manager.alpha_filter = new_filter; }, - "Height" : function(new_filter) { manager.height_filter = new_filter; } - }; - $.each(filter_controls_dict, function(control_name, filter) { - // Display name and select option. - formatting_div = $("
").addClass("filter-row").appendTo(display_controls_div), - header_text = $("").addClass("elt-label").text(control_name + ":").appendTo(formatting_div), - select = $("