javier/Wino-Mail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Command bar in compose page

Browse Source 
Fixed align behaviour with Jodit
This commit is contained in:
Aleh Khantsevich
2024-07-06 00:52:19 +02:00
parent 4505630896
commit e65733754c
4 changed files with 212 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Wino.Mail/Dialogs/SignatureEditorDialog.xaml.cs
View File

@@ -245,6 +245,12 @@ namespace Wino.Dialogs
return string.Empty; return string.Empty;
} }
private async void WebViewToggleButtonClicked(object sender, RoutedEventArgs e)
{
var enable = WebviewToolBarButton.IsChecked == true ? "true" : "false";
await InvokeScriptSafeAsync($"toggleToolbar('{enable}');");
}
private async Task UpdateEditorThemeAsync() private async Task UpdateEditorThemeAsync()
{ {
await _domLoadedTask.Task; await _domLoadedTask.Task;
@@ -358,11 +364,5 @@ namespace Wino.Dialogs
private void SignatureNameTextBoxTextChanged(object sender, TextChangedEventArgs e) => IsPrimaryButtonEnabled = !string.IsNullOrWhiteSpace(SignatureNameTextBox.Text); private void SignatureNameTextBoxTextChanged(object sender, TextChangedEventArgs e) => IsPrimaryButtonEnabled = !string.IsNullOrWhiteSpace(SignatureNameTextBox.Text);
private void InvertComposerThemeClicked(object sender, RoutedEventArgs e) => IsComposerDarkMode = !IsComposerDarkMode; private void InvertComposerThemeClicked(object sender, RoutedEventArgs e) => IsComposerDarkMode = !IsComposerDarkMode;
private async void WebViewToggleButtonClicked(object sender, RoutedEventArgs e)
{
var enable = WebviewToolBarButton.IsChecked == true ? "true" : "false";
await InvokeScriptSafeAsync($"toggleToolbar('{enable}');");
}
} }
} }

2
Wino.Mail/JS/editor.js
View File

@@ -1,7 +1,7 @@
const editor = Jodit.make("#editor", { const editor = Jodit.make("#editor", {
"useSearch": false, "useSearch": false,
"toolbar": true, "toolbar": true,
"buttons": "bold,italic,underline,strikethrough,brush,ul,ol,font,fontsize,paragraph,image,link,indent,outdent,left", "buttons": "bold,italic,underline,strikethrough,brush,ul,ol,font,fontsize,paragraph,image,link,indent,outdent,align",
"inline": true, "inline": true,
"toolbarAdaptive": false, "toolbarAdaptive": false,
"toolbarInlineForSelection": false, "toolbarInlineForSelection": false,

448
Wino.Mail/Views/ComposePage.xaml
View File

@@ -186,270 +186,220 @@
</Grid> </Grid>
<!-- Editor Options --> <!-- Editor Options -->
<ScrollViewer <Grid Grid.Row="1" Padding="26,0,6,6">
Grid.Row="1" <CommandBar
Margin="0,6" HorizontalAlignment="Left"
VerticalAlignment="Top" DefaultLabelPosition="Collapsed"
HorizontalScrollBarVisibility="Hidden" IsDynamicOverflowEnabled="True"
HorizontalScrollMode="Enabled" Visibility="{x:Bind helpers:XamlHelpers.IsFormatSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
VerticalScrollBarVisibility="Hidden" <AppBarToggleButton
VerticalScrollMode="Disabled"> x:Name="BoldButton"
<Grid Margin="16,0,16,20" Padding="8,0"> Click="BoldButtonClicked"
<!-- Format Panel --> Label="Bold">
<Grid x:Name="FormatPanel" Visibility="{x:Bind helpers:XamlHelpers.IsFormatSection(ViewModel.SelectedToolbarSection), Mode=OneWay}"> <AppBarToggleButton.Icon>
<StackPanel Orientation="Horizontal" Spacing="12"> <PathIcon Data="{StaticResource BoldPathIcon}" />
<ToggleButton </AppBarToggleButton.Icon>
x:Name="BoldButton" </AppBarToggleButton>
Height="32" <AppBarToggleButton
Click="BoldButtonClicked"> x:Name="ItalicButton"
<ToggleButton.Content> Click="ItalicButtonClicked"
Label="Italic">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource ItalicPathIcon}" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarToggleButton
x:Name="UnderlineButton"
Click="UnderlineButtonClicked"
Label="Underline">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource UnderlinePathIcon}" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarToggleButton
x:Name="StrokeButton"
Click="StrokeButtonClicked"
Label="Stroke">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource StrikePathIcon}" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarSeparator />
<AppBarToggleButton
x:Name="BulletListButton"
Click="BulletListButtonClicked"
Label="Bullet List">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource BulletedListPathIcon}" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarToggleButton
x:Name="OrderedListButton"
Click="OrderedListButtonClicked"
Label="Ordered List">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource OrderedListPathIcon}" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarSeparator />
<AppBarButton
x:Name="DecreaseIndentButton"
Click="DecreaseIndentClicked"
Label="Outdent">
<AppBarButton.Content>
<Viewbox Width="16">
<PathIcon Data="{StaticResource DecreaseIndentPathIcon}" />
</Viewbox>
</AppBarButton.Content>
</AppBarButton>
<AppBarButton
x:Name="IncreaseIndentButton"
Click="IncreaseIndentClicked"
Label="Indent">
<AppBarButton.Content>
<Viewbox Width="16">
<PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
</Viewbox>
</AppBarButton.Content>
</AppBarButton>
<AppBarElementContainer HorizontalAlignment="Center" VerticalAlignment="Center">
<ComboBox
x:Name="AlignmentListView"
VerticalAlignment="Center"
Background="Transparent"
BorderBrush="Transparent"
SelectionChanged="AlignmentChanged">
<ComboBoxItem Tag="left">
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16"> <Viewbox Width="16">
<PathIcon Data="{StaticResource BoldPathIcon}" /> <PathIcon Data="{StaticResource AlignLeftPathIcon}" />
</Viewbox> </Viewbox>
</ToggleButton.Content> <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Left}" />
</ToggleButton> </StackPanel>
<ToggleButton </ComboBoxItem>
x:Name="ItalicButton"
Height="32" <ComboBoxItem Tag="center">
Click="ItalicButtonClicked"> <StackPanel Orientation="Horizontal" Spacing="8">
<ToggleButton.Content>
<Viewbox Width="16"> <Viewbox Width="16">
<PathIcon Data="{StaticResource ItalicPathIcon}" /> <PathIcon Data="{StaticResource AlignCenterPathIcon}" />
</Viewbox> </Viewbox>
</ToggleButton.Content> <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Center}" />
</ToggleButton> </StackPanel>
<ToggleButton </ComboBoxItem>
x:Name="UnderlineButton"
Height="32" <ComboBoxItem Tag="right">
Click="UnderlineButtonClicked"> <StackPanel Orientation="Horizontal" Spacing="8">
<ToggleButton.Content>
<Viewbox Width="16"> <Viewbox Width="16">
<PathIcon Data="{StaticResource UnderlinePathIcon}" /> <PathIcon Data="{StaticResource AlignRightPathIcon}" />
</Viewbox> </Viewbox>
</ToggleButton.Content> <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Right}" />
</ToggleButton> </StackPanel>
<ToggleButton </ComboBoxItem>
x:Name="StrokeButton"
Height="32" <ComboBoxItem Tag="justify">
Click="StrokeButtonClicked"> <StackPanel Orientation="Horizontal" Spacing="8">
<ToggleButton.Content>
<Viewbox Width="16"> <Viewbox Width="16">
<PathIcon Data="{StaticResource StrikePathIcon}" /> <PathIcon Data="{StaticResource AlignJustifyPathIcon}" />
</Viewbox> </Viewbox>
</ToggleButton.Content> <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Justify}" />
</ToggleButton> </StackPanel>
</ComboBoxItem>
</ComboBox>
</AppBarElementContainer>
<AppBarSeparator /> <AppBarSeparator />
<ToggleButton <AppBarToggleButton
x:Name="BulletListButton" x:Name="WebviewToolBarButton"
Height="32" Click="WebViewToggleButtonClicked"
Click="BulletListButtonClicked"> Label="Webview ToolBar"
<ToggleButton.Content> ToolTipService.ToolTip="Webview ToolBar">
<Viewbox Width="16"> <AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource BulletedListPathIcon}" /> <PathIcon Data="{StaticResource WebviewToolBarPathIcon}" />
</Viewbox> </AppBarToggleButton.Icon>
</ToggleButton.Content> </AppBarToggleButton>
</ToggleButton> </CommandBar>
<ToggleButton <!-- Insert Panel -->
x:Name="OrderedListButton" <CommandBar
Height="32" HorizontalAlignment="Left"
Click="OrderedListButtonClicked"> DefaultLabelPosition="Right"
<ToggleButton.Content> IsDynamicOverflowEnabled="True"
<Viewbox Width="16"> Visibility="{x:Bind helpers:XamlHelpers.IsInsertSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<PathIcon Data="{StaticResource OrderedListPathIcon}" /> <AppBarButton
</Viewbox> x:Name="FilesButton"
</ToggleButton.Content> Click="AddFilesClicked"
</ToggleButton> Label="{x:Bind domain:Translator.Files}">
<AppBarButton.Icon>
<PathIcon Data="{StaticResource AttachPathIcon}" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarSeparator /> <AppBarButton
x:Name="AddImageButton"
Click="AddImageClicked"
Label="{x:Bind domain:Translator.Photos}">
<AppBarButton.Icon>
<PathIcon Data="{StaticResource AddPhotoPathIcon}" />
</AppBarButton.Icon>
</AppBarButton>
<Button <AppBarButton
x:Name="DecreaseIndentButton" x:Name="EmojiButton"
Height="32" Click="EmojiButtonClicked"
Click="DecreaseIndentClicked"> Label="{x:Bind domain:Translator.Emoji}">
<Button.Content> <AppBarButton.Icon>
<Viewbox Width="16"> <PathIcon Data="{StaticResource EmojiPathIcon}" />
<PathIcon Data="{StaticResource DecreaseIndentPathIcon}" /> </AppBarButton.Icon>
</Viewbox> </AppBarButton>
</Button.Content> </CommandBar>
</Button>
<Button <!-- Draw Panel -->
x:Name="IncreaseIndentButton" <Grid x:Name="DrawPanel" Visibility="{x:Bind helpers:XamlHelpers.IsDrawSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
Height="32" <TextBlock Text="{x:Bind domain:Translator.ComingSoon}" />
Click="IncreaseIndentClicked">
<Button.Content>
<Viewbox Width="16">
<PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
</Viewbox>
</Button.Content>
</Button>
<ComboBox
x:Name="AlignmentListView"
Width="120"
Height="32"
VerticalAlignment="Center"
SelectionChanged="AlignmentChanged">
<ComboBoxItem Tag="left">
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16">
<PathIcon Data="{StaticResource AlignLeftPathIcon}" />
</Viewbox>
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Left}" />
</StackPanel>
</ComboBoxItem>
<ComboBoxItem Tag="center">
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16">
<PathIcon Data="{StaticResource AlignCenterPathIcon}" />
</Viewbox>
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Center}" />
</StackPanel>
</ComboBoxItem>
<ComboBoxItem Tag="right">
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16">
<PathIcon Data="{StaticResource AlignRightPathIcon}" />
</Viewbox>
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Right}" />
</StackPanel>
</ComboBoxItem>
<ComboBoxItem Tag="justify">
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16">
<PathIcon Data="{StaticResource AlignJustifyPathIcon}" />
</Viewbox>
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Justify}" />
</StackPanel>
</ComboBoxItem>
</ComboBox>
</StackPanel>
</Grid>
<!-- Insert Panel -->
<Grid x:Name="InsertPanel" Visibility="{x:Bind helpers:XamlHelpers.IsInsertSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<StackPanel Orientation="Horizontal" Spacing="12">
<Button
x:Name="FilesButton"
Height="32"
Click="AddFilesClicked">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16" VerticalAlignment="Center">
<PathIcon Data="{StaticResource AttachPathIcon}" />
</Viewbox>
<TextBlock Text="{x:Bind domain:Translator.Files}" />
</StackPanel>
</Button.Content>
</Button>
<Button
x:Name="AddImageButton"
Height="32"
Click="AddImageClicked">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16" VerticalAlignment="Center">
<PathIcon Data="{StaticResource AddPhotoPathIcon}" />
</Viewbox>
<TextBlock Text="{x:Bind domain:Translator.Photos}" />
</StackPanel>
</Button.Content>
</Button>
<Button
x:Name="EmojiButton"
Height="32"
Click="EmojiButtonClicked">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16" VerticalAlignment="Center">
<PathIcon Data="{StaticResource EmojiPathIcon}" />
</Viewbox>
<TextBlock Text="{x:Bind domain:Translator.Emoji}" />
</StackPanel>
</Button.Content>
</Button>
<Button
x:Name="LinkButton"
Height="32"
Click="LinkButtonClicked">
<Button.Flyout>
<Flyout x:Name="HyperlinkFlyout">
<StackPanel Width="250" Spacing="6">
<TextBox x:Name="HyperlinkTextBox" Header="Text" />
<TextBox
x:Name="LinkUrlTextBox"
Header="Link"
PlaceholderText="https://" />
<Button
x:Name="AddHyperlinkButton"
Margin="0,6"
HorizontalAlignment="Stretch"
Click="HyperlinkAddClicked"
Content="{x:Bind domain:Translator.AddHyperlink}" />
</StackPanel>
</Flyout>
</Button.Flyout>
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16" VerticalAlignment="Center">
<PathIcon Data="{StaticResource AddLinkPathIcon}" />
</Viewbox>
<TextBlock Text="Link" />
</StackPanel>
</Button.Content>
</Button>
</StackPanel>
</Grid>
<!-- Draw Panel -->
<Grid x:Name="DrawPanel" Visibility="{x:Bind helpers:XamlHelpers.IsDrawSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<TextBlock Text="{x:Bind domain:Translator.ComingSoon}" />
</Grid>
<!-- Options Panel -->
<Grid x:Name="OptionsPanel" Visibility="{x:Bind helpers:XamlHelpers.IsOptionsSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<muxc:ToggleSplitButton x:Name="ImportanceSplitButton" IsChecked="{x:Bind ViewModel.IsImportanceSelected, Mode=TwoWay}">
<SymbolIcon x:Name="ImportanceSplitButtonContent" Symbol="Important" />
<muxc:ToggleSplitButton.Flyout>
<Flyout x:Name="ImportanceFlyout" Placement="Bottom">
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Padding" Value="4" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Margin" Value="6" />
<Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
</Style>
</StackPanel.Resources>
<Button Click="ImportanceClicked">
<Button.Tag>
<mailkit:MessageImportance>High</mailkit:MessageImportance>
</Button.Tag>
<SymbolIcon Symbol="Important" />
</Button>
<Button Click="ImportanceClicked">
<Button.Tag>
<mailkit:MessageImportance>Low</mailkit:MessageImportance>
</Button.Tag>
<SymbolIcon Symbol="Download" />
</Button>
</StackPanel>
</Flyout>
</muxc:ToggleSplitButton.Flyout>
</muxc:ToggleSplitButton>
</Grid>
</Grid> </Grid>
</ScrollViewer>
<!-- Options Panel -->
<Grid x:Name="OptionsPanel" Visibility="{x:Bind helpers:XamlHelpers.IsOptionsSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<muxc:ToggleSplitButton x:Name="ImportanceSplitButton" IsChecked="{x:Bind ViewModel.IsImportanceSelected, Mode=TwoWay}">
<SymbolIcon x:Name="ImportanceSplitButtonContent" Symbol="Important" />
<muxc:ToggleSplitButton.Flyout>
<Flyout x:Name="ImportanceFlyout" Placement="Bottom">
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Padding" Value="4" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Margin" Value="6" />
<Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
</Style>
</StackPanel.Resources>
<Button Click="ImportanceClicked">
<Button.Tag>
<mailkit:MessageImportance>High</mailkit:MessageImportance>
</Button.Tag>
<SymbolIcon Symbol="Important" />
</Button>
<Button Click="ImportanceClicked">
<Button.Tag>
<mailkit:MessageImportance>Low</mailkit:MessageImportance>
</Button.Tag>
<SymbolIcon Symbol="Download" />
</Button>
</StackPanel>
</Flyout>
</muxc:ToggleSplitButton.Flyout>
</muxc:ToggleSplitButton>
</Grid>
</Grid>
<!-- Mime Info --> <!-- Mime Info -->
<Grid <Grid

