Skip to content

Commit 7b85ba5

Browse files
jevansaksalmedina-ms
jevansaks
and
almedina-ms
authored
DatePicker and TimePicker flyout visual updates (#3947)
* Initial checkin for DatePicker highlight rect * Change style default back for the test app * Fix inner loop solution * Updates to make focus rect work (needs extensive comments, stay tuned) * Rename ColorFilterOverlayControl to MonochromaticOverlayPresenter * [DatePicker | TimePicker] Update visual styles (#4460) * Lift datepicker themes * Fix margin but LoopingSelector style is not respected * Update DatePicker styles to match design * Fix colors in control * Update Highlight color * Fix Highligh color for TimePicker dark mode * Fix some colors for dark theme * Fix highlight color on TimePicker, corner radius on highlighted date and dark mode highlighted foreground * Fix margins for accept/dismiss buttons * Fix up/down buttons margin * Fix color keys and date/time pickers borders * Fix everything but the plaveholder font color * Fix focus state for placeholders * Format all files * Remove extra variables * Fix crash for pre 21h1 builds * Activate DatePicker as test * Fix border brushes and update timepicker to match datepicker * Remove extra border on focus + pointer * Remove accent background color for focus state * Fix missing reference to caret icons * Remove left over changes from old focus behaviour * Remove changes from old focus behaviour for TimePicker * Fix contrast missing key * Remove added but unused colors * Remove another unused resource Co-authored-by: Alberto Medina Gutierrez <[email protected]> Co-authored-by: almedina-ms <[email protected]>
1 parent 2460bf3 commit 7b85ba5

22 files changed

+1018
-227
lines changed

‎FeatureAreas.props‎

100644100755
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,9 @@
185185
<!-- Dependencies for ImageIcon -->
186186
<PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureImageIconEnabled) == 'true'">
187187
</PropertyGroup>
188+
<!-- Dependencies for MonochromaticOverlayPresenter -->
189+
<PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureMonochromaticOverlayPresenterEnabled) == 'true'">
190+
</PropertyGroup>
188191
<!-- Dependencies for AnimatedIcon -->
189192
<PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureAnimatedIconEnabled) == 'true'">
190193
<FeatureAnimatedVisualPlayerEnabled>productOnly</FeatureAnimatedVisualPlayerEnabled>
@@ -239,6 +242,7 @@
239242
<FeaturePipsPagerEnabled>true</FeaturePipsPagerEnabled>
240243
<FeatureImageIconEnabled>true</FeatureImageIconEnabled>
241244
<FeatureAnimatedIconEnabled>true</FeatureAnimatedIconEnabled>
245+
<FeatureMonochromaticOverlayPresenterEnabled>true</FeatureMonochromaticOverlayPresenterEnabled>
242246
</PropertyGroup>
243247
<PropertyGroup>
244248
<DefineConstants Condition="$(FeatureScrollPresenterEnabled) =='true'">$(DefineConstants);FEATURE_SCROLLPRESENTER_ENABLED</DefineConstants>

‎MUXControls.sln‎

