Skip to content

Commit

Permalink
More styling updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@Programming-With-Chris
Programming-With-Chris committed Aug 20, 2022
1 parent 97a84e5 commit 3685992
Show file tree
Hide file tree
Showing 15 changed files with 181 additions and 52 deletions.
18 changes: 17 additions & 1 deletion ShoppingList/App.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,23 @@ public App()
public void SetTheme()
{

var themeName = Preferences.Get("Theme", "Nautical");
string themeName;
var isFirstLoad = Preferences.Get("FirstLoad", true);
if (isFirstLoad)
{
var currTheme = Application.Current.RequestedTheme;
if (currTheme == AppTheme.Dark)
themeName = "Royalty";
else
themeName = "Nautical";
}
else
{
themeName = Preferences.Get("Theme", "Nautical");
}

Preferences.Set("FirstLoad", false);


ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
if (mergedDictionaries != null)
Expand Down
2 changes: 2 additions & 0 deletions ShoppingList/AppShell.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
xmlns:views="clr-namespace:ShoppingList"
Shell.BackgroundColor="{DynamicResource Primary}"
Shell.FlyoutBehavior="Flyout"
FlyoutBackgroundColor="{DynamicResource Secondary}"
Shell.TitleColor="{DynamicResource Accent}"
>

<ShellContent
Expand Down
3 changes: 2 additions & 1 deletion ShoppingList/Controls/CircularButton.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ public string Image
set => SetValue(IsVisibleProperty, value);
}

