First pass at modal dialog

This commit is contained in:
watsonb8 2019-12-07 13:47:45 -05:00
parent 3576a906e2
commit 01736333e9
21 changed files with 327 additions and 32 deletions

View File

@ -45,6 +45,8 @@
<Folder Include="Resources\" />
<Folder Include="Design\Extensions\" />
<Folder Include="Design\Components\ImageButton\" />
<Folder Include="Design\Components\Dialogs\" />
<Folder Include="Design\Views\Party\NewPartyDialog\" />
</ItemGroup>
<ItemGroup>
<Compile Remove="Design\Behaviors\DeselectItemBehaviorBase.cs" />

View File

@ -16,7 +16,8 @@
x:Name="_headerView"
RowSpacing="0">
<Grid.Resources>
<ResourceDictionary><!--Default Header Style-->
<ResourceDictionary>
<!--Default Header Style-->
<Style
x:Key="HeaderDefaultStyle"
TargetType="Label">

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Aurora.Design.Components.Dialogs.Modal"
BackgroundColor="Blue">
<ContentView.Content>
<ContentPresenter
x:Name="ViewContent"/>
</ContentView.Content>
</ContentView>

View File

@ -0,0 +1,14 @@
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace Aurora.Design.Components.Dialogs
{
public partial class Modal : ContentView
{
public Modal()
{
InitializeComponent();
}
}
}

View File

@ -12,7 +12,6 @@
<StackLayout
Grid.Row="0"
x:Name="CredentialEditorLayout"
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Start">
<Label
@ -20,14 +19,18 @@
VerticalOptions="Center"/>
<Entry
x:Name="HostnameEntry"/>
<Button
HorizontalOptions="Center"
x:Name="buttonHost"
Text="Host"/>
<Button
HorizontalOptions="Center"
x:Name="buttonClient"
Text="Join"/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center">
<Button
HorizontalOptions="Center"
x:Name="buttonHost"
Text="Host"/>
<Button
HorizontalOptions="Center"
x:Name="buttonClient"
Text="Join"/>
</StackLayout>
</StackLayout>
</Grid>
</ContentView.Content>

View File

@ -3,9 +3,5 @@
text-align: left;
vertical-align: middle;
word-wrap: break-word;
}
HeaderLaberStyle {
text-align: left;
color: red;
font-size: 14;
}

View File

@ -18,15 +18,27 @@ Label {
#MediaInfoContainer label {
margin-left: 20;
}
#AlbumArtBoxView {
background-color: black;
width: 80;
}
ImageButton {
margin-top: 10;
margin-left: 20;
margin-right: 20;
margin-bottom: 10;
.PlayButton {
width: 40;
}
.DirectionButton {
width: 30;
}
.LibraryButton {
width: 25;
}
ImageButton {
margin-top: 10;
margin-left: 15;
margin-right: 15;
margin-bottom: 10;
}

View File

@ -39,14 +39,25 @@
Grid.Column="1"
HorizontalOptions="Center"
Orientation="Horizontal">
<imgBtn:ImageButton
x:Name="ShuffleButton"
StyleClass="LibraryButton"
Source="Resources/shuffle.png"/>
<imgBtn:ImageButton
x:Name="PreviousButton"
StyleClass="DirectionButton"
Source="Resources/backward.png"/>
<imgBtn:ImageButton
x:Name="PlayButton"/>
x:Name="PlayButton"
StyleClass="PlayButton"/>
<imgBtn:ImageButton
x:Name="NextButton"
StyleClass="DirectionButton"
Source="Resources/forwards.png"/>
<imgBtn:ImageButton
x:Name="LoopButton"
StyleClass="LibraryButton"
Source="Resources/loop.png"/>
</StackLayout>
</Grid>
</ContentView.Content>

View File

@ -0,0 +1,15 @@
using System;
using Aurora.Design.Views.Main;
namespace Aurora.Design.Views
{
public class BaseDialogViewModel : BaseViewModel
{
public BaseDialogViewModel()
{
}
public FinishDialogDelegate Finish { get; set; }
public DialogReturnType ReturnObject { get; protected set; }
}
}

View File

@ -56,6 +56,8 @@ namespace Aurora.Design.Views
/// <value></value>
public GetIsPlayingDelegate IsPlaying { get; set; }
public ShowModalDelegate<object> ShowModal { get; set; }
#endregion Player

View File

@ -0,0 +1,7 @@
namespace Aurora.Design.Views
{
public class DialogReturnType
{
}
}

View File

@ -4,6 +4,7 @@
#Header {
background-color: transparent;
margin-top: 10;
}
#Header > Entry {
@ -27,3 +28,11 @@
#Player {
background-color: #626363;
}
#Modal {
height: 500;
width: 400;
margin-top: 20;
margin-bottom: 20;
border-radius: 15;
}

View File