100644100755
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -649,6 +649,12 @@ Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "AnimatedIcon_TestUI", "dev\
649649
EndProject
650650
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "AnimatedIcon_APITests", "dev\AnimatedIcon\APITests\AnimatedIcon_APITests.shproj", "{DB15FF28-AB3A-4FED-A1D5-004A095A3FD5}"
651651
EndProject
652+
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "MonochromaticOverlayPresenter", "MonochromaticOverlayPresenter", "{7FA40D21-3085-41B3-9C46-6CBC2F56B442}"
653+
EndProject
654+
Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "MonochromaticOverlayPresenter", "dev\MonochromaticOverlayPresenter\MonochromaticOverlayPresenter.vcxitems", "{D03847C1-7EE7-4423-82FD-3CB31DAF98D1}"
655+
EndProject
656+
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "MonochromaticOverlayPresenter_TestUI", "dev\MonochromaticOverlayPresenter\TestUI\MonochromaticOverlayPresenter_TestUI.shproj", "{52AAA6ED-E5A0-41BB-8858-66249333A8D4}"
657+
EndProject
652658
Global
653659
GlobalSection(SharedMSBuildProjectFiles) = preSolution
654660
dev\ComboBox\ComboBox.vcxitems*{00523caf-422a-4185-9392-d374b72a019a}*SharedItemsImports = 9
@@ -713,6 +719,7 @@ Global
713719
dev\Expander\TestUI\Expander_TestUI.projitems*{50c1f1d3-20aa-49a8-9e4c-cf4e5811a1d8}*SharedItemsImports = 13
714720
dev\RadioMenuFlyoutItem\TestUI\RadioMenuFlyoutItem_TestUI.projitems*{50e838a2-a886-46c9-ab0b-a57f510ce643}*SharedItemsImports = 13
715721
dev\PersonPicture\APITests\PersonPicture_APITests.projitems*{5243ef2c-f250-48bd-b633-39cc2a0a38aa}*SharedItemsImports = 13
722+
dev\MonochromaticOverlayPresenter\TestUI\MonochromaticOverlayPresenter_TestUI.projitems*{52aaa6ed-e5a0-41bb-8858-66249333a8d4}*SharedItemsImports = 13
716723
dev\PullToRefresh\TestUI\PTR_TestUI.projitems*{549c8eb7-e099-4eab-a1f6-faa3fa79b9e0}*SharedItemsImports = 13
717724
dev\MenuBar\MenuBar_TestUI\MenuBar_TestUI.projitems*{55cb08ca-19fe-4db9-8160-a4ec47984b95}*SharedItemsImports = 13
718725
dev\Breadcrumb\Breadcrumb.vcxitems*{563fe343-c6b0-447b-831a-b0ce3aa7a688}*SharedItemsImports = 9
@@ -787,6 +794,7 @@ Global
787794
dev\Materials\Acrylic\AcrylicBrush.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
788795
dev\Materials\Reveal\RevealBrush.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
789796
dev\MenuBar\MenuBar.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
797+
dev\MonochromaticOverlayPresenter\MonochromaticOverlayPresenter.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
790798
dev\NavigationView\NavigationView.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
791799
dev\NumberBox\NumberBox.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
792800
dev\PagerControl\PagerControl.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
@@ -841,6 +849,7 @@ Global
841849
dev\AnimatedVisualPlayer\InteractionTests\AnimatedVisualPlayer_InteractionTests.projitems*{cbaaccf6-a27d-40b3-980b-adf51a2ebb89}*SharedItemsImports = 13
842850
dev\InfoBar\InfoBar.vcxitems*{ccc102b7-f5ef-479d-94f1-008d189448b1}*SharedItemsImports = 9
843851
dev\LayoutPanel\APITests\LayoutPanel_APITests.projitems*{cddf46ef-aa2d-4bb3-b33e-98b3dbb3c41b}*SharedItemsImports = 13
852+
dev\MonochromaticOverlayPresenter\MonochromaticOverlayPresenter.vcxitems*{d03847c1-7ee7-4423-82fd-3cb31daf98d1}*SharedItemsImports = 9
844853
dev\Interactions\SliderInteraction\SliderInteraction.vcxitems*{d097a4d5-6b61-424d-99f0-f335eff41665}*SharedItemsImports = 9
845854
dev\TabView\InteractionTests\TabView_InteractionTests.projitems*{d1e297b4-5e5b-4807-8624-4141c817a98a}*SharedItemsImports = 13
846855
dev\PipsPager\PipsPager.vcxitems*{d1eb61d8-c689-4ad1-bd61-fdaa50362563}*SharedItemsImports = 9
@@ -883,6 +892,7 @@ Global
883892
dev\Materials\Reveal\APITests\Reveal_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
884893
dev\Materials\Reveal\TestUI\Reveal_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
885894
dev\MenuBar\MenuBar_TestUI\MenuBar_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
895+
dev\MonochromaticOverlayPresenter\TestUI\MonochromaticOverlayPresenter_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
886896
dev\NavigationView\NavigationView_ApiTests\NavigationView_ApiTests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
887897
dev\NavigationView\TestUI\NavigationView_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
888898
dev\NumberBox\APITests\NumberBox_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
@@ -976,6 +986,7 @@ Global
976986
dev\Materials\Reveal\APITests\Reveal_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
977987
dev\Materials\Reveal\TestUI\Reveal_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
978988
dev\MenuBar\MenuBar_TestUI\MenuBar_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
989+
dev\MonochromaticOverlayPresenter\TestUI\MonochromaticOverlayPresenter_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
979990
dev\NavigationView\NavigationView_ApiTests\NavigationView_ApiTests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
980991
dev\NavigationView\TestUI\NavigationView_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
981992
dev\NumberBox\APITests\NumberBox_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
@@ -1635,6 +1646,9 @@ Global
16351646
{F1C8A5A1-B1B0-4095-8849-E550FCF2EBF6} = {221D9F75-FFF3-49C1-A88B-7F3898A5756E}
16361647
{83FD36C0-189F-4E95-8002-9B73905CA301} = {221D9F75-FFF3-49C1-A88B-7F3898A5756E}
16371648
{DB15FF28-AB3A-4FED-A1D5-004A095A3FD5} = {221D9F75-FFF3-49C1-A88B-7F3898A5756E}
1649+
{7FA40D21-3085-41B3-9C46-6CBC2F56B442} = {67599AD5-51EC-44CB-85CE-B60CD8CBA270}
1650+
{D03847C1-7EE7-4423-82FD-3CB31DAF98D1} = {7FA40D21-3085-41B3-9C46-6CBC2F56B442}
1651+
{52AAA6ED-E5A0-41BB-8858-66249333A8D4} = {7FA40D21-3085-41B3-9C46-6CBC2F56B442}
16381652
EndGlobalSection
16391653
GlobalSection(ExtensibilityGlobals) = postSolution
16401654
SolutionGuid = {D93836AB-52D3-4DE2-AE25-23F26F55ECED}