public BindableProperty ButtonColorProperty = BindableProperty.Create(
public static BindableProperty ButtonColorProperty = BindableProperty.Create(
nameof(ButtonColor), typeof(Color), typeof(CircularButton), propertyChanged: OnButtonColorChanged);

public BindableProperty ImageProperty = BindableProperty.Create(
Expand All @@ -48,6 +48,7 @@ public CircularButton()
Drawable = drawable;
}


static void OnButtonColorChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = (CircularButton)bindable;
Expand Down
Binary file added ShoppingList/Resources/Images/check.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ShoppingList/Resources/Images/x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 24 additions & 4 deletions ShoppingList/Resources/Styles/Colors.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
<Color x:Key="NeonPrimary">#0AFFC2</Color>
<Color x:Key="NeonSecondary">#00CCF5</Color>
<Color x:Key="NeonTertiary">#FF7700</Color>
<Color x:Key="NeonAccent">#F50076</Color>
<Color x:Key="NeonDarkAccent">#FFCF00</Color>
<Color x:Key="NeonAccent">#FFFFFF</Color>
<Color x:Key="NeonDarkAccent">#F50076</Color>

<!-- Striking -->
<Color x:Key="StrikingPrimary">#3D5A80</Color>
Expand All @@ -49,16 +49,36 @@
<Color x:Key="MutedPrimary">#355070</Color>
<Color x:Key="MutedSecondary">#6D597A</Color>
<Color x:Key="MutedTertiary">#B56576</Color>
<Color x:Key="MutedAccent">#E56B6F</Color>
<Color x:Key="MutedAccent">#e3b8ba</Color>
<Color x:Key="MutedDarkAccent">#EAAC8B</Color>

<!-- Pretty -->
<Color x:Key="PrettyPrimary">#AF99FF</Color>
<Color x:Key="PrettySecondary">#CAADFF</Color>
<Color x:Key="PrettyTertiary">#FFC2E2</Color>
<Color x:Key="PrettyAccent">#FFADC7</Color>
<Color x:Key="PrettyAccent">#FFFFFF</Color>
<Color x:Key="PrettyDarkAccent">#FF99B6</Color>

<!-- Royalty -->
<Color x:Key="RoyaltyPrimary">#3A015C</Color>
<Color x:Key="RoyaltySecondary">#4F0147</Color>
<Color x:Key="RoyaltyTertiary">#35012C</Color>
<Color x:Key="RoyaltyAccent">#6f5c73</Color>
<Color x:Key="RoyaltyDarkAccent">#11001C</Color>

<!-- DeepRed -->
<Color x:Key="DeepRedPrimary">#680808</Color>
<Color x:Key="DeepRedSecondary">#420000</Color>
<Color x:Key="DeepRedTertiary">#300000</Color>
<Color x:Key="DeepRedAccent">#995a62</Color>
<Color x:Key="DeepRedDarkAccent">#000000</Color>

<!-- Depression -->
<Color x:Key="DepressionPrimary">#1B2A41</Color>
<Color x:Key="DepressionSecondary">#0C1821</Color>
<Color x:Key="DepressionTertiary">#000000</Color>
<Color x:Key="DepressionAccent">#385075</Color>
<Color x:Key="DepressionDarkAccent">#0C1821</Color>

<SolidColorBrush x:Key="PrimaryBrush" Color="{DynamicResource Primary}"/>
<SolidColorBrush x:Key="SecondaryBrush" Color="{DynamicResource Secondary}"/>
Expand Down
4 changes: 2 additions & 2 deletions ShoppingList/Resources/Styles/Styles.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@
</Style>

<Style TargetType="Label">
<Setter Property="TextColor" Value="{AppThemeBinding Light={DynamicResource Tertiary}, Dark={DynamicResource Tertiary}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={DynamicResource Accent}, Dark={DynamicResource Accent}}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="FontSize" Value="14" />
<Setter Property="VisualStateManager.VisualStateGroups">
Expand All @@ -156,7 +156,7 @@
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
<Setter Property="TextColor" Value="{AppThemeBinding Light={DynamicResource Accent}, Dark={DynamicResource Accent}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down
4 changes: 4 additions & 0 deletions ShoppingList/ShoppingList.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@
<MauiCss Remove="Tests\**" />
<MauiXaml Remove="Tests\**" />
<None Remove="Tests\**" />
<MauiImage Remove="Resources\Images\check.png" />
<MauiImage Remove="Resources\Images\x.png" />
<None Remove="SQLiteNetExtensions" />
<None Remove="Microsoft.Data.Sqlite.Core" />
<None Remove="sqlite-net-pcl" />
Expand Down Expand Up @@ -139,8 +141,10 @@
</ItemGroup>

<ItemGroup>
<EmbeddedResource Include="Resources\Images\check.png" />
<EmbeddedResource Include="Resources\Images\plus_sign.png" />
<EmbeddedResource Include="Resources\Images\undo.png" />
<EmbeddedResource Include="Resources\Images\x.png" />
</ItemGroup>

<!--<ItemGroup Condition="'$(TargetFramework)' == 'net6.0-android'">
Expand Down
10 changes: 5 additions & 5 deletions ShoppingList/View/MainPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</SwipeItem>
</SwipeItems>
</SwipeView.RightItems>
<Frame>
<Frame BackgroundColor="{DynamicResource Tertiary}">
<Frame.GestureRecognizers>
<TapGestureRecognizer CommandParameter="{Binding .}"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:UserListViewModel}}, Path=GoToListItemsCommand}"/>
Expand All @@ -45,10 +45,10 @@
<VerticalStackLayout>
<Label Text="{Binding Name}"
FontSize="Medium"
TextColor="{DynamicResource Secondary}"/>
TextColor="{DynamicResource Accent}"/>
<Label Text="{Binding Type}"
FontSize="Micro"
TextColor="{DynamicResource Secondary}"
TextColor="{DynamicResource Accent}"
Margin="25,0,0,0"/>
</VerticalStackLayout>
</Frame>
Expand Down Expand Up @@ -83,8 +83,8 @@
x:Name="NewItemButton"
WidthRequest="75"
HeightRequest="75"
Margin="0,0,45,45"
ButtonColor="{StaticResource Tertiary}"
Margin="25,25,25,25"
ButtonColor="{DynamicResource Tertiary}"
BackgroundColor="Transparent"
Image="plus_sign.png"
VerticalOptions="End"
Expand Down
73 changes: 65 additions & 8 deletions ShoppingList/View/SettingsView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,37 +20,41 @@
Spacing="10"
Grid.ColumnSpan="3">

<Border BackgroundColor="{DynamicResource Primary}"
>
<Label Text="List Sorting Settings"
<Border BackgroundColor="{DynamicResource Primary}" Margin="0,25,0,0">
<Label Text="List Sorting Settings"
TextColor="{DynamicResource Accent}"
Margin="5,15,15,15"
Padding="10"/>
</Border>