@ -5,6 +5,7 @@
xmlns:views="clr-namespace:Aurora.Design.Views.MainView"
xmlns:navigation="clr-namespace:Aurora.Design.Components.NavigationMenu"
xmlns:mp="clr-namespace:Aurora.Design.Components.MediaPlayer"
xmlns:dialog="clr-namespace:Aurora.Design.Components.Dialogs"
x:Class="Aurora.Design.Views.Main.MainView">
<ContentPage.Resources>
<StyleSheet
@ -12,8 +13,8 @@
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
<RowDefinition Height="28"/>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
@ -52,12 +53,20 @@
Grid.Row="2"
x:Name="ContentPage"/>
<!--Modal Dialog-->
<dialog:Modal x:Name="Modal"
BackgroundColor="Blue"
Grid.Column="1"
Grid.Row="2"
HorizontalOptions="Center"
VerticalOptions="End"/>
<!--Music Player-->
<mp:Player
x:Name="Player"
Grid.Row="3"
Grid.ColumnSpan="2"
HeightRequest="50"/>
HeightRequest="60"/>
</Grid>
</ContentPage>

View File

@ -1,6 +1,7 @@
using System;
using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Linq;
using Aurora.Design.Components.NavigationMenu;
using Aurora.Design.Views.MainView;
@ -9,6 +10,7 @@ using Xamarin.Forms.Xaml;
using Aurora.Models.Media;
using Aurora.Design.Components.MediaPlayer;
using Aurora.Services.PlayerService;
using System.Threading;
namespace Aurora.Design.Views.Main
{
@ -24,8 +26,10 @@ namespace Aurora.Design.Views.Main
/// Delegate for updating player metadata
/// </summary>
/// <param name="media"></param>
public delegate void SetPlayerDelegate(BaseMedia media, PlayAction action);
public delegate Task SetPlayerDelegate(BaseMedia media, PlayAction action);
public delegate bool GetIsPlayingDelegate();
public delegate Task<object> ShowModalDelegate<T>(Type view, Type viewModel);
public delegate void FinishDialogDelegate();
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainView : ContentPage//, IDisposable
@ -43,6 +47,7 @@ namespace Aurora.Design.Views.Main
_viewModels = new Dictionary<int, BaseViewModel>();
_playerComponent = Player;
_viewContent = (ContentPresenter)ContentPage.Content.FindByName("ViewContent");
_playerService = PlayerService.Instance;
@ -88,6 +93,10 @@ namespace Aurora.Design.Views.Main
}
//Assign player controls to viewmodel
AssignPlayerControls(vm);
ChangeModalVisiblity(false);
//Activate viewmodel
vm.OnActive();
@ -99,8 +108,6 @@ namespace Aurora.Design.Views.Main
//Assign viewModel
_lastViewModel = vm;
view.BindingContext = vm;
//Assign player controls to viewmodel
AssignPlayerControls(vm);
_viewContent.Content = view;
}
@ -134,6 +141,7 @@ namespace Aurora.Design.Views.Main
view.BindingContext = vm;
_lastViewModel = vm;
AssignPlayerControls(vm);
ChangeModalVisiblity(false);
vm.OnActive();
_viewContent.Content = view;
@ -149,6 +157,7 @@ namespace Aurora.Design.Views.Main
{
vm.ChangePlayerState = null;
vm.IsPlaying = null;
vm.ShowModal = null;
}
/// <summary>
@ -161,13 +170,13 @@ namespace Aurora.Design.Views.Main
_playerComponent.NextButtonCommand = new Command(vm.OnNextButtonExecute, vm.CanNextButtonExecute);
_playerComponent.PreviousButtonCommand = new Command(vm.OnPreviousButtonExecute, vm.CanPreviousButtonExecute);
//Assign SetPlayer delegate
vm.ChangePlayerState = ChangePlayerState;
vm.IsPlaying = () =>
{
return _playerService.PlaybackState == PlaybackState.Playing;
};
vm.ShowModal = this.ShowModal<object>;
}
/// <summary>
@ -176,7 +185,7 @@ namespace Aurora.Design.Views.Main
/// <param name="media"></param>
/// <param name="action"></param>
/// <returns></returns>
private async void ChangePlayerState(BaseMedia media, PlayAction action)
private async Task ChangePlayerState(BaseMedia media, PlayAction action)
{
if (media != null && media.Metadata is AudioMetadata)
{
@ -224,5 +233,42 @@ namespace Aurora.Design.Views.Main
}
}
private Task<object> ShowModal<T>(Type view, Type viewModel)
{
return Task<object>.Run(() =>
{
object returnObj = null;
ContentPresenter modalContainer = (ContentPresenter)Modal.FindByName("ViewContent");
var vw = (View)Activator.CreateInstance(view);
BaseDialogViewModel vm = (BaseDialogViewModel)Activator.CreateInstance(viewModel);
vw.BindingContext = vm;
//Set modal container content
modalContainer.Content = vw;
//Set visibility
ChangeModalVisiblity(true);
AutoResetEvent autoResetEvent = new AutoResetEvent(false);
//Finish is executed by modal
vm.Finish = () =>
{
ChangeModalVisiblity(false);
returnObj = vm.ReturnObject;
autoResetEvent.Set();
};
autoResetEvent.WaitOne();
return returnObj;
});
}
private void ChangeModalVisiblity(bool isVisible)
{
ContentPage.IsVisible = !isVisible;
Modal.IsVisible = isVisible;
}
}
}

