Page MenuHomePhabricator

Special:CargoQuery autocompletion appearance should be standardized
Closed, ResolvedPublic

Description

In the Cargo extension's Special:CargoQuery page, the colors and font sizes in the autocompletion dropdown for "Table(s)" and "Field(s)" are pretty unusual. They should be changed to look as close as possible to the colors and sizes in standard MediaWiki, like the dropdown in the search bar.

Event Timeline

Hello @Yaron_Koren I am trying see the auto completion feature in action, so I can adjust the colors and font sizes as necessary, typing random table and field name does not show any dropdown though, please is there another way to see the auto-completion dropdown? are there any fields or tables you can suggest I type in to see the drop down?

dropdown.png (630×1 px, 62 KB)

Also would you like to change the Font type/Size of the Label Text? as well as the color of the Submit button to be closer to the defaults in mediawiki like below?

Screenshot from 2020-02-09 07-39-33.png (454×852 px, 26 KB)

You need to create at least one Cargo table in order to see the autocompletion in effect.

And it might make sense to change some of the form display, but that's a separate issue (and a separate extension).

@Yaron_Koren When I click "Create data table" in template, it throws the following error:

error.png (469×1 px, 114 KB)

Can you please help me out with this.

Ooh, sorry about that! You found a bug that got into the code a few weeks ago. I checked in a fix for it earlier today. If you get the latest code, this will hopefully work.

@Yaron_Koren I went through the code and stylesheets and think the class "ui-state-focus" is creating the issue. For skin Vector it is present in :
https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/e19f6da3e09f565cba7ff6189618c6d9d14d42a9/skinStyles/jquery.ui/jquery.ui.theme.css
After removing "ui-state-focus",it looks something like this.

image.png (531×1 px, 57 KB)

The main problem is if we hover any of these links new class "ui-state-focus" is added to <a> . So if we stop that it would work fine.
Can you guide me further with the issue and if I may have missed something?
Thank you.

That's good to know! Well, this needs to be fixed within the Cargo code. So either the class should be removed, or, if that's not possible, there should be local CSS added within Cargo to override the CSS being set for that class.

@Yaron_Koren I made following two additions:
.ui-state-focus{

border: none!important;
background: #2a4b8d!important;
color: #fff!important;
margin:0px!important;

}

.ui-menu .ui-menu-item a {

color:#000;

}
to the file resources/Cargo.css but when I check git status or git diff, it does not show these changes.
Please help me with this so that I can push the code for review.

@Sahajsk: Please follow https://www.mediawiki.org/wiki/Gerrit/Tutorial and explain at which specific exact point in that tutorial you are, which exact commands you use, which exact output you get. Thanks.

Thanks @Aklapper I just got the issue resolved. I was in the core directory instead of cargo directory.

Change 574163 had a related patch set uploaded (by Sahajsk; owner: Sahajsk):
[mediawiki/extensions/Cargo@master] Cargo: Make Special:CargoQuery autocompletion appearance as standard MediaWiki

https://gerrit.wikimedia.org/r/574163

Change 574163 merged by jenkins-bot:
[mediawiki/extensions/Cargo@master] Cargo: Make Special:CargoQuery autocompletion appearance as standard MediaWiki

https://gerrit.wikimedia.org/r/574163

Yaron_Koren claimed this task.