19
Wino.Mail/Views/ComposePage.xaml.cs
View File

@@ -228,6 +228,12 @@ namespace Wino.Views
} }
} }
private async void WebViewToggleButtonClicked(object sender, RoutedEventArgs e)
{
var enable = WebviewToolBarButton.IsChecked == true ? "true" : "false";
await InvokeScriptSafeAsync($"toggleToolbar('{enable}');");
}
public async Task<string> ExecuteScriptFunctionAsync(string functionName, params object[] parameters) public async Task<string> ExecuteScriptFunctionAsync(string functionName, params object[] parameters)
{ {
string script = functionName + "("; string script = functionName + "(";
@@ -289,11 +295,6 @@ namespace Wino.Views
return string.Empty; return string.Empty;
} }
private async void LinkButtonClicked(object sender, RoutedEventArgs e)
{
HyperlinkTextBox.Text = await TryGetSelectedTextAsync();
}
public async Task UpdateEditorThemeAsync() public async Task UpdateEditorThemeAsync()
{ {
await DOMLoadedTask.Task; await DOMLoadedTask.Task;
@@ -467,14 +468,6 @@ namespace Wino.Views
await RenderInternalAsync(message.RenderModel.RenderHtml); await RenderInternalAsync(message.RenderModel.RenderHtml);
} }
private async void HyperlinkAddClicked(object sender, RoutedEventArgs e)
{
await InvokeScriptSafeAsync($"addHyperlink('{LinkUrlTextBox.Text}')");
LinkUrlTextBox.Text = string.Empty;
HyperlinkFlyout.Hide();
}
private void BarDynamicOverflowChanging(CommandBar sender, DynamicOverflowItemsChangingEventArgs args) private void BarDynamicOverflowChanging(CommandBar sender, DynamicOverflowItemsChangingEventArgs args)
{ {
if (args.Action == CommandBarDynamicOverflowAction.AddingToOverflow) if (args.Action == CommandBarDynamicOverflowAction.AddingToOverflow)