Lucas Werkmeister (WMDE) has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/364243 )
Change subject: [WIP] Make query helper and editor resizable ...................................................................... [WIP] Make query helper and editor resizable A splitter is added between query helper and query editor; dragging the splitter resizes the query helper, giving it more or less space relative to the query editor. To achieve this, the main query form is changed to use flexbox instead of a table. jQuery UI is used to make the query helper resizable. The opacity animation on the query helper is removed, since it doesn’t make much sense when the query helper isn’t a floating panel anymore. Open problems: - The splitter’s style is still just copied from [1] and should be improved. What do we use for the background? - This doesn’t actually resize the query editor; if you make the query helper large enough, the query editor will start to move beyond the screen. - The structure isn’t very well thought-out. Do we need a #query-main? Do we need a .query-editor-container? [1]: https://codepen.io/rstrahl/pen/eJZQej Change-Id: Ia76bed3b4447729923abda2f12cc80f5e514e70c --- M index.html M package.json M style.css M wikibase/queryService/ui/App.js 4 files changed, 67 insertions(+), 31 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui refs/changes/43/364243/1 diff --git a/index.html b/index.html index 9ea6267..b8998df 100644 --- a/index.html +++ b/index.html @@ -99,9 +99,9 @@ <div id="query-box"> <form id="query-form" action="https://query.wikidata.org/bigdata/namespace/wdq/sparql";> - <table> - <tr> - <td class="toolbar toolbar-top"> + <div id="query-main"> + <div class="toolbar"> + <div class="toolbar-top"> <div> <a class="btn query-helper-trigger" target="_blank" title="Show query explanation"> <span class="fa fa-info-circle" aria-hidden="true"></span></a> </div> @@ -136,34 +136,31 @@ <div> <a href="#" class="btn shareQuery shortUrlTrigger query" target="_blank" data-i18n="[title]wdqs-app-shorturl-page-title" data-toggle="popover"> <span class="fa fa-link" aria-hidden="true"></span></a> </div> - </td> - <td rowspan="2"> - <div class="query-helper"> - <div class="panel panel-info"> - <div class="panel-heading"> - <strong data-i18n="wdqs-app-help-queryhelper"></strong> <a target="_blank" rel="noopener" href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Query_Helper";><span - class="glyphicon glyphicon-question-sign" - ></span></a> - <button type="button" class="close" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="panel-body"></div> - </div> - </div> - </td> - <td rowspan="2"><textarea class="queryEditor" name="query" data-i18n="[placeholder]wdqs-app-editor-placeholder" placeholder="(Input a SPARQL query or choose a query example)"></textarea></td> - </tr> - <tr> - <td class="toolbar toolbar-bottom"> + </div> + <div class="toolbar-bottom"> <div> <button type="submit" class="btn btn-info" id="execute-button" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-run-title"> <span class="fa fa-play" aria-hidden="true"></span> </button> </div> - </td> - </tr> - </table> + </div> + </div> + <div class="query-helper"> + <div class="panel-heading"> + <strong data-i18n="wdqs-app-help-queryhelper"></strong> <a target="_blank" rel="noopener" href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Query_Helper";><span + class="glyphicon glyphicon-question-sign" + ></span></a> + <button type="button" class="close" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="panel-body"></div> + </div> + <div class="splitter ui-resizable-handle ui-resizable-e ui-resizable-w"></div> + <div class="query-editor-container"> + <textarea class="queryEditor" name="query" data-i18n="[placeholder]wdqs-app-editor-placeholder" placeholder="(Input a SPARQL query or choose a query example)"></textarea> + </div> + </div> <div class="status navbar navbar-default"> <div class="navbar-left"> <span data-i18n="[html]wdqs-app-footer-help"></span> @@ -274,6 +271,7 @@ <!-- JS files --> <!-- build:js js/vendor.min.js --> <script src="node_modules/jquery/dist/jquery.js"></script> + <script src="node_modules/jquery-ui-dist/jquery-ui.js"></script> <script src="node_modules/underscore/underscore.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> <script src="node_modules/codemirror/lib/codemirror.js"></script> diff --git a/package.json b/package.json index 90e6659..72439bb 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "font-awesome": "^4.7.0", "jqcloud-npm": "^3.1.0", "jquery": "^3.2.1", + "jquery-ui-dist": "^1.12.1", "jquery.i18n": "git+https://github.com/wikimedia/jquery.i18n.git";, "jquery.uls": "git+https://github.com/wikimedia/jquery.uls.git";, "js-cookie": "^2.1.4", diff --git a/style.css b/style.css index d7baffe..5c8f65b 100644 --- a/style.css +++ b/style.css @@ -125,6 +125,17 @@ vertical-align: top; } +#query-main { + display: flex; + flex-direction: row; +} + +#query-main .toolbar { + flex-basis: 0; + display: flex; + flex-direction: column; +} + #query-box .toolbar { width: 1.5em; border-right: 1px solid #bce8f1; @@ -151,6 +162,22 @@ text-align: center; } +.query-helper { + flex: 0 0 auto; +} + +.query-editor-container { + flex: 1 1 auto; + width: 100%; +} + +.splitter { + flex: 0 0 auto; + width: 18px; + background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353; + cursor: col-resize; +} + /** Bootstrap Styles **/ diff --git a/wikibase/queryService/ui/App.js b/wikibase/queryService/ui/App.js index a9fda9f..713f052 100644 --- a/wikibase/queryService/ui/App.js +++ b/wikibase/queryService/ui/App.js @@ -124,6 +124,7 @@ this._initQuery(); this._initRdfNamespaces(); this._initHandlers(); + this._initResizable(); }; /** @@ -180,7 +181,6 @@ return; } - $( '.query-helper .panel-body' ).css( 'opacity', 0 ); self._drawQueryHelper(); }, 1500 ) ); } @@ -206,10 +206,6 @@ try { this._queryHelper.setQuery( this._editor.getValue() ); this._queryHelper.draw( $( '.query-helper .panel-body' ) ); - - $( '.query-helper .panel-body' ).animate( { - opacity: 1 - }, 1000 ); } catch ( e ) { window.console.error( e ); } @@ -531,6 +527,20 @@ /** * @private */ + SELF.prototype._initResizable = function() { + $( '.query-helper' ).resizable( { + handles: { e: $( '.splitter' ) }, + resizeHeight: false + } ); + $( '.query-editor-container' ).resizable( { + handles: { w: $( '.splitter' ) }, + resizeHeight: false + } ); + }; + + /** + * @private + */ SELF.prototype._handleQuerySubmit = function( e ) { var self = this; -- To view, visit https://gerrit.wikimedia.org/r/364243 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ia76bed3b4447729923abda2f12cc80f5e514e70c Gerrit-PatchSet: 1 Gerrit-Project: wikidata/query/gui Gerrit-Branch: master Gerrit-Owner: Lucas Werkmeister (WMDE) <lucas.werkmeis...@wikimedia.de> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
