Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IOS-7874 make fix space for title header #3970

Merged
merged 7 commits into from
Oct 3, 2024
Merged

IOS-7874 make fix space for title header #3970

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
df353c8
IOS-7874 Add common header vuew
skibinalexander Sep 29, 2024
02070ce
IOS-7874 Make correct spacing for component
skibinalexander Sep 29, 2024
5eacc60
Merge branch 'develop' into feature/IOS-7874_make_fix_space_for_title…
skibinalexander Sep 29, 2024
a763f83
Merge branch 'develop' into feature/IOS-7874_make_fix_space_for_title…
skibinalexander Oct 1, 2024
b6ceef4
IOS-7874 Fix review comments
skibinalexander Oct 1, 2024
41741aa
Merge branch 'develop' into feature/IOS-7874_make_fix_space_for_title…
skibinalexander Oct 2, 2024
75d052b
IOS-7874 Fix review comments
skibinalexander Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions ...dules/Markets/TokenMarketsDetails/Subviews/Insights/MarketsTokenDetailsInsightsView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,8 @@ struct MarketsTokenDetailsInsightsView: View {
}

var body: some View {
VStack(spacing: 12) {
VStack(spacing: .zero) {
header
.padding(.bottom, 6)

LazyVGrid(columns: gridItems, alignment: .center, spacing: 16, content: {
ForEach(viewModel.records.indexed(), id: \.0) { index, info in
Expand All @@ -40,8 +39,9 @@ struct MarketsTokenDetailsInsightsView: View {
}
})
.drawingGroup()
.padding(.vertical, Constants.itemsSpacing)
}
.defaultRoundedBackground(with: Colors.Background.action, horizontalPadding: Constants.backgroundHorizontalPadding)
.defaultRoundedBackground(with: Colors.Background.action, verticalPadding: .zero, horizontalPadding: Constants.backgroundHorizontalPadding)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

какой смысл этих правок? vertiticalPadding = 12, тут удаляется паддинг, добавляется в заголовок сверху отдельный паддинг, отдельный в LazyVGrid... по коду не вижу вообще никакого смысла этих правок

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

какой смысл этих правок? vertiticalPadding = 12, тут удаляется паддинг, добавляется в заголовок сверху отдельный паддинг, отдельный в LazyVGrid... по коду не вижу вообще никакого смысла этих правок

Если посмотреть отступы в фигме, то сейчас они соответствуют отступам дизайна

}

private var header: some View {
Expand Down Expand Up @@ -70,6 +70,8 @@ struct MarketsTokenDetailsInsightsView: View {
titleFactory: { $0.tokenDetailsNameLocalized }
)
}
.padding(.top, 12)
.padding(.bottom, 6)
}

private var headerLabel: some View {
Expand Down
50 changes: 24 additions & 26 deletions Tangem/Modules/Markets/TokenMarketsDetails/Subviews/Links/TokenMarketsDetailsLinksView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,40 +23,38 @@ struct TokenMarketsDetailsLinksView: View {
if sections.isEmpty {
EmptyView()
} else {
VStack(alignment: .leading, spacing: Constants.verticalSpacing) {
HStack {
Text(Localization.marketsTokenDetailsLinks)
.style(Fonts.Bold.footnote, color: Colors.Text.tertiary)
VStack(alignment: .leading, spacing: .zero) {
CommonHeaderTitleView(title: Localization.marketsTokenDetailsLinks)
.padding(.horizontal, Constants.horizontalPadding)

Spacer()
}
.padding(.horizontal, Constants.horizontalPadding)

ForEach(sections) { sectionInfo in
if sectionInfo.chips.isEmpty {
EmptyView()
} else {
VStack(alignment: .leading, spacing: Constants.verticalSpacing) {
Group {
Text(sectionInfo.section.title)
.style(Fonts.Regular.footnote, color: Colors.Text.tertiary)
VStack(alignment: .leading) {
ForEach(sections) { sectionInfo in
if sectionInfo.chips.isEmpty {
EmptyView()
} else {
VStack(alignment: .leading, spacing: Constants.verticalSpacing) {
Group {
Text(sectionInfo.section.title)
.style(Fonts.Regular.footnote, color: Colors.Text.tertiary)

MarketsTokenDetailsChipsContainer(
chipsData: sectionInfo.chips,
parentWidth: viewWidth - Constants.horizontalPadding * 2
)
}
.padding(.horizontal, Constants.horizontalPadding)
MarketsTokenDetailsChipsContainer(
chipsData: sectionInfo.chips,
parentWidth: viewWidth - Constants.horizontalPadding * 2
)
}
.padding(.horizontal, Constants.horizontalPadding)

if sectionInfo.id != sections.last?.id {
Separator(color: Colors.Stroke.primary, axis: .horizontal)
.padding(.leading, Constants.horizontalPadding)
if sectionInfo.id != sections.last?.id {
Separator(color: Colors.Stroke.primary, axis: .horizontal)
.padding(.leading, Constants.horizontalPadding)
}
}
}
}
}
.padding(.vertical, Constants.verticalSpacing)
}
.defaultRoundedBackground(with: Colors.Background.action, horizontalPadding: 0)
.defaultRoundedBackground(with: Colors.Background.action, verticalPadding: .zero, horizontalPadding: .zero)
}
}
}
Expand Down
48 changes: 13 additions & 35 deletions ...MarketsDetails/Subviews/MarketsPortfolioContainerView/MarketsPortfolioContainerView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,48 +19,26 @@ struct MarketsPortfolioContainerView: View {
view
.padding(.bottom, 12) // Bottom padding use for no list views
})
.padding(.top, 12) // Need for top padding without bottom padding
.defaultRoundedBackground(with: Colors.Background.action, verticalPadding: .zero)
}

private var headerView: some View {
HStack(alignment: .center) {
Text(Localization.marketsCommonMyPortfolio)
.style(Fonts.Bold.footnote, color: Colors.Text.tertiary)

Spacer()

addTokenButton
}
}

@ViewBuilder
private var addTokenButton: some View {
private var headerView: some View {
switch viewModel.typeView {
case .empty, .loading, .unavailable:
EmptyView()
CommonHeaderTitleView(title: Localization.marketsCommonMyPortfolio)
case .list:
Button(action: {
CommonHeaderTitleButtonView(
title: Localization.marketsCommonMyPortfolio,
button: .init(
asset: Assets.plus14,
title: Localization.marketsAddToken,
isDisabled: viewModel.isAddTokenButtonDisabled,
isLoading: viewModel.isLoadingNetworks
)
) {
viewModel.onAddTapAction()
}, label: {
HStack(spacing: 2) {
Assets.plus14.image
.foregroundStyle(viewModel.isAddTokenButtonDisabled ? Colors.Icon.inactive : Colors.Icon.primary1)

Text(Localization.marketsAddToken)
.style(
Fonts.Regular.footnote.bold(),
color: viewModel.isAddTokenButtonDisabled ? Colors.Icon.inactive : Colors.Text.primary1
)
}
.padding(.leading, 8)
.padding(.trailing, 10)
.padding(.vertical, 4)
})
.background(Colors.Button.secondary)
.cornerRadiusContinuous(Constants.buttonCornerRadius)
.skeletonable(isShown: viewModel.isLoadingNetworks, size: .init(width: 60, height: 18), radius: 3, paddings: .init(top: 3, leading: 0, bottom: 3, trailing: 0))
.disabled(viewModel.isAddTokenButtonDisabled)
}
}
}

Expand Down Expand Up @@ -135,7 +113,7 @@ struct MarketsPortfolioContainerView: View {

@ViewBuilder
private func viewWithHeader(_ view: some View) -> some View {
VStack(alignment: .leading, spacing: 6) {
VStack(alignment: .leading, spacing: .zero) {
headerView

view
Expand Down
12 changes: 4 additions & 8 deletions ...Modules/Markets/TokenMarketsDetails/Subviews/Metrics/MarketsTokenDetailsMetricsView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,8 @@ struct MarketsTokenDetailsMetricsView: View {
}

var body: some View {
VStack(spacing: 20) {
HStack {
Text(Localization.marketsTokenDetailsMetrics)
.style(Fonts.Bold.footnote, color: Colors.Text.tertiary)

Spacer()
}
VStack(spacing: .zero) {
CommonHeaderTitleView(title: Localization.marketsTokenDetailsMetrics)

LazyVGrid(columns: gridItems, alignment: .center, spacing: 16, content: {
ForEach(viewModel.records.indexed(), id: \.1.id) { index, info in
Expand All @@ -43,8 +38,9 @@ struct MarketsTokenDetailsMetricsView: View {
}
})
.drawingGroup()
.padding(.vertical, Constants.itemsSpacing)
}
.defaultRoundedBackground(with: Colors.Background.action, horizontalPadding: Constants.backgroundHorizontalPadding)
.defaultRoundedBackground(with: Colors.Background.action, verticalPadding: .zero, horizontalPadding: Constants.backgroundHorizontalPadding)
}
}

Expand Down
87 changes: 49 additions & 38 deletions ...kenMarketsDetails/Subviews/PricePerformance/MarketsTokenDetailsPricePerformanceView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,55 +13,66 @@ struct MarketsTokenDetailsPricePerformanceView: View {
@ObservedObject var viewModel: MarketsTokenDetailsPricePerformanceViewModel

var body: some View {
VStack(spacing: 18) {
HStack(content: {
Text(Localization.marketsTokenDetailsPricePerformance)
.style(Fonts.Bold.footnote, color: Colors.Text.tertiary)
VStack(spacing: .zero) {
header

Spacer(minLength: 8)
content
}
.defaultRoundedBackground(with: Colors.Background.action, verticalPadding: .zero)
}

MarketsPickerView(
marketPriceIntervalType: $viewModel.selectedInterval,
options: viewModel.intervalOptions,
shouldStretchToFill: false,
style: .init(textVerticalPadding: 2),
titleFactory: { $0.tokenDetailsNameLocalized }
)
})
private var header: some View {
HStack(content: {
Text(Localization.marketsTokenDetailsPricePerformance)
.style(Fonts.Bold.footnote, color: Colors.Text.tertiary)

VStack(spacing: 12) {
HStack {
Text(Localization.marketsTokenDetailsLow)
.style(Fonts.Regular.footnote, color: Colors.Text.tertiary)
Spacer(minLength: 8)

Spacer(minLength: 8)
MarketsPickerView(
marketPriceIntervalType: $viewModel.selectedInterval,
options: viewModel.intervalOptions,
shouldStretchToFill: false,
style: .init(textVerticalPadding: 2),
titleFactory: { $0.tokenDetailsNameLocalized }
)
})
.padding(.top, 12)
.padding(.bottom, 6)
}

Text(Localization.marketsTokenDetailsHigh)
.style(Fonts.Regular.footnote, color: Colors.Text.tertiary)
}
private var content: some View {
VStack(spacing: 12) {
HStack {
Text(Localization.marketsTokenDetailsLow)
.style(Fonts.Regular.footnote, color: Colors.Text.tertiary)

ProgressView(value: viewModel.pricePerformanceProgress)
.progressViewStyle(TangemProgressViewStyle(
height: 6,
backgroundColor: Colors.Background.tertiary,
progressColor: Colors.Text.accent
))
.animation(.default, value: viewModel.pricePerformanceProgress)
Spacer(minLength: 8)

HStack {
Text(viewModel.lowValue)
.style(Fonts.Regular.callout, color: Colors.Text.primary1)
.animation(.default, value: viewModel.lowValue)
Text(Localization.marketsTokenDetailsHigh)
.style(Fonts.Regular.footnote, color: Colors.Text.tertiary)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

если делать компонент и отдельно в него выносить, то посмотри как сделан NavigationBar и добавь, пожалуйста, тоже TrailingItem для заголовка, чтобы у нас не было куча вариантов. Можно сделать инициализатор, который будет принимать @ViewBuilder для доп.вьюхи и не надо будет везде копипастить код для заголовка и будет единообразно сделано

Copy link
Contributor Author

@skibinalexander skibinalexander Oct 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NavigationBar

Да окей посмотрю, попробую переделать, просто вьюха с количеством настроек как у костюма астронавта тоже на мой взгляд странное решение, в DS явно обрисовали 3 вида компонента схожего по смыслу, зачем нам стараться объединить в один, чтобы избежать копиписасты в Text("") чтобы не смущала только копипаста, на мой взгляд тоже так себе, потому как, чтобы внести изменения , надо весь дизайн где юзается вьюха перетестировать, пример как раз шторка с описанием для маркетсов и стейкинга


ProgressView(value: viewModel.pricePerformanceProgress)
.progressViewStyle(TangemProgressViewStyle(
height: 6,
backgroundColor: Colors.Background.tertiary,
progressColor: Colors.Text.accent
))
.animation(.default, value: viewModel.pricePerformanceProgress)

Spacer(minLength: 8)
HStack {
Text(viewModel.lowValue)
.style(Fonts.Regular.callout, color: Colors.Text.primary1)
.animation(.default, value: viewModel.lowValue)

Spacer(minLength: 8)

Text(viewModel.highValue)
.style(Fonts.Regular.callout, color: Colors.Text.primary1)
.animation(.default, value: viewModel.highValue)
}
Text(viewModel.highValue)
.style(Fonts.Regular.callout, color: Colors.Text.primary1)
.animation(.default, value: viewModel.highValue)
}
}
.defaultRoundedBackground(with: Colors.Background.action)
.padding(.vertical, 12)
}
}

Expand Down
13 changes: 8 additions & 5 deletions Tangem/Modules/Markets/TokensNetworkSelector/MarketsTokensNetworkSelectorView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,20 @@ struct MarketsTokensNetworkSelectorView: View {

private var contentView: some View {
VStack(alignment: .leading, spacing: .zero) {
VStack(alignment: .leading, spacing: Constants.headerTokenInfoSpace) {
Text(Localization.marketsSelectNetwork)
.style(Fonts.Bold.footnote, color: Colors.Text.tertiary)
VStack(alignment: .leading, spacing: .zero) {
CommonHeaderTitleView(title: Localization.marketsSelectNetwork)

tokenInfoView
}

networkListView
}
.roundedBackground(with: Colors.Background.action, padding: 14, radius: Constants.cornerRadius)
.roundedBackground(
with: Colors.Background.action,
verticalPadding: .zero,
horizontalPadding: 14,
radius: Constants.cornerRadius
)
}

private var tokenInfoView: some View {
Expand Down Expand Up @@ -111,6 +115,5 @@ struct MarketsTokensNetworkSelectorView: View {
private extension MarketsTokensNetworkSelectorView {
enum Constants {
static let cornerRadius = 14.0
static let headerTokenInfoSpace = 8.0
}
}
4 changes: 2 additions & 2 deletions Tangem/Modules/OrganizeTokens/ListSection/OrganizeTokensListSectionView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ struct OrganizeTokensListSectionView: View {
}
}
.padding(.horizontal, 14.0)
.padding(.top, 14)
.padding(.bottom, 8)
.padding(.top, 12)
.padding(.bottom, 6)
}
}

Expand Down
Loading
Loading