‎MUXControlsInnerLoop.sln‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -478,6 +478,12 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "AnimatedIcon", "dev\Animate
478478
EndProject
479479
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "AnimatedIcon_TestUI", "dev\AnimatedIcon\TestUI\AnimatedIcon_TestUI.shproj", "{83FD36C0-189F-4E95-8002-9B73905CA301}"
480480
EndProject
481+
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "MonochromaticOverlayPresenter", "MonochromaticOverlayPresenter", "{AED8C469-E765-4A92-A66E-D20513A049A5}"
482+
EndProject
483+
Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "MonochromaticOverlayPresenter", "dev\MonochromaticOverlayPresenter\MonochromaticOverlayPresenter.vcxitems", "{D03847C1-7EE7-4423-82FD-3CB31DAF98D1}"
484+
EndProject
485+
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "MonochromaticOverlayPresenter_TestUI", "dev\MonochromaticOverlayPresenter\TestUI\MonochromaticOverlayPresenter_TestUI.shproj", "{52AAA6ED-E5A0-41BB-8858-66249333A8D4}"
486+
EndProject
481487
Global
482488
GlobalSection(SharedMSBuildProjectFiles) = preSolution
483489
dev\ComboBox\ComboBox.vcxitems*{00523caf-422a-4185-9392-d374b72a019a}*SharedItemsImports = 9
@@ -542,6 +548,7 @@ Global
542548
dev\Expander\TestUI\Expander_TestUI.projitems*{50c1f1d3-20aa-49a8-9e4c-cf4e5811a1d8}*SharedItemsImports = 13
543549
dev\RadioMenuFlyoutItem\TestUI\RadioMenuFlyoutItem_TestUI.projitems*{50e838a2-a886-46c9-ab0b-a57f510ce643}*SharedItemsImports = 13
544550
dev\PersonPicture\APITests\PersonPicture_APITests.projitems*{5243ef2c-f250-48bd-b633-39cc2a0a38aa}*SharedItemsImports = 13
551+
dev\MonochromaticOverlayPresenter\TestUI\MonochromaticOverlayPresenter_TestUI.projitems*{52aaa6ed-e5a0-41bb-8858-66249333a8d4}*SharedItemsImports = 13
545552
dev\PullToRefresh\TestUI\PTR_TestUI.projitems*{549c8eb7-e099-4eab-a1f6-faa3fa79b9e0}*SharedItemsImports = 13
546553
dev\MenuBar\MenuBar_TestUI\MenuBar_TestUI.projitems*{55cb08ca-19fe-4db9-8160-a4ec47984b95}*SharedItemsImports = 13
547554
dev\Breadcrumb\Breadcrumb.vcxitems*{563fe343-c6b0-447b-831a-b0ce3aa7a688}*SharedItemsImports = 9
@@ -643,6 +650,7 @@ Global
643650
dev\AnimatedVisualPlayer\InteractionTests\AnimatedVisualPlayer_InteractionTests.projitems*{cbaaccf6-a27d-40b3-980b-adf51a2ebb89}*SharedItemsImports = 13
644651
dev\InfoBar\InfoBar.vcxitems*{ccc102b7-f5ef-479d-94f1-008d189448b1}*SharedItemsImports = 9
645652
dev\LayoutPanel\APITests\LayoutPanel_APITests.projitems*{cddf46ef-aa2d-4bb3-b33e-98b3dbb3c41b}*SharedItemsImports = 13
653+
dev\MonochromaticOverlayPresenter\MonochromaticOverlayPresenter.vcxitems*{d03847c1-7ee7-4423-82fd-3cb31daf98d1}*SharedItemsImports = 9
646654
dev\Interactions\SliderInteraction\SliderInteraction.vcxitems*{d097a4d5-6b61-424d-99f0-f335eff41665}*SharedItemsImports = 9
647655
dev\TabView\InteractionTests\TabView_InteractionTests.projitems*{d1e297b4-5e5b-4807-8624-4141c817a98a}*SharedItemsImports = 13
648656
dev\PipsPager\PipsPager.vcxitems*{d1eb61d8-c689-4ad1-bd61-fdaa50362563}*SharedItemsImports = 9
@@ -1134,6 +1142,9 @@ Global
11341142
{16AA0E0D-A66B-47D5-8051-541BE529F869} = {67599AD5-51EC-44CB-85CE-B60CD8CBA270}
11351143
{F1C8A5A1-B1B0-4095-8849-E550FCF2EBF6} = {16AA0E0D-A66B-47D5-8051-541BE529F869}
11361144
{83FD36C0-189F-4E95-8002-9B73905CA301} = {16AA0E0D-A66B-47D5-8051-541BE529F869}
1145+
{AED8C469-E765-4A92-A66E-D20513A049A5} = {67599AD5-51EC-44CB-85CE-B60CD8CBA270}
1146+
{D03847C1-7EE7-4423-82FD-3CB31DAF98D1} = {AED8C469-E765-4A92-A66E-D20513A049A5}
1147+
{52AAA6ED-E5A0-41BB-8858-66249333A8D4} = {AED8C469-E765-4A92-A66E-D20513A049A5}
11371148
EndGlobalSection
11381149
GlobalSection(ExtensibilityGlobals) = postSolution
11391150
SolutionGuid = {D93836AB-52D3-4DE2-AE25-23F26F55ECED}

