feat: editor media modal UI for ckeditor

client/components/common/nav-header.vue

@@ -183,8 +183,8 @@
                   v-list-item-title {{$t('common:header.profile')}}
                   v-list-item-subtitle.overline Coming soon
               v-list-item(href='/a', v-if='isAuthenticated && isAdmin')
-                v-list-item-action.btn-animate-rotate: v-icon(color='blue-grey') mdi-settings
+                v-list-item-action.btn-animate-rotate: v-icon(:color='$vuetify.theme.dark ? `blue-grey lighten-3` : `blue-grey`') mdi-settings
-                v-list-item-title.blue-grey--text {{$t('common:header.admin')}}
+                v-list-item-title(:class='$vuetify.theme.dark ? `blue-grey--text text--lighten-3` : `blue-grey--text`') {{$t('common:header.admin')}}
               v-list-item(@click='logout')
                 v-list-item-action: v-icon(color='red') mdi-logout
                 v-list-item-title.red--text {{$t('common:header.logout')}}

client/components/editor.vue

@@ -31,7 +31,7 @@
           )
           v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') mdi-close
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.close') }}
-        v-divider(vertical)
+        v-divider.ml-3(vertical)
     v-content
       component(:is='currentEditor', :save='save')
       editor-modal-properties(v-model='dialogProps')

client/components/editor/editor-modal-editorselect.vue

