loleaflet: New shape toolbar popup

Change-Id: Idc61230d26b2933f9ba1b9ec78bada55a0ef2698
Reviewed-on: https://gerrit.libreoffice.org/54659
Reviewed-by: pranavk <pranavk@collabora.co.uk>
Tested-by: pranavk <pranavk@collabora.co.uk>

24 files changed, 138 insertions, 0 deletions

diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index cc69a1d94..9dfa8bbb4 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -256,6 +256,29 @@ button.leaflet-control-search-next
     border-style: solid;
 }
 
+.w2ui-icon.basicshapes_rectangle { background: url('images/lc_basicshapes.rectangle.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_round-rectangle { background: url('images/lc_basicshapes.round-rectangle.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_quadrat { background: url('images/lc_basicshapes.quadrat.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_round-quadrat { background: url('images/lc_basicshapes.round-quadrat.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_circle { background: url('images/lc_basicshapes.circle.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_ellipse { background: url('images/lc_basicshapes.ellipse.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_circle-pie { background: url('images/lc_basicshapes.circle-pie.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_isosceles-triangle { background: url('images/lc_basicshapes.isosceles-triangle.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_right-triangle { background: url('images/lc_basicshapes.right-triangle.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_trapezoid { background: url('images/lc_basicshapes.trapezoid.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_diamond { background: url('images/lc_basicshapes.diamond.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_parallelogram { background: url('images/lc_basicshapes.parallelogram.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_pentagon { background: url('images/lc_basicshapes.pentagon.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_hexagon { background: url('images/lc_basicshapes.hexagon.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_octagon { background: url('images/lc_basicshapes.octagon.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_cross { background: url('images/lc_basicshapes.cross.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_ring { background: url('images/lc_basicshapes.ring.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_block-arc { background: url('images/lc_basicshapes.block-arc.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_can { background: url('images/lc_basicshapes.can.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_cube { background: url('images/lc_basicshapes.cube.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_paper { background: url('images/lc_basicshapes.paper.svg') no-repeat center !important; }
+.w2ui-icon.basicshapes_frame { background: url('images/lc_basicshapes.frame.svg') no-repeat center !important; }
+
 .w2ui-icon.accepttrackedchanges{ background: url('images/lc_accepttrackedchanges.svg') no-repeat center !important; }
 .w2ui-icon.alignblock{ background: url('images/lc_alignblock.svg') no-repeat center !important; }
 .w2ui-icon.alignhorizontal{ background: url('images/lc_alignhorizontalcenter.svg') no-repeat center !important; }
@@ -370,6 +393,33 @@ button.leaflet-control-search-next
     background: rgba(66, 151, 215, 1);
 }
 
+/* Insert shape grid - based on inserttable grid */
+.insertshape-grid {
+    box-sizing: border-box;
+    background: rgba(255, 255, 255, 0.5);
+    position: relative;
+    padding: 2px;
+    display: block;
+    overflow: auto; /* child margins otherwise don't expand *this* element (parent) */
+}
+
+.insertshape-grid .row {
+    height: 30px;
+}
+
+.insertshape-grid .col {
+    height: 100%;
+    float: left;
+    padding: 2px;
+    width: 30px;
+    border: 1px solid transparent;
+    background: rgba(255, 255, 255, 1);
+}
+
+.insertshape-grid .col:hover {
+    border: 1px solid #ccc;
+}
+
 tr.useritem:hover {
     cursor: default;
     background-color: rgba(67, 172, 232, 0.25);
diff --git a/loleaflet/images/lc_basicshapes.block-arc.svg b/loleaflet/images/lc_basicshapes.block-arc.svg
new file mode 100644
index 000000000..8b2fa1112
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.block-arc.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="c" cx="2.25" cy="16" gradientTransform="matrix(.23703704 0 0 .0592592 4.466667 16.051852)" gradientUnits="userSpaceOnUse" r="16.875" xlink:href="#a"/><linearGradient id="d" gradientTransform="matrix(1.1711695 0 0 1.1711694 -.292731 3.71521)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#b" y1="8.231112" y2="13.700933"/><radialGradient id="e" cx="2.25" cy="16" gradientTransform="matrix(.23703704 0 0 .0592592 18.466666 16.051852)" gradientUnits="userSpaceOnUse" r="16.875" xlink:href="#a"/><linearGradient id="f" gradientTransform="matrix(1.0617 0 0 .82364068 .856274 5.525346)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#b" y1="8.231112" y2="13.700933"/><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="5" cy="17" display="block" fill="url(#c)" opacity=".433333" rx="4" ry="1"/><ellipse cx="19" cy="17" display="block" fill="url(#e)" opacity=".433333" rx="4" ry="1"/><path d="m12 6.4997034c-5.1885241-.0001638-9.3946951 4.8117726-9.3945312 10.0002966h4.4199218c.2567675-2.554807 2.4069321-4.999832 4.9746094-5 2.566182.0022 4.714086 2.44668 4.970703 5h4.423828c.000164-5.188524-4.206007-10.0004603-9.394531-10.0002966z" fill="url(#d)" stroke="#888a85" stroke-linejoin="round" stroke-width="1.21153"/><path d="m12 7.4835784c-4.7035512-.0001152-8.2665704 4.3675216-8.2664218 8.0164216h2.5692905c.2327674-1.796702 2.6971313-5.187243 5.6971313-5.187396 3 .0021 5.648459 3.391739 5.881089 5.187396h2.510332c.000149-3.6489-3.68787-8.0165367-8.391421-8.0164216z" fill="url(#f)" stroke="#fdfdfb" stroke-linejoin="round" stroke-width=".967156"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.can.svg b/loleaflet/images/lc_basicshapes.can.svg
new file mode 100644
index 000000000..9bb667216
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.can.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.479894 0 0 .11633788 10.772975 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="c" gradientTransform="matrix(.94967397 0 0 .57566701 2.032112 8.013621)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><linearGradient id="d" gradientTransform="matrix(.81198146 0 0 .43797462 3.477348 -.554511)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><linearGradient id="e" gradientTransform="matrix(.92471361 0 0 .55070684 2.294098 -1.726817)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="12" x2="12" y1="2" y2="11"><stop offset="0" stop-color="#888a85"/><stop offset="1" stop-color="#888a85" stop-opacity="0"/></linearGradient><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="11.852736" cy="17.674644" display="block" fill="url(#b)" opacity=".433333" rx="8.098211" ry="1.963204"/><g stroke-linejoin="round"><path d="m19.5 14c0 2.550211-3.292935 4.617565-7.5 4.617565s-7.5-2.067354-7.5-4.617565v-10.5h15z" fill="url(#c)" stroke="#888a85"/><ellipse cx="12" cy="4" fill="url(#e)" rx="7.417353" ry="4.417353" stroke="url(#f)" stroke-width="1.165293"/><ellipse cx="12" cy="4" fill="url(#d)" rx="6.513101" ry="3.513101" stroke="#fdfdfb" stroke-width=".973798"/></g></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.circle-pie.svg b/loleaflet/images/lc_basicshapes.circle-pie.svg
new file mode 100644
index 000000000..42fa5e1f4
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.circle-pie.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.479894 0 0 .11633788 10.772975 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="c" gradientTransform="matrix(1.0540526 0 0 1.0540525 .936542 -.961122)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><linearGradient id="d" gradientTransform="matrix(.92855424 0 0 .92855416 2.253786 .343938)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="11.852736" cy="17.674644" display="block" fill="url(#b)" opacity=".433333" rx="8.098211" ry="1.963204"/><path d="m20.454811 9.5c0 4.947379-3.785348 8.954811-8.454811 8.954811-4.6694632 0-8.454811-3.785348-8.4548111-8.454811 0-4.6694632 4.2048111-8.3298111 8.9548111-8.4548111v7.9548111z" fill="url(#c)" stroke="#888a85" stroke-linejoin="round" stroke-width="1.090377"/><path d="m19.19816 10.5c0 2.688227-3.084655 6.948159-7.19816 6.948159-4.1135049 0-7.4481596-3.334654-7.4481597-7.448159 0-4.1135047 3.8612347-7.0106592 6.9237347-7.1356592l.04885 7.6747882z" fill="url(#d)" stroke="#fdfdfb" stroke-linejoin="round" stroke-width="1.103681"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.circle.svg b/loleaflet/images/lc_basicshapes.circle.svg
new file mode 100644
index 000000000..e11079b91
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.circle.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.479894 0 0 .11633788 10.772975 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="c" gradientTransform="matrix(1.0540526 0 0 1.0540525 .936542 -.961122)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><linearGradient id="d" gradientTransform="matrix(.92855424 0 0 .92855416 2.253786 .343938)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="11.852736" cy="17.674644" display="block" fill="url(#b)" opacity=".433333" rx="8.098211" ry="1.963204"/><circle cx="12" cy="10" fill="url(#c)" r="8.454811" stroke="#888a85" stroke-linejoin="round" stroke-width="1.090377"/><ellipse cx="12" cy="10" fill="url(#d)" rx="7.44816" ry="7.448159" stroke="#fdfdfb" stroke-linejoin="round" stroke-width="1.103681"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.cross.svg b/loleaflet/images/lc_basicshapes.cross.svg
new file mode 100644
index 000000000..9d6e36585
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.cross.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.11361861 0 0 .38669439 9.334896 .088592)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.23703704 0 0 .0592592 11.466667 17.6897)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="18.637848" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="4" ry="1"/><path d="m9.5 1.5h5v6h6v5h-5.992961l-.007 6h-5v-6h-6v-5h6z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round"/><path d="m10.38238 2.5h3.235286v5.8823567h5.882334v3.2352853h-5.877779l-.0046 5.882358h-3.235287v-5.882358h-5.882334v-3.2352853h5.882334z" fill="none" stroke="#fdfdfb" stroke-linecap="round"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.cube.svg b/loleaflet/images/lc_basicshapes.cube.svg
new file mode 100644
index 000000000..4fa6151dc
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.cube.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.34217456 0 0 .34252098 2.973755 2.220805)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><path d="m6.470983.470983h15.058034v15.058034h-15.058034z" fill="none" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width=".941966"/><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><path d="m3.470983 3.470983h15.058034v15.058034h-15.058034z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width=".941966"/><path d="m4.464926 4.464924h13.070149v13.07015h-13.070149z" fill="none" stroke="#fdfdfb" stroke-width=".929851"/><path d="m18.513893 3.8900003 3.083358-3.08335767v14.38900137l-3.083358 3.083358z" fill="#dbdbdb" fill-rule="evenodd" stroke="#888a85" stroke-linejoin="round" stroke-width="1.027786"/><path d="m17.902822 3.4861071 3.083358-3.08335775h-14.3890017l-3.083358 3.08335775z" fill="#fafafa" fill-rule="evenodd" stroke="#888a85" stroke-linejoin="round" stroke-width="1.027786"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.diamond.svg b/loleaflet/images/lc_basicshapes.diamond.svg
new file mode 100644
index 000000000..7399d5c6b
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.diamond.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.29940274 0 0 .29970586 -5.093429 7.359231)" gradientUnits="userSpaceOnUse" x1="35.905758" x2="19.373688" y1="13.19453" y2="29.709881"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.2091713 0 0 .04562727 11.529365 18.13785)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="18.867887" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".5" rx="3.529766" ry=".769961"/><path d="m-4.658354 8.453136h13.175779v13.175779h-13.175779z" fill="url(#a)" stroke="#686a66" stroke-linecap="round" stroke-linejoin="round" stroke-width=".82422" transform="matrix(.70710678 -.70710678 .70710678 .70710678 0 0)"/><path d="m-3.879419 9.232071h11.61791v11.61791h-11.61791z" fill="none" stroke="#fdfdfb" stroke-width=".826534" transform="matrix(.70710678 -.70710678 .70710678 .70710678 0 0)"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.ellipse.svg b/loleaflet/images/lc_basicshapes.ellipse.svg
new file mode 100644
index 000000000..8ea59a81f
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.ellipse.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.479894 0 0 .11633788 10.772975 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="c" gradientTransform="matrix(1.0579469 0 0 .93327787 .895667 1.294817)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><linearGradient id="d" gradientTransform="matrix(.93300816 0 0 .80833922 2.207037 2.594058)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" xlink:href="#a" y1="8.231112" y2="13.700933"/><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="11.852736" cy="17.674644" display="block" fill="url(#b)" opacity=".433333" rx="8.098211" ry="1.963204"/><ellipse cx="12" cy="11" fill="url(#c)" rx="8.486049" ry="7.486049" stroke="#888a85" stroke-linejoin="round" stroke-width="1.027902"/><ellipse cx="12" cy="11" fill="url(#d)" rx="7.483886" ry="6.483886" stroke="#fdfdfb" stroke-linejoin="round" stroke-width="1.032229"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.frame.svg b/loleaflet/images/lc_basicshapes.frame.svg
new file mode 100644
index 000000000..a9f596623
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.frame.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.36357954 0 0 .36394762 3.471667 2.671616)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><path d="m4 4v16h16v-16zm3 3h10v10h-10z" fill="url(#a)" transform="translate(0 -2)"/><g fill="none"><path d="m3.529856 1.529856h16.940289v16.940289h-16.940289z" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.059712"/><path d="m4.531344 2.531343h14.937313v14.937314h-14.937313z" stroke="#fdfdfb" stroke-width="1.062686"/><path d="m7.5 5.5h9v9h-9z" stroke="#888a85"/></g></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.hexagon.svg b/loleaflet/images/lc_basicshapes.hexagon.svg
new file mode 100644
index 000000000..0a3da3810
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.hexagon.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.503704 0 0 .11633788 10.861863 16.175388)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="c" gradientTransform="matrix(.874941 0 0 .868551 2.834335 1.349651)" gradientUnits="userSpaceOnUse" x1="10.769515" x2="15.923767" xlink:href="#a" y1="8.71965" y2="15.039417"/><linearGradient id="d" gradientTransform="matrix(1.001575 0 0 1 1.492156 .000001)" gradientUnits="userSpaceOnUse" x1="10.769515" x2="15.923767" xlink:href="#a" y1="8.71965" y2="15.039417"/><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="11.995196" cy="18.036797" display="block" fill="url(#b)" opacity=".6" rx="8.500005" ry="1.963204"/><path d="m6.889 2.5h10.25l3.861 8.000393-3.861 8.002906h-10.25l-3.889-8.003692z" fill="url(#d)" stroke="#888a85"/><path d="m7.629 3.5h8.76l3.535 6.977518-3.535 7.024623-8.76-.0078-3.52-6.971848z" fill="url(#c)" stroke="#fdfdfb"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.isosceles-triangle.svg b/loleaflet/images/lc_basicshapes.isosceles-triangle.svg
new file mode 100644
index 000000000..52c316594
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.isosceles-triangle.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38494639 0 0 .38533611 2.970474 .123405)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><path d="m11.5 1.5298555 8.970145 16.9402885h-16.940289z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.059712"/><path d="m11.5 4 7.234328 13.468657h-13.4686562z" fill="none" stroke="#fdfdfb" stroke-width="1.062686"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.octagon.svg b/loleaflet/images/lc_basicshapes.octagon.svg
new file mode 100644
index 000000000..7708363ce
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.octagon.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.503704 0 0 .11633788 10.861863 16.175388)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="c" gradientTransform="matrix(.874941 0 0 .868551 2.834335 1.349651)" gradientUnits="userSpaceOnUse" x1="10.769515" x2="15.923767" xlink:href="#a" y1="8.71965" y2="15.039417"/><linearGradient id="d" gradientTransform="matrix(1.001575 0 0 1 1.492156 .000001)" gradientUnits="userSpaceOnUse" x1="10.769515" x2="15.923767" xlink:href="#a" y1="8.71965" y2="15.039417"/><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="11.995196" cy="18.036797" display="block" fill="url(#b)" opacity=".6" rx="8.500005" ry="1.963204"/><path d="m6.889 2.5h10.25l3.361 6v4l-3.361 6.003299h-10.25l-3.389-6.003299v-4.0685475z" fill="url(#d)" stroke="#888a85"/><path d="m7.5 3.5h9l3 5.3v3.4l-3 5.302141-9-.0078-3-5.294341v-3.301045z" fill="url(#c)" stroke="#fdfdfb"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.paper.svg b/loleaflet/images/lc_basicshapes.paper.svg
new file mode 100644
index 000000000..8ae35d5b0
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.paper.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.34025939 0 0 .40884402 4.018678 1.02087)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.620227 18.244692)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><ellipse cx="11.820227" cy="20.1061" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><g transform="matrix(1 0 0 -1 0 23.000001)"><path d="m4.5131235 2.5131238h11.4868765l3.486876 3.4868762v14.486877h-14.9737525z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.026247"/><path d="m5.5121508 3.5121512h9.9558112l3.019887 2.9878488v12.98785h-12.9756982z" fill="none" stroke="#fdfdfb" stroke-width="1.024302"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.parallelogram.svg b/loleaflet/images/lc_basicshapes.parallelogram.svg
new file mode 100644
index 000000000..f2e8b8922
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.parallelogram.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38705024 0 0 .31920189 2.921125 3.318499)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.47407407 0 0 .11633788 9.933334 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="11" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="8" ry="1.963204"/><path d="m6.5 4.4835644h14l-3 14.0328716h-14.0164356z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width=".967129"/><path d="m7.5 5.4787621h12l-3 12.0424749h-12.0212374z" fill="none" stroke="#fdfdfb" stroke-width=".957525"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.pentagon.svg b/loleaflet/images/lc_basicshapes.pentagon.svg
new file mode 100644
index 000000000..dbd9822cd
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.pentagon.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.503704 0 0 .11633788 10.861863 16.175388)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="c" gradientTransform="matrix(.874941 0 0 .868551 2.834335 1.349651)" gradientUnits="userSpaceOnUse" x1="10.769515" x2="15.923767" xlink:href="#a" y1="8.71965" y2="15.039417"/><linearGradient id="d" gradientTransform="matrix(1.001575 0 0 1 1.492156 .000001)" gradientUnits="userSpaceOnUse" x1="10.769515" x2="15.923767" xlink:href="#a" y1="8.71965" y2="15.039417"/><g fill-rule="evenodd" transform="translate(0 2)"><ellipse cx="11.995196" cy="18.036797" display="block" fill="url(#b)" opacity=".6" rx="8.500005" ry="1.963204"/><path d="m11.871559 3.623766 8.06297 5.9584575-2.795091 8.9210755h-10.2508706l-2.8239595-8.921861z" fill="url(#d)" stroke="#888a85"/><path d="m11.878997 4.6223379 7.045116 5.2458869-2.534686 7.6339162-8.7607308-.007811-2.5199123-7.5811412z" fill="url(#c)" stroke="#fdfdfb"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.quadrat.svg b/loleaflet/images/lc_basicshapes.quadrat.svg
new file mode 100644
index 000000000..f7c7b2529
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.quadrat.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38494639 0 0 .38533611 2.970474 .123405)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><path d="m3.529856 1.529856h16.940289v16.940289h-16.940289z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.059712"/><path d="m4.531344 2.531343h14.937313v14.937314h-14.937313z" fill="none" stroke="#fdfdfb" stroke-width="1.062686"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.rectangle.svg b/loleaflet/images/lc_basicshapes.rectangle.svg
new file mode 100644
index 000000000..43df9f942
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.rectangle.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38705024 0 0 .31920189 2.921125 3.318499)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.479894 0 0 .11633788 10.772975 17.175389)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="11.852736" cy="19.036797" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".245" rx="8.098211" ry="1.963204"/><path d="m3.483564 4.483564h17.032871v14.032871h-17.032871z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width=".967129"/><path d="m4.478763 5.478762h15.042475v12.042475h-15.042475z" fill="none" stroke="#fdfdfb" stroke-width=".957525"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.right-triangle.svg b/loleaflet/images/lc_basicshapes.right-triangle.svg
new file mode 100644
index 000000000..2e6d6698a
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.right-triangle.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38494639 0 0 .38533611 2.970474 .123405)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><path d="m3.529856 1.5298555 16.940289 16.9402885h-16.940289z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.059712"/><path d="m4.5313435 4 13.4686565 13.468657h-13.4686565z" fill="none" stroke="#fdfdfb" stroke-width="1.062686"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.ring.svg b/loleaflet/images/lc_basicshapes.ring.svg
new file mode 100644
index 000000000..1fe2d3f1d
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.ring.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><radialGradient id="a" cx="2.25" cy="16" gradientTransform="matrix(.479894 0 0 .11633788 10.772975 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><linearGradient id="b" gradientTransform="matrix(1.0540526 0 0 1.0540525 .936542 1.038878)" gradientUnits="userSpaceOnUse" x1="9.446185" x2="13.927343" y1="8.231112" y2="13.700933"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><g transform="translate(0 2)"><ellipse cx="11.852736" cy="17.674644" display="block" fill="url(#a)" fill-rule="evenodd" opacity=".433333" rx="8.098211" ry="1.963204"/><path d="m12 3.5449219a8.4548111 8.4548111 0 0 0 -8.4550781 8.4550781 8.4548111 8.4548111 0 0 0 8.4550781 8.455078 8.4548111 8.4548111 0 0 0 8.455078-8.455078 8.4548111 8.4548111 0 0 0 -8.455078-8.4550781zm0 2.9550781a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1 -5.5 5.5 5.5 5.5 0 0 1 -5.5-5.5 5.5 5.5 0 0 1 5.5-5.5z" fill="url(#b)" fill-rule="evenodd" stroke="#888a85" stroke-linejoin="round" stroke-width="1.090377" transform="translate(0 -2)"/><ellipse cx="12" cy="10" fill="none" rx="7.44816" ry="7.448159" stroke="#fdfdfb" stroke-linejoin="round" stroke-width="1.103681"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.round-quadrat.svg b/loleaflet/images/lc_basicshapes.round-quadrat.svg
new file mode 100644
index 000000000..06219a8e3
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.round-quadrat.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38494639 0 0 .38533611 2.970474 .123405)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><rect fill="url(#a)" height="16.940289" rx="2.470145" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.059712" width="16.940289" x="3.529856" y="1.529856"/><rect fill="none" height="14.937314" rx="1.468657" stroke="#fdfdfb" stroke-width="1.062686" width="14.937313" x="4.531344" y="2.531343"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.round-rectangle.svg b/loleaflet/images/lc_basicshapes.round-rectangle.svg
new file mode 100644
index 000000000..368448984
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.round-rectangle.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38705024 0 0 .31920189 2.921125 3.318499)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><rect fill="url(#a)" height="14.032871" rx="2.483645" ry="2.0462" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width=".967129" width="17.032871" x="3.483564" y="4.483564"/><rect fill="none" height="12.042475" rx="1.478996" ry="1.184033" stroke="#fdfdfb" stroke-width=".957525" width="15.042475" x="4.478763" y="5.478763"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_basicshapes.trapezoid.svg b/loleaflet/images/lc_basicshapes.trapezoid.svg
new file mode 100644
index 000000000..a9a333d9b
--- /dev/null
+++ b/loleaflet/images/lc_basicshapes.trapezoid.svg
@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.38705024 0 0 .31920189 2.921125 3.318499)" gradientUnits="userSpaceOnUse" x1="23.598076" x2="37.746555" y1="23.992306" y2="39.486301"><stop offset="0" stop-color="#eeeeec"/><stop offset="1" stop-color="#e0e0de"/></linearGradient><radialGradient id="b" cx="2.25" cy="16" gradientTransform="matrix(.53333333 0 0 .11633788 10.8 15.813237)" gradientUnits="userSpaceOnUse" r="16.875"><stop offset="0"/><stop offset="1" stop-opacity="0"/></radialGradient><g transform="translate(0 2)"><ellipse cx="12" cy="17.674644" display="block" fill="url(#b)" fill-rule="evenodd" opacity=".711111" rx="9" ry="1.963204"/><path d="m6.5 4.4835644h11l3.016436 14.0328716h-17.0328716z" fill="url(#a)" stroke="#888a85" stroke-linecap="round" stroke-linejoin="round" stroke-width=".967129"/><path d="m7.5 5.4787621h9.021l3.000237 12.0424749h-15.0424744z" fill="none" stroke="#fdfdfb" stroke-width=".957525"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/js/toolbar.js b/loleaflet/js/toolbar.js
index 277d923e6..174cc6ed6 100644
--- a/loleaflet/js/toolbar.js
+++ b/loleaflet/js/toolbar.js
@@ -295,6 +295,68 @@ function insertTable() {
 	}, '.col');
 }
 
+var basicShapes = [
+	{img: 'basicshapes_rectangle', uno: 'BasicShapes.rectangle'},
+	{img: 'basicshapes_round-rectangle', uno: 'BasicShapes.round-rectangle'},
+	{img: 'basicshapes_quadrat', uno: 'BasicShapes.quadrat'},
+	{img: 'basicshapes_round-quadrat', uno: 'BasicShapes.round-quadrat'},
+	{img: 'basicshapes_circle', uno: 'BasicShapes.circle'},
+	{img: 'basicshapes_ellipse', uno: 'BasicShapes.ellipse'},
+
+	{img: 'basicshapes_circle-pie', uno: 'BasicShapes.circle-pie'},
+	{img: 'basicshapes_isosceles-triangle', uno: 'BasicShapes.isosceles-triangle'},
+	{img: 'basicshapes_right-triangle', uno: 'BasicShapes.right-triangle'},
+	{img: 'basicshapes_trapezoid', uno: 'BasicShapes.trapezoid'},
+	{img: 'basicshapes_diamond', uno: 'BasicShapes.diamong'},
+	{img: 'basicshapes_parallelogram', uno: 'BasicShapes.parallelogram'},
+
+	{img: 'basicshapes_pentagon', uno: 'BasicShapes.pentagon'},
+	{img: 'basicshapes_hexagon', uno: 'BasicShapes.hexagon'},
+	{img: 'basicshapes_octagon', uno: 'BasicShapes.octagon'},
+	{img: 'basicshapes_cross', uno: 'BasicShapes.cross'},
+	{img: 'basicshapes_ring', uno: 'BasicShapes.ring'},
+	{img: 'basicshapes_block-arc', uno: 'BasicShapes.block-arc'},
+
+	{img: 'basicshapes_can', uno: 'BasicShapes.can'},
+	{img: 'basicshapes_cube', uno: 'BasicShapes.cube'},
+	{img: 'basicshapes_paper', uno: 'BasicShapes.paper'},
+	{img: 'basicshapes_frame', uno: 'BasicShapes.frame'}
+];
+
+function insertShapes() {
+	var width = 6;
+	var $grid = $('.insertshape-grid');
+
+	var rows = Math.ceil(basicShapes.length / width);
+	var idx = 0;
+
+	if ($grid.children().size() == rows)
+		return;
+
+	for (var r = 0; r < rows; r++) {
+		var $row = $('<div/>').addClass('row');
+		$grid.append($row);
+		for (var c = 0; c < width; c++) {
+			if (idx >= basicShapes.length) {
+				break;
+			}
+			var shape = basicShapes[idx++];
+			var $col = $('<div/>').addClass('col w2ui-icon').addClass(shape.img);
+			$col.data('uno', shape.uno);
+			$row.append($col);
+		}
+
+		if (idx >= basicShapes.length)
+			break;
+	}
+
+	$grid.on({
+		click: function(e) {
+			map.sendUnoCommand('.uno:' + $(e.target).data().uno);
+		}
+	});
+}
+
 function onColorPick(id, color) {
 	if (map.getPermission() !== 'edit' || color === undefined) {
 		return;
@@ -388,6 +450,8 @@ function createToolbar() {
 			{type: 'break', id: 'incdecindent'},
 			{type: 'drop',  id: 'inserttable',  img: 'inserttable', hint: _('Insert table'), overlay: {onShow: insertTable},
 			 html: '<div id="inserttable-wrapper"><div id="inserttable-popup" class="inserttable-pop ui-widget ui-widget-content ui-corner-all"><div class="inserttable-grid"></div><div id="inserttable-status" class="loleaflet-font" style="padding: 5px;"><br/></div></div></div>'},
+			{type: 'drop',  id: 'insertshapes',  img: 'insertshapes', hint: _('Insert shapes'), overlay: {onShow: insertShapes},
+			 html: '<div id="insertshape-wrapper"><div id="insertshape-popup" class="insertshape-pop ui-widget ui-widget-content ui-corner-all"><div class="insertshape-grid"></div></div></div>'},
 			{type: 'button',  id: 'insertobjectchart',  img: 'insertobjectchart', hint: _UNO('.uno:InsertObjectChart', '', true), uno: 'InsertObjectChart'},
 			{type: 'button',  id: 'insertannotation', img: 'annotation', hint: _UNO('.uno:InsertAnnotation', '', true)},
 			{type: 'button',  id: 'insertgraphic',  img: 'insertgraphic', hint: _UNO('.uno:InsertGraphic', '', true)},
@@ -419,6 +483,8 @@ function createToolbar() {
 			updateCommandValues();
 
 			insertTable();
+
+			insertShapes();
 		}
 	});