Skip to content

A new layout for the Manage Mods page. + Requesting permission to make bigger UI changes. #668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dawnbomb wants to merge 1 commit into
base: master
Choose a base branch
from
Open

A new layout for the Manage Mods page. + Requesting permission to make bigger UI changes. #668

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
228 changes: 123 additions & 105 deletions source/Reloaded.Mod.Launcher/Pages/BaseSubpages/ManageModsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{DynamicResource LeftPanelWidth}"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="{DynamicResource LeftPanelWidth}"/>
</Grid.ColumnDefinitions>

<!-- Left Side. -->
<ScrollViewer Margin="{DynamicResource PanelMargin}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto">
<ScrollViewer Margin="{DynamicResource PanelMargin}" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto">
<StackPanel>

<!-- Application Image -->
Expand All @@ -69,7 +69,6 @@
<Grid Margin="{DynamicResource CommonItemVerticalMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
Expand All @@ -79,41 +78,28 @@
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Button Grid.Column="0"
Grid.Row="0"
Margin="0"
Style="{DynamicResource UnpaddedStretchedGridButton}"
Content="{DynamicResource AddAppNewButton}"
Click="New_Click"/>

<Button Grid.Column="1"
Grid.Row="0"
Margin="0"
Style="{DynamicResource UnpaddedStretchedGridButton}"
Content="{DynamicResource AddAppDeleteButton}"
Command="{Binding DeleteModCommand}"/>

<Button Grid.Row="1"
<Button Grid.Row="0"
Grid.Column="0"
Style="{DynamicResource UnpaddedStretchedButton}"
Content="{DynamicResource ModManagerContextEdit}"
Margin="0"
Command="{Binding EditModCommand}"/>

<Button Grid.Row="1"
<Button Grid.Row="2"
Grid.Column="1"
Style="{DynamicResource UnpaddedStretchedButton}"
Content="{DynamicResource ModManagerContextPublish}"
Margin="0"
Command="{Binding PublishModCommand}"/>

<Button Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Style="{DynamicResource UnpaddedStretchedButton}"
Content="{DynamicResource CreateModPackTitle}"

<Button Grid.Column="1"
Grid.Row="3"
Margin="0"
Command="{Binding CreateModPackCommand}"/>
Style="{DynamicResource UnpaddedStretchedGridButton}"
Content="{DynamicResource AddAppDeleteButton}"
Command="{Binding DeleteModCommand}"/>

</Grid>

<!-- Mod Properties -->
Expand All @@ -136,7 +122,7 @@
</ScrollViewer>

<!-- Right Side. -->
<Grid Margin="{DynamicResource PanelMargin}" Grid.Column="1">
<Grid Margin="{DynamicResource PanelMargin}" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
Expand All @@ -148,95 +134,127 @@
<!-- Search Textboxes -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Border Background="Transparent" BorderBrush="Black" BorderThickness="1" Grid.Row="1" Margin="0,0,0,3">
<DockPanel Background="Transparent" >
<DockPanel Background="#11FFFFFF" DockPanel.Dock="Top" Height="50">
<Button Margin="10,0,10,0"
Width="60"
Style="{DynamicResource UnpaddedStretchedGridButton}"
Content="{DynamicResource AddAppNewButton}"
Click="New_Click"/>
<Button Width="130"
Style="{DynamicResource UnpaddedStretchedButton}"
Content="{DynamicResource CreateModPackTitle}"
Margin="0,0,5,0"
Command="{Binding CreateModPackCommand}"/>
<Border Background="#FF1D1D1D" Margin="5,10,10,10" BorderBrush="#FF0C0C0C" BorderThickness="1" DockPanel.Dock="Left">
<TextBox x:Name="ModsFilter"
Style="{DynamicResource TextboxWithPlaceholder}"
Margin="8,2,8,2"
Tag="{DynamicResource ModManagerSearchMods}"
AutomationProperties.Name="{DynamicResource ModManagerSearchMods}"
TextChanged="ModsFilter_TextChanged"
HorizontalContentAlignment="Left"/>
</Border>

</DockPanel>
<!-- List of Mods -->
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" > <!--Margin="{DynamicResource PanelMargin}"-->
<ListView
HorizontalAlignment="Stretch"
ItemsSource="{Binding Source={StaticResource SortedMods}}"
SelectedItem="{Binding SelectedModTuple, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ToolTip="{DynamicResource ModManagerSelectMod}"
SelectionChanged="ListView_SelectionChanged"
SelectionMode="Single"
VerticalAlignment="Stretch"
VerticalContentAlignment="Top"
BorderBrush="{x:Null}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Config.ModDisplayName}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="{DynamicResource ListEntryItemMarginSmall}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DockPanel>
</Border>

