docs(13-02): complete User Directory ViewModel plan
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dev
182
.planning/phases/12-branding-ui-views/12-02-PLAN.md
Normal file
182
.planning/phases/12-branding-ui-views/12-02-PLAN.md
Normal file
@@ -0,0 +1,182 @@
|
||||
---
|
||||
phase: 12-branding-ui-views
|
||||
plan: 02
|
||||
type: execute
|
||||
wave: 2
|
||||
depends_on: [12-01]
|
||||
files_modified:
|
||||
- SharepointToolbox/Views/Tabs/SettingsView.xaml
|
||||
autonomous: true
|
||||
requirements:
|
||||
- BRAND-02
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "SettingsView displays an MSP Logo section with a labeled GroupBox below the data folder section"
|
||||
- "The logo section shows a live thumbnail preview bound to MspLogoPreview via Base64ToImageConverter"
|
||||
- "When MspLogoPreview is null, the preview area shows a 'No logo configured' placeholder text"
|
||||
- "Import and Clear buttons are bound to BrowseMspLogoCommand and ClearMspLogoCommand respectively"
|
||||
- "StatusMessage displays below the logo section when set"
|
||||
artifacts:
|
||||
- path: "SharepointToolbox/Views/Tabs/SettingsView.xaml"
|
||||
provides: "MSP logo section with live preview, import, and clear controls"
|
||||
contains: "MspLogoPreview"
|
||||
key_links:
|
||||
- from: "SharepointToolbox/Views/Tabs/SettingsView.xaml"
|
||||
to: "SharepointToolbox/ViewModels/Tabs/SettingsViewModel.cs"
|
||||
via: "data binding"
|
||||
pattern: "BrowseMspLogoCommand|ClearMspLogoCommand|MspLogoPreview"
|
||||
- from: "SharepointToolbox/Views/Tabs/SettingsView.xaml"
|
||||
to: "SharepointToolbox/Views/Converters/Base64ToImageSourceConverter.cs"
|
||||
via: "StaticResource"
|
||||
pattern: "Base64ToImageConverter"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Add the MSP logo section to SettingsView.xaml with live thumbnail preview, Import and Clear buttons.
|
||||
|
||||
Purpose: Allows administrators to see the current MSP logo and manage it directly from the Settings tab.
|
||||
|
||||
Output: Updated SettingsView.xaml with a logo section that binds to existing ViewModel commands and properties.
|
||||
</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>
|
||||
<!-- SettingsViewModel properties and commands (already exist from Phase 11) -->
|
||||
|
||||
From SharepointToolbox/ViewModels/Tabs/SettingsViewModel.cs:
|
||||
```csharp
|
||||
public string? MspLogoPreview { get; } // data URI string or null
|
||||
public IAsyncRelayCommand BrowseMspLogoCommand { get; }
|
||||
public IAsyncRelayCommand ClearMspLogoCommand { get; }
|
||||
public string StatusMessage { get; set; } // inherited from FeatureViewModelBase
|
||||
```
|
||||
|
||||
<!-- Current SettingsView.xaml structure -->
|
||||
From SharepointToolbox/Views/Tabs/SettingsView.xaml:
|
||||
```xml
|
||||
<UserControl ...
|
||||
xmlns:loc="clr-namespace:SharepointToolbox.Localization">
|
||||
<StackPanel Margin="16">
|
||||
<!-- Language section -->
|
||||
<Label Content="{Binding Source=..., Path=[settings.language]}" />
|
||||
<ComboBox ... />
|
||||
<Separator Margin="0,12" />
|
||||
<!-- Data folder section -->
|
||||
<Label Content="{Binding Source=..., Path=[settings.folder]}" />
|
||||
<DockPanel>
|
||||
<Button DockPanel.Dock="Right" ... Command="{Binding BrowseFolderCommand}" />
|
||||
<TextBox Text="{Binding DataFolder, ...}" />
|
||||
</DockPanel>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
```
|
||||
|
||||
<!-- Available converters from App.xaml -->
|
||||
- `{StaticResource Base64ToImageConverter}` — converts data URI string to BitmapImage (added in 12-01)
|
||||
- `{StaticResource StringToVisibilityConverter}` — returns Visible if string non-empty, else Collapsed
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Add MSP logo section to SettingsView.xaml</name>
|
||||
<files>
|
||||
SharepointToolbox/Views/Tabs/SettingsView.xaml
|
||||
</files>
|
||||
<behavior>
|
||||
- Below the data folder DockPanel, a Separator and a new MSP Logo section appears
|
||||
- The section has a Label with localized "MSP Logo" text
|
||||
- A Border contains either an Image (when logo exists) or a TextBlock placeholder (when no logo)
|
||||
- Image is bound to MspLogoPreview via Base64ToImageConverter, max 80px height, max 240px width
|
||||
- Placeholder TextBlock shows localized "No logo configured" text, visible only when MspLogoPreview is null/empty
|
||||
- Two buttons (Import, Clear) are horizontally aligned below the preview
|
||||
- A TextBlock shows StatusMessage when set (for error feedback)
|
||||
</behavior>
|
||||
<action>
|
||||
1. Edit `SharepointToolbox/Views/Tabs/SettingsView.xaml`:
|
||||
After the Data folder `</DockPanel>`, before `</StackPanel>`, add:
|
||||
|
||||
```xml
|
||||
<Separator Margin="0,12" />
|
||||
|
||||
<!-- MSP Logo -->
|
||||
<Label Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[settings.logo.title]}" />
|
||||
<Border BorderBrush="#DDDDDD" BorderThickness="1" Padding="8" CornerRadius="4"
|
||||
HorizontalAlignment="Left" MinWidth="200" MinHeight="60" Margin="0,4,0,0">
|
||||
<Grid>
|
||||
<Image Source="{Binding MspLogoPreview, Converter={StaticResource Base64ToImageConverter}}"
|
||||
MaxHeight="80" MaxWidth="240" Stretch="Uniform" HorizontalAlignment="Left"
|
||||
Visibility="{Binding MspLogoPreview, Converter={StaticResource StringToVisibilityConverter}}" />
|
||||
<TextBlock Text="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[settings.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 MspLogoPreview, 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=[settings.logo.browse]}"
|
||||
Command="{Binding BrowseMspLogoCommand}" Width="80" Margin="0,0,8,0" />
|
||||
<Button Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[settings.logo.clear]}"
|
||||
Command="{Binding ClearMspLogoCommand}" Width="80" />
|
||||
</StackPanel>
|
||||
<TextBlock Text="{Binding StatusMessage}" Foreground="#CC0000" FontSize="11" Margin="0,4,0,0"
|
||||
Visibility="{Binding StatusMessage, Converter={StaticResource StringToVisibilityConverter}}" />
|
||||
```
|
||||
|
||||
Key decisions:
|
||||
- Border with light gray outline creates a visual container for the logo preview
|
||||
- Grid overlays Image and placeholder TextBlock — only one visible at a time
|
||||
- DataTrigger hides placeholder when StringToVisibilityConverter returns Visible
|
||||
- MaxHeight="80" and MaxWidth="240" keep the preview small but readable
|
||||
- Stretch="Uniform" preserves aspect ratio
|
||||
- StatusMessage in red only shows when non-empty (error feedback from import failures)
|
||||
</action>
|
||||
<verify>
|
||||
<automated>dotnet build --no-restore -warnaserror</automated>
|
||||
</verify>
|
||||
<done>SettingsView shows MSP logo section with live preview, Import/Clear buttons, and error message area. 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>
|
||||
- SettingsView.xaml has a visible MSP Logo section below the data folder
|
||||
- Image binds to MspLogoPreview via Base64ToImageConverter
|
||||
- Placeholder text shows when no logo is configured
|
||||
- Import and Clear buttons bind to existing ViewModel commands
|
||||
- StatusMessage displays in red when set
|
||||
- Build passes with zero warnings
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/12-branding-ui-views/12-02-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user