First implementation of vocabulary search bar Skosmos 3 #1551
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## skosmos-3 #1551 +/- ##
============================================
Coverage 70.53% 70.53%
Complexity 1643 1643
============================================
Files 32 32
Lines 4313 4313
============================================
Hits 3042 3042
Misses 1271 1271 ☔ View full report in Codecov by Sentry. |
src/view/scripts.inc
Outdated
| return new bootstrap.Popover(popoverTriggerEl) | ||
| }) | ||
| </script> | ||
|
|
There was a problem hiding this comment.
This is for the search tips to work as a clickable popover element in Bootstrap. I did not include the search tips box in this PR yet.
There was a problem hiding this comment.
Let's remove it from this PR as it's not yet needed
| cy.wrap(optionValue).should('eq', expectedLanguage); | ||
| }); | ||
| }) | ||
| */ |
There was a problem hiding this comment.
Generally, this kind of commented test should not be in the PR. In this case, I left the WIP in here in case I cannot attend during the rest of the sprint, and somebody wants to have a go with writin the test.
There was a problem hiding this comment.
Looks like a good start.
Regarding the layout/style, this doesn't follow the design exactly. The border is too dark, and I don't think we want rounded corners in the dropdown menu:
You mentioned that "Search field can be emptied by clicking X" is implemented, but I didn't see any such feature.
Here are problems that should either be fixed in this PR or added to the list of requirements in the issue #1514 so that they can be addressed later:
- border color should follow design spec
- dropdown style should match design expectations (no rounded borders)
- language names should be shown, not language codes
- in general, UI texts should be translated (currently a problem for all Vue components)
|
It seems I need to adjust the behaviour of the search form. Chrome looks like this:
Apparently the rendering of the options-menu of the form is up to the browser ( -_- ), and different browsers yield different results. It could be that the menu should intead be implemented in a more ad-hoc manner to get more control over the visuals. Same is probably true for the reset text 'x' icon. I'll investigate. |
…ject in cypress, though.
osma
force-pushed
the
issue1514-search-bar
branch
from
0fc277c to
8691d10
Compare
osma
changed the title
|
Kudos, SonarCloud Quality Gate passed!
|
Reasons for creating this PR
Draft PR for search field
Link to relevant issue(s), if any
Description of the changes in this PR
This PR implements the following from the linked issue:
1.1 Twig-templates, Bootstrap-layout and CSS
1.2 Search field can be emptied by clicking X
1.3 Search can be executed with a chosen content language, or with all languages
1.3.1 Cypress tests for this
2.2 Contents for the language menu are defined in the SKOSMOS JS-object
2.2.1 Cypress tests for this2.3 All UI text is in English
4.1 Search field can be operated with keyboard
4.3 Language menu, search field, autocomplete list and search button are structured together
Known problems or uncertainties in this PR
This PR does not implement:
Checklist
.sr-onlyclass, color contrast)