View File

@ -0,0 +1,20 @@
using System;
namespace Aurora.Design.Views.Party.NewPartyDialog
{
public enum ConnectionType
{
Host,
Join
}
public class ConnectionDetails : DialogReturnType
{
public ConnectionDetails()
{
}
public string HostName { get; set; }
public ConnectionType ConnectionType { get; set; }
}
}

View File

@ -0,0 +1,7 @@
#Container {
background-color: red;
}
Button {
background-color: red;
}

View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Aurora.Design.Views.Party.NewPartyDialog.NewPartyDialog">
<ContentView.Resources>
<StyleSheet
Source="NewPartyDialog.css"/>
</ContentView.Resources>
<ContentView.Content>
<StackLayout
x:Name="Container"
BackgroundColor="blue"
HorizontalOptions="Center"
VerticalOptions="Start">
<Label
Text="Hostname"
VerticalOptions="Center"/>
<Entry
Text="{Binding Hostname}"
x:Name="HostnameEntry"/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center">
<Button
HorizontalOptions="Center"
x:Name="buttonHost"
Text="Host"
Command="{Binding HostCommand}"/>
<Button
HorizontalOptions="Center"
x:Name="buttonClient"
Text="Join"
Command="{Binding JoinCommand}"/>
</StackLayout>
</StackLayout>
</ContentView.Content>
</ContentView>

View File

@ -0,0 +1,14 @@
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace Aurora.Design.Views.Party.NewPartyDialog
{
public partial class NewPartyDialog : ContentView
{
public NewPartyDialog()
{
InitializeComponent();
}
}
}

View File

@ -0,0 +1,71 @@
using System;
using Xamarin.Forms;
namespace Aurora.Design.Views.Party.NewPartyDialog
{
public class NewPartyDialogViewModel : BaseDialogViewModel
{
public NewPartyDialogViewModel()
{
this.ReturnObject = new ConnectionDetails();
HostCommand = new Command(OnHostExecute, OnHostCanExecute);
JoinCommand = new Command(OnJoinExecute, OnJoinCanCanExecute);
}
public string Hostname
{
get
{
if (ReturnObject is ConnectionDetails)
{
ConnectionDetails obj = ReturnObject as ConnectionDetails;
return obj.HostName;
};
return string.Empty;
}
set
{
if (ReturnObject is ConnectionDetails)
{
ConnectionDetails obj = ReturnObject as ConnectionDetails;
if (value != obj.HostName)
{
obj.HostName = value;
}
OnPropertyChanged(Hostname);
HostCommand.ChangeCanExecute();
JoinCommand.ChangeCanExecute();
}
}
}
public void OnHostExecute()
{
ConnectionDetails obj = base.ReturnObject as ConnectionDetails;
obj.ConnectionType = ConnectionType.Host;
Finish();
}
public Command HostCommand { get; private set; }
public Command JoinCommand { get; private set; }
public bool OnHostCanExecute()
{
return string.IsNullOrWhiteSpace(Hostname);
}
public void OnJoinExecute()
{
ConnectionDetails obj = base.ReturnObject as ConnectionDetails;
obj.ConnectionType = ConnectionType.Join;
Finish();
}
public bool OnJoinCanCanExecute()
{
return !string.IsNullOrWhiteSpace(Hostname);
}
}
}

View File

@ -27,12 +27,13 @@
SelectedItem="{Binding SelectedSong}"
ItemDoubleClicked="{Binding PlayCommand}"/>
</StackLayout>
<hs:HostSelector
<!--<hs:HostSelector
Grid.Row="0"
x:Name="HostSelectionDialog"
Hostname="{Binding Hostname}"
HostCommand="{Binding HostCommand}"
JoinCommand="{Binding JoinCommand}"
IsVisible="{Binding IsSelectingHost}"/>
IsVisible="{Binding IsSelectingHost}"/>-->
</Grid>
</ContentView.Content>
</ContentView>

View File

@ -12,6 +12,7 @@ using Aurora.Services.ClientService.Events;
using Aurora.Services.PlayerService;
using Aurora.Services.EventManager;
using Aurora.Models.Media;
using Aurora.Design.Views.Party.NewPartyDialog;
namespace Aurora.Design.Views.Party
{
@ -164,6 +165,11 @@ namespace Aurora.Design.Views.Party
{
await _client.GetEvents().ConfigureAwait(false);
}
else
{
var asdf = await this.ShowModal(typeof(NewPartyDialog.NewPartyDialog), typeof(NewPartyDialogViewModel));
System.Diagnostics.Debug.WriteLine("");
}
}
/// <summary>