Skip to content

GitLab

Commit 0b3c291c authored by Thomas's avatar Thomas
Browse files

Redesign UI of DPE form region

parent 1510fb85
Hide whitespace changes
Inline Side-by-side
Resources/Dictionary.xaml
View file @ 0b3c291c
......@@ -13,21 +13,25 @@
<Color x:Key="ColorButtonGrayHover">#C5C5C5</Color>
<Color x:Key="ColorButtonGrayClick">#D6D6D6</Color>
<Color x:Key="ColorBlueBackground">#C5E2F7</Color>
<Color x:Key="ColorGray">#CCC8CB</Color>
<Color x:Key="ColorGreen">#00AA2B</Color>
<Color x:Key="ColorGreenHover">#00CB33</Color>
<Color x:Key="ColorGreenBackground">#C3EED8</Color>
<Color x:Key="ColorGreenClick">#55DD78</Color>
<Color x:Key="ColorGreenBackground">#BFFFBF</Color>
<Color x:Key="ColorGreenHover">#00CB33</Color>
<Color x:Key="ColorOrangeBackground">#F8D4C6</Color>
<Color x:Key="ColorRed">#E80000</Color>
<Color x:Key="ColorRedHover">#FF0000</Color>
<Color x:Key="ColorRedBackground">#F3C9CD</Color>
<Color x:Key="ColorRedClick">#E77271</Color>
<Color x:Key="ColorRedBackground">#FFC0C0</Color>
<Color x:Key="ColorRedHover">#FF0000</Color>
<Color x:Key="ColorYellow">#FCC005</Color>
<Color x:Key="ColorYellowHover">#FFDF30</Color>
<Color x:Key="ColorYellowBackground">#FFF3C5</Color>
<Color x:Key="ColorYellowClick">#E6D56C</Color>
<Color x:Key="ColorYellowHover">#FFDF30</Color>
<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
......@@ -38,7 +42,9 @@
* Brushes
*
***********************************************************-->
<SolidColorBrush x:Key="BrushBlueBackground"
Color="{StaticResource ColorBlueBackground}" />
<SolidColorBrush x:Key="BrushButtonGray"
Color="{StaticResource ColorButtonGray}" />
<SolidColorBrush x:Key="BrushButtonGrayBorder"
......@@ -56,28 +62,33 @@
<SolidColorBrush x:Key="BrushGreen"
Color="{StaticResource ColorGreen}" />
<SolidColorBrush x:Key="BrushGreenHover"
Color="{StaticResource ColorGreenHover}" />
<SolidColorBrush x:Key="BrushGreenClick"
Color="{StaticResource ColorGreenClick}" />
<SolidColorBrush x:Key="BrushGreenBackground"
Color="{StaticResource ColorGreenBackground}" />
<SolidColorBrush x:Key="BrushGreenClick"
Color="{StaticResource ColorGreenClick}" />
<SolidColorBrush x:Key="BrushGreenHover"
Color="{StaticResource ColorGreenHover}" />
<SolidColorBrush x:Key="BrushOrangeBackground"
Color="{StaticResource ColorOrangeBackground}" />
<SolidColorBrush x:Key="BrushRed"
Color="{StaticResource ColorRed}" />
<SolidColorBrush x:Key="BrushRedHover"
Color="{StaticResource ColorRedHover}" />
<SolidColorBrush x:Key="BrushRedClick"
Color="{StaticResource ColorRedClick}" />
<SolidColorBrush x:Key="BrushRedBackground"
Color="{StaticResource ColorRedBackground}" />
<SolidColorBrush x:Key="BrushRedClick"
Color="{StaticResource ColorRedClick}" />
<SolidColorBrush x:Key="BrushRedHover"
Color="{StaticResource ColorRedHover}" />
<SolidColorBrush x:Key="BrushYellow"
Color="{StaticResource ColorYellow}" />
<SolidColorBrush x:Key="BrushYellowHover"
Color="{StaticResource ColorYellowHover}" />
<SolidColorBrush x:Key="BrushYellowBackground"
Color="{StaticResource ColorYellowBackground}" />
<SolidColorBrush x:Key="BrushYellowClick"
Color="{StaticResource ColorYellowClick}" />
<SolidColorBrush x:Key="BrushYellowHover"
Color="{StaticResource ColorYellowHover}" />
<SolidColorBrush x:Key="BrushTextBlack"
Color="Black" />
......
UI/ViewModels/PatchViewModel.cs
View file @ 0b3c291c
......@@ -24,8 +24,8 @@ namespace pEp.UI.ViewModels
private RelayCommand _AddOrEditFileCommand = null;
private Brush _Background = Brushes.White;
private Brush _CommitBackground = Brushes.White;
private DateTime? _EditDate = null;
private string _Explanation = null;
private FlowDocument _FormattedDiff = null;
private bool _IsCommitMessageValid = false;
private bool _IsDiffValid = false;
......@@ -34,6 +34,7 @@ namespace pEp.UI.ViewModels
private bool _Loaded = false;
private ConfigFile _SelectedFile = null;
private DistributedPolicyEngine.PatchStatus _Status = DistributedPolicyEngine.PatchStatus.Open;
private string _StatusMessage = null;
private const string FILE_A_PREFIX = "--- ";
private const string FILE_B_PREFIX = "+++ ";
......@@ -73,6 +74,11 @@ namespace pEp.UI.ViewModels
/// </summary>
public RelayCommand CancelButtonCommand => new RelayCommand(p => this.Close(null));
/// <summary>
/// Gets or sets the background of the commit message.
/// </summary>
public Brush CommitBackground { get => this._CommitBackground; set => this.SetProperty(ref this._CommitBackground, value); }
/// <summary>
/// The commit message of the patch.
/// </summary>
......@@ -99,8 +105,11 @@ namespace pEp.UI.ViewModels
{
get
{
long? fileTime = this.Dialog?.Patch?.CreationDate;
return (fileTime != null) ? DateTime.FromFileTimeUtc((long)fileTime).ToLocalTime().ToString("F") : null;
if (this.Dialog?.Patch?.CreationDate is long fileTime)
{
return DateTime.FromFileTimeUtc(fileTime).ToLocalTime().ToString("f");
}
return null;
}
}
......@@ -119,11 +128,6 @@ namespace pEp.UI.ViewModels
/// </summary>
public DateTime? EditDate { get => this._EditDate; set => this.SetProperty(ref this._EditDate, value); }
/// <summary>
/// The explanation shown in the UI regarding this patch.
/// </summary>
public string Explanation { get => this._Explanation; set => this.SetProperty(ref this._Explanation, value); }
/// <summary>
/// Gets the diff of the selected file as formatted flow document.
/// </summary>
......@@ -206,6 +210,11 @@ namespace pEp.UI.ViewModels
/// </summary>
public DistributedPolicyEngine.PatchStatus Status { get => this._Status; set => this.SetProperty(ref this._Status, value); }
/// <summary>
/// Gets or sets the status message shown in the UI.
/// </summary>
public string StatusMessage { get => this._StatusMessage; set => this.SetProperty(ref this._StatusMessage, value); }
/// <summary>
/// Gets or sets the root path of the patch.
/// </summary>
......@@ -247,12 +256,12 @@ namespace pEp.UI.ViewModels
{
case PatchDialog.PatchAction.NewPatch:
{
this.Explanation = "New patch";
this.StatusMessage = "New patch";
}
break;
case PatchDialog.PatchAction.SupportOrRejectPatch:
{
this.Explanation = "Support or reject patch";
this.StatusMessage = "Support or reject patch";
}
break;
case PatchDialog.PatchAction.EditPatch:
......@@ -690,6 +699,28 @@ namespace pEp.UI.ViewModels
}
}
/// <summary>
/// Sets the background of the commit message according to the patch status.
/// </summary>
/// <returns>The color brush according to the background.</returns>
private SolidColorBrush SetCommitBackground()
{
switch (this.Status)
{
case DistributedPolicyEngine.PatchStatus.Open:
return Globals.ResourceDict["BrushBlueBackground"] as SolidColorBrush;
case DistributedPolicyEngine.PatchStatus.Accepted:
return Globals.ResourceDict["BrushGreenBackground"] as SolidColorBrush;
case DistributedPolicyEngine.PatchStatus.Supported:
return Globals.ResourceDict["BrushYellowBackground"] as SolidColorBrush;
case DistributedPolicyEngine.PatchStatus.Rejected:
return Globals.ResourceDict["BrushRedBackground"] as SolidColorBrush;
default:
Log.ErrorAndFailInDebugMode("SetCommitBackground: Unsupported patch status " + this.Status);
return Brushes.White;
}
}
/// <summary>
/// Removes a file from the list of changed files
/// </summary>
......@@ -702,28 +733,28 @@ namespace pEp.UI.ViewModels
/// <summary>
/// Sets the explanation text.
/// </summary>
private void SetExplanation()
private void SetStatusMessage()
{
string editDate = "<n/a>";
if (this.EditDate != null)
{
editDate = ((DateTime)this.EditDate).ToLocalTime().ToString("F");
editDate = ((DateTime)this.EditDate).ToLocalTime().ToString("f");
}
switch (this.Status)
{
case DistributedPolicyEngine.PatchStatus.Accepted:
this.Explanation = $"Accepted on { editDate }";
this.StatusMessage = $"Accepted on { editDate }";
break;
case DistributedPolicyEngine.PatchStatus.Supported:
this.Explanation = $"Supported on { editDate }";
this.StatusMessage = $"Supported on { editDate }";
break;
case DistributedPolicyEngine.PatchStatus.Rejected:
this.Explanation = $"Rejected on { editDate }";
this.StatusMessage = $"Rejected on { editDate }";
break;
case DistributedPolicyEngine.PatchStatus.Open:
default:
this.Explanation = "New configuration changes pending approval";
this.StatusMessage = "Open";
break;
}
}
......@@ -769,9 +800,10 @@ namespace pEp.UI.ViewModels
private void UpdateView(DistributedPolicyEngine.PatchStatus patchStatus)
{
this.Status = patchStatus;
this.SetExplanation();
this.SetStatusMessage();
this.FormattedDiff = PatchViewModel.FormatDiff(this.Dialog.Patch.Diff, this.Status == DistributedPolicyEngine.PatchStatus.Open);
this.Background = (patchStatus == DistributedPolicyEngine.PatchStatus.Open) ? Brushes.White : Brushes.WhiteSmoke;
this.CommitBackground = this.SetCommitBackground();
}
/// <summary>
......
UI/Views/FormControlPatchView.xaml
View file @ 0b3c291c
......@@ -23,29 +23,36 @@
<ui:InvertBoolConverter />
<BooleanToVisibilityConverter />
</ui:ValueConverterGroup>
<ui:ValueConverterGroup x:Key="IsStringNotEmptyToVisibility">
<ui:IsStringEmptyConverter />
<ui:InvertBoolConverter />
</ui:ValueConverterGroup>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Hides all other content while the form region is being loaded-->
<Rectangle Grid.Column="0"
Grid.ColumnSpan="3"
Grid.ColumnSpan="4"
Grid.Row="0"
Grid.RowSpan="8"
Grid.RowSpan="10"
Grid.ZIndex="1000"
Fill="White"
HorizontalAlignment="Stretch"
......@@ -53,10 +60,10 @@
Visibility="{Binding Loaded, Converter={StaticResource InvertBoolToVisibility}}" />
<!--Overlay during API calls-->
<Rectangle Grid.Column="0"
Grid.ColumnSpan="3"
Grid.ColumnSpan="4"
Grid.Row="0"
Grid.RowSpan="8"
Grid.ZIndex="100"
Grid.RowSpan="10"
Grid.ZIndex="99"
Fill="White"
Opacity="0.7"
HorizontalAlignment="Stretch"
......@@ -64,9 +71,9 @@
Visibility="{Binding IsLoading, Converter={StaticResource BoolToVisibility}}" />
<!--Loading animation during API calls-->
<Image Grid.Column="0"
Grid.ColumnSpan="3"
Grid.ColumnSpan="4"
Grid.Row="0"
Grid.RowSpan="8"
Grid.RowSpan="10"
Grid.ZIndex="100"
Width="100"
Height="41"
......@@ -95,96 +102,117 @@
</Style>
</Image.Style>
</Image>
<Label Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
Content="{Binding Explanation}"
FontWeight="Bold"
Margin="10,5"/>
<Label Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1"
Content="{Binding From.DisplayString}"
Margin="10,1" />
<Label Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="2"
Content="{Binding CreationDateString}"
Margin="10,1" />
<Image Grid.Column="2"
Grid.Row="0"
Grid.RowSpan="3"
<Label Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
Content="Configuration management"
Margin="10,5"
FontSize="25" />
<Image Grid.Row="0"
Grid.Column="3"
Margin="10"
Width="100"
Height="41"
Source="pack://application:,,,/pEp;component/Resources/ImageLogoMedium.png"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="5,5,10,5"/>
VerticalAlignment="Center"/>
<Label Grid.Row="1"
Grid.Column="0"
Content="From:"
Margin="10,0" />
<Label Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Content="{Binding From.DisplayString}"
Margin="10,0" />
<Label Grid.Row="2"
Grid.Column="0"
Content="Date:"
Margin="10,0" />
<Label Grid.Row="2"
Grid.Column="1"
Grid.ColumnSpan="2"
Content="{Binding CreationDateString}"
Margin="10,0" />
<Label Grid.Row="3"
Grid.Column="0"
Content="Root path:"
Margin="10,0" />
<Label Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="2"
Content="{Binding RootPath}"
Margin="10,0" />
<Label Grid.Row="4"
Grid.Column="0"
Content="Status:"
FontWeight="DemiBold"
Margin="10,0" />
<Label Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="2"
Content="{Binding StatusMessage}"
FontWeight="DemiBold"
Margin="10,0" />
<Label Grid.Column="0"
Grid.Row="3"
Content="Diff"
Margin="10,10,5,10"/>
<FlowDocumentScrollViewer Grid.Column="1"
Grid.ColumnSpan="4"
Background="{Binding CommitBackground}"
Content="{Binding CommitMessage}"
Margin="10,5"
Padding="10"
Grid.Row="5" />
<Label Grid.Row="6"
Grid.Column="0"
Grid.ColumnSpan="4"
Content="{Binding Tag}"
Background="{StaticResource BrushOrangeBackground}"
HorizontalAlignment="Left"
Margin="10,0"
Visibility="{Binding Tag, Converter={StaticResource IsStringNotEmptyToVisibility}}"/>
<Label Grid.Row="7"
Grid.Column="0"
Grid.ColumnSpan="2"
Content="To be applied to"
Background="#f2f2f2"
FontWeight="DemiBold"
Foreground="DarkSlateGray"
Margin="10,5"/>
<Label Grid.ColumnSpan="2"
Grid.Row="7"
Grid.Column="2"
Content="Changes"
FontWeight="DemiBold"
Foreground="DarkSlateGray"
Background="#f2f2f2"
Margin="10,5"/>
<ListBox Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="8"
Background="{Binding Background}"
Margin="10,0"/>
<FlowDocumentScrollViewer Grid.Column="2"
Grid.ColumnSpan="2"
Grid.Row="3"
Grid.Row="8"
HorizontalScrollBarVisibility="Auto"
BorderBrush="Black"
BorderThickness="1"
Margin="5,10,10,10"
Margin="10,0"
Document="{Binding FormattedDiff}" />
<Label Grid.Column="0"
Grid.Row="4"
Content="Uri"
Margin="10,10,5,10"/>
<TextBox Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="4"
Background="{Binding Background}"
VerticalAlignment="Center"
Padding="2"
Text="{Binding RootPath}"
IsReadOnly="True"
Margin="5,10,10,10"/>
<Label Grid.Column="0"
Grid.Row="5"
Content="Commit message"
Margin="10,10,5,10"/>
<TextBox Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="5"
Background="{Binding Background}"
VerticalAlignment="Center"
Padding="2"
Text="{Binding CommitMessage}"
IsReadOnly="True"
Margin="5,10,10,10"/>
<Label Grid.Column="0"
Grid.Row="6"
Content="Tag"
Margin="10,10,5,10"/>
<TextBox Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="6"
Background="{Binding Background}"
VerticalAlignment="Center"
Padding="2"
Text="{Binding Tag}"
IsReadOnly="True"
Margin="5,10,10,10"/>
<StackPanel Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="7"
Grid.ColumnSpan="4"
Grid.Row="9"
Margin="0,20"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Content="Support"
Command="{Binding OKButtonCommand}"
Style="{StaticResource StyleButtonGray}"
IsDefault="True"
Margin="10" />
Margin="20,10" />
<Button Content="{x:Static p:Resources.SyncWizard_RejectButton}"
Command="{Binding RejectButtonCommand}"
Style="{StaticResource StyleButtonGray}"
Margin="10" />
Margin="20,10" />
</StackPanel>
</Grid>
</UserControl>
Markdown is supported
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