@@ -8,13 +8,13 @@
             v-flex(xs4)
               v-hover
                 template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey(
+                  v-card.radius-7.grey.animated.fadeInUp(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
+                      img(src='/svg/editor-icon-api.svg', alt='API', style='width: 36px;')
                       .body-2.mt-2.grey--text.text--darken-2 API Docs
                       .caption.grey--text.text--darken-1 REST / GraphQL
                     v-fade-transition
@@ -24,17 +24,17 @@
                         color='primary'
                         opacity='.8'
                         )
-                        .body-2 Coming Soon
+                        .body-2.mt-7 Coming Soon
             v-flex(xs4)
               v-hover
                 template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey(
+                  v-card.radius-7.grey.animated.fadeInUp.wait-p1s(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
+                      img(src='/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
                       .body-2.mt-2.grey--text.text--darken-2 Code
                       .caption.grey--text.text--darken-1 Raw HTML
                     v-fade-transition
@@ -44,27 +44,27 @@
                         color='primary'
                         opacity='.8'
                         )
-                        .body-2 Coming Soon
+                        .body-2.mt-7 Coming Soon
             v-flex(xs4)
-              v-card.radius-7(
+              v-card.radius-7.animated.fadeInUp.wait-p2s(
                 hover
                 light
                 ripple
                 )
                 v-card-text.text-center(@click='selectEditor("markdown")')
-                  img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
+                  img(src='/svg/editor-icon-markdown.svg', alt='Markdown', style='width: 36px;')
-                  .primary--text.body-2.mt-2 Markdown
+                  .body-2.primary--text.mt-2 Markdown
-                  .caption.grey--text Default
+                  .caption.grey--text Plain Text Formatting
             v-flex(xs4)
               v-hover
                 template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey(
+                  v-card.radius-7.grey.animated.fadeInUp.wait-p3s(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
+                      img(src='/svg/editor-icon-tabular.svg', alt='Tabular', style='width: 36px;')
                       .body-2.grey--text.mt-2.text--darken-2 Tabular
                       .caption.grey--text.text--darken-1 Excel-like
                     v-fade-transition
@@ -74,7 +74,7 @@
                         color='primary'
                         opacity='.8'
                         )
-                        .body-2 Coming Soon
+                        .body-2.mt-7 Coming Soon
             //- v-flex(xs4)
             //-   v-card.radius-7.grey(
             //-     hover
@@ -87,25 +87,25 @@
             //-       .body-2.mt-2.grey--text.text--darken-2 Visual Builder
             //-       .caption.grey--text.text--darken-1 Drag-n-drop
             v-flex(xs4)
-              v-card.radius-7(
+              v-card.radius-7.animated.fadeInUp.wait-p4s(
                 hover
                 light
                 ripple
                 )
                 v-card-text.text-center(@click='selectEditor("ckeditor")')
-                  img(src='/svg/icon-open-in-browser.svg', alt='Visual Editor', style='width: 36px;')
+                  img(src='/svg/editor-icon-ckeditor.svg', alt='Visual Editor', style='width: 36px;')
                   .body-2.mt-2.primary--text Visual Editor
                   .caption.grey--text Rich-text WYSIWYG
             v-flex(xs4)
               v-hover
                 template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey(
+                  v-card.radius-7.grey.animated.fadeInUp.wait-p5s(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
+                      img(src='/svg/editor-icon-wikitext.svg', alt='WikiText', style='width: 36px;')
                       .body-2.grey--text.mt-2.text--darken-2 WikiText
                       .caption.grey--text.text--darken-1 MediaWiki Format
                     v-fade-transition
@@ -115,7 +115,7 @@
                         color='primary'
                         opacity='.8'
                         )
-                        .body-2 Coming Soon
+                        .body-2.mt-7 Coming Soon
         .caption.blue--text.text--lighten-2 {{$t('editor:select.cannotChange')}}
 
     v-card.radius-7.mt-3(color='teal darken-3', dark)
@@ -126,7 +126,7 @@
             v-flex(xs4)
               v-hover
                 template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey(
+                  v-card.radius-7.grey.animated.fadeInUp(
                     hover
                     light
                     ripple
@@ -142,17 +142,17 @@
                         color='teal'
                         opacity='.8'
                         )
-                        .body-2 Coming Soon
+                        .body-2.mt-7 Coming Soon
             v-flex(xs4)
               v-hover
                 template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey(
+                  v-card.radius-7.grey.animated.fadeInUp.wait-p1s(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-center(@click='')
-                      img(src='/svg/icon-hierarchy.svg', alt='Code', style='width: 42px;')
+                      img(src='/svg/icon-tree-structure.svg', alt='Tree View', style='width: 42px;')
                       .body-2.mt-1.grey--text.text--darken-2 Tree View
                       .caption.grey--text.text--darken-1 List children pages
                     v-fade-transition
@@ -162,11 +162,11 @@
                         color='teal'
                         opacity='.8'
                         )
-                        .body-2 Coming Soon
+                        .body-2.mt-7 Coming Soon
             v-flex(xs4)
               v-hover
                 template(v-slot:default='{ hover }')
-                  v-card.radius-7.grey(
+                  v-card.radius-7.grey.animated.fadeInUp.wait-p2s(
                     hover
                     light
                     ripple
@@ -182,7 +182,14 @@
                         color='teal'
                         opacity='.8'
                         )
-                        .body-2 Coming Soon
+                        .body-2.mt-7 Coming Soon
+    v-card.radius-7.mt-3(color='grey darken-3', dark)
+      v-toolbar(dense, flat)
+        v-spacer
+        v-btn(text, @click='goBack')
+          v-icon(left) mdi-undo-variant
+          span Cancel
+        v-spacer
 </template>
 
 <script>
@@ -210,6 +217,9 @@ export default {
     selectEditor(name) {
       this.currentEditor = `editor${_.startCase(name)}`
       this.isShown = false
+    },
+    goBack() {
+      window.history.go(-2)
     }
   }
 }

client/components/editor/editor-modal-media.vue

@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
+  v-card.editor-modal-media.animated.fadeInLeft(flat, tile, :class='`is-editor-` + editorKey')
     v-container.pa-3(grid-list-lg, fluid)
       v-layout(row, wrap)
         v-flex(xs12, lg9)
@@ -117,6 +117,9 @@
               .d-flex.mt-3
                 v-toolbar.radius-7(flat, :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-4`', dense, height='44')
                   .body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-1` : `grey--text text--darken-1`') {{$t('editor:assets.fileCount', { count: assets.length })}}
+                v-btn.ml-3.mr-0.my-0.radius-7(color='red darken-2', large, @click='cancel', dark)
+                  v-icon(left) mdi-close
+                  span {{$t('common:actions.cancel')}}
                 v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null')
                   v-icon(left) mdi-playlist-plus
                   span {{$t('common:actions.insert')}}
@@ -280,6 +283,7 @@ export default {
       get() { return this.value },
       set(val) { this.$emit('input', val) }
     },
+    editorKey: get('editor/editorKey'),
     activeModal: sync('editor/activeModal'),
     folderTree: get('editor/media@folderTree'),
     currentFolderId: sync('editor/media@currentFolderId'),
@@ -494,6 +498,9 @@ export default {
       }
       this.deleteAssetLoading = false
       this.$store.commit(`loadingStop`, 'editor-media-deleteasset')
+    },
+    cancel () {
+      this.activeModal = ''
     }
   },
   apollo: {
@@ -547,6 +554,20 @@ export default {
     height: calc(100vh - 112px - 24px);
   }
 
+  &.is-editor-ckeditor {
+    top: 64px;
+    left: 0;
+    width: 100%;
+    height: calc(100vh - 64px - 26px);
+
+    @include until($tablet) {
+      top: 56px;
+      left: 0;
+      width: 100%;
+      height: calc(100vh - 56px - 24px);
+    }
+  }
+
   .filepond--root {
     margin-bottom: 0;
   }

client/static/svg/editor-icon-api.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 6 67 C 4.347656 67 3 65.652344 3 64 L 3 16 C 3 14.347656 4.347656 13 6 13 L 74 13 C 75.652344 13 77 14.347656 77 16 L 77 64 C 77 65.652344 75.652344 67 74 67 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 74 14 C 75.101563 14 76 14.898438 76 16 L 76 64 C 76 65.101563 75.101563 66 74 66 L 6 66 C 4.898438 66 4 65.101563 4 64 L 4 16 C 4 14.898438 4.898438 14 6 14 L 74 14 M 74 12 L 6 12 C 3.789063 12 2 13.789063 2 16 L 2 64 C 2 66.210938 3.789063 68 6 68 L 74 68 C 76.210938 68 78 66.210938 78 64 L 78 16 C 78 13.789063 76.210938 12 74 12 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 38 30.382813 C 39.09375 30.148438 40.570313 30 42.046875 30 C 44.355469 30 46.3125 30.324219 47.585938 31.535156 C 48.765625 32.570313 49.296875 34.222656 49.296875 35.90625 C 49.296875 38.066406 48.648438 39.601563 47.617188 40.695313 C 46.375 42.023438 44.394531 42.613281 42.769531 42.613281 C 42.507813 42.613281 42.269531 42.613281 42.003906 42.585938 L 42.003906 50 L 38.003906 50 L 38.003906 30.382813 Z M 42 39.453125 C 42.207031 39.484375 42.414063 39.484375 42.648438 39.484375 C 44.601563 39.484375 45.457031 38.09375 45.457031 36.234375 C 45.457031 34.488281 44.746094 33.132813 42.945313 33.132813 C 42.59375 33.132813 42.238281 33.191406 42 33.28125 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 52 30 L 56 30 L 56 50 L 52 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 31.902344 50 L 36 50 L 31.773438 30 L 26.710938 30 L 22 50 L 26.097656 50 L 26.96875 46 L 31.0625 46 Z M 29.0625 33.679688 L 29.160156 33.679688 C 29.355469 34.984375 29.644531 37.003906 29.871094 38.21875 L 30.511719 42 L 27.5625 42 L 28.292969 38.21875 C 28.515625 37.0625 28.839844 35.015625 29.0625 33.679688 Z "/>
+</g>
+</svg>

client/static/svg/editor-icon-ckeditor.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 5 7 L 75 7 L 75 73 L 5 73 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 74 8 L 74 72 L 6 72 L 6 8 L 74 8 M 76 6 L 4 6 L 4 74 L 76 74 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 6 8 L 74 8 L 74 24 L 6 24 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 12 14 L 16 14 L 16 18 L 12 18 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 20 14 L 24 14 L 24 18 L 20 18 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 28 14 L 32 14 L 32 18 L 28 18 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 12 32 L 38 32 L 38 66 L 12 66 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 34 L 45 34 C 44.449219 34 44 33.550781 44 33 C 44 32.449219 44.449219 32 45 32 L 67 32 C 67.550781 32 68 32.449219 68 33 C 68 33.550781 67.550781 34 67 34 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 42 L 45 42 C 44.449219 42 44 41.550781 44 41 C 44 40.449219 44.449219 40 45 40 L 67 40 C 67.550781 40 68 40.449219 68 41 C 68 41.550781 67.550781 42 67 42 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 50 L 45 50 C 44.449219 50 44 49.550781 44 49 C 44 48.449219 44.449219 48 45 48 L 67 48 C 67.550781 48 68 48.449219 68 49 C 68 49.550781 67.550781 50 67 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 58 L 45 58 C 44.449219 58 44 57.550781 44 57 C 44 56.449219 44.449219 56 45 56 L 67 56 C 67.550781 56 68 56.449219 68 57 C 68 57.550781 67.550781 58 67 58 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 66 L 45 66 C 44.449219 66 44 65.550781 44 65 C 44 64.449219 44.449219 64 45 64 L 67 64 C 67.550781 64 68 64.449219 68 65 C 68 65.550781 67.550781 66 67 66 Z "/>
+</g>
+</svg>

client/static/svg/editor-icon-code.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 5 7 L 75 7 L 75 73 L 5 73 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 74 8 L 74 72 L 6 72 L 6 8 L 74 8 M 76 6 L 4 6 L 4 74 L 76 74 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 6 8 L 74 8 L 74 18 L 6 18 Z "/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:4;" d="M 14.5 26.529297 L 8.75 22.029297 L 14.5 17.529297 " transform="matrix(2,0,0,2,0,0)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:4;" d="M 22.5 15.5 L 17.5 28.5 " transform="matrix(2,0,0,2,0,0)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:4;" d="M 25.5 26.529297 L 31.25 22.029297 L 25.5 17.529297 " transform="matrix(2,0,0,2,0,0)"/>
+</g>
+</svg>

client/static/svg/editor-icon-html.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#DFF0FE;fill-opacity:1;" d="M 8 67 C 6.347656 67 5 65.652344 5 64 L 5 16 C 5 14.347656 6.347656 13 8 13 L 72 13 C 73.652344 13 75 14.347656 75 16 L 75 64 C 75 65.652344 73.652344 67 72 67 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 72 14 C 73.101563 14 74 14.898438 74 16 L 74 64 C 74 65.101563 73.101563 66 72 66 L 8 66 C 6.898438 66 6 65.101563 6 64 L 6 16 C 6 14.898438 6.898438 14 8 14 L 72 14 M 72 12 L 8 12 C 5.789063 12 4 13.789063 4 16 L 4 64 C 4 66.210938 5.789063 68 8 68 L 72 68 C 74.210938 68 76 66.210938 76 64 L 76 16 C 76 13.789063 74.210938 12 72 12 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 19.839844 31.601563 L 19.839844 38.621094 L 23.402344 38.621094 L 23.402344 31.601563 L 26.808594 31.601563 L 26.808594 49.125 L 23.402344 49.125 L 23.402344 41.792969 L 19.839844 41.792969 L 19.839844 49.125 L 16.433594 49.125 L 16.433594 31.601563 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 32.375 34.746094 L 29.28125 34.746094 L 29.28125 31.601563 L 38.902344 31.601563 L 38.902344 34.746094 L 35.78125 34.746094 L 35.78125 49.125 L 32.375 49.125 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 52.054688 42.988281 C 51.953125 41.324219 51.847656 39.0625 51.875 37.191406 L 51.820313 37.191406 C 51.511719 39.0625 51.042969 41.222656 50.703125 42.570313 L 49.171875 48.839844 L 46.777344 48.839844 L 45.320313 42.675781 C 44.984375 41.273438 44.515625 39.089844 44.230469 37.191406 L 44.179688 37.191406 C 44.125 39.089844 43.996094 41.300781 43.917969 43.042969 L 43.605469 49.125 L 40.695313 49.125 L 41.941406 31.601563 L 45.554688 31.601563 L 46.960938 37.945313 C 47.429688 40.152344 47.871094 42.105469 48.183594 44.078125 L 48.261719 44.078125 C 48.519531 42.128906 48.910156 40.152344 49.351563 37.945313 L 50.757813 31.601563 L 54.34375 31.601563 L 55.410156 49.125 L 52.367188 49.125 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 58.554688 31.601563 L 61.960938 31.601563 L 61.960938 46.238281 L 66.433594 46.238281 L 66.433594 49.125 L 58.554688 49.125 Z "/>
+</g>
+</svg>

client/static/svg/editor-icon-markdown.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 5.265625 65 C 2.914063 65 1 63.085938 1 60.734375 L 1 19.265625 C 1 16.914063 2.914063 15 5.265625 15 L 74.730469 15 C 77.085938 15 78.996094 16.914063 78.996094 19.265625 L 78.996094 60.730469 C 78.996094 63.085938 77.085938 64.996094 74.730469 64.996094 L 5.265625 64.996094 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 74.734375 16 C 76.535156 16 78 17.464844 78 19.265625 L 78 60.734375 C 78 62.535156 76.535156 64 74.734375 64 L 5.265625 64 C 3.464844 64 2 62.535156 2 60.734375 L 2 19.265625 C 2 17.464844 3.464844 16 5.265625 16 L 74.734375 16 M 74.734375 14 L 5.265625 14 C 2.371094 14 0 16.371094 0 19.265625 L 0 60.734375 C 0 63.628906 2.371094 66 5.265625 66 L 74.734375 66 C 77.628906 66 80 63.628906 80 60.734375 L 80 19.265625 C 80 16.371094 77.628906 14 74.734375 14 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 34 26 L 26 37.199219 L 18 26 L 10 26 L 10 54 L 18 54 L 18 36.222656 L 26 47.335938 L 34 35.886719 L 34 54 L 42 54 L 42 26 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 64 40 L 64 26 L 56 26 L 56 40 L 48.5 40 L 60 54 L 72 40 Z "/>
+</g>
+</svg>

client/static/svg/editor-icon-tabular.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 5 5 L 75 5 L 75 75 L 5 75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 74 6 L 74 74 L 6 74 L 6 6 L 74 6 M 76 4 L 4 4 L 4 76 L 76 76 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 62 8 L 62 74 L 60 74 L 60 8 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 48 8 L 48 74 L 46 74 L 46 8 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 34 8 L 34 74 L 32 74 L 32 8 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 8 32 L 74 32 L 74 34 L 8 34 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 8 46 L 74 46 L 74 48 L 8 48 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#98CCFD;fill-opacity:1;" d="M 8 60 L 74 60 L 74 62 L 8 62 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 61 5 L 75 5 L 75 19 L 61 19 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 74 6 L 74 18 L 62 18 L 62 6 L 74 6 M 76 4 L 60 4 L 60 20 L 76 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 47 5 L 61 5 L 61 19 L 47 19 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 60 6 L 60 18 L 48 18 L 48 6 L 60 6 M 62 4 L 46 4 L 46 20 L 62 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 33 5 L 47 5 L 47 19 L 33 19 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 46 6 L 46 18 L 34 18 L 34 6 L 46 6 M 48 4 L 32 4 L 32 20 L 48 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 19 5 L 33 5 L 33 19 L 19 19 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 32 6 L 32 18 L 20 18 L 20 6 L 32 6 M 34 4 L 18 4 L 18 20 L 34 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 5 5 L 19 5 L 19 19 L 5 19 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 18 6 L 18 18 L 6 18 L 6 6 L 18 6 M 20 4 L 4 4 L 4 20 L 20 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 5 19 L 19 19 L 19 33 L 5 33 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 18 20 L 18 32 L 6 32 L 6 20 L 18 20 M 20 18 L 4 18 L 4 34 L 20 34 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 5 33 L 19 33 L 19 47 L 5 47 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 18 34 L 18 46 L 6 46 L 6 34 L 18 34 M 20 32 L 4 32 L 4 48 L 20 48 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 5 47 L 19 47 L 19 61 L 5 61 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 18 48 L 18 60 L 6 60 L 6 48 L 18 48 M 20 46 L 4 46 L 4 62 L 20 62 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 5 61 L 19 61 L 19 75 L 5 75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 18 62 L 18 74 L 6 74 L 6 62 L 18 62 M 20 60 L 4 60 L 4 76 L 20 76 Z "/>
+</g>
+</svg>

client/static/svg/editor-icon-wikitext.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#B6DCFE;fill-opacity:1;" d="M 44.316406 75 C 47.148438 73.007813 49 69.714844 49 66 L 49 11 L 75 11 L 75 66 C 75 70.960938 70.960938 75 66 75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 74 12 L 74 66 C 74 70.410156 70.410156 74 66 74 L 46.9375 74 C 48.839844 71.875 50 69.070313 50 66 L 50 12 L 74 12 M 76 10 L 48 10 L 48 66 C 48 71.523438 43.523438 76 38 76 L 66 76 C 71.523438 76 76 71.523438 76 66 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#DFF0FE;fill-opacity:1;" d="M 14 75 C 9.039063 75 5 70.960938 5 66 L 5 3 L 57 3 L 57 66 C 57 70.625 60.507813 74.445313 65 74.945313 L 65 75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 56 4 L 56 66 C 56 69.269531 57.574219 72.175781 60.007813 74 L 14 74 C 9.589844 74 6 70.410156 6 66 L 6 4 L 56 4 M 58 2 L 4 2 L 4 66 C 4 71.523438 8.476563 76 14 76 L 66 76 L 66 74 C 61.582031 74 58 70.417969 58 66 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 22 L 57 22 C 56.449219 22 56 21.550781 56 21 C 56 20.449219 56.449219 20 57 20 L 67 20 C 67.550781 20 68 20.449219 68 21 C 68 21.550781 67.550781 22 67 22 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 28 L 57 28 C 56.449219 28 56 27.550781 56 27 C 56 26.449219 56.449219 26 57 26 L 67 26 C 67.550781 26 68 26.449219 68 27 C 68 27.550781 67.550781 28 67 28 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 34 L 57 34 C 56.449219 34 56 33.550781 56 33 C 56 32.449219 56.449219 32 57 32 L 67 32 C 67.550781 32 68 32.449219 68 33 C 68 33.550781 67.550781 34 67 34 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 40 L 57 40 C 56.449219 40 56 39.550781 56 39 C 56 38.449219 56.449219 38 57 38 L 67 38 C 67.550781 38 68 38.449219 68 39 C 68 39.550781 67.550781 40 67 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 46 L 57 46 C 56.449219 46 56 45.550781 56 45 C 56 44.449219 56.449219 44 57 44 L 67 44 C 67.550781 44 68 44.449219 68 45 C 68 45.550781 67.550781 46 67 46 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 52 L 57 52 C 56.449219 52 56 51.550781 56 51 C 56 50.449219 56.449219 50 57 50 L 67 50 C 67.550781 50 68 50.449219 68 51 C 68 51.550781 67.550781 52 67 52 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 58 L 57 58 C 56.449219 58 56 57.550781 56 57 C 56 56.449219 56.449219 56 57 56 L 67 56 C 67.550781 56 68 56.449219 68 57 C 68 57.550781 67.550781 58 67 58 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 67 64 L 57 64 C 56.449219 64 56 63.550781 56 63 C 56 62.449219 56.449219 62 57 62 L 67 62 C 67.550781 62 68 62.449219 68 63 C 68 63.550781 67.550781 64 67 64 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 24 L 35 24 C 34.449219 24 34 23.550781 34 23 C 34 22.449219 34.449219 22 35 22 L 47 22 C 47.550781 22 48 22.449219 48 23 C 48 23.550781 47.550781 24 47 24 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 30 L 35 30 C 34.449219 30 34 29.550781 34 29 C 34 28.449219 34.449219 28 35 28 L 47 28 C 47.550781 28 48 28.449219 48 29 C 48 29.550781 47.550781 30 47 30 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 36 L 35 36 C 34.449219 36 34 35.550781 34 35 C 34 34.449219 34.449219 34 35 34 L 47 34 C 47.550781 34 48 34.449219 48 35 C 48 35.550781 47.550781 36 47 36 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 42 L 35 42 C 34.449219 42 34 41.550781 34 41 C 34 40.449219 34.449219 40 35 40 L 47 40 C 47.550781 40 48 40.449219 48 41 C 48 41.550781 47.550781 42 47 42 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 48 L 35 48 C 34.449219 48 34 47.550781 34 47 C 34 46.449219 34.449219 46 35 46 L 47 46 C 47.550781 46 48 46.449219 48 47 C 48 47.550781 47.550781 48 47 48 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 54 L 35 54 C 34.449219 54 34 53.550781 34 53 C 34 52.449219 34.449219 52 35 52 L 47 52 C 47.550781 52 48 52.449219 48 53 C 48 53.550781 47.550781 54 47 54 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 60 L 35 60 C 34.449219 60 34 59.550781 34 59 C 34 58.449219 34.449219 58 35 58 L 47 58 C 47.550781 58 48 58.449219 48 59 C 48 59.550781 47.550781 60 47 60 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 47 66 L 35 66 C 34.449219 66 34 65.550781 34 65 C 34 64.449219 34.449219 64 35 64 L 47 64 C 47.550781 64 48 64.449219 48 65 C 48 65.550781 47.550781 66 47 66 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 24 L 15 24 C 14.449219 24 14 23.550781 14 23 C 14 22.449219 14.449219 22 15 22 L 27 22 C 27.550781 22 28 22.449219 28 23 C 28 23.550781 27.550781 24 27 24 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 30 L 15 30 C 14.449219 30 14 29.550781 14 29 C 14 28.449219 14.449219 28 15 28 L 27 28 C 27.550781 28 28 28.449219 28 29 C 28 29.550781 27.550781 30 27 30 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 36 L 15 36 C 14.449219 36 14 35.550781 14 35 C 14 34.449219 14.449219 34 15 34 L 27 34 C 27.550781 34 28 34.449219 28 35 C 28 35.550781 27.550781 36 27 36 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 42 L 15 42 C 14.449219 42 14 41.550781 14 41 C 14 40.449219 14.449219 40 15 40 L 27 40 C 27.550781 40 28 40.449219 28 41 C 28 41.550781 27.550781 42 27 42 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 48 L 15 48 C 14.449219 48 14 47.550781 14 47 C 14 46.449219 14.449219 46 15 46 L 27 46 C 27.550781 46 28 46.449219 28 47 C 28 47.550781 27.550781 48 27 48 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 54 L 15 54 C 14.449219 54 14 53.550781 14 53 C 14 52.449219 14.449219 52 15 52 L 27 52 C 27.550781 52 28 52.449219 28 53 C 28 53.550781 27.550781 54 27 54 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 60 L 15 60 C 14.449219 60 14 59.550781 14 59 C 14 58.449219 14.449219 58 15 58 L 27 58 C 27.550781 58 28 58.449219 28 59 C 28 59.550781 27.550781 60 27 60 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 27 66 L 15 66 C 14.449219 66 14 65.550781 14 65 C 14 64.449219 14.449219 64 15 64 L 27 64 C 27.550781 64 28 64.449219 28 65 C 28 65.550781 27.550781 66 27 66 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#4788C7;fill-opacity:1;" d="M 46 16 L 16 16 C 14.898438 16 14 15.101563 14 14 C 14 12.898438 14.898438 12 16 12 L 46 12 C 47.101563 12 48 12.898438 48 14 C 48 15.101563 47.101563 16 46 16 Z "/>
+</g>
+</svg>

client/static/svg/icon-tree-structure.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128pt" height="128pt" viewBox="0 0 128 128" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 40.800781 32.5 C 40.800781 27.085938 36.5 22.699219 31.199219 22.699219 C 25.898438 22.699219 21.601563 27.085938 21.601563 32.5 C 21.601563 37.914063 25.898438 42.300781 31.199219 42.300781 C 36.5 42.300781 40.800781 37.914063 40.800781 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 73.601563 32.5 C 73.601563 27.085938 69.300781 22.699219 64 22.699219 C 58.699219 22.699219 54.398438 27.085938 54.398438 32.5 C 54.398438 37.914063 58.699219 42.300781 64 42.300781 C 69.300781 42.300781 73.601563 37.914063 73.601563 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 40.800781 95.5 C 40.800781 90.085938 36.5 85.699219 31.199219 85.699219 C 25.898438 85.699219 21.601563 90.085938 21.601563 95.5 C 21.601563 100.914063 25.898438 105.300781 31.199219 105.300781 C 36.5 105.300781 40.800781 100.914063 40.800781 95.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 73.601563 95.5 C 73.601563 90.085938 69.300781 85.699219 64 85.699219 C 58.699219 85.699219 54.398438 90.085938 54.398438 95.5 C 54.398438 100.914063 58.699219 105.300781 64 105.300781 C 69.300781 105.300781 73.601563 100.914063 73.601563 95.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#FFFFFF;fill-opacity:1;" d="M 106.398438 32.5 C 106.398438 27.085938 102.101563 22.699219 96.800781 22.699219 C 91.5 22.699219 87.199219 27.085938 87.199219 32.5 C 87.199219 37.914063 91.5 42.300781 96.800781 42.300781 C 102.101563 42.300781 106.398438 37.914063 106.398438 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 31.199219 45.300781 C 24.199219 45.300781 18.601563 39.601563 18.601563 32.5 C 18.601563 25.398438 24.300781 19.699219 31.199219 19.699219 C 38.101563 19.699219 43.800781 25.398438 43.800781 32.5 C 43.898438 39.5 38.199219 45.300781 31.199219 45.300781 Z M 31.199219 25.699219 C 27.5 25.699219 24.601563 28.699219 24.601563 32.5 C 24.601563 36.199219 27.601563 39.300781 31.199219 39.300781 C 34.800781 39.300781 37.800781 36.300781 37.800781 32.5 C 37.898438 28.699219 34.898438 25.699219 31.199219 25.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 64 45.300781 C 57 45.300781 51.398438 39.601563 51.398438 32.5 C 51.398438 25.398438 57.101563 19.699219 64 19.699219 C 71 19.699219 76.601563 25.398438 76.601563 32.5 C 76.601563 39.5 71 45.300781 64 45.300781 Z M 64 25.699219 C 60.300781 25.699219 57.398438 28.699219 57.398438 32.5 C 57.398438 36.199219 60.398438 39.300781 64 39.300781 C 67.699219 39.300781 70.601563 36.300781 70.601563 32.5 C 70.601563 28.699219 67.699219 25.699219 64 25.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 31.199219 108.300781 C 24.199219 108.300781 18.601563 102.601563 18.601563 95.5 C 18.601563 88.398438 24.300781 82.699219 31.199219 82.699219 C 38.101563 82.699219 43.800781 88.398438 43.800781 95.5 C 43.898438 102.601563 38.199219 108.300781 31.199219 108.300781 Z M 31.199219 88.699219 C 27.5 88.699219 24.601563 91.699219 24.601563 95.5 C 24.601563 99.199219 27.601563 102.300781 31.199219 102.300781 C 34.800781 102.300781 37.800781 99.300781 37.800781 95.5 C 37.898438 91.800781 34.898438 88.699219 31.199219 88.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 64 108.300781 C 57 108.300781 51.398438 102.601563 51.398438 95.5 C 51.398438 88.398438 57.101563 82.699219 64 82.699219 C 71 82.699219 76.601563 88.398438 76.601563 95.5 C 76.601563 102.601563 71 108.300781 64 108.300781 Z M 64 88.699219 C 60.300781 88.699219 57.398438 91.699219 57.398438 95.5 C 57.398438 99.199219 60.398438 102.300781 64 102.300781 C 67.699219 102.300781 70.601563 99.300781 70.601563 95.5 C 70.601563 91.800781 67.699219 88.699219 64 88.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 96.800781 45.300781 C 89.800781 45.300781 84.199219 39.601563 84.199219 32.5 C 84.199219 25.398438 89.898438 19.699219 96.800781 19.699219 C 103.800781 19.699219 109.398438 25.398438 109.398438 32.5 C 109.398438 39.5 103.800781 45.300781 96.800781 45.300781 Z M 96.800781 25.699219 C 93.101563 25.699219 90.199219 28.699219 90.199219 32.5 C 90.199219 36.199219 93.199219 39.300781 96.800781 39.300781 C 100.5 39.300781 103.398438 36.300781 103.398438 32.5 C 103.398438 28.699219 100.5 25.699219 96.800781 25.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 31.199219 88.699219 C 29.5 88.699219 28.199219 87.398438 28.199219 85.699219 L 28.199219 42.300781 C 28.199219 40.601563 29.5 39.300781 31.199219 39.300781 C 32.898438 39.300781 34.199219 40.601563 34.199219 42.300781 L 34.199219 85.800781 C 34.199219 87.398438 32.898438 88.699219 31.199219 88.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 64 88.699219 C 62.300781 88.699219 61 87.398438 61 85.699219 L 61 42.300781 C 61 40.601563 62.300781 39.300781 64 39.300781 C 65.699219 39.300781 67 40.601563 67 42.300781 L 67 85.800781 C 67 87.398438 65.699219 88.699219 64 88.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:#454B54;fill-opacity:1;" d="M 96.800781 67 L 31.199219 67 C 29.5 67 28.199219 65.699219 28.199219 64 C 28.199219 62.300781 29.5 61 31.199219 61 L 93.800781 61 L 93.800781 42.300781 C 93.800781 40.601563 95.101563 39.300781 96.800781 39.300781 C 98.5 39.300781 99.800781 40.601563 99.800781 42.300781 L 99.800781 64 C 99.800781 65.699219 98.398438 67 96.800781 67 Z "/>
+</g>
+</svg>