Redesign UI

Signed-off-by: Christoph Hofmann <oss@hoffe.org>
openhab · Feb 18, 2024 · 913a3cd · 913a3cd
1 parent be8c0e4
commit 913a3cd
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 87 deletions.
diff --git a/src/openHAB.Windows/App.xaml b/src/openHAB.Windows/App.xaml
@@ -92,6 +92,8 @@
                                                MapViewTemplate="{StaticResource MapViewTemplate}"
                                                WebViewTemplate="{StaticResource WebViewTemplate}"
                                                TextTemplate="{StaticResource TextItemTemplate}" />
+
         </ResourceDictionary>
     </Application.Resources>
+
 </Application>
diff --git a/src/openHAB.Windows/App.xaml.cs b/src/openHAB.Windows/App.xaml.cs
@@ -82,7 +82,6 @@ protected override async void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventA
 
             // Initialize MainWindow here
             MainWindow = new MainWindow();
-            MainWindow.ExtendsContentIntoTitleBar = true;
             //Frame rootFrame = MainWindow.RootFrame;
 
             //if (rootFrame == null)

diff --git a/...enHAB.Windows/Assets/StoreLogo.backup.png → src/openHAB.Windows/Assets/StoreLogo.png b/...enHAB.Windows/Assets/StoreLogo.backup.png → src/openHAB.Windows/Assets/StoreLogo.png
diff --git a/src/openHAB.Windows/Controls/FrameWidget.xaml b/src/openHAB.Windows/Controls/FrameWidget.xaml
@@ -11,8 +11,7 @@
                   d:DesignHeight="300"
                   d:DesignWidth="400"
                   mc:Ignorable="d"
-                  Visibility="{x:Bind Widget.Visibility, Converter={StaticResource BooleanToVisibilityConverter}}"
-                  Background="{StaticResource DarkAcrylicColor}">
+                  Visibility="{x:Bind Widget.Visibility, Converter={StaticResource BooleanToVisibilityConverter}}">
 
     <local:WidgetBase.Resources>
         <Style TargetType="GridViewItem">
@@ -25,17 +24,18 @@
         </Style>
         <converters:IconToBitmapConverter x:Key="IconToBitmapConverter" />
     </local:WidgetBase.Resources>
-
-    <StackPanel VerticalAlignment="Stretch">
-        <StackPanel.Background>
+    <StackPanel VerticalAlignment="Stretch"
+                Background="{StaticResource SolidBackgroundFillColorBaseAltBrush}">
+        <!--<StackPanel.Background>
             <AcrylicBrush  TintOpacity="0.1"
-                           FallbackColor="{StaticResource DarkColor}"
-                           TintColor="{StaticResource DarkColor}" />
-        </StackPanel.Background>
-        <StackPanel HorizontalAlignment="Stretch"
+                           FallbackColor="{StaticResource SolidBackgroundFillColorTertiaryBrush}"
+                           TintColor="{StaticResource SolidBackgroundFillColorTertiaryBrush}" />
+        </StackPanel.Background>-->
+        <StackPanel Margin="5,5,0,0"
+                    HorizontalAlignment="Stretch"
                     Orientation="Horizontal">
             <Image x:Name="Icon"
-                   Height="40"
+                   Height="35"
                    VerticalAlignment="Center"
                    Source="{x:Bind Widget, Mode=OneWay, Converter={StaticResource IconToBitmapConverter}}"
                    Stretch="UniformToFill" />

diff --git a/src/openHAB.Windows/MainWindow.xaml b/src/openHAB.Windows/MainWindow.xaml
@@ -5,7 +5,6 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:converters="using:openHAB.Windows.Converters"
         xmlns:core="using:Microsoft.Xaml.Interactions.Core"
-        xmlns:community="using:CommunityToolkit.WinUI.UI.Controls"
         xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
         xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
         xmlns:viewModel="using:openHAB.Windows.ViewModel"
@@ -35,42 +34,26 @@
                 <Setter Property="FontSize"
                         Value="42" />
                 <Setter Property="Foreground"
-                        Value="Black" />
+                        Value="{StaticResource TextFillColorPrimaryBrush}" />
             </Style>
             <Style x:Key="BreakcrumbItemText"
                    TargetType="TextBlock">
                 <Setter Property="FontSize"
                         Value="21" />
                 <Setter Property="Foreground"
-                        Value="Black" />
+                        Value="{StaticResource TextFillColorPrimaryBrush}" />
             </Style>
             <!-- Navigation View Styling -->
-            <media:AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
-                                TintOpacity="0.7"
-                                FallbackColor="{StaticResource DarkColor}"
-                                TintColor="{StaticResource DarkColor}" />
-            <media:AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
-                                TintOpacity="0.7"
-                                FallbackColor="{StaticResource DarkColor}"
-                                TintColor="{StaticResource DarkColor}" />
-            <SolidColorBrush x:Key="NavigationViewItemForeground"
-                             Color="White" />
             <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver"
                              Color="#FFFF5722" />
-            <SolidColorBrush x:Key="NavigationViewItemForegroundPressed"
-                             Color="White" />
             <SolidColorBrush x:Key="NavigationViewItemForegroundChecked"
                              Color="#FFFF5722" />
             <SolidColorBrush x:Key="NavigationViewItemForegroundCheckedPressed"
                              Color="#FFFF5722" />
-            <SolidColorBrush x:Key="NavigationViewItemForegroundCheckedPointerOver"
-                             Color="White" />
             <SolidColorBrush x:Key="NavigationViewItemForegroundSelected"
                              Color="#FFFF5722" />
             <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPressed"
                              Color="#FFFF5722" />
-            <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver"
-                             Color="White" />
             <SolidColorBrush x:Key="NavigationViewSelectionIndicatorForeground"
                              Color="#FFFF5722" />
             <!-- Converters -->
@@ -149,7 +132,7 @@
                             Margin="10">
                     <Button Command="{Binding Vm.SelectedSitemap.ReloadSitemapCommand, ElementName=Window}">
                         <SymbolIcon Symbol="Refresh"
-                                    Foreground="Black"
+                                    Foreground="{StaticResource TextFillColorPrimaryBrush}"
                                     VerticalAlignment="Center" />
                     </Button>
                     <BreadcrumbBar ItemsSource="{Binding Vm.BreadcrumbItems, ElementName=Window, Mode=TwoWay}">
@@ -167,29 +150,72 @@
                     </BreadcrumbBar>
                 </StackPanel>
             </DataTemplate>
-            <DataTemplate x:Key="WaitListTemplate">
+            <!--<DataTemplate x:Key="WaitListTemplate">
                 <StackPanel Orientation="Horizontal"
                             Padding="12">
                     <ProgressRing IsActive="True"
                                   Margin="0,0,12,0"
-                                  Foreground="{ThemeResource OpenHABMenuColor}" />
+                                  Foreground="{StaticResource TextFillColorPrimaryBrush}" />
                     <TextBlock x:Uid="Loading"
                                VerticalAlignment="Center"
-                               Foreground="White" />
+                               Foreground="{StaticResource TextFillColorPrimaryBrush}" />
                 </StackPanel>
-            </DataTemplate>
+            </DataTemplate>-->
         </Grid.Resources>
