Move the search out of the tabbar and make it an action throughout the app
Closed, ResolvedPublic3 Story Points

Description

We need to move the search out of the tabbar and serve it as an universal action on titlebar.

Here's a video showing the interaction
https://vid.me/4avT


  • Acceptance criteria

    As a user...

    Given I am on (home|saved|recent|article) view
    I can see a search button
    Given I can see a search button
    When I tap it
    Then my previous view becomes blurred
    And I'm presented with an active search field
    And I can see my recent searches
    Given I have successfully retrieved search results
    When I tap one
    The corresponding article is pushed on top of my current view

    Non-functional requirements

    • Send "search view" pywik log when Search is presented
    • Search field mirrors navigation bar resizing behavior when UI is vertically compact (i.e. landscape phone)
    • vertical separator appears/disappears w/ search field clear button
    • recent searches is displayed when either:
      • the search field is cleared via the clear button
      • the user manually deletes all the text
    • When an error occurs while fetching search results, the error is displayed
    • When you search for a term that yields a suggestion from the API (e.g. "appal" suggests "appeal")
      • the search suggestion pushes down the search results
      • tapping on the search suggestion clears current results and searches for the suggested term
    Nirzar created this task.Sep 18 2015, 6:09 PM
    Nirzar updated the task description. (Show Details)
    Nirzar raised the priority of this task from to Needs Triage.
    Nirzar assigned this task to Fjalapeno.
    Nirzar added a mock: M84: Search in iOS.
    Nirzar removed Fjalapeno as the assignee of this task.
    Nirzar set Security to None.
    Nirzar added subscribers: BGerstle-WMF, Aklapper, MBinder_WMF and 5 others.

    @KHammerstein please attach mockups to this task as well, as soon as you can. :)

    Nirzar updated the task description. (Show Details)Sep 23 2015, 11:17 PM

    @Fjalapeno @JMinor Are the mockups all that this task needs for estimation? If so, can we move it to that column?

    @Nirzar thanks for these. Is there a mock for recent searches? Not the styling, so much the placement and how they enter the screen (fade in, pop up).

    @JMinor yes, we finalized it and I will attach it here as well as the other styling card.

    @Nirzar ok, please attach asap, since this is a big one and the devs have some capacity to take it as soon as design is clear

    @Nirzar so does this fade in with the rest of the search UI?

    @Fjalapeno yes. when you tap on the search icon. the search UI can fade in and the close button(cross on right top) will be in the exact same place of the search icon after fade-in. Earlier we wanted to do the slide from top as you can see in that video but fade-in is also fine since we don't want to have a "search bar" it's more seamless whitewash than just a bar.

    I can create a video if you want, should I?

    Fjalapeno added a comment.EditedSep 24 2015, 9:15 PM

    Thanks - fade in description is fine! no video needed

    BGerstle-WMF updated the task description. (Show Details)Sep 25 2015, 4:57 PM
    BGerstle-WMF claimed this task.
    BGerstle-WMF edited a custom field.
    BGerstle-WMF updated the task description. (Show Details)

    @Nirzar @JMinor while the build gets cooking: feast your eyes on these:

    Nirzar added a comment.Oct 8 2015, 7:47 PM

    @BGerstle-WMF Yay! that looks good, one minor thing

    @Nirzar we could, but IMO the problem is occlusion. The borderless white will appear to "clip" the search results. This is usually handled by having a bordered, opaque bar (as it is now) or a translucent bar.

    @Nirzar e.g. this mock w/ the "Homer Simpson" search results shows a line on top of the result, which is good, but that line will go under the bar when scrolled.

    Nirzar added a comment.Oct 8 2015, 8:04 PM

    For record:
    @BGerstle-WMF and I had a conversation. decided to go with something like this http://codepen.io/anon/pen/qOjjog but for later.

    JMinor closed this task as Resolved.Nov 18 2015, 9:11 PM
    JMinor added a project: iOS-app-v5-alpha.
    Restricted Application added a subscriber: StudiesWorld. · View Herald TranscriptNov 18 2015, 9:11 PM