Adjust Hotkey Design #3394
Adjust Hotkey Design #3394
Conversation
Adjust Midnight Border
- Add hotkey colors and selected style
|
🥷 Code experts: no user but you matched threshold 10 onesounds has most 👩💻 activity in the files. See details
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame: To learn more about /:\ gitStream - Visit our Docs |
This comment has been minimized.
This comment has been minimized.
|
Be a legend 🏆 by adding a before and after screenshot of the changes you made, especially if they are around UI/UX. |
📝 WalkthroughWalkthroughThis pull request updates multiple XAML resource and theme files in Flow.Launcher. New color brush resources have been added for hotkeys in both dark and light themes, while several hotkey style definitions are now updated to inherit from base styles using the Changes
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (12)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (7)
🔇 Additional comments (6)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
Flow.Launcher/Themes/Cyan Dark.xaml (1)
59-59: Updated BorderBrush Color in WindowBorderStyleThe BorderBrush value is updated from
#09181eto#1e292f. This change appears intended to harmonize the window border color with the overall refreshed theme aesthetics. Please verify that the new color provides sufficient contrast against the background (#0f1f26) and aligns with the visual consistency across other themes in the application—especially given the PR’s emphasis on enhancing UI visibility and design.Flow.Launcher/Themes/Base.xaml (1)
387-390: Remember to address the typo in this style name.This style has a typo in its name ("Seleceted" instead of "Selected") as noted in the comment above it. While you've correctly updated its font size, consider renaming this style in a future PR for better code maintainability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
Flow.Launcher/Resources/Dark.xaml(2 hunks)Flow.Launcher/Resources/Light.xaml(1 hunks)Flow.Launcher/ResultListBox.xaml(2 hunks)Flow.Launcher/Themes/Base.xaml(1 hunks)Flow.Launcher/Themes/BlurBlack Darker.xaml(2 hunks)Flow.Launcher/Themes/BlurBlack.xaml(2 hunks)Flow.Launcher/Themes/BlurWhite.xaml(2 hunks)Flow.Launcher/Themes/Cyan Dark.xaml(1 hunks)Flow.Launcher/Themes/Darker Glass.xaml(4 hunks)Flow.Launcher/Themes/Discord Dark.xaml(5 hunks)Flow.Launcher/Themes/League.xaml(5 hunks)Flow.Launcher/Themes/Midnight.xaml(7 hunks)Flow.Launcher/Themes/Nord Darker.xaml(2 hunks)Flow.Launcher/Themes/Pink.xaml(1 hunks)Flow.Launcher/Themes/Win10System.xaml(1 hunks)Flow.Launcher/Themes/Win11Light.xaml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: gitStream.cm
🔇 Additional comments (54)
Flow.Launcher/Resources/Light.xaml (1)
54-55: New color resources added for hotkey stylingThe addition of these two color resources is aligned with the PR objectives to enhance the visual presentation of shortcut key displays. The semi-transparent black colors are appropriate for a light theme:
NewHotkeyForegroundwith 37% opacity provides good contrast for textBasicHotkeyBGColorwith 4% opacity creates a subtle background that won't overwhelm the UIFlow.Launcher/Resources/Dark.xaml (1)
61-62: Good addition of hotkey-specific color resources!These new color brushes enhance the visual presentation of shortcut keys as mentioned in the PR objectives. The semi-transparent white colors (#44FFFFFF for foreground and #13FFFFFF for background) are appropriate for the dark theme, providing subtle contrast without being too prominent.
Flow.Launcher/Themes/Base.xaml (6)
353-356: Good adjustment to hotkey font size.Reducing the font size from 15 to 12 for the base hotkey style makes the text more proportionate for the new background container being added in this PR.
357-360: Good consistency in hotkey selected state styling.The selected state mirrors the same font size reduction as the normal state, maintaining visual consistency when items are selected.
361-366: Excellent addition of hotkey background style.The new background style with semi-transparent background (
#138A8A8A) and rounded corners (4px) creates a distinct visual element for hotkeys that will improve readability and user experience.
367-372: Good background styling for selected state.The selected state background maintains the same visual properties as the normal state, providing consistency in the hotkey appearance.
373-380: Well-structured style inheritance pattern.The
ItemHotkeyBGStyleproperly inherits fromBaseItemHotkeyBGStylewhile allowing for theme-specific overrides, following good XAML practices for maintainability.
381-384: Clean implementation of selected background style.The selected background style follows the same inheritance pattern as its non-selected counterpart, maintaining consistency in the styling architecture.
Flow.Launcher/ResultListBox.xaml (2)
68-85: Great enhancement to hotkey display with background container.Wrapping the hotkey TextBlock with a Border provides proper visual distinction for keyboard shortcuts. The approach preserves the existing visibility binding through the Border's Visibility property, ensuring the functionality remains unchanged while the presentation is improved.
218-218: Good handling of selected state styling.Adding the style setter for the HotkeyBG element in the selected state ensures proper visual feedback when an item is selected, which improves the overall UI consistency.
Flow.Launcher/Themes/Win11Light.xaml (3)
158-161: Good refinement of hotkey typography for Win11Light theme.Adjusting the font size from 12 to 11 and using the dynamic
NewHotkeyForegroundresource improves the visual harmony of hotkeys in this theme. The smaller font size works well with the added background container.
162-165: Good consistency in selected state styling.The selected state maintains the same refined font size and color treatment as the normal state, ensuring visual consistency for users.
166-177: Well-implemented theme-specific background styles.These styles properly inherit from the base styles while specifying a theme-appropriate background color using
BasicHotkeyBGColor. This implementation follows good practices by centralizing shared properties in base styles while allowing for theme-specific customization.Flow.Launcher/Themes/League.xaml (2)
14-14: Good formatting consistency for spacing in property values.Changing from comma-separated to space-separated format (
0,0,66,0→0 0 66 0) improves consistency with WPF's preferred formatting style across multiple properties.Also applies to: 29-29, 60-60, 148-148
114-119: Good refactoring to use style inheritance.Adding the
BasedOnattribute to inherit from base styles (BaseItemHotkeyStyleandBaseItemHotkeySelectedStyle) improves maintainability by centralizing common properties while preserving theme-specific overrides for color.Also applies to: 120-125
Flow.Launcher/Themes/BlurBlack.xaml (3)
17-17: The ResultMargin addition ensures consistent spacing.Adding this thickness resource helps maintain consistent spacing between result items, improving the overall visual hierarchy and readability of search results.
146-152: Good refactoring of ItemHotkeyStyle to inherit from base style.This change improves code maintainability by inheriting properties from the base style while preserving theme-specific foreground color and opacity settings. This pattern of style inheritance helps ensure consistency across multiple themes.
153-159: Good refactoring of ItemHotkeySelectedStyle to inherit from base style.Similar to the previous change, this refactoring improves maintainability while keeping theme-specific foreground and opacity intact. This approach ensures visual consistency for selected hotkeys.
Flow.Launcher/Themes/Pink.xaml (2)
116-121: Good refactoring of ItemHotkeyStyle to inherit from base style.The change to inherit from BaseItemHotkeyStyle while maintaining the theme-specific pink foreground (#ed92c9) ensures visual consistency with the Pink theme while benefiting from common styling defined in the base style.
122-127: Good refactoring of ItemHotkeySelectedStyle to inherit from base style.Similar to the previous change, this refactoring improves maintainability by inheriting from BaseItemHotkeySelectedStyle while preserving the theme-specific pink foreground color.
Flow.Launcher/Themes/BlurBlack Darker.xaml (3)
18-18: The ResultMargin addition ensures consistent spacing.This thickness resource maintains consistent spacing between result items, improving visual hierarchy and ensuring a uniform appearance across different themes.
149-155: Good refactoring of ItemHotkeyStyle to inherit from base style.This change improves code maintainability by inheriting from BaseItemHotkeyStyle while preserving the theme's specific foreground color and lower opacity setting (0.2), which fits with the "Darker" theme variant.
156-162: Good refactoring of ItemHotkeySelectedStyle to inherit from base style.This refactoring improves maintainability by inheriting from BaseItemHotkeySelectedStyle while keeping the theme-specific lower opacity setting for selected hotkeys, maintaining the darker aesthetic.
Flow.Launcher/Themes/Win10System.xaml (2)
116-122: Good refactoring with appropriate font size adjustment.The change to inherit from BaseItemHotkeyStyle while reducing the font size to 11px improves the visual presentation of hotkeys in the Windows 10 style. The smaller font size is appropriate for hotkey display and aligns with the Windows 10 design language.
123-129: Good refactoring with appropriate font size adjustment for selected hotkeys.Similar to the previous change, this refactoring improves style inheritance while reducing the font size to 11px for selected hotkeys. The smaller font size works well for hotkey displays while maintaining consistency with the Windows 10 system theme.
Flow.Launcher/Themes/BlurWhite.xaml (3)
17-17: Added consistent result margin resource.Adding a standard
ResultMarginresource helps maintain consistent spacing across UI elements.
153-159: Improved hotkey style inheritance.The hotkey style now inherits from the base style, which promotes better code reuse and consistency across themes. This change aligns with the PR objective to enhance the visual presentation of shortcut key displays.
160-166: Improved selected hotkey style inheritance.Similar to the regular hotkey style, the selected state now properly inherits from its base style, ensuring consistent appearance and behavior.
Flow.Launcher/Themes/Nord Darker.xaml (3)
43-43: Standardized margin format.Changed from comma-separated to space-separated margin values for consistency with other themes.
119-124: Enhanced hotkey style with base inheritance.The hotkey style now inherits from
BaseItemHotkeyStylewhile retaining its theme-specific foreground color, aligning with the PR's goal to enhance shortcut key displays.
125-130: Enhanced selected hotkey style with base inheritance.Similar to the standard hotkey style, the selected state now inherits from a base style while preserving the theme-specific foreground color.
Flow.Launcher/Themes/Midnight.xaml (7)
19-19: Standardized padding format.Changed from comma-separated to space-separated padding values for consistency across themes.
29-29: Standardized padding format for query suggestions.Same format standardization applied to the query suggestion box padding.
41-41: Updated border color.Changed border color from
#111828to#202938for better contrast and visual appeal.
74-74: Standardized separator margin format.Changed from comma-separated to space-separated margin values for consistency.
125-125: Standardized search icon margin format.Changed from comma-separated to space-separated margin values for consistency.
152-152: Standardized clock panel margin format.Changed from comma-separated to space-separated margin values for consistency.
170-170: Standardized preview border margin format.Changed from comma-separated to space-separated margin values for consistency.
Flow.Launcher/Themes/Discord Dark.xaml (12)
24-24: Standardized padding format for query box.Changed from comma-separated to space-separated padding values for consistency across themes.
31-31: Updated query suggestion background color.Changed from
#36393fto#2e2e34to better align with the Discord theme's revised color scheme as mentioned in the PR objectives.
34-34: Standardized padding format for query suggestions.Same format standardization applied to the query suggestion box padding.
41-42: Updated border and background colors.Changed border color from
#2f3136to#3a3a41and background from#36393fto#2e2e34to create a more cohesive Discord theme as mentioned in the PR objectives.Also applies to: 43-43
94-94: Updated selected item background color.Changed from
#49443cto#36363dto better match the revised Discord theme color scheme.
101-101: Simplified highlight style.Removed unnecessary style properties while maintaining the style's presence for theme consistency.
102-108: Enhanced hotkey style with base inheritance.The hotkey style now inherits from
BaseItemHotkeyStylewhile preserving theme-specific colors, supporting the PR's goal to enhance shortcut key displays.
109-115: Enhanced selected hotkey style with base inheritance.Similar to the standard hotkey style, the selected state now inherits from a base style while preserving theme-specific colors.
129-129: Updated scrollbar thumb background color.Changed from
#202225to#787881for better visibility against the updated theme colors.
146-146: Updated separator fill color.Changed to
#3a3a41to match the updated border color scheme for visual consistency.
148-148: Adjusted separator margin.Changed from
12,0,12,6to0 0 0 0to create a more streamlined appearance in the Discord theme.
175-175: Added consistent margin to preview border.Added a margin setter with value
0 0 0 0to ensure consistent styling for the preview component.Flow.Launcher/Themes/Darker Glass.xaml (4)
1-5: Theme renamed from "Darker Glass" to "Rider"The theme has been renamed as mentioned in the PR objectives where "Darker Glass theme has been removed and will be replaced with the Rider theme". This change ensures users will now see the proper naming in the theme selection.
150-152: Comprehensive theme redesign with consistent color paletteThe changes provide a complete overhaul of the Rider theme (previously Darker Glass) with consistent styling across all UI elements. The color palette consistently uses:
- Light text: #dfe1e5
- Muted text: #6f737a
- Borders: #393b40
- Backgrounds: #2b2d30
- Selected items: #2e436e
The corner radius of 8px is consistently applied to containers, along with standardized margins and padding. These changes create a cohesive visual experience that aligns with the PR's objective to "enhance the visual presentation" and ensure "a more cohesive user experience."
Also applies to: 24-27, 34-38, 45-49, 63-195
117-117: ScrollBarStyle simplified to inherit only from base styleThe ScrollBarStyle has been simplified to only inherit from BaseScrollBarStyle without additional properties. This is consistent with other style simplifications in this theme, relying more on base styles for common properties.
81-81:✅ Verification successful
HighlightStyle is defined but empty
The
HighlightStyleis declared but doesn't contain any property setters. Was this intentional? It might be meant to override an existing style with empty values, but if properties are needed, they should be added.
🌐 Web query:
What is the purpose of an empty style in WPF XAML?💡 Result:
An empty style in WPF XAML serves specific purposes related to overriding existing styles, resetting control appearances, and enabling custom styling workflows. Here are its primary functions:
1. Overriding Implicit Styles
By defining an empty style with a
TargetTypeand anx:Key, you can explicitly set a control'sStyleproperty to this key. This prevents the control from inheriting any implicit styles (styles withoutx:Keythat automatically apply to all controls of the same type)[1][7]. For example:<Style x:Key="EmptyButtonStyle" TargetType="Button" /> <Button Style="{StaticResource EmptyButtonStyle}" />This ensures the button uses its default properties instead of any globally defined implicit styles.
2. Resetting to Default Appearance
Empty styles can act as a reset mechanism. If a control has unwanted style modifications (e.g., from third-party libraries like Material Design), applying an empty style or setting
Style="{x:Null}"forces the control to revert to its built-in default template[5][8]. This is useful when troubleshooting styling conflicts.3. Template for Custom Styling
Empty styles are often created as a starting point for defining new styles. In Visual Studio, right-clicking a control and selecting Create Empty generates a minimal style structure, allowing incremental customization without inheriting unintended properties[1][4]. For example:
<Style TargetType="Button"> <!-- Add Setters/Triggers here --> </Style>4. Enabling Control-Specific Styling
When merged resource dictionaries or global styles conflict, an empty style scoped to a specific control can override broader rules while preserving local property adjustments. This isolates styling changes to individual controls.
Key Considerations
- Implicit vs. Explicit: Styles without
x:Keyapply universally to all matching controls, while empty styles withx:Keyrequire explicit application[1][7].- Performance: Overusing empty styles can lead to redundancy. Use them judiciously to avoid unnecessary resource bloat[4][7].
By leveraging empty styles, developers gain fine-grained control over styling inheritance and maintainability in WPF applications.
Citations:
- 1: https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/xaml-styles
- 2: https://www.youtube.com/watch?v=2HP1Ig5HEgs
- 3: https://www.telerik.com/forums/hiding-gridview-when-empty
- 4: https://www.youtube.com/watch?v=F7DiRnH6Yqo
- 5: https://learn.microsoft.com/en-us/answers/questions/41504/how-to-specify-using-the-default-style-in-xaml
- 6: https://www.jetbrains.com/help/resharper/Code_Style_Assistance_in_XAML.html
- 7: https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/styles-templates-overview?view=netdesktop-9.0
- 8: Do not use the Style property to provide default appearance, use DefaultStyleKey instead. HandyOrg/HandyControl#1013
- 9: Nullable<int> binding to text boxes - should it update empty string as Null MvvmCross/MvvmCross#373
- 10: https://docs.telerik.com/devtools/wpf/controls/radchartview/features/empty-content
- 11: https://www.telerik.com/forums/how-to-implement-emptypointbehavior-with-wpf-xaml-c
Action: Confirm if the empty style is intentional
The empty
<Style x:Key="HighlightStyle" />appears to be used to explicitly override any implicit or default styles applied to the control. In WPF, defining an empty style can intentionally reset or clear inherited styling, which is an accepted practice if no specific property values are desired. If the goal was to remove unwanted styling without introducing new setters, then leaving it empty is appropriate. However, if additional customization is needed, please add the necessary property setters.
- File: Flow.Launcher/Themes/Darker Glass.xaml, Line 81
- Intended Behavior: Overriding inherited styles / resetting control appearance
- Suggestion: Consider adding an inline comment to clarify the intent if the empty style is meant to override default behavior.
This comment has been minimized.
This comment has been minimized.
# Conflicts: # Flow.Launcher/Themes/Discord Dark.xaml
This comment has been minimized.
This comment has been minimized.
|
@coderabbitai I replaced all the text alignments in the query box to be vertically centered. Could you check if I missed any themes? |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 10592 🏁 Script executed: Length of output: 11319 @onesounds I've checked all the theme files in the repository and found that you've successfully updated all query box paddings to be vertically centered. Here's what I found:
You've done a thorough job - I didn't find any themes with non-zero vertical padding in the query boxes. |
@check-spelling-bot Report🔴 Please reviewSee the 📂 files view, the 📜action log, or 📝 job summary for details.
See ❌ Event descriptions for more information. If the flagged items are 🤯 false positivesIf items relate to a ...
|
| @@ -214,6 +215,7 @@ | |||
| <Setter TargetName="Title" Property="Style" Value="{DynamicResource ItemTitleSelectedStyle}" /> | |||
| <Setter TargetName="SubTitle" Property="Style" Value="{DynamicResource ItemSubTitleSelectedStyle}" /> | |||
| <Setter TargetName="Hotkey" Property="Style" Value="{DynamicResource ItemHotkeySelectedStyle}" /> | |||
| <Setter TargetName="HotkeyBG" Property="Style" Value="{DynamicResource ItemHotkeyBGSelectedStyle}" /> | |||
There was a problem hiding this comment.
Huh do we really need this? And the x:Name for the border🤔
There was a problem hiding this comment.
it is okay here. the hotkey of the selected item will have a slight difference.
There was a problem hiding this comment.
Copilot reviewed 1 out of 21 changed files in this pull request and generated no comments.
Files not reviewed (20)
- Flow.Launcher/Resources/Dark.xaml: Language not supported
- Flow.Launcher/Resources/Light.xaml: Language not supported
- Flow.Launcher/ResultListBox.xaml: Language not supported
- Flow.Launcher/Themes/Base.xaml: Language not supported
- Flow.Launcher/Themes/BlurBlack Darker.xaml: Language not supported
- Flow.Launcher/Themes/BlurBlack.xaml: Language not supported
- Flow.Launcher/Themes/BlurWhite.xaml: Language not supported
- Flow.Launcher/Themes/Circle System.xaml: Language not supported
- Flow.Launcher/Themes/Cyan Dark.xaml: Language not supported
- Flow.Launcher/Themes/Darker Glass.xaml: Language not supported
- Flow.Launcher/Themes/Discord Dark.xaml: Language not supported
- Flow.Launcher/Themes/Dracula.xaml: Language not supported
- Flow.Launcher/Themes/League.xaml: Language not supported
- Flow.Launcher/Themes/Midnight.xaml: Language not supported
- Flow.Launcher/Themes/Nord Darker.xaml: Language not supported
- Flow.Launcher/Themes/Pink.xaml: Language not supported
- Flow.Launcher/Themes/SlimLight.xaml: Language not supported
- Flow.Launcher/Themes/Sublime.xaml: Language not supported
- Flow.Launcher/Themes/Ubuntu.xaml: Language not supported
- Flow.Launcher/Themes/Win10System.xaml: Language not supported
Jack251970
added
kind/ui
What's the PR