-        <Grid.Background>
-            <ImageBrush ImageSource="ms-appx:///Assets/background.jpg"
-                        Stretch="UniformToFill" />
-        </Grid.Background>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition />
+        </Grid.RowDefinitions>
+        <Grid x:Name="AppTitleBar"
+              Grid.Row="0"
+              Height="48">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition x:Name="LeftPaddingColumn"
+                                  Width="0" />
+                <ColumnDefinition x:Name="IconColumn"
+                                  Width="Auto" />
+                <ColumnDefinition x:Name="TitleColumn"
+                                  Width="Auto" />
+                <ColumnDefinition x:Name="LeftDragColumn"
+                                  Width="*" />
+                <ColumnDefinition x:Name="SearchColumn"
+                                  Width="4*"
+                                  MinWidth="220" />
+                <ColumnDefinition x:Name="RightDragColumn"
+                                  Width="*"
+                                  MinWidth="48" />
+                <ColumnDefinition x:Name="AccountColumn"
+                                  Width="Auto" />
+                <ColumnDefinition x:Name="RightPaddingColumn"
+                                  Width="0" />
+            </Grid.ColumnDefinitions>
+            <Image x:Name="TitleBarIcon"
+                   Source="ms-appx:///Assets/openhab.png"
+                   Grid.Column="1"
+                   Width="16"
+                   Height="16"
+                   Margin="8,0,4,0" />
+            <TextBlock x:Name="TitleBarTextBlock"
+                       Text="App title"
+                       Style="{StaticResource CaptionTextBlockStyle}"
+                       Grid.Column="2"
+                       VerticalAlignment="Center"></TextBlock>
+            <AutoSuggestBox x:Name="TitleBarSearchBox"
+                            Grid.Column="4"
+                            QueryIcon="Find"
+                            PlaceholderText="Search"
+                            VerticalAlignment="Center"
+                            MaxWidth="600" />
+        </Grid>
         <muxc:NavigationView x:Name="SitemapNavigation"
+                             Grid.Row="1"
                              MenuItemsSource="{x:Bind Vm.Sitemaps, Mode=OneWay}"
                              MenuItemTemplateSelector="{StaticResource Selector}"
                              Header="{x:Bind Vm}"
                              HeaderTemplate="{StaticResource NavMenuHeaderTemplate}"
                              SelectedItem="{x:Bind Vm.SelectedMenuItem, Mode=TwoWay}"
-                             Foreground="White"
+                             Foreground="{StaticResource TextFillColorPrimaryBrush}"
+                             Background="{StaticResource AcrylicBackgroundFillColorBaseBrush}"
                              IsBackButtonVisible="Collapsed"
                              AlwaysShowHeader="True"
                              IsSettingsVisible="True"
@@ -211,14 +237,14 @@
                                    Margin="5,-3,0,0"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource MenuSubHeader}"
-                                   Foreground="{StaticResource OpenHABMenuColor}"
+                                   Foreground="{StaticResource TextFillColorPrimaryBrush}"
                                    Text="Sitemaps" />
                         <Button Grid.Column="1"
                                 Margin="0,0,10,0"
                                 HorizontalAlignment="Right"
                                 Command="{Binding Vm.RefreshCommand, ElementName=Window}">
                             <SymbolIcon Symbol="Refresh"
-                                        Foreground="White"
+                                        Foreground="{StaticResource TextFillColorPrimaryBrush}"
                                         VerticalAlignment="Center" />
                         </Button>
                     </Grid>
@@ -270,11 +296,11 @@
             </muxc:InfoBar>
         </StackPanel>
         <ProgressRing x:Name="LoadingControl"
+                      Grid.Row="1"
                       IsIndeterminate="True"
                       IsActive="{x:Bind Vm.IsDataLoading, Mode=TwoWay}"
                       HorizontalContentAlignment="Center"
-                      VerticalContentAlignment="Center"
-                      >
+                      VerticalContentAlignment="Center">
             <ProgressRing.Background>
                 <SolidColorBrush Color="Black"
                                  Opacity="0.7" />

diff --git a/src/openHAB.Windows/MainWindow.xaml.cs b/src/openHAB.Windows/MainWindow.xaml.cs
@@ -3,6 +3,8 @@
 using CommunityToolkit.Mvvm.Messaging;
 using CommunityToolkit.WinUI;
 using Microsoft.Extensions.Logging;
+using Microsoft.UI;
+using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using openHAB.Common;
@@ -12,6 +14,7 @@
 using openHAB.Windows.Services;
 using openHAB.Windows.View;
 using openHAB.Windows.ViewModel;
