[UX Regression]: Card Browser - two taps to change column

[david-allison]

There is a new Card Browser in AnkiDroid 2.21alpha11where you can set more columns than two. It is great. It would be also great to have the old function where you can tap on the top line and select what there should be displayed. It takes two taps to change the displayed data in the old card browser.

Screenshot

Source: https://forums.ankiweb.net/t/ankidroid-2-21alpha11-card-browser/55145

---

Cause & context

• Card Browser: Support many columns #17780
• feat(browse): more than 2 columns #17781

---

The <Spinner> which we removed in the above PR was space inefficient and will no longer be usable. Just add a click listener to appropriate views, with a ripple effect.

I would recommend opening a simple dialog with:

• Title specifying the column being changed, in case a user misclicked
• the columns which are not in use
  • and previews of the data which will be displayed.

Here is what we do for the 'long press' listener. The single press listener should be on the TextViews inside this view (so each one refers to a different column) and a reasonable method should be added.

You can probably use this for a good design of the dialog entries [hide the buttons on the right]]: https://github.com/ankidroid/Anki-Android/blob/a863c1bee72077198a1b33764a445567c6684cdc/AnkiDroid/src/main/res/layout/browser_columns_selection_entry.xml

Anki-Android/AnkiDroid/src/main/java/com/ichi2/anki/CardBrowser.kt

Lines 421 to 429 in e1088cf

	this.browserColumnHeadings =
	findViewById<ViewGroup>(R.id.browser_column_headings).apply {
	setOnLongClickListener {
	Timber.d("long press on headings: opening column selection options")
	val dialog = BrowserColumnSelectionFragment.createInstance(viewModel.cardsOrNotes)
	dialog.show(supportFragmentManager, null)
	true
	}
	}

The list of unused & available columns is available from the CardBrowserViewModel already. The dialog should display the labels (and a preview of the data if it exists):

Anki-Android/AnkiDroid/src/main/java/com/ichi2/anki/browser/CardBrowserViewModel.kt

Lines 948 to 973 in 3ea835e

	/**
	* Obtains two lists of column headings with preview data
	* (preview uses the first row of data, if it exists)
	*
	* The two lists are:
	* (1): An ordered list of columns which is displayed to the user
	* (2): A list of columns which are available to display to the user
	*/
	suspend fun previewColumnHeadings(cardsOrNotes: CardsOrNotes): Pair<List<ColumnWithSample>, List<ColumnWithSample>> {
	val currentColumns =
	when {
	// if we match, use the loaded the columns
	cardsOrNotes == this.cardsOrNotes -> activeColumns
	else -> BrowserColumnCollection.load(sharedPrefs(), cardsOrNotes).columns
	}
	val columnsWithSample = ColumnWithSample.loadSample(cards.firstOrNull(), cardsOrNotes)
	// we return this as two lists as 'currentColumns' uses the collection ordering
	return Pair(
	columnsWithSample
	.filter { currentColumns.contains(it.columnType) }
	.sortedBy { currentColumns.indexOf(it.columnType) },
	columnsWithSample.filter { !currentColumns.contains(it.columnType) },
	)
	}

On selection, call the following method with the appropriate parameters:

Anki-Android/AnkiDroid/src/main/java/com/ichi2/anki/browser/CardBrowserViewModel.kt

Lines 565 to 578 in 3ea835e

	/**
	* Updates the backend with a new collection of columns
	*
	* @param columns the new columns to use
	* @param cardsOrNotes the mode to update columns for. If this is the active mode, then flows
	* will be updated with the new columns
	*
	* @return Whether the operation was successful (a valid list was provided, and it was a change)
	*/
	@CheckResult
	fun updateActiveColumns(
	columns: List<CardBrowserColumn>,
	cardsOrNotes: CardsOrNotes,
	): Boolean {

Add a @NeedsTest("") annotation on updateActiveColumns, noting that updating one column should not cause all columns to be reloaded. We do not handle this case yet, it probably doesn't matter from a performance perspective, but it would be nice to handle from a 'do the right thing' perspective

[Siddheshjondhale]

Taking it up

[Himadrimani]

Looking into this

[Siddheshjondhale]

Looking into this

I am kinda working on this issue. Could you check out the other open issues.

Thanks!