mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
🎉 Add new text options layout & styles.
This commit is contained in:
Juan de la Cruz
Andrey Antukh
parent
c1a2b3c868
commit
5c3499057e
19 changed files with 219 additions and 50 deletions
3
frontend/resources/images/icons/align-bottom.svg
Normal file
3
frontend/resources/images/icons/align-bottom.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M361.11144 277.77792h-83.33332V0h-55.55584v277.77792h-83.33336l111.1113 111.11083zM472.22229 500v-55.55541H27.777705V500z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 231 B |
3
frontend/resources/images/icons/align-middle.svg
Normal file
3
frontend/resources/images/icons/align-middle.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M159.08979 409.09297h68.18196V500h45.45488v-90.90703h68.18198l-90.90942-90.91044zM340.90861 90.909169h-68.18198V-7.8e-7h-45.45488V90.909169h-68.18196l90.9094 90.909421zM68.180615 227.27312V272.728H431.81938v-45.45488z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 327 B |
3
frontend/resources/images/icons/align-top.svg
Normal file
3
frontend/resources/images/icons/align-top.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M138.88854 222.22208h83.33333V500h55.55584V222.22208h83.33334L249.99979 111.11125zM27.777705 0v55.55541H472.22229V0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 226 B |
3
frontend/resources/images/icons/auto-fix.svg
Normal file
3
frontend/resources/images/icons/auto-fix.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M500 136.36406V0H363.6375v45.45469H136.36406V0H0v136.36406h45.454687V363.6375H0V500h136.36406v-45.45313H363.6375V500H500V363.6375h-45.45313V136.36406zM45.454687 45.45469h45.454688v45.45469H45.454687zm45.454688 409.09218H45.454687v-45.45625h45.454688zM363.6375 409.09062H136.36406V363.6375H90.909375V136.36406h45.454685V90.90938H363.6375v45.45468h45.45312V363.6375H363.6375zm90.90937 45.45625h-45.45624v-45.45625h45.45624zM409.09062 90.90938V45.45469h45.45625v45.45469zM289.4325 295.45531h-79.20469l-16.59094 45.45407H156.705l77.27281-204.54532h31.93188l77.38718 204.54532h-37.04624zm-69.31844-28.63656h59.31844l-29.65937-87.04562z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 740 B |
3
frontend/resources/images/icons/auto-height.svg
Normal file
3
frontend/resources/images/icons/auto-height.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M228.35343 0H78.353125v50h49.999995v25.00031h50.00031V50h50zm0 450h-50v-25h-50.00031v25H78.353125v50H228.35343zm-50-125v50h-50.00031v-50zm0-99.99937v50h-50.00031v-50zm0-100.00032v50h-50.00031v-50zm110.22438 171.59125h79.20468l16.81844 45.45532h37.04595L344.26 137.50031h-31.93188l-77.27313 204.54657h36.93188zm69.20468-28.63656h-59.31811l29.65905-87.04562z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 486 B |
3
frontend/resources/images/icons/auto-width.svg
Normal file
3
frontend/resources/images/icons/auto-width.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M210.22406 227.27267h79.20438l16.81812 45.45469h37.04407L265.90562 68.18139h-31.93187l-77.2725 204.54597h36.93187zm69.20438-28.63656h-59.31813l29.65906-87.04562zM0 281.81705v150.00156h50v-50h25v-50.00125H50v-50.00031zm450 0v50.00031h-25v50.00125h25v50h50V281.81705zm-125 50.00031h50v50.00125h-50zm-100.00031 0h49.99968v50.00125h-49.99968zm-100 0h50v50.00125h-50z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 492 B |
3
frontend/resources/images/icons/letter-spacing.svg
Normal file
3
frontend/resources/images/icons/letter-spacing.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M106.68945 0L0 299.98828h51.025391l22.888671-69.82422H183.34961l23.07227 69.82422h51.26953L150.75781 0h-44.06836zm142.82227 0l101.25781 299.98828h47.54688L500 0h-53.95508l-71.77734 234.67969L303.2832 0h-53.77148zM128.66211 63.660156l40.89258 124.449224H87.707031L128.66211 63.660156zM87.173828 325.6543L0 412.82812 87.173828 500v-62.26562H412.82422V500L500 412.82812l-87.17578-87.17382v62.26562H87.173828V325.6543z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 524 B |
3
frontend/resources/images/icons/line-height.svg
Normal file
3
frontend/resources/images/icons/line-height.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M109.75625 128.04874h60.97594L85.365937 42.68283 0 128.04874h60.975625v243.90281H0l85.365937 85.36562 85.366253-85.36562h-60.97594zm97.56125-48.78063v48.78063H500V79.26811zm0 341.46469H500v-48.78125H207.3175zm0-146.34219H500v-48.78062H207.3175z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 354 B |
3
frontend/resources/images/icons/lowercase.svg
Normal file
3
frontend/resources/images/icons/lowercase.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M117.44034 113.84439c-21.359973 0-40.545587 3.67111-57.698592 11.11474-17.152586 7.28181-30.49689 17.45647-39.882316 30.40209-9.385467 12.94562-14.0568817 26.95961-14.0568817 42.17065H76.005234c0-9.87094 3.254104-17.62838 9.888852-23.29193 6.796261-5.66355 16.137404-8.49951 27.950314-8.49951 13.431 0 23.19029 3.66966 29.33965 10.95129 6.31087 7.28165 9.48022 16.95854 9.48022 29.09448v15.0376h-32.28179c-38.997948.16193-68.859023 7.75095-89.571756 22.63811C10.25984 258.34908 4.2e-7 279.70236 4.2e-7 307.53514c0 22.6542 8.42430078 41.42209 25.25335158 56.30925 16.991068 14.88717 38.344351 22.31122 64.073226 22.31122 27.185462 0 49.288762-9.42633 66.279832-28.35895 1.45616 9.38555 3.79184 17.22624 7.02844 23.53711h70.8565v-4.16802c-6.79626-12.78368-10.29942-31.63439-10.46094-56.55443V206.76691c0-29.45088-9.50957-52.22311-28.60412-68.40471-18.93262-16.34362-44.62233-24.51781-76.98595-24.51781zm266.50868 0c-21.35998 0-40.5456 3.67111-57.6986 11.11474-17.15259 7.28181-30.41504 17.45647-39.80059 30.40209-9.38514 12.94562-14.13861 26.95961-14.13861 42.17065h70.20268c0-9.87094 3.25411-17.62838 9.88886-23.29193 6.79626-5.66355 16.13782-8.49951 27.95031-8.49951 13.431 0 23.1903 3.66966 29.33965 10.95129 6.31087 7.28165 9.48024 16.95854 9.48024 29.09448v15.0376h-32.28181c-38.99794.16193-68.8591 7.75095-89.57175 22.63811-20.55072 14.88717-30.81073 36.24045-30.81073 64.07323 0 22.6542 8.42422 41.42209 25.25335 56.30925 16.99107 14.88717 38.34435 22.31122 64.07323 22.31122 27.18546 0 49.28835-9.42633 66.27982-28.35895 1.45616 9.38555 3.79397 17.22624 7.02845 23.53711H500v-4.16802c-6.79542-12.78368-10.29775-31.63439-10.46094-56.55443V206.76691c0-29.45088-9.51079-52.22311-28.60408-68.40471-18.93011-16.34362-44.62234-24.51781-76.98596-24.51781zM126.43021 261.85027h26.23406v45.19451c-4.20738 7.76704-10.71257 13.94077-19.4508 18.63354-8.73822 4.53084-18.24779 6.86499-28.60412 6.86499-10.680194 0-19.104411-2.83596-25.253348-8.49951-6.149357-5.66355-9.235044-12.91917-9.235044-21.6574l.245205-4.08629c2.265395-24.27273 20.949617-36.44984 56.064047-36.44984zm266.50867 0h26.23408v45.19451c-4.20824 7.76704-10.63086 13.94077-19.36909 18.63354-8.73781 4.53084-18.32952 6.86499-28.68585 6.86499-10.67978 0-19.10441-2.83596-25.25335-8.49951-6.14935-5.66355-9.23504-12.91917-9.23504-21.6574l.2452-4.08629c2.2654-24.27273 20.94962-36.44984 56.06405-36.44984z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
3
frontend/resources/images/icons/strikethrough.svg
Normal file
3
frontend/resources/images/icons/strikethrough.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M269.56304 19.250025c-44.76042 0-81.16303 11.62691-109.24002 34.86916-27.87346 23.03616-41.81796 52.202655-41.81796 87.579815 0 17.78474 3.70661 33.98915 11.08051 48.57894h74.80907c-1.3276-.96028-2.55704-1.90658-3.75611-2.87968-15.25904-12.75224-22.91223-28.33238-22.91223-46.63829 0-22.8307 8.0285-40.58442 24.10166-53.336665 16.27637-12.95802 38.84429-19.46914 67.73508-19.46914 31.12866 0 55.27741 7.84385 72.36758 23.47565 17.09017 15.426355 25.60414 36.703725 25.60414 63.853775h58.9082c0-24.8875-6.62004-47.81961-19.84473-68.799305-13.02279-20.97938-31.52072-37.46298-55.52773-49.39277-23.80509-11.92946-50.98907-17.84149-81.50746-17.84149zM-.0000044 221.89181v31.55129H500v-31.55129zM295.48015 285.05696c22.74898 8.27104 39.42728 16.6316 50.08139 25.10329 15.26 11.92882 22.91221 28.88505 22.91221 50.89522 0 22.00697-8.24649 39.39372-24.72767 52.14724-16.47797 12.75352-40.19043 19.15612-71.11556 19.15612-33.16333 0-59.69076-7.84385-79.6294-23.47565-19.73511-15.83694-29.61062-37.33164-29.61062-64.47979h-58.90823c.00001 26.12245 7.10549 49.48352 21.3472 70.05134 14.44555 20.56782 34.90063 36.83698 61.34969 48.76677 26.44938 11.72144 54.93297 17.52848 85.45136 17.52848 46.99669 0 84.54289-10.8763 112.62051-32.67809 28.07442-22.007 42.13096-51.2377 42.13096-87.64246 0-22.83067-5.10468-42.66712-15.27484-59.53423-3.26287-5.51712-7.08271-10.7833-11.51868-15.83823z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
3
frontend/resources/images/icons/titlecase.svg
Normal file
3
frontend/resources/images/icons/titlecase.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M112.8874 96.304865L.0000023 399.55826H66.400229l20.824568-62.4737H196.81672l21.03492 62.4737h66.40023L170.73343 96.304865zm287.54734 73.762445c-18.32674 0-34.85704 3.14965-49.57232 9.53582-14.7152 6.24726-26.09438 14.9767-34.14666 26.08331-8.05228 11.10662-12.06002 23.12984-12.06002 36.18005h60.15985c0-8.46871 2.86048-15.12416 8.55423-19.98316 5.83009-4.85902 13.84532-7.29211 23.97978-7.29211 11.52018 0 19.89455 3.14836 25.17179 9.3956 5.41366 6.24725 8.13352 14.54912 8.13352 24.96144v12.90141h-27.696c-33.45842.13893-59.07727 6.64988-76.84755 19.42224-17.63173 12.77235-26.43389 31.09228-26.43389 54.97125.00001 19.4364 7.22751 35.53784 21.66597 48.31019 14.57596 12.77272 32.8966 19.14178 54.97126 19.14178 23.32396 0 42.28556-8.0869 56.86438-24.33039 1.24931 8.05228 3.25502 14.77915 6.03002 20.19352H500v-3.57592c-5.83368-10.96769-8.83489-27.14054-8.9749-48.52055v-97.67215c0-25.26721-8.15613-44.80433-24.54071-58.68742-16.24098-14.02166-38.28491-21.03492-66.04965-21.03491zm-258.58927 2.87477l38.0732 113.51845h-75.79582zM408.14755 297.0481h22.50736v38.77437c-3.6115 6.66368-9.18829 11.9604-16.68771 15.98654-7.49584 3.8872-15.6556 5.88976-24.54075 5.88976-9.16158 0-16.39229-2.43308-21.66594-7.2921-5.27724-4.85901-7.92319-11.08393-7.92319-18.58084l.21181-3.50581c1.94576-20.82464 17.97292-31.27191 48.09986-31.27191z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
frontend/resources/images/icons/underline.svg
Normal file
3
frontend/resources/images/icons/underline.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M102.41699 0v281.31103c.37563 42.72406 13.85985 76.25947 40.52735 100.64697 26.66781 24.3875 62.47646 36.62109 107.36083 36.62109l14.34327-.61034c41.31625-3.025 73.98402-16.92138 98.02246-41.687 24.22532-24.76563 36.4336-56.57597 36.6211-95.52003V0h-54.38233v279.90722c0 29.87001-8.13635 53.01112-24.4751 69.45803-16.15094 16.44684-39.51783 24.65819-70.1294 24.65819-30.23593 0-53.54681-8.21135-69.88525-24.65819-16.33875-16.63753-24.53613-39.8932-24.53613-69.7632V0zM62.5 470.94725V500h375v-29.05275z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 611 B |
3
frontend/resources/images/icons/uppercase.svg
Normal file
3
frontend/resources/images/icons/uppercase.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
|
||||
<path d="M98.80938 117.28243L.00000247 382.71757H58.180929l18.227568-54.68271h95.863513l18.41169 54.68271h58.11955l-99.30036-265.43514zm251.19677 0l-98.80938 265.43514h58.11955l18.22757-54.68271h95.8635l18.4117 54.68271H500l-99.36172-265.43514zm-225.85001 67.07991l33.32515 99.36173H91.137846zm251.13538 0l33.38652 99.36173H342.3346z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 434 B |
|
|
@ -912,7 +912,7 @@
|
|||
"workspace.options.font-options" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:200" ],
|
||||
"translations" : {
|
||||
"en" : "Fonts & Font Size",
|
||||
"en" : "Text",
|
||||
"fr" : "TODO"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -165,6 +165,7 @@
|
|||
font-size: $fs13;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-primary;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -186,7 +186,8 @@
|
|||
|
||||
.input-text {
|
||||
background-color: $color-gray-50;
|
||||
border-color: $color-gray-40;
|
||||
border: 1px solid transparent;
|
||||
border-bottom-color: $color-gray-40;
|
||||
color: $color-gray-10;
|
||||
font-size: $fs13;
|
||||
margin: $x-small;
|
||||
|
|
@ -195,7 +196,7 @@
|
|||
|
||||
&:focus {
|
||||
color: lighten($color-gray-10, 8%);
|
||||
border-color: $color-gray-20;
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -318,29 +319,31 @@
|
|||
}
|
||||
|
||||
.editable-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin-right: $small;
|
||||
position: relative;
|
||||
width: 60%;
|
||||
|
||||
.input-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
|
||||
.input-select {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-40;
|
||||
color: transparent;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
|
||||
option {
|
||||
color: $color-gray-60;
|
||||
background: $color-gray-60;
|
||||
background: $color-white;
|
||||
font-size: $fs12;
|
||||
}
|
||||
}
|
||||
|
|
@ -381,16 +384,37 @@
|
|||
|
||||
}
|
||||
|
||||
.row-flex.align-icons {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.align-icons {
|
||||
border: 1px solid $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
margin-left: $small;
|
||||
padding: $small;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-right: $small;
|
||||
position: relative;
|
||||
width: 18px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
margin: $x-small $small;
|
||||
width: 20px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -402,6 +426,10 @@
|
|||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -455,3 +483,27 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&:first-child {
|
||||
margin-right: $small;
|
||||
}
|
||||
|
||||
.icon-before {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
width: 18px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,11 +50,11 @@
|
|||
background-color: $color-canvas;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: calc(100% - 500px);
|
||||
width: calc(100% - 520px);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
right: 230px;
|
||||
right: 240px;
|
||||
|
||||
&.scrolling {
|
||||
cursor: grab;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,12 @@
|
|||
(def text-align-justify (icon-xref :text-align-justify))
|
||||
(def text-align-left (icon-xref :text-align-left))
|
||||
(def text-align-right (icon-xref :text-align-right))
|
||||
(def align-top (icon-xref :align-top))
|
||||
(def align-bottom (icon-xref :align-bottom))
|
||||
(def align-middle (icon-xref :align-middle))
|
||||
(def auto-fix (icon-xref :auto-fix))
|
||||
(def auto-width (icon-xref :auto-width))
|
||||
(def auto-height (icon-xref :auto-height))
|
||||
(def alignment (icon-xref :alignment))
|
||||
(def arrow (icon-xref :arrow))
|
||||
(def arrow-down (icon-xref :arrow-down))
|
||||
|
|
@ -46,12 +52,15 @@
|
|||
(def image (icon-xref :image))
|
||||
(def infocard (icon-xref :infocard))
|
||||
(def layers (icon-xref :layers))
|
||||
(def letter-spacing (icon-xref :letter-spacing))
|
||||
(def line (icon-xref :line))
|
||||
(def line-height (icon-xref :line-height))
|
||||
(def loader (icon-xref :loader))
|
||||
(def lock (icon-xref :lock))
|
||||
(def lock-open (icon-xref :lock-open))
|
||||
(def logo (icon-xref :uxbox-logo))
|
||||
(def logo-icon (icon-xref :uxbox-logo-icon))
|
||||
(def lowercase (icon-xref :lowercase))
|
||||
(def mail (icon-xref :mail))
|
||||
(def minus (icon-xref :minus))
|
||||
(def move (icon-xref :move))
|
||||
|
|
@ -79,9 +88,11 @@
|
|||
(def shape-vdistribute (icon-xref :shape-vdistribute))
|
||||
(def size-horiz (icon-xref :size-horiz))
|
||||
(def size-vert (icon-xref :size-vert))
|
||||
(def strikethrough (icon-xref :strikethrough))
|
||||
(def stroke (icon-xref :stroke))
|
||||
(def sublevel (icon-xref :sublevel))
|
||||
(def text (icon-xref :text))
|
||||
(def titlecase (icon-xref :titlecase))
|
||||
(def toggle (icon-xref :toggle))
|
||||
(def trash (icon-xref :trash))
|
||||
(def tree (icon-xref :tree))
|
||||
|
|
@ -89,6 +100,8 @@
|
|||
(def undo-history (icon-xref :undo-history))
|
||||
(def ungroup (icon-xref :ungroup))
|
||||
(def unlock (icon-xref :unlock))
|
||||
(def underline (icon-xref :underline))
|
||||
(def uppercase (icon-xref :uppercase))
|
||||
(def user (icon-xref :user))
|
||||
(def recent (icon-xref :recent))
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.text
|
||||
(:require
|
||||
|
|
@ -65,12 +65,11 @@
|
|||
on-pos-y-change #(on-position-change % :y)]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-title (tr "workspace.options.measures")]
|
||||
[:div.element-set-content
|
||||
[:span (tr "workspace.options.size")]
|
||||
|
||||
;; WIDTH & HEIGHT
|
||||
[:div.row-flex
|
||||
[:span (tr "workspace.options.size")]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
|
|
@ -199,7 +198,6 @@
|
|||
[:div.element-set
|
||||
[:div.element-set-title (tr "workspace.options.font-options")]
|
||||
[:div.element-set-content
|
||||
[:span (tr "workspace.options.font-family")]
|
||||
[:div.row-flex
|
||||
[:select.input-select {:value font-family
|
||||
:on-change on-font-family-change}
|
||||
|
|
@ -208,7 +206,6 @@
|
|||
:key (:id font)}
|
||||
(:name font)])]]
|
||||
|
||||
[:span (tr "workspace.options.font-weight")]
|
||||
[:div.row-flex
|
||||
[:div.editable-select
|
||||
[:select.input-select {:value font-size
|
||||
|
|
@ -240,39 +237,106 @@
|
|||
:key (:name style)}
|
||||
(:name style)])]]
|
||||
|
||||
[:span (tr "workspace.options.line-height-letter-spacing")]
|
||||
[:div.row-flex
|
||||
[:input.input-text {:type "number"
|
||||
:step "0.1"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:value (-> line-height
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))
|
||||
:on-change on-font-line-height-change}]
|
||||
[:input.input-text {:type "number"
|
||||
:step "0.1"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:value (-> letter-spacing
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))
|
||||
:on-change on-font-letter-spacing-change}]]
|
||||
|
||||
[:span (tr "workspace.options.text-align")]
|
||||
[:div.row-flex.align-icons
|
||||
[:span {:class (when (= text-align "left") "current")
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Align left"
|
||||
:class (when (= text-align "left") "current")
|
||||
:on-click #(on-font-align-change % "left")}
|
||||
i/text-align-left]
|
||||
[:span {:class (when (= text-align "center") "current")
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Align center"
|
||||
:class (when (= text-align "center") "current")
|
||||
:on-click #(on-font-align-change % "center")}
|
||||
i/text-align-center]
|
||||
[:span {:class (when (= text-align "right") "current")
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Align right"
|
||||
:class (when (= text-align "right") "current")
|
||||
:on-click #(on-font-align-change % "right")}
|
||||
i/text-align-right]
|
||||
[:span {:class (when (= text-align "justify") "current")
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Justify"
|
||||
:class (when (= text-align "justify") "current")
|
||||
:on-click #(on-font-align-change % "justify")}
|
||||
i/text-align-justify]]]]))
|
||||
i/text-align-justify]]
|
||||
|
||||
[:div.row-flex
|
||||
[:div.input-icon
|
||||
[:span.icon-before.tooltip.tooltip-bottom
|
||||
{:alt "Line height"}
|
||||
i/line-height]
|
||||
[:input.input-text {:type "number"
|
||||
:step "0.1"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:value (-> line-height
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))
|
||||
:on-change on-font-line-height-change}]]
|
||||
[:div.input-icon
|
||||
[:span.icon-before.tooltip.tooltip-bottom
|
||||
{:alt "Letter spacing"}
|
||||
i/letter-spacing]
|
||||
[:input.input-text {:type "number"
|
||||
:step "0.1"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:value (-> letter-spacing
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))
|
||||
:on-change on-font-letter-spacing-change}]]]
|
||||
|
||||
[:div.row-flex
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Align top"}
|
||||
i/align-top]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Align middle"}
|
||||
i/align-middle]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Align bottom"}
|
||||
i/align-bottom]]
|
||||
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Auto height"}
|
||||
i/auto-height]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Auto width"}
|
||||
i/auto-width]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Fixed size"}
|
||||
i/auto-fix]]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle "Decoration"]
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "None"}
|
||||
i/minus]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Underline"}
|
||||
i/underline]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Strikethrough"}
|
||||
i/strikethrough]]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle "Case"]
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "None"}
|
||||
i/minus]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Uppercase"}
|
||||
i/uppercase]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Lowercase"}
|
||||
i/lowercase]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt "Titlecase"}
|
||||
i/titlecase]]]
|
||||
]]))
|
||||
|
||||
(def +fonts+
|
||||
[{:id "sourcesanspro"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue