Skip to content
Snippets Groups Projects
Commit f58b5311 authored by Paul-Winpenny's avatar Paul-Winpenny
Browse files

Added additionl styles, fonts and icon

parent 5d577645
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 287 additions and 104 deletions
App/RobobinApp/App.xaml
+ 14
− 0
View file @ f58b5311
......@@ -12,5 +12,19 @@
<StyleSheet Source="/Resources/Styles/appstyle.css" />
</ResourceDictionary>
<ResourceDictionary>
<Style TargetType="Label">
<Setter Property="FontFamily" Value="Cabal" />
<Setter Property="FontSize" Value="16" />
<Setter Property="TextColor" Value="#E8EDF1" />
<Setter Property="Margin" Value="10" />
</Style>
<Style TargetType="Button">
<Setter Property="FontFamily" Value="Cabal" />
<Setter Property="FontSize" Value="16" />
<Setter Property="TextColor" Value="#E8EDF1" />
<Setter Property="Margin" Value="10" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
App/RobobinApp/MauiProgram.cs
+ 2
− 0
View file @ f58b5311
......@@ -16,6 +16,8 @@ public static class MauiProgram
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
// fonts.AddFont("Cabal-w5j3.tff", "Atop");
fonts.AddFont("Cabal-w5j3.tff", "Cabal");
});
......
App/RobobinApp/Resources/AppIcon/RobobinLogo.png 0 → 100644
+ 0
− 0
View file @ f58b5311
App/RobobinApp/Resources/AppIcon/RobobinLogo.png

19.3 KiB

App/RobobinApp/Resources/Fonts/Cabal-w5j3.ttf 0 → 100644
+ 0
− 0
View file @ f58b5311
File added
App/RobobinApp/Resources/Styles/Styles.xaml
+ 1
− 1
View file @ f58b5311
......@@ -5,7 +5,7 @@
<Style x:Key="TopBarButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="#E4E4E4"/>
<Setter Property="TextColor" Value="#333333"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Padding" Value="10,5"/>
<Setter Property="CornerRadius" Value="5"/>
<Setter Property="BorderWidth" Value="0.5"/>
......
App/RobobinApp/Resources/Styles/appstyle.css
+ 75
− 16
View file @ f58b5311
navigationpage {
-maui-bar-background-color: lightgray;

navigationpage {
-maui-bar-background-color: #647687;
-maui-bar-text-color: #FFFFFF;
}
^contentpage {
background-color: lightgray;
}
#listView {
background-color: lightgray;
background-color: #2B333E;
color: #E8EDF1;
}
/* Layout Styling */
stacklayout {
margin: 20;
-maui-spacing: 6;
......@@ -20,47 +20,84 @@ grid {
column-gap: 6;
}
.mainPageTitle {
font-style: bold;
font-size: 14;
font-size: 18;
color: #E8EDF1;
}
.mainPageSubtitle {
font-size: 16;
color: #A3B4C6;
margin-top: 15;
}
.detailPageTitle {
font-style: bold;
font-size: 14;
font-size: 16;
text-align: center;
color: #E8EDF1;
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
font-size: 14;
color: #A3B4C6;
}
#listView {
background-color: #2B333E;
separator-color: #A3B4C6;
color: #E8EDF1;
}
listview image {
height: 60;
width: 60;
border-radius: 8;
}
stacklayout > image {
height: 200;
width: 200;
border-radius: 10;
border-color: #647687;
}
.mainFrame {
background-color: White;
border-color: Black;
background-color: white;
border-color: #647687;
corner-radius: 5;
padding: 15;
}
.sideFrame {
.primaryFrame {
background-color: #2B333E;
border-color: Black;
border-color: #647687;
corner-radius: 8;
padding: 10;
}
.button-primary {
background-color: #647687;
color: #FFFFFF;
padding: 10 5;
corner-radius: 5;
font-style: bold;
}
.button-secondary {
background-color: #A3B4C6;
color: #FFFFFF;
padding: 8 4;
corner-radius: 5;
font-style: bold;
}
.sideBox {
margin: 0;
padding: 0;
......@@ -75,7 +112,7 @@ stacklayout > image {
}
.side-box-header {
background-color: #647687;
background-color: #647687;
padding: 10 5;
}
......@@ -88,13 +125,35 @@ stacklayout > image {
background-color: #E8EDF1;
padding: 10;
height: 200;
color: #2B333E;
}
.side-box-content Label {
.side-box-content label {
margin: 0;
padding: 0;
}
.side-box-vertical-stack {
spacing: 0;
}
\ No newline at end of file
}
.card {
background-color: #2B333E;
border-color: #647687;
corner-radius: 8;
padding: 15;
}
.card-header {
background-color: #647687;
padding: 10 5;
font-size: 16;
font-style: bold;
color: #FFFFFF;
}
.card-content {
background-color: #E8EDF1;
padding: 10;
}
App/RobobinApp/Resources/Styles/appstylepink.css 0 → 100644
+ 146
− 0
View file @ f58b5311
/* Navigation and Page Backgrounds */
navigationpage {
-maui-bar-background-color: #D5006D; /* Bright pink accent */
-maui-bar-text-color: #FFFFFF; /* White text for contrast */
}
^contentpage {
background-color: #FCE4EC; /* Light pink background */
color: #880E4F; /* Darker pink for text */
}
/* Layout Styling */
stacklayout {
margin: 20;
-maui-spacing: 6;
}
grid {
row-gap: 6;
column-gap: 6;
}
/* Title and Subtitle Styling */
.mainPageTitle {
font-style: bold;
font-size: 18; /* Increased for main titles */
color: #880E4F; /* Darker pink for visibility */
}
.mainPageSubtitle {
font-size: 16;
color: #AD1457; /* Medium pink */
margin-top: 15;
}
.detailPageTitle {
font-style: bold;
font-size: 16;
text-align: center;
color: #880E4F; /* Darker pink */
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
font-size: 14;
color: #AD1457; /* Medium pink */
}
/* ListView and Image Styling */
#listView {
background-color: #FCE4EC; /* Match background */
separator-color: #AD1457; /* Medium pink separator */
color: #880E4F; /* Darker pink for text */
}
listview image {
height: 60;
width: 60;
border-radius: 8; /* Rounded corners for consistency */
}
stacklayout > image {
height: 200;
width: 200;
border-radius: 10;
border-color: #D5006D; /* Bright pink for image border */
}
/* Frame Styling */
.mainFrame {
background-color: white; /* Keep it white for contrast */
border-color: #D5006D; /* Bright pink border */
corner-radius: 5;
padding: 15;
}
.primaryFrame {
background-color: #FCE4EC; /* Light pink for cohesive look */
border-color: #D5006D; /* Bright pink border */
corner-radius: 8;
padding: 10;
}
/* Button Styling */
.button-primary {
background-color: #D5006D; /* Bright pink */
color: #FFFFFF; /* White text */
padding: 10 5;
corner-radius: 5;
font-style: bold;
}
.button-secondary {
background-color: #F8BBD0; /* Lighter pink accent */
color: #FFFFFF; /* White text */
padding: 8 4;
corner-radius: 5;
font-style: bold;
}
/* SideBox Styling */
.sideBox {
margin: 0;
padding: 0;
}
.side-box-frame {
margin: 10;
padding: 0;
background-color: transparent;
border-color: transparent;
horizontal-options: fill-and-expand;
}
.side-box-header {
background-color: #D5006D; /* Bright pink for header */
padding: 10 5;
}
.side-box-header-text {
color: #FFFFFF; /* White text */
font-size: 16;
}
.side-box-content {
background-color: #FCE4EC; /* Light pink */
padding: 10;
height: 200;
color: #880E4F; /* Darker pink for readability */
}
.side-box-content label {
margin: 0;
padding: 0;
}
.side-box-vertical-stack {
spacing: 0;
}
/* Card Styling */
.card {
background-color: #FCE4EC; /* Light pink */
border-color: #D5006D; /* Bright pink */
corner-radius: 8
App/RobobinApp/RobobinApp.csproj
+ 1
− 1
View file @ f58b5311
......@@ -20,7 +20,7 @@
</PropertyGroup>
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
<MauiIcon Include="Resources\AppIcon\robobinlogo.png"/>
<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
<MauiImage Include="Resources\Images\*" />
<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />
......
App/RobobinApp/Views/ConnectionPage.xaml
+ 48
− 84
View file @ f58b5311
......@@ -2,34 +2,12 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RobobinApp.Views.ConnectionPage"
Title="Connect to Robobin">
Title="Connect to Robobin"
BackgroundColor="#2B333E">
<!-- Apply the CSS stylesheet -->
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="HeaderLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="Medium" />
<Setter Property="TextColor" Value="DarkSlateBlue" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Start" />
</Style>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="LightBlue" />
<Setter Property="TextColor" Value="White" />
<Setter Property="Padding" Value="10,5" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
<Style x:Key="ListViewStyle" TargetType="ListView">
<Setter Property="BackgroundColor" Value="White" />
<Setter Property="SeparatorVisibility" Value="Default" />
<Setter Property="SeparatorColor" Value="LightGray" />
<Setter Property="SelectedItem" Value="Blue" />
<Setter Property="VerticalScrollBarVisibility" Value="Always"/>
</Style>
<StyleSheet Source="/Resources/Styles/appstyle.css" />
</ResourceDictionary>
</ContentPage.Resources>
......@@ -40,18 +18,18 @@
</ContentPage.MenuBarItems>
<StackLayout Padding="20">
<StackLayout IsVisible="{Binding IsBluetoothDeviceSelectionVisible}">
<Label Text="Select a Bluetooth Device"
FontSize="Medium"
HorizontalOptions="Center"
VerticalOptions="Start" />
<!-- Bluetooth Device Selection Stack -->
<StackLayout StyleClass="mainBox" IsVisible="{Binding IsBluetoothDeviceSelectionVisible}">
<Label StyleClass="mainPageSubtitle" HorizontalOptions="CenterAndExpand" Text="Select a Bluetooth Device" />
<ListView x:Name="DeviceListView"
StyleClass="listView"
ItemsSource="{Binding BluetoothDevices}"
SelectedItem="{Binding SelectedDevice}"
VerticalOptions="FillAndExpand"
ItemTapped="DeviceListView_ItemTapped">
ItemTapped="DeviceListView_ItemTapped"
HorizontalOptions="CenterAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
......@@ -59,42 +37,38 @@
</ListView.ItemTemplate>
</ListView>
<Button Text="{Binding ConnectButtonText}"
Command="{Binding ConnectCommand}"
IsEnabled="{Binding SelectedDevice, Converter={StaticResource NullToBooleanConverter}}"
HorizontalOptions="Center"
VerticalOptions="End" />
<Button Text="{Binding ConnectButtonText}"
Command="{Binding ConnectCommand}"
IsEnabled="{Binding SelectedDevice, Converter={StaticResource NullToBooleanConverter}}"
StyleClass="button-primary"
HorizontalOptions="Center" />
</StackLayout>
<StackLayout IsVisible="{Binding IsWifiNetworkSelectionVisible}">
<Grid Padding="10" HorizontalOptions="FillAndExpand">
<!-- WiFi Network Selection Stack -->
<StackLayout StyleClass="mainBox" IsVisible="{Binding IsWifiNetworkSelectionVisible}">
<Grid Padding="10" HorizontalOptions="CenterAndExpand" StyleClass="primaryFrame">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="{Binding SelectedDevice.Name}"
FontSize="Medium"
HorizontalOptions="Start"
VerticalOptions="Center"
<Label Text="{Binding SelectedDevice.Name}"
StyleClass="mainPageTitle"
Grid.Column="0" />
<Button Text="Disconnect"
Command="{Binding DisconnectCommand}"
HorizontalOptions="End"
VerticalOptions="Center"
<Button Text="Disconnect"
Command="{Binding DisconnectCommand}"
StyleClass="button-primary"
Grid.Column="1" />
</Grid>
<Label Text="Select a WiFi Network"
FontSize="Medium"
HorizontalOptions="Center"
VerticalOptions="Start" />
<Label StyleClass="mainPageSubtitle" Text="Select a WiFi Network" />
<ListView x:Name="WifiListView"
ItemsSource="{Binding WifiNetworks}"
SelectedItem="{Binding SelectedWifiNetwork}"
VerticalOptions="FillAndExpand">
VerticalOptions="FillAndExpand"
HorizontalOptions="CenterAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding SSID}" />
......@@ -102,41 +76,31 @@
</ListView.ItemTemplate>
</ListView>
<StackLayout Padding="10"
BackgroundColor="LightGray"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start">
<Label Text="Password:"
FontSize="Medium"
HorizontalOptions="Start" />
<Entry x:Name="PasswordEntry"
Placeholder="Enter Password"
Text="{Binding Password}"
IsPassword="True"
<!-- Password Entry for WiFi -->
<StackLayout StyleClass="side-box-content">
<Label StyleClass="side-box-header-text" Text="Password:" />
<Entry x:Name="PasswordEntry"
Placeholder="Enter Password"
Text="{Binding Password}"
IsPassword="True"
HorizontalOptions="Fill" />
<Button Text="Send WiFi Information"
Command="{Binding SendWifiInfoCommand}"
HorizontalOptions="Center"
VerticalOptions="End" />
<Button Text="Send WiFi Information"
Command="{Binding SendWifiInfoCommand}"
StyleClass="button-primary"
HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
<StackLayout Padding="10"
BackgroundColor="Black"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start">
<Label Text="Admin Panel:"
FontSize="Medium"
HorizontalOptions="Start" />
<Button Text= "Test Read Operation"
Command="{Binding TestReadOperation}"
HorizontalOptions="Center"
VerticalOptions="End" />
<Button Text="Test Write Operation"
Command="{Binding TestWriteOperation}"
HorizontalOptions="Center"
VerticalOptions="End" />
<!-- Admin Panel Section -->
<StackLayout StyleClass="sideFrame" Padding="10">
<Label StyleClass="side-box-header-text" Text="Admin Panel:" />
<Button Text="Test Read Operation"
Command="{Binding TestReadOperation}"
StyleClass="button-primary" />
<Button Text="Test Write Operation"
Command="{Binding TestWriteOperation}"
StyleClass="button-primary" />
</StackLayout>
</StackLayout>
</ContentPage>
App/RobobinApp/Views/MainPage.xaml
+ 0
− 2
View file @ f58b5311
......@@ -13,8 +13,6 @@
<ContentPage.Resources>
<ResourceDictionary>
<ResourceDictionary Source="../Resources/Styles/Styles.xaml" />
<StyleSheet Source="/Resources/Styles/appstyle.css" />
</ResourceDictionary>
</ContentPage.Resources>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment