Command bar in compose page

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

View File

@@ -245,6 +245,12 @@ namespace Wino.Dialogs
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()
{
await _domLoadedTask.Task;
@@ -358,11 +364,5 @@ namespace Wino.Dialogs
private void SignatureNameTextBoxTextChanged(object sender, TextChangedEventArgs e) => IsPrimaryButtonEnabled = !string.IsNullOrWhiteSpace(SignatureNameTextBox.Text);
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}');");
}
}
}

View File

@@ -1,7 +1,7 @@
const editor = Jodit.make("#editor", {
"useSearch": false,
"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,
"toolbarAdaptive": false,
"toolbarInlineForSelection": false,

View File

@@ -186,112 +186,95 @@
</Grid>
<!-- Editor Options -->
<ScrollViewer
Grid.Row="1"
Margin="0,6"
VerticalAlignment="Top"
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Enabled"
VerticalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled">
<Grid Margin="16,0,16,20" Padding="8,0">
<!-- Format Panel -->
<Grid x:Name="FormatPanel" Visibility="{x:Bind helpers:XamlHelpers.IsFormatSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<StackPanel Orientation="Horizontal" Spacing="12">
<ToggleButton
<Grid Grid.Row="1" Padding="26,0,6,6">
<CommandBar
HorizontalAlignment="Left"
DefaultLabelPosition="Collapsed"
IsDynamicOverflowEnabled="True"
Visibility="{x:Bind helpers:XamlHelpers.IsFormatSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<AppBarToggleButton
x:Name="BoldButton"
Height="32"
Click="BoldButtonClicked">
<ToggleButton.Content>
<Viewbox Width="16">
Click="BoldButtonClicked"
Label="Bold">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource BoldPathIcon}" />
</Viewbox>
</ToggleButton.Content>
</ToggleButton>
<ToggleButton
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarToggleButton
x:Name="ItalicButton"
Height="32"
Click="ItalicButtonClicked">
<ToggleButton.Content>
<Viewbox Width="16">
Click="ItalicButtonClicked"
Label="Italic">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource ItalicPathIcon}" />
</Viewbox>
</ToggleButton.Content>
</ToggleButton>
<ToggleButton
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarToggleButton
x:Name="UnderlineButton"
Height="32"
Click="UnderlineButtonClicked">
<ToggleButton.Content>
<Viewbox Width="16">
Click="UnderlineButtonClicked"
Label="Underline">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource UnderlinePathIcon}" />
</Viewbox>
</ToggleButton.Content>
</ToggleButton>
<ToggleButton
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarToggleButton
x:Name="StrokeButton"
Height="32"
Click="StrokeButtonClicked">
<ToggleButton.Content>
<Viewbox Width="16">
Click="StrokeButtonClicked"
Label="Stroke">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource StrikePathIcon}" />
</Viewbox>
</ToggleButton.Content>
</ToggleButton>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarSeparator />
<ToggleButton
<AppBarToggleButton
x:Name="BulletListButton"
Height="32"
Click="BulletListButtonClicked">
<ToggleButton.Content>
<Viewbox Width="16">
Click="BulletListButtonClicked"
Label="Bullet List">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource BulletedListPathIcon}" />
</Viewbox>
</ToggleButton.Content>
</ToggleButton>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<ToggleButton
<AppBarToggleButton
x:Name="OrderedListButton"
Height="32"
Click="OrderedListButtonClicked">
<ToggleButton.Content>
<Viewbox Width="16">
Click="OrderedListButtonClicked"
Label="Ordered List">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource OrderedListPathIcon}" />
</Viewbox>
</ToggleButton.Content>
</ToggleButton>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarSeparator />
<Button
<AppBarButton
x:Name="DecreaseIndentButton"
Height="32"
Click="DecreaseIndentClicked">
<Button.Content>
Click="DecreaseIndentClicked"
Label="Outdent">
<AppBarButton.Content>
<Viewbox Width="16">
<PathIcon Data="{StaticResource DecreaseIndentPathIcon}" />
</Viewbox>
</Button.Content>
</Button>
</AppBarButton.Content>
</AppBarButton>
<Button
<AppBarButton
x:Name="IncreaseIndentButton"
Height="32"
Click="IncreaseIndentClicked">
<Button.Content>
Click="IncreaseIndentClicked"
Label="Indent">
<AppBarButton.Content>
<Viewbox Width="16">
<PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
</Viewbox>
</Button.Content>
</Button>
</AppBarButton.Content>
</AppBarButton>
<AppBarElementContainer HorizontalAlignment="Center" VerticalAlignment="Center">
<ComboBox
x:Name="AlignmentListView"
Width="120"
Height="32"
VerticalAlignment="Center"
Background="Transparent"
BorderBrush="Transparent"
SelectionChanged="AlignmentChanged">
<ComboBoxItem Tag="left">
<StackPanel Orientation="Horizontal" Spacing="8">
@@ -329,86 +312,54 @@
</StackPanel>
</ComboBoxItem>
</ComboBox>
</StackPanel>
</Grid>
</AppBarElementContainer>
<AppBarSeparator />
<AppBarToggleButton
x:Name="WebviewToolBarButton"
Click="WebViewToggleButtonClicked"
Label="Webview ToolBar"
ToolTipService.ToolTip="Webview ToolBar">
<AppBarToggleButton.Icon>
<PathIcon Data="{StaticResource WebviewToolBarPathIcon}" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
</CommandBar>
<!-- Insert Panel -->
<Grid x:Name="InsertPanel" Visibility="{x:Bind helpers:XamlHelpers.IsInsertSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<StackPanel Orientation="Horizontal" Spacing="12">
<Button
<CommandBar
HorizontalAlignment="Left"
DefaultLabelPosition="Right"
IsDynamicOverflowEnabled="True"
Visibility="{x:Bind helpers:XamlHelpers.IsInsertSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
<AppBarButton
x:Name="FilesButton"
Height="32"
Click="AddFilesClicked">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16" VerticalAlignment="Center">
Click="AddFilesClicked"
Label="{x:Bind domain:Translator.Files}">
<AppBarButton.Icon>
<PathIcon Data="{StaticResource AttachPathIcon}" />
</Viewbox>
<TextBlock Text="{x:Bind domain:Translator.Files}" />
</StackPanel>
</Button.Content>
</Button>
</AppBarButton.Icon>
</AppBarButton>
<Button
<AppBarButton
x:Name="AddImageButton"
Height="32"
Click="AddImageClicked">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16" VerticalAlignment="Center">
Click="AddImageClicked"
Label="{x:Bind domain:Translator.Photos}">
<AppBarButton.Icon>
<PathIcon Data="{StaticResource AddPhotoPathIcon}" />
</Viewbox>
<TextBlock Text="{x:Bind domain:Translator.Photos}" />
</StackPanel>
</Button.Content>
</Button>
</AppBarButton.Icon>
</AppBarButton>
<Button
<AppBarButton
x:Name="EmojiButton"
Height="32"
Click="EmojiButtonClicked">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16" VerticalAlignment="Center">
Click="EmojiButtonClicked"
Label="{x:Bind domain:Translator.Emoji}">
<AppBarButton.Icon>
<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>
</AppBarButton.Icon>
</AppBarButton>
</CommandBar>
<!-- Draw Panel -->
<Grid x:Name="DrawPanel" Visibility="{x:Bind helpers:XamlHelpers.IsDrawSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
@@ -449,7 +400,6 @@
</muxc:ToggleSplitButton>
</Grid>
</Grid>
</ScrollViewer>
<!-- Mime Info -->
<Grid

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)
{
string script = functionName + "(";
@@ -289,11 +295,6 @@ namespace Wino.Views
return string.Empty;
}
private async void LinkButtonClicked(object sender, RoutedEventArgs e)
{
HyperlinkTextBox.Text = await TryGetSelectedTextAsync();
}
public async Task UpdateEditorThemeAsync()
{
await DOMLoadedTask.Task;
@@ -467,14 +468,6 @@ namespace Wino.Views
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)
{
if (args.Action == CommandBarDynamicOverflowAction.AddingToOverflow)