🎉 Add new text options layout & styles.

frontend/resources/images/icons/align-bottom.svg

@@ -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>

frontend/resources/images/icons/align-middle.svg

@@ -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>

frontend/resources/images/icons/align-top.svg

@@ -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>

frontend/resources/images/icons/auto-fix.svg

@@ -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>

frontend/resources/images/icons/auto-height.svg

@@ -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>

frontend/resources/images/icons/auto-width.svg

@@ -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>

frontend/resources/images/icons/letter-spacing.svg

@@ -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>

frontend/resources/images/icons/line-height.svg

@@ -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>

frontend/resources/images/icons/lowercase.svg

@@ -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>

frontend/resources/images/icons/strikethrough.svg

@@ -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>

frontend/resources/images/icons/titlecase.svg

@@ -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>

frontend/resources/images/icons/underline.svg

@@ -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>

frontend/resources/images/icons/uppercase.svg

@@ -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>

frontend/resources/locales.json

@@ -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"
     }
   },

frontend/resources/styles/main/partials/colorpicker.scss

@@ -165,6 +165,7 @@
       font-size: $fs13;
 
       &:focus {
+        border-color: $color-primary;
         color: $color-white;
       }
     }

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -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;
+    }
+  }
+}

frontend/resources/styles/main/partials/workspace.scss

@@ -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;