Improve (a bit) the devices list UX/UI

This commit is contained in:
Benoit Marty 2020-01-06 10:51:30 +01:00
parent a00f51a264
commit 01db856a5d
3 changed files with 59 additions and 16 deletions

View file

@ -23,12 +23,16 @@ import com.airbnb.mvrx.Success
import com.airbnb.mvrx.Uninitialized import com.airbnb.mvrx.Uninitialized
import im.vector.matrix.android.api.extensions.sortByLastSeen import im.vector.matrix.android.api.extensions.sortByLastSeen
import im.vector.matrix.android.internal.crypto.model.rest.DeviceInfo import im.vector.matrix.android.internal.crypto.model.rest.DeviceInfo
import im.vector.riotx.R
import im.vector.riotx.core.epoxy.errorWithRetryItem import im.vector.riotx.core.epoxy.errorWithRetryItem
import im.vector.riotx.core.epoxy.loadingItem import im.vector.riotx.core.epoxy.loadingItem
import im.vector.riotx.core.error.ErrorFormatter import im.vector.riotx.core.error.ErrorFormatter
import im.vector.riotx.core.resources.StringProvider
import im.vector.riotx.core.ui.list.genericItemHeader
import javax.inject.Inject import javax.inject.Inject
class DevicesController @Inject constructor(private val errorFormatter: ErrorFormatter) : EpoxyController() { class DevicesController @Inject constructor(private val errorFormatter: ErrorFormatter,
private val stringProvider: StringProvider) : EpoxyController() {
var callback: Callback? = null var callback: Callback? = null
private var viewState: DevicesViewState? = null private var viewState: DevicesViewState? = null
@ -61,21 +65,58 @@ class DevicesController @Inject constructor(private val errorFormatter: ErrorFor
listener { callback?.retry() } listener { callback?.retry() }
} }
is Success -> is Success ->
devices() buildDevicesList(devices(), state.myDeviceId, state.currentExpandedDeviceId)
// sort before display: most recent first }
.sortByLastSeen() }
.forEachIndexed { idx, deviceInfo ->
val isCurrentDevice = deviceInfo.deviceId == state.myDeviceId private fun buildDevicesList(devices: List<DeviceInfo>, myDeviceId: String, currentExpandedDeviceId: String?) {
deviceItem { // Current device
id("device$idx") genericItemHeader {
deviceInfo(deviceInfo) id("current")
currentDevice(isCurrentDevice) text(stringProvider.getString(R.string.devices_current_device))
buttonsVisible(deviceInfo.deviceId == state.currentExpandedDeviceId) }
itemClickAction { callback?.onDeviceClicked(deviceInfo) }
renameClickAction { callback?.onRenameDevice(deviceInfo) } devices
deleteClickAction { callback?.onDeleteDevice(deviceInfo) } .filter {
} it.deviceId == myDeviceId
}
.forEachIndexed { idx, deviceInfo ->
deviceItem {
id("myDevice$idx")
deviceInfo(deviceInfo)
currentDevice(true)
buttonsVisible(deviceInfo.deviceId == currentExpandedDeviceId)
itemClickAction { callback?.onDeviceClicked(deviceInfo) }
renameClickAction { callback?.onRenameDevice(deviceInfo) }
deleteClickAction { callback?.onDeleteDevice(deviceInfo) }
}
}
// Other devices
if (devices.size > 1) {
genericItemHeader {
id("others")
text(stringProvider.getString(R.string.devices_other_devices))
}
devices
.filter {
it.deviceId != myDeviceId
}
// sort before display: most recent first
.sortByLastSeen()
.forEachIndexed { idx, deviceInfo ->
val isCurrentDevice = deviceInfo.deviceId == myDeviceId
deviceItem {
id("device$idx")
deviceInfo(deviceInfo)
currentDevice(isCurrentDevice)
buttonsVisible(deviceInfo.deviceId == currentExpandedDeviceId)
itemClickAction { callback?.onDeviceClicked(deviceInfo) }
renameClickAction { callback?.onRenameDevice(deviceInfo) }
deleteClickAction { callback?.onDeleteDevice(deviceInfo) }
} }
}
} }
} }

View file

@ -60,7 +60,7 @@ class VectorSettingsDevicesFragment @Inject constructor(
waiting_view_status_text.setText(R.string.please_wait) waiting_view_status_text.setText(R.string.please_wait)
waiting_view_status_text.isVisible = true waiting_view_status_text.isVisible = true
devicesController.callback = this devicesController.callback = this
recyclerView.configureWith(devicesController) recyclerView.configureWith(devicesController, showDivider = true)
devicesViewModel.requestErrorLiveData.observeEvent(this) { devicesViewModel.requestErrorLiveData.observeEvent(this) {
displayErrorDialog(it) displayErrorDialog(it)
// Password is maybe not good, for safety measure, reset it here // Password is maybe not good, for safety measure, reset it here

View file

@ -15,5 +15,7 @@
<string name="settings_rageshake_detection_threshold_summary">Shake your phone to test the detection threshold</string> <string name="settings_rageshake_detection_threshold_summary">Shake your phone to test the detection threshold</string>
<string name="rageshake_detected">Shake detected!</string> <string name="rageshake_detected">Shake detected!</string>
<string name="settings">Settings</string> <string name="settings">Settings</string>
<string name="devices_current_device">Current device</string>
<string name="devices_other_devices">Other devices</string>
</resources> </resources>