Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add h1~h3 to toolbar widget

Browse Source
This commit is contained in:
Lucas.Xu 2022-08-17 21:32:15 +08:00
parent 95879111f9
commit 48a81d41ea
8 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/center.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4L12 4" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 8H11" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 12L12 12" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 361 B

4
frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h1.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25344 3.6001H9.63344V12.0001H8.25344V8.3641H4.65344V12.0001H3.27344V3.6001H4.65344V7.0441H8.25344V3.6001Z" fill="white"/>
<path d="M12.0325 6.4001H12.9925V12.0001H11.8885V7.5681L10.8325 7.8641L10.5605 6.9201L12.0325 6.4001Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

4
frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h2.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.67531 3.6001H9.05531V12.0001H7.67531V8.3641H4.07531V12.0001H2.69531V3.6001H4.07531V7.0441H7.67531V3.6001Z" fill="white"/>
<path d="M10.1104 12.0001V11.1761L12.0224 9.2081C12.449 8.7601 12.6624 8.38676 12.6624 8.0881C12.6624 7.86943 12.593 7.69343 12.4544 7.5601C12.321 7.42676 12.1477 7.3601 11.9344 7.3601C11.513 7.3601 11.201 7.57876 10.9984 8.0161L10.0704 7.4721C10.2464 7.0881 10.4997 6.79476 10.8304 6.5921C11.161 6.38943 11.5237 6.2881 11.9184 6.2881C12.425 6.2881 12.8597 6.4481 13.2224 6.7681C13.585 7.08276 13.7664 7.50943 13.7664 8.0481C13.7664 8.62943 13.4597 9.22677 12.8464 9.8401L11.7504 10.9361H13.8544V12.0001H10.1104Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 766 B

4
frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/h3.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.62063 3.6001H9.00063V12.0001H7.62063V8.3641H4.02062V12.0001H2.64062V3.6001H4.02062V7.0441H7.62063V3.6001Z" fill="white"/>
<path d="M12.6637 8.6721C13.0424 8.7841 13.349 8.98143 13.5837 9.2641C13.8237 9.54143 13.9437 9.87743 13.9437 10.2721C13.9437 10.8481 13.749 11.2988 13.3597 11.6241C12.9757 11.9494 12.5037 12.1121 11.9437 12.1121C11.5064 12.1121 11.1144 12.0134 10.7677 11.8161C10.4264 11.6134 10.1784 11.3174 10.0237 10.9281L10.9677 10.3841C11.1064 10.8161 11.4317 11.0321 11.9437 11.0321C12.2264 11.0321 12.445 10.9654 12.5997 10.8321C12.7597 10.6934 12.8397 10.5068 12.8397 10.2721C12.8397 10.0428 12.7597 9.85876 12.5997 9.7201C12.445 9.58143 12.2264 9.5121 11.9437 9.5121H11.7037L11.2797 8.8721L12.3837 7.4321H10.1917V6.4001H13.7117V7.3121L12.6637 8.6721Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 897 B

5
frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/left.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4L12 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 8H10" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 12L12 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

4
frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/link.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 8.91521C7.21574 9.22582 7.49099 9.48283 7.80707 9.66881C8.12315 9.85479 8.47268 9.96538 8.83194 9.99309C9.1912 10.0208 9.5518 9.96497 9.88926 9.8294C10.2267 9.69383 10.5332 9.48169 10.7878 9.20736L12.2949 7.58431C12.7525 7.07413 13.0056 6.39083 12.9999 5.68156C12.9942 4.9723 12.73 4.29384 12.2643 3.7923C11.7986 3.29075 11.1686 3.00627 10.51 3.0001C9.85142 2.99394 9.21693 3.26659 8.7432 3.75935L7.87913 4.68448" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 7.08479C8.78426 6.77418 8.50901 6.51717 8.19293 6.33119C7.87685 6.14521 7.52732 6.03462 7.16806 6.00691C6.8088 5.9792 6.4482 6.03503 6.11074 6.1706C5.77327 6.30617 5.46683 6.51831 5.21218 6.79264L3.7051 8.41569C3.24755 8.92587 2.99437 9.60918 3.00009 10.3184C3.00582 11.0277 3.26998 11.7062 3.73569 12.2077C4.2014 12.7092 4.8314 12.9937 5.48999 12.9999C6.14858 13.0061 6.78307 12.7334 7.2568 12.2407L8.11584 11.3155" stroke="#00BCF0" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
frontend/app_flowy/packages/appflowy_editor/assets/images/toolbar/right.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4L12 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 8H12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 12L12 12" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

17
frontend/app_flowy/packages/appflowy_editor/lib/src/render/selection/toolbar_widget.dart
View File

@ -18,9 +18,9 @@ ToolbarEventHandlers defaultToolbarEventHandlers = {
'bulleted_list': (editorState) => formatBulletedList(editorState),
'highlight': (editorState) => formatHighlight(editorState),
'Text': (editorState) => formatText(editorState),
'H1': (editorState) => formatHeading(editorState, StyleKey.h1),
'H2': (editorState) => formatHeading(editorState, StyleKey.h2),
'H3': (editorState) => formatHeading(editorState, StyleKey.h3),
'h1': (editorState) => formatHeading(editorState, StyleKey.h1),
'h2': (editorState) => formatHeading(editorState, StyleKey.h2),
'h3': (editorState) => formatHeading(editorState, StyleKey.h3),
};
List<String> defaultListToolbarEventNames = [
@ -95,7 +95,10 @@ class _ToolbarWidgetState extends State<ToolbarWidget> with ToolbarMixin {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// _listToolbar(context),
// _centerToolbarIcon('divider', width: 10),
_centerToolbarIcon('h1', tooltipMessage: 'Heading 1'),
_centerToolbarIcon('h2', tooltipMessage: 'Heading 2'),
_centerToolbarIcon('h3', tooltipMessage: 'Heading 3'),
_centerToolbarIcon('divider', width: 2),
_centerToolbarIcon('bold', tooltipMessage: 'Bold'),
_centerToolbarIcon('italic', tooltipMessage: 'Italic'),
_centerToolbarIcon('strikethrough',
@ -134,11 +137,11 @@ class _ToolbarWidgetState extends State<ToolbarWidget> with ToolbarMixin {
child: GestureDetector(
onTap: onTap ?? () => _onTap(name),
child: SizedBox.fromSize(
size: width != null
? Size(width, toolbarHeight)
: Size.square(toolbarHeight),
size:
Size(toolbarHeight - (width != null ? 20 : 0), toolbarHeight),
child: Center(
child: FlowySvg(
size: Size(width ?? 20, 20),
name: 'toolbar/$name',
),
),