204 lines
9.6 KiB
Markdown
204 lines
9.6 KiB
Markdown
---
|
|
phase: 12-branding-ui-views
|
|
plan: 03
|
|
type: execute
|
|
wave: 2
|
|
depends_on: [12-01]
|
|
files_modified:
|
|
- SharepointToolbox/Views/Dialogs/ProfileManagementDialog.xaml
|
|
autonomous: true
|
|
requirements:
|
|
- BRAND-04
|
|
|
|
must_haves:
|
|
truths:
|
|
- "ProfileManagementDialog shows a Client Logo section between the input fields and the action buttons"
|
|
- "The logo section shows a live thumbnail preview bound to ClientLogoPreview via Base64ToImageConverter"
|
|
- "When ClientLogoPreview is null, the preview area shows a 'No logo configured' placeholder text"
|
|
- "Import, Clear, and Pull from Entra buttons are bound to BrowseClientLogoCommand, ClearClientLogoCommand, and AutoPullClientLogoCommand respectively"
|
|
- "All three logo buttons are disabled when no profile is selected"
|
|
- "ValidationMessage displays below the logo buttons when set"
|
|
- "Dialog height is increased to accommodate the new section"
|
|
artifacts:
|
|
- path: "SharepointToolbox/Views/Dialogs/ProfileManagementDialog.xaml"
|
|
provides: "Client logo section with live preview, import, clear, and auto-pull controls"
|
|
contains: "ClientLogoPreview"
|
|
key_links:
|
|
- from: "SharepointToolbox/Views/Dialogs/ProfileManagementDialog.xaml"
|
|
to: "SharepointToolbox/ViewModels/ProfileManagementViewModel.cs"
|
|
via: "data binding"
|
|
pattern: "BrowseClientLogoCommand|ClearClientLogoCommand|AutoPullClientLogoCommand|ClientLogoPreview"
|
|
- from: "SharepointToolbox/Views/Dialogs/ProfileManagementDialog.xaml"
|
|
to: "SharepointToolbox/Views/Converters/Base64ToImageSourceConverter.cs"
|
|
via: "StaticResource"
|
|
pattern: "Base64ToImageConverter"
|
|
---
|
|
|
|
<objective>
|
|
Add the client logo section to ProfileManagementDialog.xaml with live thumbnail preview, Import, Clear, and Pull from Entra buttons.
|
|
|
|
Purpose: Allows administrators to see, import, clear, and auto-pull client logos per tenant directly from the profile management dialog.
|
|
|
|
Output: Updated ProfileManagementDialog.xaml with a client logo section and increased dialog height.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@C:/Users/dev/.claude/get-shit-done/workflows/execute-plan.md
|
|
@C:/Users/dev/.claude/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/ROADMAP.md
|
|
@.planning/STATE.md
|
|
@.planning/phases/12-branding-ui-views/12-RESEARCH.md
|
|
|
|
<interfaces>
|
|
<!-- ProfileManagementViewModel properties and commands (Phase 11 + 12-01) -->
|
|
|
|
From SharepointToolbox/ViewModels/ProfileManagementViewModel.cs:
|
|
```csharp
|
|
public string? ClientLogoPreview { get; } // data URI string or null (added in 12-01)
|
|
public IAsyncRelayCommand BrowseClientLogoCommand { get; } // gated on SelectedProfile != null
|
|
public IAsyncRelayCommand ClearClientLogoCommand { get; } // gated on SelectedProfile != null
|
|
public IAsyncRelayCommand AutoPullClientLogoCommand { get; } // gated on SelectedProfile != null
|
|
public string ValidationMessage { get; set; } // set on error or success feedback
|
|
public TenantProfile? SelectedProfile { get; set; }
|
|
```
|
|
|
|
<!-- Current ProfileManagementDialog.xaml structure -->
|
|
From SharepointToolbox/Views/Dialogs/ProfileManagementDialog.xaml:
|
|
```xml
|
|
<Window ... Width="500" Height="480" ResizeMode="NoResize">
|
|
<Grid Margin="12">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" /> <!-- Row 0: Label "Profiles" -->
|
|
<RowDefinition Height="*" /> <!-- Row 1: Profile ListBox -->
|
|
<RowDefinition Height="Auto" /> <!-- Row 2: Input fields (Name/URL/ClientId) -->
|
|
<RowDefinition Height="Auto" /> <!-- Row 3: Action buttons -->
|
|
</Grid.RowDefinitions>
|
|
...
|
|
</Grid>
|
|
</Window>
|
|
```
|
|
|
|
<!-- Available converters from App.xaml -->
|
|
- `{StaticResource Base64ToImageConverter}` — converts data URI string to BitmapImage
|
|
- `{StaticResource StringToVisibilityConverter}` — Visible if non-empty, else Collapsed
|
|
</interfaces>
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Add client logo section and resize ProfileManagementDialog</name>
|
|
<files>
|
|
SharepointToolbox/Views/Dialogs/ProfileManagementDialog.xaml
|
|
</files>
|
|
<behavior>
|
|
- Dialog height increases from 480 to 620 to accommodate the logo section
|
|
- A new row (Row 3) is inserted between the input fields (Row 2) and buttons (now Row 4)
|
|
- The client logo section contains:
|
|
a) A labeled GroupBox "Client Logo" (localized)
|
|
b) Inside: a Border with either an Image preview or placeholder text
|
|
c) Three buttons: Import, Clear, Pull from Entra — horizontally aligned
|
|
d) A TextBlock for ValidationMessage feedback
|
|
- All logo controls are visually disabled when no profile is selected (via command CanExecute)
|
|
- ValidationMessage shows success/error messages (already set by ViewModel commands)
|
|
</behavior>
|
|
<action>
|
|
1. Edit `SharepointToolbox/Views/Dialogs/ProfileManagementDialog.xaml`:
|
|
|
|
a) Increase dialog height from 480 to 620:
|
|
Change `Height="480"` to `Height="620"`
|
|
|
|
b) Add a new Row 3 for the logo section. Update RowDefinitions to:
|
|
```xml
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" /> <!-- Row 0: Label -->
|
|
<RowDefinition Height="*" /> <!-- Row 1: ListBox -->
|
|
<RowDefinition Height="Auto" /> <!-- Row 2: Input fields -->
|
|
<RowDefinition Height="Auto" /> <!-- Row 3: Client logo (NEW) -->
|
|
<RowDefinition Height="Auto" /> <!-- Row 4: Buttons (was Row 3) -->
|
|
</Grid.RowDefinitions>
|
|
```
|
|
|
|
c) Move existing buttons StackPanel from Grid.Row="3" to Grid.Row="4"
|
|
|
|
d) Add the client logo section at Grid.Row="3":
|
|
```xml
|
|
<!-- Client Logo -->
|
|
<StackPanel Grid.Row="3" Margin="0,8,0,8">
|
|
<Label Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[profile.logo.title]}" Padding="0,0,0,4" />
|
|
<Border BorderBrush="#DDDDDD" BorderThickness="1" Padding="8" CornerRadius="4"
|
|
HorizontalAlignment="Left" MinWidth="200" MinHeight="50">
|
|
<Grid>
|
|
<Image Source="{Binding ClientLogoPreview, Converter={StaticResource Base64ToImageConverter}}"
|
|
MaxHeight="60" MaxWidth="200" Stretch="Uniform" HorizontalAlignment="Left"
|
|
Visibility="{Binding ClientLogoPreview, Converter={StaticResource StringToVisibilityConverter}}" />
|
|
<TextBlock Text="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[profile.logo.nopreview]}"
|
|
VerticalAlignment="Center" HorizontalAlignment="Center"
|
|
Foreground="#999999" FontStyle="Italic">
|
|
<TextBlock.Style>
|
|
<Style TargetType="TextBlock">
|
|
<Setter Property="Visibility" Value="Visible" />
|
|
<Style.Triggers>
|
|
<DataTrigger Binding="{Binding ClientLogoPreview, Converter={StaticResource StringToVisibilityConverter}}" Value="Visible">
|
|
<Setter Property="Visibility" Value="Collapsed" />
|
|
</DataTrigger>
|
|
</Style.Triggers>
|
|
</Style>
|
|
</TextBlock.Style>
|
|
</TextBlock>
|
|
</Grid>
|
|
</Border>
|
|
<StackPanel Orientation="Horizontal" Margin="0,6,0,0">
|
|
<Button Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[profile.logo.browse]}"
|
|
Command="{Binding BrowseClientLogoCommand}" Width="80" Margin="0,0,8,0" />
|
|
<Button Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[profile.logo.clear]}"
|
|
Command="{Binding ClearClientLogoCommand}" Width="80" Margin="0,0,8,0" />
|
|
<Button Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[profile.logo.autopull]}"
|
|
Command="{Binding AutoPullClientLogoCommand}" Width="130" />
|
|
</StackPanel>
|
|
<TextBlock Text="{Binding ValidationMessage}" Foreground="#CC0000" FontSize="11" Margin="0,4,0,0"
|
|
Visibility="{Binding ValidationMessage, Converter={StaticResource StringToVisibilityConverter}}" />
|
|
</StackPanel>
|
|
```
|
|
|
|
Key decisions:
|
|
- GroupBox replaced with Label + StackPanel for consistency with SettingsView pattern
|
|
- Smaller preview (60px height vs 80px in Settings) because dialog has less space
|
|
- Pull from Entra button is wider (130px) to fit localized text
|
|
- ValidationMessage already set by Browse/Clear/AutoPull commands — just needs display
|
|
- All three buttons auto-disable via ICommand.CanExecute when SelectedProfile is null
|
|
</action>
|
|
<verify>
|
|
<automated>dotnet build --no-restore -warnaserror</automated>
|
|
</verify>
|
|
<done>ProfileManagementDialog shows client logo section with preview, three buttons, and feedback. Dialog resized. Build passes.</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
```bash
|
|
dotnet build --no-restore -warnaserror
|
|
```
|
|
Build must pass with zero failures. Visual verification requires manual testing.
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- ProfileManagementDialog.xaml has a visible Client Logo section between input fields and buttons
|
|
- Image binds to ClientLogoPreview via Base64ToImageConverter
|
|
- Placeholder text shows when no logo is configured
|
|
- Import, Clear, and Pull from Entra buttons bind to existing ViewModel commands
|
|
- All logo buttons disabled when no profile selected
|
|
- ValidationMessage displays feedback when set
|
|
- Dialog height increased to 620 to accommodate new section
|
|
- Build passes with zero warnings
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/12-branding-ui-views/12-03-SUMMARY.md`
|
|
</output>
|