‎dev/CommonStyles/Common_themeresources.xaml‎

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -60,71 +60,4 @@
6060
<controls:TextCommandBarFlyout x:Key="TextControlCommandBarContextFlyout" Placement="BottomEdgeAlignedLeft" />
6161
<controls:TextCommandBarFlyout x:Key="TextControlCommandBarSelectionFlyout" Placement="TopEdgeAlignedLeft" />
6262

63-
<Style TargetType="LoopingSelector">
64-
<Setter Property="ShouldLoop" Value="True" />
65-
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
66-
<Setter Property="ItemTemplate">
67-
<Setter.Value>
68-
<DataTemplate>
69-
<StackPanel VerticalAlignment="Center">
70-
<TextBlock Text="{Binding PrimaryText}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" />
71-
</StackPanel>
72-
</DataTemplate>
73-
</Setter.Value>
74-
</Setter>
75-
<Setter Property="Template">
76-
<Setter.Value>
77-
<ControlTemplate TargetType="Control">
78-
<Grid>
79-
<VisualStateManager.VisualStateGroups>
80-
<VisualStateGroup x:Name="CommonStates">
81-
<VisualState x:Name="Normal" />
82-
<VisualState x:Name="PointerOver">
83-
<Storyboard>
84-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButton" Storyboard.TargetProperty="Visibility">
85-
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
86-
</ObjectAnimationUsingKeyFrames>
87-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DownButton" Storyboard.TargetProperty="Visibility">
88-
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
89-
</ObjectAnimationUsingKeyFrames>
90-
</Storyboard>
91-
</VisualState>
92-
</VisualStateGroup>
93-
</VisualStateManager.VisualStateGroups>
94-
<ScrollViewer x:Name="ScrollViewer"
95-
VerticalSnapPointsType="Mandatory"
96-
VerticalSnapPointsAlignment="Near"
97-
VerticalScrollBarVisibility="Hidden"
98-
HorizontalScrollMode="Disabled"
99-
ZoomMode="Disabled"
100-
Template="{StaticResource ScrollViewerScrollBarlessTemplate}" />
101-
<RepeatButton x:Name="UpButton"
102-
Content="&#xEDDB;"
103-
FontFamily="{ThemeResource SymbolThemeFontFamily}"
104-
FontSize="8"
105-
Height="22"
106-
Padding="0"
107-
HorizontalAlignment="Stretch"
108-
VerticalAlignment="Top"
109-
Visibility="Collapsed"
110-
Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
111-
Background="{ThemeResource LoopingSelectorButtonBackground}"
112-
IsTabStop="False" />
113-
<RepeatButton x:Name="DownButton"
114-
Content="&#xEDDC;"
115-
FontFamily="{ThemeResource SymbolThemeFontFamily}"
116-
FontSize="8"
117-
Height="22"
118-
Padding="0"
119-
HorizontalAlignment="Stretch"
120-
VerticalAlignment="Bottom"
121-
Visibility="Collapsed"
122-
Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
123-
Background="{ThemeResource LoopingSelectorButtonBackground}"
124-
IsTabStop="False" />
125-
</Grid>
126-
</ControlTemplate>
127-
</Setter.Value>
128-
</Setter>
129-
</Style>
13063
</ResourceDictionary>

0 commit comments

Comments
 (0)