<TextBox x:Name="ModsFilter" Style="{DynamicResource TextboxWithPlaceholder}"
Margin="{DynamicResource PanelMargin}"
Tag="{DynamicResource ModManagerSearchMods}"
AutomationProperties.Name="{DynamicResource ModManagerSearchMods}"
TextChanged="ModsFilter_TextChanged"
Grid.Column="0"
Grid.Row="0"/>

<TextBox x:Name="AppsFilter"
Margin="{DynamicResource PanelMargin}"
Style="{DynamicResource TextboxWithPlaceholder}"
Tag="{DynamicResource ModManagerSearchApps}"
AutomationProperties.Name="{DynamicResource ModManagerSearchApps}"
TextChanged="AppsFilter_TextChanged"
Grid.Column="1"
Grid.Row="0"/>

<!-- List of Mods -->
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="{DynamicResource PanelMargin}">
<ListView
HorizontalAlignment="Stretch"
ItemsSource="{Binding Source={StaticResource SortedMods}}"
SelectedItem="{Binding SelectedModTuple, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ToolTip="{DynamicResource ModManagerSelectMod}"
SelectionChanged="ListView_SelectionChanged"
SelectionMode="Single"
VerticalAlignment="Stretch"
VerticalContentAlignment="Top">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Config.ModDisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="{DynamicResource ListEntryItemMarginSmall}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>

<Grid Grid.Row="1" Margin="{DynamicResource PanelMargin}">
<ListView
ToolTip="{DynamicResource ModManagerSelectApp}"
ItemsSource="{Binding Source={StaticResource SortedApps}}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Top">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Enabled}"
Style="{DynamicResource DefaultCheckBox}"
Height="{DynamicResource ListEntryCheckboxHeightSmall}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{DynamicResource ListEntryItemMarginSmall}" />

<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="{DynamicResource ListEntryItemMarginSmall}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Text">
<Setter.Value>
<MultiBinding StringFormat="{}{0} ({1})">
<Binding Path="Generic.AppName" />
<Binding Path="Generic.AppId" />
</MultiBinding>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Generic.AppName, UpdateSourceTrigger=PropertyChanged}" Value="">
<Setter Property="Text" Value="{Binding Generic.AppId, UpdateSourceTrigger=PropertyChanged}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

</Grid>

<Border Background="Transparent" BorderBrush="Black" BorderThickness="1" Grid.Row="1" Margin="0,12,0,0">
<DockPanel Grid.Row="1">
<DockPanel Background="#11FFFFFF" DockPanel.Dock="Top" Height="45">
<Border Background="#FF1D1D1D" Margin="10,8,10,8" BorderBrush="#FF0C0C0C" BorderThickness="1" DockPanel.Dock="Left">
<TextBox x:Name="AppsFilter"
Margin="8,2,8,2"
Style="{DynamicResource TextboxWithPlaceholder}"
Tag="{DynamicResource ModManagerSearchApps}"
AutomationProperties.Name="{DynamicResource ModManagerSearchApps}"
TextChanged="AppsFilter_TextChanged"
Grid.Column="1"
Grid.Row="0"
HorizontalContentAlignment="Left"/>
</Border>

</DockPanel>
<Grid Grid.Row="1" DockPanel.Dock="Top">
<!--Margin="{DynamicResource PanelMargin}"-->
<ListView
ToolTip="{DynamicResource ModManagerSelectApp}"
ItemsSource="{Binding Source={StaticResource SortedApps}}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Top"
BorderBrush="{x:Null}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Enabled}"
Style="{DynamicResource DefaultCheckBox}"
Height="{DynamicResource ListEntryCheckboxHeightSmall}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{DynamicResource ListEntryItemMarginSmall}" />

<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="{DynamicResource ListEntryItemMarginSmall}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Text">
<Setter.Value>
<MultiBinding StringFormat="{}{0} ({1})">
<Binding Path="Generic.AppName" />
<Binding Path="Generic.AppId" />
</MultiBinding>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Generic.AppName, UpdateSourceTrigger=PropertyChanged}" Value="">
<Setter Property="Text" Value="{Binding Generic.AppId, UpdateSourceTrigger=PropertyChanged}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DockPanel>
</Border>

</Grid>
</Grid>
</Grid>
Expand Down