Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Improve padding logic for updatemenus by rreusser · Pull Request #989 · plotly/plotly.js · GitHub
Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve padding logic for updatemenus by rreusser · Pull Request #989 · plotly/plotly.js · GitHub
Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve padding logic for updatemenus by rreusser · Pull Request #989 · plotly/plotly.js · GitHub
Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Improve padding logic for updatemenus by rreusser · Pull Request #989 · plotly/plotly.js · GitHub
Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve padding logic for updatemenus by rreusser · Pull Request #989 · plotly/plotly.js · GitHub
Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve padding logic for updatemenus by rreusser · Pull Request #989 · plotly/plotly.js · GitHub
Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Improve padding logic for updatemenus by rreusser · Pull Request #989 · plotly/plotly.js · GitHub
Skip to content

Improve padding logic for updatemenus - #989

Merged
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding
Sep 29, 2016
Merged

Improve padding logic for updatemenus#989
rreusser merged 2 commits into
masterfrom
fix-updatemenus-padding

Conversation

@rreusser

@rreusserrreusser commented Sep 28, 2016

Copy link
Copy Markdown
Contributor

See #985
cc @etpinard

This PR improves padding logic for updatemenus. It implements pad: {t, r, b, l} at the individual-updatemenu level. I didn't apply unit testing, but did beef up the image mock to really ensure that I've tested the permutations.

The general logic:

  1. After computing the minimum required size of the container in order to fit the content, it adds the padding onto each side.
  2. After expanding the padding, the anchor logic is applied.

The order of operations makes a slight difference, but the general concept is that this applies within the container first, then to the overall layout as expected. I think this is by far the most intuitive and easy way to accomplish this, and meets the need.

Unfortunately it's not that straightforward to document image mocks, and I'd rather not have (literally) sixty mocks to verify all aspects of the positioning, and I think it's best to avoid testing visual alignment in the unit tests.

So on that note, here's the improved mock with the anchor annotated in blue and padding annotated in red:

screen-shot-2016-09-28-at-17 22 49

@rreusser

Copy link
Copy Markdown
ContributorAuthor

Note that I did not set a minimum value: 0 for padding. Since we don't share the full generality of the html box model, I feel like negative padding could be a usefully obscure option to have available since we don't have pixel margins to worth with.

@rreusser

rreusser commented Sep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Relayout test to be added; battery is at 5% so will be up, but not right at the moment. Otherwise complete and reviewable.

@etpinardetpinard added the feature something new label Sep 28, 2016
@etpinardetpinard added this to the v1.18.0 milestone Sep 28, 2016

@etpinardetpinard left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rreusser this is looking great. Nice addition!

Ping me again once that relayout test is in.

var fontAttrs = require('../../plots/font_attributes');
var colorAttrs = require('../color/attributes');
var extendFlat = require('../../lib/extend').extendFlat;
var padAttrs = require('../../plots/pad_attributes');

@etpinardetpinardSep 28, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's where pad_attributes.js belongs at the moment, but I hate to see so many files pile up in the src/plots/ root.

Maybe we could add a src/plots/common/folder? or src/components/common/? or even a src/common/ for similar shared modules.

@rreusserrreusserSep 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Font attributes would probably go with it? At least internal reorg is easy refactoring (especially since static requires so that errors fail bundling), so can try to cut down on plots/ bit by bit (pun?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Font attributes would probably go with it?

yep, exactly.

so can try to cut down on plots/ bit by bit (pun?)

No action required in this PR. I just wanted to mention something I've been thinking about for a while now.

l: paddedWidth * ({right: 1, center: 0.5}[xanchor] || 0),
r: paddedWidth * ({left: 1, center: 0.5}[xanchor] || 0),
b: paddedHeight * ({top: 1, middle: 0.5}[yanchor] || 0),
t: paddedHeight * ({bottom: 1, middle: 0.5}[yanchor] || 0)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. That was easy. I love it!

@rreusser

Copy link
Copy Markdown
ContributorAuthor

@etpinard will do. Have run out of steam at the moment, but will aim to have it good to go first thing tomorrow.

@rreusser

Copy link
Copy Markdown
ContributorAuthor

ping @etpinard — added relayout tests that at least confirms a couple basic things about padding getting updated and making some sense.

@etpinard

Copy link
Copy Markdown
Contributor

This is working great. Thanks! 💃

@rreusser merge away

@etpinardetpinard mentioned this pull request Sep 29, 2016
@rreusser
rreusser merged commit fce36fa into masterSep 29, 2016
@rreusser
rreusser deleted the fix-updatemenus-padding branch September 29, 2016 16:24
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard