eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

TF-738 Show button align in composer web

Browse Source
This commit is contained in:
dab246
2022-07-26 16:34:10 +07:00
committed by Dat H. Pham
parent f89b842692
commit 566832379c
13 changed files with 288 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/ic_align_center.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.7085 8.68854H14.0002H21.292C21.5127 8.68854 21.6992 8.6084 21.8516 8.44812C22.0039 8.28784 22.0801 8.09998 22.0801 7.88449C22.0801 7.66379 22.0039 7.47458 21.8516 7.31693C21.6992 7.15927 21.5127 7.08044 21.292 7.08044L6.7085 7.08044C6.49316 7.08044 6.30811 7.15796 6.15283 7.31299C5.99805 7.46802 5.92041 7.65851 5.92041 7.88449C5.92041 8.00446 5.94336 8.11508 5.98877 8.2164C6.02734 8.30151 6.08203 8.38007 6.15283 8.45206C6.30811 8.60971 6.49316 8.68854 6.7085 8.68854Z" fill="#99A2AD"/>
<path d="M8.7959 12.8195H19.0596C19.2407 12.8195 19.3994 12.7653 19.5342 12.6571C19.5635 12.6336 19.5918 12.6076 19.6191 12.579C19.7715 12.4187 19.8477 12.2309 19.8477 12.0154C19.8477 11.7947 19.7715 11.6042 19.6191 11.4439C19.4668 11.2836 19.2803 11.2035 19.0596 11.2035H8.7959C8.5752 11.2035 8.3877 11.2823 8.23242 11.4399C8.07764 11.5976 8 11.7894 8 12.0154C8 12.2361 8.07764 12.4253 8.23242 12.583C8.3877 12.7406 8.5752 12.8195 8.7959 12.8195Z" fill="#99A2AD"/>
<path d="M6.7085 16.7886H21.292C21.5127 16.7886 21.6992 16.7084 21.8516 16.5481C22.0039 16.3878 22.0801 16.2 22.0801 15.9845C22.0801 15.7638 22.0039 15.5746 21.8516 15.4169C21.6992 15.2593 21.5127 15.1805 21.292 15.1805H6.7085C6.49316 15.1805 6.30811 15.258 6.15283 15.413C5.99805 15.568 5.92041 15.7585 5.92041 15.9845C5.92041 16.2052 5.99805 16.3944 6.15283 16.5521C6.30811 16.7097 6.49316 16.7886 6.7085 16.7886Z" fill="#99A2AD"/>
<path d="M8.7959 20.9195H19.0596C19.2803 20.9195 19.4668 20.8393 19.6191 20.679C19.7183 20.575 19.7847 20.4592 19.8193 20.3318C19.8384 20.2631 19.8477 20.1909 19.8477 20.1154C19.8477 19.8947 19.7715 19.7042 19.6191 19.5439C19.4668 19.3836 19.2803 19.3035 19.0596 19.3035H8.7959C8.5752 19.3035 8.3877 19.3823 8.23242 19.5399C8.07764 19.6976 8 19.8894 8 20.1154C8 20.3361 8.07764 20.5253 8.23242 20.683C8.31445 20.7664 8.40576 20.8278 8.50586 20.867C8.59521 20.902 8.69189 20.9195 8.7959 20.9195Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

assets/images/ic_align_indent.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5258 8.60023H22.8208C23.0363 8.60023 23.2215 8.5214 23.3765 8.36374C23.5316 8.20608 23.6091 8.01689 23.6091 7.79617C23.6091 7.57545 23.5316 7.38758 23.3765 7.23255C23.2215 7.07752 23.0363 7 22.8208 7H12.5258C12.305 7 12.1185 7.07883 11.9661 7.23649C11.8137 7.39414 11.7375 7.58071 11.7375 7.79617C11.7375 8.01164 11.8137 8.19951 11.9661 8.3598C12.1185 8.52008 12.305 8.60023 12.5258 8.60023ZM12.5258 12.7387H22.8208C23.0363 12.7387 23.2215 12.6586 23.3765 12.4983C23.5316 12.338 23.6091 12.1475 23.6091 11.9268C23.6091 11.7061 23.5316 11.5182 23.3765 11.3632C23.2215 11.2081 23.0363 11.1306 22.8208 11.1306H12.5258C12.305 11.1306 12.1185 11.2081 11.9661 11.3632C11.8137 11.5182 11.7375 11.7061 11.7375 11.9268C11.7375 12.1423 11.8137 12.3315 11.9661 12.4944C12.1185 12.6573 12.305 12.7387 12.5258 12.7387ZM12.5258 16.8694H22.8208C23.0363 16.8694 23.2215 16.7905 23.3765 16.6329C23.5316 16.4752 23.6091 16.286 23.6091 16.0653C23.6091 15.8393 23.5316 15.6488 23.3765 15.4938C23.2215 15.3388 23.0363 15.2613 22.8208 15.2613H12.5258C12.305 15.2613 12.1185 15.3401 11.9661 15.4977C11.8137 15.6554 11.7375 15.8446 11.7375 16.0653C11.7375 16.2808 11.8137 16.4687 11.9661 16.6289C12.1185 16.7892 12.305 16.8694 12.5258 16.8694ZM12.5258 21H18.501C18.7217 21 18.9096 20.9212 19.0646 20.7635C19.2196 20.6059 19.2972 20.4167 19.2972 20.1959C19.2972 19.97 19.2196 19.7782 19.0646 19.6205C18.9096 19.4628 18.7217 19.384 18.501 19.384H12.5258C12.305 19.384 12.1185 19.4642 11.9661 19.6244C11.8137 19.7847 11.7375 19.9752 11.7375 20.1959C11.7375 20.4114 11.8137 20.5993 11.9661 20.7596C12.1185 20.9199 12.305 21 12.5258 21ZM5.73072 16.6881L8.55279 14.8041C8.72095 14.6884 8.83132 14.5413 8.88387 14.3626C8.93642 14.1839 8.93379 14.0066 8.87599 13.8305C8.81818 13.6545 8.71044 13.5086 8.55279 13.393L5.73072 11.4775C5.50999 11.3251 5.29716 11.2502 5.0922 11.2528C4.88725 11.2554 4.71908 11.3251 4.5877 11.4617C4.45632 11.5983 4.39062 11.798 4.39062 12.0608V16.1126C4.39062 16.3649 4.45763 16.5567 4.59164 16.6881C4.72565 16.8194 4.89644 16.8864 5.10403 16.8891C5.31161 16.8917 5.5205 16.8247 5.73072 16.6881Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

assets/images/ic_align_justify.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.71631 8.68842H14.0081H21.2998C21.5205 8.68842 21.707 8.60828 21.8594 8.448C22.0117 8.28772 22.0879 8.09985 22.0879 7.88437C22.0879 7.66367 22.0117 7.47446 21.8594 7.3168C21.707 7.15915 21.5205 7.08032 21.2998 7.08032L6.71631 7.08032C6.50098 7.08032 6.31592 7.15784 6.16064 7.31287C6.00586 7.4679 5.92822 7.65839 5.92822 7.88437C5.92822 8.00433 5.95117 8.11496 5.99658 8.21628C6.03516 8.30139 6.08984 8.37994 6.16064 8.45193C6.31592 8.60959 6.50098 8.68842 6.71631 8.68842Z" fill="#99A2AD"/>
<path d="M6.70947 12.8192L21.2998 12.8197C21.481 12.8197 21.6396 12.7656 21.7744 12.6573C21.8037 12.6339 21.832 12.6078 21.8594 12.5793C22.0117 12.419 22.0879 12.2311 22.0879 12.0157C22.0879 11.7949 22.0117 11.6044 21.8594 11.4442C21.707 11.2838 21.5205 11.2037 21.2998 11.2037L6.70947 11.2032C6.48877 11.2032 6.30127 11.282 6.146 11.4397C5.99121 11.5974 5.91357 11.7892 5.91357 12.0151C5.91357 12.2358 5.99121 12.425 6.146 12.5827C6.30127 12.7404 6.48877 12.8192 6.70947 12.8192Z" fill="#99A2AD"/>
<path d="M6.71631 16.7885H21.2998C21.5205 16.7885 21.707 16.7083 21.8594 16.548C22.0117 16.3877 22.0879 16.1999 22.0879 15.9844C22.0879 15.7637 22.0117 15.5745 21.8594 15.4168C21.707 15.2592 21.5205 15.1803 21.2998 15.1803H6.71631C6.50098 15.1803 6.31592 15.2578 6.16064 15.4129C6.00586 15.5679 5.92822 15.7584 5.92822 15.9844C5.92822 16.2051 6.00586 16.3943 6.16064 16.5519C6.31592 16.7096 6.50098 16.7885 6.71631 16.7885Z" fill="#99A2AD"/>
<path d="M6.70947 20.9192L21.2998 20.9197C21.5205 20.9197 21.707 20.8396 21.8594 20.6793C21.9585 20.5752 22.0249 20.4594 22.0596 20.3321C22.0786 20.2633 22.0879 20.1912 22.0879 20.1157C22.0879 19.8949 22.0117 19.7044 21.8594 19.5442C21.707 19.3839 21.5205 19.3037 21.2998 19.3037L6.70947 19.3032C6.48877 19.3032 6.30127 19.382 6.146 19.5397C5.99121 19.6974 5.91357 19.8892 5.91357 20.1151C5.91357 20.3358 5.99121 20.5251 6.146 20.6827C6.22803 20.7661 6.31934 20.8275 6.41943 20.8668C6.50879 20.9017 6.60547 20.9192 6.70947 20.9192Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

assets/images/ic_align_left.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.2915 8.68866H6.70801C6.4873 8.68866 6.30078 8.60852 6.14844 8.44824C5.99609 8.28796 5.91992 8.1001 5.91992 7.88461C5.91992 7.66391 5.99609 7.4747 6.14844 7.31705C6.30078 7.15939 6.4873 7.08057 6.70801 7.08057L21.2915 7.08057C21.5068 7.08057 21.6919 7.15808 21.8472 7.31311C22.002 7.46814 22.0796 7.65863 22.0796 7.88461C22.0796 8.00458 22.0566 8.1152 22.0112 8.21652C21.9727 8.30164 21.918 8.38019 21.8472 8.45218C21.6919 8.60983 21.5068 8.68866 21.2915 8.68866Z" fill="#99A2AD"/>
<path d="M16.9717 12.8193H6.70801C6.52686 12.8193 6.36816 12.7652 6.2334 12.6569C6.2041 12.6335 6.17578 12.6075 6.14844 12.5789C5.99609 12.4186 5.91992 12.2307 5.91992 12.0153C5.91992 11.7945 5.99609 11.604 6.14844 11.4438C6.30078 11.2834 6.4873 11.2033 6.70801 11.2033H16.9717C17.1924 11.2033 17.3799 11.2821 17.5352 11.4398C17.6899 11.5975 17.7676 11.7893 17.7676 12.0153C17.7676 12.236 17.6899 12.4252 17.5352 12.5828C17.3799 12.7405 17.1924 12.8193 16.9717 12.8193Z" fill="#99A2AD"/>
<path d="M21.2915 16.7887H6.70801C6.4873 16.7887 6.30078 16.7085 6.14844 16.5482C5.99609 16.388 5.91992 16.2001 5.91992 15.9846C5.91992 15.7639 5.99609 15.5747 6.14844 15.4171C6.30078 15.2594 6.4873 15.1806 6.70801 15.1806H21.2915C21.5068 15.1806 21.6919 15.2581 21.8472 15.4131C22.002 15.5681 22.0796 15.7586 22.0796 15.9846C22.0796 16.2054 22.002 16.3945 21.8472 16.5522C21.6919 16.7098 21.5068 16.7887 21.2915 16.7887Z" fill="#99A2AD"/>
<path d="M16.9717 20.9193H6.70801C6.4873 20.9193 6.30078 20.8392 6.14844 20.6789C6.04932 20.5748 5.98291 20.459 5.94824 20.3317C5.9292 20.2629 5.91992 20.1908 5.91992 20.1153C5.91992 19.8945 5.99609 19.704 6.14844 19.5438C6.30078 19.3835 6.4873 19.3033 6.70801 19.3033H16.9717C17.1924 19.3033 17.3799 19.3821 17.5352 19.5398C17.6899 19.6975 17.7676 19.8893 17.7676 20.1153C17.7676 20.336 17.6899 20.5252 17.5352 20.6828C17.4531 20.7662 17.3618 20.8276 17.2617 20.8669C17.1724 20.9018 17.0757 20.9193 16.9717 20.9193Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

assets/images/ic_align_outdent.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4623 8.60023C15.6778 8.60023 15.863 8.52008 16.0181 8.3598C16.1731 8.19951 16.2506 8.01164 16.2506 7.79617C16.2506 7.58071 16.1744 7.39414 16.022 7.23649C15.8696 7.07883 15.683 7 15.4623 7H5.16726C4.94654 7 4.75867 7.07752 4.60364 7.23255C4.44861 7.38758 4.37109 7.57545 4.37109 7.79617C4.37109 8.01689 4.44861 8.20608 4.60364 8.36374C4.75867 8.5214 4.94654 8.60023 5.16726 8.60023H15.4623ZM15.4623 12.7387C15.6778 12.7387 15.863 12.6573 16.0181 12.4944C16.1731 12.3315 16.2506 12.1423 16.2506 11.9268C16.2506 11.7061 16.1744 11.5182 16.022 11.3632C15.8696 11.2081 15.683 11.1306 15.4623 11.1306H5.16726C4.94654 11.1306 4.75867 11.2081 4.60364 11.3632C4.44861 11.5182 4.37109 11.7061 4.37109 11.9268C4.37109 12.1475 4.44861 12.338 4.60364 12.4983C4.75867 12.6586 4.94654 12.7387 5.16726 12.7387H15.4623ZM15.4623 16.8694C15.6778 16.8694 15.863 16.7892 16.0181 16.6289C16.1731 16.4687 16.2506 16.2808 16.2506 16.0653C16.2506 15.8446 16.1744 15.6554 16.022 15.4977C15.8696 15.3401 15.683 15.2613 15.4623 15.2613H5.16726C4.94654 15.2613 4.75867 15.3388 4.60364 15.4938C4.44861 15.6488 4.37109 15.8393 4.37109 16.0653C4.37109 16.286 4.44861 16.4752 4.60364 16.6329C4.75867 16.7905 4.94654 16.8694 5.16726 16.8694H15.4623ZM11.1425 21C11.3632 21 11.5498 20.9199 11.7022 20.7596C11.8546 20.5993 11.9308 20.4114 11.9308 20.1959C11.9308 19.9752 11.8546 19.7847 11.7022 19.6244C11.5498 19.4642 11.3632 19.384 11.1425 19.384H5.16726C4.94654 19.384 4.75867 19.4628 4.60364 19.6205C4.44861 19.7782 4.37109 19.97 4.37109 20.1959C4.37109 20.4167 4.44861 20.6059 4.60364 20.7635C4.75867 20.9212 4.94654 21 5.16726 21H11.1425ZM22.2968 16.6881C22.5017 16.8247 22.708 16.893 22.9156 16.893C23.1232 16.893 23.294 16.826 23.428 16.692C23.562 16.558 23.629 16.3649 23.629 16.1126V12.0608C23.629 11.6719 23.4884 11.421 23.2072 11.308C22.9261 11.195 22.6226 11.2515 22.2968 11.4775L19.4747 13.393C19.3118 13.5086 19.2014 13.6545 19.1436 13.8305C19.0858 14.0066 19.0832 14.1839 19.1357 14.3626C19.1883 14.5413 19.3013 14.6884 19.4747 14.8041L22.2968 16.6881Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

assets/images/ic_align_right.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.7085 8.68866H21.292C21.5127 8.68866 21.6992 8.60852 21.8516 8.44824C22.0039 8.28796 22.0801 8.1001 22.0801 7.88461C22.0801 7.66391 22.0039 7.4747 21.8516 7.31705C21.6992 7.15939 21.5127 7.08057 21.292 7.08057L6.7085 7.08057C6.49316 7.08057 6.30811 7.15808 6.15283 7.31311C5.99805 7.46814 5.92041 7.65863 5.92041 7.88461C5.92041 8.00458 5.94336 8.1152 5.98877 8.21652C6.02734 8.30164 6.08203 8.38019 6.15283 8.45218C6.30811 8.60983 6.49316 8.68866 6.7085 8.68866Z" fill="#99A2AD"/>
<path d="M11.0283 12.8193H21.292C21.4731 12.8193 21.6318 12.7652 21.7666 12.6569C21.7959 12.6335 21.8242 12.6075 21.8516 12.5789C22.0039 12.4186 22.0801 12.2307 22.0801 12.0153C22.0801 11.7945 22.0039 11.604 21.8516 11.4438C21.6992 11.2834 21.5127 11.2033 21.292 11.2033H11.0283C10.8076 11.2033 10.6201 11.2821 10.4648 11.4398C10.3101 11.5975 10.2324 11.7893 10.2324 12.0153C10.2324 12.236 10.3101 12.4252 10.4648 12.5828C10.6201 12.7405 10.8076 12.8193 11.0283 12.8193Z" fill="#99A2AD"/>
<path d="M6.7085 16.7887H21.292C21.5127 16.7887 21.6992 16.7085 21.8516 16.5482C22.0039 16.388 22.0801 16.2001 22.0801 15.9846C22.0801 15.7639 22.0039 15.5747 21.8516 15.4171C21.6992 15.2594 21.5127 15.1806 21.292 15.1806H6.7085C6.49316 15.1806 6.30811 15.2581 6.15283 15.4131C5.99805 15.5681 5.92041 15.7586 5.92041 15.9846C5.92041 16.2054 5.99805 16.3945 6.15283 16.5522C6.30811 16.7098 6.49316 16.7887 6.7085 16.7887Z" fill="#99A2AD"/>
<path d="M11.0283 20.9193H21.292C21.5127 20.9193 21.6992 20.8392 21.8516 20.6789C21.9507 20.5748 22.0171 20.459 22.0518 20.3317C22.0708 20.2629 22.0801 20.1908 22.0801 20.1153C22.0801 19.8945 22.0039 19.704 21.8516 19.5438C21.6992 19.3835 21.5127 19.3033 21.292 19.3033H11.0283C10.8076 19.3033 10.6201 19.3821 10.4648 19.5398C10.3101 19.6975 10.2324 19.8893 10.2324 20.1153C10.2324 20.336 10.3101 20.5252 10.4648 20.6828C10.5469 20.7662 10.6382 20.8276 10.7383 20.8669C10.8276 20.9018 10.9243 20.9193 11.0283 20.9193Z" fill="#99A2AD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

core/lib/presentation/resources/image_paths.dart
+6
View File
@@ -137,6 +137,12 @@ class ImagePaths {
String get icStyleHeader => _getImagePath('ic_style_header.svg');
String get icStyleColor => _getImagePath('ic_style_color.svg');
String get icStyleArrowDown => _getImagePath('ic_style_arrow_down.svg');
String get icAlignLeft => _getImagePath('ic_align_left.svg');
String get icAlignCenter => _getImagePath('ic_align_center.svg');
String get icAlignRight => _getImagePath('ic_align_right.svg');
String get icAlignJustify => _getImagePath('ic_align_justify.svg');
String get icAlignIndent => _getImagePath('ic_align_indent.svg');
String get icAlignOutdent => _getImagePath('ic_align_outdent.svg');
String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
lib/features/base/widget/drop_down_button_widget.dart
+25 -20
View File
@@ -26,6 +26,7 @@ class DropDownButtonWidget<T> extends StatelessWidget {
final double opacity;
final Widget? iconArrowDown;
final Color? colorButton;
final String tooltip;
const DropDownButtonWidget({
Key? key,
@@ -41,6 +42,7 @@ class DropDownButtonWidget<T> extends StatelessWidget {
this.opacity = 1.0,
this.iconArrowDown,
this.colorButton = Colors.white,
this.tooltip = '',
}) : super(key: key);
@override
@@ -91,28 +93,31 @@ class DropDownButtonWidget<T> extends StatelessWidget {
.toList(),
value: itemSelected,
customButton: supportSelectionIcon
? Container(
height: heightItem,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(radiusButton),
border: Border.all(
color: AppColor.colorInputBorderCreateMailbox,
width: 0.5,
? Tooltip(
message: tooltip,
child: Container(
height: heightItem,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(radiusButton),
border: Border.all(
color: AppColor.colorInputBorderCreateMailbox,
width: 0.5,
),
color: colorButton ?? AppColor.colorInputBackgroundCreateMailbox,
),
color: colorButton ?? AppColor.colorInputBackgroundCreateMailbox,
padding: const EdgeInsets.only(left: 12, right: 10),
child: Row(children: [
Expanded(child: Text(
_getTextItemDropdown(context, item: itemSelected),
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black.withOpacity(opacity)),
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
)),
iconArrowDown ?? SvgPicture.asset(_imagePaths.icDropDown)
]),
),
padding: const EdgeInsets.only(left: 12, right: 10),
child: Row(children: [
Expanded(child: Text(
_getTextItemDropdown(context, item: itemSelected),
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.normal,
color: Colors.black.withOpacity(opacity)),
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
)),
iconArrowDown ?? SvgPicture.asset(_imagePaths.icDropDown)
]),
)
: null,
onChanged: onChanged,
lib/features/composer/presentation/composer_view_web.dart
+105 -74
View File
@@ -10,6 +10,7 @@ import 'package:jmap_dart_client/jmap/identities/identity.dart';
import 'package:model/model.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
import 'package:tmail_ui_user/features/base/widget/popup_menu_overlay_widget.dart';
import 'package:tmail_ui_user/features/composer/domain/state/download_image_as_base64_state.dart';
import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart';
import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart';
@@ -17,6 +18,7 @@ import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_but
import 'package:tmail_ui_user/features/composer/presentation/model/dropdown_menu_font_status.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/font_name_type.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/header_style_type.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/paragraph_type.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_file_composer_builder.dart';
@@ -624,12 +626,7 @@ class ComposerView extends GetWidget<ComposerController>
Future.delayed(const Duration(milliseconds: 500), () {
controller.richTextWebController.editorController.setFocus();
});
if (controller.richTextWebController.isMenuFontOpen) {
controller.richTextWebController.closeDropdownMenuFont();
}
if (controller.richTextWebController.isMenuHeaderStyleOpen) {
controller.richTextWebController.closeDropdownMenuHeaderStyle();
}
controller.richTextWebController.closeAllMenuPopup();
}, onBlur: () {
controller.onEditorFocusChange(false);
}, onMouseDown: () {
@@ -766,19 +763,19 @@ class ComposerView extends GetWidget<ComposerController>
padding: const EdgeInsets.only(left: 20, top: 8, bottom: 8),
alignment: Alignment.centerLeft,
child: Wrap(
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.center,
runSpacing: 8,
children: [
AbsorbPointer(
absorbing: codeViewEnabled,
child: DropDownMenuHeaderStyleWidget(
icon: buildWrapIconStyleText(
icon: Tooltip(
message: RichTextStyleType.headerStyle.getTooltipButton(context),
child: SvgPicture.asset(RichTextStyleType.headerStyle.getIcon(imagePaths),
color: AppColor.colorDefaultRichTextButton.withOpacity(opacity),
fit: BoxFit.fill),
)
isSelected: richTextController.isMenuHeaderStyleOpen,
icon: SvgPicture.asset(RichTextStyleType.headerStyle.getIcon(imagePaths),
color: AppColor.colorDefaultRichTextButton.withOpacity(opacity),
fit: BoxFit.fill),
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
tooltip: RichTextStyleType.headerStyle.getTooltipButton(context)
),
items: HeaderStyleType.values,
onMenuStateChange: (isOpen) {
@@ -786,7 +783,7 @@ class ComposerView extends GetWidget<ComposerController>
final newStatus = isOpen
? DropdownMenuFontStatus.open
: DropdownMenuFontStatus.closed;
richTextController.menuHeaderStyleStatus = newStatus;
richTextController.menuHeaderStyleStatus.value = newStatus;
},
onChanged: (newStyle) => richTextController.applyHeaderStyle(newStyle)),
),
@@ -804,32 +801,39 @@ class ComposerView extends GetWidget<ComposerController>
final newStatus = isOpen
? DropdownMenuFontStatus.open
: DropdownMenuFontStatus.closed;
richTextController.menuFontStatus = newStatus;
richTextController.menuFontStatus.value = newStatus;
},
heightItem: 38,
heightItem: 40,
sizeIconChecked: 16,
radiusButton: 5,
radiusButton: 8,
opacity: opacity,
colorButton: Colors.white,
colorButton: richTextController.isMenuFontOpen
? AppColor.colorBackgroundWrapIconStyleCode
: Colors.white,
iconArrowDown: SvgPicture.asset(imagePaths.icStyleArrowDown),
tooltip: RichTextStyleType.fontName.getTooltipButton(context),
supportSelectionIcon: true)),
),
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildWrapIconStyleText(
icon: buildIconWithTooltip(
path: RichTextStyleType.textColor.getIcon(imagePaths),
color: richTextController.selectedTextColor.value,
tooltip: RichTextStyleType.textColor.getTooltipButton(context),
opacity: opacity),
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.textColor)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
padding: const EdgeInsets.only(right: 8),
child: AbsorbPointer(
absorbing: codeViewEnabled,
child: buildWrapIconStyleText(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5),
icon: buildIconWithTooltip(
path: RichTextStyleType.textColor.getIcon(imagePaths),
color: richTextController.selectedTextColor.value,
tooltip: RichTextStyleType.textColor.getTooltipButton(context),
opacity: opacity),
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.textColor)),
),
),
Padding(
padding: const EdgeInsets.only(right: 8),
child: AbsorbPointer(
absorbing: codeViewEnabled,
child: buildWrapIconStyleText(
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 7),
spacing: 3,
icon: buildIconColorBackgroundText(
iconData: RichTextStyleType.textBackgroundColor.getIconData(),
colorSelected: richTextController.selectedTextBackgroundColor.value,
@@ -838,52 +842,79 @@ class ComposerView extends GetWidget<ComposerController>
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.textBackgroundColor)),
),
),
buildWrapIconStyleText(
hasDropdown: false,
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
icon: Wrap(children: [
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.bold.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(RichTextStyleType.bold),
tooltip: RichTextStyleType.bold.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.bold)),
),
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.italic.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(RichTextStyleType.italic),
tooltip: RichTextStyleType.italic.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.italic)),
),
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.underline.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(RichTextStyleType.underline),
tooltip: RichTextStyleType.underline.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.underline)),
),
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.strikeThrough.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(
RichTextStyleType.strikeThrough),
tooltip: RichTextStyleType.strikeThrough.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.strikeThrough)),
)
])),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
padding: const EdgeInsets.only(right: 8.0),
child: buildWrapIconStyleText(
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 5),
hasDropdown: false,
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
icon: Wrap(children: [
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.bold.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(RichTextStyleType.bold),
tooltip: RichTextStyleType.bold.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.bold)),
),
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.italic.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(RichTextStyleType.italic),
tooltip: RichTextStyleType.italic.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.italic)),
),
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.underline.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(RichTextStyleType.underline),
tooltip: RichTextStyleType.underline.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.underline)),
),
AbsorbPointer(
absorbing: codeViewEnabled,
child: buildIconStyleText(
path: RichTextStyleType.strikeThrough.getIcon(imagePaths),
isSelected: richTextController.isTextStyleTypeSelected(
RichTextStyleType.strikeThrough),
tooltip: RichTextStyleType.strikeThrough.getTooltipButton(context),
opacity: opacity,
onTap: () => richTextController.applyRichTextStyle(context, RichTextStyleType.strikeThrough)),
)
])),
),
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: AbsorbPointer(
absorbing: codeViewEnabled,
child: PopupMenuOverlayWidget(
controller: richTextController.menuParagraphController,
listButtonAction: ParagraphType.values
.map((paragraph) => paragraph.buildButtonWidget(
context,
imagePaths,
(paragraph) => richTextController.applyParagraphType(paragraph)))
.toList(),
iconButton: buildWrapIconStyleText(
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
spacing: 3,
opacity: opacity,
isSelected: richTextController.focusMenuParagraph.value,
icon: buildIconWithTooltip(
path: richTextController.selectedParagraph.value.getIcon(imagePaths),
color: AppColor.colorDefaultRichTextButton.withOpacity(opacity),
tooltip: RichTextStyleType.paragraph.getTooltipButton(context))),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 8),
child: buildWrapIconStyleText(
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
isSelected: richTextController.isTextStyleTypeSelected(RichTextStyleType.codeView),
icon: buildIconWithTooltip(
path: RichTextStyleType.codeView.getIcon(imagePaths),
lib/features/composer/presentation/mixin/rich_text_button_mixin.dart
+23 -11
View File
@@ -15,29 +15,41 @@ mixin RichTextButtonMixin {
bool hasDropdown = true,
double opacity = 1.0,
EdgeInsets? padding,
double? spacing,
String tooltip = '',
}){
return InkWell(
onTap: onTap,
final buttonIcon = Tooltip(
message: tooltip,
child: Container(
padding: padding ?? const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
decoration: BoxDecoration(
color: isSelected == true
? AppColor.colorBackgroundWrapIconStyleCode.withOpacity(opacity)
: Colors.white.withOpacity(opacity),
? AppColor.colorBackgroundWrapIconStyleCode
: Colors.white,
border: Border.all(
color: AppColor.colorBorderWrapIconStyleCode,
width: 0.5),
borderRadius: BorderRadius.circular(8)),
child: hasDropdown
? Row(
mainAxisSize: MainAxisSize.min,
children: [
icon,
SvgPicture.asset(_imagePaths.icStyleArrowDown)
])
: icon,
? Row(
mainAxisSize: MainAxisSize.min,
children: [
icon,
if (spacing != null) SizedBox(width: spacing),
SvgPicture.asset(_imagePaths.icStyleArrowDown)
])
: icon,
),
);
if (onTap != null) {
return InkWell(
onTap: onTap,
child: buttonIcon,
);
} else {
return buttonIcon;
}
}
Widget buildIconStyleText({
lib/l10n/intl_messages.arb
+49 -1
View File
@@ -1,5 +1,5 @@
{
"@@last_modified": "2022-07-22T18:31:58.383010",
"@@last_modified": "2022-07-26T16:21:05.066657",
"initializing_data": "Initializing data...",
"@initializing_data": {
"type": "text",
@@ -1681,5 +1681,53 @@
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"fontFamily": "Font Family",
"@fontFamily": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"paragraph": "Paragraph",
"@paragraph": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"alignLeft": "Align left",
"@alignLeft": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"alignRight": "Align right",
"@alignRight": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"alignCenter": "Align center",
"@alignCenter": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"justifyFull": "Justify full",
"@justifyFull": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"outdent": "Outdent",
"@outdent": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"indent": "Indent",
"@indent": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
lib/main/localizations/app_localizations.dart
+48
View File
@@ -1725,4 +1725,52 @@ class AppLocalizations {
'Style',
name: 'headerStyle');
}
String get fontFamily {
return Intl.message(
'Font Family',
name: 'fontFamily');
}
String get paragraph {
return Intl.message(
'Paragraph',
name: 'paragraph');
}
String get alignLeft {
return Intl.message(
'Align left',
name: 'alignLeft');
}
String get alignRight {
return Intl.message(
'Align right',
name: 'alignRight');
}
String get alignCenter {
return Intl.message(
'Align center',
name: 'alignCenter');
}
String get justifyFull {
return Intl.message(
'Justify full',
name: 'justifyFull');
}
String get outdent {
return Intl.message(
'Outdent',
name: 'outdent');
}
String get indent {
return Intl.message(
'Indent',
name: 'indent');
}
}
pubspec.yaml
+2
View File
@@ -174,6 +174,8 @@ dependencies:
# HTML5 parser
html: 0.15.0
custom_pop_up_menu: 1.2.4
dev_dependencies:
flutter_test:
sdk: flutter