Lucas Werkmeister (WMDE) has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/366282 )
Change subject: Adapt query helper min-width to content
......................................................................
Adapt query helper min-width to content
The tables inside the query helper can grow wider than the query helper
itself, which looks ugly when the query helper is resized past a certain
point. Dynamically set its min-width to the maximum width of the tables
(plus their offset from the left side of the query helper) to account
for this.
Note that when we adjust the min-width after the query has been edited,
all entity selectors in the query helper are without label, so the
minimum width we derive can be too small. However, this is still better
than nothing. (A label cache might mitigate this.)
(There is apparently a CSS solution for this – min-width: fit-content –
but it’s highly experimental and not yet available in any browser
without prefix.)
Change-Id: I27bd4cc5eddfc6b9fa97bb255db8ba792d33af53
---
M wikibase/queryService/ui/App.js
1 file changed, 23 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui
refs/changes/82/366282/1
diff --git a/wikibase/queryService/ui/App.js b/wikibase/queryService/ui/App.js
index 1f05a2e..a1c8004 100644
--- a/wikibase/queryService/ui/App.js
+++ b/wikibase/queryService/ui/App.js
@@ -173,6 +173,7 @@
$( '.query-helper' ).resizable( {
handleSelector: '.splitter',
resizeHeight: false,
+ onDrag: this._updateQueryHelperMinWidth.bind( this ),
onDragEnd: this._updateQueryEditorSize.bind( this )
} );
@@ -213,6 +214,8 @@
try {
this._queryHelper.setQuery( this._editor.getValue() );
this._queryHelper.draw( $( '.query-helper .panel-body'
) );
+ $( '.query-helper' ).css( 'min-width', '' );
+ this._updateQueryHelperMinWidth(); // TODO also do this
after labels in the query helper have loaded
} catch ( e ) {
window.console.error( e );
}
@@ -221,6 +224,26 @@
/**
* @private
*/
+ SELF.prototype._updateQueryHelperMinWidth = function() {
+ var $queryHelper = $( '.query-helper' ),
+ $tables = $queryHelper.find( 'table' ),
+ tableWidth = _.max( _.map(
+ $tables,
+ function( e ) {
+ return $( e ).width();
+ }
+ ) );
+ if ( tableWidth > $queryHelper.width() ) {
+ $queryHelper.css(
+ 'min-width',
+ tableWidth + $tables.offset().left -
$queryHelper.offset().left
+ );
+ }
+ };
+
+ /**
+ * @private
+ */
SELF.prototype._updateQueryEditorSize = function() {
if ( this._editor ) {
// set CodeMirror width to container width determined
by Flex
--
To view, visit https://gerrit.wikimedia.org/r/366282
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I27bd4cc5eddfc6b9fa97bb255db8ba792d33af53
Gerrit-PatchSet: 1
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: Lucas Werkmeister (WMDE) <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
