From 1a5c9f5b14c9f56d86806e5c8d3690f424a466b5 Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Fri, 30 Apr 2021 20:49:17 -0700 Subject: [PATCH 1/2] ENH: auto resize main legend on changing --- empress/support_files/css/empress.css | 7 +++++++ empress/support_files/js/empress.js | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/empress/support_files/css/empress.css b/empress/support_files/css/empress.css index 80543faec..a62be755d 100644 --- a/empress/support_files/css/empress.css +++ b/empress/support_files/css/empress.css @@ -594,6 +594,12 @@ p.side-header button:hover, /* The legend is resizable, thanks to resize: both; and overflow: auto. * See https://stackoverflow.com/a/61976603/10730311. + * + * The 0.1px bottom padding prevents an unnecessary vertical scrollbar + * that kept showing up when setting the legend's width/height back to + * their defaults ("") in empress.js. It seems like having a tiny bit + * of extra vertical space is needed to get rid of this. It's barely + * visible to the user so it shouldn't be a problem. */ #legend-main { margin: 20px; @@ -601,6 +607,7 @@ p.side-header button:hover, max-width: 33vw; min-height: 30px; max-height: 85vh; + padding-bottom: 0.1px; resize: both; overflow: auto; background-color: rgba(255, 255, 255, 0.5); diff --git a/empress/support_files/js/empress.js b/empress/support_files/js/empress.js index 4105bce38..a81f2592a 100644 --- a/empress/support_files/js/empress.js +++ b/empress/support_files/js/empress.js @@ -2633,6 +2633,12 @@ define([ * color, expressed in hex format. */ Empress.prototype.updateLegendCategorical = function (name, keyInfo) { + // Allow the legend to be resized back to whatever the default + // size will be, since manually resizing the legend sets a fixed + // width/height value. Setting the width/height to "" will cause the + // defaults to be used: https://stackoverflow.com/a/21457941 + document.getElementById("legend-main").style.width = ""; + document.getElementById("legend-main").style.height = ""; this._legend.addCategoricalKey(name, keyInfo); }; From 26f8202edd8eb4d2693639b548165f117fc4eecc Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Fri, 30 Apr 2021 20:57:32 -0700 Subject: [PATCH 2/2] MNT: move legend resizing to sep func so this'll play well w/ grad coloring --- empress/support_files/js/empress.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/empress/support_files/js/empress.js b/empress/support_files/js/empress.js index a81f2592a..873b6ae16 100644 --- a/empress/support_files/js/empress.js +++ b/empress/support_files/js/empress.js @@ -2620,6 +2620,20 @@ define([ this._legend.clear(); }; + /** + * Set the #legend-main width and height back to their defaults. + * + * This allows the legend to be resized back to whatever the default + * size will be, since manually resizing the legend sets a fixed + * width/height value. + */ + Empress.prototype.resizeLegend = function () { + // Setting CSS properties to "" causes the default values to be used: + // see https://stackoverflow.com/a/21457941. + document.getElementById("legend-main").style.width = ""; + document.getElementById("legend-main").style.height = ""; + }; + /** * Updates the legend based on a categorical color key. * @@ -2633,12 +2647,7 @@ define([ * color, expressed in hex format. */ Empress.prototype.updateLegendCategorical = function (name, keyInfo) { - // Allow the legend to be resized back to whatever the default - // size will be, since manually resizing the legend sets a fixed - // width/height value. Setting the width/height to "" will cause the - // defaults to be used: https://stackoverflow.com/a/21457941 - document.getElementById("legend-main").style.width = ""; - document.getElementById("legend-main").style.height = ""; + this.resizeLegend(); this._legend.addCategoricalKey(name, keyInfo); };