+using Windows.ApplicationModel;
 
 namespace openHAB.Windows
 {
@@ -38,6 +41,10 @@ public MainWindow()
             _logger = DIService.Instance.GetService<ILogger<MainPage>>();
 
             this.InitializeComponent();
+            this.ExtendsContentIntoTitleBar = true;
+            this.AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Tall;
+            this.AppWindow.TitleBar.ButtonForegroundColor = Colors.Black;
+            TitleBarTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;
 
             Vm = DIService.Instance.GetService<MainViewModel>();
             Root.DataContext = Vm;

diff --git a/src/openHAB.Windows/Styles/DefaultTheme.xaml b/src/openHAB.Windows/Styles/DefaultTheme.xaml
@@ -1,84 +1,66 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:media="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
-
     <!-- Base colors -->
     <Color x:Key="OpenHABLightOrange">#FFFF5722</Color>
     <Color x:Key="OpenHABLightGrey">#EEEEEE</Color>
     <Color x:Key="DarkColor">#344040</Color>
-
     <!-- Control base colors -->
-
-
     <SolidColorBrush x:Key="OpenHABLightGreyBrush"
                      Color="{StaticResource OpenHABLightGrey}" />
-
     <SolidColorBrush x:Key="OpenHABLightOrangeBrush"
                      Color="{StaticResource OpenHABLightOrange}" />
-
     <SolidColorBrush x:Key="OpenHABMenuColor"
                      Color="White" />
-
     <!-- Acryl colors -->
-
     <media:AcrylicBrush x:Key="DarkAcrylicColor"
                         TintOpacity="0.7"
                         FallbackColor="{StaticResource DarkColor}"
                         TintColor="{StaticResource DarkColor}" />
-
     <media:AcrylicBrush x:Key="OpenHABLightColor"
-
                         TintOpacity="0.5"
                         FallbackColor="{StaticResource OpenHABLightGrey}"
                         TintColor="{StaticResource OpenHABLightGrey}"
                         AlwaysUseFallback="False" />
-
     <media:AcrylicBrush x:Key="ErrorNotificationBackground"
                         TintOpacity="0.5"
                         FallbackColor="Red"
                         TintColor="Red"
                         AlwaysUseFallback="False" />
-
     <media:AcrylicBrush x:Key="NotificationBackground"
                         TintOpacity="0.5"
                         FallbackColor="Silver"
                         TintColor="Silver"
                         AlwaysUseFallback="False" />
-
     <Style x:Key="OpenHABGroupHeader"
+           BasedOn="{StaticResource SubtitleTextBlockStyle}"
            TargetType="TextBlock">
         <Setter Property="Foreground"
-                Value="{ThemeResource SystemAccentColor}" />
-        <Setter Property="FontSize"
-                Value="24" />
+                Value="{StaticResource AccentTextFillColorPrimaryBrush}" />
     </Style>
-
     <Style x:Key="HeaderText"
            TargetType="TextBlock">
         <Setter Property="Foreground"
                 Value="{StaticResource OpenHABMenuColor}" />
         <Setter Property="FontSize"
                 Value="24" />
     </Style>
-
-	<Style x:Key="MenuSubHeader"
-		   TargetType="TextBlock">
-		<Setter Property="Foreground"
-				Value="{StaticResource OpenHABMenuColor}" />
-		<Setter Property="FontSize"
-				Value="21" />
-	</Style>
-
-	<Style x:Key="Widget"
+    <Style x:Key="MenuSubHeader"
+           TargetType="TextBlock">
+        <Setter Property="Foreground"
+                Value="{StaticResource OpenHABMenuColor}" />
+        <Setter Property="FontSize"
+                Value="21" />
+    </Style>
+    <Style x:Key="Widget"
            TargetType="Grid">
         <Setter Property="Width"
                 Value="300" />
         <Setter Property="Height"
                 Value="100" />
         <Setter Property="Background"
-                Value="{StaticResource OpenHABLightColor}" />
+                Value="{StaticResource SolidBackgroundFillColorSecondaryBrush}" />
     </Style>
-
     <Style x:Key="SplitViewTogglePaneButtonStyle"
            TargetType="ToggleButton">
         <Setter Property="FontSize"
@@ -207,7 +189,12 @@
             </Setter.Value>
         </Setter>
     </Style>
-
-
-
+
+    <!-- Text Styles -->
+    <Style x:Key="TitleStyle"
+           BasedOn="{StaticResource TitleTextBlockStyle}"
+           TargetType="TextBlock">
+        <Setter Property="Foreground"
+                Value="{StaticResource TextFillColorPrimaryBrush}" />
+    </Style>
 </ResourceDictionary>