<HorizontalStackLayout
Margin="25,0,0,0"
Grid.ColumnSpan="3">
<Label Text="Start at back of store?"/>
<Label Text="Start at back of store?"
TextColor="{DynamicResource Accent}"/>
<CheckBox IsChecked="{Binding StartAtBackOfStore}"
Color="{DynamicResource Tertiary}"
Color="{DynamicResource Accent}"
HorizontalOptions="Center"
Grid.Column="2"/>
</HorizontalStackLayout>

<HorizontalStackLayout
Margin="25,0,0,0"
Grid.ColumnSpan="3">
<Label Text="Get Frozen Aisle Food Last?" />
<Label Text="Get Frozen Aisle Food Last?"
TextColor="{DynamicResource Accent}"/>
<CheckBox IsChecked="{Binding FrozenFoodLast}"
Color="{DynamicResource Tertiary}"
Color="{DynamicResource Accent}"
Grid.Column="2"/>
</HorizontalStackLayout>

<HorizontalStackLayout
Margin="25,0,0,0">
<Label Text="Default Kroger Location:"
TextColor="{DynamicResource Accent}"
Margin="0,0,25,0"/>
<Label Text="{Binding KrogerStoreName}"
TextColor="{DynamicResource Accent}"
BackgroundColor="{DynamicResource Primary}"
>
<Label.GestureRecognizers>
Expand All @@ -63,12 +67,14 @@

<Border BackgroundColor="{DynamicResource Primary}" Margin="0,25,0,0">
<Label Text="Other Settings"
TextColor="{DynamicResource Accent}"
Margin="5,15,15,15"
Padding="10"/>
</Border>

<Label Margin="25,0,0,0"
Text="Primary Theme Color:"
TextColor="{DynamicResource Accent}"
Text="Light Themes:"
>
</Label>

Expand Down Expand Up @@ -143,6 +149,57 @@

</HorizontalStackLayout>

<Label Margin="25,0,0,0"
Text="Dark Themes:"
TextColor="{DynamicResource Accent}"
>
</Label>

<HorizontalStackLayout Padding="25"
Margin="25,0,0,0">
<control:CircularButton ButtonColor="{StaticResource RoyaltyPrimary}"
WidthRequest="30"
HeightRequest="30"
IsVisible="True"
BackgroundColor="Transparent"
Margin="25,0,0,25"
x:Name="Royalty">

<control:CircularButton.GestureRecognizers>
<TapGestureRecognizer Command="{Binding UpdatePrimaryColorPressedCommand}"
CommandParameter="Royalty"/>
</control:CircularButton.GestureRecognizers>

</control:CircularButton>
<control:CircularButton ButtonColor="{StaticResource DeepRedPrimary}"
WidthRequest="30"
HeightRequest="30"
Margin="25,0,0,25"
BackgroundColor="Transparent"
x:Name="DeepRed">

<control:CircularButton.GestureRecognizers>
<TapGestureRecognizer Command="{Binding UpdatePrimaryColorPressedCommand}"
CommandParameter="DeepRed"/>
</control:CircularButton.GestureRecognizers>

</control:CircularButton>
<control:CircularButton ButtonColor="{StaticResource DepressionPrimary}"
WidthRequest="30"
HeightRequest="30"
Margin="25,0,0,25"
BackgroundColor="Transparent"
x:Name="Depression">

<control:CircularButton.GestureRecognizers>
<TapGestureRecognizer Command="{Binding UpdatePrimaryColorPressedCommand}"
CommandParameter="Depression"/>
</control:CircularButton.GestureRecognizers>

</control:CircularButton>

</HorizontalStackLayout>

</VerticalStackLayout>


Expand Down
1 change: 1 addition & 0 deletions ShoppingList/View/StoreFinder.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
<Button Text="Cancel"
Grid.Row="2"
Grid.Column="1"
Margin="25,25,25,25"
Command="{Binding CancelQueryCommand}"
BackgroundColor="{DynamicResource Primary}"/>

Expand Down
Loading

0 comments on commit 3685992

Please sign in to comment.