Skip to content

Commit

Permalink
Group some filter options under Premium border
Browse files Browse the repository at this point in the history
  • Loading branch information
rafaelekol committed Dec 13, 2024
1 parent a23b51f commit cb0e67f
Show file tree
Hide file tree
Showing 8 changed files with 234 additions and 152 deletions.
4 changes: 4 additions & 0 deletions app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,10 @@ dependencies {

implementation "androidx.compose.runtime:runtime-livedata:$compose_version"

//Material 3
implementation 'com.google.android.material:material:1.12.0'
implementation "androidx.compose.material3:material3:1.3.1"

def coil_version = "2.6.0"
implementation "io.coil-kt:coil-compose:$coil_version"
implementation "io.coil-kt:coil-svg:$coil_version"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,11 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.ModalBottomSheetLayout
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberModalBottomSheetState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand All @@ -45,17 +44,18 @@ import io.horizontalsystems.bankwallet.ui.compose.TranslatableString
import io.horizontalsystems.bankwallet.ui.compose.components.AppBar
import io.horizontalsystems.bankwallet.ui.compose.components.ButtonPrimaryYellowWithSpinner
import io.horizontalsystems.bankwallet.ui.compose.components.CellUniversalLawrenceSection
import io.horizontalsystems.bankwallet.ui.compose.components.HeaderText
import io.horizontalsystems.bankwallet.ui.compose.components.HsBackButton
import io.horizontalsystems.bankwallet.ui.compose.components.HsSwitch
import io.horizontalsystems.bankwallet.ui.compose.components.MenuItem
import io.horizontalsystems.bankwallet.ui.compose.components.PremiumHeader
import io.horizontalsystems.bankwallet.ui.compose.components.RowUniversal
import io.horizontalsystems.bankwallet.ui.compose.components.VSpacer
import io.horizontalsystems.bankwallet.ui.compose.components.body_grey
import io.horizontalsystems.bankwallet.ui.compose.components.body_leah
import io.horizontalsystems.bankwallet.ui.compose.components.body_lucian
import io.horizontalsystems.bankwallet.ui.compose.components.body_remus
import io.horizontalsystems.bankwallet.ui.compose.components.cell.CellUniversal
import io.horizontalsystems.bankwallet.ui.compose.components.cell.SectionPremiumUniversalLawrence
import io.horizontalsystems.bankwallet.ui.compose.components.cell.SectionUniversalLawrence
import io.horizontalsystems.bankwallet.ui.compose.components.subhead2_grey
import io.horizontalsystems.bankwallet.ui.extensions.BottomSheetHeader
Expand All @@ -79,7 +79,7 @@ class MarketFiltersFragment : BaseComposeFragment() {

}

@OptIn(ExperimentalMaterialApi::class)
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun AdvancedSearchScreen(
viewModel: MarketFiltersViewModel,
Expand All @@ -90,78 +90,85 @@ private fun AdvancedSearchScreen(
val coroutineScope = rememberCoroutineScope()

var bottomSheetType by remember { mutableStateOf(CoinSet) }
val modalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
val modalBottomSheetState = rememberModalBottomSheetState()
var isBottomSheetVisible by remember { mutableStateOf(false) }

ModalBottomSheetLayout(
sheetState = modalBottomSheetState,
sheetBackgroundColor = ComposeAppTheme.colors.transparent,
sheetContent = {
Scaffold(
backgroundColor = ComposeAppTheme.colors.tyler,
topBar = {
AppBar(
title = stringResource(R.string.Market_Filters),
navigationIcon = {
HsBackButton(onClick = { navController.popBackStack() })
},
menuItems = listOf(
MenuItem(
title = TranslatableString.ResString(R.string.Button_Reset),
onClick = { viewModel.reset() }
)
),
)
}
) { paddingValues ->
Column(
modifier = Modifier.padding(paddingValues)
) {
Column(
modifier = Modifier
.weight(1f)
.verticalScroll(rememberScrollState())
) {
AdvancedSearchContent(
viewModel = viewModel,
onFilterByBlockchainsClick = {
navController.slideFromRight(R.id.blockchainsSelectorFragment)
},
showBottomSheet = { type ->
bottomSheetType = type
coroutineScope.launch {
modalBottomSheetState.show()
isBottomSheetVisible = true
}
}
)
}

ButtonsGroupWithShade {
ButtonPrimaryYellowWithSpinner(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
title = uiState.buttonTitle,
onClick = {
navController.slideFromRight(
R.id.marketAdvancedSearchResultsFragment
)
},
showSpinner = uiState.showSpinner,
enabled = uiState.buttonEnabled,
)
}
}
}

if (isBottomSheetVisible) {
ModalBottomSheet(
onDismissRequest = {
isBottomSheetVisible = false
},
sheetState = modalBottomSheetState,
containerColor = ComposeAppTheme.colors.transparent
) {
BottomSheetContent(
bottomSheetType = bottomSheetType,
viewModel = viewModel,
onClose = {
coroutineScope.launch {
modalBottomSheetState.hide()
isBottomSheetVisible = false
}
}
)
},
) {
Scaffold(
backgroundColor = ComposeAppTheme.colors.tyler,
topBar = {
AppBar(
title = stringResource(R.string.Market_Filters),
navigationIcon = {
HsBackButton(onClick = { navController.popBackStack() })
},
menuItems = listOf(
MenuItem(
title = TranslatableString.ResString(R.string.Button_Reset),
onClick = { viewModel.reset() }
)
),
)
}
) { paddingValues ->
Column(
modifier = Modifier.padding(paddingValues)
) {
Column(
modifier = Modifier
.weight(1f)
.verticalScroll(rememberScrollState())
) {
AdvancedSearchContent(
viewModel = viewModel,
onFilterByBlockchainsClick = {
navController.slideFromRight(R.id.blockchainsSelectorFragment)
},
showBottomSheet = { type ->
bottomSheetType = type
coroutineScope.launch {
modalBottomSheetState.show()
}
}
)
}

ButtonsGroupWithShade {
ButtonPrimaryYellowWithSpinner(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
title = uiState.buttonTitle,
onClick = {
navController.slideFromRight(
R.id.marketAdvancedSearchResultsFragment
)
},
showSpinner = uiState.showSpinner,
enabled = uiState.buttonEnabled,
)
}
}
}
}

Expand All @@ -178,6 +185,19 @@ private fun BottomSheetContent(
) {
val uiState = viewModel.uiState
when (bottomSheetType) {
PriceCloseTo -> {
SingleSelectBottomSheetContent(
title = R.string.Market_Filter_PriceCloseTo,
headerIcon = R.drawable.ic_usd_24,
items = viewModel.priceCloseToOptions,
selectedItem = uiState.priceCloseTo,
onSelect = {
viewModel.updatePriceCloseTo(it)
},
onClose = onClose
)
}

CoinSet -> {
SingleSelectBottomSheetContent(
title = R.string.Market_Filter_ChooseSet,
Expand Down Expand Up @@ -266,19 +286,8 @@ fun AdvancedSearchContent(
) {
val uiState = viewModel.uiState

VSpacer(height = 12.dp)
VSpacer(12.dp)

SectionUniversalLawrence {
AdvancedSearchDropdown(
title = R.string.Market_Filter_ChooseSet,
value = uiState.coinListSet.title,
borderTop = false,
onDropdownClick = { showBottomSheet(CoinSet) }
)
}
VSpacer(height = 32.dp)

HeaderText(stringResource(R.string.Market_FilterSection_MarketParameters))
SectionUniversalLawrence {
AdvancedSearchDropdown(
title = R.string.Market_Filter_MarketCap,
Expand All @@ -291,34 +300,18 @@ fun AdvancedSearchContent(
value = uiState.volume.title,
onDropdownClick = { showBottomSheet(TradingVolume) }
)
AdvancedSearchSwitch(
title = R.string.Market_Filter_ListedOnTopExchanges,
enabled = uiState.listedOnTopExchangesOn,
onChecked = { viewModel.updateListedOnTopExchangesOn(it) }
)
AdvancedSearchSwitch(
title = R.string.Market_Filter_SolidCex,
subtitle = R.string.Market_Filter_SolidCex_Description,
enabled = uiState.solidCexOn,
onChecked = { viewModel.updateSolidCexOn(it) }
)
AdvancedSearchSwitch(
title = R.string.Market_Filter_SolidDex,
subtitle = R.string.Market_Filter_SolidDex_Description,
enabled = uiState.solidDexOn,
onChecked = { viewModel.updateSolidDexOn(it) }
)
AdvancedSearchSwitch(
title = R.string.Market_Filter_GoodDistribution,
subtitle = R.string.Market_Filter_GoodDistribution_Description,
enabled = uiState.goodDistributionOn,
onChecked = { viewModel.updateGoodDistributionOn(it) }
AdvancedSearchDropdown(
title = R.string.Market_Filter_Blockchains,
value = uiState.selectedBlockchainsValue,
onDropdownClick = onFilterByBlockchainsClick
)
}
VSpacer(height = 32.dp)

HeaderText(stringResource(R.string.Market_FilterSection_PriceParameters))
SectionUniversalLawrence {
VSpacer(24.dp)

PremiumHeader()

SectionPremiumUniversalLawrence {
AdvancedSearchDropdown(
title = R.string.Market_Filter_PriceChange,
value = uiState.priceChange.title,
Expand All @@ -330,6 +323,21 @@ fun AdvancedSearchContent(
value = uiState.period.title,
onDropdownClick = { showBottomSheet(PricePeriod) }
)
AdvancedSearchDropdown(
title = R.string.Market_Filter_TradingSignals,
value = uiState.filterTradingSignal.title,
onDropdownClick = { showBottomSheet(TradingSignals) }
)
AdvancedSearchDropdown(
title = R.string.Market_Filter_PriceCloseTo,
value = uiState.priceCloseTo.title,
onDropdownClick = { showBottomSheet(PriceCloseTo) }
)
}

VSpacer(24.dp)

SectionPremiumUniversalLawrence {
AdvancedSearchSwitch(
title = R.string.Market_Filter_OutperformedBtc,
enabled = uiState.outperformedBtcOn,
Expand All @@ -345,37 +353,36 @@ fun AdvancedSearchContent(
enabled = uiState.outperformedBnbOn,
onChecked = { viewModel.updateOutperformedBnbOn(it) }
)
}

VSpacer(24.dp)

SectionPremiumUniversalLawrence {
AdvancedSearchSwitch(
title = R.string.Market_Filter_SolidCex,
subtitle = R.string.Market_Filter_SolidCex_Description,
enabled = uiState.solidCexOn,
onChecked = { viewModel.updateSolidCexOn(it) }
)
AdvancedSearchSwitch(
title = R.string.Market_Filter_PriceCloseToAth,
enabled = uiState.priceCloseToAth,
onChecked = { viewModel.updateOutperformedAthOn(it) }
title = R.string.Market_Filter_SolidDex,
subtitle = R.string.Market_Filter_SolidDex_Description,
enabled = uiState.solidDexOn,
onChecked = { viewModel.updateSolidDexOn(it) }
)
AdvancedSearchSwitch(
title = R.string.Market_Filter_PriceCloseToAtl,
enabled = uiState.priceCloseToAtl,
onChecked = { viewModel.updateOutperformedAtlOn(it) }
title = R.string.Market_Filter_GoodDistribution,
subtitle = R.string.Market_Filter_GoodDistribution_Description,
enabled = uiState.goodDistributionOn,
onChecked = { viewModel.updateGoodDistributionOn(it) }
)
}
VSpacer(height = 32.dp)

HeaderText(stringResource(R.string.Market_FilterSection_NetworkParameters))
SectionUniversalLawrence {
AdvancedSearchDropdown(
title = R.string.Market_Filter_Blockchains,
value = uiState.selectedBlockchainsValue,
onDropdownClick = onFilterByBlockchainsClick
AdvancedSearchSwitch(
title = R.string.Market_Filter_ListedOnTopExchanges,
enabled = uiState.listedOnTopExchangesOn,
onChecked = { viewModel.updateListedOnTopExchangesOn(it) }
)
}
VSpacer(height = 32.dp)

HeaderText(stringResource(R.string.Market_FilterSection_Indicators))
SectionUniversalLawrence {
AdvancedSearchDropdown(
title = R.string.Market_Filter_TradingSignals,
value = uiState.filterTradingSignal.title,
onDropdownClick = { showBottomSheet(TradingSignals) }
)
}
VSpacer(32.dp)
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ object MarketFiltersModule {
PriceChange(R.string.Market_Filter_PriceChange),
PricePeriod(R.string.Market_Filter_PricePeriod),
TradingSignals(R.string.Market_Filter_TradingSignals),
PriceCloseTo(R.string.Market_Filter_PriceCloseTo),
}

data class BlockchainViewItem(val blockchain: Blockchain, val checked: Boolean)
Expand Down Expand Up @@ -164,6 +165,11 @@ enum class TimePeriod(@StringRes val titleResId: Int): WithTranslatableTitle {
get() = TranslatableString.ResString(titleResId)
}

enum class PriceCloseTo(val titleResId: Int) {
Ath(R.string.Market_Filter_ATH),
Atl(R.string.Market_Filter_ATL),
}

enum class PriceChange(
@StringRes val titleResId: Int,
val color: TextColor,
Expand Down
Loading

0 comments on commit cb0e67f

Please sign in to comment.