nettika/geary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Work around rendering quote controller buttons, enable expanding quotes.

Browse source 
* ui/conversation-web-view.js (ConversationPageState): Add
  ::updatePreferredHeight method to waitch for and update the web view's
  preferred height when it changes.
  (ConversationPageState::createControllableQuotes): Create quote
  controllers using the DOM so we can easily attach click handlers to
  it. Attach handlers to toggle the hide class and updated the preferred
  height.

* ui/client-web-view.js (PageState): Add ::getPreferredHeight method, use
  that to determine the preferred height of the page.

* ui/conversation-web-view.css: Import GTK+4 Adwaita button CSS to work
  around WebKitGTK+ Bug 166648. Tweak quote style a bit.
This commit is contained in:
Michael James Gratton 2017-01-04 01:10:38 +11:00
parent 5e114cfcac
commit 8864e2b7a7
3 changed files with 90 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

61
ui/conversation-web-view.js
View file

@ -14,6 +14,7 @@ var ConversationPageState = function() {
};
ConversationPageState.QUOTE_CONTAINER_CLASS = "geary-quote-container";
ConversationPageState.QUOTE_HIDE_CLASS = "geary-hide";
ConversationPageState.prototype = {
__proto__: PageState.prototype,
@ -39,6 +40,20 @@ ConversationPageState.prototype = {
document.documentElement.dir = "auto";
}
},
/**
* Starts looking for changes to the page's height.
*/
updatePreferredHeight: function() {
let height = this.getPreferredHeight();
let state = this;
let timeoutId = window.setInterval(function() {
let newHeight = state.getPreferredHeight();
if (height != newHeight) {
state.preferredHeightChanged();
window.clearTimeout(timeoutId);
}
}, 50);
},
/**
* Add top level blockquotes to hide/show container.
*/
@ -58,26 +73,48 @@ ConversationPageState.prototype = {
);
// Only make it controllable if the quote is tall enough
if (blockquote.offsetHeight > 60) {
if (blockquote.offsetHeight > 120) {
quoteContainer.classList.add("geary-controllable");
quoteContainer.classList.add("geary-hide");
quoteContainer.classList.add(
ConversationPageState.QUOTE_HIDE_CLASS
);
}
// New lines are preserved within blockquotes, so this
// string needs to be new-line free.
quoteContainer.innerHTML =
"<div class=\"geary-shower\">" +
"<input type=\"button\" value=\"▼ ▼ ▼\" />" +
"</div>" +
"<div class=\"geary-hider\">" +
"<input type=\"button\" value=\"▲ ▲ ▲\" />" +
"</div>";
var quoteDiv = document.createElement("DIV");
let script = this;
function newControllerButton(styleClass, text) {
let button = document.createElement("BUTTON");
button.classList.add("geary-button");
button.type = "button";
button.onclick = function() {
quoteContainer.classList.toggle(
ConversationPageState.QUOTE_HIDE_CLASS
);
script.updatePreferredHeight();
};
button.appendChild(document.createTextNode(text));
let container = document.createElement("DIV");
container.classList.add(styleClass);
container.appendChild(button);
return container;
}
quoteContainer.appendChild(newControllerButton(
"geary-shower", "▼ ▼ ▼"
));
quoteContainer.appendChild(newControllerButton(
"geary-hider", "▲ ▲ ▲"
));
let quoteDiv = document.createElement("DIV");
quoteDiv.classList.add("geary-quote");
quoteDiv.appendChild(blockquote);
quoteContainer.appendChild(quoteDiv);
parent.insertBefore(quoteContainer, nextSibling);
this.updatePreferredHeight();
}
}
},