Mirrored_Repos/yattee
1
0
Fork 0
mirror of https://github.com/yattee/yattee.git synced 2025-11-13 05:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve search field layout and responsiveness

Browse Source 
SearchTextField improvements:
- Add flexible width constraints (minWidth: 250, maxWidth: .infinity) for macOS
- Restructure iOS layout to use HStack instead of ZStack for better alignment
- Add invisible spacer to maintain consistent width when clear button is hidden
- Adjust padding for more balanced appearance
- Remove fixed width from fieldBorder to support flexible sizing

SearchView improvements:
- Wrap in GeometryReader to calculate available width dynamically
- Add searchFieldWidth() helper to compute optimal search field width
- Account for navigation buttons and internal padding
- Apply dynamic width to both FocusableSearchTextField and SearchTextField

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Arkadiusz Fal
2025-11-09 14:05:07 +01:00
parent 62d5a86146
commit 73d9581449
2 changed files with 81 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
Shared/Search/SearchTextField.swift
View File

@@ -40,48 +40,50 @@ struct SearchTextField: View {
}
}
}
.frame(minWidth: 250, idealWidth: 300, maxWidth: .infinity)
.transaction { t in t.animation = nil }
}
#else
var body: some View {
ZStack {
HStack {
HStack(spacing: 0) {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.padding(.leading, 5)
.padding(.trailing, 5)
.imageScale(.medium)
HStack(spacing: 0) {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.padding(.leading, 8)
.padding(.trailing, 5)
.imageScale(.medium)
TextField("Search...", text: $state.queryText) {
state.changeQuery { query in
query.query = state.queryText
navigation.hideKeyboard()
}
RecentsModel.shared.addQuery(state.queryText)
}
.disableAutocorrection(true)
.textFieldStyle(.plain)
.padding(.vertical, 7)
if !state.queryText.isEmpty {
clearButton
.padding(.leading, 5)
.padding(.trailing, 5)
}
TextField("Search...", text: $state.queryText) {
state.changeQuery { query in
query.query = state.queryText
navigation.hideKeyboard()
}
.background(
RoundedRectangle(cornerRadius: 8)
.fill(Color("SearchTextFieldBackground"))
)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color(UIColor.secondarySystemBackground), lineWidth: 1)
)
.frame(maxWidth: .infinity, alignment: .leading)
RecentsModel.shared.addQuery(state.queryText)
}
.disableAutocorrection(true)
.textFieldStyle(.plain)
.padding(.vertical, 7)
if !state.queryText.isEmpty {
clearButton
.padding(.leading, 5)
.padding(.trailing, 8)
} else {
// Invisible spacer to maintain consistent width
clearButton
.opacity(0)
.padding(.leading, 5)
.padding(.trailing, 8)
}
.padding(.horizontal, 0)
}
.background(
RoundedRectangle(cornerRadius: 8)
.fill(Color("SearchTextFieldBackground"))
)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color(UIColor.secondarySystemBackground), lineWidth: 1)
)
.padding(.horizontal, 16)
.transaction { t in t.animation = nil }
}
#endif
@@ -89,11 +91,11 @@ struct SearchTextField: View {
private var fieldBorder: some View {
RoundedRectangle(cornerRadius: 5, style: .continuous)
.fill(Color.background)
.frame(width: 250, height: 27)
.frame(height: 27)
.overlay(
RoundedRectangle(cornerRadius: 5, style: .continuous)
.stroke(Color.gray.opacity(0.4), lineWidth: 1)
.frame(width: 250, height: 27)
.frame(height: 27)
)
}