[MediaWiki-commits] [Gerrit] mediawiki...AdvancedSearch[master]: SearchPreview: Show truncated search values
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/370642 )
Change subject: SearchPreview: Show truncated search values
..
SearchPreview: Show truncated search values
Search values are, to a point, shown inside search preview.
Complex values (multiple, with comparison operator) get formatted.
Full formatted search value is shown in title on mouse-over.
Also removes draggable behavior from preview pills.
Issue: T171756
Change-Id: Ia7adaba829e958f597cf33684671405836078908
---
M AdvancedSearch.hooks.php
M modules/ext.advancedSearch.css
M modules/ext.advancedSearch.init.js
M modules/ui/ext.advancedSearch.ExpandablePane.js
M modules/ui/ext.advancedSearch.SearchPreview.js
M package-lock.json
M package.json
A tests/qunit/.eslintrc.json
A tests/qunit/ui/SearchPreview.test.js
9 files changed, 342 insertions(+), 55 deletions(-)
Approvals:
Gabriel Birke: Looks good to me, approved
jenkins-bot: Verified
Jeroen De Dauw: Looks good to me, but someone else must approve
diff --git a/AdvancedSearch.hooks.php b/AdvancedSearch.hooks.php
index a6214cc..98c6c95 100644
--- a/AdvancedSearch.hooks.php
+++ b/AdvancedSearch.hooks.php
@@ -78,11 +78,13 @@
'scripts' => [
'tests/qunit/ui/NamespaceFilters.test.js',
'tests/qunit/ui/NamespacePresets.test.js',
+ 'tests/qunit/ui/SearchPreview.test.js',
'tests/qunit/dm/SearchModel.test.js'
],
'dependencies' => [
'ext.advancedSearch.ui.NamespaceFilters',
'ext.advancedSearch.ui.NamespacePresets',
+ 'ext.advancedSearch.ui.SearchPreview',
'ext.advancedSearch.dm.SearchModel',
'oojs-ui'
],
diff --git a/modules/ext.advancedSearch.css b/modules/ext.advancedSearch.css
index 1973f21..57d7265 100644
--- a/modules/ext.advancedSearch.css
+++ b/modules/ext.advancedSearch.css
@@ -1,3 +1,31 @@
+.mw-advancedSearch-searchPreview-label {
+ font-weight: bold;
+ margin-right: 0.3125em;
+}
+
+.mw-advancedSearch-searchPreview-previewPill {
+ display: inline-flex;
+ display: -ms-inline-flexbox;
+ flex-flow: row nowrap;
+ -ms-flex-direction: row;
+ flex: 0 1 auto;
+}
+
+.mw-advancedSearch-searchPreview-previewPill > .oo-ui-labelElement-label {
+ order: 1;
+ -ms-flex-order: 1;
+}
+
+.mw-advancedSearch-searchPreview-previewPill > .content {
+ display: inline-block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 5em;
+ order: 2;
+ -ms-flex-order: 2;
+ padding-left: 0.3em;
+}
+
.mw-advancedSearch-fieldContainer {
background: linear-gradient( rgba( 0, 0, 0, 0.1 ), #fff 0.5em );
border: solid 1px #c8ccd1;
@@ -69,15 +97,6 @@
top: 0;
height: 100%;
right: 0.9375em;
-}
-
-.mw-advancedSearch-searchPreview-label {
- font-weight: bold;
- margin-right: 0.3125em;
-}
-
-.mw-advancedSearch-previewLabel.oo-ui.widget-enabled {
- background: #fff;
}
.mw-advancedSearch-optionTags {
diff --git a/modules/ext.advancedSearch.init.js
b/modules/ext.advancedSearch.init.js
index 26ceee5..fc44d9c 100644
--- a/modules/ext.advancedSearch.init.js
+++ b/modules/ext.advancedSearch.init.js
@@ -389,20 +389,11 @@
$allOptions.append( optionSets[ group ].$element );
}
- function getPreviewOptions() {
- var previewOptions = {};
- advancedOptions.forEach( function ( option ) {
- previewOptions[ option.id ] = {
- formatter: option.formatter,
- label: mw.msg( 'advancedsearch-field-' +
option.id )
- };
- } );
- return previewOptions;
- }
-
var searchPreview = new mw.libs.advancedSearch.ui.SearchPreview( state,
{
label: mw.msg( 'advancedsearch-options-pane-head' ),
- previewOptions: getPreviewOptions()
+ previewOptions: $.map( advancedOptions, function ( option ) {
+ return option.id;
+ } )
} );
var pane = new mw.libs.advancedSearch.ui.ExpandablePane( {
diff --git a/modules/ui/ext.advancedSearch.ExpandablePane.js
b/modules/ui/ext.advancedSearch.ExpandablePane.js
index e3d5938..074948b 100644
--- a/modules/ui/ext.advancedSearch.ExpandablePane.js
+++ b/modules/ui/ext.advancedSearch.ExpandablePane.js
@@ -50,27 +50,6 @@
this.$dependentPane.append( config.$paneContent );
}
- // TODO Move the following code to a separate widget
- /*
-
[MediaWiki-commits] [Gerrit] mediawiki...AdvancedSearch[master]: SearchPreview: Show truncated search values
Pablo Grass (WMDE) has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/370642 )
Change subject: SearchPreview: Show truncated search values
..
SearchPreview: Show truncated search values
Search values are, to a point, shown inside search preview.
Complex values (multiple, with comparison operator) get fromatted.
Full formatted search value is shown in title on mouse-over.
Also removes draggable behavior from preview pills.
Issue: T171756
Change-Id: Ia7adaba829e958f597cf33684671405836078908
---
M AdvancedSearch.hooks.php
M modules/ext.advancedSearch.css
M modules/ui/ext.advancedSearch.ExpandablePane.js
M modules/ui/ext.advancedSearch.SearchPreview.js
M package-lock.json
M package.json
A tests/qunit/.eslintrc.json
A tests/qunit/ui/SearchPreview.test.js
8 files changed, 309 insertions(+), 41 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/AdvancedSearch
refs/changes/42/370642/1
diff --git a/AdvancedSearch.hooks.php b/AdvancedSearch.hooks.php
index a6214cc..98c6c95 100644
--- a/AdvancedSearch.hooks.php
+++ b/AdvancedSearch.hooks.php
@@ -78,11 +78,13 @@
'scripts' => [
'tests/qunit/ui/NamespaceFilters.test.js',
'tests/qunit/ui/NamespacePresets.test.js',
+ 'tests/qunit/ui/SearchPreview.test.js',
'tests/qunit/dm/SearchModel.test.js'
],
'dependencies' => [
'ext.advancedSearch.ui.NamespaceFilters',
'ext.advancedSearch.ui.NamespacePresets',
+ 'ext.advancedSearch.ui.SearchPreview',
'ext.advancedSearch.dm.SearchModel',
'oojs-ui'
],
diff --git a/modules/ext.advancedSearch.css b/modules/ext.advancedSearch.css
index 1973f21..57d7265 100644
--- a/modules/ext.advancedSearch.css
+++ b/modules/ext.advancedSearch.css
@@ -1,3 +1,31 @@
+.mw-advancedSearch-searchPreview-label {
+ font-weight: bold;
+ margin-right: 0.3125em;
+}
+
+.mw-advancedSearch-searchPreview-previewPill {
+ display: inline-flex;
+ display: -ms-inline-flexbox;
+ flex-flow: row nowrap;
+ -ms-flex-direction: row;
+ flex: 0 1 auto;
+}
+
+.mw-advancedSearch-searchPreview-previewPill > .oo-ui-labelElement-label {
+ order: 1;
+ -ms-flex-order: 1;
+}
+
+.mw-advancedSearch-searchPreview-previewPill > .content {
+ display: inline-block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: 5em;
+ order: 2;
+ -ms-flex-order: 2;
+ padding-left: 0.3em;
+}
+
.mw-advancedSearch-fieldContainer {
background: linear-gradient( rgba( 0, 0, 0, 0.1 ), #fff 0.5em );
border: solid 1px #c8ccd1;
@@ -69,15 +97,6 @@
top: 0;
height: 100%;
right: 0.9375em;
-}
-
-.mw-advancedSearch-searchPreview-label {
- font-weight: bold;
- margin-right: 0.3125em;
-}
-
-.mw-advancedSearch-previewLabel.oo-ui.widget-enabled {
- background: #fff;
}
.mw-advancedSearch-optionTags {
diff --git a/modules/ui/ext.advancedSearch.ExpandablePane.js
b/modules/ui/ext.advancedSearch.ExpandablePane.js
index e3d5938..074948b 100644
--- a/modules/ui/ext.advancedSearch.ExpandablePane.js
+++ b/modules/ui/ext.advancedSearch.ExpandablePane.js
@@ -50,27 +50,6 @@
this.$dependentPane.append( config.$paneContent );
}
- // TODO Move the following code to a separate widget
- /*
- var $labelContainer = $( 'Advanced
Parameters' );
- $bar.append( $labelContainer );
-
- var dummyDemoWidgets = [
- new OO.ui.TagItemWidget( { label: 'First demo label:
foo' } ),
- new OO.ui.TagItemWidget( { label: 'Second demo label:
bar' } ),
- new OO.ui.TagItemWidget( { label: 'Third demo label:
baz' } ),
- new OO.ui.TagItemWidget( { label: 'Fourth demo label:
quux' } ),
- new OO.ui.TagItemWidget( { label: 'Fivth demo label:
quuz' } )
- ];
-
- $.each( dummyDemoWidgets, function ( _, w ) {
- // TODO Create custom TagItemWidget classes that have
special classes (for styling) and disable clicking
- w.$element.on( 'click', function () { return false; } );
- w.$element.addClass( 'mw-advancedSearch-previewLabel' );
- $labelContainer.append( w.$element );
- } );
- */
-
this.$btn.addClass( 'oo-ui-buttonElement-framed' );
this.$element.addClass( 'mw-advancedSearch-expandablePane' );
this.$el
