183 lines
7.7 KiB
Markdown
183 lines
7.7 KiB
Markdown
---
|
|
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>
|